/* ############################################################
#########               CSS SMARTPHONE                #########
##############################################################*/

@media screen and (min-width: 150px) and (max-width: 450px){

body {
background-color: #34495e;
font-family: Coda;
}

/* Titres H1 et H2 */

h1 {
  width: 280px;
  margin: 20px auto 15px auto;
color: #ffffff;
font-size: 2.6em;
}


h2 {
  margin: 30px 0;
  font-size: 1.4em;
  color: #01ad56;
}


/* Navigation */

nav{
width: 250px;
margin: -2% auto 0 auto;
}

/* Propriétés des sections */

section{
font-family: coda;
margin-left: 1%;
font-size: 1em;
}

/* Liens */

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

/* Pour enlever les pointillés lors du clic */

a:focus{
outline:0;
}

/* Listes */

ul{
  list-style-type:none;
}

li{
  margin: 7px 0;
  color: #fff;
}

/* Propriétés des <code> dans les listes */

code{
  margin: 0 15px 0 -15px;
  color: #01ad56;
  font-weight: bold;
  font-family: Coda;
}

/* Positionnement et taille images */

img{
display: inline-block;
width: 190px ;
height: 145px ;
}

/* Transitions images autres pages */

.transition_images{
position: relative;
height: 55px;
width: 75px;
margin: 0 3px;
display: inline-block;
}

.transition_images img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.transition_images img.top:hover {
  opacity:0;
}

.top, .bottom{
  height: 55px;
  width: 75px;

}

/* Retour vers le haut de page */

#fleche {
position: fixed;
right: 15px;
bottom: 15px;
width: 20px;
height: 20px;
}
}




/* ############################################################
#########                CSS TABLETTES                #########
##############################################################*/


@media screen and (min-width: 451px) and (max-width: 899px){

body {
background-color: #34495e;
font-family: Coda;
}

/* Titres H1 et H2 */

h1 {
  width: 425px;
  margin: 30px auto 15px auto;
color: #ffffff;
font-size: 4em;
}


h2 {
  margin: 70px 0 70px 5%;
  font-size: 1.5em;
  color: #01ad56;
}

/* Navigation */

nav{
width: 340px;
margin: -2% auto 0 auto;
}

/* Propriétés des sections */

section{
font-family: coda;
margin-left: 3%;
font-size: 1.5em;
}

/* Liens */

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

/* Pour enlever les pointillés lors du clic */

a:focus{
outline:0;
}

/* Listes */

ul{
  list-style-type:none;
}

li{
  margin: 7px 0;
  color: #fff;
}

/* Propriétés des <code> dans les listes */

code{
  margin: 0 25px 0 -25px;
  color: #01ad56;
  font-weight: bold;
  font-family: Coda;
}

/* Positionnement et taille images */

img{
display: inline-block;
width: 190px ;
height: 145px ;
}

/* Transitions images autres pages */

.transition_images{
position: relative;
height: 75px;
width: 100px;
margin: 0 5px;
display: inline-block;
}

.transition_images img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.transition_images img.top:hover {
  opacity:0;
}

.top, .bottom{
  height: 75px;
  width: 100px;

}

/* Retour vers le haut de page */

#fleche {
position: fixed;
right: 20px;
bottom: 20px;
width: 35px;
height: 35px;
}
}



/* ############################################################
#########                CSS PC BUREAU                #########
##############################################################*/

@media screen and (min-width: 900px){

body {
background-color: #34495e;
font-family: Coda;
}

/* Titres H1 et H2 */

h1 {
  width: 450px;
  margin: 50px auto 40px auto;
  color: #ffffff;
  font-size: 4.3em;
}


h2 {
  margin: 70px 0 50px 5%;
  font-size: 2em;
  color: #01ad56;
}

/* Navigation */


nav{
width: 340px;
margin: -20px auto 0 auto;
}

/* Propriétés des sections */

section{
font-family: coda;
margin-left: 3%;
font-size: 1.5em;
}

/* Liens */

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

/* Pour enlever les pointillés lors du clic */

a:focus{
outline:0;
}

/* Listes */

ul{
  list-style-type:none;
}

li{
  margin: 7px 0;
  color: #fff;
}

/* Propriétés des <code> dans les listes */

code{
  margin: 0 1%;
  color: #01ad56;
  font-weight: bold;
  font-family: Coda;
  margin: 0 20px 0 20px;
}

/* Positionnement et taille images */

img{
display: inline-block;
width: 225px ;
height: 175px ;
}

/* Transitions images autres pages */

.transition_images{
position: relative;
height: 75px;
width: 100px;
margin: 0 5px;
display: inline-block;
}

.transition_images img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.transition_images img.top:hover {
  opacity:0;
}

.top, .bottom{
  height: 75px;
  width: 100px;

}

/* Retour vers le haut de page */

#fleche {
position: fixed;
right: 50px;
bottom: 50px;
width: 50px;
height: 50px;
}
}