/*
script pour les écrans d'ordinateurs
*/


/*typographie*/

@import url('https://fonts.googleapis.com/css?family=Roboto:400,900&display=swap');

@import url('https://fonts.googleapis.com/css?family=Roboto:700i&display=swap');

@font-face {
  font-family: "Disclaimer";
  font-style: bold;
  src: url("fonts/Disclaimer-Classic.woff2") format("woff.2"),
    url("fonts/Disclaimer-Classic.woff") format("woff");
}



/*

______                _                          
| ___ \              | |                         
| |_/ / __ ___ ______| |__   ___  _ __ ___   ___ 
|  __/ '__/ _ \______| '_ \ / _ \| '_ ` _ \ / _ \
| |  | | |  __/      | | | | (_) | | | | | |  __/  typo Doom ASCII
\_|  |_|  \___|      |_| |_|\___/|_| |_| |_|\___|


*/     

.body_gris {
  background-color: #f2f3f5;
}


.body_noir {
  background-color: #1d1d1d;
  background-size: cover;
  height: 100vh;
  background-attachment: fixed;
}




#logoanim {
  text-align: center;
}


#logoanim img {
  width: 70vw;
}                                        



#conteneur_logo {  /*fond pré-home*/
  width: 100vw;
  background-color: #1b1b1b;
  height: 100vh;
  padding: 0;
  border: 0;
}


#logo1 {
  margin: auto;
  width: 200px;
}



#logo1 img {
  width: 200px;
  transition: 3s ease ease-in-out;
  opacity: 1;
  margin-top: 37vh;
}



.fleche {
  width: 80px;
}



#plus {       /*position de la flèche*/
  position: absolute;
  bottom: 45px;
  left:40vw;
}



#logotraver img {
  margin-top: 60px;
  width: 100vw;
}


/*

 _   _             
| \ | |            
|  \| | __ ___   __
| . ` |/ _` \ \ / /
| |\  | (_| |\ V / 
\_| \_/\__,_| \_/  
                   

*/ 

#accueil { 
  width: 100vw;
  height: 100vh;
  margin-top: 200px;
}   



#nav1 { /*navigation téléphone*/
  display : none;
}

#nav0 { /*navigation téléphone*/
  display: none;
}

#nav2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 250px;
  margin:auto;
}


#logo {
  height: 260px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#logo img {
  width: 200px;
}


/*


___  ___                  
|  \/  |                  
| .  . | ___ _ __  _   _  
| |\/| |/ _ \ '_ \| | | | 
| |  | |  __/ | | | |_| | 
\_|  |_/\___|_| |_|\__,_| 
                          



*/



#menuToggle
{
  display: block;
  position: fixed;
  top: 50px;
  right: 50px;  
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0;
  z-index: 2;
  
  -webkit-touch-callout: none;
}


#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}


#menu
{
  position: absolute;
  width: 800px;
  height: 100vh;
  margin: -100px 0 0 -400px;
  padding: 50px;
  padding-top: 125px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;

  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
  margin-left: 35vw; /*position texte*/
  text-decoration: none;
  color: black;
  font-family: 'Roboto', sans-serif;
   font-weight: 900;

}

#menuToggle input:checked ~ ul
{
  transform: none;
}

#menu a {
  text-decoration: none;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  padding: 5px;
}

#contacts2 {
  width: 30px;
  display: grid;
  grid-template-rows: 1fr 1fr; 
  grid-gap: 10px;
}

#contacts2 img {
  width: 30px;
}



/*

 _                          
| |                         
| |__   ___  _ __ ___   ___ 
| '_ \ / _ \| '_ ` _ \ / _ \
| | | | (_) | | | | | |  __/
|_| |_|\___/|_| |_| |_|\___|

    */                        

                            

#index {
  width: 80vw;
  height: 650px;
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.dismoi img {
  height: 250px;
}


.banane img {
  height: 300px;
}




/*

                 _      _       
                (_)    | |      
 _ __  _ __ ___  _  ___| |_ ___ 
| '_ \| '__/ _ \| |/ _ \ __/ __|
| |_) | | | (_) | |  __/ |_\__ \
| .__/|_|  \___/| |\___|\__|___/
| |            _/ |             
|_|           |__/              

*/



#indexprojets {

   margin: auto;
   margin-top: 40px;
   line-height: 20px;
   width: 300px;
   margin-bottom: 80px;

}





#indexprojets a {

   text-decoration: none;
   font-family: 'Roboto', sans-serif;
   font-size: 1.8em;
   line-height: 140%;
   font-weight: bold;
   color: #818181;
   text-align: center;
   transition: all ease 0.3s;

}



#indexprojets a:hover{

  color: white;

}



.dmdm:hover {

  background-image: url("../images/index_dmdm.jpg");

}





/*

  ___                                    
 / _ \                                   
/ /_\ \  _ __  _ __ ___  _ __   ___  ___ 
|  _  | | '_ \| '__/ _ \| '_ \ / _ \/ __|
| | | | | |_) | | | (_) | |_) | (_) \__ \
\_| |_/ | .__/|_|  \___/| .__/ \___/|___/
        | |             | |              
        |_|             |_|              

*/



