/*Common */
@font-face {
    font-family: "GraphikRegular";
    src: url("./ressources/fonts/GraphikRegular.otf") format("opentype");
}
#lien{
    position: relative;
    top: 45%;
}
#lien2{
    position: relative;
    margin-top: 10%;
}
#header {
    display: grid;
    grid-template-columns: 15% 20% 50% 15%;
    position: fixed;
    background-color: white;
    width: 100%;
    color: white;
    z-index: 20;
}

html,body{
    margin: 0;
    padding: 0;
    font-family: Graphik, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    scroll-behavior: smooth;
    text-align: center;
    text-decoration: none;
}

li>a, li>a:active, li>a:visited{
    color: white;
    text-decoration: none;
    background: linear-gradient(to top, rgba(255, 0, 0, 0.583) 0%, rgba(255, 0, 0, 0.5) 10%, transparent 10.01%) no-repeat center bottom / 0 100%;
    transition: background-size .3s;
}
li>a:hover{
    background-size: 100% 100%;
}

#listNav{
    display: flex;
    flex-direction: row;
    list-style-type: none;
    justify-content: space-around;
}

#filterYear{
    display: flex;
    flex-direction: row;
    list-style-type: none;
    justify-content:space-evenly;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    font-weight: bold;
}

#filterYear li:hover{
    font-weight: 100;
}


#divLogo img{
    width: 30%;
}

#divLogo {
    grid-column: 2;
}
#divNav{
    grid-column: 3;
}

/*Section 1 - Gallery*/


.section{
    height: 100vh;
    z-index: -2;
    
    
}

.fade{
    z-index: -1;
    position: absolute;
    max-width: 100%;
    filter: brightness(50%);
    -webkit-filter: brightness(50%);

}


#gallery h1, #gallery p {
    margin: 0;
    max-width: 80%;
}
#gallery h1{
    position: relative;
    top: 40%;
    left: 10%;
    color: white;
}
#gallery p:first-of-type{
    position: relative;
    top: 42%;
    left: 10%;
    color: white;
}
#gallery p:nth-child(4){
    position: relative;
    top: 45%;
    left: 10%;
    color: white;
}
.slick-track>img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

/*Section 2 - BIO*/

#sectionBio h1, #sectionBio p {
    margin: 0;
    max-width: 80%;

}
#divBio {
    display: grid;
    grid-template-columns: 40% 60% ;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    /*box-shadow: 0px 10px 13px -7px #000000, -1px 2px 14px 2px rgba(119,119,119,0.57);*/
}
#photoProfil>img{
    width: 100%;
    grid-column: 1;
    padding: 1%;
    padding-left: 5%;
    border-radius: 65%;
}
#photoProfil{
    text-align: center;
    place-self: center;
}
#presentation{
    display: flex;
    flex-direction: column;
    grid-column: 2;
}
#presentation>h2, #presentation>p{
    text-align: justify;
    align-self: center;
    margin-top: 2%;
}
#je{
    color:#f77722;
}
/*Section 3 -Centres d'intérets*/
#centresInteret{
    background-color: #f5fafd;
    height: 100%;
}
#divCentresInteret{
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    text-align: -webkit-center;
    place-content: center;
    border-radius: 1%
}
.infoCentreInteret{
    width: 15%;
    box-shadow: 0px 10px 13px -7px #ffffff, -1px -1px 14px 2px rgb(119 119 119 / 17%);
    margin: 1%;
    padding: 2%;
}
#titleCentreInteret{
    text-align: center;
    padding: 4%;
    color: white;
    background-color: #f7751e;
}

/*Section 4 - Competences*/

#compétences{
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    height: 40vh;
}

.competence{
    margin: 5%;
}
#graphisme.competence{
    height: 52%;
    background-color: white;
    width: 13%;
    border-radius: 4%;
    color: #f77722;
}
#photographie.competence{
    height: 52%;
    background-color: white;
    width: 13%;
    border-radius: 4%;
    color: #93278f;
}
#design.competence{
    height: 52%;
    background-color: white;
    width: 13%;
    border-radius: 4%;
    color: #f77722;
}
#maitriseRs.competence{
    height: 52%;
    background-color: white;
    width: 13%;
    border-radius: 4%;
    color: 
    #93278f;
}


/*Section 6- Instagram*/
/* #insta #instagram-feed1{
    display: flex;
    flex-direction: row;
    margin-left: 10%;
    margin-right: 10%;
    
}
.insta-link>img{
    width: 10vw;
    margin-left: 10%;
    margin-right: 10%;
} */
.instagram_feed {
    overflow: hidden;
  }
  .instagram_feed .instagram_new {
    width: 55%;
    float: left;
    padding: 0 1px 1px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .instagram_feed img.insta-image {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
  }
  .instagram_feed .insta-link {
    position: relative;
    display: block;
    background: #232323;
    padding-top: 100%;
  }
  .instagram_feed .insta-link:hover .insta-image {
    opacity: 0.2;
  }

  #instagram-feed1{
    display: grid;
    grid-template-columns: 33% 33% 33%;
    place-items: center;
  }
  .instagram_new:nth-child(3n-3){
    justify-self: start;
  }
  .instagram_new:nth-child(3n-2){
    justify-self: end;
  }
  #h1Insta{
    text-align: center;
    padding: 4%;
    color: white;
    background-color: #93278f;
  }
  #insta{
      height: auto;
  }

  /*Section 6 - Projet*/
  #h1project{
    text-align: center;
    padding: 4%;
    color: white;
    background-color: #f7751e;
  }
  #projects{
    display: flex;
    flex-direction: row;
  }

  .project img{
      width: 25%;
  }



  .slick-track{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: relative;
}

