@font-face {
	font-family: 'Icons';
	src: url('../font/icons.eot?30124740');
	src: url('../font/icons.eot?30124740#iefix') format('embedded-opentype'),
	url('../font/icons.woff?30124740') format('woff'),
	url('../font/icons.ttf?30124740') format('truetype'),
	url('../font/icons.svg?30124740#icons') format('svg');
	font-weight: normal;
	font-style: normal;
	}

html, body {
	position: relative;
	height: 100%;
	}
body {
	background: #333;
	margin: 0;
	padding: 0;
	text-align: center;
	}
body {
	color: #000;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 18px;
	}
	body, th, td {
		line-height: 24px;
		}
	input, textarea, select {
		color: inherit;
		font: inherit;
		outline: 0;
		text-shadow: inherit;
		}

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
	}
	::-webkit-scrollbar-track {
		background: #fff;
		}
	::-webkit-scrollbar-thumb {
		background: #ccc;
		}

a {
	color: #8a024c;
	outline: 0;
	}
	input, textarea, select, a, a:after, a:before, a *, a *:after, a *:before, .a, .a:after, .a:before, .a *, .a *:after, .a *:before {
		 -webkit-transition: all 0.25s ease-in-out;
		 -moz-transition: all 0.25s ease-in-out;
		 -o-transition: all 0.25s ease-in-out;
		 -ms-transition: all 0.25s ease-in-out;
		 transition: all 0.25s ease-in-out;
		}
	img {
		border: 0;
		outline: 0;
		}

.notext {
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	text-indent: -999px;
	}
.width {
	margin: 0 auto;
	padding: 0 30px;
	position: relative;
	text-align: center;
	max-width: 1140px;
	}
.clear, .clearer:after {
	clear: both;
	content: ' ';
	display: block;
	height: 0;
	}

#overflow {
	overflow: hidden;
	width: 100%;
	}

#background {
 	background: url('../img/background-video.jpg') no-repeat center center;
	background-size: cover;
    height: 100%;
	opacity: 0;
    position: absolute;
    position: fixed;
		left: 0;
		top: 40px;
    width: 100%;
    z-index: 0;
	}
#video {
	display: none;
    height: 100%;
	opacity: 0;
    position: absolute;
    position: fixed;
		left: 0;
		top: 40px;
    width: 100%;
    z-index: 1;
	}
	html.video #video {
		display: block;
		}
	#video video {
		height: auto;
		min-height: 100%;
		min-width: 100%;
		position: absolute;
			bottom: 0;
			right: 0;
		width: auto;
		}
#gradient {
	background: -webkit-radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(0,0,0,.1) 90%) !important;
	background: -moz-radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(0,0,0,.1) 90%) !important;
	background: -o-radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(0,0,0,.1) 90%) !important;
	background: -ms-radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(0,0,0,.1) 90%) !important;
	background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(0,0,0,.1) 90%) !important;
	background: -webkit-radial-gradient(center,120% 150%,rgba(255,255,255,0),rgba(0,0,0,.1),#aaa);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,255,0)', endColorstr='rgba(0,0,0,.1)',GradientType=1 );
	height: 100%;
	position: fixed;
		left: 0;
		top: 0;
	width: 100%;
	z-index: 2;
	}
	#overlay {
		background: url('../img/background-overlay.png');
		height: 100%;
		position: absolute;
		position: fixed;
			left: 0;
			top: 0;
		width: 100%;
		z-index: 1;
		}
.mbYTP_wrapper {
	}
	.mb_YTVPBar {
		display: none!important;
		}

#mobile {
	background: rgba(138,2,76,.95);
	display: none;
	margin-left: -100%;
	overflow: auto;
	position: absolute;
	position: fixed;
		bottom: 0;
		left: 0;
		top: 100px;
	width: 100%;
	z-index: 999;
		 -webkit-transition: all 0.25s ease-in-out;
		 -moz-transition: all 0.25s ease-in-out;
		 -o-transition: all 0.25s ease-in-out;
		 -ms-transition: all 0.25s ease-in-out;
		 transition: all 0.25s ease-in-out;
	}
	#mobile.open {
		margin-left: 0;
		}
