@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400&display=swap');

@font-face {
    font-family: "Arcane Nine";
    src: url("/assets/Arcane Nine.otf");
}

html{
    scroll-behavior: smooth;
}

*{
    cursor: none;
    padding:0;
    margin: 0;
    box-sizing: border-box;
    color:#222f3e;
}

.background{
    background:url(../img/back.png ) center / cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
    height: 700vh;
}


body{
    /* background: #E6E6E6; */
    background-color: #C0C0C0;
    font-family: "Arcane Nine";
}


/* curseur */ 

.cursor {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 1px solid #222f3e;
    transition: all 200ms ease-out;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(calc(-50% + 15px), -50%);
    z-index: 9997;
}
.cursor2 {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #222f3e;
    opacity: .5;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: width .1s, height .3s, opacity .3s;
    z-index: 9997;
}

.cursor,.cursor2{
    display: block;
}
/* .circle{
    position: absolute;
    transform: translate(-50%,-50%);
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 2px solid #222f3e;
    transition: transform .25s;
    z-index: 9999;
}
.circle.active{
    transform: translate(-50%,-50%) scale(.5)
} */

/* section{
    background:url(../img/back.png ) center / cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
} */

#preloader{
    background: #808080 url(../img/demphis-logo.png) no-repeat center center;
    background-size: 15%;
    background-attachment: fixed;
    height: 800vh;
    width: 100%;
    position: fixed;
    z-index: 9999;
    position: absolute;
}



/* HEADER */

header{
    background:url(../img/uxui.png ) center / cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    position: relative;

    
    
    
}

.logo{
    width: 10vw;
    margin-top: 1vh;
    margin-left: 3vw;
}

/* NAVBAR */





.menu a{
    text-decoration: none;
    padding: 10px 10px;
    font-size: 35px;
    margin-top: 5vh;
    color: #FFF;
    font-weight: bold;

}

#burger{
    display: block;
    position: absolute;
    top: 5px;
    right: 3vw;
    font-size: 2.5rem;
    position: fixed;
    z-index: 8;
}

/* #burger{
    transform: rotate(45deg);
} */

/* .fa-xmark{
    transform: rotate(-45deg);
} */




/* #iconBurger.open:before{
    transition: transform 0.5s;
    transform: rotateZ(45deg) translate(15px, 20px);
}

#iconBurger.open:after{
    transition: transform 0.5s;
    transform: rotateZ(-405deg) translate(15px, -20px);
}

#iconBurger:before{
    transition-duration: 0.5s;

}

#iconBurger:after{
    transition-duration: 0.5s;
} */

#iconBurger{
    color: #FFF;
    margin-top: 1vh;
}


/* #iconBurger.close::after{
    content:url(../img/burger/burger.png);
}  */


.close{
    background-image: url(../img/burger/close.png);
}



#menu {
    display: none;
}

#menu.open {
    transition:transform .5s;
    margin-top: -14vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #000;
    backdrop-filter: blur(15px);
    opacity: 0.5;
    position: fixed;
    right: 0%;
    z-index: 7;
    width: 25vw;
    height: 100vh;
}

/* apparition scroll */

.appear, .appear_two, .appear_three, .appear_four, .appear_five{
    opacity: 0;
}

.appear, .appear_two, .appear_three, .appear_four, .appear_five{
    transition: opacity 1s linear 0.4s;
}






/* ICONES */
.icon{
    position:fixed;
    top:50%;
    left:0;
    transform:translateY(-50%);
    display: flex;
    flex-direction:column;
    z-index: 8;
}

.icon i{
    color:#fff;
    padding: 10px;
    font-size: 20px;
    margin:5px 0px;
    z-index: 9997;
}

.instagram{
    background: #c13584;
}

.behance{
    background: #000000;
}

.linkedin{
    background: #0077b5;
}


.icon i:hover {
    background: transparent;
    transition: 0.9s;
    border: 1px solid #E6E6E6;
}


/* Présentation */
.h-text{
    display: flex;
    margin-top: 10vh;
}

h1{
    text-align: center;
    margin-left: 28%;

}

h1, .me, h1 span{
    color: #FFF;
    font-size: 70px;}

