.banniere {
  width: 100%;
}

.monLogo {
  width: 4%;
  /* margin-right: 85px; */
}
.navbar-light .navbar-nav .nav-link {
  
  color: rgb(46, 77, 178);
}


#titre {
  font-size: 20px;
  padding-left: 10px;
}

footer {
  background-color: rgb(19, 19, 85);
  color: #ffff;
  margin: 0;
}

/*je redimensionne mes images et mets un padding en haut, a droite et à gauche*/

.gratte-ciel {
    height: 388px;
    width: 289px;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 1%;
    margin-bottom: 1%;
    overflow: hidden;
  }
  
  .rue {
  
    width: 291px;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 1%;
    margin-bottom: 1%;
  }

  
@font-face {
  font-family: "Quicksand";
  src: url(./../typographie/Quicksand-Bold.ttf);
}

body {
  font-family: "Quicksand";
  font-size: 14px;
}

#titre {
  margin-bottom: 25px;
  margin-top: -50px;
}

.clear-fix {
  clear: both;
}

.hamburger {
  height: 50px;
  border-radius: 5px;
}

.reseaux-sociaux1 {
  width: 70px;
}

.reseaux-sociaux2 {
  width: 70px;
}

.reseaux-sociaux3 {
  width: 70px;
}

a {
  text-decoration: none;
  padding-right: 15px;
  padding-left: 15px;
}

.nom {
  font-size: 2em;
}

p {
  margin-top: 3%;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

/* taille du formulaire, je mets une bordure, une taille et une marge au dessus et en dessous */

.formulaire {
  border: solid 2px black;
  width: 600px;
  margin-top: 10px;
  margin-bottom: 15px;
}

/* taille des vidéos, marge droite et au dessus */

.video {
  margin-top: 45px;
  margin-bottom: 45px;
  margin-right: 15px;
}
 /*je créé une page avec les peintures de muybridge*/
/* rangée1 */
.animaux{
    display: flex;
    justify-content: flex-end;

}
.camel{
    width: 35%;
    margin-top: 10px;
    margin-bottom: 10px;
    
}
.horse{
    width: 35%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right:10px;
    margin-left:10px;
}
.kangarou{
    width: 35%;
    margin-top: 10px;
    margin-bottom: 10px;
}
/* rangée2 */
.animaux2{
    display: flex;
    justify-content: flex-end;

}
.lion{
    width: 35%;
    margin-top: 10px;
    margin-bottom: 10px;
    
}
.racoon{
    width: 35%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right:10px;
    margin-left:10px;
}
.elephant{
    width: 35%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.lentille{ display: inline-block;
       margin-top: 15px;
       margin-bottom: 15px;
        }
/*je mets mon cv */
#cv{
width:50%;
margin-top: 10px;
margin-bottom: 10px;

}


@media (max-width: 1920px) and (min-width: 1080px) {
  #logo_ml{
    width: 4%;
  }
  .jardin {
    width: 291px;
    height: 388px;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 1%;
    margin-bottom: 1%;
    overflow: hidden;
  }
  /* je redimensionne la peinture du milieu*/
  #superman {
    /* width: 333px; */
    width: 340px;
  }
  #amerique {
    width: 330px;
    padding-right:10px;
    margin-left:109px;
  }
  #fantome {
    width: 330px;
    padding-left:10px;
    height: 244px;
  }
#troyes{display:none;}

.savoir_plus{
    background-color:rgb(14, 86, 203);
    color:white;
    /* margin-left:75%; */
    margin-left:75%;
    border-radius:5px;
    display: inline-block;
    margin-bottom:15px;
    height:28px;
    padding-top:5px;}
    /*serials*/
.bat, .batrob, .shade, .jude, .lone, .masked, .spider, .copper,.fantom, .frelon{
  margin-top: 7px;
 margin-bottom: 5px;
  width: 30%;
  margin-right:5px;
  margin-left:5px;
  height: 291px;
  } 
  .peindre{
    width: 23%;
    margin-top: 12px;
    margin-bottom: 10px;
    text-align: center;  
  }
  #navbar-margin{
    margin-left: 350px;
  }
/* je mets apropos au milieu*/
  .apropos{
    /* display: block; */
    padding-left: 472.6px;

    
  

    
    }
}


