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: 12px;
color: #fff;
}

a {
text-decoration:none;
color: #fff;
font-weight:normal;
}

.credit {
position: absolute;
bottom: 40px;
right: 50px;
margin: 0;
float:right;
text-align:right;
z-index: 1;
font-size: 0.9em;
}

.dates{
display:inline-block;
position:relative;
z-index:100;
float:right;
width:35%;
margin-left:60%;
padding-right:50px;
text-align:justify;
font-size:0.9em;
}

.rem{
display:inline-block;
position:relative;
z-index:100;
float:left;
top:0;
left:0;
width:35%;
margin-left:20%;
text-align:justify;
font-size:0.9em;
}

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

}
.layer h2 {
position: relative;
top: 0%;
margin-right:50px;
font-size: 2.35em;
}
.layer h3 {
position: relative;
top: 0%;
font-size: 0.9em;
margin-right:50px;
}
.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:#000;
}
.layer.two {
background: #269FA3;
box-shadow:1px 1px 2px rgba( 0, 0, 0, 1 );
}
.layer.three {
background: #64b9d2;
}

.bullets {
position: absolute;
width: 100%;
top: 20px;
padding: 0;
margin: 0;
text-align: center;
z-index:100;
}
.bullets li {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0 3px;

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 );
}
.bullets li.active {
cursor: default;
background: #fff;
}


@media all and (max-width:1024px) {
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;
}
}

@media screen 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;
}

.credit {
position: absolute;
bottom: 20px;
right: 50px;
margin: 0;
float:right;
text-align:right;
z-index: 1;
font-size: 0.8em;
}

}

@media screen and (max-width:320px) {
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;
}

.credit {
position: absolute;
bottom: 20px;
right: 50px;
margin: 0;
float:right;
text-align:right;
z-index: 1;
font-size: 0.7em;
}
}