h1 span{
    font-weight: bold;
}

.contact a{
    color: #FFF;
    font-size: 25px;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 20px;
    border: 3px solid #FFF;
}

/* .contact a::before, h1 a::after{
    content:"";
    position: absolute;
    width:40px;
    height:40px;
    border: inherit;
    transition: all .5s;
}

.contact a::before{
    top:-15px;
    left:-150px;
    border-width: 3px 0 0 3px;
}

.contact a::after{
    bottom:-15px;
    right: -15px;
    border-width: 0 3px 3px 0;
}


.contact a:hover::before,h1 a:hover::after{
width: calc(100% + 27px);
height: calc(100% + 27px)
} */

/* Start about */
.container{
    width: 100%;
    height: 50vh;
    margin: 0 auto;
}



.profile-img img{
    height: 70vh;
    width: 24vw;
    flex:1;
    margin-left: 37rem;
    margin-top: 5vh;
}
.about.container{
    display:flex;
    align-items:center;
    justify-content: center;
}

.about-heading {
    text-align: center;
    text-transform: uppercase;
    line-height: 0;
}


.about-heading h2{
    font-size:10rem;
    opacity: .5;
}

.about-heading h6{
    font-size:3rem;
    font-weight: 300;
    margin-top: 2.5rem;
}

.featured-presentation{
    margin-top: 20vh;
    align-items: center;
    font-size: 20px;
    text-align: center;
    margin-left: 30vw;
    margin-right: 30vw;
}

.lamanu{
    font-weight: bold;
}


/* Mes experiences */
.exp-mobile{
    display: none;
}

.container-story{
    width: 100%;
    height: 50vh;
    margin: 0 auto;
}
.about-story.container-story{
    display:flex;
    align-items:center;
    justify-content: center;

}
.exp-heading {
    text-align: center;
    text-transform: uppercase;
    line-height: 0;
    margin-top: 90vh;
}
.cv-mobile a{
    display: none;
}


.exp-heading h2{
    font-size:10rem;
    opacity: .5;
}
.exp-heading h6{
    font-size:3rem;
    font-weight: 300;
    margin-top: 2.5rem;
}



/* timeline */

