@font-face {
    font-family: 'montserrat';
    src: url('../fonts/montserrat-regular-webfont.eot');
    src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-regular-webfont.woff') format('woff'),
         url('../fonts/montserrat-regular-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-regular-webfont.svg#open_sans_extrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserrat_light';
    src: url('../fonts/montserrat-light-webfont.eot');
    src: url('../fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-light-webfont.woff') format('woff'),
         url('../fonts/montserrat-light-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-light-webfont.svg#open_sans_extrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratitalic';
    src: url('../fonts/montserrat-italic-webfont.eot');
    src: url('../fonts/montserrat-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-italic-webfont.woff2') format('woff2'),
         url('../fonts/montserrat-italic-webfont.woff') format('woff'),
         url('../fonts/montserrat-italic-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-italic-webfont.svg#montserratitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserrat_bold';
    src: url('../fonts/montserrat-bold-webfont.eot');
    src: url('../fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-bold-webfont.woff') format('woff'),
         url('../fonts/montserrat-bold-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-bold-webfont.svg#open_sans_extrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratmedium';
    src: url('../fonts/montserrat-medium-webfont.eot');
    src: url('../fonts/montserrat-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-medium-webfont.woff2') format('woff2'),
         url('../fonts/montserrat-medium-webfont.woff') format('woff'),
         url('../fonts/montserrat-medium-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-medium-webfont.svg#montserratmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserrat_black';
    src: url('../fonts/montserrat-black-webfont.eot');
    src: url('../fonts/montserrat-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-black-webfont.woff') format('woff'),
         url('../fonts/montserrat-black-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-black-webfont.svg#open_sans_extrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {font-family: montserrat;}
#bodyHeader .bannierHaut {height: 160px;}
#bodyHeader .logoSoc {height: 100%;padding: 0 0;}
#bodyHeader .logoImg {width: 60%;margin: 0 auto;display: block;margin-top: 35px;}
#bodyHeader .menu {height: 100%;padding: 0 0;line-height: 74px;z-index: 10;}
#bodyHeader .menuHaut {font-family: montserrat_bold;font-size: 17px;height: 50%;text-align: center;padding: 0 0;border-style: solid;border-width: 0px 1px 1px 1px;border-color: #a9b4b1;overflow: hidden;}
#bodyHeader .menuBas {font-family: montserratmedium;font-size: 13px;height: 50%;padding: 0 0;border-style: solid;border-width: 0px 1px 0px 1px;border-color: #a9b4b1;overflow: hidden;}
#bodyHeader .menuBas .menuTitre {padding: 0;text-align: center;margin: 0;}
#bodyHeader .menuBas .menuTitreLig {display: inline-block;height: 100%;}
#bodyHeader .menuBas .menuTitreLig:hover {border-style: solid;border-width: 0px 0px 6px 0px;border-color: #54aad6;transition: border-width 0.5s;}
#bodyHeader .menuBas .menuTitreLig:hover a {font-weight: bold;transition: font-weight 0.5s;}
#bodyHeader .menuBas .menuTitreLig a {color: #12110e;text-decoration: none;padding: 15px;}
#bodyHeader .logoQual {height: 100%;padding: 0 0;}
#bodyHeader .qualibatImg {width: 60%;margin: 0 auto;display: block;margin-top: 30px;}
#bodyHeader .blocSoc {height: 100%;padding: 0 0;font-size: 10px;}
#bodyHeader .blocSocAdr {height: 34%;padding: 0 0;background-color: #54aad6;border-style: solid;border-width: 0px 0px 1px 1px;border-color: #a9b4b1;overflow: hidden;}
#bodyHeader .blocSocAdrImg {display: inline-block;vertical-align: middle;width: 10%;margin-left: 15px;margin-top: -8px;}
#bodyHeader .blocSocAdrTxt {display: inline-block;vertical-align: middle;font-family: montserrat_bold;color: white;width: 70%;margin-top: 10px;text-align: left;margin-left: 10px;}
#bodyHeader .blocSocMail {height: 33%;padding: 0 0;border-style: solid;border-width: 0px 0px 1px 1px;border-color: #a9b4b1;overflow: hidden;}
#bodyHeader .blocSocMailImg {display: inline-block;vertical-align: middle;width: 10%;margin-left: 15px;margin-top: -2px;}
#bodyHeader .blocSocMailTxt {display: inline-block;vertical-align: middle;font-family: montserrat_bold;color: #54aad6;width: 70%;margin-top: 15px;text-align: left;margin-left: 10px;}
#bodyHeader .blocSocTel {height: 33%;padding: 0 0;background-color: #54aad6;border-style: solid;border-width: 0px 0px 1px 1px;border-color: #a9b4b1;overflow: hidden;}
#bodyHeader .blocSocTelImg {display: inline-block;vertical-align: middle;width: 10%;margin-left: 15px;} 
#bodyHeader .blocSocTelTxt {display: inline-block;vertical-align: middle;font-family: montserrat_bold;color: white;width: 70%;margin-top: 15px;text-align: left;margin-left: 10px;}

#banniere .owlBanniere {width: 100%;position: relative;overflow: hidden;}
#banniere .owlBanniere .item {position: relative;overflow: hidden;}
#banniere .owlBanniere .bg {position: absolute;background: rgb(0,0,0,0.3);top: 0;left: 0;right: 0;bottom: 0;}
#banniere .owlBanniere .banniereImg {max-width:100%;}
#banniere .owlBanniere .banniereTitre {position: absolute;width: 100%;top: 0;text-align: center;padding-left: 7%;padding-right: 7%;color: white;font-family: montserrat_black;margin-top: 17%;font-size: 35px;}
#banniere .owlBanniere .banniereBouton {position: absolute;width: 120px;top: 0;text-align: center;color: white;background-color: #54aad6;font-family: montserratmedium;font-size: 12px;height: 35px;text-decoration: none;padding-top: 10px;margin: 22% auto 0 auto;right: 0;left: 0;display: block;}
#banniere .owlBanniere .owl-nav {position: absolute;top: 0;left: 0;right: 0;padding-top: 20%;}
#banniere .owlBanniere .owl-nav .owl-prev, #banniere .owlBanniere .owl-nav .owl-next {position: absolute;color: transparent;}
#banniere .owlBanniere .owl-nav .owl-prev span, #banniere .owlBanniere .owl-nav .owl-next span {color: transparent;}
#banniere .owlBanniere .owl-nav .owl-prev {background:url('../images/prev-white.png') !important;height: 32px;width: 32px;background-size: contain !important;left: 3%;border: none;}
#banniere .owlBanniere .owl-nav .owl-next {background:url('../images/next-white.png') !important;height: 32px;width: 32px;background-size: contain !important;right: 3%;border: none;}

#banmenu {width: 100%;position: relative;overflow: hidden;}
#banmenu .item {position: relative;overflow: hidden;}
#banmenu .item .banniereImg {max-width:100%;width: 100%;}
#banmenu .item .bg {position: absolute;background: rgb(0,0,0,0.3);top: 0;left: 0;right: 0;bottom: 0;}
#banmenu .item .banniereTitre {position: absolute;width: 100%;top: 0;text-align: center;padding-left: 7%;padding-right: 7%;color: white;font-family: montserrat_black;margin-top: 10%;font-size: 60px;}

#presentation .catImageD {text-align: right;position: relative; margin-bottom: 35px;padding: 0;}
#presentation .cadreImgD {border: 5px solid #e7e7e7;top: 20px;right: 20px;position: absolute;width: 85%;z-index: 0;transition: top 0.5s, right 0.5s;}
#presentation .catImgD {width: 85%;z-index: 1;position: relative;}
#presentation .catImageD:hover .cadreImgD {top: 25px;right: 25px;transition: top 0.5s, right 0.5s;}
#presentation .catImageG {text-align: left;position: relative; margin-bottom: 35px;padding: 0;}
#presentation .cadreImgG {border: 5px solid #e7e7e7;top: 20px;left: 20px;position: absolute;width: 85%;z-index: 0;transition: top 0.5s, left 0.5s;}
#presentation .catImgG {width: 85%;z-index: 1;position: relative;}
#presentation .catImageG:hover .cadreImgG {top: 25px;left: 25px;transition: top 0.5s, left 0.5s;}
#presentation .present {padding: 0 15%;background-color: #f3f4f4;}
#presentation .present .presTitre {margin-top: 30px;padding: 0;}
#presentation .present .presTitre h2 {font-family: montserratmedium;color: #54aad6;font-size: 20px;font-weight: bold;}
#presentation .present .presContenu {padding: 0;}
#presentation .present .presContenu strong {font-family: montserratmedium;font-size: 18px;}
#presentation .present .presContenu p {font-family: montserrat;font-size: 14px;}
#presentation .present .boutonDec {padding: 0;text-align: center;margin-top: 20px;margin-bottom: 40px;font-family: montserratmedium;font-size: 14px;color: black;text-decoration: none;border: 1px solid;border-color: black;display: block;padding: 10px;}
#presentation .present .boutonCont {padding: 0;text-align: center;margin-top: 20px;margin-bottom: 40px;font-family: montserratmedium;font-size: 14px;color: #54aad6;text-decoration: none;border: 1px solid;border-color: #54aad6;display: block;padding: 10px;}
#presentation .catLigne hr {background-color: #54aad6;}

#presentation .categorie {padding: 0 15%;}
#presentation .categorie .catTitre {text-align: center;padding: 0;}
#presentation .categorie .catTitre h2 {font-family: montserratmedium;font-size: 20px;margin: 40px 0px -10px 0px;}
#presentation .categorie .catRow {padding-top: 20px;}
#presentation .categorie .catLigne {padding: 0px;margin-top: 20px;}
#presentation .categorie .catContenu {padding: 0;}
#presentation .categorie .catContenu h2 {font-family: montserratmedium;color: #54aad6;font-size: 20px;font-weight: bold;}
#presentation .categorie .catContenu strong {font-family: montserratmedium;font-size: 18px;}
#presentation .categorie .catContenu p {font-family: montserrat;font-size: 14px;} 
#presentation .categorie .souscatBt {padding: 5px;}
#presentation .categorie .souscatBouton {padding: 5px;text-align: center;margin-top: 20px;margin-bottom: 20px;font-family: montserratmedium;font-size: 14px;color: black;text-decoration: none;border: 1px solid;border-color: black;display: block;}
#presentation .categorie .catImage {padding: 0;}
#presentation .categorie .souscatRow {padding: 30px 15px 0px;display: none;}
#presentation .categorie .souscatImg {width: 80%;float: left;}
#presentation .categorie .souscatContenu {padding: 0;float: right;}
#presentation .categorie .souscatContenu h3 {font-family: montserratmedium;font-size: 18px;}
#presentation .categorie .souscatContenu strong {font-family: montserratmedium;font-size: 16px;}
#presentation .categorie .souscatContenu p {font-family: montserrat;font-size: 14px;} 
#presentation .categorie .souscatContenu2 {margin-right: 200px;} 
#presentation .categorie .souscatContenu2 p {font-family: montserrat;font-size: 14px;} 
#presentation .categorie .souscatContenu2Bt {font-family: montserratmedium;font-size: 12px;color: white;background-color: #54aad6;text-decoration: none;display: block;text-align: center;padding: 5px 20px;float: right;margin-top: -25px;}

#galImage .rowButton {text-align: center;padding: 15px 0px;}
#galImage .rowButton button {font-size: 12px;font-family: montserratmedium;text-transform: uppercase;background-color: white;color: black;text-align: center;text-decoration: none;display: inline-block;cursor: pointer;border: 1px solid;padding: 10px 40px;;margin: 10px;}
#galImage .rowButton button.active {color: #54aad6 !important;}
#galImage .rowGallery {background-color: #f3f4f4;padding: 30px 15%;text-align: center;}
#galImage .rowGallery a {width: 31%;height: auto;display: inline-block;overflow: hidden;margin: 5px;text-decoration: none;
    background-color: #74b9dc;background-image: url('../images/zoom-galerie.png');background-repeat: no-repeat;background-position: center;background-size: 15%;}
#galImage .rowGallery img {width: 100%;height: auto;transition: opacity 0.5s;-webkit-transition: opacity 0.5s;-o-transition: opacity 0.5s;-moz-transition: opacity 0.5s;opacity: 1;}
#galImage .rowGallery a:hover img {transition: opacity 0.5s;-webkit-transition: opacity 0.5s;-o-transition: opacity 0.5s;-moz-transition: opacity 0.5s;opacity: 0.5;}
#galImage .rowGallery p {margin-top: -60px;text-align: center;font-size: 12px;font-family: montserrat;color: white;padding: 10px 20px;position: relative;z-index: 10;
    transition: opacity 0.5s;-webkit-transition: opacity 0.5s;-o-transition: opacity 0.5s;-moz-transition: opacity 0.5s;opacity: 0;}
#galImage .rowGallery a:hover p {transition: opacity 0.5s;-webkit-transition: opacity 0.5s;-o-transition: opacity 0.5s;-moz-transition: opacity 0.5s;opacity: 1;}

.fancybox-button {background-color: rgba(30, 30, 30, 0) !important}
.fancybox-button--arrow_right div {background-image: url('../images/fleche_droite.png');background-repeat: no-repeat;background-position: center;background-size: 100%;background-color: rgba(255, 255, 255, 0);}
.fancybox-button--arrow_left div {background-image: url('../images/fleche_gauche.png');background-repeat: no-repeat;background-position: center;background-size: 100%;}

#contact h2 {text-align: center;font-family: montserrat_light;text-transform: uppercase;font-size: 26px;overflow: hidden;height: 100px;margin: 0;line-height: 100px;color: #54aad6;}
#contact .bg-contact {background: #f6f6f6;}
#contact .bg-contact form {padding: 60px 70px;}
#contact .bg-contact form label {font-family: montserrat_bold;display: block;margin: 15px 0px 5px 0;}
#contact .bg-contact form input[type="text"] {width: 100%;border: 1px solid #cdcdcd;height: 35px;padding: 0 10px;}
#contact .bg-contact form select {width: 100%;border: 1px solid #cdcdcd;height: 35px;padding: 0 10px;background: white;}
#contact .bg-contact form textarea {width: 100%;border: 1px solid #cdcdcd;height: 105px;padding: 0 10px;}
#contact .bg-contact form .civBloc {display: inline-block;margin-right: 15px;}
#contact .bg-contact form input[type="button"] {background: #54aad6;border: 1px solid #54aad6;color: white;border-radius: 10px;padding: 5px 20px;cursor: pointer;width: 30%;}
#contact .bg-contact form input[type="file"] {display: none;}
#contact .bg-contact .nameFile {width: 65%!important;float: right;}
#contact .bg-contact form .g-recaptcha {margin: 30px auto 0 auto;float: right;}
#contact .bg-contact form .msg_slide .warning {background: rgb(255,102,0, 0.8);color: white;padding: 10px 20px;}
#contact .bg-contact form .msg_slide .success {background: rgb(15,179,0, 0.8);color: white;padding: 10px 20px;}
#contact .bg-contact form input[type="submit"] {margin: 50px auto 0 auto;background: #54aad6;border: 1px solid #54aad6;color: white;border-radius: 10px;padding: 5px 20px;font-family: montserrat_bold;font-size: 14px;cursor: pointer;}

#footerIcon {padding: 0;margin: 0;} 
#footerIcon .rowIcon {background-color: #54aad6;text-align: center;padding: 30px 0px;} 
#footerIcon .rowIcon .appIconBt {padding: 10px;} 
#footerIcon .rowIcon .appIconImg {width: 3%;} 

#footer {padding: 0;margin: 0;} 
#footer a {font-size: 14px;color: black;text-decoration: underline;}
#footer .dsoft {text-align: center;background-color: #54aad6;padding-bottom: 15px;padding-top: 15px;}
#footer .dsoft a { text-decoration: none;}
#footer .dsoft span {font-size: 14px;color: white;}
#footer .dsoft img {width: 5%; margin-top: -5px;}

@media (min-width: 1500px) {
    #bodyHeader .menuHaut {font-size: 22px;}
}
@media (max-width: 1291px) {
    #bodyHeader .menuBas {font-size: 10px;}
}
@media (max-width: 1267px) {
    #bodyHeader .menuHaut {font-size: 16px;}
}
@media (max-width: 1199px) {
    #bodyHeader .blocSoc {font-size: 9px;}
    #bodyHeader .menuHaut {font-size: 15px;}
}
@media (max-width: 1087px) {
    #bodyHeader .blocSoc {font-size: 8px;}
    #bodyHeader .menuHaut {font-size: 14px;}
    #bodyHeader .menuBas {font-size: 9px;}
}
@media (max-width: 991px) {
    #bodyHeader .blocSoc {font-size: 7px;}
    #bodyHeader .menuHaut {font-size: 12px;}
    #bodyHeader .menuBas .menuTitre {line-height: 37px;}
    #bodyHeader .menuBas {font-size: 10px;}
}
@media (max-width: 847px) {
    #bodyHeader .menuHaut {font-size: 11px;}
    #bodyHeader .blocSocAdrImg {width: 8%;}
    #bodyHeader .blocSocMailImg {width: 8%;}
    #bodyHeader .blocSocTelImg {width: 8%;}
    #banniere .owlBanniere .banniereTitre {margin-top: 16%;}
    #banniere .owlBanniere .banniereBouton {margin-top: 23%;}
}
@media (max-width: 767px) {
    #bodyHeader .logoImg {margin-top: 20px !important;}
    #bodyHeader .menuHaut {font-size: 14px;border-width: 0px 0px 0px 0px}
    #bodyHeader .bannierHaut {height: inherit;}
    #bodyHeader .menuHaut span {display: block;}
    #bodyHeader .menuBas {font-size: 14px;overflow: none;position: absolute;overflow: visible;border-width: 0px 0px 0px 0px;}
    #bodyHeader .menuBas .menuTitreLig:hover {border-width: 0px 0px 0px 0px;}
    #bodyHeader .menuBas .burgerMenu {display: block !important;}
    #bodyHeader .menuBas .menuTitre {display: none;}
    #bodyHeader .menuBas .affMenu {display: inline-grid !important;background-color:rgba(255, 255, 255, 0.90);width: 100%;}
    #bodyHeader .menu {line-height: 1.2;margin-top: 20px;}
    #bodyHeader .qualibatImg {display: none;}
    #bodyHeader .blocSoc {font-size: 10px;}
    #bodyHeader .blocSocAdrImg {width: 6%;}
    #bodyHeader .blocSocMailImg {width: 6%;}
    #bodyHeader .blocSocTelImg {width: 6%;}
    #banmenu {display: none;}
    #banniere {display: none;}
    #presentation .present {padding: 0 30px;}
    #presentation .present .boutonDec{margin-bottom: 0;}
    #presentation .present .presTitre h2 {text-align: center;}
    #presentation .present .presContenu h2 {text-align: left !important;}
    #presentation .present .presContenu p {text-align: left !important;}
    #presentation .categorie {padding: 0 30px;}
    #presentation .categorie .catContenu h2 {text-align: center;}
    #presentation .catImageD, #presentation .catImageG {text-align: center;margin-bottom: 20px;}
    #presentation .cadreImgG, #presentation .cadreImgD{display: none;}
    #contact h2 {font-size: 20px;}
    #contact .bg-contact form {padding: 0px 30px;}
    #contact .bg-contact form .g-recaptcha {float: left;}
    #contact .bg-contact .nameFile {margin-top: 20px;width: 100% !important;}
    #contact .bg-contact form input[type="button"] {width: 100%;}
    #contact .bg-contact form input[type="submit"] {margin-top: 10px;width: 100%;margin-bottom: 20px;}
    #galImage .rowButton button {font-size: 8px;padding: 5px 10px;margin: 5px;width: 60%;}
    #galImage .rowGallery {padding: 0px 20px;}
    #galImage .rowGallery a {width: 150px;height: 112px;}
    #footer .mentlegale {text-align: center;margin: 10px 0;}
    #footer .dsoft span {display: none;}
    #footer .dsoft img {width: 15%;}
}
@media screen and (max-width: 575px){
    #bodyHeader .blocSocAdrImg {width: 10%;}
    #bodyHeader .blocSocMailImg {width: 10%;}
    #bodyHeader .blocSocTelImg {width: 10%;}
    #galImage .rowGallery a {width: 147px;height: 100px;}
    #rc-imageselect, #contact .bg-contact form .g-recaptcha {transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:25% 0;-webkit-transform-origin:25% 0;}
} 


/*  ************ GESTION DU BURGER MENU ************
*/
#bodyHeader .menuBas .burgerMenu {display: none;position: fixed;float: left;height: 46px;width: 50px; margin-left: 0px;background-color: #54aad6;z-index: 20;}
#bodyHeader .menuBas .burgerMenu span {background: white none repeat scroll 0 0;display: inline-block;height: 3px;left: 10px;position: absolute;width: 30px;}
#bodyHeader .menuBas .burgerMenu span.un {top: 11px;}
#bodyHeader .menuBas .burgerMenu span.deux {top: 21px;}
#bodyHeader .menuBas .burgerMenu span.trois {top: 31px;}
#bodyHeader .menuBas .active span.un {animation: ease .7s spa1 forwards;} 
#bodyHeader .menuBas .not-active span.un {animation: ease .7s spa1n forwards;}
#bodyHeader .menuBas .active span.deux {animation: ease .7s spa2 forwards;}
#bodyHeader .menuBas .not-active span.deux {animation: ease .7s spa2n forwards;}
#bodyHeader .menuBas .active span.trois {animation: ease .7s spa3 forwards;}
#bodyHeader .menuBas .not-active span.trois {animation: ease .7s spa3n forwards;}
#bodyHeader .menuBas .burgerMenu:hover {cursor: pointer;}
@keyframes spa1 {
    0% {top: 11;transform: rotate(0);}
    50% {top: 21px;transform: rotate(0);}
    100% {top: 21px;transform: rotate(45deg);}
}
@keyframes spa1n {
    0% {top: 21px;transform: rotate(45deg);}
    50% {top: 21px;transform: rotate(0deg);}
    100% {top: 11px;transform: rotate(0deg);}
}
@keyframes spa2 {
    50% {transform: scale(0);}
    100% {transform: scale(0);}
}
@keyframes spa2n {
    0% {transform: scale(0);}
    50% {transform: scale(0);}
    100% {transform: scale(1);}
}
@keyframes spa3 {
    0% {top: 31;transform: rotate(0);}
    50% {top: 21px;transform: rotate(0);}
    100% {top: 21px;transform: rotate(135deg);}
}
@keyframes spa3n {
    0% {top: 21px;transform: rotate(135deg);}
    50% {top: 21px;transform: rotate(0);}
    100% {top: 31;transform: rotate(0);}
}
