/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/



/* css reset */

*, *::before, *::after{
  -webkit-box-sizing: border-box;
          box-sizing: border-box; 
}

*{
  margin: 0; 
  padding: 0; 
}


html:focus-within{
  scroll-behavior: smooth; 
}

a:not([class]){
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto; 
}

img, picture, svg, video, canvas{
  max-width: 100%;
  height: auto; 
  vertical-align: middle; 
  font-style: italic; 
  background-repeat: no-repeat; 
  background-size: cover;
}

input, button, textarea, select{
  font-family: Apex;
}
textarea {
  resize: none;
  border: none;
}
input{
  border: none;
}

@media (prefers-reduced-motion: reduce){
  html:focus-within {
      scroll-behavior: auto;
  }
  *, *::before, *::after {
      -webkit-animation-duration: 0.01ms !important;
              animation-duration: 0.01ms !important;
      -webkit-animation-iteration-count: 1 !important;
              animation-iteration-count: 1 !important;
      -webkit-transition-duration: 0.01ms !important;
           -o-transition-duration: 0.01ms !important;
              transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
      -webkit-transition: none;
      -o-transition: none;
      transition: none;
  }
}

body, html{
  min-height: 100%; 
  scroll-behavior: smooth; 
}

@font-face {
  font-family: Apex;
  src: url(/fonts/Apex\ New\ Medium.otf);
}


h2, p, label, ul, li, button, a{
  font-family: Apex;
  font-size: 23px;
  letter-spacing: 1px;
}
a{
  color: white;
  text-decoration: none;
}
h1{

      font-family: "Parisienne", cursive;
      font-weight: 800;
      font-style: normal;
      font-size: 48px;

}

body{
 background-image: url('/img/backgroundtest.jpg') ; 
/*   background-image: url('/img/background.jpg');*/
text-align: center;
}


/*illu*/



.elephant{
  position: absolute;
  width: 15%;
  top: 0;
  left: 5%;
}
.cocktail{
  position: absolute;
  width: 15%;
  left: 27%;
  top: 0;
}
.baleine{
  position: absolute;
  width: 10%;
  top: -70%;
  left: 20%;
}
.cygne{
  position: absolute;
  width: 8%;
  left: 52%;
  top: -80%;
}
.pirate{
  position: absolute;
  width: 12%;
  left: 60%;
  top: -10%;
}
.fee{
  position: absolute;
  width: 10%;
  left: 75%;
  top: -68%;
}
.sirene{
  width: 20%;
}
/*nav full height*/
.nav-wrapper{
  width: 100%;

  top: 0%;
  padding-top: 7%;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  left: 50%;
  background-image: url('/img/backgroundtest.jpg') ; 
  
}
.logo-container{
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  width: 50%;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, 40%);
      -ms-transform: translate(-50%, 40%);
          transform: translate(-50%, 40%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;

}

.logo{
  width: 25%;
  position: absolute;
left: 50%;
left: 50%;
-webkit-transform: translate(-50%, -25%);
    -ms-transform: translate(-50%, -25%);
        transform: translate(-50%, -25%);
z-index: 99;
}
.nav{

  background-color: #eb6668;
  color: white;
  padding-top: 5%;
  padding-bottom: 2%;


}
.nav-content{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  width: 40%;
  margin: auto;
  border-bottom: 3px solid white;
}

.nav-content a{
  margin-bottom: 10px;
  cursor: pointer;
  text-transform: uppercase;
}
.nav-content  a:hover, a:active{
  color: #dadada;
}



.social{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 10%;
}
.mastodon{
  width: 100%;
  padding: 0% 7.5% 0% 20%;
}
.insta{
  width: 100%;
  padding: 0% 20% 0% 7.5%;
}
.social-links:hover{
 color: #dadada ; 
}
.ls-1:hover{
  color: #dadada;
}


.nav-mobile{
  display: none;
}





#top {
width: 10%;
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */

cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */

}


/*fin nav*/



/*presentation*/


.presentation{
  background-color: #eb6668;
  color: white;
  padding: 2% 0 2.5% 0;


}
.presentationText{
  width: 50%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

}
.presentationText p{
width: 80%;
margin: 2% auto 2% auto;

}