.timeline-section{
    display: block;
}
.timeline-section{
    margin: 0;
    display: grid;
    align-items: center;
    justify-items: center;
    height: 100%;
    color: #f4f7f7;
    font: 1rem/1;
    overflow-x: hidden;
    margin-top: -20vh;
}
/* hide radio buttons, but still expose them to screen readers */
    input {
        position: absolute;
        width: 1px;
        clip: rect(0 0 0 0);
        overflow: hidden;
        white-space: nowrap;
    }
    
    .selector {
        display: grid;
        grid-template-areas:
        'happy lovers'
        'pick  pick';
    }
    
    /* the cards and toggle buttons are actually fat labels that can be clicked to set radio buttons */
    label {
        display: block;
        cursor: pointer;
    }
    
    .happy-card, .lovers-card {
        position: relative; /* for iOS */
        width: 30vw;
        padding: 20px;
        color: #586875;
        background-color: #f4f7f7;
        background: #1fe0;
        backdrop-filter: blur(15px);
        box-shadow: 0 10px 20px #0006;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out; /* important to use a symmetrical timing function (linear also works) */
        animation-fill-mode: forwards;
        z-index:4;
    }
    
    .happy-card {
        grid-area: happy;
        margin-right: -10px; /* nudge closer to lover's card */
        
        /* these values are used to animate via translateX */
        --swing: -25px;
        --overlap: 25px;
    }
    
    .lovers-card {
        grid-area: lovers;
        margin-left: -10px; /* nudge closer to happy card */
    
        /* these values are used to animate via translateX */
        --swing: 25px;
        --overlap: -25px;
    }
    
    /* when a radio button is set, swing the corresponding card fowards */
    #happy-radio:checked ~ .selector .happy-card,
    #lovers-radio:checked ~ .selector .lovers-card {
        animation-name: swing-forwards;
    }
    
    @keyframes swing-forwards {
        0% {
        z-index: 1; /* start behind other card */
        transform: scale(0.9);
        }
        50% {
        transform: translateX(var(--swing));
        }
        100% {
        z-index: 2; /* end in front of other card */
        transform: translateX(var(--overlap)) scale(1.1);
        }
    }
    
    /* when a radio button is set, swing the opposite card backwards */
    #happy-radio:checked ~ .selector .lovers-card,
    #lovers-radio:checked ~ .selector .happy-card {
        animation-name: swing-backwards;
    }
    
    @keyframes swing-backwards {
        0% {
        z-index: 2;  /* start in front of other card */
        transform: translateX(var(--overlap)) scale(1.1);
        }
        50% {
        transform: translateX(var(--swing));
        }
        100% {
        z-index: 1; /* end behind other card */
        transform: scale(0.9);
        }
    }
    
    h3{
        margin: 0;
        padding-bottom: 10px;
        font-size: 1.5rem;
        text-align: center;
        font-weight: bold;
        padding-top: 20px;
    
    }
    
    .bold {
        margin: 0;
        padding-bottom: 10px;
        font-size: 0.90rem;
        text-align: center;
        font-weight: bold;
    }
    
    /* ul {
        margin: 15px 0;
        padding-left: 30px;
        line-height: 1.5rem;
        list-style-type: square;
    } */
    
    .featured-desc, .featured-desc-two{
        margin: 0 -20px -20px;
        padding: 15px;
        font-size: 0.7rem;
        text-align: center;
    }
    .story-desc{
        text-align: center;
    }
    
    .happy-pick, .lovers-pick {
        grid-area: pick;
        margin: 50px auto 0;
        padding: 15px;
        border: 1px solid #f4f7f7;
        border-radius: 9999px;
        background-color: #1fe0;
        font-size: 1rem;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .happy-pick::before, .lovers-pick::after {
        display: inline-block;
        font-weight: bold;
    }
    
    .happy-pick::before {
        margin-right: 10px;
        /*content: '\f0a8';  fa-arrow-circle-left */
    }
    
    .lovers-pick::after {
        margin-left: 10px;
        /*content: '\f0a9';  fa-arrow-circle-right */
    }
    
    /* hide happy toggle button if happy is currently selected */
    #happy-radio:checked ~ .selector .happy-pick {
        display: none;
    }
    
    /* hide lover's toggle button if lover's is currently selected */
    #lovers-radio:checked ~ .selector .lovers-pick {
        display: none;
    }


    /* competences */
    .compt{
        text-align: center;
        text-transform: uppercase;
        margin-top: 30vh;  
        line-height: 0;
        
    }
    .compt h2{
        font-size:10rem;
        opacity: .5;
    }
    
    .compt h6{
        font-size:3rem;
        font-weight: 300;
        margin-top: 2.5rem;
    }
    

    .competences{
    width: 100%;
    height: 70vh;
    margin: 0 ;
    position: relative;
    }

    .prog img, .itil{
        margin-top: 5rem;
        width: 6vw;
    }


    /* langues */




/* projets */
.portfolio{
    display: none;
}
.container-portfolio{
    display: block;
}
.projet{
    text-align: center;
    text-transform: uppercase;
    margin-top: 20vh;  
    line-height: 0;
    height: 150vh;
}
    

.projet h2{
    font-size:10rem;
    opacity: .5;
}

.projet h6{
    font-size:3rem;
    font-weight: 300;
    margin-top: 2.5rem;
}

.container-portfolio {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10vh;
}

.container-portfolio .box {
    position: relative;
    width: 25rem;
    height: 25rem;
    margin: 4rem;
}

.container-portfolio .box:hover .imgBox {
    transform: translate(-3.5rem, -3.5rem);
}

.container-portfolio .box:hover .content {
    transform: translate(3.5rem, 3.5rem);
}

.imgBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: all 0.5s ease-in-out;
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(70%); /* Firefox */ 
}
.imgBox:hover  {

    -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
    filter: grayscale(0%); /* Firefox */ 
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}


.imgBox img {
    width: 25rem;
    height: 25rem;
    object-fit: cover;
    resize: both;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    background-color: #1fe0;
    z-index: 1;
    align-items: flex-end;
    text-align: center;
    transition: 0.5s ease-in-out;
}