#mobile-menu {
	margin: 0 -30px;
	text-align: left;
	}
	#mobile-menu ul, #mobile-menu ul li {
		display: block;
		list-style: none;
		margin: 0;
		padding: 0;
		}
		#mobile-menu ul li {
			border-bottom: 1px solid rgba(255,255,255,.25);
			}
		#mobile-menu ul li:first-child {
			padding-top: 15px;
			}
		#mobile-menu ul li:nth-child(even) {
			background: rgba(0,0,0,.05);
			}
		#mobile-menu ul li:nth-child(odd) {
			background: rgba(255,255,255,.05);
			}
	#mobile-menu ul li a {
		color: #fff;
		display: block;
		font: bold 18px/22px 'Open Sans', Arial, Helvetica, sans-serif;
		padding: 10px 20px;
		text-decoration: none;
		text-transform: uppercase;
		}
#header {
	background: #fff;
		-webkit-box-shadow: 0 0 5px rgba(0,0,0,.25);
		-moz-box-shadow: 0 0 5px rgba(0,0,0,.25);
		box-shadow: 0 0 5px rgba(0,0,0,.25);
	height: 100px;
	position: absolute;
	position: fixed;
		left: 0;
		right: 0;
		top: 0;
	z-index: 9999;
	}
	#header h1 {
		margin: 0;
		}
	#header h1 a {
		background: url('../img/javier-garcia-web-developer.png');
		display: block;
		height: 44px;
		position: absolute;
			left: 20px;
			top: 28px;
		width: 190px;
		}
		#header h1 a.es {
			background: url('../img/javier-garcia-desarrollador-web.png');
			width: 222px;
			}
#header-mobile-menu {
	border: 1px solid rgba(0,0,0,.25);
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	cursor: pointer;
	display: none;
	height: 34px;
	position: absolute;
		right: 20px;
		top: 32px;
	font-size: 30px;
	width: 40px;
	}
	#header-mobile-menu span.icon {
		margin: -18px 0 0 -18px;
		position: absolute;
			left: 50%;
			top: 50%;
		}
#header-flags {
	position: absolute;
		right: 20px;
		top: 41px;
	}
	#header-flags a, #header-flags span {
		float: left;
			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
			border-radius: 2px;
		height: 24px;
		margin-left: 6px;
		width: 30px;
		}
		#header-flags a:first-child, #header-flags span:first-child {
			margin-left: 0;
			}
		#header-flags a, #header-flags:hover span {
			opacity: .25;
			}
			#header-flags a:hover, #header-flags a:focus {
				opacity: 1;
				}
		.header-flag-en {
			background: url('../img/flag-en.png');
			}
		.header-flag-es {
			background: url('../img/flag-es.png');
			}
#header-menu {
	position: absolute;
		right: 106px;
		top: 36px;
		}
	#header-menu ul, #header-menu ul li {
		display: block;
		float: left;
		list-style: none;
		margin: 0;
		padding: 0;
		}
	#header-menu ul li {
		margin-left: 8px;
		}
		#header-menu ul li:first-child {
			margin-left: 0;
			}
	#header-menu ul li a {
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		color: #555;
		font-size: 14px;
		line-height: 20px;
		display: block;
		overflow: hidden;
		padding: 6px 14px;
		position: relative;
		text-decoration: none;
		}
		#header-menu ul li a span {
			position: relative;
			 -webkit-transition: none;
			 -moz-transition: none;
			 -o-transition: none;
			 -ms-transition: none;
			 transition: none;
			}
		#header-menu ul li a:before {
			background: transparent;
			content: ' ';
			display: block;
			height: 100%;
			position: absolute;
				left: -100%;
				top: 0;
			width: 100%;
			}
		#header-menu ul li.active a {
			color: #fff!important;
			}
		#header-menu ul li a:hover, #header-menu ul li a:focus {
			background: #f6f6f6;
			}
		#header-menu ul li.active a:before {
			background: rgb(216,4,119);
			background: -moz-linear-gradient(top, rgba(216,4,119,1) 1%, rgba(138,2,76,1) 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(216,4,119,1)), color-stop(100%,rgba(138,2,76,1))); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, rgba(216,4,119,1) 1%,rgba(138,2,76,1) 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, rgba(216,4,119,1) 1%,rgba(138,2,76,1) 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, rgba(216,4,119,1) 1%,rgba(138,2,76,1) 100%); /* IE10+ */
			background: linear-gradient(to bottom, rgba(216,4,119,1) 1%,rgba(138,2,76,1) 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d80477', endColorstr='#8a024c',GradientType=0 ); /* IE6-9 */
			left: 0;
			}

