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

    .hobbiesSvgPath, .outilsSvgPath, .langsSvgPath, .formationSvgPath, .skillsSvgPath {
        stroke-width: 2px !important; 
    }


    .outils {
        margin: 0 auto;
        position: relative;
        /* bottom: 50px; */
        bottom: 124px;
    }
    .langues {
        position: relative;
        /* bottom: 50px; */
        bottom: 100px;
    }

    .textCompetences {
        font-size: 1.5em;
    }

    #dlCv {
        font-size: 0.62em;
        background-color: var(--secondaryColorMat);
        padding: 5px 10px;
        color: #08090c;

    }

    .pageSectionTitleSkills {
        text-align: center;
        width: fit-content;
        left: 50%;
        transform: translateX(-50%);
    }



    .projectShapesDiv-bottom-right {
        /* transform: scale(1.5);
        filter: blur(2px);
        right: -14px;
        bottom: 113px; */

        transform: scale(1.3);
        filter: blur(2px);
        right: -76px;
        bottom: -21px;
    }

    .projet1_topleftShape_desktop {
        /* transform: rotate(180deg) translateX(211px) translateY(80px); */
        transform: rotate(180deg) scale(1.15);
        width: 50%;
    }
    .projet1_topleftShape_desktop2 {
        /* transform: translateX(-218px) translateY(-31px); */
        width: 50%;
    }

    .desktopSlideMargin {
        /* margin: 10px 5% 50px 5%; */
        margin: 10px 7% 50px 7%;
        border-top-left-radius: 60px;
        border-bottom-right-radius: 60px;
    }

    /* Grid CV */