.content h2 {
    display: block;
    font-size: 1.3rem;
    color: #000;
    font-weight: 500;
    line-height: 1.2rem;
    letter-spacing: 1px;
}

.content span {
    color: #222f3e;
    font-size: .8rem;
    font-weight: 300;
    letter-spacing: 2px;
}

.content .plus{
    color: #222f3e;
    font-size: 1rem;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 30px;
    border: 3px solid #222f3e;
}

.content .apprenants{
    font-weight: bold;
    text-transform: uppercase;
}

@media (max-width: 600px) {
    .container .box:hover .content {
    transform: translate(0, 3.5rem);
    }
    .container .box:hover .imgBox {
    transform: translate(0, -3.5rem);
    }
}

/* footer */

footer{
    background:url(../img/creativite.jpg ) center / cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    z-index: 1000;
    width: 100%;
    height: 50vh;
    position: relative;
    font-size: 22px;
    font-weight: 700;
    text-decoration: underline;
    z-index: 1;
    display: inline-block;
}


    
    .footer-distributed{
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
        width: 100%;
        text-align: left;
        font: bold 16px sans-serif;
        padding: 55px 50px;
    }
    
    .footer-distributed .footer-left,
    .footer-distributed .footer-center,
    .footer-distributed .footer-right{
        display: inline-block;
        vertical-align: top;
    }
    
    /* Footer left */
    
    .footer-distributed .footer-left{
        width: 40%;
    }
    
    /* The company logo */
    
    .footer-left img  {
        margin: 0;
    }
    

    
    /* Footer links */
    
    .footer-distributed .footer-links{
        color:  #ffffff;
        margin: 20px 0 12px;
        padding: 0;
    }
    
    .footer-distributed .footer-links a{
        display:inline-block;
        line-height: 1.8;
        font-weight:400;
        text-decoration: none;
        color:  inherit;
    }
    
    .footer-distributed .footer-company-name{
        color:  #FFF;
        font-size: 14px;
        font-weight: normal;
        margin: 0;
    }
    
    /* Footer Center */
    
    .footer-distributed .footer-center{
        width: 35%;
    }
    
    .footer-distributed .footer-center i{
        color: #ffffff;
        font-size: 25px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        text-align: center;
        line-height: 42px;
        margin: 10px 15px;
        vertical-align: middle;
    }
    
    .footer-distributed .footer-center i.fa-envelope{
        font-size: 17px;
        line-height: 38px;
    }
    
    .footer-distributed .footer-center p{
        display: inline-block;
        color: #ffffff;
        font-weight:400;
        vertical-align: middle;
        margin:0;
    }
    
    .footer-distributed .footer-center p span{
        display:block;
        font-weight: normal;
        font-size:14px;
        line-height:2;
    }
    
    .footer-distributed .footer-center p a{
        color: #fff;
        text-decoration: none;;
    }
    
    .footer-distributed .footer-links a:before {
        content: "|";
        font-weight:300;
        font-size: 20px;
        left: 0;
        color: #fff;
        display: inline-block;
        padding-right: 5px;
    }
    
    .footer-distributed .footer-links .link-1:before {
        content: none;
    }
    
    /* Footer Right */
    
    .footer-distributed .footer-right{
        width: 20%;
    }
    
    .footer-distributed .footer-company-about{
        line-height: 20px;
        color:  #FFF;
        font-size: 13px;
        font-weight: normal;
        margin: 0;
    }
    
    .footer-distributed .footer-company-about span{
        display: block;
        color:  #ffffff;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    
    .footer-distributed .footer-icons{
        margin-top: 25px;
    }
    
    .footer-distributed .footer-icons a{
        display: inline-block;
        width: 35px;
        height: 35px;
        cursor: pointer;
        border-radius: 2px;
    
        font-size: 20px;
        color: #ffffff;
        text-align: center;
        line-height: 35px;
    
        margin-right: 3px;
        margin-bottom: 5px;
    }
    
    /* If you don't want the footer to be responsive, remove these media queries */
    
    @media (max-width: 880px) {
    
        .footer-distributed{
            font: bold 14px sans-serif;
        }
    
        .footer-distributed .footer-left,
        .footer-distributed .footer-center,
        .footer-distributed .footer-right{
            display: block;
            width: 100%;
            margin-bottom: 40px;
            text-align: center;
        }
    
        .footer-distributed .footer-center i{
            margin-left: 0;
        }
    
    }
    







    @media only screen and (min-width: 1800px){
        
        .profile-img img {
            height: 65vh;
            width: 30vw;
            margin-left: 43rem;
        }
        h1 {
            margin-left: 35%;
        }

        .featured-presentation {
            margin-top: 20vh;
            align-items: center;
            font-size: 20px;
            text-align: center;
            margin-left: 10vw;
            margin-right: 10vw;
        }

        /* portfolio */
        .container-portfolio{
            display: block;
        }

        .portfolio{
            margin-top: 30vh;
        }

        .container-portfolio{
            display: flex;
        }
        .box{
            flex-direction: row;
        }
} 



@media (orientation: landscape) and (min-device-width: 1100px) {
    /* *{
        cursor: default;
    }

    .cursor,.cursor2{
        display: none;
    } */
    /* .background {
        height: 750vh;
    } */
    /* presentation titre */
    h1 {
        margin-left: 28%;
    }
    /* photo profil */
    .profile-img img {
        margin-left: 36rem;
    }

    



}

@media (orientation: landscape) and (min-width: 1023px) and (max-width: 1100px){
    /* *{
        cursor: default;
    }

    .cursor,.cursor2{
        display: none;
    } */
    .background {
        height: 1048vh;
    }
    /* presentation titre */
    h1 {
        margin-left: 14%;
    }
    /* photo profil */
    .profile-img img {
        margin-left: 24rem;
    }

 




}


@media only screen and (min-width: 1021px)and (max-width: 1023px) and (orientation : portrait){
    header{
        height: 50vh;
    }

    h1 {
        text-align: center;
        margin-left: 17%;
    }

    .background{
        height: 525vh;
    }

    .profile-img img {
            height: 30vh;
            width: 30vw;
            margin-left: 23rem;
            margin-top: 5vh;
    }

    .featured-presentation {
        margin-top: 10vh;
        font-size: 30px;
        margin-left: 0;
        margin-right: 0;
    }

    .about{
        height: 0;
    }

    .about-story{
        height: 60vh;
    }

    .timeline-section {
        margin-top: -40vh;
    }

    .happy-card, .lovers-card {
        width: 45vw;
    }

    .competences {
        height: 30vh;
    }


}
@media only screen and (min-width: 821px)and (max-width: 1020px) and (orientation : portrait){


    .background {
        height: 735vh;
    }
    /* presentation titre */
    h1 {
        margin-left: 23%;
    }

    .about{
        height: 30vh;
    }
    /* photo profil */
    .profile-img img {
        margin-left: 25rem;
        height: 30vh;
    }


}

@media only screen and (min-width: 819px)and (max-width: 820px) and (orientation : portrait){
    *{
        cursor: default;
    }

    .cursor,.cursor2{
        display: none;
    }
    .background {
        height: 620vh;
    }

    /* .logo */

    .logo {
        width: 20vw;
    }

    /* menu */

.menu a{
        text-decoration: none;
        padding: 10px 10px;
        font-size: 30px;
        margin-top: 5vh;
        color: #FFF;
        font-weight: bold;
    
    }   
    
    #menu.open {
        opacity: 0.8;
        width: 100vw;
    }
    /* header */
    header {
        height: 65vh;
    }
    
/* h1 */

.h-text{
    margin-top: 30vh;
}
    h1, .me, h1 span{
    
        font-size: 40px;
    }
    
    
    h1 {
        text-align: center;
        margin-left: 26%;
        margin-top: -15vh;
    }

    /* photo */
    .profile-img img {
        height: 51vh;
        width: 50vw;
        margin-left: 14rem;
    }

    /* presentation */
    .featured-presentation {
        margin-top: 15vh;
        font-size: 30px;
        margin-left: 5vw;
        margin-right: 5vw;
    }
    .container {
        height: 25vh;
    }

    /* timeline */
.exp-mobile{
    display: none;
    }

    .container-story {
        height: 30vh;
    }
    

.happy-card, .lovers-card {
        position: relative; /* for iOS */
        width: 50vw;
        padding: 20px;}

h3{
    margin-top: 15px;
        
        }

        /* competences */
.competences {
    height: 30vh;
}

.prog img {
    width: 7vw;
}

.itil {
    width: 15vw;
}
        

}