/*catalogue*/

.catalogue{
  color: #eb6668;
  padding: 2.5% 0 5% 0;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}


.object{
  margin: auto;
  width: 50%;
  height: 80vh;
  border: #eb6668 solid 5px;
}
.texte-pdf{
  padding: 40% 0 40% 0;

}
.lien-pdf{
  color: #eb6668 !important;
  text-decoration: underline;
}
.catalogue h1{
  padding: 0 0 2.5% 0;
}


/*commande*/  


.commande{
  background-color: #eb6668;
  color: white;
  padding: 2% 0 2.5% 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.commande h1{
  padding-bottom: 2%;
}
.commande p{
  width: 50%;
  margin: auto;
}
.liste{
  width: 50%;
  margin: auto;
  list-style-position: inside;
}
.liste li{
  padding-bottom: 2%;
}

.mail{
  text-decoration: underline;
}
.mail:hover{
  color: #dadada;
}


/*contact*/

#website{
  display: none;
}
.contact{
  padding: 2.5% 0 5% 0;
  color: #eb6668;

}
.contact h1{
  padding-bottom: 2%;
}
.form-wrapper{
  color: white;
  background-color: #eb6668;
  width: 50%;
  margin: auto;
  padding: 5%;
  border-radius: 5%;

}
.form-text{    
  text-transform: uppercase;
  text-align: left;

}
.flex-form{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 2% 0 2% 0;
}
.flex-form label{
  margin-right: auto;
  width: 20%;
}
.flex-form input{
  width: 80%;
}
#nom{
  height: 3em;
}
#mail_real{
  height: 3em;
}
#adresse{
  height: 3em;
}
.flex-form textarea{
  width: 80%;
}
.obligatoire{
  border-bottom: white 2px solid;
}

.form2{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-transform: uppercase;
  text-align: left;
}
.form2 h2{
  padding: 2% 0 2% 0;
}
.flex-form2{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1% 0 1% 0;
}
.tel{
  height: 3em;
}
.form2 button{
  margin: 5% auto 0 auto;
  text-transform: uppercase;
  color: #eb6668;
  border: white solid 5px;
  border-radius: 50px;
  background-color: white;
  padding: 1%;
  cursor: pointer;
  
}
.form2 button:hover{
  color: white;
  border: white solid 5px;
  border-radius: 50px;
  background-color: #eb6668;
}

/*404*/

.page404{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
color: #eb6668;
padding: 10% 0 10% 0;
width: 50%;
margin: auto
}
.page404 img{
width: 30%;
}
.page404 a{
text-decoration: underline;
color: #eb6668;
}
.page404 a:hover{
color: #dadada;
}


/*footer*/

.footer-content{

  width: 40%;
  color: #eb6668;
  margin: auto;
  padding-bottom: 5%;
}
.footer-content a{
  color: #853b3c;
  text-decoration: underline;
  font-size: 18px !important;
}
.footer-content p{
  padding: 1% 0 1% 0;
  font-size: 18px !important;
}


@media  only screen and (min-width: 1024px)  and (max-width: 1920px) {

  h2, p, label, ul, li, button, a{
      font-size: 18px;
    }

    h1{

      font-size: 44px;
      width: 90%;
      text-align: center;
      margin: auto;
  }
  .nav-content{
      width: 80%;
  }

  .presentationText{
      width: 70%;
    }

    .object{
      width: 70%;

    }


    .liste{
      width: 70%;
    }
    .commande p{
      width: 70%;
    }

    .form-wrapper{
      width: 70%;
    }




    .footer-content{
      width: 70%;
    }


}

@media  only screen and (min-width: 800px)  and (max-width: 1200px) and (orientation: portrait){

  .logo{
      width: 15% ;

  }
  .elephant{
      width: 10% ;
      top: 3%;
  }

  
#top {
      display: none !important;

  }

  .nav-content.open{
    padding: 30% 0 30% 0 !important;
  }
  .social{
    width: 15% !important;
  }
    
}


/*mobile paysage*/