.gridContainer {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr 0.3fr; 
    gap: 0px 130px; 
    grid-template-areas: 
    "formations hobbys"
    "langages langages"
    "outils langues"; 

    margin-top: 30px;
}

    .langsSvgContainer {
        transform: translate(171px, -82px) scale(1.1);
    }
    .outilsSvgContainer {
        transform: translate(150px, -87px);
    }

    .pageSectionTitle {
        font-size: 1.5em;
        margin-block-start: 0em;
    }

    .skillsSvgContainer {
        /* position: absolute;
        left: 50%;
        transform: translateX(-12%) translateY(-116px);
        z-index: -99; */

        position: absolute;
        height: 80px;
        width: 100px;
        top: -30px;
        left: 118%;
        z-index: -99;
    }

    #plz-form-4e67dacf-1c2f-4b24-8594-268e8604f643 {
        margin-top: 35px !important;
        width: 45% !important;
        padding: 15px 30px !important;
    }
    
    .skillsSvgPath {
        opacity: 0.8;
        transform:scale(0.8);  
        fill: none; 
        stroke: #ef3b2d; 
        stroke-width: 2; 
        stroke-linecap: round; 
        stroke-linejoin:  miter; 
        stroke-miterlimit: 4;
        transition: stroke 0.4s;
    }

    .galerieAccueil {
        justify-content: center;
        display: grid; 
        grid-template-columns: 1fr 1fr 1fr 1fr; 
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
        gap: 15px 25px; 
        grid-template-areas: 
          "photo1 photo2 photo3 photo4"
          "photo5 photo6 photo7 photo8"
          "photo9 photo10 photo11 photo12"
          "photo13 photo14 photo15 photo16"
          "photo17 photo18 photo19 photo20"
          "photo21 photo22 photo23 photo24"
          "photo25 photo26 photo27 photo28"
          "photo29 photo30 photo31 photo32"
          "photo33 photo34 photo35 photo36"
          "photo37 photo38 photo39 photo40"
          "photo41 photo42 photo43 photo44"
          "photo45 photo46 photo47 photo48"
          "photo49 photo50 photo51 photo52"
          "photo53 photo54 photo55 photo56"
          "photo57"; 
    }
    .imgGalleries {
        width:100%; 
        height:auto; 
        margin:auto; 
        vertical-align:middle; 
        /* border-radius:10px; */
    }

    .loupesGalerie {
        font-size: 4em;
    }

    .galerieDiv {
        /* margin: 0 251px; */
        margin: 0 10px;
    }

    .projectSlideLogo {
        transform: scale(6);
        position: relative;
        left: 117px;
        width: 48px;
    }

    .iframe {
        margin-right: 55px;

        /* bottom: 50px; */
        bottom: -13px; 
        /* Marche: (sans le rotate 3D) */
    
        transform: perspective(1220px) rotateY(83deg) translateX(35px) scale(0.8);

        animation: fadeInRotateIframe 2s 2.5s ease forwards !important;
    }
    @keyframes fadeInRotateIframe {
        from {
            opacity: 0;
            transform: perspective(1220px) rotateY(83deg) translateX(35px) scale(0.8);
        }
        to {
            opacity: 1;
            transform: perspective(1220px) rotateY(0deg) translateX(35px) scale(0.8);
        }
    }

    .splide__toggle {

    }

    .smileSvgContainer {
        position: absolute;
        right: -4px;
        bottom: -10px;
        height: 25px;
        width: 62px;
    }
    .smileSvgContainerResp {
        right: -5px !important;
    }

    #smilePath {
        transform : translateX(0px) rotateY(36deg);
        transition: all 0.4s;
    }
    .smilePathResp {
        transform: translateX(0px) rotateY(45deg) !important;
    }

    .carouselImgProject {
        width: 53%;
    }

    .projectContainer {
        /* padding-bottom: 40px; */
        position: relative;
        bottom: 4px;

        /* Pour compenser les relative qui mess le footer */
        /* padding-bottom: 67px;  */
        margin-bottom: 0px;

        background-color: #00000000;
        border-radius: 37px;
    }


    .projectDescriptionHeader {
        overflow: visible;
        padding: 2px 0px 0px 0px;
        background-color: #ffffff00;
    }


    .description {
        position: relative;
        /* top: -10px; */
        top: 30px;

        border: 0px solid var(--secondaryColor);
        font-size: 90%;
        padding: 13px 23px 39px 23px;

    }

    .mainSkill {
        border: 2px solid var(--secondaryColor) !important;
    }

    .projectLinksDiv {
        gap: 21px;
        flex-direction: row;
        float: none;
        right: 0px;
        top: 13px;
    }

    .projectSlideLogo3 {
        transform: scale(5.5);
        position: relative;
        left: 94px !important;
        width: 69px !important;
    }

    .projectSlideLogo4 {
        transform: scale(5.5);
        position: relative;
        left: 125px !important;
        width: 69px !important;
    }

    #underlineCV {
        font-size: 2em;
    }

    .githubProjectLink {
        padding: 9px 13px;
    }

    .iframeElem {
        width: 406px;

        padding: 19px 8px 38px 8px;

    }
    
    .paragrapheAccueil {
        font-size: 1.22em;
    }

    #menuLigneCv {
        font-size: 1.35em;

        margin-block-start: 0.3em;
    }

    .symfonyShapeDiv {
        height: 115px;
    }
    .symfonyShapeTxt {
        font-size: 1.2em;
    }

    #portfolioTitle {
        font-size: 2.2em;
        margin-block-start: 0.5em;
        margin-block-end: 0;
    }


    #accueilGridPresentation {
        width: 90%;
        /* margin: 0px auto; */

        display: inline-flex;
        flex-direction: row-reverse;

        align-items: center;
        gap: 40px;

        left: 50%;
        transform: translateX(-50%);
    }
    #portraitAccueil {
        float: none;
        margin: 0px 0px 0px 0px;
    }
    .paragrapheAccueil {
        opacity: 0;

        background-color: #00000017;
        padding: 14px 10px 14px 24px;
        border-radius: 12px;
        box-shadow: 6px 6px 25px 0px #00ffff24;
        border-bottom: 1px solid #19ddbc54;
        border-right: 1px solid #19ddbc30;

        animation: fadeIn 0.5s 0s ease forwards;
    }

    .imgAccueil { 
        /* width: 180px;
        height: 195px;
        margin: 45px 30px 35px 112px; */

        width: 194px;
        height: 194px;
        margin: 5px 30px 37px 56px;

        position: relative;
        bottom: -1px;
        /* left: 29px; */
        left: 0px;
        transform: scale(0.94);
    }



    .fixScalePortraitPC {
        position: relative;
        transform: scale(0.85);
        /* left: 22px; */
        left: 0px;
    }

    #portfolioSousTitre {
        margin-block-start: 0;
        font-size: 1.25em;
        margin-block-end: 0.6em;
        line-height: 1.2em;

        bottom: 18px;


        margin-left: 18px;
        padding-left: 18px;
        color: #ef3b2d;
        border-left: 1px solid #19ddbc57;
    }

    @keyframes bandeauGrowShrink {
        0% {
            transform: translate(140px, -50%);
            height: 110px;
        }
        50% {
            transform: translate(140px, -50%);
            height: 145px;
        }
        100% {
            transform: translate(140px, -50%);
            height: 110px;
        }
    }

    #contactButton {
        font-size: 1.7em;
        
        background-color: #00ffd614;
    }

    #contactBtnFade {
        margin-bottom: 75px;
    }

    .projetNbr {
        font-size: 1em;
    }
    .projetSlideTitle {
        font-size: 1.5em;
    }

    /* Rectangle photo Accueil */
    #rectangleSvgPath {
        opacity: 0.85;
        transform: scale(0.83);
        fill: none; 
        stroke: var(--secondaryColor); 
        stroke-width: 4; 
        stroke-linecap: round; 
        stroke-linejoin:  miter; 
        stroke-miterlimit: 4;
    }
    .rectangleSvg {
        opacity: 0;
        height: 250px;

        position: absolute;
        right: -56px;
        top: -20px;
        /* height: -webkit-fill-available; */
    }

      /* Raie Accueil */
    #raieAccueil1 {
        offset-path: path("M 135 -145 C 96.677 474.67 642.748 898.15 2381.245 708.698");

        animation: raieAccueil1 30000ms 0500ms 1 linear;
    }

    @keyframes raieAccueil1 {
        0% {
            transform: rotateZ(9deg) rotateX(180deg);
            offset-distance: 0%;
            opacity: 0;
        }
        11% {
            opacity: 0.3;
        }
        22% {
            opacity: 0.3;
        }
        33% {
            transform: rotateZ(9deg) rotateX(125deg);

            opacity: 0.3;
        }
        44% {
            opacity: 0.3;
        }
        55% {
            opacity: 0.3;
        }
        66% {
            opacity: 0.3;
        }
        77% {
            transform: rotateZ(9deg) rotateX(115deg);
            opacity: 0.3;
        }
        88% {
            opacity: 0.3;
        }
        100% {
            transform: rotateZ(9deg) rotateX(110deg);
            opacity: 0.1;
            offset-distance: 100%;
        }
      }
    
      .accueilProjectsTrait {
        width: 145%;
      }

      .gitHubLink {
        left: 22px;
        top: 13px;
      }
      .githubLogo {
        width: 57px;
      }

      #sideNavDesktop {
        transform: scale(0.85);
      }

    .pageTitle {
        margin-top: 40px;
        margin-bottom: 36px;
        font-size: 2.3em;
    }

    .pageTitleAccueil {
        margin-top: 14px !important;
        margin-bottom: 42px;
    }

    .photosGallerie {
        /* opacity: 1; */
        display: block;
        width: 255px;
        margin: auto;
        border-radius: 2px;
        filter: blur(0px);
    }

    #citationAndLightBulbWrapper {
        margin-bottom: 50px;
        margin-top: 15px;

        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    #photographieTitle {
        font-size: 3.7em;
        /* margin-block-start: 0; */
        margin-block-start: 0.5em;
        margin-block-end: 1.3em;

        -webkit-box-reflect: below 7px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
    }

    #messageGalerie {
        font-size: 1.4em;
        /* margin-block-start: 140px; */
        margin-block-start: 90px;
        margin-block-end: 0.3em;
    }
    #messageLoadingLong {
        font-size: 1.4em;
        margin-bottom: 15px;
    }


    .letterO {
        width: 32px;
        position: relative;
        top: 2px;
    
    }

    #galerieTitle {
        margin-block-start: 0.6em;
    }


    #motion-demo3a {
        display: none;
        /* https://yqnn.github.io/svg-path-editor/ */
        offset-path: path("M -173 983 C 189 703 321 105 580 -22");
        offset-rotate: auto;
        position: fixed;
    
        /* C'est à cause du top:5% que le path svg commence en haut */
        top: -5%;
        z-index: -5;
    
        animation: move3a 30000ms 1000ms infinite cubic-bezier(0.52, 0.23, 0.34, 0.72);
        width: 65px;
        /* height: 65px; */
    
        content:url("../img/jellyfish_blue.png");
        opacity: 0;
        transform: rotateZ(75deg);
    }
    #motion-demo3b {
        display: none;
        /* https://yqnn.github.io/svg-path-editor/ */
        offset-path: path("M -209 979 C 189 703 207 72 434 -45");
        offset-rotate: auto;
        position: fixed;
    
        /* C'est à cause du top:5% que le path svg commence en haut */
        top: 3%;
        z-index: -5;
    
        animation: move3b 30000ms 1000ms infinite cubic-bezier(0.52, 0.23, 0.34, 0.72);
        width: 55px;
        height: 80px;
    
        content:url("../img/jellyfish_blue.png");
        opacity: 0;
        transform: rotateZ(75deg);
      }
      #motion-demo3c {
        display: none;
        /* https://yqnn.github.io/svg-path-editor/ */
        offset-path: path("M -139.665 723.969 C 164 477 134 100 275 -53");
        offset-rotate: auto;
        position: fixed;
    
        /* C'est à cause du top:5% que le path svg commence en haut */
        top: 3%;
        z-index: -5;
    
        animation: move3b 31000ms 1050ms infinite cubic-bezier(0.52, 0.23, 0.34, 0.72);
        width: 55px;
        height: 80px;
    
        content:url("../img/jellyfish_blue.png");
        opacity: 0;
        transform: rotateZ(75deg);
      }
    
    


    #motion-demo {
        display: none;
        /* https://yqnn.github.io/svg-path-editor/ */
        offset-path: path("M -79 5 C 386 273 993 -91 1488 154");
        top: 3%;
        offset-rotate: auto;
        position: absolute;
    
        animation: move 8500ms 1500ms infinite ease;
        width: 100px;
        height: 100px;
    
        /* background: cyan; */
        content:url("../img/poisson_red.png");
        opacity: 0;
        transform: rotateY(180deg);
    
        filter:invert(0%);
      }
      
      @keyframes move {
        0% {
            offset-distance: 0%;
            opacity: 0;
            transform: rotateY(180deg);
            filter:invert(0%);
        }
        11% {
            opacity: 0.7;
            transform: rotateY(140deg);
            filter:invert(5%);
        }
        22% {
            opacity: 0.3;
            transform: rotateY(180deg);
            filter:invert(0%);
        }
        33% {
            opacity: 0.7;
            transform: rotateY(210deg);
            filter:invert(5%);
        }
        44% {
            opacity: 0.3;
            transform: rotateY(180deg);
            filter:invert(0%);
        }
        55% {
            opacity: 0.7;
            transform: rotateY(140deg);
            filter:invert(5%);
        }
        66% {
            opacity: 0.3;
            transform: rotateY(180deg);
            filter:invert(0%);
        }
        77% {
            opacity: 0.7;
            transform: rotateY(210deg);
            filter:invert(5%);
        }
        88% {
            opacity: 0.3;
            transform: rotateY(180deg);
            filter:invert(0%);
        }
        100% {
            opacity: 0;
            offset-distance: 100%;
            transform: rotateY(140deg);
            filter:invert(5%);
    
        }
      }
    
    #motion-demo_whaleShark {
    display: none;
    filter: blur(3px);
    /* https://yqnn.github.io/svg-path-editor/ */
    /* offset-path: path("M -65 176 A 1 1 0 0 0 -88 -451"); */
    /* offset-path: path("M -283 488 C 342 153 217 -360 -205 -555"); */
    

    offset-rotate: auto;

    position: fixed;

    /* Modif Path:  */
    top: 10%;
    offset-path: path("M -270 -108 C 100 349 557 46 527 -124");


    z-index: -10;

    animation: moveWhaleShark 30000ms 5s infinite linear;
    width: 700px;
    height: 700px;

    /* background: cyan; */
    content:url("../img/whaleSharkDotted.png");
    opacity: 0;
    transform: rotateZ(98deg);
    }
    

    #motion-demo_shark1 {
        display: none;
        filter: blur(3px);    
        position: fixed;
    
        /* Mobile (effet rotate dans le coin en haut à droite) */
        /* top: 0%;
        right: 0%; */
        top: -10%;
        right: -5%;  
        z-index: -2;
    
        animation: moveShark1test 8000ms 1 linear;
        width: 370px;
        height: 370px;
    
        content:url("../img/shark1_red_rotate.png");
        opacity: 0;
        transform: rotateZ(100deg) rotateX(180deg);
    }



    /*  Tortue, turtle */
    #motion-demo_tortoise {
        display: none;
        filter: blur(5px);
        /* https://yqnn.github.io/svg-path-editor/ */
        offset-path: path("M 1441 636 C 869 523 42 182 -480 -139");
        offset-rotate: auto;
    
        position: fixed;
    
        top: -5%;
        z-index: -2;
    
        animation: moveTortoise 13500ms 2000ms infinite ease-in;
        width: 0px;
        height: 0px;
    
        /* background: cyan; */
        content:url("../img/tortoise_red.png");
        opacity: 0;
        transform: rotateZ(178deg);
    
    }
    @keyframes moveTortoise {
        0% {
            offset-distance: 0%;
            opacity: 0;
            filter: blur(7px);
            width: 50px;
            height: 50px;

        }
        10% {
            opacity: 0.4;
        }
        90% {
            filter: blur(0px);
            opacity: 0.7;
        }
        100% {
            offset-distance: 100%;
            opacity: 0.8;
            filter: blur(0px);
            width: 245px;
            height: 245px;
    
        }
    }



    #motion-demo2 {
        width: 210px;
        height: 210px;    
    }

    body {
        font-size: 95%;
    }


    #motion-demo_rapid {
        offset-path: path("M 1323 383 C 960 461 377 333 -302 -201");
        animation: moveRapid 1850ms 1 cubic-bezier(1,.66,.51,.98);

    }
    #motion-demo_rapid2 {
        offset-path: path("M 1323 383 C 696 580 524 136 -302 -201");
        animation: moveRapid 1850ms 450ms 1 cubic-bezier(1,.66,.51,.98);

    }
    #motion-demo_rapid3 {
        offset-path: path("M 1323 383 C 840 327 722 12 -492 -110");
        animation: moveRapid 1850ms 250ms 1 cubic-bezier(1,.66,.51,.98);

    }

    /* à rename: */
    .testH1 {
        font-size: 3em;
        padding: 5px 0px 1px 28px;

    }
    #NavBarContainer {
        top: 10px;
        font-size: 0.85em;
    }
    .testNavBarContainer {
        margin-bottom: 0em;
        top:7px;
    }

    .swiper-container {
        margin-top: 5px;
    }

    .projetSkillsList {
        gap: 2px;
        font-size: 0.7em;
    }

    .projetFuncList {
        font-size: 0.8em;
        margin-block-start: 0.4em;

        min-width: 503px;
    }


    .projectShapesDiv-top-left {
        /* left: 153px; */
        /* left: -140px; */

        /* left: -71px;
        top: -25px; */

        left: -121px;
        top: -77px;

        filter: blur(1px);
    }


    
