:root{
    --color-light : white;
    --color-dark:black;
    --mobile-header-background:hsla(0, 0%, 0%, 0.75);

    --tb-spacing-dt: 6.25vw;
    --lr-spacing-dt: 3.33vw;

    --btw-title-text-dt:2.92vw;

    --tb-spacing-mob: 15.38vw;
    --lr-spacing-mob:4.36vw;

    --btw-title-text-mob:5.13vw;

}
@font-face{
    font-family: montserrat;
    src : url(Montserrat-VariableFont_wght.ttf);
}

ul {
    list-style-type: none;
  }
footer{
    background-color: var(--color-dark);
    color:var(--color-light);
}
body{
    font-family: montserrat;
    background-color:var(--color-light);
}
html{
    font-family: 'Montserrat';
    overflow-x:hidden;

}
header{
    width: 100%;
}

/********************/
/*      TEXTS       */
/********************/
.subtitles-text{
    color:var(--color-dark);
    font-size: 3.33vw;
    font-style:normal;
    font-weight: 200;
    line-height: normal;
}
.subtitles-text-white{
    color:var(--color-light);
    font-size: 3.33vw;
    font-style:normal;
    font-weight: 200;
    line-height: normal;
}
.normal-text-30px{
    background-color: white;
    color:var(--color-dark);
    font-size: 2.08vw;
    font-style:normal;
    font-weight: 700;
    line-height: normal;
}
.normal-text-30px-white{
    color:var(--color-light);
    font-size: 2.08vw;
    font-style:normal;
    font-weight: 700;
    line-height: normal;
}
.normal-text-24px{
    color:var(--color-dark);
    font-size: 1.66vw;
    font-style:normal;
    font-weight: 700;
    line-height: normal;
}
.normal-text-24px-white{
    color:var(--color-light);
    font-size: 1.66vw;
    font-style:normal;
    font-weight: 700;
    line-height: normal;
}
/* 48px */
.big-title-blue{
    color: #1D2339;
    font-size: 3.21vw;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}
