@font-face {
    font-family: 'billystuck_webfont';
    src: url('font/Billystuck_Regular/billystuck_regular.ttf') format('ttf');
    src: url('font/Billystuck_Regular/billystuck_regular-webfont.woff') format('woff');
    src: url('font/Billystuck_Regular/billystuck_regular-webfont.woff2') format('woff2');

}

@font-face {
    font-family: 'barlowCondensedMedium';
    src: url('font/barlowCondensed/BarlowCondensed-Medium.ttf') format('ttf');
    src: url('font/barlowCondensed/barlowcondensed-medium-webfont.woff') format('woff');
    src: url('font/barlowCondensed/barlowcondensed-medium-webfont.woff2') format('woff2');

}

@font-face {
    font-family: 'barlowCondensedRegular';
    src: url('font/barlowCondensed/BarlowCondensed-Regular.ttf') format('ttf');
    src: url('font/barlowCondensed/barlowcondensed-regular-webfont.woff') format('woff');
    src: url('font/barlowCondensed/barlowcondensed-regular-webfont.woff2') format('woff2');

}

@font-face {
    font-family: 'barlowCondensedThin';
    src: url('font/barlowCondensed/BarlowCondensed-Thin.ttf') format('ttf');
    src: url('font/barlowCondensed/barlowcondensed-thin-webfont.woff');
    src: url('font/barlowCondensed/barlowcondensed-thin-webfont.woff2');
}

* {
    box-sizing: border-box;
}

body {
    background: #3c5466;
    color: white;
    font-family: "barlowCondensedRegular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    ;

}

/***** Header ******/

header {
    text-align: center;
}

.logo-content {
    width: 100%;
    height: auto;
    position: relative;
}

.logo-content:after {
    content: "\"On The Lake, Let's Navigate!\"";
    display: inline-block;
    transform: rotate(358deg);
    font-style: italic;
    color: #73C9BB;
    position: absolute;
    top: 80%;
    right: -2%;
}

.logo {
    width: 100%;
    height: auto;
}

.phrase_accroche {
    font-family: "billystuck_webfont", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace";
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}


@media only screen and (max-width : 600px) {
    .phrase_accroche {
        font-size: 3em !important;
    }

    .phrase_accroche_bis {
        font-size: 1em;
    }

    .phrase_accroche_ter {
        font-family: 'barlowCondensedThin';
        font-size: 1em
    }
}

@media only screen and (min-width : 601px) {
    .phrase_accroche {
        font-size: 3.5em;
    }

    .phrase_accroche_bis {
        font-size: 1.5em;
    }

    .phrase_accroche_ter {
        font-size: 1.3em;
    }
}

.phrase_accroche_bis {

    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

.phrase_accroche_ter {
    font-family: 'barlowCondensedThin';

    font-weight: 500;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

.drapeau {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100px;
    height: auto;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
    border-radius: 30px;
}

/***** Bandeau Publicitaire *****/
.bandeau_publicitaire {
    background-color: #73C9BB;
    font-size: 2em;
}


/***** Bateaux *****/
.decor {
    height: 30px;
    background: url("./assets/vagueDecor.svg") repeat-x;
    margin: auto;
}

.bateaux ul li {
    list-style: none;
}

.description {
    margin: auto;
}

.nom_bateau {
    font-weight: 600;
    color: #7eb69c;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

.photo_bateau img {
    max-width: 100%;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
    border: solid white 10px;
}

.reserver a {
    cursor: pointer;
    color: #fff;
    border: 2px solid #7eb69c;
    text-decoration: none !important;
    border-radius: 40px;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

.reserver,
span {
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

.reserver a:hover {
    background-color: #7eb69c;

}

/**** INFOS ***/
.asterisque {
    color:#7eb69c;
    font-weight: 600;

}
.obligatoire {
    color: #7eb69c;
}

.alerte img, .jumelles img {
    width: 30px;
    height: 30px;
}

.jumelles svg {
    fill: #7eb69c;
}
.message-alert, .inclus  {
    padding-left: 10px;
}

/***** Footer ******/
footer {
    background: #7eb69c;
}

.contact {
    color: #3c5466;
    font-weight: 600;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

footer ul {
    padding: 0px;
}

footer li {
    list-style: none;
    margin: auto;
}

footer a {
    text-decoration: none;
    color: white !important;
}

footer a.lien_tel img,
footer a.lien_mail img,
footer a.lien_localisation img {
    width: 30px;
    height: 30px;

}

footer a.lien_fb img {
    width: 50px;
    height: 50px;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

.menu_footer {
    font-size: 1.3em;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

.carte_google iframe {
    width: 200px;
    height: 150px;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}



/****PARTENAIRES*****/
.partenaires {
    background: #3c5466;
}

.titre_partenaire {
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
    color: #7eb69c;
    font-weight: 600;
}

.logo_partenaire img,
.logo_partenaire svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

.logo_partenaire {
    padding: 30px;
    max-width: 150px;
}