html{
    font-family: 'Century Gothic';
    scrollbar-color: #00A1E5 #dfdfdf;
    scrollbar-width: thin;
}

html::-webkit-scrollbar {
    width: 10px;
}
  
html::-webkit-scrollbar-track {
    background: #00A1E5;
}
  
html::-webkit-scrollbar-thumb {
    background-color: #dfdfdf;
    border-radius: 10px;
    border: none;
}

body{
    margin: 0;
    padding: 0;
}

/** HEADER **/

.header{
    width: 100%;
    height: 120px;
    background-color: #00A1E5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title{
    width: 100%;
    min-height: 50px;
    max-height: 50px;
    display: grid ;
    grid-template-columns: 30% 40% 30%;
}

.title h2{
    color: #fff;
    z-index: 99999;
    text-align: center;
    bottom: 8px;
    position: relative;
    margin-left: 0px;
    width: auto;
}

.title .social{
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 15px;
    padding-top: 5px;
    width: auto;
}

.title .social a svg{
    width: 24px;
    height: 24px;
    margin: 0 10px;
}

.title .social a:hover svg path,
.title .social a:hover{
    fill: #E5007E;
}

.menu{
    width: 100%;
    min-height: 70px;
    max-height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu a{
    margin: 0 40px;
    height: 36px;
    width: 180px;
    color: #fff;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: baseline;
    border-radius: 25px 25px 0px 0px;
    position: relative;
    top: 15px;
    padding-top: 5px;
}

.menu a svg{
    width: 24px;
    height: 24px;
    margin-right: 10px;
    top: 3px;
    position: relative;
}

.menu a:hover{
    color: #E5007E;
    background: #fff;
}

.menu a:hover svg path,
.menu a:hover{
    fill: #E5007E;
}


.avatar-container{
    min-width: 150px;
    max-width: 150px;
    min-height: 150px;
    position: relative;
    border-radius: 80px;
    background-color: #00A1E5;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 23px;
    z-index: 9999;
}

.avatar{
    min-width: 120px;
    max-width: 120px;
    min-height: 120px;
    max-height: 120px;
    border-radius: 60px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lottie{
    min-width: 140px;
    max-width: 140px;
    min-height: 140px;
    max-height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    right: 2px;
    top: 5px;
}

.lottie img{
    width: 240px;
}

.mobile{
    display: none;
}

/** BARRE DE NAVIGATION **/

.navigation{
    width: 100%;
    height: 50px;
    position: sticky;
    top: 0;
    margin-top: 25px;
    display: grid;
    grid-template-columns: 50% 50%;
    z-index: 999;
    padding-top: 12px;
    background: #ffffff6b;

}

.navigation div button{
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 20px;
    margin: 0 6px;
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


.navigation div button:hover span,
.navigation div button:hover{
    display: flex;
}

.navigation div .filters:hover,
.navigation div .sort:hover{
    animation-name: button1;
    animation-duration: 0.25s;
    animation-timing-function: ease-in-out;
    animation-fill-mode:forwards
}

#back-top{
    background-color: #00A1E5;
    box-shadow: 5px 5px 10px rgba(122, 122, 122, 0.842);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 20px;
    margin: 0 6px;
    padding: 0 15px;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2;
}

#back-top:hover{
    background-color: #E5007E;
}

#back-top img{
    width: 24px;
    height: 24px;
}

@keyframes button1 {
    0% {background-color: auto;width:40px;}
    100% {background-color: #E5007E;width:90px;}
}

.navigation div .access:hover{
    animation-name: button2;
    animation-duration: 0.35s;
    animation-timing-function: ease-in-out;
    animation-fill-mode:forwards
}

@keyframes button2 {
    0% {background-color: auto;width:40px;}
    100% {background-color: #E5007E;width:140px;}
}

.filters, .sort, .access{
    background-color: #00A1E5;
}


.navigation div button svg{
    min-width: 24px;
    max-width: 24px;
    min-height: 24px;
    max-height: 24px;
}

.navigation div button span{
    text-decoration: none;
    color: #fff;
    font-family: 'Century Gothic';
    margin-left: 5px;
    display: none;
}

.nav-btn{
    padding-left: 25px;
    display: flex;
}

.acc-btn{
    display: flex;
    justify-content: flex-end;
    padding-right: 25px;
}

/** CONTENU ACCUEIL **/


.content-accueil{
    width: 100%;
    min-height: calc(100vh - 230px);
    max-height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 25px;
}

.content-accueil .accueil-txt{
    max-width: 420px;
}

.content-accueil .accueil-txt h1{
    font-size: 24px;
    color: #00A1E5;
}

.content-accueil .accueil-img{
    margin-left: 20px;
}

.content-accueil .accueil-img img{
    width: 530px;
}

.projet-accueil{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #00A1E5;
    padding-bottom: 50px;
}

/** CONTENU PORTFOLIO **/

.content{
    width: 100%;
    /**height: 1000px;**/
    display: grid;
    position: relative;
    grid-template-columns: 12% 76% 12%;
    min-height: calc(100vh - 317px);
    align-items: flex-start;
}

.works{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.works-content{
    width: 250px;
    height: 250px;
    background-color: rgb(110, 110, 110);
    place-self: center;
    margin: 25px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.works-content p{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: brightness(25%);
    color: #fff;
    font-size: 14pt;
    opacity: 0;
    text-align: center;
    padding: 0px 20px;
}

.works-content:hover p,
.works-content:hover{
    animation-name: reveal;
    animation-duration: 0.25s;
    animation-timing-function: ease-in-out;
    animation-fill-mode:forwards
}

@keyframes reveal {
    0% {opacity:auto;background-size: 250px;}
    100% {opacity:1;background-size: 280px;}
}

.box-info{
    position: fixed;
    width: 100vw;
    height: 70px;
    background-image: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.692) 60%, rgba(0, 0, 0, 0) 100% );
    z-index: 999999999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    bottom: -70px;
    animation-name: none;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

@keyframes info {
    0% {bottom:-70px;}
    18% {bottom:0px;}
    50% {bottom:0px;}
    75% {bottom:0px;}
    100% {bottom:-70px;}
}

.filters-box{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #000000e0;
    z-index: 99999999;
    display: none;
}

@keyframes filtres {
    0% {margin-left:-30%;}
    100% {margin-left:0%;}
}

.filters-box .content-filters{
    padding-left: 30px;
    min-width: 25% ;
    max-width: 25%;
    min-height: 100vh;
    max-height: 100vh;
    background: #00A1E5;
    border-radius: 0px 20px 0px 0px;
    color: #fff;
    margin-left: -30%;
    animation-name: filtres;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.filters-box .content-filters .container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
  
  /* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
  
  /* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 3px;
}

  /* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}
  
  /* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #E5007E;
}
  
  /* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
  
  /* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}
  
  /* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close-filters{
    width: 100%;
    min-height: 50px !important;
    max-height: 50px !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.close-filters button{
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 20px;
    margin: 31px;
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    top: 7px;
    position: relative;
}

.btn-close-filters svg{
    min-width: 16px;
    max-width: 16px;
    min-height: 16px;
    max-height: 16px;
}

.btn-close-filters:hover svg{
    min-width: 18px;
    max-width: 18px;
    min-height: 18px;
    max-height: 18px; 
}

.close-filters .btn-close-filters{
    background-color: #00A1E5;
}

.close-filters .btn-close-filters:hover{
    background-color: #E5007E;
}


/** PREVIEW **/

.preview{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #000000e0;
    z-index: 999999;
    display: none;
}

.close-preview{
    width: 100%;
    height:50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.close-preview button{
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 20px;
    margin: 31px;
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    top: 7px;
    position: relative;
}

.btn-close{
    background-color: #00A1E5;
}

.btn-close:hover{
    background-color: #E5007E;
}

.btn-close svg{
    min-width: 16px;
    max-width: 16px;
    min-height: 16px;
    max-height: 16px;
}

.btn-close:hover svg{
    min-width: 18px;
    max-width: 18px;
    min-height: 18px;
    max-height: 18px; 
}

.content-preview{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px;
}

.img-preview{
    height: auto;
    opacity: 1;
    margin: 20px;
    border-radius: 10px;
}

.img-preview video{
    margin-top: 20px;
    border-radius: 10px;
}

.txt-preview{
    width: 300px;
    opacity: 1;
    margin: 20px;
    color: #fff;
}

video{
    cursor: pointer;
}

.btn-pdf{
    height: 40px;
    border: none;
    border-radius: 20px;
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #00A1E5;
    float: right;
}

.btn-pdf img{
    height: 24px;
    width: 24px;
}

.btn-pdf span{
    text-decoration: none;
    color: #fff;
    font-family: 'Century Gothic';
    margin-left: 5px;
}

.btn-pdf:hover{
    background-color: #E5007E;
}

/** TRAVAUX **/

#gif-esc2023{
    background: url("../images/esicm.png") no-repeat center center;
    background-size: 250px;
}

#gif-monday{
    background: url("../images/monday.svg") no-repeat center center;
    background-size: 250px;
}

#gif-pat{
    background: url("../images/donut.svg") no-repeat center center;
    background-size: 250px;
}

#gif-sfr2024{
    background: url("../images/sfr24.jpg") no-repeat center center;
    background-size: 250px;
}

#gif-sfr2024v1{
    background: url("../images/sfr24_v1.jpg") no-repeat center center;
    background-size: 250px;
}

