/* Icônes */
@font-face { font-family: "neocatalys"; src: url("../fonts/neocatalys.woff"); }

.icon { font-family: "neocatalys", serif; }
.icon_big { font-size: 24px; }

.avis_star { font-size: 16px; color: #FB0; }

/* éléments génériques */
.center { text-align: center; margin: 0 auto;}
.left { float: left; }
.right { float: right; }

/* couleurs */
.vert { color: #71b62b; }
.bleu { color: #064b57; }
.bgvert { background: #71b62b; }
.bgbleu { background: #064b57; }


/* liens et boutons */
a { color: #064b57; text-decoration: none; }
a:hover { color: #71b62b; }

.bouton { color: #fff; font-family: 'Montserrat', sans-serif ; font-weight: 200; font-size: 18px; padding: 8px 20px; }
.bouton:hover { color: #064b57; }

/* OVERRIDE FANCYBOX */
.fancybox-caption__body { max-height: 50vh; background: #000; color: #fff; font-size: 18px; padding: 5px 20px; overflow: auto; pointer-events: all; display: inline-block; }


/* structure de la page */
body { font-family: 'Lato', sans-serif; font-size: 16px; overflow-y: scroll; }

.wrapper { width: 98%; margin: 0 auto; }

.footer { font-weight: 300; font-size: 14px; text-align: center; line-height: 1.3em; padding: 0 0 30px; margin: 50px auto 0; }
.contenu { width: 78%; margin: 60px 0 80px 27%; float: right; box-sizing: border-box; transition: 200ms; }
.contenu p { max-width: 960px; padding: 20px 20px 0; margin: 0 auto; }
.contenu h3 { width: 960px; padding: 20px 0 0; margin: 0 auto; display: block; }

.clearfix {clear: both;}
.clearfix:before { content: ''; display: table; }
.clearfix:after { content: ''; clear: both; }

/* titres */

h1 { font-family: Montserrat, sans-serif; font-size: 30px; font-weight: 200; letter-spacing: 1px; line-height: 1.6em; text-align: center; }
h2 { font-family: Montserrat, sans-serif; font-size: 24px; font-weight: 200; letter-spacing: 1px; line-height: 1.6em; border-bottom: 1px solid #ccc; }
h3 { font-family: Lato, sans-serif; font-size: 22px; font-weight: 300; letter-spacing: 1px; line-height: 1.6em; border-bottom: 1px solid #ccc; display: inline-block; }

.title_break { width: 40px; border-top: 2px solid #71b62b; margin: 0 auto; display: block; }
.soustitre{ color: #064b57; font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; text-align: center; letter-spacing: 1px; margin: 20px auto 10px; }
.accroche { font-family: lato, sans-serif; font-weight: 300; text-align: center; margin: 30px 10%; }

/* home */

.home_accroche { text-align: justify; padding: 20px; margin: 50px 0; box-sizing: border-box; }

.intro_video { max-height: 600px; position: relative; overflow: hidden; }
.vidBg { width: 100%; height: auto; position: relative; }
.vidLogo { width: 100%; color: #fff; font-size: 18px; font-weight: 300; text-align: center; text-transform: uppercase; letter-spacing: 6px; position: absolute; top: 50%; transform: translateY(-50%); }
.vidLogo img { display: block; margin: 0 auto; }

.chevron-bottom { font-size: 24px; margin: 60px auto 0; }

/* Header + Navigation */

header { width: 100%; height: 76px; background-color: #fff; position: fixed; top: 0; z-index: 1001; }
.header-container { width: 100%; font-size: 13px; font-weight: 400; padding-top: 10px; display: flex; align-items: center; justify-content: center; z-index: 1001; }

.logo img { height: 56px; margin: 0 100px; }

.navig  { padding: 0; display: flex; justify-content: center; }
.navig .menu { text-transform: uppercase; padding: 0 20px ; }
.navig .sub-menu { background-color: #fff; line-height: 22px; border: 1px solid #ddd; padding: 5px 10px; margin: 0 0 10px; display: none; position: absolute; top: 53px; z-index: 2;}

.rs { margin-left: 20px; display: flex; }
.rs div { font-size: 16px; padding: 0 6px; float: left;}

.navig.active { transform: translateX(0); transition: 0.5s; }

.burger { width: 40px; height: 30px; border: 1px solid transparent; display: none; cursor: pointer; position: fixed; transition: all 0.3s; top: 15px; left: 15px; z-index: 50; }
.bar { width: 40px; height: 6px; background: #064b57; border-radius: 4px; margin-top: 12px; position: relative; }
.bar:before { content: ''; width: 40px; height: 6px; background: #064b57; border-radius: 4px; display: block; position: absolute; left: 0; transition: all 0.3s; top: -12px; }
.bar:after { content: ''; width: 40px; height: 6px; background: #064b57; border-radius: 4px; display: block; position: absolute; left: 0; transition: all 0.3s; top: 12px; }
.bar.active { height: 0; }
.bar.active:before { transform: translateY(12px) rotate(45deg); }
.bar.active:after { transform: translateY(-12px) rotate(-45deg); }

/* Call to action */

.call-to-action { width: 100%; border:1px solid #ddd; padding: 20px; margin: 0 auto; box-sizing: border-box; display: flex; }
.cta_galerie { text-align: center; margin: 20px auto; }
.cta-container { width: 960px; margin: 0 auto; display: flex; }

.tagline { width: 67%; color: #064b57; font-family: Montserrat, sans-serif; font-size: 24px; text-align: right; padding-right: 50px; }

.gros_bouton { width: 33%; color: #fff; font-size: 20px; font-family: Lato, sans-serif; letter-spacing: 1px; padding: 10px; display: flex; align-items: center; justify-content: center; }
.gros_bouton strong { font-weight: 300; font-size: 22px; font-family: Montserrat, sans-serif; }

/* Boxes home page */

.boxes_home{
    display: flex;
    justify-content: space-between;
}

.box-sections{
    width: 32%;
    line-height: 24px;
    color: #444;
}

.box-sections img {
    width: 100%;
}

.box-sections h3 {
    display: block;
    border: none;
    text-align: center;
    margin: 10px 0;
    color: #064b57;

}

.box-sections p {
    text-align: justify;
}


/* Diaporama */

.diaporama {
    height: 450px;
    width: 100%;
    position: relative;
}

.diaporama_ref {
    height: 200px;
    width: 80%;
    position: relative;
    margin: 20px auto 0;
}

.diaporama_home {
    margin-top: 75px;
    height: 450px;
}

.slide {
    height: 450px;
    padding: 0 5px;
}

.slide img  {
    height: 450px;
    width: auto;
}

.slide_ref {
    height: 100px;
    padding: 0 5px;
    width: 25%;
    position: relative;
}

.slide_ref img  {
    display: block;
    max-height: 100px;
    max-width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slide_avis {
    padding: 10px;
    box-sizing: border-box;
    height: 260px;
}

.slide_avis_container {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    height: 220px;
    overflow: auto;
}

.entete_avis {
    font-size: 18px;
    font-weight: 700;
    display: flex;
}

.entete_avis img {
    width: 70px;
    margin-right: 10px;
}

.texte_avis {
    font-size: 14px;
    color: #444;
}

.texte_avis:before, .texte_avis:after {
    content: '"';
    font-size: 26px;
    color: #888;
}


.footer_avis {
    font-size: 14px;
    color: #888;
    font-style: italic;
}


.slide_home {
    height: 450px;
    padding: 0 5px;
}
.slide_content {
    display: flex;
    position: relative;

}
.home_diapo_image {

}

.home_diapo_image img {
    height: 450px;
    width: auto;
}

.home_diapo_texte {
    max-width: 350px;
    font-size: 18px;
    color: #064b57;
    font-style: italic;
    line-height: 26px;
}

.home_diapo_texte h3 {
    display: block;
    border: none;
    color: #064b57;
    font-family: Montserrat, sans-serif;
    font-size: 24px;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.6em;
}

.home_diapo_texte a {

}

.bt_diapo_texte {
    margin: 0 auto;
    display: block;
    padding: 10px 10px 10px 25px;
    width: fit-content;
    color: #fff;
    background-color: #064b57;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.bt_diapo_texte:before {
    content:"<";
    font-family: "neocatalys", serif;;
    margin: 0 auto;
    display: block;
    width: fit-content;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%) rotate(-90deg);
}

.diaporama-inline {
    height: 600px;
    position: relative;
    background: transparent;
}

.diaporama-inline img {
    object-fit: contain;
    width: 100%;
    height: 98%;
 }
/* Blocs image */
.block {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.block_visuel {
    width: 50%;
    max-height: 500px;
    overflow: hidden;
    box-sizing: border-box;
}

.block_visuel img {
    width: 100%;
    height: auto;
}

.block_visuel img.horizontal {
    height: 500px;
    width: auto;
    margin-left: 50%;
    transform: translateX(-50%);
}

.block_visuel2 {
    width: 50%;
    height: 500px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    padding: 40px;
}

.block_visuel2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.block_contenu {
    width: 50%;
    box-sizing: border-box;
    padding: 40px 160px;
    text-align: justify;
    line-height: 26px;
}

.block_contenu h3 {
    display: block;
    margin: 0 0 25px;
    border: none;
    width: auto;
    font-size: 26px;
    font-weight: 600;
    line-height: 28px;
    text-transform: uppercase;
    text-align: center;
    padding: 0;
}

.block_reverse { order: 1; }

.block_lien {
    text-align: center;
    margin-top: 25px;
}

.block_lien a {
    padding: 10px 20px;
    color: #fff;
    font-family: 'Montserrat', sans-serif ;
    font-weight: 200;
    font-size: 14px;
    background: #064b57;
}

.block_lien a:hover {
    background: #71b62b;
}

.noir {
    background: #000;
    color: #fff;
}

.blanc {
    background: #fff;
    color: #000;
}

.gris {
    background: #eee;
    color: #000;
}


/* Page contact */

.contact_contenu {
    display: flex;
    margin: 30px auto 60px;
    max-width: 960px;
}

.contact_form {
    width: 60%;
    padding: 10px;
    box-sizing: border-box;
}

.contact_form label {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 200;
    color: #064b57;
}

.contact_form input, .contact_form textarea {
    font-family: "Lato", sans-serif;
    font-size: 18px;
    margin: 5px 0 20px;
    width: 90%;
    padding: 5px;
}
.contact_form input.required:after {
    content: "*";
    color: red;
}

.contact_form input.input_code_visuel {
    width: 50%;
}

.contact_form input.rgpd {
    width: auto;
    margin-right: 5px;
}


.contact_side {
    width: 40%;
    padding: 10px;
    box-sizing: border-box;
    line-height: 24px;
    color: #064b57;
}

.contact_side img {
    width: 100%;
}

.contact_carte { margin-top: 20px; }

.contact_form input.sendbutton {
    display: block;
    padding: 8px 20px;
    color: #fff;
    font-family: 'Montserrat', sans-serif ;
    font-weight: 200;
    font-size: 18px;
    background: #064b57;
    border: none;
    width: fit-content;
}

#usermessagea {
    margin: 20px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 20px;
}

.success {
    color: #71b62b;
}

.error { color: #b00; }

/* Page A propos */
.apropos {
    display: flex;
    margin: 0 auto;
    max-width: 960px;
}

.apropos_visuel {
    width: 35%;
    padding-right: 30px;
    box-sizing: border-box;
}

.apropos_visuel img{
    width: 100%;
}

.apropos_contenu {
    width: 65%;
}

.apropos_contenu h3{
    width: 100%;
}


/********************************************************/
/* Bandeau cookies
/********************************************************/

.cookies_banner { width: 100%; background: rgba(6, 75, 87, .8); color: #fff; font-family: 'lato', sans-serif; font-size: 18px; font-weight: 300; text-align: center; line-height: 30px; padding: 40px; position: fixed; top: 40%; left: 0; z-index: 9999; backdrop-filter: blur(8px); }
.cookies_banner span { width: 100%; text-align: center; display: inline-block; }
.cookies_banner a { background: #71b62b; color: #fff; font-size: 16px; text-transform: uppercase; border-radius: 4px; padding: 3px 10px; margin: 10px; display: inline-block; }

/***********************************************************************/
/*********** Masonry ***************************************************/
/***********************************************************************/

.grid_home .grid-item {
    margin-bottom: 0;
    width: calc(100% / 3);
}

.grid_home .grid-item img {
    transform: scale(1.03);
}

.grid {
    margin: 0 auto;

}

.grid-item {
    float: left;;
    margin-bottom: 4px;
    box-sizing: border-box;
    width: calc(33.3% - 5px);
    overflow: hidden;
    position: relative;
}

.grid-item-x2 {
    width: calc(50% - 5px);
}

.grid-item img, .grid-item-x2 img {
    width: 100%;
    height: auto;
    max-width: 100%;
    transition: transform .4s;
}

.grid-item img:hover, .grid-item-x2 img:hover {
    transform: scale(1.06);
}

.grid-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 72px;
}

.grid-item:hover .grid-video a { color: #e00; }

.grid-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    display: none;
    background-color: rgba(0,0,0,0.5);
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    width: 80%;
    text-align: center;
}
/* Override Fancybox */

.fancybox-bg {
    background: #fff;
}

.fancybox-button {
    background: rgba(6, 75, 87, 1);
}

.fancybox-button, .fancybox-button:link, .fancybox-button:visited {
    color: #fff;
}

.fancybox-button:hover {
    color: #71b62b;
}





/***********************************************************************/
/******************            RESPONSIVE           ********************/
/***********************************************************************/

@media  (max-width: 567px) {
    .wrapper {
        width: 100%;
    }

    .burger {
        display: block;
    }

    .logo {
        text-align: center;
        margin: 0;
    }

    .logo img {
        width: 200px;
    }

    .navig {
        position: fixed;
        top: 58px;
        transform: translateX(-105%);
        transition: 0.5s;
        z-index: 13;
        margin-left: -30px;
        background: #fff;
        padding: 15px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        width: 80%;
        max-height: 85%;
        overflow: auto;
        flex-direction: column;
    }

    .navig .menu {
        display: inline-block;
        background: #064b57;
        margin: 3px 0;
        padding: 12px 20px;
        border-radius: 5px;
        position: relative;

    }

    .navig .menu a {
        font-size: 20px;
        color: #fff;
    }

    .navig .menu .sub-menu {
        margin: -20px;
        border-radius: 5px;
        top: 70px;
    }

    .navig .menu .sub-menu a {
        color: #064b57;
    }

    .contenu {
        width: 100%;
        float: none;
        padding: 0 80px 0 15px;
        margin: 0 0 80px 0;
    }

    .grid-item {
        width: calc(100% - 15px);
    }

    .block {
        display: block;
    }

    .block_visuel {
        width: 100%;
        max-height: 500px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .block_visuel img {
        width: 100%;
        height: auto;
    }

    .block_visuel img.horizontal {
        height: 500px;
        width: auto;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .block_contenu {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
        margin-bottom: 30px;
    }

    .contact_contenu { display: block; }

    .contact_form { width: 100%; }

    .contact_side { width: 100%; }


    .tagline {
        width: 100%;
    }

    .gros_bouton {
        width: 100%;
    }


    .boxes_home{
        display: block;
    }

    .box-sections{
        width: 95%;
        margin-bottom: 60px;
    }

    /* Page A propos */
    .apropos {
        display: flex;
        flex-wrap: wrap;
    }

    .apropos_visuel {
        width: 100%;
        padding-right: 30px;
        box-sizing: border-box;
    }

    .apropos_visuel img{
        width: 50%;
        display: block;
        margin: 0 auto;
    }

    .apropos_contenu {
        width: 100%;
    }

}

@media (min-width: 568px) and (max-width: 767px) {
    .wrapper {
        width: 100%;
    }


.burger {display: block; }



    .logo {
        text-align: center;
        margin: 0;
    }

    .logo img{
        width: 200px;
    }

    .navig {
        position: fixed;
        top: 58px;
        transform: translateX(-100%);
        transition: 0.5s;
        z-index: 13;
        margin-left: -30px;
        background: #fff;
        padding: 15px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        width: 50%;
    }

    .navig ul li a {
        display: inline-block;
        background: #064b57;
        margin: 3px 0;
        padding: 12px 20px;
        font-size: 20px;
        color: #fff;
        border-radius: 5px;

    }

    .navig ul li ul li a {
        background: rgba(6, 75, 87, .7);
    }

    .contenu {
        width: 100%;
        float: none;
        padding: 0 0 0 15px;
        margin: 0 0 80px 0;


    }

    .grid-item {
        width: calc(100% - 15px);

    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .wrapper {
        width: 100%;
    }



    .logo img{
        width: 100%;
    }
    .contenu {
        width: 70%;
        float: right;
    }

    .grid-item {
        width: calc(100% - 15px);

    }
}

@media (min-width: 992px) and (max-width: 1199px) {

    .header-container { width: 980px; margin: 0 auto; }

    .wrapper {
        width: 98%;
    }



    .contenu {
        width: 78%;
        float: right;
    }

    .grid-item {
        width: calc(50% - 15px);

    }
}

@media (min-width: 1200px) {

    .wrapper { width: 100%; }
    .contenu { width: 100%; margin: 80px 0; }

}