.slick-slide:hover{
    cursor:grab;
}
.slick-slide:active{
    cursor:grabbing;
}
#cv{
    text-align: center;
}
#projets{
    height: auto;
}
#h1cv{
    text-align: center;
    padding: 4%;
    color: white;
    background-color: #93278f;
}
#img{
    image-rendering: center;
    margin-right: auto;
    margin-left: auto;
}
.project img{
    width: 76%;
    margin-left: auto;
    margin-right: auto;
}
  /*Section 7 - Contact*/
#h1contact{
    text-align: center;
    padding: 4%;
    color: white;
    background-color: #f77722;
}
#contacter{
    width: 15%;
    text-align: center;
    margin-bottom: 5%;
    color: #93278f;
    margin-left: auto;
    text-align: center;
    margin-bottom: 5%;
    margin-right: auto;
    color: white;
    background-color: #93278f;
    height: 6%;
    border-radius: 4%;
}
#label{
    text-align: center;
}
input#nom{
    align-items: center;
}
input#email{
    align-items: center;
}
input#objet{
    align-items: center;
}
textarea#message{
    align-items: center;
}

.login-box{
    text-align: center;
}
#batmmi{
    width:50%;
    padding: 2%;
    border-radius: 11%;
}
#h2mmi{
    text-align: center;
    color: #f7751e;
}
#droits{
    text-align: center;
    margin-top: 4%;
}

.card{
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
    transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
    padding: 14px 80px 18px 36px;
    cursor: pointer;
}

.card:hover{
     transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.card h3{
  font-weight: 600;
}

.card img{
    max-width: 90%;
}

.MainContainer{
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 5%;
}
.MainContainer>a,.MainContainer>div{
    margin: 5%;
    border-radius: 5px;
    height: max-content;
}

#ListProject{
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#titleProject{
    text-align: center;
    color:#f7751e;
}

#projets h2{
    text-align: center;
    color: #93278f;
}

#MyGalleryPhoto{
    display: grid;
    grid-template-columns: 33% 33% 33%;
    margin: 5%;
}

#MyGalleryPhoto img{
    max-width: 90%;
    margin: 5%;
    transition: .3s transform ,.3s box-shadow,.3s ;
}

#MyGalleryPhoto img:hover{
    transform: scale(1.10);
    cursor: pointer;
}

#galleryH1, #galleryDescription{
    text-align: center;
}
a{
    text-decoration: none;
}
#ListProject {
    background: linear-gradient(90deg, #f7751e, #93278f);
    margin-top: 0;
}
#ue1{
    text-align: center;
    padding: 4%;
    color:#ffffff;
}
#ue2{
    text-align: center;
    padding: 4%;
    color: #ffffff;
}#ue3{
    text-align: center;
    padding: 4%;
    color: #ffffff;
}#ue4{
    text-align: center;
    padding: 4%; 
    color: #ffffff;
}#ue5{
    text-align: center;
    padding: 4%;
    color: #ffffff;
}
#galleryH1{ 
    color: #93278f;
}
#background{
    background-image: url(../ressources/images/projets/background.svg);
    background-repeat:no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    position: fixed;
    z-index: -1;
}
#bodyprojets{height:100%}
h1#titleProject{
    background-color: #ffffff;
    margin-bottom: 0;
    margin-top: 0;
}
h2{
    background-color: #ffffff;
}
#audit{
    background-color: #f7751e;
    color: #ffffff;
}
#p101{
    color:#f7751e;
}
#p102{
    color:#f7751e;
}
#p103{
    color:#f7751e;
}
#p104{
    color:#f7751e;
}
#p105{
    color:#f7751e;
}
#itwp{
    padding: 0 10% 0 10%;
}

#pageAccueil input[type=button]{
    width: 150px;
	height: 50px;
	cursor: pointer;
	font-size: 20px;
	font-weight: bold;
	color: #f7751e;
	background: white;
	border: 0px solid #f7751e;
	box-shadow: 5px 5px 0 #f7751e,
		-5px -5px 0 #93278f,
		-5px 5px 0 #f7751e,
		5px -5px 0 #93278f;
	transition: 500ms ease-in-out; 
}

#pageAccueil input[type=button]:hover{
    box-shadow: 20px 5px 0 #f7751e, -20px -5px 0 #93278f;
}

#pageAccueil input[type=button]:focus{
    outline: none;
}
#tpwpImg{
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 5%;
}

#tpwpImg img{
    width: 95%;
    margin: 2% 0% 0% 2%;
}
/*Responsive*/
@media only screen and (max-width: 768px){
    .infoCentreInteret{
        width: 100%;
        height: auto;
    }
    #divCentresInteret{
        display: flex;
        flex-direction: column;
    }
    .section{
        display: flex;
        flex-direction: column;
    }
    form input[type="submit"],
    form input[type="button"]{
        font-size: 3vw;
    }

    #contacter{
        width: 50vw;
    }

    #instagram-feed1{
        grid-template-columns: 50% 50%;
    }
    .instagram_feed .instagram_new{
        width: 100%;
    }

    #compétences{
        display: flex;
        flex-direction: column;
        height:auto;

    }
    .competence{
        width: 100%!important;
    }

    #projets{
        height: auto;
    }

    #divLogo img {
        width: 50%;
    }
    #divLogo {
        grid-column: 1;
    }
    #header{
        grid-template-columns: 35% 50% 15%;;
    }
    #listNav {
        display: flex;
        flex-direction: column;
        list-style-type: none;
        justify-content: space-evenly;
        margin: 0;
    }
    #divNav {
        grid-column: 2;
    }

    #divCentresInteret p {
        padding: 10%;
    }

    .MainContainer{
        grid-template-columns: 100%;
    }
    #ListProject{
        flex-direction: column;
    }

    #MyGalleryPhoto{
        grid-template-columns: 50% 50%;
    }
}