.main {
    margin:0;
    padding:0;
    box-sizing: border-box;
    background-image: url(ress/Retro\ Vintage\ HD\ Wallpaper\ Image.jpg);
    background-attachment: fixed;
    background-size: cover;
}
.pages {
  margin:0;
  padding:0;
  box-sizing: border-box;
  background-image: url(ress/pageswp.png);
  background-attachment: fixed;
  background-size: cover;
}
/*TITRE PAGE PRINCIPALE*/
@import url(https://fonts.googleapis.com/css?family=Oswald:400|Open+Sans:700);

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
.header {
  position: fixed;
  top:0;
  left: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
 padding-right: 2vw;
 width:100%;
}
.imgheader {max-height: 7vh;}
.header-text {
    width: 100%;
   padding-top: 3vh;
  margin-bottom: 3vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.h1_titre {
  font-family: "Oswald", Sans-serif;
  text-transform: uppercase;
  font-weight: 200;
  font-size: 4em;
  text-shadow: 3px 4px #e6e6d8, 5px 6px #c6a39a;
  margin: 0;
  color: #e8d102;
}

.h1_titre span {
  display: inline-block;
  vertical-align: middle;
}

span.star {
  font-size: 4em;
}

.h3_titre {
  font-family: "Open Sans", Sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.8em;
  letter-spacing: 0.1em;
  margin: 0;
  position: relative;
  color: #e8d102;
}

.h3_titre:before, .h3_titre:after {
  content: " ";
  position: absolute;
  width: 100px;
  height: 3px;
  border-top: 2px solid #e8d102;
  border-bottom: 2px solid #e8d102;
}

.h3_titre:before {
  margin: 16px 0 0 -110px;
}

.h3_titre:after {
  margin: 16px 0 0 10px;
}


.h1_titre1 {
  font-family: "Oswald", Sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 4em;
  text-shadow: 3px 4px #e6e6d8, 5px 6px #c6a39a;
  margin: 0;
  color: #100886;
}

.h1_titre1 span {
  display: inline-block;
  vertical-align: middle;
}

span.star {
  font-size: 20px;
}

.h3_titre1 {
  font-family: "Open Sans", Sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.8em;
  letter-spacing: 0.1em;
  margin: 0;
  position: relative;
  color: #090080;

}

.h3_titre1:before, .h3_titre1:after {
  content: " ";
  position: absolute;
  width: 100px;
  height: 3px;
  border-top: 2px solid #021383;
  border-bottom: 2px solid #081968;
}

.h3_titre1:before {
  margin: 16px 0 0 -110px;
}

.h3_titre1:after {
  margin: 16px 0 0 10px;
}
.h1_titre1, .h3_titre1 {
  transform: matrix(1, -0.05, 0, 1, 0, 0);
  -ms-transform: matrix(1, -0.05, 0, 1, 0, 0);
  -webkit-transform: matrix(1, -0.05, 0, 1, 0, 0);
}

.quote { font-family: "Satisfy", cursive;
text-align: center;
font-size: 1.5em;
font-weight: 100;}
/*LES CARDS MENU*/
.mainpage {display: grid;
grid-template-columns: 25% auto;
column-gap: 5vw;
max-width: 100%;
}

.box{
   display: flex;
   justify-content: center;
   align-items: center;
  max-width: 100%;}
  .card{
    position: relative;
    width: 100%;
    height: 65vh;
    background: #fff;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow:0 2px 10px rgba(0,0,0,.2);
  }
  .card:before,
  .card:after
  {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #fff;
    transition: 0.5s;
    z-index:-1;
  }
  .card:hover:before{
  transform: rotate(15deg);
  box-shadow: 0 2px 20px rgba(0,0,0,.2);
  }
  .card:hover:after{
  transform: rotate(7deg);
  box-shadow: 0 2px 20px rgba(0,0,0,.2);
  }
  .card .imgBx{
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  background: #222;
  transition: 0.5s;
  z-index: 1;
  }
  
  .card:hover .imgBx
  {
    bottom: 80px;
  }

  .card .imgBx img{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .card .details{
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 10px;
      height: 60px;
      text-align: center;
  }

  .card .details .h2_card{
   margin: 0;
   padding: 0;
   font-weight: 600;
   font-size: 20px;
   color: #777;
   text-transform: uppercase;
   font-family: "Caveat", cursive;
   font-optical-sizing: auto;
  } 

  .card .details .h2_card span{
  font-weight: 500;
  font-size: 16px;
  color: #f38695;
  display: block;
  margin-top: 5px;
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
   } 

.rightpage {display: flex;
flex-direction: column;}
.icones-contact {display: flex;
justify-content: space-evenly;
width: 40%;
margin-left: 45%;
}
.icones-contact-resp {display: none;
  justify-content: center;
 position:fixed;
 left:0;
 bottom:0;
width: 100%;
   background-color: #f2f2f279;}
   .icones-contact-resp1 {display: none;
    justify-content: space-around;

   width: 100%;
    }
.responsive-cards {
  display:none;
  grid-template-columns: auto;
  }
.responsive-card-image {
  max-width: 60%;
  margin-left: 20%;
}


.ptitre{
    width: 90%;
    color: #e8d102;
    
    display: block;
    text-align: center;
    font-family: "Oswald", Sans-serif;
    text-transform: uppercase;
     font-size: 1.5em;
    text-shadow: 1px 2px #e6e6d8, 3px 4px #c6a39a;
    margin-bottom: 10px;
}

.char{
    font-size: 40px;
    height: 40px;
    animation: an 1s ease-out 1 both;
    display: inline-block;
}

@keyframes an{
    from{
        opacity: 0;
        transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
    }
    to{
        opacity: 1;
        transform: perspective(500px) translate3d(0, 0, 0);
    }
}

.jobcards {display: grid;
  grid-template-columns: 20% 20% 20% 20% auto;

}
.card1{
  position: relative;
  width: 90%;
  height: 25vh;
  background: #fff;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.card1:before,
.card1:after
{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: #fff;
  transition: 0.5s;
  z-index:-1;
}
.card1:hover:before{
transform: rotate(10deg);
box-shadow: 0 2px 20px rgba(0,0,0,.2);
}
.card1:hover:after{
transform: rotate(5deg);
box-shadow: 0 2px 20px rgba(0,0,0,.2);
}
.card1 .imgBx1{
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
background: #222;
transition: 0.5s;
z-index: 1;
}

.card1:hover .imgBx1
{
  bottom: 80px;
}

.card1 .imgBx1 img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card1 .details1{
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 60px;
    text-align: center;
}

.card1 .details1 .h2_card1{
 margin: 0;
 padding: 0;
 font-weight: 600;
 font-size: 20px;
 color: #777;
 text-transform: uppercase;
 font-family: "Caveat", cursive;
 font-optical-sizing: auto;
} 

.card1 .details1 .h2_card1 span{
font-weight: 500;
font-size: 16px;
color: #f38695;
display: block;
margin-top: 5px;
font-family: "Caveat", cursive;
font-optical-sizing: auto;
 } 

/*soft skills*/


:root {--culoare: #333;}

/*les metiers*/
.cvdiv {max-width:100%; padding: 1.5vh; text-align: center; font-family: Arial, Helvetica, sans-serif; color: rgb(1, 6, 60);font-size: 1.5em;}
.quatre_cards {
  display: grid;
  grid-template-columns: 50% auto;
  width:80%;
  margin-left: 10%;
  gap:20px;
}
/*NEW CARD*/
.card-new {
  position: relative;
  width: 100%;
  height: 33vh;
  margin: 0 auto;
  background: #000;

  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);

  .face {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: top;
  

    &.face1 {
      box-sizing: border-box;
      padding-top: 2vh;
      overflow-y: scroll;
overflow-x: hidden;
background-color: #f2f2f2;
   

      h2 { margin: 0;
        padding: 0;}

      
    }

    &.face2 {
      transition: 0.5s;
    display: flex;
  justify-content: center;
align-items: center;}

      h2 {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
        font-size: 1.5em;
        color: #fff;
        transition: 0.5s;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        z-index: 10;
      }
    }
  }


.card-new:hover .face.face2 {
  height: 6vh;}

.card-new:nth-child(1) .face.face2 {
 background-color: #567d89;
 
}

.card-new:nth-child(2) .face.face2 {
  background-color: #e2d7a7;

}

.card-new:nth-child(3) .face.face2 {
  background-color:#e0a370;
 
}

.card-new:nth-child(4) .face.face2 {
  background-color:  #709f9d;
 
}








h6 {
font-family: Arial, Helvetica, sans-serif;

}

.h3_qc {  font-family: Roboto Condensed;
  
text-align: justify;
padding: 10px 10px 7vh 10px;

}

button {color: white;
background-color: #090080;}

.home {display: none;
position: fixed;
right: 0;
bottom: 0;
padding: 5px;
border-radius: 5px;
background-color: bisque;}
.imgheadersmall {height:3vh}

/*CONTACT*/
.formulaire {
  width:60%;
  margin-left:20% ;
  padding-bottom: 5vh;
}
input, textarea {width:100%;
font-family: Arial, Helvetica, sans-serif;
color: #100886;
background-color: #e2d7a79d;
font-size: 1.5em;
border-radius: 10px;
border: #090080 3px solid;}
input {padding:5px;}
textarea {padding:5px;}
.h2form {
  color: rgb(79, 74, 138); margin-bottom: 0; font-family: Arial, Helvetica, sans-serif;
}













/*RESPONSIVE A PARTIR D'ICI*/
@media screen and (max-width: 800px){
  .pages { 
    background-image: url(ress/pageswpv.png);
   
  }
  .header {display: none;}
  .header-text{
  
 
  margin-top: 1vh;
  margin-bottom: 4vh;
}
.h1_titre {
  font-size: 2.5em;
  text-shadow: 1px 2px #e6e6d8, 3px 4px #c6a39a;}
    .h1_titre1 {font-size: 2em;
        text-shadow: 2px 3px #e6e6d8, 5px 6px #c6a39a;
        margin: 0;}

        .h3_titre1 {
          font-family: "Open Sans", Sans-serif;
          text-transform: uppercase;
          font-weight: 0;
          font-size: 1.5em;
          letter-spacing: 0em;
          margin: 0;
          position: relative;
        }
        .quote {
         
          font-size: 1.2em;
         
        }

        h6 {font-size: 1.2em;}
        .card{
          position: relative;
          width: 100%;
          height: 41vh;
          background: #fff;
          margin: 0 auto;
          border-radius: 4px;
          box-shadow:0 2px 10px rgba(0,0,0,.2);
        }
.mainpage {grid-template-columns: auto;}
.jobcards {grid-template-columns: auto;}
.ptitre{font-size: 1em;
}
.box {max-width: 60%;
  margin-left: 20%;}

  .cvdiv {font-size: 1.2em;}  
.quatre_cards {grid-template-columns: auto;
width: 100%;
margin-left: 0;}
.card-new {
  position: relative;
  width: 100%;
  height: 43vh;
  margin: 0 auto;
  background: #000;

  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);}
.container3 {
 
height: 48vh;}
 
.responsive-cards {display:grid;}
.responsive-card-image {max-height: 40vh;
margin-top: 5vh;}
.jobcards {display: none;}
.icones-contact {display: none;}
.icones-contact-resp {display:flex;}
.icones-contact-resp1 {display:flex;}
.mainpage {margin-bottom: 12vh;}
.home {display: block;
z-index: 99;}
/*CONTACT*/
.formulaire {
  width:94%;
  margin-left:2% ;
}
input, textarea {width:100%;
font-family: Arial, Helvetica, sans-serif;
color: #100886;
background-color: #e2d7a79d;
font-size: 1.2em;
border-radius: 10px;
border: #090080 3px solid;}
input {padding:5px;}
textarea {padding:5px;}
.h2form {color: rgb(79, 74, 138); margin-bottom: 0; font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;}


}