/* GENERALITES ET FONTE */
html {scroll-behavior: smooth}
* {box-sizing: border-box;}
body, html {font-family:'Lato', sans-serif;font-size: 100%;line-height : 140%;margin: 0%;padding:0%;height: 100%;}
body {width: auto;background-color:white;/*  */color:#253b50;/*  */}

/* SCROLLBAR */
::-webkit-scrollbar {width: 15px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px #e5dfd4; border-radius: 5px;}
::-webkit-scrollbar-thumb {background: orange; /*  */cborder-radius: 5px;}

/* ELEMENTS */

h1 {font-size:120%;font-weight:300;color:#800000;text-transform: uppercase;width:100%;padding:1% 0% 1% 0%;text-align:left;/* background-color: rgba(229,223,212, 0.5);box-shadow: 1px 1px 6px #555; */}
h2 {font-size:100%;font-weight:300;color:navy;text-transform: uppercase;width:100%;padding:1% 0% 1% 0%;text-align:left}
h3 {font-size:100%;font-weight:300;color:#800000;text-transform: uppercase/* bleu TEXTE CARDS*/;}
h4 {font-size:90%;font-weight:300;color:#b80000;/* rouge SLOGAN */}

/* VIDEO RESPONSIVE CENTREE */
.video-container {display: grid;justify-items: center;align-items: center;position: relative;width: 100%;height: 100%;overflow: hidden;}
.video-container video {position: absolute;z-index: 1;top: 50%;left:50%;min-width: 100%;min-height: 100%;transform: translate(-50%, -50%);}
.video-transparence {position: absolute;top:0%;width: 100%;height: 100%;background: linear-gradient(transparent,20%,white);z-index:5}

/* MENU FLEX */
.flex-menu{display:flex;flex-direction:row;position:fixed;top:0%;width:100%;padding:0% 0% 0% 0%;background-color: rgba(229,223,212, 0.8);box-shadow: 1px 1px 6px #555;justify-content: center;z-index:1000;}
.flex-menu div {margin: 0.7%;text-align:center;background-color:transparent;text-transform: uppercase;}
.flex-menu div a {text-decoration:none;color:#006666;font-weight:bold}
.dropdown {position: relative;display: inline-block;}
.dropdown-content {display: none;position: relative;background-color: rgba(229,223,212, 0.5);z-index: 1500;}
.dropdown:hover p {line-height:15px;text-align:left}
.dropdown:hover .dropdown-content {display: block;}
@media (max-width: 1000px) {.flex-menu {flex-direction: column;display:none;}}

/* DIV ENCADREMENT TOTALE */
.TotalContenu {display:flex;flex-direction:column;position:absolute;width:100%;top:30%;margin: 0% 0% 0% 0%;background-color:transparent;justify-content: center;}
@media (max-width: 1000px) {.TotalContenu {top:20%;}}

/* LOGO FLEX */
.flex-logo{position:relative;display:flex;flex-direction:row;width:100%;padding:0%;margin:0%;background-color:transparent;justify-content:center;z-index:20;}
@media (max-width: 1000px) {.flex-logo {padding-top:15%;}}

/* HAMBURGER */
.A_appel-menu-mobile {display: none;}
@media (max-width: 1000px) {.A_appel-menu-mobile {display:inline-block;position:fixed;top:3%;left:5%;z-index:2000;}}

/* SLOGAN FLEX */
.flex-slogan{display:flex;flex-direction:row;position:relative;width:100%;padding:0%;margin:0%;background-color:transparent;justify-content:center;z-index:20;}
@media (max-width: 1000px) {.flex-slogan {padding-top:5%;}}
.flex-slogan div {padding: 1% 5% 1% 5%;text-align:center;}
.flex-slogan div p {margin: 0% 5% 0% 5%;text-align:center;}


/* 3 CARTES */
.flex-container-3 {display: flex;flex-direction: row;position:relative;width:100%;text-align: center;z-index:50;background-color: transparent;}
.flex-item-3 {margin: 2% 5% 0% 5%; flex: 33,3%;}
@media (max-width: 800px) {.flex-container-3 {position:relative;padding-top:10%;flex-direction: column;}}

/* 2 CARTES IMG GAUCHE*/
.flex-container-2 {display: flex;flex-direction: row;position:relative;width:100%;text-align: left;z-index:50;background-color: transparent;}
.flex-item-IMG-gauche-image {padding: 1.5% 2% 0% 0%;flex: 50%;}
.flex-item-IMG-gauche-texte {padding: 0% 5% 0% 2%; flex: 50%;}
@media (max-width: 800px) {
.flex-container-2 {position:relative;padding-top:3%;flex-direction: column;}
.flex-item-IMG-gauche-image {padding: 1% 5% 1% 5%;}
.flex-item-IMG-gauche-texte {padding: 1% 5% 1% 5%;}
}

/* 2 CARTES IMG DROITE*/
.flex-container-2 {display: flex;flex-direction: row;position:relative;width:100%;text-align: right;z-index:50;background-color: transparent;}
.flex-item-IMG-droite-texte {padding: 0% 2% 0% 0%;flex: 50%;}
.flex-item-IMG-droite-image {padding: 1.5% 5% 0% 2%; flex: 50%;}
@media (max-width: 800px) {
.flex-container-2 {position:relative;padding-top:3%;flex-direction: column;}
.flex-item-IMG-droite-image {padding: 1% 5% 1% 5%;}
.flex-item-IMG-droite-texte {padding: 1% 5% 1% 5%;;}
}

/* TEXT FLEX */
.text {width:100%;margin:0%;padding: 0% 5%;;background-color:transparent;z-index:50;}

/* GALERIE FLEX */
.galerie {width:100%;margin:0%;padding: 1% 0%;;background-color:transparent;z-index:50;}


/* CARTE ET IFRAME*/
.card_adresse_et_carte{position:relative;width:90%;margin:2% 5%;padding: 0%;;background-color:transparent;z-index:50;box-shadow: 1px 1px 6px #555;text-align:center}


/* PARAGRAPHE IMG GAUCHE FLEX */
.flex-2-gauche {position:relative;display:flex;flex-direction: row;width:100%;padding-bottom: 2%;margin:0%;background-color:transparent;z-index:20;}
@media (max-width: 1000px) {.flex-2-gauche {flex-direction: column;}}
.flex-img-gauche {flex:50%;justify-content: flex-end;padding:1% 1% 0% 0%;margin:0%;;background-color:transparent}
.flex-texte-droite {flex:50%;justify-content: flex-start;padding:0% 0% 0% 2%;margin:0%;background-color:transparent;text-align:justify;}
@media (max-width: 1000px) {.flex-img-gauche, .flex-texte-droite{width: 100%;padding:0%;}}
.A_image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}

/* I-FRAME FLEX */
.iframe {position:relative;display:flex;flex-direction:row ;width: 100%;padding:5%;}

/* COLORS */

::-webkit-scrollbar-thumb {background: #2a6338;}
H1, H2, H3, .flex-slogan p, .flex-menu div a {color:#2a6338;}
H1 {font-size:140%;font-weight:bold;}
H2 {font-size:120%;font-weight:bold;}

/* IMAGE100% FLEX */
/* PARAGRAPHE IMG DROITE INVERSE FLEX */
/* 2CARDS FLEX */
/* TEXT FLEX */
/* COPYRIGHT FLEX */

/* ANIMATIONS */
.animate-left{position:absolute;animation:animateleft 3s}@keyframes animateleft{from{right:15%;opacity:0} to{right:5%;opacity:1}}
.animate-bottom{position:absolute;animation:animatebottom 2s;animation-iteration-count: infinite;animation-direction: alternate}@keyframes animatebottom{from{bottom:55%;opacity:0} to{bottom:50%;opacity:1}}
.animate-zoom {animation:animatezoom 3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.animate-opacity{animation:opac 7s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-top{animation:animatetop 1s}@keyframes animatetop{from{top:-10%;opacity:0} to{top:0%;opacity:1}}
.animate-opacity-card{animation:opac 4s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}