.page {
	box-sizing: border-box;
	margin-bottom: 40px;
	min-height: 100%;
	padding: 150px 0 84px;
	position: relative;
	text-shadow: 1px 1px 2px rgba(255,255,255,.5);
	z-index: 5;
	}
	.page-dark {
		color: #fff;
		text-shadow: 1px 1px 2px rgba(0,0,0,.5);
		}
.angle-top {
	height: 39px;
	overflow: hidden;
	position: absolute;
		top: -39px;
		left: 0;
	width: 100%;
	}
	.angle-top .angle-line {
		border: 0 solid transparent;
		border-width: 39px 1583px;
		content: ' ';
		display: block;
		height: 0;
		position: relative;
			top: 0;
			left: -100%;
		width: 0;
		}
.angle-bottom {
	height: 39px;
	overflow: hidden;
	position: absolute;
		bottom: -39px;
		left: 0;
	width: 100%;
	}
	.angle-bottom .angle-line {
		border: 0 solid transparent;
		border-width: 39px 1583px;
		content: ' ';
		display: block;
		height: 0;
		position: relative;
			top: -100%;
			left: 0;
		width: 0;
		}
a.next {
	background: rgba(0,0,0,.75);
	border: 2px solid #fff;
		-webkit-border-radius: 31px;
		-moz-border-radius: 31px;
		border-radius: 31px;
			-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
			-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
			box-shadow: 1px 1px 2px rgba(0,0,0,.5);
		color: #fff;
	display: block;
	font-size: 40px;
	height: 60px;
	margin: 0 0 -39px -31px;
	position: absolute;
		bottom: 0;
		left: 50%;
		text-shadow: 1px 1px 2px rgba(0,0,0,.5);
	width: 60px;
	z-index: 9999999;
	}
	a.next span.icon {
		margin: -24px 0 0 -24px;
		position: absolute;
			left: 50%;
			top: 50%;
		}

h2.page-title {
	color: inherit;
	display: inline-block;
	font: 800 40px/44px 'Open Sans', Arial, Helvetica, sans-serif;
	margin: 0 auto;
	padding-bottom: 15px;
	position: relative;
	text-transform: uppercase;
	}
	h2.page-title-no-line {
		padding-bottom: 0;
		}
	h2.page-title:after {
		background: rgba(0,0,0,.5);
		content: ' ';
		display: block;
		height: 1px;
		margin-left: -35px;
		position: absolute;
			left: 50%;
			bottom: 0;
		width: 70px;
		}
		.page-dark h2.page-title:after {
			background: rgba(255,255,255,.5);
			}
		h2.page-title-no-line:after {
			display: none;
			}
	h3.page-subtitle {
		color: inherit;
		display: inline-block;
		font: bold 20px/24px 'Open Sans', Arial, Helvetica, sans-serif;
		margin: 0 auto;
		text-transform: uppercase;
		}

p {
	margin: 15px 0 0;
	}
	p.page-intro {
		font-size: 22px;
		line-height: 28px;
		font-weight: 300;
		letter-spacing: 1px;
		margin: 20px auto 0;
		max-width: 700px;
		}
		p.page-intro b {
			font-weight: 500;
			}
.page-images {
	font-size: 0;
	line-height: 0;
	margin: 25px -5px 0 0;
	}
	.page-image {
		float: left;
		width: 20%;
		}
	.page-image-padding {
		padding: 5px 5px 0 0;
		position: relative;
		}
	.page-image-content {
		background: rgba(255,255,255,.05);
			-webkit-box-shadow: 1px 1px 2px rgba(255,255,255,.25);
			-moz-box-shadow: 1px 1px 2px rgba(255,255,255,.25);
			box-shadow: 1px 1px 2px rgba(255,255,255,.25);
		display: block;
		overflow: hidden;
		position: relative;
		}
		.page-dark .page-image-content {
			background: rgba(0,0,0,.05);
				-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.25);
				-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.25);
				box-shadow: 1px 1px 2px rgba(0,0,0,.25);
			}
		.page-image-content:after {
			border: 2px solid rgba(0,0,0,.15);
			content: ' ';
			display: block;
			position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				top: 0;
			z-index: 999;
			}
			.page-dark .page-image-content:after {
				border: 2px solid rgba(255,255,255,.15);
				}
			.page-image:hover .page-image-content:after {
				top: 100%;
				}
		.page-image-content img {
			height: auto;
			width: 100%;
			}
	.page-image-background {
		background: none no-repeat center center;
		background-size: cover;
		display: block;
		opacity: .1;
		position: absolute;
			bottom: -1px;
			left: -1px;
			right: -1px;
			top: -1px;
		-ms-transform: scale(1.03);
		-webkit-transform: scale(1.03);
		transform: scale(1.03);
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
		filter: gray; /* IE6-9 */
		-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
		}
	.page-image:hover .page-image-background {
		opacity: 1;
		-ms-transform: scale(1);
		-webkit-transform: scale(1);
		transform: scale(1);
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
		-webkit-filter: grayscale(0%);
		}