#aff-jnr{
    background: url("../images/sfr-jfr-2024.jpg") no-repeat center center;
    background-size: 250px;
}

#gif-sfr2023{
    background: url("../images/Jogger.gif") no-repeat center center;
    background-size: 250px;
}

#gif-sfr20232{
    background: url("../images/Nageur.gif") no-repeat center center;
    background-size: 250px;
}

#gif-jnr2023{
    background: url("../images/jnr23.jpg") no-repeat center center;
    background-size: 250px;
}

#gif-sfr2022{
    background: url("../images/sfr22.jpg") no-repeat center center;
    background-size: 250px;
}

#gif-watson{
    background: url("../images/watson.gif") no-repeat center center;
    background-size: 250px;
}

#gif-sommet{
    background: url("../images/sommetique.gif") no-repeat center center;
    background-size: 250px;
}

#gif-ekid{
    background: url("../images/Ekid.png") no-repeat center center;
    background-size: 250px;
}

#gif-idefhi{
    background: url("../images/idefhi.gif") no-repeat center center;
    background-size: 250px;
}

#gif-cyimail{
    background: url("../images/cyim1.gif") no-repeat center center;
    background-size: 250px;
}

#gif-cyimlogo{
    background: url("../images/cyim2.gif") no-repeat center center;
    background-size: 250px;
}

#gif-mage{
    background: url("../images/mage.gif") no-repeat center center;
    background-size: 250px;
}

#gif-walk{
    background: url("../images/walk.gif") no-repeat center center;
    background-size: 250px;
}

#gif-moon{
    background: url("../images/moonwalk.gif") no-repeat center center;
    background-size: 250px;
}

#gif-run{
    background: url("../images/run.gif") no-repeat center center;
    background-size: 250px;
}

#gif-luffy{
    background: url("../images/luffy.gif") no-repeat center center;
    background-size: 250px;
}

#gif-quizz{
    background: url("../images/quizz.gif") no-repeat center center;
    background-size: 250px;
}

#gif-picto{
    background: url("../images/picto.gif") no-repeat center center;
    background-size: 250px;
}

#gif-visualy{
    background: url("../images/visualy.jpg") no-repeat center center;
    background-size: 250px;
}

#gif-unitech{
    background: url("../images/unitech.jpg") no-repeat center center;
    background-size: 250px;
}

#gif-contest{
    background: url("../images/contest.gif") no-repeat center center;
    background-size: 250px;
}

#aff-armada{
    background: url("../images/armada.jpg") no-repeat center center;
    background-size: 250px;
}

#aff-cinema{
    background: url("../images/cinema.jpg") no-repeat center center;
    background-size: 250px;
}

#aff-double{
    background: url("../images/double.jpg") no-repeat center center;
    background-size: 250px;
}

#aff-extra{
    background: url("../images/extra.jpg") no-repeat center center;
    background-size: 250px;
}

#aff-gaspillage{
    background: url("../images/gaspillage.jpg") no-repeat center center;
    background-size: 250px;
}

#aff-pat1{
    background: url("../images/pat.jpg") no-repeat center center;
    background-size: 250px;
}

#aff-pat2{
    background: url("../images/pat2.jpg") no-repeat center center;
    background-size: 250px;
}

#aff-pat3{
    background: url("../images/pat3.jpg") no-repeat center center;
    background-size: 250px;
}

#aff-ser{
    background: url("../images/ser.jpg") no-repeat center center;
    background-size: 250px;
}

#aff-trouville{
    background: url("../images/trouville.jpg") no-repeat center center;
    background-size: 250px;
}

#ill-line{
    background: url("../images/line.jpg") no-repeat center center;
    background-size: 250px;
}

#ill-plant{
    background: url("../images/plant.jpg") no-repeat center center;
    background-size: 250px;
}

#ill-flow{
    background: url("../images/flow.jpg") no-repeat center center;
    background-size: 250px;
}

#ill-rose{
    background: url("../images/rose.jpg") no-repeat center center;
    background-size: 250px;
}

#ill-cosmos{
    background: url("../images/cosmos.jpg") no-repeat center center;
    background-size: 250px;
}

#ill-ghost{
    background: url("../images/ghost.jpg") no-repeat center center;
    background-size: 250px;
}

#ill-idea{
    background: url("../images/Idea.jpg") no-repeat center center;
    background-size: 250px;
}

#ill-wave{
    background: url("../images/wave.jpg") no-repeat center center;
    background-size: 250px;
}

#edit-bd{
    background: url("../images/bd.png") no-repeat center center;
    background-size: 250px;
}

#edit-ime{
    background: url("../images/ime.jpg") no-repeat center center;
    background-size: 250px;
}

#edit-cgidefhi{
    background: url("../images/cg_idefhi.jpg") no-repeat center center;
    background-size: 250px;
}

#edit-cgmotion{
    background: url("../images/cg-motion.jpg") no-repeat center center;
    background-size: 250px;
}

#edit-uaer{
    background: url("../images/uaer.jpg") no-repeat center center;
    background-size: 250px;
}

#edit-dialogue{
    background: url("../images/dialogue.jpg") no-repeat center center;
    background-size: 250px;
}

