/* ______________________________________________________________________________POLICES___________________________________________________________________________*/
@font-face {
  font-family: "Raleway";
  src: url("./font/Raleway/raleway-medium-webfont.woff2") format("woff2"),
      url("./font/Raleway/raleway-medium.woff") format("woff");
}
@font-face {
  font-family: "Raleway";
  font-weight: 700;
  src: url("./font/Raleway/raleway-bold-webfont.woff2") format("woff2"),
      url("./font/Raleway/raleway-bold.woff") format("woff");
}
@font-face {
  font-family: "Raleway";
  font-weight: 800;
  src: url("./font/Raleway/raleway-extrabold-webfont.woff2") format("woff2"),
      url("./font/Raleway/raleway-extrabold.woff") format("woff");
}
@font-face {
  font-family: "Rosario";
  src: url("./font/Rosario/Rosario-Regular.woff2") format("woff2"),
      url("./font/Rosario/Rosario-Regular.woff") format("woff");
}
@font-face {
  font-family: "Rosario";
  font-weight: 500;
  src: url("./font/Rosario/Rosario-SemiBold.woff2") format("woff2"),
      url("./font/Rosario/Rosario-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Rosario";
  font-weight: 700;
  src: url("./font/Rosario/Rosario-Bold.woff2") format("woff2"),
      url("./font/Rosario/Rosario-Bold.woff") format("woff");
}

/* ______________________________________________________________________________GENERAL___________________________________________________________________________*/

* {
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}

body, p{
  line-height: 170%;
}
svg{
  width:0; 
  height: 0;
}
.btnprojet{
  font-family: "Raleway";
  font-weight: 700;
  background-color:#211d47d8;
  border-radius: 5px;
  color: white;
  font-size: 14px;
  padding: 10px 15px;
  text-decoration: none;
  transition: all .2s ease-in-out;
  border: white 1px solid;
  min-width: 200px;
  margin-bottom: 5vh;
  margin-left: 2vh;
  text-align: center;
  margin-top:5vh;
}
.btnprojet:hover{
  background-color: #bb4462;
  transform: scale(1.1);
}

.dowloadCV{
  font-family: "Raleway";
  font-weight: 700;
  background-color: #211d47d8;
  border: 1px solid #FFFFFF;
  border-radius: 5px;
  color: white;
  font-size: 14px;
  padding: 0 15px;
  text-decoration: none;
  transition: all .2s ease-in-out;
}
.dowloadCV:hover{
  background-color: #bb4462;
  transform: scale(1.1); 
}
strong{
  font-weight: 700;
}
h1{
  font-family: "Rosario";
  font-weight: 700;
  font-size: 36px;
  margin-bottom: 1vh;
  line-height: 170%;
}
h2,h4{
  font-family: "Rosario";
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 2vh;
  line-height: 170%;
  text-align: center;
}
h3{
  font-family: "Rosario";
  font-weight: 700;
  font-size: 36px;
  margin-bottom: 2vh;
  line-height: 170%;
  text-align: center;
}
p{
  font-family: "Rosario";
  font-size: 16px;
  line-height: 170%;
}
ul, ol{
  font-family: "Rosario";
}

.anchor {
  position: relative;
  top: -14vh;
}

/* ______________________________________________________________________________HEADER___________________________________________________________________________*/

header{
  background-color:#151238;
  display: flex;
  height: 10vh;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  position: sticky;
  top:0;
  z-index: 5;
  align-items: center;
  justify-content: space-around;
  color: white;
}

.logohome{
  text-decoration: none;
  color: white;
}

/*_NAVIGATION MENU FOR BIG SCREEN__________*/
.navpc ol{
  list-style: none;
  display: flex;
}
.navpc li{
  padding-right: 20px;
  margin-right: 35px;
}
.navmenupc ol a{
  color:white;
  text-decoration: none;
  font-size: 16px;
  text-transform: uppercase;
}
.navmenupc ol a:hover{
  color:#bb4462;
  text-decoration: underline;
}
.navmenupc{
  display: none;
}
.logo{
  font-size: 30px;
}


/*_NAVIGATION MENU FOR SMALL SCREEN__________*/
.croix{
  display:none;
}
.icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  margin-top: 35%;
}
.navmenutel{
  justify-content: flex-end;
  align-items: center;
  margin-left: 10px;
  width: 90%;
}
.close{
  color: white;
}
.burguer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width:100%;
}
.wrap{
  display: flex;
  justify-content: center;
  height: 92vh;
  width: 100%;
  background-color:#555366;
  padding-top: 20px;
}
.wrap  a{
  outline: none;
  text-decoration: none;
  color: white;
}
.wrap a:hover, .wrap a:focus{
  text-decoration: underline;
  color: #bb4462;
  text-underline-position: under;
}
.navtel ol{
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.navtel li{
  margin-top:20px;
}
.wrap{
  transform: translateY(-120vh);
  position: absolute;
  left: 0px;
}
#menutel{
  display:none;
}
#menutel:checked ~ .wrap{
  transform: translateY(0vh);
}
.burguer label>span{
  display:none;
}
#menutel:checked ~ .burguer label>span{
  display:block;
  font-size:27px;
  line-height:7vh;
  color: black;
}
#menutel:checked ~ .burguer label>svg{
  display:none;
}