/* 40px */
.big-normal-text-2{
    color:var(--color-dark);
    font-size: 2.77vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.big-normal-text-2-white{
    color:var(--color-light);
    font-size: 2.77vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/* 32px */
.big-normal-text{
    color:var(--color-dark);
    font-size: 2.22vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.big-normal-text-white{
    color:var(--color-light);
    font-size: 2.22vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/* 20px */
.normal-text{
    color:var(--color-dark);
    font-size:1.39vw;
    font-style:normal;
    font-weight: 400;
    line-height: normal;
}
.normal-text-white{
    color:var(--color-light);
    font-size:1.39vw;
    font-style:normal;
    font-weight: 400;
    line-height: normal;
}



.fw-200{
    font-weight: 200;
}
.fw-400{
    font-weight: 400;
}
.fw-500{
    font-weight: 500;
}
.fw-600{
    font-weight: 600;
}
.fw-700{
    font-weight: 700;
}

.text-align-right{
    text-align: right;
}
.text-align-center{
    text-align: center;
}

.text-toUpper{
    text-transform: uppercase;
}
.text-toLower{
    text-transform:lowercase;
}

/********************/
/*      MARGINS     */
/********************/
.no-margin{
    margin:-3vw;
}
.margin-top{
    margin-top:3vw;
}
.margin-bottom{
    margin-bottom: 3vw;
}
.margin-left{
    margin-left:3vw;
}
.margin-right{
    margin-right:3vw;
}

/********************/
/*     Transform    */
/********************/
.rotate-45{
    transform: rotate(45deg);
}
.rotate-minus45{
    transform: rotate(-45deg);
}
.rotate-90{
    transform: rotate(90deg);
}
.rotate-minus90{
    transform: rotate(-90deg);
}
.rotate-180{
    transform: rotate(180deg);
}
/********************/
/*     Utilities    */
/********************/

.flex{
    display: flex;
}
.noWrap{
    flex-wrap: nowrap;
}
.wrap{
    flex-wrap: wrap;
}
.flex-column{
    display: flex;
    flex-direction: column;
}
.justify-center{
    display: flex;
    justify-content: center;
}
.justify-spc-btw{
    display: flex;
    justify-content: space-between;
}
.justify-spc-around{
    display: flex;
    justify-content: space-around;
}
.justify-end{
    display: flex;
    justify-content: flex-end;
}
.align-center{
    display: flex;
    align-items: center;
}
.align-end{
    display:flex;
    align-items: flex-end;
}
.grid{
    display:grid;
}

/********************/
/*     Colors       */
/********************/

.color-dark{
    color:var(--color-dark);
}
.color-light{
    color: var(--color-light);
}
.bg-dark{
    background-color:var(--color-dark);
}
.bg-light{
    background-color:var(--color-light);
}

/* Navigation */
.navigation-mobile{
    display: none;
}

.navigation{
    display: flex;
    width: 100%;
    color: var(--color-light);
    justify-content: space-between;
    text-align: center;
    flex-wrap: wrap;
    align-items: center;
    margin-top : 1vw;
}

.navbar-first{
    width: 38.41vw;
}

.navigation-logo{
    width: 15.20vw;
    height: 4.37vw;
    margin-left: 3.33vw;
}
.navigation-navbar-first{
    width: 70vw;
    display: flex;
    justify-content: space-around;
}
.navigation-navbar-second{
    display: flex;
    width: 10vw;
}
#soumission-button{
    background-color: var(--color-light);
    color:var(--color-dark);;
    border: 2px solid var(--color-dark);;
    width: 13.26vw;
    height: 3.75vw;
}
#submission-button-active{
    padding-inline: 1.5vw;
}
#soumission-button:hover{
    /* -webkit-box-shadow:inset 2px var(--color-light);
    -moz-box-shadow:inset 2px var(--color-light);
    box-shadow:inset 0px 0px 0px 2px var(--color-light); */
    background-color: var(--color-dark);;
    color:var(--color-light);
}
.texte-nav-item{
   width: max-content;
}
.navbar-second{
    justify-content:center;
}

.texte-nav-item.active {
    border-bottom: 3px solid var(--color-light);
}
.hover-underline:hover {
    border-bottom: 3px solid var(--color-light);
}

/* Language */



    .sl-nav {
    display: inline;
  }
  .sl-nav ul {
    margin:0;
    padding:0;
    list-style: none;
    position: relative;
    display: inline-block;
  }
  .sl-nav li {
    cursor: pointer;
  }
  .sl-nav li ul {
    display: none;
  }

  .sl-nav li:hover ul {
    position: absolute;
    top:2.6vw;
    right:-2vw;
    display: block;
    background: var(--color-light);
    width: 13vw;
    z-index: 1;
    border-radius:1vw;
    box-shadow: 0px 0px 20px var(--color-dark);
  }
  .sl-nav li:hover .triangle {
    position: absolute;
    top: 1.5vw;
    right: -0.9vw;
    z-index:10;
    height: 1.2vw;
    overflow:hidden;
    width: 2.3vw;
    background: transparent;
  }
  .sl-nav li:hover .triangle:after {
    content: '';
    display: block;
    z-index: 20;
    width: 1.5vw;
    transform: rotate(45deg) translateY(0px) translatex(0.6vw);
    height: 1.5vw;
    background: var(--color-light);
    border-radius:2px 0px 0px 0px;
    box-shadow: 0px 0px 2vw var(--color-dark);
  }
  .sl-nav li:hover .top-bubble{
    position:absolute;
    left:-2vw;
    width:12vw;
    height:4.5vw;
    background:transparent;
  }
  .sl-nav li ul li {
    position: relative;
    text-align: left;
    background: transparent;
    padding: 1vw 1vw;
    padding-bottom:0;
    z-index: 2;
    font-size: 1.66vw;
    color: #3c3c3c;
  }
  .sl-nav li ul li:last-of-type {
    padding-bottom: 1.2vw;
  }
  .sl-nav li ul li span {
    padding-left: 0.5vw;
  }
  .sl-nav li ul li span:hover, .sl-nav li ul li span.active {
    color: #146c78;
  }
  .sl-flag {
    display: inline-block;
    box-shadow: 0px 0px 3px var(--color-dark);
    width: 1.5vw;
    height: 1.5vw;
    background: #aaa;
    border-radius: 50%;
    position: relative;
  }
  .flag-fr {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAIAAAAVyRqTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBMjUyMkUxODE3NzkxMUUyODY3Q0FBOTFCQzlGNjlDRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQjc4RjdFMDE3NzkxMUUyODY3Q0FBOTFCQzlGNjlDRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkEyNTIyRTE2MTc3OTExRTI4NjdDQUE5MUJDOUY2OUNGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkEyNTIyRTE3MTc3OTExRTI4NjdDQUE5MUJDOUY2OUNGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+NYcTvAAAADBJREFUeNpiZFCYz4Ab/L+fgEf2q7YTHlkmBpqBUaNHjR41etToUaNHjaad0QABBgAMOgSHJZqdhAAAAABJRU5ErkJggg==');
    background-size: cover;
    background-position: center center;
  }
  .flag-usa {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpERTc5MkI3RjE3OEExMUUyQTcxNDlDNEFCRkNENzc2NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpERTc5MkI4MDE3OEExMUUyQTcxNDlDNEFCRkNENzc2NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkEyMTE0RjIyMTc4QTExRTJBNzE0OUM0QUJGQ0Q3NzY2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRFNzkyQjdFMTc4QTExRTJBNzE0OUM0QUJGQ0Q3NzY2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+60cYSwAAAyhJREFUeNrElN1PU3cYxz/tOQUBD/aNymtbUAq2IOiUWXmZA40Iy2BzcW53y7JlyZLtZuE/8NaY7Gbe7WJbdJnTDOdQCbLKrERUotgCSodQ7AsFpK28yKT7rfsL2gv7JCcn+eV3zpPv5/l+H9X2xp65SqtJGfr1Fg3vNPD02SIhfwRniwP3pdvsOVxPaCHGs7+DOA/VJs8crXXEs3P48OfTfMIcU+SRaqlMzm8SNut2VuefIxvyydZIxFbWyX35iviLNZRiPZJaxdLyCkoiQUyc6cwFTPvC9FRkcbJMy7JaTrmxHIuvxaZm5xW7+Jl3NkKRaRt5OVlMjvuoqa9gwr9AgS4PvTYP78hjdtVVEAw9J+Kdxv7Td+hL8tGTeslGg8Jeexk3/riLs62O+cU441NBDjbZGbg+SlNbPYvRF9zzzHCoycFA/yhvCtRqnZbr5a1YEjGm5S2po1ZXfRHVaCTlWLODq24v1eWFGPVbuXH5Dh3vORm88xhziR5zoZ5rl9y0dx/ggS/EzGSQs5Ua3s39h7CUlbri0mKdUGzmijBXqzBXYH4Z931fsmlf7zBvd+wjIigMDI/TcbyRvt+GOSgUZ62uU3S2h8IdRgrTQK1S2T6PyhpZ+aB9LxcF2hpbCUUF27hy4S+Of/wWfUMeykuNVIin9/xNuj9qYWR8juknIc5szNC1voA/DdSypayAhlor57/vp/NEC7OBRfpveek+0cwvP/7JsfedhEWcLg8+pOtkMxfOuTjc5WSrSc+S6ymSQYtGyk5dsVT9/4zbhZmu3Z5IztggXOwSZjvSuZ+hUR9mEan/KAz+PkJb5z7GngSYdXu46T9Ho3EL6ZSKnZ9Fax0W5aFrDNuB6mROA6El7BYTnns+bPt3srK2gV+QcIjIPRLzrxL3ZkLLfB0c40udRCAd1EfFNioxaSG+Sl2NmchSnCKjwh6HBWlzk/rd1uTyMOTn8MbuctRiieyqLKbKbqXs4gSvQmFephOnRCIRFW+F11yyp/3TtD/eSKjYTM4rjcZh110yUZlDPfnVqcwovkppRhRnDrX/2x+UjKDuJXcuE4r/FWAAjBMttNdoYOEAAAAASUVORK5CYII=');
    background-size: cover;
    background-position: center center;
    }

  .small-arrow{
    position:relative;
    display: inline-block;
    top:0vw;
    left:0.2vw;
    width:1vw;
    height:1vw;
    border-bottom: 0.2vw solid var(--color-light);
    border-left:0.2vw solid var(--color-light);
    transition: transform 0.5s ease;
  }
  .sl-nav li:hover .small-arrow{
    transform: rotate(180deg) translateY(-0.3vw) translateX(0.19vw);
    transform-origin: center;
  }
/* Footer */

.crochet-footer{
    position: absolute;
    width:24vw;
    left: 33.3vw;
}
.upper-crochet{
    border-bottom: 0.8vw solid var(--color-light);;
    border-right: 0.8vw solid var(--color-light);;
    height: 3.6vw;
}
.down-crochet{
    border-left: 0.8vw solid var(--color-light);;
    height: 3.4vw;
}
.footer{
    background-color: var(--color-dark);
    width: 100%;
    height: 23.47vw;
    display: flex;
}
.left-part-footer{
    display: flex;
    margin-top: 3.2vw;
    width: 25vw;
}
.rights-reserved{
    font-size: 1.04vw;
    position: absolute;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.contact-footer{
    margin-top: 5%;
}
.found-footer{
    margin-top: 5%;
}
.follow-footer{
    margin-top: 5%;
}


.end-footer-part{
    display: flex;
    align-items: center;
}
.location-part{
    align-items: start;
}
.right-part-footer-child:nth-child(8){
    width: 25vw;
}
.linkedin-text{
    position:relative;
    top:0.25vw;
}
.facebook-text{
    position:relative;
    top:0.15vw;
}
.logo-footer{
    height: 13.26vw;
    width: 15.06vw;
    margin-left: 3.33vw;
}
.footer-logo-image{
    height: 100%;
    width: 100%;
    margin-bottom: 2.63vw;
}

.right-part-footer{
    display: grid;
    grid-template-columns: 2.5fr 3fr 1.5fr;
    grid-template-rows: repeat(3, 2.5vw);
    grid-column-gap: 1.5vw;
    grid-row-gap: 1vw;
    width: 75vw;
    margin-top: 6.87vw;
    margin-right:1vw;
}

.title-footer-part{
    margin-bottom: 10%;
    text-transform: uppercase;
}
.middle-footer-part{
    display: flex;
    align-items: center;
}
.icone-footer{
    width: 2vw;
    height:2vw;
    margin-right:1vw;
}

/* Button hover style */
.btn-basic{
    background-color: var(--color-light);;
    color: var(--color-dark);
    text-align: center;
}
.btn-basic:hover,
.btn-basic-arrow:hover{
    /* -webkit-box-shadow:inset 2px var(--color-light);;
    -moz-box-shadow:inset 2px var(--color-light);;
    box-shadow:inset 0px 0px 0px 2px var(--color-light);; */
    background-color: var(--color-dark);
    color:var(--color-light);;
}

.btn-basic-arrow:hover .see-more-arrow-right-white {
    display: block;
}
.btn-basic-arrow:hover .see-more-arrow-right-black {
    display: none;
}
.see-more-arrow-right-black {
    display: block;
}
.see-more-arrow-right-white {
    display: none;
}


/* Project java btn see more with arrow */
.btn-voir-plus{
    margin-block: 6vw;
    margin-right: 8vw;
}
.btn-voir-plus-inner{
    display:flex;
    justify-content: center;
    align-items: center;
    width: 16vw;
    height: 3.4vw;
    border: 3px solid var(--color-dark);
}
.btn-voir-plus-inner img{
    height: 2.22vw;
    width: 2.22vw;
    margin-left:1.1vw;
}

/*Erreur 404*/
.Error404-background{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-dark);
}
.Error404-background>p{
    font-size: 2vw;
    color:var(--color-light);
    margin-bottom: var(--btw-title-text-dt);
}

/**************************************/
/**************************************/
/*              MOBILE                */
/**************************************/
/**************************************/

@media screen and (max-width: 768px) and (orientation: portrait){
    body{
        overflow-x: hidden;
        margin:0;
    }
    /********************/
    /*      TEXTS       */
    /********************/
    .subtitles-text,.subtitles-text-white{
        font-size: 7.17vw;
    }
    .normal-text-30px, .normal-text-30px-white{
        font-size: 5.12vw;
    }
    .normal-text-24px, .normal-text-24px-white{
        font-size: 3.59vw;
    }
    .big-title-blue{
        font-size:7.17vw;
    }
    .big-normal-text-2,.big-normal-text-2-white{
        font-size: 5.64vw;
    }
    .big-normal-text, .big-normal-text-white{
        font-size: 5.12vw;
    }
    .normal-text, .normal-text-white{
        font-size : 4.10vw;
    }

    /********************/
    /*      MARGINS     */
    /********************/
    .no-margin{
        margin: 0 -4.35vw;
    }
    .margin-top{
        margin-top:4.35vw;
    }
    .margin-bottom{
        margin-bottom: 4.35vw;
    }
    .margin-left{
        margin-left:4.35vw;
    }
    .margin-right{
        margin-right:4.35vw;
    }

    /********************/
    /*     Navigation   */
    /********************/
    header{
        width: 110vw;
    }
    .navigation{
        display: none;
    }
    .navigation-mobile{
        position:fixed;
        height:15vw;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color:var(--color-light);
        background-color: var(--mobile-header-background);
        backdrop-filter: blur(1vw);
    }

    .mobile-logo{
        margin-left: var(--lr-spacing-mob);
        width: 22.82vw;
        height: 6.41vw;
        z-index:10;
    }

    .mobile-logo img{
        width: 100%;
        height: 100%;
    }
    .mobile-lang{
        position:absolute;
        bottom:20vw;
    }
    #mobile-menuToggle{
        position:relative;
        right:0;
        z-index: 10;
        margin-right:var(--lr-spacing-mob);
        -webkit-user-select:none;
        user-select: none;
        height: 5.41vw;
        width: 9.41vw;
    }

    #mobile-menuToggle input{
        position: absolute;
        width:100%;
        height: 100%;

        background-color: red;
        cursor: pointer;

        opacity: 0;
        z-index: 42;

        -webkit-touch-callout:none;
    }

    .hamburger{
        width: 100%;
        height:100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #mobile-menuToggle span{
        display: block;
        width:100%;
        height:0.8vw;

        background: var(--color-light);
        border-radius: 0.5vw;

        z-index: 41;

        transform-origin: center;

        transition: transform 0.5s ease-in-out,
                    background-color 0.5s ease-in-out;
    }

    .hamburger-line2{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 0.835vw;
        transition: opacity 0.2s ease;
    }

    .hamburger-line2>div:nth-child(1){
        width: 20%;
        background-color: var(--color-light);
        border-radius:0.5vw;
    }
    .hamburger-line2>div:nth-child(2){
        width: 70%;
        background-color: var(--color-light);
        border-radius: 0.5vw;
    }

    .mobile-hamburger-square{
        position:absolute;
        width: 100%;
        height: 110%;
        top: -0.4vw;
        border: 0.5vw solid var(--color-dark);
        border-radius: 0.5vw;
        opacity: 0;
        z-index: 41;
        transition: opacity 0.8s ease-in-out;
    }



    #mobile-menuToggle input:checked ~ .hamburger span:nth-child(1){
        transform: rotate(45deg) translateX(1.6vw) translateY(1.7vw)  scale(-0.5,1);
        background-color: var(--color-dark);
    }

    #mobile-menuToggle input:checked ~ .hamburger>div{
        opacity: 0;
    }

    #mobile-menuToggle input:checked ~ .hamburger :nth-child(3){
        transform: rotate(-45deg) translateX(1.6vw) translateY(-1.7vw) scale(-0.5,1);
        background-color: var(--color-dark);
    }

    #mobile-menuToggle input:checked  ~ .mobile-hamburger-square{
        opacity: 1;
    }

    #mobile-menuToggle input:checked ~ .page-overlay{
        display:block;
        background-color: rgba(0, 0, 0, 0.75);
    }


    #mobile-menu
    {
    position: absolute;
    width: 100.2vw;
    height: 106vh;
    margin: -22.64vw 0 0 -86.5vw;
    padding-left: var(--lr-spacing-mob);
    padding-top: 15.35vw;
    z-index: 40;

    background: var(--color-light);
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

    .mobile-menu-space{
        height:8vw;
    }
    .mobile-menu-logo{
        display: block;
        filter:brightness(0);
        margin: 1.8vw 0vw;
    }
    #mobile-menu li
    {
        font-size: 6.15vw;
        font-style: normal;
        font-weight: 700;
        color:var(--color-dark);
        padding: 2.5vw 0;
    }

    .mobile-submission-button-container{
        display: flex;
        justify-content: center;
    }

    .mobile-submission-button{
        display: flex;
        justify-content: center;
        align-items: center;
        width:30.51vw;
        height:6.92vw;
        background-color: var(--color-dark);
        margin:0vw;
        margin-top:20vw;
    }
    /*
    * And let's slide it in from the left
    */
    #mobile-menuToggle input:checked ~ ul
    {
         transform: none;
    }


    /********************/
    /*     Footer       */
    /********************/
    .footer{
        height: 74.61vw;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 9fr 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        padding:3vw;
        padding-top:1.5vw;

    }
    .crochet-footer{
        position: relative;
        left: 30vw;
        top: -64.6vw;
        width: 30vw;
    }
    .down-crochet {
        height: 2.6vw;
    }
    .left-part-footer{
        width: 100%;
        margin-top:0;
    }
    .footer-logo-image{
        display: none;
    }
    .logo-footer{
        width: 100%;
        height: 100%;
        display:flex;
        justify-content: flex-end;
    }
    .rights-reserved{
        font-size: 2.56vw;
        font-weight: 400;
        white-space: nowrap;
        margin-right: 5vw;
    }
    .right-part-footer{
        grid-area: 1 / 1 / 2 / 3;
        grid-template-columns: repeat(2, 30%) 40%;
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        width: 100%;
        margin:0;
    }
    .right-part-footer img{
        width: 5.12vw;
        height:5.12vw;
        margin-right: 2vw;
    }
    .right-part-footer h2{
        font-size: 4.10vw;
        font-weight: 700;
    }
    .right-part-footer p{
        font-size: 3.59vw;
        font-weight: 400;
    }
    .right-part-footer a{
        font-size: 3.59vw;
        font-weight: 400;
    }

    .right-part-footer-child:nth-child(1){
        height: fit-content;
        grid-area: 1 / 1 / 2 / 3;
        margin-top:4vw;
        margin-left:4.87vw;
    }
    .right-part-footer-child:nth-child(2){
        height: fit-content;
        display: flex;
        justify-content: center;
        width: 100%;
        grid-area: 2 / 1 / 3 / 4;
    }
    .right-part-footer-child:nth-child(3){
        height: fit-content;
        display: flex;
        justify-content: flex-end;
        padding-right:4.87vw;
        margin-top:4vw;
        width: 100%;
        grid-area: 1 / 3 / 2 / 4;
    }
    .right-part-footer-child:nth-child(4){
        height: fit-content;
        height: fit-content;
        position:relative;
        top:8vw;
        margin-top:4vw;
        margin-left:4.87vw;
        grid-area: 1 / 1 / 2 / 3;
    }
    .right-part-footer-child:nth-child(5){
        height: fit-content;
        position:relative;
        top:4vw;
        margin-top:4vw;
        margin-left:4.87vw;
        width: 42vw;
        grid-area: 2 / 1 / 3 / 4;
    }
    .right-part-footer-child:nth-child(6){
        height: fit-content;
        position:relative;
        top:8vw;
        margin-top:4vw;
        display: flex;
        justify-content: flex-end;
        padding-right: 4.97vw;

        grid-area: 1 / 3 / 2 / 4;
    }
    .right-part-footer-child:nth-child(7){
        height: fit-content;
        position: relative;
        top:16vw;
        grid-area: 1 / 1 / 2 / 3;
        margin-top:4vw;
        margin-left:4.87vw;
    }
    .right-part-footer-child:nth-child(8){
        height: fit-content;
        position:relative;
        top:4vw;
        right:-45vw;
        margin-top:4vw;
        margin-left:4.87vw;
        width: 46vw;
        grid-area: 2 / 1 / 3 / 4;
        overflow-x: hidden;
    }
    .right-part-footer-child:nth-child(8) p{
        height: fit-content;
        position:relative;
    }
    .right-part-footer-child:nth-child(9){
        height: fit-content;
        position:relative;
        top:16vw;
        margin-top:4vw;
        display: flex;
        justify-content: flex-end;
        padding-right: 4.97vw;

        grid-area: 1 / 3 / 2 / 4;
    }

    /**********************/
    /**  ERROR PAGE      **/
    /*********************/
    .Error404-background p{
        text-align: center;
        font-size:5vw;
        margin-bottom: 9vw;
    }
    .Error404-background img{
        width: 85vw;
    }
}