form.page-form {
	margin: 30px auto 0;
	max-width: 600px;
	}
	form.page-form p {
		margin: 10px 0 0;
		}
	form.page-form p.page-form-ok, form.page-form p.page-form-ko {
		display: none;
		font-size: 22px;
		line-height: 28px;
		font-weight: 300;
		letter-spacing: 1px;
		}
	form.page-form input.page-form-text, form.page-form textarea.page-form-textarea {
		background: rgba(255,255,255,.5);
			-webkit-box-shadow: 0 0 5px rgba(0,0,0,.25);
			-moz-box-shadow: 0 0 5px rgba(0,0,0,.25);
			box-shadow: 0 0 5px rgba(0,0,0,.25);
		border: 0;
		border-bottom: 2px solid transparent;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		box-sizing: border-box;
		padding: 9px 15px;
		width: 100%;
		}
		.page-dark form.page-form input.page-form-text, .page-dark form.page-form textarea.page-form-textarea {
		background: rgba(0,0,0,.5);
			-webkit-box-shadow: 0 0 5px rgba(255,255,255,.25);
			-moz-box-shadow: 0 0 5px rgba(255,255,255,.25);
			box-shadow: 0 0 5px rgba(255,255,255,.25);
			}
		form.page-form input.page-form-text.page-form-error, form.page-form textarea.page-form-textarea.page-form-error {
			border-color: #8a024c;
			}
		form.page-form textarea.page-form-textarea {
			height: 120px;
			}
		form.page-form input.page-form-submit {
			display: none;
			}
.page-bars {
	margin: 30px auto 0;
	max-width: 600px;
	}
	.page-bar {
		background: rgba(0,0,0,.1);
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		box-sizing: border-box;
		color: #fff;
		font: bold 18px/24px 'Open Sans', Arial, Helvetica, sans-serif;
		margin-top: 10px;
		text-decoration: none;
		text-transform: uppercase;
		padding: 9px 15px;
		position: relative;
		overflow: hidden;
		text-align: left;
		text-shadow: 1px 1px 2px rgba(0,0,0,.5);
		}
		.page-dark .page-bar {
			background: rgba(255,255,255,.1);
			}
	.page-bar-fill {
		background: #8a024c;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		box-sizing: border-box;
		padding: 9px 15px;
		position: absolute;
			bottom: 0;
			left: 0;
			top: 0;
		text-align: right;
		}
		.page-bar-fill span {
			display: none;
			opacity: .75;
			}
	.page-bar-legend {
		position: relative;
		}

.page-columns {
	}
	.page-column {
		float: left;
		margin: 40px 4% 0 0;
		width: 22%;
		}
	.page-column:last-child {
		margin-right: 0;
		}
	.page-columns p {
		margin-top: 10px;
		}
	p.page-column-icon {
		background: rgba(255,255,255,.1);
		border: 2px solid #000;
			-webkit-border-radius: 51px;
			-moz-border-radius: 51px;
			border-radius: 51px;
			-webkit-box-shadow: 1px 1px 2px rgba(255,255,255,.5);
			-moz-box-shadow: 1px 1px 2px rgba(255,255,255,.5);
			box-shadow: 1px 1px 2px rgba(255,255,255,.5);
		font-size: 40px;
		height: 100px;
		margin: 0 auto 20px;
		position: relative;
		width: 100px;
		}
		.page-dark p.page-column-icon {
			background: rgba(0,0,0,.1);
			border-color: #fff;
			-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
			-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
			box-shadow: 1px 1px 2px rgba(0,0,0,.5);
			}
		p.page-column-icon span.icon {
			margin: -22px 0 0 -24px;
			position: absolute;
				left: 50%;
				top: 50%;
			}