@media (orientation: landscape) and (max-device-width: 897px){
    *{
        cursor: default;
    }

    .cursor,.cursor2{
        display: none;
    }
    /* background */
    .background {
        height: 1480vh;
    }    
    
    /* apparition au scroll */
    .appear, .appear_two, .appear_three, .appear_four, .appear_five{
        opacity: 1;
    }
    /* presensation */
    h1 {
        margin-left: 26%;
        margin-top: 2rem;
    }


    h1, .me, h1 span {
        font-size: 45px;
    }
    /* qui suis je */
    .profile-img img {
        margin-left: 21rem;
    }
    .about{
        height: 85vh;
    }
    

    /* competences */
    .competences {
        height: 93vh;}

    /* footer */
    footer{
        height: 105vh;
    }

    .footer-company-about{
        display: none;
    }


}




@media only screen and (min-width: 768px)and (max-width: 818px) and (orientation : portrait){
    *{
        cursor: default;
    }

    .cursor,.cursor2{
        display: none;
    }

    /* .logo */

    .logo {
        width: 20vw;
    }

    /* menu */

.menu a{
        text-decoration: none;
        padding: 10px 10px;
        font-size: 30px;
        margin-top: 5vh;
        color: #FFF;
        font-weight: bold;
    
    }
    
    #menu.open {
        opacity: 0.8;
        width: 100vw;
    }
    
