/* BODY */
body {margin: 0 auto;padding: 0;-webkit-font-smoothing: antialiased;font-family: 'Roboto', sans-serif;font-weight: 400;}
.mr-auto{margin: auto;}

/* LOADER */
.loader-wrap {position: fixed;top: 0;left: 0;z-index: 100;background: #fff;width: 100%;height: 100%;}
.loader-wrap.hide {-webkit-animation: 0.8s loaderOut ease-in-out forwards;-moz-animation: 0.8s loaderOut ease-in-out forwards;-ms-animation: 0.8s
loaderOut ease-in-out forwards;-o-transition: 0.8s loaderOut ease-in-out forwards; animation: 0.8s loaderOut ease-in-out forwards;}
.loader-wrap .loader {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 100px;height: 100px;}
.loader-wrap .loader img {width: 100%;-webkit-animation: 2.4s
loader ease-in-out infinite;-moz-animation: 2.4s
loader ease-in-out infinite;-ms-animation: 2.4s
loader ease-in-out infinite;-o-transition: 2.4s
loader ease-in-out infinite;animation: 2s
loader ease-in-out infinite;}
@-webkit-keyframes loader{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@-moz-keyframes loader{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@-o-keyframes loader{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes loader{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@-webkit-keyframes loaderOut{0%{opacity:1}100%{opacity:0;z-index:-10}}
@-moz-keyframes loaderOut{0%{opacity:1}100%{opacity:0;z-index:-10}}
@-o-keyframes loaderOut{0%{opacity:1}100%{opacity:0;z-index:-10}}
@keyframes loaderOut{0%{opacity:1}100%{opacity:0;z-index:-10}}

/* Reset arrow numeric input */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* NEWS BANNER */
.news {display: flex;justify-content: center;align-items: center;color: #FFF;font-size: .9rem;font-weight: 500;background: linear-gradient(45deg, #ce0c21 0%, #ce0c21 50%, #ce0c21 100%);padding: 10px;}
.news span:hover{color: white !important; text-decoration: none}


/* a */
a {color: white !important;text-decoration: none;-webkit-transition: color 0.2s ease-in-out;-moz-transition: color 0.2s ease-in-out;-o-transition: color 0.2s ease-in-out;transition: color 0.2s ease-in-out;}
a:hover {color: white !important;text-decoration: none !important;-webkit-transition: color 0.2s ease-in-out;-moz-transition: color 0.2s ease-in-out;-o-transition: color 0.2s ease-in-out;transition: color 0.2s ease-in-out;}
a.colorRed{ color:#ce0c21 !important;}
a.colorRed:hover{ color:#000 !important;}

/* Bouton */
.btn {display: inline-block;text-decoration: none;cursor: pointer;text-align: center;font-size: .875rem;font-weight: 500;border-radius: 2px;padding: 11px 15px;min-width: 150px;
    -webkit-transition: opacity 0.4s ease;-moz-transition: opacity 0.4s ease;-ms-transition: opacity 0.4s ease;-o-transition: opacity 0.4s ease;transition: opacity 0.4s ease;}
.btn:hover {opacity: 0.9;}
.btn-small {padding: 7px 15px;min-width: 100px;}
.btn-std {background: linear-gradient(45deg, #ce0c21 0%, #ce0c21 50%, #ce0c21 100%);color: #FFF;     box-shadow: 0 0 9px 3px rgba(206,12,33,0.3);}
.btn-light {color: #ce0c21 !important; border: 1px solid rgba(206, 12, 33, 0.3);}
.buttonAlone{width: 100%; text-align: center;}
.slide-btn{ margin-bottom: 10px}
/* HEADER */
header {position: fixed;top: 0;z-index: 40;width: 100%;}


/* FOOTER */
footer {background-color: #242633;padding: 50px 20px 20px 20px;}
.footer-container{ margin: auto;font-size: .8rem;font-weight: 500;line-height: 1.2;color: rgba(255,255,255,0.7);}
.footer-top{display: flex; justify-content: space-between;}
.footer-top .footer-top-left .logo{width: 140px;}
.footer-top .footer-top-left {font-size: .87rem;font-weight: 300;color: #FFF;width: 320px;flex-shrink: 0; line-height: 21px;}

.footer-top .footer-top-right {flex-shrink: 1;display: flex;}

.footer-top .footer-top-right .cat{    display: flex;flex-direction: column;align-items: baseline;color: #FFF;flex-basis: calc(28% - 60px);margin: 0 30px;}
.footer-top .footer-top-right .cat:first-child {flex-grow: 1;}
.footer-top .footer-top-right .cat a {display: block;color: rgba(255,255,255,0.6) !important;margin-bottom: 15px;}
.footer-top .footer-top-right .cat a:hover {color: rgba(255,255,255,1) !important;}
.footer-top .footer-top-right .cat .title {font-weight: 700;margin: 0;margin-bottom: 20px;line-height: 1;font-size: .875rem;color: white;}

.footer-bottom{ display: flex;justify-content: space-between;align-items: center;padding: 25px 0 5px 0; margin-top: 30px;border-top: 1px solid #ffc926;}
.footer-bottom .copyright img {width: 24px;margin-right: 10px;}
.footer-bottom .copyright p {}
.footer-bottom .copyright{    display: flex;align-items: center;}
.footer-bottom .legals {display: flex;justify-content: flex-end;align-items: center;}
.footer-bottom .legals a {margin-left: 15px; color: rgba(255,255,255,0.6) !important;}
.footer-bottom .legals a:hover {color: rgba(255,255,255,1) !important;}

.socials{}
.socials a{padding: 10px; color: white;}
.socials a i{ font-size: 1rem}
.socials .facebook{ padding-left:0;}
.socials .facebook:hover{ color:#3B5998 !important;}
.socials .instagram:hover{ color:#f14b11 !important;}
.socials .twitter:hover{ color:#33ccff !important;}
.socials .linkedin:hover{ color:#0077b5 !important;}


/* Wrapper */
.wrapper{max-width: 1100px; margin: auto;}

.greyBlock{background: #f9f9f9;padding-bottom: 40px;}
.greyBlock .serviceContainer h4 {background: #ffffff;}

/* Divers */
h2 strong,h3 strong{ font-weight: 900; color: #cb0d21; }
.smallBottom{ margin-bottom: 5px !important;}
.smallTop{ margin-top: 5px !important;}
/* Page-Container */
.content{ padding-top: 101px}
.pageTitle{ width: 70%; margin: auto; padding: 50px 0; text-align: center; color: #0b0b0b}
.pageTitle h1, .pageTitle h2{color: #242633; font-weight: 500; font-size: 2rem}
.pageTitle h1 strong, .pageTitle h2 strong{ font-weight: 900; color: #cb0d21; }
.pageTitle p{font-weight: 400; line-height: 23px;}


/* banner-clients */
.banner-clients{max-width: 1920px; margin: 30px auto 30px; overflow: hidden;}
.banner-clients h5{text-align: center; font-size: 2rem; margin-bottom: 40px; font-weight: 500; overflow: hidden;}
.banner-clients h5 strong{ color: #ce0c21;}
.banner-clients .scrolling-wrapper img{ margin-right:30px;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease}
.banner-clients .scrolling-wrapper:hover .first {animation-play-state: paused;}
.banner-clients .scrolling-wrapper { width: 2000px; height: 100px; margin-bottom: 0; overflow: hidden}
.banner-clients .first {
    -webkit-animation: bannermove 60s linear infinite;
    -moz-animation: bannermove 60s linear infinite;
    -o-animation: bannermove 60s linear infinite;
    animation: bannermove 60s linear infinite;
}
@keyframes bannermove {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -2000px;
    }

}
@-moz-keyframes bannermove {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -2300px;
    }

}
@-webkit-keyframes bannermove {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -2300px;
    }

}
@-ms-keyframes bannermove {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -2300px;
    }

}
@-o-keyframes bannermove {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -2300px;
    }

}

/* NewsList */
#newslist h5{text-align: center; font-size: 2rem; margin-bottom: 40px; font-weight: 500; overflow: hidden;}
#newslist h5 strong{ color: #ce0c21;}

/* nav */
nav {position: relative;z-index: 40; background-color: #FFF;box-shadow: 0 0 50px rgba(44,48,55,0.07);}
.nav-mobile {display: none;}
.nav-wrap {max-width: 1100px;display: flex;justify-content: space-between;align-items: center;margin: auto;}
nav .logo, nav .logo img {height: 45px;}
.nav__links {display: flex;justify-content: space-between;align-items: center;}
.nav__links .link {color: rgba(44,48,55,0.8) !important;font-size: .875rem;font-weight: 500;text-decoration: none;margin: 0 15px; line-height: 70px;-webkit-transition: color 0.2s ease-in-out;-moz-transition: color 0.2s ease-in-out;-o-transition: color 0.2s ease-in-out;transition: color 0.2s ease-in-out;}
.nav__links .link:hover {color: #ce0c21 !important;font-size: .875rem;font-weight: 500;text-decoration: none;margin: 0 15px;-webkit-transition: color 0.2s ease-in-out;-moz-transition: color 0.2s ease-in-out;-o-transition: color 0.2s ease-in-out;transition: color 0.2s ease-in-out;}
.nav__links .link.link--dropdown i {display: inline-block;font-size: 1rem;color: #ce0c21;vertical-align: middle;margin-left: 5px; transition: transform 150ms ease;}
.nav__links .link.link--bold {color: #2C3037;font-weight: 700;margin-right: 30px;}
.separator--rectangle {display: inline-block;height: 10px;width: 2px;margin: 0 10px;background-color: rgba(44,48,55,0.15);}

.dropdown {position: relative;display: inline-block;}
.dropdown-content { visibility: hidden; position: absolute; top:80px; background-color: #fff;min-width: 300px;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);z-index: 1; padding: 10px; opacity: 0;}
.dropdown-content a {color: rgba(44,48,55,0.8) !important; padding: 12px 16px;text-decoration: none;display: block; font-size: .875rem;}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {visibility: visible; opacity: 1; top:55px; transition: visibility 0s, all 150ms ease-in-out }
.dropdown:hover .link.link--dropdown i  {transform: rotate(180deg);}
.dropdown:hover .dropbtn {background-color: #3e8e41;}

.mobileMenu{visibility: hidden; opacity: 0; transition: all 0.4s ease-in-out;bottom: 0;overflow: auto;width: 100%;background-color: #FFF;position: fixed;z-index: 30;height: 100%;top: 70px;
    -webkit-transform: translateY(-30px);-moz-transform: translateY(-30px);-ms-transform: translateY(-30px);-o-transform: translateY(-30px);transform: translateY(-30px);
    -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;
}
.mobileMenuVisible{visibility: visible;opacity: 1;
    -webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);
}
.mobile-link {display: block;padding: 25px 30px;border-bottom: 1px solid rgba(44,48,55,0.15);font-weight: 500;text-transform: uppercase;color: rgba(44,48,55,1) !important;}
.mobile-link i{float: right; color: #ce0c21;font-size: 1.3rem;}
.mobile-menu-boutons{margin: 20px;}
.mobile-menu-boutons .btn{ width: 100%; padding: 11px 0; margin-bottom: 20px;}


/* SLIDER */
video {width: 100%; max-height: 100%; object-fit: cover; position: absolute; z-index: -1}

.slider {width: 100%;height: 700px;margin: 0;position: relative;}
.slide1 {-webkit-animation-delay: 0s;-moz-animation-delay: 0s;-o-animation-delay: 0s;animation-delay: 0s;}
/*.slide1 {background: url(../images/slide/vigneron2.jpg) no-repeat center/cover;-webkit-animation-delay: 0s;-moz-animation-delay: 0s;-o-animation-delay: 0s;animation-delay: 0s;}*/
.slide2 {background: url(../images/slide/vigneron4.jpg) no-repeat center/cover;-webkit-animation-delay: 12s;-moz-animation-delay: 12s;-o-animation-delay: 12s;animation-delay: 12s;}
.slide3 {background: url(../images/slide/vigneron3.jpg) no-repeat center/cover;-webkit-animation-delay: 20s;-moz-animation-delay: 20s;-o-animation-delay: 20s;animation-delay: 20s;}
.slide1,.slide2,.slide3 {position: absolute;width: 100%;height: 100%;opacity:0;
    -webkit-animation-name: fade;-moz-animation-name: fade;-o-animation-name: fade; animation-name: fade;
    -webkit-animation-duration: 32s;-moz-animation-duration: 32s;-o-animation-duration: 32s; animation-duration: 32s;
    -webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;-o-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
@-webkit-keyframes fade {
    0%   { opacity: 0; }
    11.11%   { opacity: 1 ;z-index:1;}
    33.33%  { opacity: 1;}
    44.44%  { opacity: 0;}
    100% { opacity: 0; ; z-index:0;}
}

@-moz-keyframes fade {
    0%   { opacity: 0; }
    11.11%   { opacity: 1 ;z-index:1;}
    33.33%  { opacity: 1;}
    44.44%  { opacity: 0;}
    100% { opacity: 0; ; z-index:0;}
}

@-o-keyframes fade {
    0%   { opacity: 0; }
    11.11%   { opacity: 1 ;z-index:1;}
    33.33%  { opacity: 1;}
    44.44%  { opacity: 0;}
    100% { opacity: 0; ; z-index:0;}
}

@keyframes fade {
    0%   { opacity: 0; }
    11.11%   { opacity: 1 ;z-index:1;}
    33.33%  { opacity: 1;}
    44.44%  { opacity: 0;}
    100% { opacity: 0; ; z-index:0;}
}

.slideText{max-width: 1100px;margin: auto;overflow: hidden;padding: 100px 0 0 40px;color: white;}
.slideText h2{max-width: 600px;line-height: 40px; font-family: 'Domine', serif; font-size: 2rem; text-shadow: 0 0 4px #000;}
.slideText p{max-width: 500px; line-height: 20px; padding-bottom: 15px; text-shadow: 0 0 7px #000;}

/* PAGE MENTIONS LEGALES */
.textLegals{max-width:750px ; font-size: .9rem; margin: auto; text-align: justify;margin-bottom: 50px;}
.textLegals h3{ margin-top: 30px;}
.textLegals a, .textLegals{ color: rgb(36, 38, 51) !important;}

/* FORMS */
.contactForm{ width: 100%; display: flex; justify-content: center;}
.contactForm .infos{ width: 45%; background: #cccccc;}
.contactForm .formContent{width: 45%;background: #fff;box-shadow: 0 0 15px #cccccc;padding: 30px;display: flex;justify-content: space-between;flex-wrap: wrap;}
.contactForm .formContent input{ outline: none; border: 1px solid #d7d7d7; color: #aaaaaa; border-radius: 4px;}
.contactForm .formContent input:focus{ border: 1px solid #ce0c21;}
.contactForm .colorRed{ color:#ce0c21;}
::placeholder {color: #aaaaaa;opacity: 1;}
.contactForm .formContent input, .contactForm .formContent div{ padding: 12px 10px;margin: 10px; width: 40%;}
.contactForm .formContent .mention{ margin-left: 0; font-size: .7rem}
.contactByPhone{ font-size: 1rem; width: 100%; text-align: center;}
.contactByPhone a{ font-weight: bold; color: #000 !important;}
.contactForm .error{ width: 100%;text-align: center;color: #ce0c21;font-weight: bold; display: none;}
.contactForm .success{ width: 100%;text-align: center;color: #26ce0c;font-weight: bold; display: none;}

/* Page calculateur */
/* FORMS */
.calculForm{ width: 100%; display: flex; justify-content: left; margin-bottom: 50px}
.calculForm .infos{ width: 100%; background: #cccccc;}
.calculForm .formContent{width: 100%;background: #fff;box-shadow: 0 0 3px #cccccc;padding: 20px;display: flex;justify-content: space-between;flex-wrap: wrap;flex-direction: column}
.calculForm .formContent input, .calculForm .formContent select{ outline: none; border: 1px solid #d7d7d7; color: #5f5f5f; border-radius: 4px;}
.calculForm .formContent input:focus{ border: 1px solid #ce0c21;}
.calculForm .colorRed{ color:#ce0c21;}
::placeholder {color: #aaaaaa;opacity: 1;}
.calculForm .formContent input, .calculForm .formContent div, .calculForm .formContent select{ padding: 12px 0;margin: 5px 0; width: 100%; text-indent: 10px;}
.calculForm .formContent .mention{ margin-left: 0; font-size: .7rem}
.calculForm label{margin-top:10px;}
.calculForm .btn{margin-top:20px !important;}
.calculForm #result{overflow: hidden}
.calculForm #showresult{text-indent:0 !important; border-radius: 20px;;}
/* Page fonctionnalités */
.fontionnalite{text-align: center}
.fontionnalite a.btn{margin-top: 50px;padding: 15px 30px; text-align: center}
.fonction{display: flex; flex-wrap: wrap; flex-direction:row; justify-content: space-around; width: 100%; position: relative; margin: auto; align-items: center; margin-bottom: 100px;}
.fonction_last{ margin-bottom: 30px !important;}
.fonction_desc{width:45%; order: 0;}
.fonction_desc h2{font-weight: 500 !important;}
.fonction_desc span{color: #ce0c21; font-weight: 900 !important;}
.fonction_img{ width: 45%; order: 0}
.fonction_img img{ width: 100%;border-radius: 10px;}
.fonction_desc ul{ width: 100%; margin-left: 0; list-style-type: none; padding-inline-start: 0 !important;}
.fonction_desc ul li{margin-top: 15px;line-height: 20px; border-left: 2px solid #ce0c21 ; padding-left: 10px;}



/* Piliers Home Page */
.pilierContainer{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; max-width: 70%;margin-left: auto;margin-right: auto; position: relative;}

.pilierContainer h4{  width: 130px; text-align: center; font-weight: 500; color: #2C3037 !important; cursor: pointer;background: white;z-index: 30;padding: 0 9px; margin: 0; position: relative}
.pilierContainer h4.selected{ color:#ce0c21 !important; }
.pilierContainer h4.selected::after{content: '';position: absolute;left: 47%;top: 120%;width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid #ce0c21;clear: both;}
.pilierContainer div{ width: 100%;overflow: hidden;height: 50px;text-align: center;font-weight: 500;color: #2C3037 !important;line-height: 40px;position: absolute;left: 0;top: 0;}
.pilierInfos{  position: fixed; display:flex; flex-direction: row; flex-wrap: wrap;  margin-top: 15px; opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;-moz-transition: opacity 0.5s ease-in-out;-o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out; margin-bottom: 30px; justify-content: center;}
.pilierInfos.visible{ position: relative; opacity: 1; }
.pilierInfos p{ width: 37%; margin: 0; align-self: center; line-height: 28px;}
.pilierInfos i{ margin-right: 5px; }
.pilierInfos img{ width: 440px; align-self: center;}

/* Services Home Page */
.serviceContainer{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}
.serviceContainer h4{ color: #242633; width: 22%;text-align: center;font-weight: normal;margin: 0 20px;padding: 15px;background: #c3c3c31a;border-radius: 10px;line-height: 25px;box-shadow: 0 0 12px 0 #cccccc57;}
.serviceContainer h4 span{ margin-bottom: 10px; margin-top: 10px; font-weight: bold;}
.serviceContainer a{ margin-top: 50px;padding: 15px 30px;}

/* Reassurance */
.reassurance{ margin-top: 60px; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-evenly;}
.reassurance div{font-weight: 500; width: 250px; height: 200px; background: url("../images/bg-reassurance/bg-reassurance.png") center no-repeat;    text-align: center;display: flex;flex-direction: column;justify-content: center;}
.reassurance div.bis{ background: url("../images/bg-reassurance/bg-reassurance-2.png") center no-repeat; }
.reassurance div.ter{ background: url("../images/bg-reassurance/bg-reassurance-3.png") center no-repeat; }
.reassurance h6{margin: 0;font-size: 1.2rem; }
.reassurance p{ margin: 0 !important;}
.reassurance p.mid{ font-size: 4.5rem;color: #ce0c21; font-family: 'Domine', serif; font-weight: bold;}

/* Tarifs */
.tarifsContainer{display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-evenly; margin-bottom: 50px; text-align: center}
.tarifsContainer .priceBlock{width: 280px;box-shadow: 0 0 7px #ccc; height: 435px;}
.tarifsContainer p{ margin: 0}
.tarifsContainer .title{margin: 0;padding: 15px 0;font-weight: bold;font-size: 1.3rem;color: white;}
.tarifsContainer .price{font-size: 4rem; letter-spacing: -6px;}
.tarifsContainer .underPrice{font-size: 1rem;margin: -10px 10px 10px 10px;border-bottom: 1px solid #3cf;padding-bottom: 10px;}
.tarifsContainer .color1{background: #33ccff;}
.tarifsContainer .color2{background: #ce0c21 ;}
.tarifsContainer .color3{background: #fcd118;}
.tarifsContainer .lineColor1{border-bottom: 1px solid  #33ccff;}
.tarifsContainer .lineColor2{border-bottom: 1px solid #ce0c21 ;}
.tarifsContainer .lineColor3{border-bottom: 1px solid #fcd118;}
.tarifsContainer .infos{margin: 10px;}
.tarifsContainer h4{ width: 100%;padding: 0;font-weight: normal;}
.tarifsContainer .offer{font-weight: bold;color: #242633;}
.tarifsContainer .recommanded{height: 500px;width: 300px;margin-top: -20px;}
.mentions{ width: 100%; text-align: center; font-weight: normal; font-size: .8rem; margin-bottom: 50px; font-style: italic}

/* Tarifs Details */
.offerContainer{ display: flex; flex-wrap: nowrap; justify-content: space-between; margin-bottom: 40px;}
.offerContainer .functionContainer{ width: 30% }
.offerContainer .headerTableau{ width: 100%; height: 100px;}
.offerContainer .functionContainer h4{color: #ce0c21; font-size: 1.2rem; margin: 0 0 10px 0;}
.offerContainer .functionContainer h5{ color: #000;margin: 0;line-height: 40px;font-size: .9rem;font-weight: normal;border-bottom: 1px solid #ddd; display: flex;justify-content: space-between;  }
.offerContainer .functionContainer i{  line-height: 40px; color: #ccc; font-size: 1.1rem; display: none }
.offerContainer .functionContainer .separator{ margin-top: 30px;}
.offerContainer .tableau{ width: 20%;}
.offerContainer .tableau h4{ padding: 10px;color: #fff;text-align: center;margin-bottom: 15px;}
.offerContainer .tableau p{ color: #000;margin: 0;line-height: 37px;font-size: .9rem;background: #f6f6f6;text-align: center; border-bottom: 2px solid white;border-top: 2px solid white;}
.offerContainer .tableau p.price{background: none;font-size: 1.4rem; margin-bottom: 15px;}
.offerContainer .tableau .separator{margin-top: 63px;}
.offerContainer .tableau i{ color: #ce0c21;}
.offerContainer .tableau i.fa-times{ color: #000;}
.offerContainer .color1{background: #33ccff;}
.offerContainer .color2{background: #ce0c21 ;}
.offerContainer .color4{background: #ce0c21 ;}
.offerContainer .color3{background: #fcd118;}

/* WineLabel */
#winelabelcontaineraa.offerContainer{justify-content: center; }
#winelabelcontainer.offerContainer .functionContainer{ width: 70% }
.qrdemo{ width: 100%; text-align: center}
.qrdemo p{ margin-top: -10px;}

    /* Questions Fréquentes */
.questions{ width: 100%; background: #f6f6f6; color: rgba(44,48,55,0.8) !important; margin: 50px 0 0; padding: 50px 0;}
.questions h2{text-align: center;margin-bottom: 50px;}
.questions .questionContainer{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between;}
.questions .question{ width: 30%}
.questions .question p{font-size: 1rem;line-height: 22px;text-align: justify;}

/* Banner Contact Us */
.bannerContactUs{    text-align: center;width: 100%;padding: 30px 0;background: linear-gradient(45deg, #ce0c21 0%, #ce0c21 50%, #ce0c21 100%);color: white;font-size: 1.5rem;font-weight: bold;}
.bannerContactUs a{ text-decoration: underline}

/* A Propos */
.apropos{text-align: justify;}
#histoire , #equipe {padding: 10px 0 !important;}
#mission {padding-bottom: 10px !important;}
.teamPicContainer{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between}
.teamPicContainer div {position: relative;}
.teamPicContainer div img{ width: 240px; padding: 5px;}
.teamPicContainer div label{    position: absolute;left: 20px;bottom: 20px;color: white;font-weight: 400;}

/* blogStructure */
#blogStructure{ display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between}
#blogStructure iframe{ width: 100% !important;}
#blogStructure .leftCol {text-align: left !important; font-weight: normal !important; margin: 0; width: 67%}
#blogStructure .pageTitle {text-align: left !important; font-weight: normal !important; margin: 0; width: 67%}
#blogStructure .legend {color: rgba(0,0,0,.5); font-size: .9rem; font-weight: 400; margin-bottom: 20px; line-height: normal;}
#blogStructure .tema { background-color: #ce0c21; padding: 10px 20px; text-align: center; color: white; font-weight: 500; line-height: normal;}
#blogStructure h2 {color: #ce0c21; font-size: 1.7rem; clear: both;}
#blogStructure p {display: inline-block; margin: 0; line-height: 28px; text-align: justify}
#blogStructure img { width: 250px; float: left; margin-right: 20px; }
#blogStructure.winelabelstructure img { width: 60%; float: left; margin-right: 20px; }
#blogStructure .blogStructure-infos { clear:both;background-color: #ce0c21; padding: 20px; text-align: center; color: white; margin-top: 25px;}
#blogStructure p a { text-decoration: underline; color:#ce0c21 !important; font-weight: bold; }
#blogStructure span a { text-decoration: underline; color:#fff !important; }
#blogStructure a:hover { text-decoration: none;}

#blogStructure .rightCol {width: 31%; padding: 50px 0;}
#blogStructure .rightCol .encart{background-color: whitesmoke;padding: 10px 20px 20px; margin-bottom: 20px; display: flex;flex-direction: column;}
#blogStructure .rightCol h5{margin:10px 0 0 0;font-size: 1.1rem;}
#blogStructure .rightCol span a{margin-top:20px; text-decoration: none; padding: 10px 30px;}
#blogStructure .rightCol p{    margin-top: 10px; width: 100%; text-align: left; font-size: 0.95rem}
#blogStructure .rightCol .encartLinks a { color: black !important; text-decoration: none; transition: all 150ms ease;}
#blogStructure .rightCol .encartLinks a:hover { color: #ce0c21 !important; text-decoration: underline;}

#blogStructure .blog-header{ padding:50px 0 20px 0;}
#blogStructure .blog-header h1{ font-size: 2.7rem; line-height: 55px; margin-top: -7px;}
#blogStructure .blog-header p{ margin-bottom: 15px;}
#blogStructure mark{background-color: #ce0c21;color: white;padding: 5px 10px;}
.cardList{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
#newslist{padding-bottom:50px}
#newslist .cardList .card{display: flex; flex-direction: column;  justify-content: space-evenly; width: 45%; background: whitesmoke;padding: 15px; margin-bottom: 15px;}
#newslist .cardList .card img{width: 100% !important;height: 270px !important;object-fit: cover !important;}
.cardList .card{display: flex; flex-direction: column;  justify-content: space-evenly; width: 100%; background: whitesmoke;padding: 15px; margin-bottom: 15px;}

#blogStructure .cardList .card img{width: 100% !important;height: 450px !important;object-fit: cover !important;}
#blogStructure .cardList .card h2{ font-weight: 600; font-size: 1.2rem !important;}

#realisation{ margin-top: 50px}
#realisation .cardList .card{display: flex; flex-direction: column;  justify-content: space-evenly; width: 45%; background: rgb(255, 255, 255);padding: 15px; margin-bottom: 15px;}
#realisation .cardList .card img{width: 100% !important;height: 270px !important;object-fit: cover !important;}
#realisation .cardList .card h3{font-size: 1.5rem}
#realisation .cardList .card small{font-weight: normal}

.cardList .card .cardFooter{border-top: 1px solid #ce0c21;margin-top: 20px;}
.cardList .card .cardDesc{margin-bottom: 20px !important;}
.cardList .card .cardCategory{ font-weight: 500; font-size: .8rem; padding-top: 10px; color: rgba(0,0,0,.5);}

.rating ul{padding:0;margin: 0; list-style-type: none;    display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;}
.rating ul li{ text-align: center; font-weight: bold}
.rating ul li .note{ margin: auto;   width: 160px;height: 160px;background: #ca0d21;line-height: 160px;color: white;font-weight: bold;border-radius: 50%;font-size: 50px;}


@media all and (max-width: 900px) and (orientation: portrait) {
    .content{ padding-top: 70px}

    .rating ul{padding:0;margin: 0; list-style-type: none; flex-direction: column;    display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;}

    /* Tarifs */
    .tarifsContainer{flex-direction: column; }
    .tarifsContainer .priceBlock{width: 100%;  margin-bottom: 30px; height: auto !important; padding-bottom: 15px;}
    .tarifsContainer .recommanded{ width: 100%;margin-top: 0;}

    /* Contact Forms */
    .contactForm{flex-direction: column-reverse;}
    .contactForm .infos{ width: 100%; height: 250px;}
    .contactForm .formContent{width: 100%;box-shadow: none;padding: 0; margin-bottom: 30px;}
    .contactForm .formContent input, .contactForm .formContent div{ margin: 10px 30px; width: 100%;}
    .contactForm .formContent .mention{text-align: center; font-size: .8rem; margin: auto;}
    .contactForm .contactByPhone{ font-size: .9rem; width: 100%; text-align: center;}

    .wrapper{width: 90%;}

    .pageTitle{ width: 100%; padding-bottom: 20px; padding-top: 20px; }
    .pageTitle h1, .pageTitle h2{font-size: 1.95rem !important;}

    /* Fonction */
    .fonction{display: flex; flex-direction:column;}
    .fonction_desc{width:90%;order: 0}
    .fonction_img{ width: 100%;order: 1}

    .news {display: none;}
    /*#slider-video {display: none;}*/

    .nav__links {display: none;}
    .nav-mobile {display: flex;}
    .nav-wrap {padding: 20px 30px;}
    .nav-mobile i{ font-size: 1.8rem; color: rgba(44,48,55,0.8) !important;}
    nav .logo, nav .logo img {height: 30px;}

    .banner-clients .scrolling-wrapper {width: 200%;}
    .banner-clients h5 {padding: 0 10px;}
    .banner-clients .scrolling-wrapper img { margin-right: 40px;}

    /* Slider */
    .slider{height: 350px;}
    video {width: 100%; height: 350px; object-fit: cover; position: absolute; z-index: -1}
    .slideText{max-width: 100%;padding: 0;}
    .slideText h2{max-width: 75%;line-height: 30px; font-size: 1.4rem; text-shadow: 0 0 0 #000; width: 70%; padding-left: 10px;}
    .slideText p{max-width: 75%; line-height: 20px; width: 70%; padding-left: 10px;}
    .slideText a{ margin-left: 10px;}


    /* FOOTER MOBILE */
    .footer-container{ margin: auto;font-size: 1rem;}
    .footer-top {flex-direction: column;}
    .footer-top .footer-top-right .cat { margin: 0 0 30px 10px;}
    .footer-top .footer-top-right .cat .title {font-size: 1rem; }
    .footer-top .footer-top-left {text-align: center; margin: auto}

    .footer-top .footer-top-left .socials {display: none; !important;}
    .footer-top .footer-top-right{/*flex-direction: column;align-items: flex-start;width: 100%;margin-top: 40px;*/display: none !important;}
    .footer-bottom {display: none !important;}

    .footer-bottom .copyright, .footer-bottom .legals,.footer-bottom {flex-direction: column;}
    .footer-bottom .copyright a, .footer-bottom .legals a {margin: 10px 0;}

    /* TEXT LEGALS */
    .textLegals{max-width:100% ; font-size: 1rem;}
    .textLegals h3{ margin-top: 30px;}

    /* Piliers Home Page */
    .pilierContainer{max-width: 100%;}
    .pilierContainer h4{  width: 40%; margin-bottom: 30px; border-left: 1px solid white}
    .pilierContainer h4.selected{ border-left: 1px solid #ce0c21}
    .pilierContainer h4.selected::after{ display: none}
    .pilierContainer div{ display: none;}

    .pilierInfos{ width: 100%}
    .pilierInfos.visible{  }
    .pilierInfos p{ width: 100%;}

    .pilierInfos img{display: none;}
    .pilierInfos a{ width: 100%; padding:7px 0 !important;}

    /* Services Home Page */
    .serviceContainer{ flex-direction: column; }
    .serviceContainer h4{ margin: 0 0 30px 0; width: fit-content}

    /* Services Home Page */
    .reassurance{ align-items: center; display: flex; flex-wrap: nowrap; flex-direction: column;}
    .reassurance div{ margin-bottom: 50px}

    /* Questions Fréquentes */
    .questions .questionContainer{ flex-direction: column;}
    .questions .question{ width: 100%}

    /* Tarifs Details */
    .offerContainer .functionContainer {width: 60%;}
    .offerContainer .tableau {width: 12%;}
     #winelabelcontainer.offerContainer .tableau {width: 20% !important;}
    .offerContainer .tableau h4 span{ display: none}
    .offerContainer .functionContainer i{  display: none;}
    .offerContainer .tableau p.price{line-height: 18px; font-size: .8rem; }

    /* Equipe */
    .teamPicContainer {flex-direction: column;flex-wrap: nowrap;}
    .teamPicContainer div img {width: 100%;padding: 0 0 10px 0;}

    /* BlogPage */
    #blogStructure{ display: flex; flex-wrap: wrap; flex-direction: column; }
    #blogStructure .pageTitle {width: 100%; padding-bottom: 20px; padding-top: 20px;}
    #blogStructure .rightCol {width: 100%; padding: 10px 0 0;}

    /* blogStructure */
    #blogStructure .blog-header h1{  margin-top: -20px;}
    #blogStructure .leftCol { width: 100%}
    .cardList .card { width: 100%;}
    #blogStructure img { width: 100% !important; float: none; margin-right: 0; margin-bottom: 20px }
    #blogStructure .cardList .card img {height: 200px !important;}

    #newslist .cardList .card, #realisation .cardList .card { width: 100%}
    #newslist .cardList .card img, #realisation .cardList .card img {width: 100% !important;height: 180px !important;object-fit: cover !important;}

}