@media (max-width: 915px) and (min-width: 412px) {
  #logo_ml{
    width: 15%;
  }
  .jardin {
    width: 291px;
    height: 388px;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 1%;
    margin-bottom: 1%;
    overflow: hidden;
  }
  #superman {
    /* width: 333px; */
    width: 81%;
    margin-top: 7px;
  }
  #amerique {
    width: 81%;
    margin-top: 7px;
  }
  #fantome {
    width: 81%;
    margin-top: 7px;
    margin-bottom: 7px;
  }
  /*video*/
  .zorro {
    margin-right: 142px;
    padding: 10px;
  }
  .roller {
    margin-right: 142px;
    padding: 10px;
    margin-left:10px;
  }
  .jeu {
    margin-right: 142px;
  }
  .drobu {
    margin-right: 142px;
  }
  .goldoman {
    margin-right: 142px;
  }
  .chateau {
    margin-right: 142px;
  }
  .savoir_plus{
    background-color:rgb(14, 86, 203);
    color:white;
    margin-left:25%;
    border-radius:5px;
    display: inline-block;
    margin-bottom:15px;
    height:28px;
    padding-top:5px;
}
    /* animaux */
   .animaux, .animaux2{
      display:flex;
      flex-direction: column;
    
    } 
    .camel,.horse,.kangarou, .lion,.racoon,.elephant{
      width: 80%;
    }

    .serials{
        display:flex;
        flex-direction:column;
    }
     .peindre{
      width: 97%;
      margin-top: 12px;
      margin-bottom: 10px;
      text-align: center;  
    } 
}

@media (max-width: 812px) and (min-width: 375px) {
  #logo_ml{
    width: 15%;
  }
  .jardin {
    width: 291px;
    height: 388px;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 1%;
    margin-bottom: 1%;
    overflow: hidden;
  }
  #superman {
    /* width: 333px; */
    width: 81%;
    margin-top: 7px;
  }
  #amerique {
    width: 81%;
    margin-top: 7px;
  }
  #fantome {
    width: 81%;
    margin-top: 7px;
    margin-bottom: 7px;
  }
  .zorro {
    margin-right: 142px;
  }
  .roller {
    margin-right: 142px;
    margin-left:10px;
  }
  .jeu {
    margin-right: 142px;
  }
  .drobu {
    margin-right: 142px;
  }
  .goldoman {
    margin-right: 142px;
  }
  .chateau {
    margin-right: 142px;
  }
  .savoir_plus{
    background-color:rgb(14, 86, 203);
    color:white;
    margin-left:25%;
    border-radius:5px;
    display: inline-block;
    margin-bottom:15px;
    height:28px;
    padding-top:5px;
}
    /* animaux */
   .animaux, .animaux2{
      display:flex;
      flex-direction: column;
    
    } 
    .camel,.horse,.kangarou, .lion,.racoon,.elephant
    /*serials*/
      .serials{
        display:flex;
        flex-direction:column;
    }
    /*serials*/
.bat, .batrob, .shade, .jude, .lone, .masked, .spider, .copper,.fantom, .frelon{
  margin-top: 7px;
 margin-bottom: 5px;
  width: 80%;
  margin-right:5px;
  margin-left:5px;

}
 .peindre{
      width: 97%;
      margin-top: 12px;
      margin-bottom: 10px;
      text-align: center;  
    } 

}

@media (max-width: 800px) and (min-width: 360px) {
  #logo_ml{
    width: 15%;
  }
  .jardin {
    width: 291px;
    height: 388px;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 1%;
    margin-bottom: 1%;
    overflow: hidden;
  }
  #superman {
    /* width: 333px; */
    width: 81%;
    margin-top: 7px;
  }
  #amerique {
    width: 81%;
    margin-top: 7px;
  }
  #fantome {
    width: 81%;
    margin-top: 7px;
    margin-bottom: 7px;
  }
  .zorro {
    margin-right: 142px;
  }
  .roller {
    margin-right: 142px;
  }
  .jeu {
    margin-right: 142px;
  }
  .drobu {
    margin-right: 142px;
  }
  .goldoman {
    margin-right: 142px;
  }
  .chateau {
    margin-right: 142px;
  }
 .savoir_plus{
    background-color:rgb(14, 86, 203);
    color:white;
    margin-left:76%;
    border-radius:5px;
    display: inline-block;
    margin-bottom:15px;
    height:28px;
    padding-top:5px;
}
    /* animaux */
   .animaux, .animaux2{
      display:flex;
      flex-direction: column;
    
    } 
    .camel,.horse,.kangarou, .lion,.racoon,.elephant{
      width: 80%;
    }
      /*serials*/
      .serials{
        display:flex;
        flex-direction:column;
    }
            /*serials*/
.bat, .batrob, .shade, .jude, .lone, .masked, .spider, .copper,.fantom, .frelon{
  margin-top: 7px;
 margin-bottom: 5px;
  width: 80%;
  margin-right:5px;
  margin-left:5px;

}
 .peindre{
      width: 97%;
      margin-top: 12px;
      margin-bottom: 10px;
      text-align: center;  
    } 
  
}
@media (max-width : 1392px) and (min-width: 844px){
  .jardin{
    display: none;
  }
}