.page-spacer {
	height: 20px;
	}
p.page-tabs, p.page-pagination {
	font-size: 0;
	line-height: 0;
	margin: 28px 0 -2px;
	}
	p.page-pagination {
		display: none;
		}
	p.page-tabs span.page-tab, p.page-pagination span.page-pagination-link  {
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		color: #000;
		cursor: pointer;
		display: inline-block;
		font: bold 16px/22px 'Open Sans', Arial, Helvetica, sans-serif;
		margin: 2px;
		text-decoration: none;
		text-transform: uppercase;
		padding: 7px 15px;
		position: relative;
		overflow: hidden;
		}
		p.page-tabs span.page-tab span, p.page-pagination span.page-pagination-link span {
			position: relative;
			 -webkit-transition: none;
			 -moz-transition: none;
			 -o-transition: none;
			 -ms-transition: none;
			 transition: none;
			}
		.page-dark p.page-tabs span.page-tab, .page-dark p.page-pagination span.page-pagination-link {
			border-color: #fff;
			color: #fff;
			}
		p.page-tabs span.page-tab:before, p.page-pagination span.page-pagination-link:before {
			background: transparent;
			content: ' ';
			display: block;
			height: 100%;
			position: absolute;
				left: -100%;
				top: 0;
			width: 100%;
			}
			p.page-tabs span.page-tab:hover:before, p.page-tabs span.page-tab:focus:before, p.page-pagination span.page-pagination-link:hover:before {
				background: rgba(0,0,0,.2);
				left: 0;
				}
				.page-dark p.page-tabs span.page-tab:hover:before, .page-dark p.page-tabs span.page-tab:focus:before, .page-dark p.page-pagination span.page-pagination-link:hover:before {
				background: rgba(255,255,255,.2);
				left: 0;
					}
			p.page-tabs span.page-tab.active {
				color: #fff;
				text-shadow: 1px 1px 2px rgba(0,0,0,.5);
				}
				.page-dark p.page-tabs span.page-tab.active {
					color: #000;
					text-shadow: 1px 1px 2px rgba(255,255,255,.5);
					}
			p.page-tabs span.page-tab.active:before {
				background: #000;
				left: 0;
				}
				.page-dark p.page-tabs span.page-tab.active:before {
					background: #fff;
					left: 0;
					}
p.page-buttons {
	font-size: 0;
	line-height: 0;
	margin: 27px 0 -3px;
	}
	a.button, span.button {
		border: 2px solid #000;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		color: #000;
		cursor: pointer;
		display: inline-block;
		font: bold 18px/24px 'Open Sans', Arial, Helvetica, sans-serif;
		margin: 3px;
		text-decoration: none;
		text-transform: uppercase;
		padding: 7px 20px;
		position: relative;
		overflow: hidden;
		}
		span.button {
			margin: 0;
			}
		a.button span, span.button span {
			position: relative;
			 -webkit-transition: none;
			 -moz-transition: none;
			 -o-transition: none;
			 -ms-transition: none;
			 transition: none;
			}
		.page-dark a.button, .page-dark span.button {
			border-color: #fff;
			color: #fff;
			}
		a.button-main, span.button-main {
			background: #000;
			color: #fff;
			text-shadow: 1px 1px 2px rgba(0,0,0,.5);
			}
		.page-dark a.button-main, .page-dark span.button-main {
			background: #fff;
			color: #000;
			text-shadow: 1px 1px 2px rgba(255,255,255,.5);
			}
			.page-dark a.button-main:hover, .page-dark a.button-main:focus, .page-dark span.button-main:hover {
				color: #fff;
				text-shadow: 1px 1px 2px rgba(0,0,0,.5);
				}
		a.button:hover, a.button:focus, span.button:hover {
			border-color: #8a024c;
			color: #fff;
			text-shadow: 1px 1px 2px rgba(0,0,0,.5);
			}
			.page-dark a.button:hover, .page-dark a.button:focus, .page-dark span.button:hover {
				border-color: #8a024c;
				}
		a.button:before, span.button:before {
			background: transparent;
			content: ' ';
			display: block;
			height: 100%;
			position: absolute;
				left: -100%;
				top: 0;
			width: 100%;
			}
			a.button:hover:before, a.button:focus:before, span.button:hover:before {
				background: #8a024c;
				left: 0;
				}