/* h1 */

.h-text{
    margin-top: 30vh;
}
    h1, .me, h1 span{
    
        font-size: 40px;
    }
    
    
    h1{
        text-align: center;
        margin-left: 16%;
    
    }

    /* timeline */
.exp-mobile{
    display: none;
    }

    .container-story {
        height: 30vh;
    }
    

.happy-card, .lovers-card {
        position: relative; /* for iOS */
        width: 50vw;
        padding: 20px;}

h3{
    margin-top: 15px;
        
        }
        

}



@media (orientation: landscape) and (max-device-width: 897px){
    *{
        cursor: default;
    }

    .cursor,.cursor2{
        display: none;
    }
    /* background */
    .background {
        height: 1480vh;
    }    
    
    /* apparition au scroll */
    .appear, .appear_two, .appear_three, .appear_four, .appear_five{
        opacity: 1;
    }
    /* presensation */
    h1 {
        margin-left: 26%;
        margin-top: 2rem;
    }


    h1, .me, h1 span {
        font-size: 45px;
    }
    /* qui suis je */
    .profile-img img {
        margin-left: 21rem;
    }
    .about{
        height: 85vh;
    }
    

    /* competences */
    .competences {
        height: 93vh;}

    /* footer */
    footer{
        height: 105vh;
    }

    .footer-company-about{
        display: none;
    }


}

@media only screen and (min-width: 420px) and (max-width: 770px) and (orientation : portrait){
    *{
        cursor: default;
    }

    .cursor,.cursor2{
        display: none;
    }
    /* .logo */

    .logo {
        width: 20vw;
    }
/* menu */

.menu a{
    text-decoration: none;
    padding: 10px 10px;
    font-size: 25px;
    margin-top: 5vh;
    color: #FFF;
    font-weight: bold;

}

#menu.open {
    margin-top: -14vh;
    opacity: 0.8;
    position: fixed;
    right: 0%;
    z-index: 7;
    width: 100vw;
    height: 60vh;
}


/* h1 */

.h-text{
    display: flex;
    margin-top: 30vh;
}
h1, .me, h1 span{
    
    font-size: 40px;}


h1{
    text-align: center;
    margin-left: 25%;

}

.contact a{
    font-family: 'Nunito', sans-serif;
    padding: 5px 5px;
    border: 3px solid #FFF;
    font-size: 15px;
}
/* presentation */

.profile-img img {
    height: 45vh;
    width: 40vw;
    margin-left: 15rem;
}

