html,
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

body {
	background-color: #222;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
	background-repeat: repeat;
	font-family: 'PT sans narrow', sans-serif;
	font-size: 16px;
	color: #fff;
}


.share {
	position: absolute;
	bottom: 20px;
	left: 24px;
	margin: 0;
	z-index: 1;
	font-size: 0.9em;
}


.credit1 {
	display:block;
	position: absolute;
	width:20%;
	left:80%;
	top:5px;
	margin: 0;
	z-index: 1;
	font-size: 10px;
	line-height:11px;
	color:white;
}


.credit1 a, credit11 a {
	color:gray;
	font-weight:normal;
	text-decoration: none;
}

.credit11 {
	display:none;
}

.credit2 {
	position: absolute;
	bottom: 65px;
	width:80%;
	right:10%;
	margin:0;
	z-index: 1;
	font-size: 0.7em;
	color:white;
	text-align:center;
}

.credit2 a {
	color:gray;
	font-weight:normal;
	text-decoration: none;
}


.layer {
	text-align: right;	
	text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.1 );
	
}

.layer h2 {
	position: relative;
	top: 0%;
	padding-right:8%;
	font-size: 2.35em;
}
.layer h3 {
	position: relative;
	top: 0%;
	font-size: 0.9em;
	padding-right:8%;
}

.layer p {
	position: relative;
	top: 30%;
	margin: 0;
}

.img .boreales{
	position: relative;
	top: 5%;
	display:block;
	max-height:600px;
	box-shadow :1px 1px 1px rgba( 0, 0, 0, 1 ); 
}