html.js .page-content, html.js h2.page-title, html.js p.page-intro, html.js p.page-buttons, html.js .page-column, html.js .page-bar, html.js .page-bar-fill, html.js .page-image, html.js .page-tabs, html.js .page-form-field {
	opacity: 0;
	}

#home {
	background: transparent;
	z-index: 10;
	}
	#home .page-width {
		text-align: center;
		}
	#home .angle-top .angle-line {
		border-right-color: transparent;
		}
	#home .angle-bottom .angle-line {
		border-left-color: transparent;
		}
	#home .page-content {
		background: rgba(0,0,0,.75);
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		margin: 0 auto;
		max-width: 500px;
		padding: 40px 30px;
		}

#why {
	background: rgba(138,2,76,.85);
	z-index: 9;
	}
	#why .angle-top .angle-line {
		border-right-color: rgba(138,2,76,.85);
		}
	#why .angle-bottom .angle-line {
		border-left-color: rgba(138,2,76,.85);
		}
#skills {
	background: rgba(245,245,245,.85);
	z-index: 8;
	}
	#skills .angle-top .angle-line {
		border-right-color: rgba(245,245,245,.85);
		}
	#skills .angle-bottom .angle-line {
		border-left-color: rgba(245,245,245,.85);
		}
#portfolio {
	background: rgba(1,108,138,.85);
	z-index: 7;
	}
	#portfolio .angle-top .angle-line {
		border-right-color: rgba(1,108,138,.85);
		}
	#portfolio .angle-bottom .angle-line {
		border-left-color: rgba(1,108,138,.85);
		}
	#portfolio .page-image-content:after {
		border-color: #36788c;
		}

#contact {
	background: rgba(245,245,245,.85);
	z-index: 6;
	}
	#contact .angle-top .angle-line {
		border-right-color: rgba(245,245,245,.85);
		}
	#contact .angle-bottom .angle-line {
		border-left-color: rgba(245,245,245,.85);
		}
#footer {
	background: rgba(138,2,76,.85);
	margin-bottom: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	z-index: 5;
	}
	#footer-copyright {
		margin: 0;
		padding: 60px 0 40px;
		text-align: left;
		}
	#footer-copyright p {
		margin: 0;
		}
		#footer-copyright p:nth-child(even) {
			color: rgba(255,255,255,.5);
			font-size: 14px;
			line-height: 20px;
			}
	#footer-copyright p a {
		color: inherit;
		text-decoration: none;
		}
	#footer .angle-top .angle-line {
		border-right-color: rgba(138,2,76,.85);
		}

span.icon {
	font-family: "Icons";
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	display: inline-block;
	line-height: 1.2em;
	width: 1.2em;
	text-align: center;
	text-transform: none;
	}

.icon-support:before { content: '\e800'; }
.icon-design:before { content: '\e801'; }
.icon-mobile:before { content: '\e802'; }
.icon-code:before { content: '\e803'; }
.icon-menu:before { content: '\e804'; }
.icon-next:before { content: '\e805'; }

/* RESPONSIVE CSS */

@media screen and (max-width: 859px) {
	#header-menu, #header-flags {
		display: none;
		}
	#mobile, #header-mobile-menu {
		display: block;
		}
	a.next {
		display: none;
		}
	.page-column {
		width: 48%;
		}
		.page-column:nth-child(even) {
			margin-right: 0;
			}
		.page-column:nth-child(odd) {
			clear: both;
			}
	.page-image-content:after {
		top: 100%;
		}
		.page-image-background {
			opacity: 1;
			-ms-transform: scale(1);
			-webkit-transform: scale(1);
			transform: scale(1);
			filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
			-webkit-filter: grayscale(0%);
			}
}
@media screen and (max-width: 639px) {
	.page-column {
		clear: both;
		width: 100%;
		margin-right: 0;
		}
}

@media screen and (max-width: 967px) {
	.page-image {
		width: 25%;
		}
}
@media screen and (max-width: 734px) {
	.page-image {
		width: 33%;
		}
}
@media screen and (max-width: 501px) {
	.page-image {
		width: 50%;
		}
}
@media screen and (max-width: 268px) {
	.page-image {
		width: 100%;
		}
}