#apropos_texte {

  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
  margin-top: 0px;

}



#apropos_texte h1 {

  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 3em;
}



#apropos_texte p {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 1em;

}



#apropos_texte h2 {

  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 1.1em;

}

#apropos_texte a {
  text-decoration: none;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}


#apropos1 {
  line-height: 120%;
  margin-top: 32px;
  width: 300px;

}


#apropos2 {
  line-height: 120%;
  margin-top: 65px;
  width: 300px;

}

#apropos3 {
  line-height: 120%;
  margin-top: 75px;
  width: 300px;

}


/*
______          _            
|  ___|        | |           
| |_ ___   ___ | |_ ___ _ __ 
|  _/ _ \ / _ \| __/ _ \ '__|
| || (_) | (_) | ||  __/ |   
\_| \___/ \___/ \__\___|_| 

*/


#footer {
  display: none;
}


#footer2 {
  height: 40px;
  width: 300px;
  margin: auto;
  margin-top: 70px;
}


#footer2 h3 {
    font-size: 0.6em;
    font-family: 'Roboto', sans-serif;
   font-weight: 400;
}


.f2 {
  display: none;
}


.footap {
  display: block;
}


footer {

  overflow: hidden;
  margin-left: -10px;
  padding: 100px;
  width: 215px;
  height: 230px;
  text-align: center;
}


#footer_dm {
  background-image: url("../images/index_trace.jpg");
}

#footer_tr {
  background-image: url("../images/index_edward.jpg");
}

#footer_ed {
    background-image: url("../images/index_portraits.jpg");
}

#footer_cro {
  width: 100vw;
  height: 400px;
  background-image: url("../images/index_jpo.jpg");
}

#footer_jpo {
  background-image: url("../images/index_phportraits.jpg");
}

#footer_por {
    width: 100vw;
    height: 400px;
    background-image: url("../images/index_stopmotion.jpg");
}

#footer_stop {
    background-image: url("../images/index_packshot.jpg");
}

#footer_pac {
    width: 100vw;
    height: 400px;
    background-image: url("../images/index_dmdm.jpg");
}



footer a {
  margin-top: -100px;
  text-decoration: none;
  color: #818181;
  font-size: 6em;
  font-family: "Disclaimer";
  /*font-family: 'Roboto', sans-serif;
   font-weight: 900;*/
}

footer p {
  text-decoration: none;
  color: #b3b3b3;
  font-size: 1.5em;
  line-height: 120%;
  font-family: 'Roboto', sans-serif;
   font-weight: 600;
}

footer a:hover{
  color: white;
   }



/*

______                
| ___ \               
| |_/ /_ _  __ _  ___ 
|  __/ _` |/ _` |/ _ \
| | | (_| | (_| |  __/
\_|  \__,_|\__, |\___|
            __/ |     
           |___/      

*/


#page {
  width: 300px;
  margin : auto;
  margin-top: 45px;
  display: flex;
  flex-direction: column-reverse;
}


#photo_titre img {
  width: 300px;
}



#description {
    margin-top: 20px;
   width: 300px;

}

#description h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 1.2em;

}



#description p {
  margin-top: 10px;
  line-height: 120%;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 0.8em;
}



#description h2 {
  margin-top: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 0.8em;

}



#description a {

  text-decoration: none;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size:1em;

}



#images {

  margin: auto;
  margin-top: 50px;
  margin-bottom: 100px;
  width: 90vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-flow: row wrap;

}


/*affiche*/

#image_affiche img {

  height: 430px;
}



#video_affiche iframe {

  height: 535px;
  width: 300px;
  margin-top: 30px;

}


#images p {
  margin-top: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 0.8em;

}


/*tracé*/

#images_trace {

  margin: auto;
  margin-top: 60px;
  margin-bottom: 100px;
  width: 300px;
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  justify-content: center;

}

#images1 {

  margin: auto;
  width: 90vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}



#images1 img{
  width: 300px;
  margin:0;
  margin-bottom: 20px;

}



#images2 img {
  width: 300px;
  margin-bottom: 20px;
}



/*edward Lear*/

#images_ed1 img {
  width: 300px;
}


#images_ed2 {
  text-align: center;
}



#images_ed2 img {
  width: 300px;
}



/*jpo*/
#video_jpo iframe {
  height: 200px;
  width: 300px;
}



.d2 {
  margin-top: 20px
}


#conteneur {
  margin : auto;
  margin-top: 90px;
  margin-bottom: 130px;
}

#imagescarousel {

  margin: auto;
  margin-top: 50px;
  width: 300px;
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  justify-content: space-around;

}


#carouselExampleControls {
width: 400px;
}



#carouselExampleControls2 {
width: 400px;
}



#carouselExampleControls3 {
width: 400px;
}



#carouselExampleControls4 {
width: 70vw;
}



#carouselExampleControls5 {
width: 70vw;
}



#carouselExampleControls6 {
width: 70vw;
}



.carousel-control-prev-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e")}


.carousel-control-next-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e")}