/* variable couleur */

* {
    --main-accent-color: linear-gradient(60deg, rgba(0, 167, 225, 1) 0%, rgba(0, 196, 225, 1) 100%);
    --main-accent-color-responsive: #18c8e7;
    --light-btn-color: white;
    --dark-grey-color: #222222;
    --grey-bg-over: #272727a1;
    --main-accent-color-selector: #078db9;
    --bateau-info-btn-color: rgb(255, 255, 255);
    --bateau-info-btn-color-select: rgb(255, 255, 255);
}

::placeholder {
    color: rgb(161, 161, 161);
    opacity: 1;
}

* {
    font-family: 'roboto', sans-serif;
}

.background-svg {
    position: absolute;
    object-fit: cover;
    z-index: -1;
}

.display-none {
    display: none !important;
}

#sendAnim {
    margin: 0 auto;
    padding: 0;
    width: 70%;
    height: 10em;
}


/* 404 page */

.page404 {
    width: 100%;
    height: 100vh;
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: var(--main-accent-color);
    color: white;
}

.page404 a {
    color: white;
    font-size: 2rem;
    font-weight: bolder;
    margin-bottom: 0.5em;
    padding: 0.5em 1em;
    background: orangered;
    border-radius: 10000px;
    animation: rescue 1s ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes rescue {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

.page404 img {
    width: 350px;
    margin: 5em;
    max-width: 80vh;
}


/* FONT SIZE */


/* MOBILE */

.menu-page {
    font-size: 1em;
}

.confidentialite h1 {
    font-size: 2.2em;
}

.confidentialite h2 {
    font-size: 1.5em;
    margin-top: 4em;
}

.confidentialite p {
    font-size: 0.9rem;
    font-weight: 400;
}

* h1 {
    font-size: 3em;
}

* h2 {
    font-size: 1.5em;
}

* p {
    font-size: 1em;
}


/* DESKTOP */

@media screen and (min-width: 768px) {
    .menu-page {
        font-size: 0.8em;
    }
    * h1 {
        font-size: 4em;
    }
    * h2 {
        font-size: 2.7em;
    }
    * p {
        font-size: 1.2em;
    }
}

@media screen and (min-width: 1000px) {
    * h1 {
        font-size: 4.5em;
    }
    * h2 {
        font-size: 2.7em;
    }
    * p {
        font-size: 1.2em;
    }
    * a {
        font-size: 1em;
    }
}

ul {
    margin: 0 0;
    padding: 0 0;
}

a {
    text-decoration: none;
}

body {
    background: #1a1b1c;
    margin: 0 0;
    overflow-x: hidden;
}

@media screen and (min-width:768px) {
    .nav-bar_menu-text_sub a {
        color: white !important;
    }
}


/* COOKIE FORM */

.cookie-container {
    margin-bottom: 4em;
    position: fixed;
    width: 100%;
    z-index: 20;
    bottom: 0;
}

.cookie-content {
    width: min(500px, 80vw);
    background: var(--main-accent-color);
    margin: 0 auto;
    border-radius: 30px;
    padding: 1em 2em;
    font-size: 0.7em;
    text-align: center;
    animation: cookie-pop 0.8s cubic-bezier(0.56, -0.34, 0.57, 1.82);
    color: white !important;
    filter: drop-shadow(0 0 5px rgba(47, 94, 129, 0.459));
}

@keyframes cookie-pop {
    from {
        transform: scale(0.95);
    }
    to {
        transform: scale(1);
    }
}

.cookie-content button {
    background: var(--dark-grey-color);
    border: none;
    border-radius: 1000px;
    padding: 0.3em 1em;
    margin: auto 5px;
    color: white;
    cursor: pointer;
}


/* stop transition during resizing*/

body.stop-transitions * {
    transition: none !important;
}


/* COVER SERVICE BACKGROUND */

.logistique-cover {
    background-image: url('../img/logistique.jpg');
}

.maintenance-cover {
    background-image: url('../img/maintenance.jpg');
}

.modification-cover {
    background-image: url('../img/modification.jpg');
}


/* COMMON */

.common-cover {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    text-align: center;
    font-size: 1em;
    overflow: hidden;
    min-height: 100vh;
    max-height: 115em !important;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.common-cover h1 {
    padding-top: 3em;
    padding-bottom: 1em;
    margin: 0 0;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.common-cover h1 img {
    height: 15rem;
    margin-top: 10px;
}

@media screen and (max-width: 768px) {
    .common-cover h1 {
        font-size: 1.8em;
    }
}

@media screen and (max-width: 1000px) {
    .common-cover h1 {
        padding-top: 0.5em;
    }
}

.common_cover_square-accent {
    margin: 0 auto;
}

.common_cover_square-accent img {
    height: 15rem;
}

.common_bg-white {
    background: white;
}

@media screen and (min-width: 1000px) {
    .common_desktop-none {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .common_desktop-display {
        display: none;
    }
}

.common_bg-pattern {
    background-image: url('../img/bg-map.svg');
    background-position: center;
    background-size: 1500px;
    background-repeat: repeat-y;
}

@media screen and (min-width: 1000px) {
    .common_bg-pattern {
        background-size: 1800px;
    }
    .common-cover h1 img {
        width: 65px;
    }
}

.common_btn-arrow {
    margin-top: 5vh;
    height: 2em;
    cursor: pointer;
    z-index: 3;
}

.common_esprit-nautic_logo {
    padding-top: 10em;
    height: 150px;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .common_esprit-nautic_logo {
        padding-top: 5em;
        height: 130px;
    }
}

.common_rebound {
    margin: 3em 8px;
    padding: 2em 0;
    background: var(--grey-bg-over);
    backdrop-filter: blur(1px);
    border-radius: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.common_rebound h4 {
    font-size: 1.5em;
    margin: 0 auto;
    margin-bottom: 1.5em;
}

.common_rebound a {
    color: white;
}

.common_rebound_btn {
    background: black;
    width: 60%;
    margin: auto;
    padding: 1rem 2.5rem;
    border-radius: 1000px;
    white-space: nowrap;
    color: white;
    font-size: 1rem;
    font-weight: bolder;
}

@media screen and (min-width: 768px) {
    .common_rebound {
        margin: 10em auto;
        width: 35em;
    }
}

.loader {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100vh;
    background: linear-gradient(56deg, rgba(0, 167, 225, 1) 0%, rgba(0, 210, 225, 1) 100%);
    z-index: 100;
    text-align: center;
    transition: 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    opacity: 1;
}

@keyframes loader {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.loader h5 {
    margin: 0 auto;
    margin-bottom: 3em;
    font-size: 3em;
}

.loader video {
    animation: loader 3s;
    width: min(60vw, 60vh, 400px);
    margin: auto auto;
    mix-blend-mode: screen;
}

.loader-out {
    opacity: 0;
    transition: opacity 0.4s ease-out;
    pointer-events: none;
}


/* DECLARE COLORS */

#font-white {
    color: white;
}

#font-black {
    color: black;
}


/* PAGE : NAVBAR */

.nav-bar li {
    list-style: none;
}

@media screen and (max-width: 767px) {
    .nav-bar hr {
        display: none;
    }
    .nav-bar {
        transform: none !important;
    }
}

.nav-bar {
    position: absolute;
    transition: 0.5s;
    z-index: 2;
}

.nav-bar_burger {
    margin: 15px 30px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2;
}

.burger div {
    width: 50px;
    height: 5px;
    background: rgb(255, 255, 255);
    margin-top: 8px;
    border-radius: 10px;
    transition: all 0.5s ease;
}

.burger {
    cursor: pointer;
}

.toggle .line1 {
    background: grey;
    transform: rotate(45deg) translate(8px, 10px);
}

.toggle .line2 {
    background: grey;
    opacity: 0;
}

.toggle .line3 {
    background: grey;
    transform: rotate(-45deg) translate(8px, -10px);
}

.toggle .line1b {
    background: white;
    transform: rotate(45deg) translate(8px, 10px);
}

.toggle .line2b {
    background: white;
    opacity: 0;
}

.toggle .line3b {
    background: white;
    transform: rotate(-45deg) translate(8px, -10px);
}

.nav-bubble {
    position: fixed;
    background: white;
    /* CALC ((depart - dimension bubble / 2) + centering bruger) */
    top: calc((0px - 250vh/ 2) + 37px);
    right: calc((0px - 250vh/ 2) + 55px);
    width: max(250vh, 250vw);
    height: max(250vh, 250vw);
    border-radius: 100%;
    transform: scale(0);
    transition: all 1s cubic-bezier(0.3, 0.11, 0.53, 1.01);
}

.nav-bar_menu-text {
    width: 100vw;
    text-align: center;
    transition: all 0.5s cubic-bezier(1, -1.45, 0.48, 1.6);
    opacity: 0;
}

.nav-name-page {
    font-weight: 700;
    font-size: 1.2em;
}

.nav-bar_menu-text_sub li {
    font-weight: 400;
}

.nav-bar_menu-text a {
    color: #3c3c3c;
}

.nav-bar_menu-text-b a {
    color: white;
}

.nav-bar_language {
    border-radius: 100%;
    margin: 0 auto;
    align-items: center;
    font-weight: normal;
    background: black;
    color: white !important;
    padding: 1em;
}

.nav-bar_logo {
    display: none;
}

.nav-logo-bis {
    height: 60px !important;
}

@keyframes stop-transition {
    from {
        transition: none;
        color: yellow;
    }
    to {
        transition: auto;
        color: yellow;
    }
}

@media screen and (max-width: 767px) {
    .nav-bar_menu-text_sub li {
        margin: 0 auto;
    }
    .nav-bar_menu-text {
        z-index: -1;
        display: flex;
        margin: 0;
        height: 100vh;
        flex-direction: column;
        justify-content: space-evenly;
        transform: translateY(-2%);
        position: fixed;
        pointer-events: none;
    }
    .menu-page {
        margin-top: 6vh;
    }
    .nav-name-page {
        pointer-events: none;
    }
    .menu-page li {
        margin: 3vh;
    }
    #service {
        margin: 0;
    }
    .service-metier {
        display: none;
    }
    .nav-bar_menu-text-b li {
        font-weight: 400;
    }
    .nav-bar_menu-text_sub-b li {
        font-weight: 100;
    }
    .menu-page {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .active {
        transform: scale(1);
        opacity: 1;
        display: block;
    }
    .active_text {
        opacity: 1;
        transition: all 0.5s ease-in-out;
        transition-delay: 0.2s;
        transform: translateY(0);
        z-index: 2;
        pointer-events: all;
    }
    .active_text li {
        pointer-events: visible !important;
    }
}

@media screen and (min-width: 1000px) {
    .nav-bar_logo {
        position: fixed;
        display: block;
        height: 100px;
        margin: 20px 5vw;
        z-index: 1;
    }
}

@media screen and (min-width: 768px) {
    .nav-bar_menu-text_sub li {
        background: var(--main-accent-color);
        padding: 0.5em 1em;
        border-radius: 100px;
        margin-bottom: 0.5em;
    }
    .nav-bar_menu-text_sub {
        display: flex;
        flex-direction: column;
        margin-top: 0.5em;
    }
    .menu-page {
        display: flex;
        width: 700px;
        margin: auto;
        justify-content: space-evenly;
    }
    .nav-bar_burger {
        display: none;
    }
    .active {
        display: none;
    }
    .nav-bubble {
        display: none;
    }
    .nav-bar {
        position: fixed;
        z-index: 10;
    }
    .nav-bar_menu-text a {
        color: white;
    }
    .nav-bar_menu-text-b a {
        color: var(--dark-grey-color, #222222);
        font-weight: 700;
    }
    .nav-name-page {
        margin-top: 2em;
    }
    .nav-bar_menu-text {
        opacity: 1;
        backdrop-filter: blur(0.5px);
        height: 9em;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(23 23 23 / 91%) 100%);
    }
    .nav-bar_language {
        display: none;
    }
    .nav-bar_menu-text-b {
        height: 6em;
        background: rgb(255 255 255 / 87%);
    }
}


/*nav-bar modificateur*/

.grey div {
    background: grey;
}

.nav-bubble--black {
    background: rgb(39, 39, 39);
}


/* FOOTER */

footer {
    overflow: visible;
    text-align: center;
    padding: 50px 50px;
    background: #353535;
    color: white;
    font-size: 0.8em;
    z-index: 50;
}

footer ul {
    list-style: none;
    font-size: 1em;
    font-weight: 400;
}

footer a {
    color: white;
}

footer p {
    font-size: 1.3em;
    font-weight: bolder;
}

.footer_nav {
    display: flex;
    text-align: start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer_nav section {
    margin: 0 2em;
}

.footer_logo {
    height: 70px;
    margin: 0 0;
    padding: 0 0;
    margin-bottom: 20px;
}

.footer_language {
    display: flex;
    text-align: left;
    font-size: 1em;
    align-items: center;
    margin: 2em auto;
}

.footer_right {
    height: auto;
    font-size: 0.6em;
    margin: 0 0;
    padding: 0 0;
}

.footer_language_glob {
    width: 20px;
    margin-right: 1em;
}

footer li {
    margin: 0.2em 0;
}

@media screen and (max-width:768px) {
    .footer_nav section {
        margin: 0 0;
    }
}

@media screen and (min-width: 1000px) {
    footer {
        width: 950px;
        margin: auto;
        padding: 50px calc((100% - 950px)/2);
    }
}

.footer_language img {
    width: 2.5em;
    margin-left: 1em;
}


/* PAGE : INDEX */

.out-container_nav-index {
    display: flex;
    justify-content: center;
}

.nos-services_cover_nav-services_img {
    background: white;
    border-radius: 33.5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.nos-services_cover_nav-services_img p {
    font-size: 2rem;
    margin-right: 2em;
    color: rgb(61, 61, 61);
}

.container_nav-index {
    display: flex;
    flex-direction: column;
    margin: 0 1em;
    height: 18em;
    text-align: center;
    justify-content: space-between;
}

.container_nav-index_plus {
    border-radius: 33.5px;
}

.container_nav-index_plus img {
    height: 8em;
    border-radius: 33.5px;
    padding: 1.5em;
}

@media screen and (max-width:1000px) {
    .container_nav-index {
        margin: auto;
        margin-top: 6em;
        align-items: center;
    }
    .out-container_nav-index {
        flex-direction: column;
        align-items: center;
    }
    .nos-services_cover_nav-services_img p {
        font-size: 2rem;
        margin-right: 1em;
        color: rgb(61, 61, 61);
    }
    .container_nav-index_plus img {
        padding: 1.5em 1em;
    }
}

.index-ster {
    overflow: hidden;
    background: var(--main-accent-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 43em;
}

.index-ster section {
    z-index: 2;
}

#index-ster_cover {
    position: absolute;
    width: 100%;
    height: 40em;
    object-fit: cover;
}

.index-ster a {
    font-size: 2em;
    color: white;
    font-weight: bolder;
    width: 50%;
}

.index-ster p {
    font-size: 2em;
    margin: 1em 1em;
    font-weight: bolder;
}

.index-ster img {
    width: 100%;
    margin: auto;
    height: 27em;
}

.index-ster_text {
    height: 40em;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

@media screen and (min-width:1000px) {
    .index-ster {
        flex-direction: row;
    }
    .index-ster img {
        width: 50vw;
        height: 35em;
    }
    .index-ster a {
        margin-top: 3em;
        font-size: 4em;
    }
    .index-ster p {
        font-size: 4em;
    }
}

.nos-services_cover {
    width: 100%;
    background-position: center;
    background-size: cover;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background: rgb(0 0 0 / 14%);
    backdrop-filter: blur(3px);
}

@media screen and (max-width:768px) {
    .nos-services_cover {
        min-height: 100vh !important;
    }
}

.nos-services_cover_nav-services {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 700;
    margin: 5em auto;
}

.nos-services_cover_nav-services_BTN-1 {
    background: var(--main-accent-color, #00A7E1);
    color: white;
    width: 12em;
    white-space: nowrap;
    margin-bottom: 2em;
    padding: 1.5em 2em;
    border-radius: 1000px;
}

.nos-services_cover_nav-services_BTN-2 {
    background: var(--light-btn-color, white);
    color: black;
    width: 12em;
    white-space: nowrap;
    padding: 1.5em 2em;
    border-radius: 1000px;
}

.nos-services_cover_nav-services_BTN-contact {
    background: var(--light-btn-color, white);
    white-space: nowrap;
    margin: 4em auto;
    padding: 1rem 3em;
    border-radius: 1000px;
    color: black;
    font-size: 0.8em;
    font-weight: bolder;
    margin-bottom: 0;
}

.nos-service_map {
    min-height: 733px;
    text-align: center;
    font-weight: bolder;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    overflow-y: hidden;
    background-image: url('../img/map.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.nos-service_map_text-la-rochelle {
    padding: 1em;
    position: relative;
}

.nos-service_map_text-la-rochelle p1 {
    font-size: 5em;
}

.nos-service_map_btn-atelier {
    background: var(--main-accent-color, #00A7E1);
    color: white;
    padding: 1.5em 2em;
    white-space: nowrap;
    font-weight: bolder;
    border-radius: 100px;
    margin-top: 2em;
}

.nos-service_map_icon-anim {
    width: 100px;
    animation: dotblue 1.2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes dotblue {
    to {
        transform: translateY(-10%);
    }
}

.nos-service_map_adresse {
    font-weight: 400;
    margin: 3em auto;
}

.nos-service_map_map {
    position: absolute;
    width: 100%;
    height: calc(40em + 500px);
    z-index: -2;
}

@media screen and (min-height: 100em) {
    .nos-service_map_map {
        height: 100vh;
        top: 90em;
    }
    .nos-service_map_text-la-rochelle {
        margin-bottom: 50vh;
    }
}

@media screen and (min-width: 768px) {
    .nos-services_cover_nav-services_BTN-1 {
        padding: 1.5em 6em;
    }
    .nos-services_cover_nav-services_BTN-2 {
        padding: 1.5em 6em;
    }
    .nos-service_map_text-la-rochelle {
        padding: 4em;
    }
    .nos-service_map_text-la-rochelle p1 {
        font-size: 5em;
    }
}


/* PAGE : ATELIER */

.vague-bleue {
    background: white;
    flex-direction: column;
    padding: 1em;
    display: flex;
    margin: 5em auto;
    height: 4.5em;
    align-items: center;
    width: 15em;
    border-radius: 30px;
    color: var(--dark-grey-color);
    transition: 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.vague-bleue:hover {
    transform: scale(1.05);
}

.vague-bleue a {
    padding: 0.5em 1em;
    background: var(--dark-grey-color);
    border-radius: 300px;
    color: white;
    pointer-events: none;
    opacity: 0;
    transition: 1s ease-in-out;
}

.vague-bleue a:hover {
    transform: scale(1.1);
    transition: 0.3s ease-in-out;
}

.vague-bleue p {
    width: 17em;
    text-align: justify;
    pointer-events: none;
    opacity: 0;
    font-size: 1rem;
    transition: 0.3s ease-in-out;
}

.vague-bleue img {
    width: 9em;
    margin-bottom: 2em;
}

.vague-bleue-active {
    height: 25em;
    width: 20em;
}

.vague-bleue-active p {
    opacity: 1;
    margin: 3em auto;
}

.vague-bleue-active a {
    opacity: 1;
    pointer-events: all;
}

.logo-atelier {
    margin-top: 5em;
    display: flex;
    justify-content: center;
}

.logo-atelier img {
    margin: auto 2em;
    width: 10em;
    transition: 0.3s ease-in-out;
}

.atelier_cover {
    background-image: url('../img/atelier.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 100vh;
    max-height: 115em !important;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
}

.atelier_pres {
    text-align: center;
    padding: 25px 25px;
    margin: 6em auto;
    background: var(--grey-bg-over);
    backdrop-filter: blur(1px);
    border-radius: 30px;
}

.atelier_pres_logo {
    height: 100px;
    margin: 5vh auto;
}

.atelier_cover h1 {
    margin: 3rem auto;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.atelier_cover_text-bottom {
    width: 20rem;
    vertical-align: bottom;
    margin: 1.5em auto;
    font-weight: 400;
    font-size: 1.5rem;
}

.atelier_cover_1990 {
    margin: 1em auto;
    font-weight: 700;
    font-size: 3em;
    letter-spacing: 0.5rem;
}

.speed {
    transform: translateY(-100vh);
    opacity: 0;
}

.atelier_pres_photo-team {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.atelier_pres_text {
    margin: 6em 50px;
    font-size: 1rem;
    text-align: justify;
    font-weight: 400;
}

.atelier_pres_BTN {
    background: black;
    padding: 1.5rem 2em;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: bolder;
    border-radius: 100px;
    color: white;
}

@media screen and (max-width: 768px) {
    .atelier_cover h1 {
        font-size: 3em;
    }
    .atelier_pres_text {
        margin: 5em 0;
    }
    .atelier_cover_1990 {
        font-size: 3rem;
    }
    .atelier_cover_text-bottom {
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 1000px) {
    .atelier_pres {
        width: 950px;
        margin-bottom: 6em;
        padding: 100px 0;
    }
    .atelier {
        background-size: 200%;
    }
    .atelier_pres_text {
        margin: 6em auto;
        width: 70%;
    }
    .atelier_cover h1 {
        margin-top: 2em;
    }
}

.social-network {
    display: flex;
    text-align: center;
    justify-content: center;
}

.social-network img {
    width: 50px;
    margin: 1em;
    transition: 0.3s ease-in-out;
}

.social-network img:hover {
    transform: scale(1.1);
}


/* PAGE : REALISATION */

.realisation {
    width: 100%;
    text-align: center;
    font-size: 1em;
}

@media screen and (min-width: 1000px) {
    .realisation {
        width: 950px;
        margin: auto auto;
        padding: 100px 0;
    }
}

.realisation h1 {
    margin: 1vh auto;
    margin-top: 2vh;
    font-size: 4rem;
}

.realisation_grid {
    display: grid;
    grid-template-columns: 100%;
    margin: 5vh auto;
    text-align: start;
}

@media screen and (min-width: 1000px) {
    .realisation_grid {
        display: grid;
        grid-template-columns: 50% 50%;
        margin: 5vh auto;
    }
}

.realisation_grid_block {
    margin: 0 25px;
    height: 65vw;
    font-size: 1em;
    font-weight: bolder;
}

@media screen and (min-width: 1000px) {
    .realisation_grid_block {
        height: 450px;
    }
}

.realisation_grid_block_img {
    width: 100%;
    height: 85%;
    object-fit: cover;
}

.realisation_grid_block_txt {
    margin: 1vh 0;
}

.realisation-detail {
    width: 100vw;
    text-align: center;
}

@media screen and (min-width: 1000px) {
    .realisation-detail {
        width: 950px;
        margin: auto auto;
    }
}

.realisation-detail_img {
    width: 100%;
    height: 70vw;
    object-fit: cover;
}

@media screen and (min-width: 1000px) {
    .realisation-detail_img {
        height: 50vh;
    }
}

.realisation-detail_text {
    margin: 5vh 5vw;
    text-align: left;
    font-size: 2em;
    font-weight: bolder;
}

.realisation-detail p {
    font-size: 0.5em;
    font-weight: 100;
    margin-top: 3vh;
    font-weight: 400;
}

.realisation-detail_grid {
    margin: 0 5vw;
    margin-bottom: 10vh;
    display: grid;
    grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.realisation-detail_grid img {
    background: grey;
    width: 100%;
    height: 30vw;
    object-fit: cover;
}

@media screen and (min-width: 1000px) {
    .realisation-detail_grid img {
        height: 350px;
    }
}


/* PAGE - CHANTIER NAVAL */

.chantier-naval_cover {
    background-image: url('../img/chantier.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 40em;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
}

.chantier-naval_cover h1 {
    color: white;
}

.top-chantier-naval {
    text-align: center;
}

.chantier-naval_grid {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    min-height: 60em;
}

.chantier-naval_grid p {
    color: grey;
    font-size: 2.5em;
    font-weight: 700;
}

.chantier-naval_grid img {
    width: 60vw;
}

.chantier-naval_grid section {
    margin: 5em auto;
}

@media screen and (min-width:1000px) {
    .top-chantier-naval h1 {
        margin-top: 0;
        padding-top: 3em;
    }
    .chantier-naval_grid {
        width: 950px;
        flex-direction: row;
        margin: auto;
    }
    .chantier-naval_grid img {
        width: 100%;
    }
}


/* PAGE : BATEAUX MODEL */

.bateau-cover {
    width: 100%;
    height: 100vh;
    max-height: 115em;
    text-align: center;
}

.bateau-cover h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140%;
    height: 100vh;
    position: absolute;
    color: white;
    top: -115%;
    left: 0;
}

.bateau-cover img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.bateau_info {
    flex-direction: column;
}

.boat-table {
    display: flex;
    flex-wrap: wrap;
    margin: 5em 15px;
    align-items: center;
    font-size: 1em;
    /* border: 2px solid rgb(190, 190, 190); */
    text-align: start;
}

.boat-table div {
    border-bottom: 3px solid black;
    display: flex;
    align-items: center;
    padding-left: 1em;
    margin: auto;
    width: calc(50% - 2px - 1em);
    height: 3em;
    /* border: 1px solid rgb(190, 190, 190); */
}

.bateau-color-choice {
    display: flex;
    margin: 5em auto;
    justify-content: center;
    height: 100px;
    align-items: center;
}

.bateau-color-choice div {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    position: relative;
    transition: 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bolder;
}

.bateau-color-choice div:hover {
    padding: 0.5em;
}

.bateau-color-choice div p {
    opacity: 0;
    transition: 1s ease-in-out;
}

.bateau-color-choice div:hover p {
    opacity: 1;
    transition: 0.3s ease-in-out;
}

.chantier-naval-model {
    text-align: center;
    padding: 6em 0;
}

@media screen and (min-width: 1000px) {
    .chantier-naval-model {
        width: 950px;
        margin: auto auto;
    }
    .boat-table {
        width: 50%;
    }
}

.chantier-naval-model h2 {
    font-size: 5rem;
    font-weight: bolder;
    margin: 0 auto;
    padding: 1em 0;
}

.chantier-naval-model h3 {
    margin: 3em 25px;
    font-size: 1.1rem;
    font-weight: bolder;
    text-align: start;
    margin-bottom: 0;
}

.chantier-naval-model p {
    margin: 2em 25px;
    font-size: 1em;
    text-align: justify;
}

.chantier-naval-model_img {
    width: 100vw;
    height: 60vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.chantier-naval-model_video {
    height: 50vh;
    width: 100%;
    overflow: hidden;
    object-fit: cover;
}

.chantier-naval-model_plan {
    height: 30em;
    max-width: 80vw;
    max-height: 650px;
}

.chantier-naval-model_grid {
    margin: 0 25px;
}

.chantier-naval-model_grid img {
    background: rgb(226, 226, 226);
    object-fit: cover;
}

.chantier-naval-model_grid_big img {
    width: 100%;
    margin-bottom: 15px;
    object-fit: cover;
}

.chantier-naval-model_grid_small {
    margin-bottom: 3em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}

.chantier-naval-model_grid_small img {
    width: 100%;
    height: 13em;
    object-fit: cover;
}

.chantier-naval-model_grid_small a img {
    transition: 0.3s ease-in-out;
}

.chantier-naval-model_grid_small a img:hover {
    transform: scale(1.008);
    filter: grayscale(1);
}

.chantier-naval-model_contact_section {
    display: flex;
}

.chantier-naval-model_contact_section_btn-contact {
    background: black;
    white-space: nowrap;
    margin: 10vh auto;
    padding: 1.5em 2em;
    border-radius: 1000px;
    color: white;
    font-size: 1em;
}

@media screen and (min-width: 1000px) {
    .chantier-naval-model_grid_small {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .chantier-naval-model_grid_small img {
        height: 18em;
    }
    .chantier-naval-model_video {
        height: 65vh;
    }
    .bateau_info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
}


/* PAGE : LANGUAGE */

.language .nav-bar_burger {
    display: block !important;
}

.language {
    width: 100%;
    height: 100vh;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--dark-grey-color);
    z-index: 10;
}

.language img {
    width: 10em;
    opacity: 0.2;
    margin: auto;
    margin-top: calc(50vh - 20em);
}

.language a {
    font-size: 1.2em;
}

.language section {
    margin: 5em auto;
}


/* PAGE : CONTACT */

.contact_info_btn-contact a {
    margin: 1em !important;
}

.contact {
    width: 100%;
    text-align: center;
}

.contact_info_blue-accent h1 {
    margin: 0 auto;
    font-weight: 700;
}

.contact_info_blue-accent {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.contact_info_blue-accent img {
    margin: 2.5vh auto;
}

.contact_info_hours {
    margin: 5em auto;
    display: flex;
    justify-content: space-between;
    max-width: 15em;
}

.contact_info_hours_days {
    width: 40vw;
    text-align: start;
}

.contact_info_hours_hours {
    width: 40vw;
    text-align: end;
}

.contact_info_btn-contact {
    display: flex;
    flex-direction: column;
    margin: 5em 25px;
    margin-bottom: 1em;
    align-items: center;
    justify-content: center;
}

.contact_info_btn-contact div {
    border: 2px solid white;
    border-radius: 100px;
    display: flex;
    align-items: center;
    margin: 1em auto;
}

.contact_info_btn-contact_map {
    height: 100%;
    width: 25%;
    margin-right: auto;
}

.contact_info_btn-contact_tel {
    height: 2.8em;
    width: 16em;
    color: white;
    padding: 0 1em;
    margin: 0 1em;
}

.contact_info_btn-contact_tel img {
    height: 70%;
    margin: auto auto;
    margin-right: 1em;
}

.contact_info_btn-contact_tel p {
    margin: auto auto;
    color: white;
}

.contact_info_btn-contact_map img {
    height: 70%;
    margin: auto auto;
}

.contact_formulaire_title {
    width: 100%;
    margin: auto auto;
}

.contact_formulaire_title p {
    font-weight: bolder;
    text-align: start;
    margin: auto 25px;
    margin-top: 2em;
}

.contact_formulaire_details {
    width: 100%;
    margin: auto auto;
}

.contact_formulaire_details p {
    text-align: center;
    margin: 3em 25px;
}

.contact_formulaire_form {
    display: flex;
    flex-direction: column;
}

.contact_formulaire_form input {
    background: black;
    border: none;
    border-radius: 2em;
    margin: 2em 0;
    padding: 1.5em 2em;
    color: white;
    font-size: 1em;
    outline: none;
}

input[type="file"] {
    display: none;
}

label {
    cursor: pointer;
}

#label-file {
    color: white;
    padding: 0.1em 1.5em;
    background: grey;
    border-radius: 100px;
    margin: 2em auto;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 4em;
}

#label-file img {
    width: 2em;
    margin-left: 0.5em;
}

input[type="checkbox"] {
    display: none;
}

.form_language label {
    cursor: pointer;
}

.contact_formulaire_form_option input {
    margin: 0.5em 0.5em;
}

.contact_formulaire_form_option label {
    background: rgb(77, 77, 77);
    padding: 1em 1.5em;
    border-radius: 1000px;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.8em;
}

.option-info label {
    background: var(--option-info-btn-color);
}

.contact_formulaire_form_option section {
    padding: 1em 0 !important;
    border-radius: 1000px !important;
    margin: 0.5em 0.5em !important;
}

.contact_formulaire_form textarea {
    resize: vertical;
    background: black;
    border: none;
    border-radius: 2em;
    margin-bottom: 2em;
    padding: 2em 2em;
    color: white;
    font-size: 1em;
    outline: none;
    min-height: 10em;
}

.contact_formulaire_form section {
    margin: 3em 25px;
    margin-top: 0;
}

.contact_formulaire_form_info {
    display: flex;
    flex-direction: column;
}

.contact_formulaire_form button {
    color: white;
    margin: 3em auto;
    font-size: 1em;
    padding: 1em 1.5em;
    background: var(--main-accent-color);
    border: none;
    border-radius: 1000px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    padding-left: 2em;
    height: 4em;
}

.contact_formulaire_form button:checked {
    background: black;
}

.contact_formulaire_form button img {
    width: 2em;
    margin-left: 0.5em;
}

.contact_formulaire_form_option {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.contact_formulaire {
    background: var(--grey-bg-over);
    backdrop-filter: blur(1px);
    border-radius: 30px;
    padding: 2em 8px;
    margin: 0 8px;
}

.contact_formulaire_details p {
    margin: 0 auto;
    margin-bottom: 3em;
}

.option-info-bateaux {
    justify-content: space-around;
}

.option-bateaux {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.option-bateaux img {
    width: 10em;
    max-width: 50vw;
    margin-bottom: 2em;
}

iframe {
    width: calc(100% - 50px);
    margin: 2em 25px;
    border: 0;
    height: 30em;
}

.contact_formulaire_form_info textarea {
    height: 20em;
}

@media screen and (min-width:768px) {
    .contact_formulaire {
        padding: 2em 3em;
    }
    .contact_formulaire_form_info textarea {
        height: 10em;
    }
}

@media screen and (min-width: 1000px) {
    .contact_info_btn-contact {
        flex-direction: row;
    }
    iframe {
        height: 45em;
    }
    .contact {
        width: 950px;
        margin: auto auto;
        padding: 0 0;
    }
    .contact_info_blue-accent {
        padding-top: 10em;
    }
    .contact_info {
        width: 70%;
        margin: auto;
        margin-bottom: 5em;
    }
    .contact_info p1 {
        display: block;
        font-weight: bolder;
        margin-top: 2em;
    }
    .contact_formulaire {
        width: 90%;
        margin: auto;
    }
    .contact {
        display: flex;
        flex-direction: column;
    }
    .contact_formulaire_title p {
        text-align: center;
    }
    .contact_formulaire_details p {
        width: 50%;
        text-align: center;
    }
}

.mail-notif_container {
    width: 100%;
    height: 100vh;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.918);
    cursor: pointer;
    text-align: center;
}

.mail-notif_container div {
    padding: 2em 4em;
    background: var(--main-accent-color-responsive);
    border-radius: 30px;
    margin: 2em;
}

.mail-notif_container img {
    width: 70%;
}

.mail-hide {
    display: none;
}


/* PAGE : CONFIDENTIALITE */

.confidentialite {
    width: 100vw;
    min-height: 100vh;
}


/* PAGE : MAINTENANCE */

.maintenance {
    width: 100%;
    text-align: center;
    font-size: 1em;
}

.maintenance-top {
    margin: 4em auto;
}

@media screen and (min-width: 1000px) {
    .maintenance {
        width: 950px;
        margin: auto auto;
        padding: 100px 0;
    }
}

.maintenance h1 {
    font-size: 3em;
}

.maintenance h5 {
    font-size: 2em;
    margin: 1em auto;
}

.maintenance p {
    margin: 2em auto;
}

.maintenance_boat-img {
    width: 50%;
}

.maintenance_top-boat-img {
    width: 45%;
}

@media screen and (min-width: 1000px) {
    .maintenance_boat-img {
        width: 30%;
        margin: 4em auto;
    }
    .maintenance_top-boat-img {
        width: 25%;
        margin: 4em auto;
    }
}

.maintenance hr {
    width: 35%;
    height: 5px;
    background: var(--main-accent-color, #00A7E1);
    border: none;
    border-radius: 100px;
}

.maintenance_text_entretien p {
    font-size: 1.8rem;
    margin: 2vh auto;
}

.maintenance_modification {
    margin: 8px;
    padding: 5vh 0;
    background: var(--grey-bg-over);
    backdrop-filter: blur(1px);
    border-radius: 30px;
    text-align: center;
}

.maintenance_modification h2 {
    margin: 0 2em;
    font-size: 3em;
}

.maintenance_modification h3 {
    width: 45%;
    font-size: 2rem;
    margin: 3em auto;
}

.maintenance_modification p {
    width: 70%;
    margin: auto auto;
    font-size: 1rem;
    font-weight: 100;
}

.maintenance_modification_service div {
    width: 80%;
    margin: auto auto;
}

.maintenance_modification_service p {
    margin: 1vh auto;
    font-size: 1.2em;
    margin-top: 6vh;
    font-weight: 400;
}

#maintenance_modification_service_btn-more {
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background: white;
    cursor: pointer;
}

.maintenance_surveillance-btn {
    background: white;
    margin: 10em auto;
    padding: 1.5rem 2rem;
    text-align: center;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: bolder;
    border-radius: 100px;
    color: rgb(99, 99, 99);
}

.maintenance_text-entretien {
    font-size: 2.5rem;
}

@media screen and (max-width: 768px) {
    .maintenance_modification h2 {
        font-size: 1.5em;
        margin-bottom: 2em;
    }
}


/* PAGE : LOGISTIQUE */

.logistique {
    width: 100%;
    text-align: center;
    font-size: 1em;
    padding: 6em 0;
}

@media screen and (max-width: 768px) {
    .logistique {
        padding: 6em 0;
    }
}

@media screen and (min-width: 1000px) {
    .logistique {
        width: 950px;
        margin: auto auto;
        padding: 5em 0;
    }
}

.logistique h1 {
    font-size: 4em;
}

.logistique h2 {
    text-align: center;
    font-size: 2.2em;
    width: 80%;
    margin: auto;
}

.logistique_icon {
    width: 4em;
}

.logistique_icon-2 {
    width: 5em;
    margin: 4em auto;
}

.logistique_text {
    width: 80%;
    margin: 5vh auto;
    text-align: center;
    font-size: 1em;
}

.logistique_text_2 {
    width: 80%;
    margin: 5vh auto;
    text-align: center;
    font-size: 1em;
}

.logistique a {
    color: white;
}

.logistique_btn-contact {
    margin: 8vh auto;
    width: 10em;
    background: rgb(61, 61, 61);
    font-size: 1rem;
    font-weight: bolder;
    white-space: nowrap;
    border-radius: 10000px;
    padding: 1.5rem 1em;
}


/* MODIFICATION */

.list-service {
    margin: 2em 8px;
    padding: 3em 0.5em;
    background: var(--grey-bg-over);
    backdrop-filter: blur(1px);
    border-radius: 30px;
    text-align: center;
}

.list-service_btn {
    margin: 5em auto;
    display: flex;
    flex-direction: column;
}

.list-service_btn section {
    margin: 10px auto;
    display: flex;
    width: 70%;
    flex-direction: column;
    justify-content: space-between;
    background: #3c3c3c;
    border-radius: 10px;
    padding: 20px;
}

.list-service_btn section div {
    margin: 0 auto;
    overflow: hidden;
}

.list-service h2 {
    margin: 0 2em;
    margin-bottom: 1.5em;
}

.list-service p {
    margin: 2em auto;
    max-width: 30em;
    font-weight: 400;
    width: 80%;
    text-align: justify;
}

.list-service_btn h3 {
    margin: 0 auto;
    margin-bottom: 1em;
    font-size: 1.2em;
    font-weight: 700;
}

.list-service_btn_more {
    display: flex;
    width: 45px !important;
    height: 45px;
    border-radius: 100%;
    background: white;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.list-service_btn_more img {
    width: 55%;
}

.list-service_surveillance-btn {
    background: var(--main-accent-color);
    margin: auto auto;
    margin-top: 3.5em;
    padding: 1rem 1.5rem;
    width: 15em;
    height: 2em;
    display: flex;
    align-items: center;
    font-size: 1.2em;
    font-weight: bolder;
    border-radius: 2em;
    color: white;
    transition: 0.6s cubic-bezier(0.4, -0.01, 0.6, 1.11);
    cursor: pointer;
    justify-content: flex-start;
    flex-direction: column;
    overflow: hidden;
}

.list-service_surveillance-btn img {
    width: 100%;
    border-radius: 20px;
}

@media screen and (max-width:768px) {
    .list-service_surveillance-btn {
        height: 3em;
        width: 80%;
    }
}

.list-service_surveillance-btn p {
    opacity: 0;
    transition: 0.2s ease-in-out;
    width: 90%;
    font-size: 1rem;
    text-align: justify;
}

.list-service_surveillance-btn h4 {
    margin-top: 0.35em;
}

.list-service_surveillance-btn-active p {
    opacity: 1;
    transition: 2s;
}

.list-service_surveillance-btn-active {
    width: 70%;
    height: 30em;
}

@media screen and (min-width:768px) {
    .list-service_btn section {
        width: calc(50% - 60px);
    }
    .list-service_btn {
        width: 600px;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media screen and (min-width:1000px) {
    .list-service {
        width: 950px;
        margin: 3em auto;
        margin-bottom: 50px;
    }
}

.picture {
    background: white;
    width: 100px !important;
    /* height: 100px; */
    transition: 0.3s ease-in-out;
    opacity: 0;
    text-align: center;
    flex-direction: column;
    display: flex;
    color: black;
    font-weight: 400;
    border-radius: 10px;
    cursor: pointer;
    margin: auto;
}

.picture_img-container {
    width: 100%;
    height: 55%;
    display: flex;
    flex-wrap: wrap;
    margin: auto auto;
    justify-content: center;
}

.picture-container {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    justify-content: center;
    align-items: center;
}

.picture p {
    font-weight: 400;
    font-size: 1em;
    display: none;
    text-align: justify;
    width: 80%;
}

.picture-active p {
    display: block;
}

.picture-active::after {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.623);
}

.picture-active {
    position: fixed;
    width: 100% !important;
    /* height: 100% !important;
    max-height: 90vh; */
    opacity: 1;
    z-index: 3;
    pointer-events: visible;
}

.picture_img-container img {
    width: calc(50% - 4px);
    height: 100% !important;
    object-fit: cover;
    padding: 2px;
}

.picture img {
    padding: 2px;
    height: 55%;
    object-fit: cover;
}

@media screen and (max-width:768px) {
    .picture_img-container img {
        margin: 5px auto;
        width: calc(100% - 10px);
        height: 55% !important;
        object-fit: cover;
    }
    .picture-active {
        width: 90vw !important;
        height: auto;
    }
}

.confidentialite {
    padding: 10em 0;
    margin: auto;
    width: 70%;
    text-align: start;
}

.confidentialite p {
    text-align: justify;
}

@media screen and (min-width:1000px) {
    .confidentialite {
        width: 700px;
        text-align: justify;
    }
}


/* CSS language */

.language {
    display: none;
    z-index: 100;
}

.language-btn {
    cursor: pointer;
}

button.language-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1em;
}

@media screen and (min-width:768px) {
    button.language-btn {
        font-size: 1.2em;
    }
}


/* Slideshow container */

.slideshow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: auto;
}


/* Hide the images by default */

.mySlides {
    display: none;
}

.mySlides img {
    width: 100%;
    height: 100vh;
    min-height: 50em;
    object-fit: cover;
}

.main-cover_text {
    z-index: 4;
    margin: 0 4em;
}

.main-cover_text p {
    color: white;
    text-align: start;
}

.main-cover_text_title {
    font-size: 4em;
    font-weight: bolder;
}

.main-cover_text_content {
    font-size: 1em;
    width: 25em;
    text-align: justify !important;
    font-style: italic;
}

.main-cover_text_sign {
    font-size: 1em;
}

@media screen and (max-width:768px) {
    .main-cover_text p {
        color: white;
        text-align: center;
    }
    .main-cover_text_content {
        width: auto;
    }
}


/* Next & previous buttons */

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}


/* Position the "next button" to the right */

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


/* The dots/bullets/indicators */

.dot_container {
    position: absolute;
    top: 97vh;
    left: calc(50% - 50px);
    z-index: 2;
}

.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: rgb(221, 221, 221);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #414141;
}


/* Fading animation */

.fade {
    animation-name: fade;
    animation-duration: 15s;
}

@keyframes fade {
    0% {
        opacity: 0
    }
    15% {
        opacity: 1
    }
    85% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.main-cover {
    width: 100%;
    height: 100vh;
    min-height: 50em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-cover_logo {
    width: 200px;
    z-index: 2;
}

.main-cover_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: 50em;
    background: black;
    opacity: 0.3;
}

.main-cover_pres-text {
    display: flex;
    margin-bottom: 4em;
}

@media screen and (max-width: 768px) {
    .main-cover_pres-text {
        flex-direction: column;
        align-items: center;
    }
    .main-cover_logo {
        width: 100px;
        z-index: 2;
    }
}