@media only screen and (max-width: 1024px) 
                 and (orientation: landscape) {

              
              
              .nav-wrapper{
                  height: 15vh !important;
              }    
              .logo{
                  width: 10%;

              }
              .elephant{
                  width: 5%;
                  top: 3%;
              }
              #top{
                  width: 12% !important;
              }
              

                  
}

/* below ipad */
@media (max-width: 1024px) {

  h2, p, label, ul, li, button, a{
      font-size: 14px;
      line-height: 1.5em;
    }

    h1{

      font-size: 34px;
      width: 90%;
text-align: center;
margin: auto;

}

#top {
      width : 25%;
      right: 10px;
  }

    .nav-wrapper{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      height: 10vh;
      position: sticky;
      padding: 0;
    }
    .nav-content{
      display: none;
    }

    .nav-content a{
      margin: 0;
    }
    .nav-content.open{
      padding: 10% 0 90% 0;
      left: 0;
      color: white;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: absolute;
      top: 100%;
      height: 100vh;
  z-index: 1000;
      background-color: #eb6668;
      width: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
  }
  .nav-content.open a{
      color: white;
      
  }

  .social{
    width: 20%;
  }
  .mastodon{
    width: 100%;
    padding: 0% 5% 0% 10%;
  }
  .insta{
    width: 100%;
    padding: 0% 10% 0% 5%;
  }
    #mobile{
      display: none;
    }

    .logo-container{
      height: 100%;
      -webkit-transform: initial;
          -ms-transform: initial;
              transform: initial;
      position: initial;
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
      width: 100%;
      top: 50%;
      left: 50%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      margin: auto;
    }

    .logo{
      -webkit-transform: initial;
          -ms-transform: initial;
              transform: initial;
      left: initial;
      z-index: 1200;
    }
    .elephant{
      top: 35%;
      z-index: 1200;
    }

    .hamburger{
      display: block;
      position: absolute;
      right: 5%;
      -webkit-transform: translate(-5%,-50%);
      -ms-transform: translate(-5%,-50%);
      transform: translate(-5%,-50%);
      z-index: 2;
  }
  
  #nav-icon3 {
      width: 40px;
      height: 28px;
      position: absolute;
      right: 5%;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
      -webkit-transition: .5s ease-in-out;
      -o-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
      cursor: pointer;
    }
    
    #nav-icon3 span{
      display: block;
      position: absolute;
      height: 4px;
      width: 40px;
      background: url('/svg/line.svg') no-repeat;
      background-size: cover;

      border-radius: 9px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out;
    }
    
  #nav-icon3 span:nth-child(1) {
      top: 0px;
    }
    
    #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
      top: 12px;
    }
    
    #nav-icon3 span:nth-child(4) {
      top: 24px;
    }
    
    #nav-icon3.open span:nth-child(1) {
      top: 12px;
      width: 0%;
      left: 50%;
    }
    
    #nav-icon3.open span:nth-child(2) {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
    }
    
    #nav-icon3.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
    }
    
    #nav-icon3.open span:nth-child(4) {
      top: 12px;
      width: 0%;
      left: 50%;
    }
  
  

    /*fin nav*/

    .presentation{
      padding: 12vh 0 12vh 0;
    }
    .presentationText{
      width: 90%;
    }
    .catalogue{
      padding: 12vh 0 12vh 0;
    }
    .object{
      width: 90%;
      height: 50vh;
    }
    .commande{
      padding: 12vh 0 12vh 0;
    }
    .liste{
      width: 90%;
    }
    .liste li{
      padding-bottom: 5%;
    }
    .commande p{
      width: 90%;
    }
    .contact{
      padding: 12vh 0 12vh 0;
    }

    .form2 h2 {
      padding: 5% 0 2% 0;
    }
    .form-wrapper{
      width: 90%;
      border-radius: initial;
    }
    .flex-form{
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
    .flex-form label{
      width: 100%;
    }
    .flex-form input{
      width: 100%;
    }
    .flex-form textarea{
      width: 100%;
    }

    .form2 button{
      margin: 5% 15% 0 15%;

      
    }

    .footer-content{
      width: 90%;
      padding-bottom:12vh ;
    }

    .footer-content a{
      font-size: 12px !important;
  }
  .footer-content p{
      font-size: 12px !important;
  }
}