#edit-savs{
    background: url("../images/savs.jpg") no-repeat center center;
    background-size: 250px;
}

#web-photo{
    background: url("../images/photographe.png") no-repeat center center;
    background-size: 250px;
}

#web-tremen{
    background: url("../images/TREMEN.jpg") no-repeat center center;
    background-size: 250px;
}

#web-support{
    background: url("../images/support-preview.png") no-repeat center center;
    background-size: 250px;
}

/** CONTENU CONTACT **/

.content-contact{
    width: 100%;
    min-height: calc(100vh - 230px);
    max-height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.content-contact h2{
    width: 100%;
    text-align: center;
    color: #00A1E5;
    margin-top: 75px;
    margin-bottom: 10px;
}

.content-contact h2 img{
    width: 24px;
    height: 24px;
    position: relative;
    top: 3px;
}

.content-contact form{
    border: 2px solid #00A1E5;
    background-color: #fff;
    border-radius: 10px;
    max-height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 20px;
    box-shadow: 10px 10px 20px rgba(122, 122, 122, 0.233);
}

.content-contact form div{
    margin: 10px 0px;
}

.content-contact form .name,
.content-contact form .mail{
    width: auto;
}

.content-contact form div label{
    color: #00A1E5;
}

.content-contact form .name label,
.content-contact form .mail label{ 
    display: inline-block;
    min-width: 60px;
    max-width: 60px;
}

.content-contact form .name #name,
.content-contact form .mail #mail{ 
    width: 160px;
}

.content-contact form .name #name,
.content-contact form .mail #mail,
.content-contact form .msg #msg{
    font-family: 'Century Gothic';
}

.content-contact form .name #name:hover,
.content-contact form .mail #mail:hover,
.content-contact form .msg #msg:hover{
    border-color: #E5007E;
    border-radius: 3px;
    border-width: 2px;
    border-style: solid;
    background-color: #ffdbef;
}

.content-contact form .msg{
    width: 90%;
    display: flex;
    flex-direction: column;
}

.content-contact form .msg #msg{
    margin-top: 10px;
    width:450px;
    min-height: 80px;
    max-height: 80px;
    resize:none;
}

.content-contact form .btn-send{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}


.content-contact form .btn-send button{
    height: 40px;
    width: 40px;
    border: none;
    border-radius: 20px;
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #00A1E5;
    color: #fff;
}    

.content-contact form .btn-send #submit:disabled{
    background-color: #c1c1c1;
}

.content-contact form .btn-send #submit:disabled:hover{
    background-color: #c1c1c1;
    animation-name: none;
    cursor: default;
}




.content-contact form .btn-send button span{
    display: none;
    opacity: 0;
    margin-left: 5px;
}    

.content-contact form .btn-send button:hover{
    animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode:forwards;
    animation-name: button3;
}

.content-contact form .btn-send button:hover span{
    display: flex;
    animation-name: button4;
    animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode:forwards;
    animation-delay: 0.2s;
}