/* ______________________________________________________________________________HERO___________________________________________________________________________*/

/*___Home___*/
.hero{
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  padding: 0 5vw 10vh 5vw;
  margin-bottom: 20vh;
}

.herohome{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%), url(./images/Programmation-header.jpg);
  height: 60vh;
}

.hero p{
  margin-bottom: 3vh;
}

.hero img{
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top:55vh;
  transform: translate(-50%);
  border: 5px solid white;
  height: 30%;
}

/* ______________________________________________________________________________PORTFOLIO___________________________________________________________________________*/

.portfolio{
  width: 100%;
}
.portfolioarticles{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

.portfolioarticles a{
  color: black;
  text-decoration: none;
}

.portfolio img{
  width: 100%;
  height: auto;
  border-radius: 5px;
  transition: all .2s ease-in-out;
}
.portfolio article, .portfolio figure{
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.portfolio article{
  margin: 5vh;
  width: 400px;
}

.portfolio img:hover{
  cursor: pointer;
  transform: scale(1.1); 
}

.portfolio figcaption{
  font-family: "Raleway";
  font-weight: 800;
  text-transform: uppercase;
  font-size: 18px;
  margin: 2vh 0;
}

.portfolio p {
  font-size: 12px;
  text-transform: uppercase;
  line-height: 140%;
}

hr{
  width: 50%;
  margin-top: 10vh;
}

.videoyoutube{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10vw;
  width: 100%;
  min-height: 70vh;
}

.videoyoutube iframe{
  width: 100%;
  height: 70vh;
}

/* ______________________________________________________________________________QUI QUI JE___________________________________________________________________________*/

.whoIam{
  margin: 5vh;
}
.description{
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 7vh;
}

.descriptionimg{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4vh;
}

.descriptionimg img{
  width: 150px;
  border-radius: 50%;
  margin-bottom: 4vh;
}

.studiesfigure{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: flex-start;
}

.studies img{
  width:80px;
  height: auto;
  border-radius: 50%;
  margin-bottom: 3vh;
}

.studies figure{
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 4vh 0;
  font-family: "Rosario";
}

.logobordure{
  border: 1px solid black;
}

/* ______________________________________________________________________________COMPETENCES___________________________________________________________________________*/

.competences{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%), url(./images/competences_fond.jpg);
  background-size: cover;
  background-position: center;
  padding: 5vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.competences h3{
  color: white;
  width: 100%;
}

.competences article{
  background-color: white;
  margin: 3vh 0;
  width: 400px;
  padding: 4vh;
  margin: 2vh;
  text-align: center;
  border-radius: 5px;
}


/* ______________________________________________________________________________FOOTER___________________________________________________________________________*/

footer{
  text-align: center;
  padding: 5vh; 
  border-top: black 1px solid;
}
.endofpage{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.foot{
  width:450px;
  margin-bottom: 6vh;
}
.endtext{
  margin-bottom: 0;
  width: 100%;
}



/* ______________________________________________________________________________PROJET___________________________________________________________________________*/
.titreprojet{
  text-align: center;
  padding: 5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-position: center;
  background-size: cover;
  color: white;
}
.porjetlaboxvoyageuse{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/la-box-voyageuse.jpg);
}
.porjetfanon{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/Fanon.jpg);
}
.porjettriporga{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/tripOrga.png);
}
.porjetorigan{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/origan.png);
}
.projetdomainelevejean{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/Domaine_Levejean.jpg);
}
.projetpubevelo{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/Pub_Velo.jpg);
}
.porjetqovertengine{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/MaquetteQovertEngine.jpg);
}
.porjettimer{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/Timer.jpg);
}
.porjetcontactus{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/Contact-us.jpg);
}
.porjetrecettes{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/Carnet_de_recettes.jpg);
}
.projetboxe{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/Club_de_boxe.jpg);
}
.projetromanphotos{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/Roman_Photos.jpg);
}
.porjetbob{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/bob.jpg);
}
.projetfoxford{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/oxford.jpg);
}
.porjetamandine{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/Amandine.jpg);
}
.porjettwentyfive{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/Flyerstwenty5.jpg);
}
.porjetphotos{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/Photographie.jpg);
}
.projetcvvideo{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/CV_Video.jpg);
}
.projetflash{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0.65) 100%), url(./images/Clip_Flash.jpg);
}
.btnsprojets{
  margin-top:5vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.introductionprojet, .demarcheprojet{
  margin: 5vh;
}
.introductionprojet{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.introductionprojet h3, .demarcheprojet h3{
  width: 100%;
  margin: 5vh 0;
  font-size: 30px;
}
.introductionprojet p{
  margin: 0 5%;
}
.demarcheprojet{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
  margin-bottom: 20vh;
}
.demarcheprojet p{
  width: 100%;
}
.thwoonline article{
  width: 650px;
  box-shadow: 2px 4px 9px 5px rgba(0,0,0,0.27);
  padding: 5vh;
  margin: 3vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.threeonline article{
  width: 400px;
  box-shadow: 2px 4px 9px 5px rgba(0,0,0,0.27);
  padding: 5vh;
  margin: 3vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.frontdemarche{
  margin-bottom: 20vh;
}
.threeimages{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-around;
}
.threebythree, .twobytwo{
  width: 270px;
  margin-top: 2vh;
  height: 30%;
}
.demarcheprojet img{
  width:100%;
}

.demarcheprojet li, .demarcheprojet p{
  margin-bottom: 3vh;
}

.demarchebtn{
  margin-left:0;
  margin-bottom:0;
  width: 80%;
}
.roman{
  width: 270px;
  margin-top: 2vh;
  height: 30%;
}

/*__CAROUSSEL__*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.gallery {
  background: #EEE;
}

.gallery-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  counter-increment: gallery-cell;
}

/* cell number */
.gallery-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.container{
  margin-bottom: 10vh;
}

.imgbob{
  width :100%;
}

.mentionslegales{
  padding: 0 5vh;
}
.mentionslegales p{
  padding: 0 5%;
}

.mentionslegales h1{
  text-align: center;
  margin: 2% 0;
}
.mentionslegales h2{
  text-align: left;
  padding: 0 5%;
}
.mentionslegales article{
  margin: 5% 0;
}

/* ______________________________________________________________________________RESPONSIVE___________________________________________________________________________*/


@media (min-width: 850px){
  .descriptionimg {
    width: 20%;
  }
  .descriptionimg img{
    width: 300px;
  }
  .description p{
    width: 70%;
    text-align: left;
    margin-left: 2vh;
    align-self: center;
  }
  h1{
    font-size: 50px;
  }
  h2{
    font-size: 30px;
  }
  .hero p{
    font-size: 20px;
  }
  .imgbob{
    width :70%;
  }
}

@media (min-width:970px){
  .navmenupc{
    display: contents;
  }
  .navmenutel{
    display: none;
  }
  .twobytwo{
    width: 49%;
    height: 30%;
  }
  .threebythree{
    width: 30%;
    height: 30%;
  }
  .roman{
     width: 30%;
    height:30%;
  }
}

@media (max-height:450px){
  h1{
    font-size: 25px;
  }
  h2{
    font-size: 16px;
  }
  .hero p{
    font-size: 14px;
  }
}