.layer.one {
	background: #5d4355; /* Old browsers */
	background: -moz-linear-gradient(45deg,  #5d4355 0%, #a73888 11%, #cda84b 28%, #cda84b 52%, #c84526 69%, #c84526 82%, #c84526 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#5d4355), color-stop(11%,#a73888), color-stop(28%,#cda84b), color-stop(52%,#cda84b), color-stop(69%,#c84526), color-stop(82%,#c84526), color-stop(100%,#c84526)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(45deg,  #5d4355 0%,#a73888 11%,#cda84b 28%,#cda84b 52%,#c84526 69%,#c84526 82%,#c84526 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(45deg,  #5d4355 0%,#a73888 11%,#cda84b 28%,#cda84b 52%,#c84526 69%,#c84526 82%,#c84526 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(45deg,  #5d4355 0%,#a73888 11%,#cda84b 28%,#cda84b 52%,#c84526 69%,#c84526 82%,#c84526 100%); /* IE10+ */
	background: linear-gradient(45deg,  #5d4355 0%,#a73888 11%,#cda84b 28%,#cda84b 52%,#c84526 69%,#c84526 82%,#c84526 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4355', endColorstr='#c84526',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	;
}

.layer.two {
background: #4c2657; /* Old browsers */
background: -moz-linear-gradient(45deg,  #4c2657 1%, #0e2b5b 12%, #0e2b5b 19%, #00669f 28%, #9de3c4 36%, #31f5ad 45%, #31f5ad 52%, #9de3c4 60%, #9de3c4 60%, #0e2b5b 76%, #4c2657 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(1%,#4c2657), color-stop(12%,#0e2b5b), color-stop(19%,#0e2b5b), color-stop(28%,#00669f), color-stop(36%,#9de3c4), color-stop(45%,#31f5ad), color-stop(52%,#31f5ad), color-stop(60%,#9de3c4), color-stop(60%,#9de3c4), color-stop(76%,#0e2b5b), color-stop(100%,#4c2657)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #4c2657 1%,#0e2b5b 12%,#0e2b5b 19%,#00669f 28%,#9de3c4 36%,#31f5ad 45%,#31f5ad 52%,#9de3c4 60%,#9de3c4 60%,#0e2b5b 76%,#4c2657 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #4c2657 1%,#0e2b5b 12%,#0e2b5b 19%,#00669f 28%,#9de3c4 36%,#31f5ad 45%,#31f5ad 52%,#9de3c4 60%,#9de3c4 60%,#0e2b5b 76%,#4c2657 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #4c2657 1%,#0e2b5b 12%,#0e2b5b 19%,#00669f 28%,#9de3c4 36%,#31f5ad 45%,#31f5ad 52%,#9de3c4 60%,#9de3c4 60%,#0e2b5b 76%,#4c2657 100%); /* IE10+ */
background: linear-gradient(45deg,  #4c2657 1%,#0e2b5b 12%,#0e2b5b 19%,#00669f 28%,#9de3c4 36%,#31f5ad 45%,#31f5ad 52%,#9de3c4 60%,#9de3c4 60%,#0e2b5b 76%,#4c2657 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c2657', endColorstr='#4c2657',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */;
box-shadow:1px 1px 2px rgba( 0, 0, 0, 1 );
}

.layer.three {
	background: #64b9d2;
}


.bullets {
	position: absolute;
	width: 60%;
	bottom: 20px;
	padding: 0;
	margin-left:15%;
	left:15%;
	margin: 0;
	text-align: center;
	z-index:100;
}

	.bullets li {
		display: inline-block;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		margin: 0 1%;
		font-size:12px;

		background: rgba( 255, 255, 255, 0.5 );
		box-shadow: 0px 0px 4px rgba( 0, 0, 0, 0.2 );
		cursor: pointer;

		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
	}

		.bullets li:hover {
			background: rgba( 255, 255, 255, 0.8 );
			color:#111
		}

		.bullets li.active {
			cursor: default;
			background: #fff;
			color:#111;
			font-weight:bold;			
		}
		
	body{counter-reset: li;}
	.bullets li:before {
 		content: counter(li) "  ";
 	 	counter-increment:li;
	}

		
@media screen and (max-width:640px) {
	body {
		font-size: 12px;
	}
	
	.img .boreales{
	position: relative;
	top: 30%;
	display:block;
	width:320px;
	box-shadow :1px 1px 1px rgba( 0, 0, 0, 1 ); 
	}

	.layer h2 {
	top:20%;
		font-size: 2.5em;
	}

	.bullets li {
		margin: 0 6px;
	}

	.credit1, .credit2 {
	display:none;
	}

	.credit11 {
	display:block;
	position: absolute;
	width:80%;
	left:5%;
	text-justify;
	top:5%;
	margin-top:5%;
	z-index: 1;
	font-size: 11px;
	color:white;
	}


	.share,
	.github-ribbon {
		display: none;
	}
}


@media screen and(min-width:641px) and (max-width:800px) {
	body {
		font-size: 12px;
	}
	
	.img .boreales{
	position: relative;
	top: 5%;
	display:block;
	max-height:400px;
	box-shadow :1px 1px 1px rgba( 0, 0, 0, 1 ); 
	}

	.layer h2 {
	font-size: 2.5em;
	}

	.bullets li {
		margin: 0 6px;
	}

	.credit11 {
	display:none;
	}
	
	.credit1 {
	font-site:11px;
	line-height:10px;
	top:0;
	margin-top:0;
	}

	.share,
	.github-ribbon {
		display: none;
	}
}


@media all and (min-width:800px)  {
	body {
	font-size: 12px;
	}
	
	.img .boreales{
	position: relative;
	top: 5%;
	display:block;
	max-height:500px;
	box-shadow :1px 1px 1px rgba( 0, 0, 0, 1 ); 
	}

	.layer h2 {
		font-size: 2.5em;
	}

	.bullets li {
		margin: 0 6px;
	}

	.share,
	.github-ribbon {
		display: none;
	}

	.credit11 {
	display:none;
	}
	
	.credit1 {
	top:5%;
	font-size: 12px;
	line-height:12px;
	color:white;
	}
	
	.credit2 {
	font-size:1.3em;
	bottom: 65px;
	position: absolute;
	width: 60%;
	padding: 0;
	margin-left:15%;
	left:15%;
	margin: 0;
	text-align: center;
	z-index:100;
}



	

}