@keyframes button3 {
    0% {background-color: auto;width:40px;}
    100% {background-color: #E5007E;width:180px;}
}

@keyframes button4 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.content-contact form .btn-send button img{
    min-width: 22px;
    max-width: 22px;
}

.content-contact .btn-accueil button{
    margin-top: 20px;
    height: 40px;
    width: 180px;
    border: none;
    border-radius: 20px;
    padding: 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #00A1E5;
    color: #fff;
} 

.content-contact .btn-accueil button:hover{
    background-color: #E5007E;
} 

.content-contact .btn-accueil button svg{
    width: 24px;
    height: 24px;
    margin-right: 10px;
} 

/** A PROPOS **/

.content-apropos{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.apropos1{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-top: 80px;
}

.avatar-corps{
    width: 50%;
    display: flex;
    justify-content: flex-end;
}

.mobile-corps{
    display: none;
    width: 400px;
    height: 400px;
    background: url("../images/avatar.svg") no-repeat center center;
    border-radius: 20px;
    background-size: contain;
}

.infos{
    line-height: 20px;
    width: 420px;
}

.infos h1{
    color: #00A1E5;
}

.infos h2{
    font-weight: normal;
}

.infos hr{
    color: #dfdfdf;
}

.apropos2{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-top: 40px;
}

.experience{
    width: 60%;
    /**border: red 1px solid;**/
}

.experience h2{
    padding-left: 50px;
}

.experience h2 img{
    width: 40px;
    position: relative;
    top: 3px;
}

.experience .exp-container{
    width: 90%;
    height: 80px;
    background-color: #fff;
    border: #00A1E5 2px solid;
    border-radius: 0px 40px 40px 0px;
    margin-bottom: 15px;
    display: flex;

}

.experience .exp-container .exp-header{
    min-width: 40%;
    height: 100%;
    background-color: #00A1E5;
    border-radius: 0px 40px 40px 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.experience .exp-container .exp-header .date{
    color: #fff;
    font-size: 22px;
    width: 45%;
    text-align: center;
    margin-left: 5px;
}

.experience .exp-container .exp-header img{
    height: 100px ;
    margin-left: 20px;
}

.experience .exp-container .exp-text{
    font-size: 14px;
    width: 55%;
    display: flex;
    align-items: center;
    padding-left: 15px;
}

.interest{
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 30px;
}

.interest div{
    width: 22%;
    margin: 0px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
}

.interest div p{
    text-align: center;
}

.competence{
    width: 40%;
}

.competence h2 img{
    width: 40px;
    position: relative;
}

.competence h3{
    font-weight: normal;
    text-decoration: underline;
}

.competence .tech{
    width: 100%;
   margin-bottom: 15px;
   display: flex;
   align-items: flex-end;
}

.competence .tech img{
    width: 40px;
    position: relative;
    margin-right: 15px;
}

.competence .tech span{
    width: calc(30% - 55px);
    display: flex;
    top: 6px;
    position: relative;
}

.competence .tech .bar-container{
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 18px;
}

.competence .tech .bar-container .bar{
    width: 100%;
    display: flex;
    justify-content: center;
}

.competence .tech .bar-container .bar div{
    width: 23%;
    height: 25px;
    margin-left: 10px;
}

.competence .tech .bar-container .bar .bar1{
    background-color: #00364D;
    border-radius: 15px 0px 0px 0px;
}

.competence .tech .bar-container .bar .bar2{
    background-color: #006B99;
    border-radius: 0px;
}

.competence .tech .bar-container .bar .bar3{
    background-color: #00A1E5;
    border-radius: 0px 15px 0px 0px;
}

.competence .tech .bar-container span{
    width: 100%;
    font-size: 12px;
    display: flex;
    justify-content: center;
    top: 0;

}

.langage{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.langage div{
    min-width: 50%;
    margin-bottom: 30px;
}
.langage div img{
    width: 60px;
}

.logiciel{
    width: calc(100% - 5px);
    display: flex;
    flex-wrap: wrap;
    margin-left: 5px;
}

.logiciel div{
    min-width: 50%;
    margin-bottom: 30px;
}
.logiciel div img{
    width: 40px;
    margin-right: 5px;
}

.pro{
    width: 100%;
}

.pro .pro-container{
    margin-left: 5px;
    width:220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: #00A1E5 2px solid;
    border-radius: 10px;
    padding: 10px 20px;
    box-shadow: 10px 10px 20px rgba(122, 122, 122, 0.233);
    line-height: 10px;
}

/** FOOTER **/

.footer{
    margin-top: 50px;
    width: 100%;
    height: 60px;
    background-color: #00A1E5;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: relative;

}

.footer img{
    width: 20px;
    height: 20px;
}


/** RESPONSIVE **/

@media only screen and (min-width: 320px){

    .title {
        display: flex;
    }

    .title h2 {
        font-size: 20px;
        margin-left: 0px;
        width: 50%;
    }

    .title .social {
        padding-right: 0px;
        padding-top: 0px;
        width: 50%;
    }

    .title .social a:hover svg path,
    .title .social a:hover{
        fill: #fff;
    }

    .avatar-container {
        min-width: 90px;
        max-width: 90px;
        min-height: 90px;
    }

    .avatar {
        min-width: 60px;
        max-width: 60px;
        min-height: 60px;
        max-height: 60px;
        display: none;
    }

    .lottie {
        display: none;
    }

    .mobile{
        display: block;
        min-width: 70px;
        max-width: 70px;
        min-height: 70px;
        max-height: 70px;
        border-radius: 60px;
        background: white url("../images/logo_final_sans_baseline.svg") no-repeat center center;
        background-size: 140px;
    }

    .menu a {
        margin: 0 10px;
    }

    .menu a span {
        display: none;
    }
    
    .menu a svg {
        margin-right: 0px;
    }

    .menu a:hover{
        color: #fff;
        background: none;
    }
    
    .menu a:hover svg path,
    .menu a:hover{
        fill: #fff;
    }
    
    /** PORTFOLIO **/

    .nav-btn {
        padding-left: 5px;
    }

    .acc-btn {
        padding-right: 5px;
    }

    .navigation div .filters:hover,
    .navigation div .sort:hover{
        animation-name: none;
    }

    .navigation div .access:hover{
        animation-name: none;
    }

    .navigation div button:hover span{
        display: none;
    }   

    .filters-box .content-filters {
        min-width: 80%;
        max-width: 80%;
        animation-name: none;
        margin-left: 0%;
    }

    .content {
        display: block;
    }

    .works {
        grid-template-columns: 1fr;
    }

    .works-content:hover p,
    .works-content:hover{
        animation-name: none;
    }

    .preview {
        overflow-y: scroll;
    }

    .close-preview button {
        margin: 10px 15px;
        position: fixed;
    }

    .btn-close:hover{
        background-color: #00A1E5;
    }

    .btn-close:hover svg{
        min-width: 16px;
        max-width: 16px;
        min-height: 16px;
        max-height: 16px; 
    }

    .content-preview {
        padding-top: 0px;
        flex-direction: column;
        align-items: center;
    }

    .img-preview {
        width: 300px !important;
        display: flex;
        justify-content: center;
        margin-top: 100px;
    }

    .img-preview video {
        width: 96%;
    }

    .txt-preview {
        width: 85%;
        margin: 5px 20px 20px 20px;
    }

    .btn-pdf {
        margin-top: 15px;
    }

    /** ACCUEIL **/

    .content-accueil {
        min-height: calc(100vh - 230px);
        max-height: fit-content;
        flex-direction: column;
    }

    .content-accueil .accueil-img {
        margin-left: 0px;
        width: 100%;
        position: relative;
        bottom: 20px;
    }

    .content-accueil .accueil-img img {
        width: 100%;
    }

    .content-accueil .accueil-txt {
        width: 85%;
        margin-top: 50px;
    }

    /** CONTACT **/

    .content-contact {
        width: 100%;
        min-height: calc(100vh - 230px);
        max-height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .content-contact h2 {
        margin-top: 50px;
        margin-bottom: 20px;
    }

    .content-contact form {
        align-items: center;
        width: 75%;
    }

    .content-contact form .msg #msg {
        width: 100%;
    }

    .content-contact form .btn-send button {
        width: 180px;
    }

    .content-contact form .btn-send button span {
        display: block;
        opacity: 1;
    }

    .content-contact form .btn-send {
        justify-content: center;
        margin-top: 20px;
    }

    .content-contact form .btn-send button:hover{
        animation-name: none;
    }

    .content-contact form .btn-send button:hover span{
        animation-name: none;
    }

    .content-contact form .btn-send #submit:disabled:hover span{
        display: flex;
    }

    .content-contact form .name #name:hover,
    .content-contact form .mail #mail:hover,
    .content-contact form .msg #msg:hover{
        background-color: transparent;
    }

    /** A PROPOS **/

    .apropos1 {
        padding-top: 0px;
        flex-direction: column;
        align-items: center;
    }

    .avatar-corps {
        width: 320px;
    }

    .avatar-corps dotlottie-player{
        display: none;
    }

    .mobile-corps{
        display: block;
    }

    .infos {
        width: 85%;
    }

    .infos h2 {
        line-height: 25px;
    }

    .apropos2 {
        padding-top: 0px;
        flex-direction: column;
    }

    .experience {
        width: 100%;
    }

    .experience h2 {
        margin-top: 30px !important;
        text-align: center;
        padding-left: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 18px;
    }

    .experience h2 img {
        width: 30px !important;
        margin-bottom: 5px;
    }

    .experience .exp-container {
        width: 96%;
        height: 100px;
        border-radius: 0px 50px 50px 0px;
    }

    .experience .exp-container .exp-header {
        border-radius: 0px 50px 50px 0px;
        min-width: 30%;
    }

    .experience .exp-container .exp-header .date {
        font-size: 14px;
        margin-left: 5px;
        width: 100%;
        margin-left: 0px;
    }

    .experience .exp-container .exp-header img {
        height: 40px !important;
        margin-left: 3px;
        display: none;
    }

    .experience .exp-container .exp-text {
        font-size: 11px;
        width: 62%;
        padding-left: 8px;
    }

    .interest {
        width: 100%;
        padding-top: 0px;
        justify-content: center;
    }

    .interest div {
        font-size: 12px;
        width: 35%;
        margin: 5px 10px;
    }

    .competence {
        width: 100%;
    }

    .competence h2{
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 18px;
    }

    .competence h2 img{
        width: 30px !important;
        margin-bottom: 5px;
    }

    .competence h3{
        margin-left: 15px;
        font-size: 16px;
    }

    .competence .tech img {
        margin-left: 10px;
    }

    .competence .tech span {
        top: 3px;
        font-size: 14px;
    }

    .langage div {
        min-width: 40%;
        font-size: 14px;
        margin-left: 7px;
    }

    .logiciel{
        margin-left: 0px;
        width: 100%;
    }

    .logiciel div {
        min-width: 40%;
        font-size: 14px;

    }

    .logiciel div img {
        width: 30px;
        margin-left: 10px;
    }

    .pro {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 0px !important;
        margin-top: 5px;
    }
    
}

@media only screen and (min-width: 480px){

    .title {
        display: flex;
    }

    .title h2 {
        font-size: 24px;
        margin-left: 10px;
        text-align: left;
    }

    .title .social {
        padding-right: 0px;
        padding-top: 0px;
        width: 50%;
    }

    .title .social a:hover svg path,
    .title .social a:hover{
        fill: #fff;
    }

    .avatar-container {
        min-width: 90px;
        max-width: 90px;
        min-height: 90px;
    }

    .avatar {
        min-width: 60px;
        max-width: 60px;
        min-height: 60px;
        max-height: 60px;
    }

    .lottie {
        min-width: 70px;
        max-width: 70px;
        min-height: 70px;
        max-height: 70px;
    }

    .menu a {
        margin: 0 20px;
        border-radius: 25px 25px 0px 0px;
        width: 70px;
    }

    .menu a span {
        display: none;
    }
    
    .menu a svg {
        margin-right: 0px;
    }

    .menu a:hover{
        color: #fff;
        background: none;
    }
    
    .menu a:hover svg path,
    .menu a:hover{
        fill: #fff;
    }
    
    /** PORTFOLIO **/

    .nav-btn {
        padding-left: 5px;
    }

    .acc-btn {
        padding-right: 5px;
    }

    .navigation div .filters:hover,
    .navigation div .sort:hover{
        animation-name: none;
    }

    .navigation div .access:hover{
        animation-name: none;
    }

    .navigation div button:hover span{
        display: none;
    }   

    .content {
        display: block;
    }

    .works {
        grid-template-columns: 1fr;
    }

    .works-content {
        width: 250px;
        height: 250px;
    }

    .preview {
        overflow-y: scroll;
    }

    .close-preview button {
        margin: 10px 15px;
        position: fixed;
    }

    .btn-close:hover{
        background-color: #00A1E5;
    }

    .btn-close:hover svg{
        min-width: 16px;
        max-width: 16px;
        min-height: 16px;
        max-height: 16px; 
    }

    .content-preview {
        padding-top: 0px;
        flex-direction: column;
        align-items: center;
    }

    .img-preview {
        width: 320px !important;
        display: flex;
        justify-content: center;
        margin-top: 80px;
    }

    .img-preview video {
        width: 96%;
        margin-top: 60px;
    }

    .txt-preview {
        width: 85%;
        margin: 5px 20px 20px 20px;
    }

    .btn-pdf {
        margin-top: 15px;
    }

    /** ACCUEIL **/

    .content-accueil {
        min-height: calc(100vh - 230px);
        max-height: fit-content;
        flex-direction: column;
    }

    .content-accueil .accueil-img {
        margin-left: 0px;
        width: 80%;
        position: relative;
        bottom: 20px;
    }

    .content-accueil .accueil-img img {
        width: 100%;
    }

    .content-accueil .accueil-txt {
        width: 85%;
        margin-top: 50px;
    }

    /** CONTACT **/

    .content-contact {
        width: 100%;
        min-height: calc(100vh - 230px);
        max-height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .content-contact h2 {
        margin-top: 50px;
    }

    .content-contact form {
        align-items: center;
        width: 75%;
    }

    .content-contact form .msg #msg {
        width: 100%;
    }

    .content-contact form .btn-send button {
        width: 180px;
    }

    .content-contact form .btn-send button span {
        display: block;
        opacity: 1;
    }

    .content-contact form .btn-send {
        justify-content: center;
        margin-top: 20px;
    }

    .content-contact form .btn-send button:hover{
        animation-name: none;
    }

    .content-contact form .btn-send button:hover span{
        animation-name: none;
    }

    .content-contact form .name #name:hover,
    .content-contact form .mail #mail:hover,
    .content-contact form .msg #msg:hover{
        background-color: transparent;
    }

    /** A PROPOS **/

    .apropos1 {
        padding-top: 0px;
        flex-direction: column;
        align-items: center;
    }

    .avatar-corps {
        width: 330px;
        display: flex;
        justify-content: center;
    }

    .infos {
        width: 85%;
    }

    .infos h2 {
        line-height: 25px;
    }

    .apropos2 {
        padding-top: 0px;
        flex-direction: column;
    }

    .experience {
        width: 100%;
    }

    .experience h2 {
        margin-top: 30px !important;
        text-align: center;
        padding-left: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 18px;
    }

    .experience h2 img {
        width: 30px !important;
        margin-bottom: 5px;
    }

    .experience .exp-container {
        width: 96%;
        height: 100px;
        border-radius: 0px 50px 50px 0px;
    }

    .experience .exp-container .exp-header {
        border-radius: 0px 50px 50px 0px;
        min-width: 30%;
    }

    .experience .exp-container .exp-header .date {
        font-size: 14px;
        margin-left: 5px;
        width: 100%;
        margin-left: 0px;
    }

    .experience .exp-container .exp-header img {
        height: 40px !important;
        margin-left: 3px;
        display: none;
    }

    .experience .exp-container .exp-text {
        font-size: 14px;
        width: 62%;
        padding-left: 8px;
    }

    .interest {
        width: 100%;
        padding-top: 0px;
        justify-content: center;
    }

    .interest div {
        font-size: 12px;
        width: 35%;
        margin: 5px 20px;
    }

    .interest div img{
        width: 90px !important;
    }

    .competence {
        width: 100%;
    }

    .competence h2{
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 18px;
    }

    .competence h2 img{
        width: 30px !important;
        margin-bottom: 5px;
    }

    .competence h3{
        margin-left: 15px;
        font-size: 16px;
    }

    .competence .tech img {
        margin-left: 10px;
    }

    .competence .tech span {
        top: 3px;
        font-size: 14px;
    }

    .langage div {
        min-width: 40%;
        font-size: 14px;
        margin-left: 7px;
    }

    .logiciel{
        margin-left: 0px;
        width: 100%;
    }

    .logiciel div {
        min-width: 40%;
        font-size: 14px;

    }

    .logiciel div img {
        width: 40px;
        margin-left: 10px;
    }

    .pro {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 0px !important;
        margin-top: 5px;
    }

    .pro .pro-container {
        width: 300px;
        margin-bottom: 0px;
    }
    
}

@media only screen and (min-width: 800px){

    .menu a {
        width: 180px;
    }

    .menu a span {
        display: block;
    }

    .menu a svg {
        margin-right: 5px;
    }

    /**ACCUEIL**/

    .content-accueil {
        flex-direction: row;
    }

    .content-accueil .accueil-txt {
        padding-left: 30px;
        font-size: 14px;
    }

    .content-accueil .accueil-img {
        margin-left: 20px;
    }
    
    /**PORTFOLIO**/

    .filters-box .content-filters {
        min-width: 50%;
        max-width: 50%;
    }

    .content {
        display: grid;
    }

    .works {
        grid-template-columns: 1fr 1fr;
    }

    .works-content {
        width: 250px;
        height: 250px;
        background-size: 250px ;
    }

    .content-preview {
        flex-direction: row;
        min-height: calc(100vh - 50px);
    }

    .img-preview {
        width: 320px !important;
    }

    .img-preview video {
        margin-top: 0px;
    }

    .txt-preview {
        width: 50%;
        margin: 5px 20px 20px 0px;
    }

    /**A PROPOS**/

    .apropos1 {
        padding-top: 60px;
        flex-direction: row;
        justify-content: center;
    }

    .infos {
        width: 360px;
        font-size: 14px;
    }

    .experience .exp-container .exp-header .date {
        font-size: 16px;
        width: 50%;
    }

    .experience .exp-container .exp-header img {
        height: 70px !important;
        display: block;
    }

    .experience .exp-container .exp-text {
        width: 65%;
    }

    .interest div {
        width: 20%;
    }

    .competence .tech img {
        margin-left: 20px;
    }

    .competence .tech span {
        width: calc(20% - 55px);
    }

}

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

    .header{
        width: 100%;
        height: 120px;
        background-color: #00A1E5;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .title{
        width: 100%;
        min-height: 50px;
        max-height: 50px;
        display: grid ;
        grid-template-columns: 30% 40% 30%;
    }
    
    .title h2{
        color: #fff;
        z-index: 99999;
        text-align: center;
        bottom: 8px;
        position: relative;
        margin-left: 0px;
        width: auto;
    }
    
    .title .social{
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 15px;
        padding-top: 5px;
        width: auto;
    }
    
    .title .social a svg{
        width: 24px;
        height: 24px;
        margin: 0 10px;
    }
    
    .title .social a:hover svg path,
    .title .social a:hover{
        fill: #E5007E;
    }
    
    .menu{
        width: 100%;
        min-height: 70px;
        max-height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .menu a{
        margin: 0 40px;
        height: 36px;
        width: 180px;
        color: #fff;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: baseline;
        border-radius: 25px 25px 0px 0px;
        position: relative;
        top: 14px;
        padding-top: 5px;
    }
    
    .menu a svg{
        width: 24px;
        height: 24px;
        margin-right: 10px;
        top: 3px;
        position: relative;
    }
    
    .menu a:hover{
        color: #E5007E;
        background: #fff;
    }
    
    .menu a:hover svg path,
    .menu a:hover{
        fill: #E5007E;
    }
    
    
    .avatar-container{
        min-width: 150px;
        max-width: 150px;
        min-height: 150px;
        position: relative;
        border-radius: 80px;
        background-color: #00A1E5;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 23px;
        z-index: 9999;
    }
    
    .avatar{
        display: block;
        min-width: 120px;
        max-width: 120px;
        min-height: 120px;
        max-height: 120px;
        border-radius: 60px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mobile{
        display: none;
    }
    
    .lottie{
        min-width: 140px;
        max-width: 140px;
        min-height: 140px;
        max-height: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        right: 2px;
        top: 5px;
    }
    
    /** BARRE DE NAVIGATION **/
    
    .navigation{
        width: 100%;
        height: 50px;
        position: sticky;
        top: 0;
        margin-top: 0px;
        display: grid;
        grid-template-columns: 50% 50%;
        z-index: 999;
        padding-top: 12px;
        background: #ffffff6b;
    
    }
    
    .navigation div button{
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 20px;
        margin: 0 6px;
        padding: 0 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    
    
    .navigation div button:hover span,
    .navigation div button:hover{
        display: flex;
    }
    
    .navigation div .filters:hover,
    .navigation div .sort:hover{
        animation-name: button1;
        animation-duration: 0.25s;
        animation-timing-function: ease-in-out;
        animation-fill-mode:forwards
    }
    
    @keyframes button1 {
        0% {background-color: auto;width:40px;}
        100% {background-color: #E5007E;width:90px;}
    }
    
    .navigation div .access:hover{
        animation-name: button2;
        animation-duration: 0.35s;
        animation-timing-function: ease-in-out;
        animation-fill-mode:forwards
    }
    
    @keyframes button2 {
        0% {background-color: auto;width:40px;}
        100% {background-color: #E5007E;width:140px;}
    }
    
    .filters, .sort, .access{
        background-color: #00A1E5;
    }

    .filters-box .content-filters {
        animation-name: filtres;
    }
    
    
    .navigation div button svg{
        min-width: 24px;
        max-width: 24px;
        min-height: 24px;
        max-height: 24px;
    }
    
    .navigation div button span{
        text-decoration: none;
        color: #fff;
        font-family: 'Century Gothic';
        margin-left: 5px;
        display: none;
    }
    
    .nav-btn{
        padding-left: 25px;
        display: flex;
    }
    
    .acc-btn{
        display: flex;
        justify-content: flex-end;
        padding-right: 25px;
    }
    
    /** CONTENU ACCUEIL **/
    
    .content-accueil{
        width: 100%;
        min-height: calc(100vh - 230px);
        max-height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        top: 25px;
    }
    
    .content-accueil .accueil-txt{
        max-width: 420px;
        font-size: 16px;
        margin-top: 0px;
    }
    
    .content-accueil .accueil-txt h1{
        font-size: 24px;
        color: #00A1E5;
    }
    
    .content-accueil .accueil-img{
        margin-left: 20px;
        width: auto;
    }
    
    .content-accueil .accueil-img img{
        width: 530px;
    }
    
    /** CONTENU PORTFOLIO **/
    
    .content{
        width: 100%;
        /**height: 1000px;**/
        display: grid;
        position: relative;
        grid-template-columns: 15% 70% 15%;
    }
    
    .works{
        display: grid;
        grid-template-columns: 1fr 1fr ;
    }
    
    .works-content{
        width: 250px;
        height: 250px;
        background-color: rgb(110, 110, 110);
        place-self: center;
        margin: 25px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background-size: 250px;
    }
    
    .works-content p{
        width: 100%;
        height: 100%;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: brightness(25%);
        color: #fff;
        font-size: 14pt;
        opacity: 0;
        text-align: center;
        padding: 0px 20px;
    }
    
    .works-content:hover p,
    .works-content:hover{
        animation-name: reveal;
        animation-duration: 0.25s;
        animation-timing-function: ease-in-out;
        animation-fill-mode:forwards
    }
    
    @keyframes reveal {
        0% {opacity:auto;background-size: 250px;}
        100% {opacity:1;background-size: 280px;}
    }
    
    .box-info{
        position: fixed;
        width: 100vw;
        height: 70px;
        background-image: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.692) 60%, rgba(0, 0, 0, 0) 100% );
        z-index: 999999999;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        bottom: -70px;
        animation-name: none;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
    }
    
    @keyframes info {
        0% {bottom:-70px;}
        18% {bottom:0px;}
        50% {bottom:0px;}
        75% {bottom:0px;}
        100% {bottom:-70px;}
    }
    
    
    
    /** PREVIEW **/
    
    .preview{
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: #000000e0;
        z-index: 999999;
        display: none;
    }
    
    .close-preview{
        width: 100%;
        height:50px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    .close-preview button{
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 20px;
        margin: 31px;
        padding: 0 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        top: 7px;
        position: relative;
    }
    
    .btn-close{
        background-color: #00A1E5;
    }
    
    .btn-close:hover{
        background-color: #E5007E;
    }
    
    .btn-close svg{
        min-width: 16px;
        max-width: 16px;
        min-height: 16px;
        max-height: 16px;
    }
    
    .btn-close:hover svg{
        min-width: 18px;
        max-width: 18px;
        min-height: 18px;
        max-height: 18px; 
    }
    
    .content-preview{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 50px;
        min-height: auto;
    }
    
    .img-preview{
        height: auto;
        opacity: 1;
        margin: 20px;
        border-radius: 10px;
        display: block;
    }

    .video{
        width: 450px !important;
    }
    
    .img-preview video{
        margin-top: 20px;
        border-radius: 10px;
    }
    
    .txt-preview{
        width: 300px;
        opacity: 1;
        margin: 20px;
        color: #fff;
    }
    
    video{
        cursor: pointer;
    }
    
    .btn-pdf{
        height: 40px;
        border: none;
        border-radius: 20px;
        padding: 0 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background-color: #00A1E5;
        float: right;
    }
    
    .btn-pdf img{
        height: 24px;
        width: 24px;
    }
    
    .btn-pdf span{
        text-decoration: none;
        color: #fff;
        font-family: 'Century Gothic';
        margin-left: 5px;
    }
    
    .btn-pdf:hover{
        background-color: #E5007E;
    }
    
    /** TRAVAUX **/
    
    #aff-jnr{
        background: url("../images/sfr-jfr-2024.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-sfr2023{
        background: url("../images/Jogger.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-sfr20232{
        background: url("../images/Nageur.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-jnr2023{
        background: url("../images/jnr23.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-sfr2022{
        background: url("../images/sfr22.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-watson{
        background: url("../images/watson.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-sommet{
        background: url("../images/sommetique.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-ekid{
        background: url("../images/Ekid.png") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-idefhi{
        background: url("../images/idefhi.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-cyimail{
        background: url("../images/cyim1.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-cyimlogo{
        background: url("../images/cyim2.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-mage{
        background: url("../images/mage.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-walk{
        background: url("../images/walk.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-moon{
        background: url("../images/moonwalk.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-run{
        background: url("../images/run.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-luffy{
        background: url("../images/luffy.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-quizz{
        background: url("../images/quizz.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-picto{
        background: url("../images/picto.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-visualy{
        background: url("../images/visualy.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-unitech{
        background: url("../images/unitech.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #gif-contest{
        background: url("../images/contest.gif") no-repeat center center;
        background-size: 250px;
    }
    
    #aff-armada{
        background: url("../images/armada.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #aff-cinema{
        background: url("../images/cinema.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #aff-double{
        background: url("../images/double.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #aff-extra{
        background: url("../images/extra.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #aff-gaspillage{
        background: url("../images/gaspillage.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #aff-pat1{
        background: url("../images/pat.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #aff-pat2{
        background: url("../images/pat2.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #aff-pat3{
        background: url("../images/pat3.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #aff-ser{
        background: url("../images/ser.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #aff-trouville{
        background: url("../images/trouville.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #ill-line{
        background: url("../images/line.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #ill-plant{
        background: url("../images/plant.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #ill-flow{
        background: url("../images/flow.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #ill-rose{
        background: url("../images/rose.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #ill-cosmos{
        background: url("../images/cosmos.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #ill-ghost{
        background: url("../images/ghost.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #ill-idea{
        background: url("../images/Idea.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #ill-wave{
        background: url("../images/wave.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #edit-bd{
        background: url("../images/bd.png") no-repeat center center;
        background-size: 250px;
    }
    
    #edit-ime{
        background: url("../images/ime.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #edit-cgidefhi{
        background: url("../images/cg_idefhi.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #edit-cgmotion{
        background: url("../images/cg-motion.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #edit-uaer{
        background: url("../images/uaer.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #edit-dialogue{
        background: url("../images/dialogue.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #edit-savs{
        background: url("../images/savs.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #web-photo{
        background: url("../images/photographe.png") no-repeat center center;
        background-size: 250px;
    }
    
    #web-tremen{
        background: url("../images/TREMEN.jpg") no-repeat center center;
        background-size: 250px;
    }
    
    #web-support{
        background: url("../images/support-preview.png") no-repeat center center;
        background-size: 250px;
    }
    
    /** CONTENU CONTACT **/
    
    .content-contact{
        width: 100%;
        min-height: calc(100vh - 230px);
        max-height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        justify-content: center;
    }
    
    .content-contact h2{
        width: 100%;
        text-align: center;
        color: #00A1E5;
        margin-top: 75px;
        margin-bottom: 10px;
    }
    
    .content-contact h2 img{
        width: 24px;
        height: 24px;
        position: relative;
        top: 3px;
    }
    
    .content-contact form{
        border: 2px solid #00A1E5;
        background-color: #fff;
        border-radius: 10px;
        max-height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 10px 20px;
        box-shadow: 10px 10px 20px rgba(122, 122, 122, 0.233);
        width: 50%;
    }
    
    .content-contact form div{
        margin: 10px 0px;
    }
    
    .content-contact form .name,
    .content-contact form .mail{
        width: auto;
    }
    
    .content-contact form div label{
        color: #00A1E5;
    }
    
    .content-contact form .name label,
    .content-contact form .mail label{ 
        display: inline-block;
        min-width: 60px;
        max-width: 60px;
    }
    
    .content-contact form .name #name,
    .content-contact form .mail #mail{ 
        width: 160px;
    }
    
    .content-contact form .name #name,
    .content-contact form .mail #mail,
    .content-contact form .msg #msg{
        font-family: 'Century Gothic';
    }
    
    .content-contact form .name #name:hover,
    .content-contact form .mail #mail:hover,
    .content-contact form .msg #msg:hover{
        border-color: #E5007E;
        border-radius: 3px;
        border-width: 2px;
        border-style: solid;
        background-color: #ffdbef;
    }
    
    .content-contact form .msg{
        width: 90%;
        display: flex;
        flex-direction: column;
    }
    
    .content-contact form .msg #msg{
        margin-top: 10px;
        width: calc(100% + 40px);
        min-height: 80px;
        max-height: 80px;
    }
    
    .content-contact form .btn-send{
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    
    .content-contact form .btn-send button{
        height: 40px;
        width: 40px;
        border: none;
        border-radius: 20px;
        padding: 0 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background-color: #00A1E5;
        color: #fff;
    }    
    
    .content-contact form .btn-send button span{
        display: none;
        opacity: 0;
        margin-left: 5px;
    }   
    
    .content-contact form .btn-send #submit:disabled:hover span{
        display: none;
    }
    
    .content-contact form .btn-send button:hover{
        animation-duration: 0.2s;
        animation-timing-function: ease-in-out;
        animation-fill-mode:forwards;
        animation-name: button3;
    }
    
    .content-contact form .btn-send button:hover span{
        display: flex;
        animation-name: button4;
        animation-duration: 0.2s;
        animation-timing-function: ease-in-out;
        animation-fill-mode:forwards;
        animation-delay: 0.2s;
    }
    
    @keyframes button3 {
        0% {background-color: auto;width:40px;}
        100% {background-color: #E5007E;width:180px;}
    }
    
    @keyframes button4 {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }
    
    .content-contact form .btn-send button img{
        min-width: 22px;
        max-width: 22px;
    }
    
    /** A PROPOS **/
    
    .content-apropos{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .apropos1{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        padding-top: 80px;
    }
    
    .avatar-corps{
        width: 50%;
        display: flex;
        justify-content: flex-end;
    }

    .avatar-corps dotlottie-player{
        display: block;
    }

    .mobile-corps{
        display: none;
    }
    
    .infos{
        line-height: 20px;
        width: 420px;
    }
    
    .infos h1{
        color: #00A1E5;
    }
    
    .infos h2{
        font-weight: normal;
    }
    
    .infos hr{
        color: #dfdfdf;
    }
    
    .apropos2{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        padding-top: 40px;
        flex-direction: row;
    }
    
    .experience{
        width: 60%;
        /**border: red 1px solid;**/
    }
    
    .experience h2{
        padding-left: 50px;
        text-align: left;
        display: block;
        font-size: revert;
    }
    
    .experience h2 img{
        width: 40px !important;
        position: relative;
        top: 3px;
        margin-bottom: 0px;
    }
    
    .experience .exp-container{
        width: 90%;
        height: 80px;
        background-color: #fff;
        border: #00A1E5 2px solid;
        border-radius: 0px 40px 40px 0px;
        margin-bottom: 15px;
        display: flex;
    
    }
    
    .experience .exp-container .exp-header{
        min-width: 40%;
        height: 100%;
        background-color: #00A1E5;
        border-radius: 0px 40px 40px 0px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    
    .experience .exp-container .exp-header .date{
        color: #fff;
        font-size: 22px;
        width: 50%;
        text-align: center;
        margin-left: 5px;
    }
    
    .experience .exp-container .exp-header img{
        height: 100px ;
        margin-left: 20px;
    }
    
    .experience .exp-container .exp-text{
        font-size: 13px;
        width: 55%;
        display: flex;
        align-items: center;
        padding-left: 10px;
    }
    
    .interest{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-top: 5px;
        justify-content: flex-start;
    }
    
    .interest div{
        width: 22%;
        margin: 0px 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 16px;
    }

    .interest div img {
        width: 80px !important;
    }
    
    .interest div p{
        text-align: center;
    }
    
    .competence{
        width: 40%;
    }

    .competence h2{
        text-align: left;
        width: 100%;
        display: block;
        font-size: revert;
        margin-top: 40px;
    }
    
    .competence h2 img{
        position: relative;
        margin-bottom: 0;
    }
    
    .competence h3{
        font-weight: normal;
        text-decoration: underline;
        margin-left: 0px;
        font-size: revert;
    }
    
    .competence .tech{
        width: 100%;
       margin-bottom: 15px;
       display: flex;
       align-items: flex-end;
    }
    
    .competence .tech img{
        width: 40px;
        position: relative;
        margin-right: 15px;
        margin-left: 0px;
    }
    
    .competence .tech span{
        width: calc(50% - 55px);
        display: flex;
        top: 6px;
        position: relative;
        font-size: revert;
    }
    
    .competence .tech .bar-container{
        width: 70%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        top: 18px;
    }
    
    .competence .tech .bar-container .bar{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .competence .tech .bar-container .bar div{
        width: 23%;
        height: 25px;
        margin-left: 10px;
    }
    
    .competence .tech .bar-container .bar .bar1{
        background-color: #00364D;
        border-radius: 15px 0px 0px 0px;
    }
    
    .competence .tech .bar-container .bar .bar2{
        background-color: #006B99;
        border-radius: 0px;
    }
    
    .competence .tech .bar-container .bar .bar3{
        background-color: #00A1E5;
        border-radius: 0px 15px 0px 0px;
    }
    
    .competence .tech .bar-container span{
        width: 100%;
        font-size: 12px;
        display: flex;
        justify-content: center;
        top: 0;
    
    }
    
    .langage{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    
    .langage div{
        min-width: 50%;
        margin-bottom: 30px;
        font-size: revert;
        margin-left: 0px;
    }
    .langage div img{
        width: 60px;
    }
    
    .logiciel{
        width: calc(100% - 5px);
        display: flex;
        flex-wrap: wrap;
        margin-left: 5px;
    }
    
    .logiciel div{
        min-width: 50%;
        margin-bottom: 30px;
        font-size: revert;
        display: block;
    }
    .logiciel div img{
        width: 40px;
        margin-right: 5px;
        margin-left: 0px;
    }
    
    .pro{
        width: 100%;
    }
    
    .pro .pro-container{
        margin-left: 5px;
        width:220px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border: #00A1E5 2px solid;
        border-radius: 10px;
        padding: 10px 20px;
        box-shadow: 10px 10px 20px rgba(122, 122, 122, 0.233);
        line-height: 10px;
    }
    
    /** FOOTER **/
    
    .footer{
        margin-top: 50px;
        width: 100%;
        height: 60px;
        background-color: #00A1E5;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        position: relative;
    
    }
    
    .footer img{
        width: 20px;
        height: 20px;
    }


}

@media only screen and (min-width: 1164px){

    .works {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media only screen and (min-width: 1280px){
  
    .content-contact form {
        width: 40%;
    }

    .filters-box .content-filters {
        min-width: 25%;
        max-width: 25%;
    }
}

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

    .content-accueil .accueil-txt {
        max-width: 520px;
        font-size: 20px;
    }

    .content-accueil .accueil-img img {
        width: 640px;
    }

    .filters-box .content-filters {
        min-width: 20%;
        max-width: 20%;
    }

    .works {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .content-contact h2 {
        font-size: 40px;
    }

    .content-contact h2 img {
        width: 40px;
        height: 40px;
    }

    .content-contact form {
        width: 30%;
    }

    .content-contact form .msg #msg {
        min-height: 180px;
        max-height: 180px;
    }
}

@media only screen and (min-width: 2560px){

    .works {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    .nav-btn {
        padding-left: 100px;
        display: flex;
    }

    .acc-btn {
        padding-right: 100px;
    }

    #back-top {
        right: 100px;
    }

    .menu a {
        margin: 0 80px;
    }

    .content-accueil .accueil-txt {
        max-width: 580px;
        font-size: 24px;
    }

    .content-accueil .accueil-img {
        margin-left: 50px;
    }

    .content-accueil .accueil-img img {
        width: 840px;
    }

    .filters-box .content-filters {
        min-width: 15%;
        max-width: 15%;
    }

    .video {
        width: 720px !important;
    }

    .apropos1 {
        padding-top: 100px;
    }

    .experience .exp-container .exp-text {
        font-size: 16px;
    }

    .experience .exp-container .exp-header img {
        height: 90px !important;
    }

    .infos {
        width: 530px;
        font-size: 16px;
        line-height: 22px;
    }

    .interest div {
        margin: 20px 5px;
    }

    .competence .tech span {
        width: calc(20% - 55px);
    }

    .content-contact form {
        width: 40%;
        padding: 40px 20px;
    }

    .content-contact form .msg #msg {
        width: calc(100% + 90px);
    }
}

@media only screen and (min-width: 3840px){
    
    .content-accueil .accueil-txt {
        max-width: 810px;
        font-size: 30px;
    }

    .content-accueil .accueil-txt h1 {
        font-size: 48px;
    }

    .content-accueil .accueil-img img {
        width: 1160px;
    }

    .works {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .nav-btn {
        padding-left: 200px;
    }

    .acc-btn {
        padding-right: 200px;
    }

    #back-top {
        right: 200px;
    }

    .menu a {
        margin: 0 130px;
    }

    .content-apropos {
        min-height: calc(100vh - 230px);
    }

    .competence .tech span {
        width: calc(11% - 55px);
    }

    .interest div {
        margin: 50px 5px;
        font-size: 24px;
    }

    .interest div img {
        width: 100px !important;
    }

    .langage div {
        min-width: 34%;
    }

    .logiciel div {
        min-width: 34%;
    }

    .pro .pro-container {
        line-height: 30px;
    }

    .content-contact h2 {
        font-size: 60px;
    }

    .content-contact h2 img {
        width: 60px;
        height: 60px;
        top: 6px;
    }

}