article,
footer,
header,
nav {
	display: block
}

html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%
}

a {
	background: 0 0
}

a:active,
a:hover {
	outline: 0
}

h1 {
	margin: .67em 0
}

@media print {
	* {
		background: 0 0!important;
		box-shadow: none!important;
		color: #000!important;
		text-shadow: none!important
	}
	a,
	a:visited {
		text-decoration: underline
	}
	a[href]:after {
		content: " (" attr(href) ")"
	}
	a[href^="#"]:after {
		content: ""
	}
	img {
		page-break-inside: avoid;
		max-width: 100%!important
	}
	h2,
	p {
		orphans: 3;
		widows: 3
	}
	h2 {
		page-break-after: avoid
	}
	.navbar {
		display: none
	}
}

*,
:after,
:before {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box
}

html {
	-webkit-tap-highlight-color: transparent
}

body {
	background-color: #3da1cc;
	line-height: 1.428571429
}

a {
	text-decoration: none
}

a:focus,
a:hover {
	text-decoration: underline
}

a:focus {
	outline-offset: -2px
}

img {
	vertical-align: middle
}

h1,
h2,
h5 {
	color: inherit;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.1
}

h1,
h2 {
	margin-bottom: 10px;
	margin-top: 20px
}

h5 {
	margin-bottom: 10px;
	margin-top: 10px
}

h1 {
	font-size: 36px
}

h2 {
	font-size: 30px
}

h5 {
	font-size: 14px
}

p {
	margin: 0 0 10px
}

small {
	font-size: 85%
}

.text-right {
	text-align: right
}

.text-center {
	text-align: center
}

ol,
ul {
	margin-bottom: 10px;
	margin-top: 0
}

ul ul {
	margin-bottom: 0
}

.container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px
}

.container:after,
.container:before {
	content: " ";
	display: table
}

.container:after {
	clear: both
}

@media (min-width:768px) {
	.container {
		width: 750px
	}
}

@media (min-width:992px) {
	.container {
		width: 970px
	}
}

@media (min-width:1200px) {
	.container {
		width: 1170px
	}
}

.row {
	margin-left: -15px;
	margin-right: -15px
}

.row:after,
.row:before {
	content: " ";
	display: table
}

.row:after {
	clear: both
}

.col-md-4,
.col-md-6,
.col-md-8,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-6,
.col-sm-8,
.col-sm-9,
.col-xs-10,
.col-xs-12,
.col-xs-2 {
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	position: relative
}

.col-xs-10,
.col-xs-12,
.col-xs-2 {
	float: left
}

.col-xs-12 {
	width: 100%
}

.col-xs-10 {
	width: 83.33333333333334%
}

.col-xs-2 {
	width: 16.666666666666664%
}

@media (min-width:768px) {
	.col-sm-12,
	.col-sm-2,
	.col-sm-3,
	.col-sm-6,
	.col-sm-8,
	.col-sm-9 {
		float: left
	}
	.col-sm-12 {
		width: 100%
	}
	.col-sm-9 {
		width: 75%
	}
	.col-sm-8 {
		width: 66.66666666666666%
	}
	.col-sm-6 {
		width: 50%
	}
	.col-sm-3 {
		width: 25%
	}
	.col-sm-2 {
		width: 16.666666666666664%
	}
}

@media (min-width:992px) {
	.col-md-4,
	.col-md-6,
	.col-md-8 {
		float: left
	}
	.col-md-8 {
		width: 66.66666666666666%
	}
	.col-md-6 {
		width: 50%
	}
	.col-md-4 {
		width: 33.33333333333333%
	}
}

.open>a {
	outline: 0
}

.carousel-inner {
	overflow: hidden;
	position: relative;
	width: 100%
}

.carousel-inner>.item {
	display: none;
	position: relative;
	transition: .6s ease-in-out left;
	-webkit-transition: .6s ease-in-out left
}

.carousel-inner>.item>a>img,
.carousel-inner>.item>img {
	display: block;
	height: auto;
	line-height: 1;
	max-width: 100%
}

.carousel-inner>.active,
.carousel-inner>.next,
.carousel-inner>.prev {
	display: block
}

.carousel-inner>.active {
	left: 0
}

.carousel-inner>.next,
.carousel-inner>.prev {
	position: absolute;
	top: 0;
	width: 100%
}

.carousel-inner>.next {
	left: 100%
}

.carousel-inner>.prev {
	left: -100%
}

