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;
}

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

.credit {
display:block;
left:10%;
bottom:40px;
position: absolute;
width:80%;
margin:0 auto;
color:#fff;
text-align:center;
z-index: 1;
font-size: 0.9em;
}
.credit a {
color:#F1EE42;
font-weight:normal;
text-decoration: none;
}

.dates{
display:inline-block;
float:right;
margin-right:5%;
text-align:right;
width:30%;
text-align:justify;
font-size:1.2em;
line-height:1.5em;
color:#DCE4B0;
}
.dates span {
color:white;
}

.avis{
display:inline-block;
float:left;
margin-top:5%;
margin-left:5%;
width:35%;
text-align:justify;
font-size:1.2em;
line-height:1.5em;
color:#DCE4B0;
}
.avis span {
color:white;
}

.script {
display: block;
float: left;
margin-left: 10%;
margin-top: -5%;
text-align: justify;
width: 70%;
min-width: 300px;
max-width: 1000px;
text-align: justify;
font-size: 1.1em;
line-height: 1.5em;
color: rgba(255,255,255,.6);
font-family: 'Open sans condensed', sans-serif;
font-weight: 100;
}
.script span{
color:rgba(250,250,250, 0.7);
}

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

}
.layer h1 {
position: relative;
font-weight:normal;
top: 0%;
margin-right:50px;
font-size: 2em;
line-height: 1em;
}
.layer h2 {
position: relative;
font-weight:normal;
top: 0%;
margin-right:50px;
font-size: 3em;
line-height: 1.5em;
}
.layer h3 {
position: relative;
top: 0%;
font-size:2.7em;
line-height: 1.5em;
font-weight:normal;
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: #95dc84;
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( 199, 168, 30, 0.7 );
box-shadow: 0px 0px 4px rgba( 199, 168, 30, 0.2 );
cursor: pointer;

-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}
.bullets li:hover {
background: rgba( 199, 168, 30, 0.9 );
}
.bullets li.active {
cursor: default;
background: #D63C3E;
}

/*--MEDIUM--------------------------------*/
@media all and (max-width:1100px) {
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: 2em;
line-height:1.5em;
}
    
.dates{
width:50%;
min-width:300px;
max-width:700px;
}
.bullets li {
margin: 0 6px;
}
    
.share,
.github-ribbon {
display: none;
}

}

/*--TABLET--------------------------------*/
@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: 2em;
}

.bullets li {
margin: 0 6px;
}
.share,
.github-ribbon {
display: none;
}
.script {
font-size: 1.1em;
line-height: 1.7em;
}
}

/*--SMALL--------------------------------*/
@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;
}

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