@keyframes fadeInBgProject {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.42;
    }
}
    


    #traitHeader {
        /* height: 2px;
        margin-bottom: 0px;
        width: 100%;
        background-color: #E7E8F2;
        opacity: 0.7;
        background-color: #ef3b2d; */

        height: 2px;
        margin-bottom: 0px;
        width: 100%;
        background-color: #E7E8F2;
        opacity: 1;
        background-color: #ef3b2dcf;
    }
    


    #pageContainer {
        background-size:cover;
        background-repeat:no-repeat;
        height: fit-content;
        /* margin: 2% 12%; */
        margin: 0px 12%;
    }


    .gridProjetHeaderContainer {
        gap: 30px;
        /* margin-top: 40px; */
        margin-top: 0px;
        justify-content: center;

        right: 25px;

        width: 75%;
    }


    @keyframes fadeInFormation {
        from {
            left: -500px;
            opacity: 0;
    
        }
        to {
            left: 0px;
            opacity: 1;
        }
    }
    
    @keyframes fadeInHobbys {
        from {
            right: -500px;
            opacity: 0;
    
        }
        to {
            right: 0px;
            opacity: 1;
        }
    }

    .hobbys {
        top: 11px;
        /* right: -12px; */
    }

    #titleCv { 
        margin-block-end: 1em;
    }

    .alertSeekDesktopWrap {
        margin: 6px 0px;
    }

    .accueilKeyboardPngDesktop {

    }

    .testPopPortraitImg {
        width: 185px;
        height: 178px;
        position: relative;
        top: 14px;
    }

    .accueilProjectsDiv {
        margin: 80px auto 120px auto;

        gap: 14%;
        right: 111px;
    }

    .accueilProjectsIcon {
        width: 82px;
    }

    footer.footerAccueil {
        /* position: absolute;
        bottom: 0; */
        /* position: fixed;
        bottom: auto; */
    
            /* bottom: 0;
            position: absolute; */
            margin-top: 40px;
    }
    footer.footerCv {
        /* position: absolute;
        bottom: 0; */
        /* position: fixed;
        bottom: auto; */
    
            /* bottom: 0;
            position: absolute; */
            margin-top: 40px;
    }

    /* .accueilVideoPcDiv {
        width: 24%;
    } */

    .accueilVideoPcDiv1 {
        width: 24%;
    }


    #inspirationContainer {
        transform: scale(0.9);
        position: relative;
        margin-bottom: 0px; 
        color: #e2e8f0;
        padding: 0px 30px;
        border-radius: 6px;
    
        /* background-color: rgb(239 59 45 / 7%); */
        /* background-color: #00ffd40d; */
        background-color: #00ffd408;
    
        padding-bottom: 49px;
        border-bottom-right-radius: 10px;
        opacity: 0;
    
        transition: all 0.3s;
    
        /* border: 1px solid #00ffd64f; */
    }

    .lightBulbWrapperDiv {

        transform: rotate(355deg) scale(0.65);

        bottom: 18px;
    }


    .linkedinBtn {
        padding: 17px 14px 17px 14px;
    }


    .wave {
        display: block;
        width: 0px;
        height: 0px;
        opacity: 0;
        /* background: #ef3b2d; */
    
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateY(-6.2em);
    
        --mask:
            radial-gradient(33.54px at 50% 45.00px,#000 99%,#0000 101%) calc(50% - 30px) 0/60px 100%,
            radial-gradient(33.54px at 50% -30px,#0000 99%,#000 101%) 50% 15px/60px 100% repeat-x;
        -webkit-mask: var(--mask);
                mask: var(--mask);

        /* background: rgb(17,18,63);
        background: -moz-linear-gradient(0deg, rgba(17,18,63,0) 0%, rgba(239,59,45,1) 100%);
        background: -webkit-linear-gradient(0deg, rgba(17,18,63,0) 0%, rgba(239,59,45,1) 100%);
        background: linear-gradient(0deg, rgba(17,18,63,0) 0%, rgba(239,59,45,1) 100%); */

        /* TEST Wave --secondaryColor */
        background: rgb(17,18,63);
        background: -moz-linear-gradient(0deg, rgba(17,18,63,0) 0%, rgba(45,187,239,1) 100%);
        background: -webkit-linear-gradient(0deg, rgba(17,18,63,0) 0%, rgba(45,187,239,1) 100%);
        background: linear-gradient(0deg, rgba(17,18,63,0) 0%, rgba(45,187,239,1) 100%);
        /* background: linear-gradient(0deg, rgba(17,18,63,0) 0%, var(--secondaryColor)); */
    
    
        animation: fadeInWave 1.5s 1.2s forwards ease-out;
    
    }
    @keyframes fadeInWave {
        from {
            opacity: 0;
            height: 0px;
            width: 0;
        }
        to {
            opacity: 1;
            height: 31px;
            width: 368px;
            
        }
    }


    #flashPoint {
        position: absolute;
        line-height: 0;
        /* top: 8%;
        right: 33px; */
        color: rgb(255, 255, 255);
        opacity: 0;
    
        filter: blur(180px);
    
        top: -180px;
        right: 3px;
        font-size: 10em;
    }
    .flashPointAnim {
        animation: blinkingFlash 0.3s 1.8s linear forwards;
    }
    @keyframes blinkingFlash {
        0% {
            opacity: 0;
            filter: blur(180px);
        }
        48% {
            opacity: 1;
            filter: blur(40px);
        }
        52% {
            opacity: 1;
            filter: blur(40px);
        }
        100% {
            opacity: 0;
            filter: blur(180px);
        }
    }
    

    #flashPoint2 {
        position: absolute;
        line-height: 0;
        background-color: rgb(255, 255, 255);
    
        opacity: 0;
    
        filter: blur(150px);
    
        top: -60px;
        right: -10px;
    
        width: 75%;
        height: 75%;
    
        animation: blinkingFlash2 0.4s 3s linear forwards;
    }
    @keyframes blinkingFlash2 {
        0% {
            opacity: 0;
            filter: blur(150px);
        }
        48% {
            opacity: 1;
            filter: blur(10px);
        }
        52% {
            opacity: 1;
            filter: blur(10px);
        }
        100% {
            opacity: 0;
            filter: blur(150px);
        }
    }
    .flashPoint2Anim {
        /* animation: blinkingFlash2 0.4s 4.1s linear forwards; */
    }
    





    #photoBar {
        position: absolute;
        /* line-height: 0; */
        opacity: 1;
        height: 0px;
    
        width: 7px;
        background-color: #ef3b2d;
        /* right: 71px; */
        right: 67px;
        z-index: 500;
        top: -6px;
        /* transform: rotateZ(180deg); */
        border-radius: 5px;
        animation: photoBarGrow 0.4s 1.5s forwards ease, photoBarShrink 0.4s 3.8s forwards ease;
    }
    @keyframes photoBarGrow {
        from {
            height: 0px; 
    
        }
        to {
            height: 66px;
    
        }
    }
    @keyframes photoBarShrink {
        from {
            height: 66px;
    
        }
        to {
            height: 0px;
    
        }
    }

    .selected {
        text-decoration-thickness: 2px;

        /* text-decoration-color: var(--secondaryColorVeryMat); */
        color: #0cedc8;
        text-decoration-color: var(--secondaryColor) !important;

    }

    .downloadCvIcon {
        margin-left: 5px;
        top: 2px;
    }


    .swipeImg {
        width: 60px;
    }
    .swipeSymbol {
        right: 3%;
        font-size: 1em;

        top: 30px;

        animation: fadePulseSwipe 3s 0s normal ease infinite;
    }
    @keyframes fadePulseSwipe {
        0% {
            opacity: 0.15;
            transform: translateX(-50px);
        }
        37% {
            opacity: 0.5;
            transform: translateX(20px);
        }
        100% {
            opacity: 0.15;
            transform: translateX(-50px);
        }
    }



    #flashRectangle {
        position: absolute;
        background-color: rgba(255,255,255,0.1);
        /* width: 51px;
        height: 30px; */
        width: 1px;
        height: 1px;
        opacity: 0;
        margin: 15px auto;
    
        border: 4px solid #ef3b2d;
        border-radius: 3px;
        top: -52px;
        right: 32px;
        z-index: 999;
    
        animation: fadeInFlashRectangleWidth 0.3s 2s forwards ease-in-out, fadeInFlashRectangleHeight 0.3s 2.3s forwards ease-in-out, flashRectangle 0.4s 2.9s ease-in-out forwards, fadeOutHeight 0.3s 3.2s forwards ease-in-out, fadeOutWidth 0.3s 3.6s forwards ease-in-out;
    }
    @keyframes fadeInFlashRectangleWidth {
        0% {
            opacity: 0;
            width: 1px;
        }
        100% {
            opacity: 1;
            width: 85px;
        }
    }
    @keyframes fadeInFlashRectangleHeight {
        0% {
            height: 1px;
            margin: 15px auto;
        }
        100% {
            height: 50px;
            margin: 0px auto;
        }
    }
    @keyframes flashRectangle {
        0% {
            background-color: rgba(255,255,255,0.1);
            border: 4px solid #ef3b2d;
        }
        49% {
            background-color: rgba(255,255,255,1);
            border: 2px solid rgba(255, 205, 201, 1);
        }
        51% {
            background-color: rgba(255,255,255,1);
            border: 2px solid rgba(255, 205, 201, 1);
        }
        100% {
            background-color: rgba(255,255,255,0.1);
            border: 4px solid #ef3b2d;
        }
    }
    @keyframes fadeOutHeight {
        0% {
            height: 50px;
            margin: 0px auto;
        }
        100% {
            height: 1px;
            margin: 15px auto;
        }
    }
    
    @keyframes fadeOutWidth {
        0% {
            opacity: 1;
            width: 85px;
        }
        100% {
            opacity: 0;
            width: 1px;
        }
    }
    
    






}