.carousel-inner>.next.left,
.carousel-inner>.prev.right {
	left: 0
}

.carousel-inner>.active.left {
	left: -100%
}

.carousel-inner>.active.right {
	left: 100%
}

.carousel-control {
	bottom: 0;
	left: 0;
	position: absolute
}

.carousel-control.left {
	background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .5) 0), color-stop(rgba(0, 0, 0, .0001) 100%));
	background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .0001) 100%);
	background-repeat: repeat-x
}

.carousel-control.right {
	background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .0001) 0), color-stop(rgba(0, 0, 0, .5) 100%));
	background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, .5) 100%);
	background-repeat: repeat-x;
	left: auto;
	right: 0
}

.carousel-control:focus,
.carousel-control:hover {
	color: #fff;
	opacity: .9;
	outline: 0;
	text-decoration: none
}

.carousel-indicators {
	left: 50%;
	list-style: none;
	margin-left: -30%;
	padding-left: 0;
	text-align: center;
	width: 60%;
	z-index: 15
}

.carousel-indicators li {
	background-color: transparent;
	border: 1px solid #fff;
	cursor: pointer;
	display: inline-block;
	height: 10px;
	margin: 1px;
	text-indent: -999px;
	width: 10px
}

.carousel-indicators .active {
	background-color: #fff;
	height: 12px;
	margin: 0;
	width: 12px
}

.carousel-caption {
	bottom: 20px;
	left: 15%;
	padding-bottom: 20px;
	padding-top: 20px;
	position: absolute;
	right: 15%
}

@media screen and (min-width:768px) {
	.carousel-caption {
		left: 20%;
		padding-bottom: 30px;
		right: 20%
	}
	.carousel-indicators {
		bottom: 20px
	}
}

.pull-right {
	float: right!important
}

.show {
	display: block!important
}

.visible-sm,
.visible-xs {
	display: none!important
}

@media (max-width:767px) {
	.visible-xs {
		display: block!important
	}
}

@media (min-width:768px) and (max-width:991px) {
	.visible-xs.visible-sm {
		display: block!important
	}
}

@media (max-width:767px) {
	.visible-sm.visible-xs {
		display: block!important
	}
}

@media (min-width:768px) and (max-width:991px) {
	.visible-sm {
		display: block!important
	}
}

.mtop50 {
	margin-top: 50px
}

@font-face {
	font-family: ak-portfolio;
	src: url(fonts/ak-portfolio.eot?-jft1xg);
	src: url(fonts/ak-portfolio.eot?#iefix-jft1xg) format('embedded-opentype'), url(fonts/ak-portfolio.woff?-jft1xg) format('woff'), url(fonts/ak-portfolio.ttf?-jft1xg) format('truetype'), url(fonts/ak-portfolio.svg?-jft1xg#ak-portfolio) format('svg');
	font-weight: 400;
	font-style: normal
}

[class*=" icon-"],
[class^=icon-] {
	font-family: ak-portfolio;
	speak: none;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.icon-ck-linkedin:before {
	content: "\25"
}

.icon-ck-twitter:before {
	content: "\26"
}

.icon-ck-google:before {
	content: "\27"
}

.icon-ck-facebook:before {
	content: "\28"
}

.icon-ck-logo:before,
.icon-ck-menu:before {
	content: "\2a"
}

.icon-ck-left:before {
	content: "\e601"
}

.icon-ck-right:before {
	content: "\e606"
}

.icon-ck-up:before {
	content: "\e607"
}

.icon-ck-xing:before {
	content: "\24"
}

.icon-ck-code:before {
	content: "\e602"
}

.icon-ck-team:before {
	content: "\e603"
}

.icon-ck-down:before {
	content: "\e608"
}

.icon-ck-plus:before {
	content: "\e60a"
}

.icon-ck-design:before {
	content: "\e609"
}

.icon-ck-backend:before {
	content: "\e600"
}

.icon-ck-heart:before {
	content: "\e604"
}

@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 100;
	src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/roboto-thin.woff) format('woff')
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/open-sans-light.woff) format('woff')
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans'), local('OpenSans'), url(fonts/open-sans.woff) format('woff')
}

html {
	font-size: 10px
}

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 160%;
	color: #000;
	margin: 0
}

h1,
h2,
h5 {
	font-weight: 100
}

a {
	color: #000;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in
}

a:focus,
a:hover {
	color: #3da1cc;
	outline: 0
}