.container {
    height: 10vh;
}

.featured-presentation {
    margin-top: 9vh;
    margin-left: 10vw;
    margin-right: 10vw;
}

/* experience */
.timeline-section{
    display: block;
}
.happy-card, .lovers-card {
    position: relative; /* for iOS */
    width: 50vw;
    padding: 20px;



}
/* competences */
.prog img, .itil {
    width: 11vw;
}

/* portfolio */

.container-portfolio{
    display: block;
    display: flex;
    flex-direction: column;
}
/* footer */

.footer-company-about{
    display: none;
}

}





@media only screen and (max-width:450px)and (orientation : portrait){


    .background {
        height: 380vh;
    }



    .appear, .appear_two, .appear_three, .appear_four, .appear_five{
        opacity: 1;
    }

    *{
        cursor: default;
    }

    .cursor,.cursor2{
        display: none;
    }
    /* menu */
    #menu.open {
        opacity: 0.7;
        width: 100vw;
        height: 100%;
        margin-top: -8vh;
    }
    header{
        height: 80vh;
    }
    /* présentation */

    .container {
        height: 10vh;
    }

    h1, .me, h1 span{
    
        font-size: 40px;
    }

    h1{
        text-align: center;
        margin-left: 2%;
        
    
    }

    /* about me */
    .profile-img img{
        height: 40vh;
        width: 60vw;
        flex:1;
        margin-left: 5rem;
        
    }
    .featured-presentation{
        margin-left: 0;
        margin-right: 0;
        margin-top: 6vh;
    }

    /*competences*/

    .competences{
        height: 100vh;
    }


/* experience */

.about-story{
    height: 10vh;
}
.timeline-section{
    display: none;
}
.exp-mobile{
    display: block;
    position: absolute;
}

.cv-mobile a{
    display: block;
    text-align: center;
    margin-top: -30vh;
    font-size: 30px;
    font-weight: bold;

}






/* competences */
.prog img, .itil {
    margin-top: 5rem;
    width: 20vw;
}

/* portfolio */
.projet {
    height: 50vh;
}

.container-portfolio{
    display: none;
}

.portfolio{
    display: block;
}


.portfolio {
    display: flex;
    max-width: 600px;
    width: 100%;
    height: 400px;
    margin: 4rem auto;
    }
    .image {
        min-width: 5%;
        margin: 5px;
        cursor: pointer;
        transition: .5s cubic-bezier(0.05, 0.61, 0.41,0.95);
        overflow: hidden;
        position: relative;
    }
    .image.active {
        flex-grow: 100;
        max-width: 600px;
        width: 90%;
        margin: 0px;
        border-radius: 7px;
        background-size: 100%;
        -webkit-filter: grayscale(15%); /* Chrome, Safari, Opera */
        filter: grayscale(15%); /* Firefox */ 
    }
    .image:not(.active){
        flex-grow: 1;
        border-radius: 5px;
        width: 10%;
        -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
        filter: grayscale(70%); /* Firefox */ 
    }
    .text-container {
        width: 100%;
        height: 400px;
        padding: 2rem;
        visibility: hidden;
        transform: translateY(300px);
        opacity: 0;
        transition: all .4s ease;
        background: linear-gradient(354deg, black 0%, transparent 72%);
        /* color: white; */
        overflow: hidden;
    }
    .text .h5black {
        position: absolute;
        color: #000;
        font-size: 15px;
        font-weight: bold;
        text-align: center;
    }
    .text .h5white {
        position: absolute;
        color: #FFF;
        font-size: 15px;
        font-weight: bold;
        text-align: center;
    }

    /* .text p {
        position: absolute;
        bottom: 4rem;
        color: #000;
        font-size: 8px;
        text-align: center;
        font-weight: bold;
    } */

    .text a {
        position: absolute;
        bottom: 2rem;
        color: #FFF;
        font-weight: bold;
        text-align: center;
        font-size: 15px;
    }
    .active .text-container {
        visibility: visible;
        transform: translateY(0px);
        opacity: 1;
    }

    .footer-company-about{
        display: none;
    }

    .logo {
        width: 20vw;
    }

    footer{
    height: 80vh;
}


}