p {
	font-weight: 300
}

li,
ul {
	list-style-type: none;
	margin: 0;
	padding: 0
}

strong {
	font-weight: 400;
	font-size: .95em
}

img {
	display: inline-block;
	border: 0;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%
}

.page {
	position: relative
}

article {
	display: block;
	height: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto
}

.section-wrapper {
	display: block;
	max-width: 980px;
	margin: 0 auto
}

.navbar {
	min-height: 50px;
	padding: 0
}

.navbar .navbar-inner {
	display: block
}

.navbar .item {
	display: inline-block;
	margin: 0 .8em
}

.navbar .item .link:active,
.navbar .item .link:focus,
.navbar .item .link:hover {
	background: 0 0
}

.navbar .nav {
	padding-left: 1em;
	padding-right: 1em;
	position: absolute;
	background: #000;
	z-index: 50
}

.navbar .nav>i {
	cursor: pointer
}

@media (min-width:992px) {
	.navbar {
		margin: 0
	}
}

@media (max-width:992px) {
	.navbar {
		min-height: 60px
	}
	.nav>i {
		display: block;
		font-size: 2em
	}
	.nav .navbar-inner {
		display: none;
		padding-top: 1em
	}
	.nav .navbar-inner .item {
		display: block
	}
	.nav .navbar-inner .item .link {
		padding: .5em;
		border: 0;
		display: inline-block
	}
}

.timeline {
	position: relative;
	margin: 6em auto;
	padding: 1em 0;
	list-style-type: none
}

.timeline:before {
	position: absolute;
	left: 50%;
	top: 0;
	content: ' ';
	display: block;
	width: 1px;
	height: 100%;
	margin-left: -1px;
	background: #505050;
	background: -moz-linear-gradient(top, rgba(80, 80, 80, 0) 0, #000 8%, #000 92%, rgba(80, 80, 80, 0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #1e5799), color-stop(100%, #7db9e8));
	background: -webkit-linear-gradient(top, rgba(80, 80, 80, 0) 0, #000 8%, #000 92%, rgba(80, 80, 80, 0) 100%);
	background: -o-linear-gradient(top, rgba(80, 80, 80, 0) 0, #000 8%, #000 92%, rgba(80, 80, 80, 0) 100%);
	background: -ms-linear-gradient(top, rgba(80, 80, 80, 0) 0, #000 8%, #000 92%, rgba(80, 80, 80, 0) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 8%, #000 92%, rgba(0, 0, 0, 0) 100%);
	z-index: 5
}

.timeline li {
	padding: 0;
	margin-top: -3em
}

.timeline li:after {
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden
}

.timeline .item-year {
	margin: -5em 0 3em
}

.direction-l {
	position: relative;
	width: 46.5%;
	float: left;
	text-align: right
}

.direction-r {
	position: relative;
	width: 46.5%;
	float: right
}

.flag-wrapper {
	position: relative;
	display: inline-block
}

.flag {
	position: relative;
	display: inline;
	padding: 2px 10px;
	background: #000;
	color: #fff;
	text-align: left;
	font-family: Roboto, sans-serif;
	font-size: 2em;
	font-weight: 100
}

.direction-l .flag:before,
.direction-r .flag:before {
	position: absolute;
	top: 57%;
	right: -1.24em;
	content: ' ';
	display: block;
	width: 13px;
	height: 13px;
	margin-top: -10px;
	background: #fc0;
	border: 1px solid #000;
	border-radius: 50%;
	z-index: 10
}

.direction-r .flag:before {
	left: -1.24em
}

.direction-l .flag:after,
.direction-r .flag:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 100%;
	height: 0;
	width: 0;
	margin-top: -8px;
	border: solid transparent;
	border-left-color: #000;
	border-width: 8px
}

.direction-r .flag:after {
	left: inherit;
	border-left-color: transparent;
	border-right-color: #000;
	right: 100%
}

.time-wrapper {
	display: block;
	vertical-align: middle
}

.time {
	display: inline-block;
	padding: 2px 6px 0;
	color: #000;
	border: 1px solid #000;
	border-width: 1px 1px 0
}

.desc {
	margin: 0;
	padding: 1em;
	background: #fff;
	line-height: 1.5em;
	font-size: 1.3em
}

@media screen and (max-width:992px) {
	.direction-l .flag:before,
	.direction-r .flag:before {
		right: -1.15em
	}
	.direction-r .flag:before {
		left: -1.15em
	}
	.direction-l .desc {
		margin-left: 2em
	}
	.direction-r .desc {
		margin-right: 2em
	}
}

@media screen and (max-width:767px) {
	.flag {
		font-size: 1.8em
	}
	.direction-l .flag:before,
	.direction-r .flag:before {
		display: none
	}
}

@media screen and (max-width:480px) {
	.timeline:before {
		width: 0
	}
	.timeline {
		width: 100%;
		padding: 2em 0 1em;
		margin-top: 0
	}
	.timeline li {
		padding: 1em 0;
		margin: 0
	}
	.timeline .item-year {
		display: none
	}
	.direction-l,
	.direction-r {
		float: none;
		width: 100%
	}
	.flag {
		z-index: 15;
		font-size: 2.2em
	}
	.direction-l .flag:before,
	.direction-r .flag:before {
		display: none
	}
	.direction-l .flag:after,
	.direction-r .flag:after {
		content: '';
		position: absolute;
		left: 50%;
		top: -8px;
		height: 0;
		width: 0;
		margin-left: -8px;
		border: solid transparent;
		border-width: 8px
	}
	.time-wrapper {
		display: block;
		position: relative;
		margin: 4px 0 0;
		z-index: 14
	}
	.direction-l .time-wrapper,
	.direction-r .time-wrapper {
		float: none
	}
	.desc {
		position: relative;
		margin: 0;
		padding: 1em;
		z-index: 15;
		text-align: left
	}
	.direction-l .desc,
	.direction-r .desc {
		position: relative;
		margin: 0 auto;
		padding: 1em;
		z-index: 15
	}
}

.page1,
.page2,
.page4 {
	background: #3da1cc
}

.page3 {
	background: url(../img/bg-waves.png) 50% 50% no-repeat #3da1cc;
	background-size: cover
}

.site-header {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	padding: 1em 0 0;
	width: 100%;
	z-index: 509;
	background: #000;
	color: #fff;
	box-shadow: 0 .3em 1em rgba(0, 0, 0, .4);
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif
}

.site-header .link {
	color: #fff;
	text-decoration: none;
	letter-spacing: .05em
}

.site-header .link.enabled,
.site-header .link:active,
.site-header .link:focus,
.site-header .link:hover {
	color: #fc0;
	text-decoration: none
}

.site-header .site-header-right .bold {
	font-weight: 400
}

.site-header .site-header-right .headline {
	padding: 1px 0 0;
	font-size: 1em;
	font-weight: 100;
	margin: 0;
	line-height: 0;
	white-space: nowrap;
	font-family: 'Open Sans', sans-serif
}

.lang-de .active-de,
.lang-en .active-en {
	color: #fc0;
	text-decoration: none
}

.heading {
	display: block;
	padding-top: 7em;
	font-size: 1em;
	font-weight: 100;
	max-width: 980px;
	margin: 0 auto
}

.heading .headline {
	display: block;
	margin: 0;
	font-family: Roboto, sans-serif;
	font-size: 2.5em;
	text-transform: uppercase
}

.heading .headline .dark {
	display: inline;
	margin: 0;
	padding: 0 10px;
	background: #fc0;
	color: #000
}

.heading .subline {
	display: block;
	margin: .2em 0 .2em 4em;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.35em;
	text-align: right
}

.heading .subline .light {
	display: inline;
	line-height: 1.35em;
	margin: 0;
	padding: 0 .2em;
	background: #fff;
	color: #000
}

.intro-heading .light {
	padding: 10px 15px;
	margin: 0 0 0 2em;
	background: #fff;
	color: #000;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.4em
}

.intro-heading .dark {
	display: inline-block;
	padding: 5px 10px;
	margin: 0;
	font-family: Roboto, sans-serif;
	background: #fc0;
	color: #000
}

.section-divider {
	border-top: 1px solid #fff;
	background: #3da1cc;
	font-size: 1.3em;
	line-height: 1.2em;
	width: 100%
}

.section-divider .link {
	display: block;
	width: 55px;
	background: 0 0;
	color: #fff;
	border: 1px solid #fff;
	border-top-color: #3da1cc;
	padding: 9px 10px;
	margin: -1px auto 0;
	text-decoration: none;
	text-align: center
}

.section-divider:hover .link {
	background: #fc0;
	color: #3da1cc;
	border-top-color: #fc0
}

.intro-img {
	margin: 0;
	max-width: 9em;
	border: 3px solid #fff;
	border-radius: 4em 0
}

.info-box {
	margin-top: 4em
}

.info-box .info-box-item .info-box-headline {
	font: 100 2.5em/1.2em Roboto, sans-serif;
	margin: -.2em 0 .2em;
	color: #fff
}

.info-box .info-box-item .info-box-content {
	text-align: left;
	font-size: 1.2em;
	line-height: 1.3;
	max-width: 350px;
	margin: 0 auto;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto
}

.info-box .info-box-item .info-box-content .label-default {
	display: inline-block;
	margin: 4px 4px 0 0;
	padding: 2px 4px;
	text-shadow: inherit;
	font-size: .85em;
	font-weight: 100;
	color: #000;
	background: #fff
}

.info-box .info-box-item .info-box-icon {
	position: relative;
	background: 0 0;
	display: inline-block;
	overflow: hidden;
	text-align: center;
	color: #fc0;
	border: 1px solid #fff;
	border-radius: 15% 0;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.55em;
	font-size: 6em
}

.skill {
	margin: 1em auto 5em
}

.skill .headline {
	font: 100 2.5em/1.2em Roboto, sans-serif;
	color: #fff;
	margin: 1em 0 0;
	padding: 0
}

.skill-chart {
	max-width: 460px;
	margin: 1em auto 0;
	font-size: 1.1em
}

.skill-chart .skill-chart-item {
	display: block;
	width: 100%;
	margin: 0 0 1em;
	color: #fff
}

.skill-chart .skill-chart-item>span:nth-child(1) {
	display: inline-block;
	float: right
}

.skill-chart .skill-chart-item>span:nth-child(2) {
	display: block;
	height: 5px;
	border: 1px solid #fc0;
	border-radius: 3px
}

.skill-chart .skill-chart-item>span:nth-child(2)>span {
	display: block;
	height: 100%;
	background: #fc0
}

.portfolio {
	margin: 0 auto;
	padding: 3em 0 0;
	max-width: 980px
}

.portfolio .portfolio-img img {
	display: block;
	margin: 0 auto 1em;
	max-height: 400px
}

.portfolio .portfolio-desc {
	right: 0
}

.portfolio .bg-dark {
	font-size: 2em;
	text-transform: uppercase;
	display: inline-block;
	padding: 5px 10px
}

.portfolio .bg-light {
	font-size: 1.3em;
	display: inline-block;
	padding: 10px
}

.portfolio a {
	white-space: nowrap;
	font-weight: 400;
	font-size: .95em;
	text-decoration: none;
	border-bottom: 2px solid #fc0
}

.portfolio a:focus,
.portfolio a:hover {
	color: #000;
	border-bottom: 2px solid #fc0;
	background: #fc0
}

.bg-dark,
.bg-light {
	padding: 0 .1em;
	margin: 0
}

.bg-dark {
	background: #000;
	color: #fff
}

.bg-light {
	background: #fff;
	color: #000;
	font-weight: 100
}

.info-txt {
	padding: 0 15px 10px;
	margin-bottom: 5em;
	line-height: 1.8em;
	font-size: 1.1em
}

.info-txt a {
	display: block;
	text-decoration: none;
	color: #fff
}

.info-txt a:focus,
.info-txt a:hover {
	color: #fc0
}

.info-txt strong {
	font-weight: 400;
	padding: 0 3px
}

.info-txt .info-headline {
	max-width: 450px;
	font-family: Roboto, sans-serif;
	font-size: 1.5em;
	font-weight: 100;
	padding: 5px 0;
	margin: .5em auto 0;
	background: #000;
	color: #fff;
	cursor: pointer
}

.info-txt .info-headline i {
	color: #fc0
}

.info-txt .info-content {
	display: none;
	font-size: 1.1em;
	padding: 15px 10px 10px;
	background: #fff;
	max-width: 450px;
	margin: 0 auto
}

.info-txt .open i:before {
	color: #fff;
	content: "\e606"
}

.footer {
	position: relative;
	background: #fff;
	color: #000;
	font-family: 'Open Sans', 'sans serif';
	font-weight: 400;
	padding-bottom: 4em;
	border-top: 1px solid #000
}

.footer .footer-top-link {
	display: block;
	padding: 8px 10px;
	margin: -1px auto 0;
	width: 55px;
	text-align: center;
	color: #fff;
	background: #3da1cc;
	text-decoration: none;
	border: 1px solid #000;
	border-top-color: transparent;
	font-size: 1.1em
}

.footer .footer-top-link:focus,
.footer .footer-top-link:hover {
	color: #000;
	background: #fc0;
	border-bottom: 1px solid #000
}

.footer .footer-content {
	margin-top: 1em
}

.footer .footer-content .footer-content-contact {
	text-align: right
}

.footer .footer-content .footer-content-technology {
	display: inline-block;
	margin-top: .4em
}

.footer .footer-content a {
	color: #000;
	text-decoration: none;
	display: inline-block;
	border-bottom: 2px solid #000;
	margin: .5em 0 0 .5em
}

.footer .footer-content a:focus,
.footer .footer-content a:hover {
	color: #000;
	background: #fc0;
	border-bottom: 0
}

.footer .footer-content .footer-social-links a {
	margin-top: .4em;
	font-size: 1.8em;
	border: 0
}

.footer .footer-content .footer-social-links a:focus,
.footer .footer-content .footer-social-links a:hover {
	color: #fc0;
	background: 0 0
}

.footer .footer-content .footer-content-logo {
	font-size: 3em;
	line-height: 0
}

.footer .footer-content .footer-content-copy {
	line-height: 1.3em
}

.page-closer {
	padding: 1.3em 0;
	background: #000;
	color: #fff;
	border-top: 1px solid #fc0;
	font-size: .8em
}

.page-closer .love {
	color: #fc0
}

.page-closer .link {
	color: #fff
}

.full-width {
	width: 100%;
	max-width: 100%
}

.carousel {
	position: static
}

.carousel-caption {
	z-index: 5;
	top: 35%;
	text-align: left;
	margin: 0 auto;
	text-shadow: inherit;
	color: #000
}

.carousel-control.left,
.carousel-control.right {
	background: inherit
}

.carousel-control {
	top: 45%;
	width: 2em;
	height: 2em;
	line-height: 1em;
	font-weight: 100;
	font-size: 1.5em;
	padding: .4em;
	background: 0 0;
	z-index: 50;
	text-align: center;
	color: #fff;
	border: 1px solid #fff;
	text-shadow: inherit;
	opacity: 1
}

.carousel-control:hover {
	background-color: #fc0;
	color: #3da1cc;
	border-color: #fc0
}

.carousel h1 {
	font-size: 3em
}

.carousel-indicators {
	position: absolute;
	bottom: 0
}

.carousel-indicators .active {
	background: #fc0
}

.carousel-indicators li {
	border-color: #fff;
	border-radius: 0
}

.page1 .carousel-caption {
	max-width: 750px
}

.page1 .carousel-inner {
	margin-top: 4em
}

.page1 .item {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	background-color: #3da1cc
}

.page1 .item:nth-child(1) {
	background-image: url(../img/intro-1.png)
}

.page1 .item:nth-child(2) {
	background-image: url(../img/intro-2.png)
}

.page1 .item:nth-child(3) {
	background-image: url(../img/intro-3.png)
}

.page1 .item:nth-child(4) {
	background-image: url(../img/intro-4.png)
}

.page3 .carousel {
	height: 600px
}

.page3 .carousel-inner {
	bottom: 0;
	margin: 0;
	width: 100%;
	height: 100%
}

.page3 .carousel-inner>.item {
	height: 100%
}

@media (max-width:992px) {
	.page {
		font-size: 14px
	}
	.heading {
		max-width: 90%
	}
	.heading .subline {
		margin-left: 2em
	}
	.page3 .carousel-inner {
		padding: 0;
		margin: 0 auto;
		max-width: 90%
	}
	.page3 .portfolio .bg-light {
		margin-left: 2em;
		font-size: 1.4em
	}
	.carousel-caption {
		left: 15%;
		right: 15%
	}
	.info-box .info-box-item {
		text-align: center
	}
	.info-box .info-box-item .info-box-headline {
		font-size: 2.8em;
		margin-top: 0
	}
	.info-box .info-box-item .info-box-icon {
		margin-top: .2em;
		font-size: 8em;
		border-radius: 50%
	}
	.info-box .info-box-item .info-box-content {
		text-align: center
	}
	.skill {
		margin: 2em auto 3em
	}
	.site-header .site-header-right {
		font-size: 1.2em;
		margin-top: .3em
	}
}

@media (max-width:767px) {
	.intro-img {
		max-width: 9.5em;
		margin: 0 auto 1em;
		display: block;
		border-width: 2px
	}
	.skill {
		margin: 5em auto
	}
	.skill .headline {
		text-align: center;
		font-size: 3em;
		margin: 2em auto .5em
	}
	.skill .skill-chart {
		margin: 0 auto
	}
	.info-box {
		margin: 0 0 -1em
	}
	.info-box .info-box-item {
		margin: 2em auto 1em;
		text-align: center
	}
	.info-box .info-box-item .info-box-headline {
		margin-top: .2em;
		font-size: 3em;
		color: #fff
	}
	.info-box .info-box-item .info-box-content {
		text-align: center
	}
	.info-box .info-box-item .info-box-content .label-default {
		color: #000;
		background: #fff
	}
	.info-box .info-box-item .info-box-icon {
		border-radius: 50%;
		margin-top: .5em
	}
	.heading {
		font-size: 1em;
		margin-bottom: 40px
	}
	.heading .headline {
		text-align: left
	}
	.heading .subline {
		margin-left: 1em
	}
	.carousel h1 {
		font-size: 2em;
		margin-bottom: 5px
	}
	.page3 .carousel-inner {
		margin-top: 1em
	}
	.portfolio .portfolio-img img {
		max-height: 300px;
		width: auto
	}
	.portfolio .portfolio-desc {
		padding-bottom: 4em
	}
	.page4 {
		margin-top: 0
	}
	.page4 .info-txt {
		padding: 0
	}
	.carousel-caption {
		top: 33%
	}
	.footer .footer-content {
		margin: 3em auto 0;
		max-width: 600px;
		text-align: center
	}
	.footer .footer-content .footer-content-logo {
		display: block;
		margin: 0 auto .2em
	}
	.footer .footer-content .footer-content-copy .bg-dark {
		background: 0 0;
		color: inherit
	}
	.footer .footer-content .footer-content-technology {
		margin: 3% 15% 0
	}
	.footer .footer-content .footer-content-contact {
		margin-top: 1em;
		text-align: center
	}
	.footer .footer-top-link {
		display: block
	}
}

@media (max-width:480px) {
	.site-header .site-header-right {
		margin-top: .2em
	}
	.site-header .navbar {
		min-height: 45px
	}
	.heading {
		margin: 0 10px;
		font-size: .8em
	}
	.heading .headline {
		margin-bottom: 10px;
		font-size: 3em;
		line-height: 1.25em
	}
	.heading .headline .dark {
		padding: 5px 10px
	}
	.heading .subline {
		margin: 0 0 2em;
		font-size: 1.8em
	}
	.heading .subline .light {
		width: 90%;
		display: inline-block;
		padding: 10px;
		text-align: left
	}
	.intro-img {
		max-width: 9.5em;
		display: block;
		border-width: 2px;
		margin: 0 auto 1em
	}
	.intro-heading .headline,
	.intro-heading .subline {
		margin: 0
	}
	.portfolio {
		padding-top: 0
	}
	.portfolio .portfolio-desc {
		margin: 0 1em;
		font-size: .8em
	}
	.page3 .carousel-inner {
		margin-top: 0
	}
	.page {
		font-size: 14px
	}
}

@media (max-width:480px) and (max-height:768px) {
	.carousel-caption {
		top: 10em
	}
}

@media (min-height:900px) and (min-width:992px) {
	.page3 .carousel {
		min-height: 800px
	}
	.page3 .portfolio>div {
		position: absolute;
		top: 20%
	}
	.page4 .section-wrapper {
		padding-top: 10em
	}
	.page4 .heading {
		padding-top: 6em
	}
}

@media (min-height:768px) and (max-height:899px) {
	.page3 .carousel {
		min-height: 580px
	}
	.page4 .section-wrapper {
		margin-top: 7em
	}
}

@media (min-height:768px) and (max-height:899px) and (min-width:992px) {
	.page3 .portfolio>div {
		margin-top: 5em
	}
}

@media (min-height:480px) and (max-height:767px) {
	.page3 .carousel {
		min-height: 300px
	}
}

@media (min-height:480px) and (max-height:767px) and (min-width:992px) {
	.page3 .portfolio>div {
		margin-top: 3em
	}
}

@media (max-height:480px) {
	.page3 .carousel {
		min-height: auto
	}
	.page4 .section-wrapper {
		margin-top: 1em
	}
}