.small{font-size: 0.85em; display: inline; line-height: 1.4em;vertical-align: baseline;}
.big{font-size: 1.15em; display: inline; line-height: 1.4em;vertical-align: baseline;}


/********************************************************
 *            .bloc
 *******************************************************/
.bloc{box-sizing: border-box;}
.bloc .bloc1{margin-top: 0.7%; margin-bottom: 0.7%;width: 100%}

.bloc2, .bloc3, .bloc4{display: inline-block; vertical-align: middle}
.bloc .bloc2{width: 48.75%; margin: 1.25%}
.bloc .bloc2:first-child{margin-left:0}
.bloc .bloc2:nth-child(2){margin-right:0}

.bloc .bloc2.bloc1-3{width: 32.5%; margin: 1.25%}
.bloc .bloc2.bloc1-3:first-child{margin-left:0}
.bloc .bloc2.bloc1-3:nth-child(2){margin-right:0}
.bloc .bloc2.bloc1-3.grand{width: 65%;}

.bloc .bloc3{width: 31.66%; margin: 1.25%; vertical-align: top}
.bloc .bloc3:first-child{margin-left:0}
.bloc .bloc3:nth-child(3){margin-right:0}

.bloc .bloc4{ width:23.125% ;margin:1.25%;}
.bloc .bloc4:first-child{margin-left:0}
.bloc .bloc4:nth-child(4){margin-right:0}


.bloc .bloc2 .bloc,.bloc .bloc3 .bloc, .bloc .bloc3>.bloc2,.bloc .bloc4 .bloc, .bloc .bloc4>.bloc2{width: 100%}





 .img img{max-width: 100%; width: 100%}
 img.lazyOver{height:100%; transition-property:opacity; transition-duration:1s;opacity:0;position:absolute; display:block}


/********************************************************
 *
 *******************************************************/
.bg_choice.col2_imgBloc, .bg_choice.col2_blocImg{ min-height:350px; padding: 0;display: flex; justify-content: flex-end;align-items: center; position: relative;}
.bg_choice.col2_blocImg{justify-content: flex-start;}
.bloc.col2_imgBloc>.bloc2, .bloc.col2_blocImg>.bloc2{width: 50%; margin: 0;padding: 0; color: #FFF; padding: 50px}
.col2_imgBloc>div.background, .col2_blocImg>div.background{min-height: 0;position: absolute; top: 0;left: 0;width: 50%; height: 100%;padding-bottom: 0;}
.col2_blocImg>div.background{left: auto;right: 0;}
.col2_imgBloc>div>*, .col2_blocImg>div>*{width: 100%}


/********************************************************
 *              blocapple3
 *******************************************************/
.bloc.bloc3apple .bloc1apple, .bloc3apple .bloc2apple{position: relative;margin:1%; background-color:#CCC; display: inline-block;vertical-align: middle}
.bloc.bloc3apple .bloc1apple{height: 0;padding-bottom:40%; width: 48%}
.bloc.bloc3apple .bloc2apple{height: 0;padding-bottom:40%; width: 98%}
.bloc.bloc3apple .background{position: absolute;top: 0;left: 0;width: 100%; height: 100%; min-height: 0; margin-top: 0;margin-bottom: 0;}

.bg_choice:not(table){display: block; min-height: 150px; padding: 40px 0; position: relative;}
.bg_choice > *:last-child{margin-bottom: 0;}

.bx-controls-direction{z-index: 3}

/********************************************************
 *            youtube
 *******************************************************/
.youtube:hover img{transform: scale(1.2);}
.youtube img{width: 100%; transition: transform .3s;}
.youtube{position: relative; cursor: pointer; overflow: hidden;}
.youtube img{min-width: 100%; max-width: 100%}
.youtube .fa-youtube-play{position: absolute;top:50%; left:50%; margin:-30px;font-size: 60px; color: #d32322;z-index: 1; text-shadow: 1px 1px rgba(255,255,255,0.2), -1px 1px rgba(255,255,255,0.2), 1px -1px rgba(255,255,255,0.2), -1px -1px rgba(255,255,255,0.2)}
.youtube .fa-youtube-play::after{content:""; display: block; width: 30px; height: 30px; background-color: rgba(255,255,255,0.8); top: 25%; left:25%; position: absolute;z-index: -1;}

/********************************************************
 *              video
 *******************************************************/
.video:hover > img{transform: scale(1.2);}
.video > img{width: 100%; transition: transform .3s;}
.video{position: relative; cursor: pointer; overflow: hidden;}
.video img{min-width: 100%; max-width: 100%}
.video .fa-play{position: absolute;top:50%; left:50%; margin:-25px;font-size: 50px; color: #FFF;z-index: 2; text-shadow: 0 0 5px #000}
.video .fa-play::after{content:""; display: block; width:90px; height: 90px;  border-radius:50%; border:5px solid #FFF; background-color: rgba(25,25,25,0.4); position: absolute;top:50%; left:50%;z-index: -1; transform: translate(-50%, -50%)}
.video .fa-play::before{margin-left: 10%}
.video>video, .background>video, .bg_choice>video{position: absolute;top: 0;left: 0; height: 100%;z-index: 3}

body main > div  .bg_choice > video.MeFullSize, body main > div > span.content .bg_choice > video.MeFullSize,
body main > div  .background > video.MeFullSize, body main > div > span.content .background > video.MeFullSize{object-fit: cover; width: 100%; z-index: 0; max-width: 100%}
.background>*, .bg_choice>*{position: relative; z-index: 1}
.video video + img + i{display: none;}
/********************************************************
 *            lightBox
 *******************************************************/
a.lightbox{overflow: hidden;display: inline-block; position: relative;}
a.lightbox img{transition: transform .3s;}
a.lightbox:hover img{transform: scale(1.2);}
.featherlight style.featherlight-inner{display: none;}

/********************************************************
 *            calendar
 *******************************************************
.calendar .ui-datepicker, .ui-datepicker-calendar, .ui-datepicker-inline{ width: 100%; border: none;}
.calendar .events{display: none;}
.ui-datepicker-header{ text-align: center; }
.calendar .ui-widget-header{border: none; background: none;}
.ui-datepicker-title{text-transform: uppercase; font-weight: bold; font-size: 1.3em;}
.ui-datepicker-prev{float: left;}
.ui-datepicker-next{float: right;}
.ui-datepicker-prev, .ui-datepicker-next{color: #888; font-size: 0;}
.calendar .ui-datepicker .ui-datepicker-prev,
.calendar .ui-datepicker .ui-datepicker-next{position: relative; right: auto; bottom: auto; top:auto; bottom: auto; left: auto; width: 0; margin: 0 15px}
.ui-datepicker-prev::after, .ui-datepicker-next::after{font-size: 13px;  width:15px; height:15px; display: block; color: #888; border: 1px solid #888; border-radius: 50%; line-height: 15px; text-align: center; }
.ui-datepicker-prev::after{content:"<";}
.ui-datepicker-next::after{content:">";}
.calendar th{background: transparent; border: 0}
.calendar td{position: relative; font-size: 0; padding: 0; background: transparent; border: 0;text-align: center; vertical-align: middle;}
.calendar table a{position: absolute; width: 100%; height:100%; font-size: 15px; display: block; top: 0;left: 0;right: 0;bottom: 0; border-radius: 50%;text-decoration: none; cursor:default; color: #888; background: transparent !important; border: none !important}
.calendar a span{display: table !important; width: 100%; height:100%;}
.calendar a span mark{display: table-cell; vertical-align: middle; text-align: center; background: transparent; color: inherit;}
.calendar img{width: 100%; display: block;}
.calendar .eventIncal{}
.calendar .eventIncal a{ background: #a82323 !important; color: #FFF !important ; cursor: pointer !important}
.calendar .eventIncal a span, .eventIncal a span mark{color: inherit;}
.calendar table .ui-datepicker-current-day a{background: #000 !important; color: #FFF !important}
.calendar table .eventIncal.ui-datepicker-current-day a{background: orange !important ; color: #888 !important }
.calendar table, .calendar td, .calendar tr, .calendar th{background: transparent;}
.calendar tr:hover td{background: transparent;}
.calendar table th:first-child{text-align: center;}

/********************************************************
 *            round carre
 *******************************************************/
.img.round, .img.carre{overflow: hidden; padding-bottom: 100%; height: 0; position: relative; margin: auto;  min-height: 0;max-width: none;}
.img.round{border-radius: 50%; width: 78%;padding-bottom: 78%;}
.img.round .maskImg4edtit, .img.carre .maskImg4edtit{position: absolute; width: 100%; height: 100%; min-height: 0; top: 0;left: 0;}
.img.round img, .img.carre img{object-fit: cover;height: 100%;}
/********************************************************
 *            galleryImg
 *******************************************************/
.galleryImg li{ width:23.125% ;margin:1.25%; float: left; }
.galleryImg li:first-child,
.galleryImg li:nth-child(5), .galleryImg li:nth-child(9), .galleryImg li:nth-child(13), .galleryImg li:nth-child(17), .galleryImg li:nth-child(21), .galleryImg li:nth-child(23),
.galleryImg li:nth-child(29), .galleryImg li:nth-child(33), .galleryImg li:nth-child(37), .galleryImg li:nth-child(41), .galleryImg li:nth-child(45), .galleryImg li:nth-child(49){margin-left:0}
.galleryImg li:nth-child(4), .galleryImg li:nth-child(8), .galleryImg li:nth-child(12), .galleryImg li:nth-child(16), .galleryImg li:nth-child(20), .galleryImg li:nth-child(24),
.galleryImg li:nth-child(28), .galleryImg li:nth-child(32), .galleryImg li:nth-child(36), .galleryImg li:nth-child(40), .galleryImg li:nth-child(44), .galleryImg li:nth-child(48){margin-right:0}
.galleryImg li.img{ height: 0; position: relative; padding-top: 23.125%; overflow:hidden }
.galleryImg .maskImg4edtit{position: absolute; width: 100%; height: 100%; min-height: 0; top: 0;left: 0;}
.galleryImg li.img img{position: absolute; left: 50%; top: 50%; height: 100%;width: 100%;  object-fit: cover; transform: translate(-50%, -50%); -ms-transform: translateX(-50%) translateY(-50%)}
.galleryImg li.img i{top: 10px}
/********************************************************
 *            front effect
 *******************************************************/
.galleryImg li{background:rgb(0,0,0);}
.galleryImg li.img a::after{position: absolute; font-family:'FontAwesome'; content: "\f002"; top: 50%; left:50%; color: #000; z-index:2; color: #FFF; text-shadow: 1px 1px 2px #000 ; opacity: 0; font-size: 1px; margin:-1px;}
.galleryImg li img{ transition: all 200ms ease-in; transform: scale(1);  }
.galleryImg li img:hover{height: 120%;width: 120%; opacity: 0.6}
.galleryImg li.img a:hover::after{opacity: 1; font-size: 2em; margin:-0.5em; transition: all 300ms; }
.galleryImg li.img a{position: static;}
/********************************************************
 *            ico file
 *******************************************************/
.fichier{display: inline-block; vertical-align: top;line-height: 1em; text-align: center; margin-top:110px; width: 325px; position: relative;}
.fichier a{display: block; text-decoration: none; color: #FFF; }
.fichier a:after{z-index:2;font: normal normal normal 14px/1 FontAwesome; display: block; margin: auto; content:"\f0f6"; font-size: 35px;text-decoration: none; margin-bottom: 10px; position: absolute; bottom:13px; left:50%; margin-left:-17px;  margin-right:-17px; color: #000}
.fichier a[href$=".pdf"]::after{color: #b30606; content: "\f1c1"}
.fichier a[href$=".xls"]::after, .fichier a[href$=".xlsx"]::after{color: #36bf33; content: "\f1c3"}
.fichier a[href$=".doc"]::after, .fichier a[href$=".docx"]::after{color: #3354bf; content: "\f1c2"}
.fichier a[href$=".ppt"]::after, .fichier a[href$=".pptx"]::after{color: #ffae00; content: "\f1c4"}
.fichier a[href$=".zip"]::after, .fichier a[href$=".rar"]::after { content: "\f1c6"}
.fichier::after{content:"\f15b"; font: normal normal normal 14px/1 FontAwesome; margin: auto; font-size: 35px;text-decoration: none; margin-bottom: 10px; position: absolute; bottom:13px; left:15px; margin-left:-17px;  margin-right:-17px; color: #FFF}
/********************************************************
 *            background
 *******************************************************/

.backgroundWrapper{padding-bottom: 35%; position: relative;}
.background, .background div.lazyOver{-webkit-background-size: cover; background-size: cover; min-height: 450px; position: relative; background-position: center center;padding: 50px; box-sizing:border-box;}
.background div.lazyOver{height:100%; top:0; left:0; width:100%;transition-property:opacity; transition-duration:1s;opacity:0;position:absolute; display:block; padding: 0;min-height: 0;}

.backgroundWrapper .background{top: 0;left: 0;width:100%; overflow:hidden; height: 100%; position: absolute; min-height: 0;padding: 0; margin: 0;}
.background, .bg_choice{background-size: cover; background-position: center center;}
.background.full, .bg_choice.full{background-size: 100% auto;}
.background.fixed, .bg_choice.fixed{background-attachment: fixed;}
body main > div  .bg_choice > .BgColorOverImg,
body main > div > span.content .bg_choice > .BgColorOverImg,
body main > div  .background > .BgColorOverImg,
body main > div > span.content .background > .BgColorOverImg{position: absolute;top: 0;left: 0;width: 100%; height: 100%; max-width: none; max-height: none; z-index: 0; pointer-events: none}
.background>*, .bg_choice>*{z-index: 1; position: relative;}
.PadTopHeight{padding: 0; padding-bottom: 35%; height: 0; min-height: 0}
.background .bigLinkOverAll{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1000; display: block;}


.slider .background{padding: 0; position: relative;}
.bloc1-3 .background, .bloc1 .background{ min-height:0; height: 0; padding: 0; padding-bottom: 70%}
.bloc1-3.grand .background{ padding-bottom: 35.5% }


/********************************************************
 *            button
 *******************************************************/
.button3{position: relative;transition-property: background, color; transition-duration: .5s;  background: #F08202; border:2px solid #F08202; padding: 5px 30px; color: #FFFFFF; display: inline-block; max-width: none; text-align: center;}
.button3 a, .button3 a:hover{transition:none; color:inherit; text-decoration: none; text-align: center;}
.button3 a::after{position: absolute; top: 0;right: 0;left: 0;bottom: 0; display: block;content: "";}
.button3:hover{background: #FFF; color: #F08202}

/********************************************************
 *            img Inline
 *******************************************************/
 .inlineBlock.img{display: inline-block;}
 .inlineBlock.img img{width: auto; max-width: 100%}

/********************************************************
 *            form
 *******************************************************/
.form{padding-top: 20px;}
.form input[type="text"]{width: 100%}
.form .check_or_radio .bloc, .form .check_or_radio p{margin-bottom: 0;}
.form p{font-size: 1.2em;}
.form .check_or_radio .bloc{min-width: 31.66%; width: auto; margin-left: 2.5%; display: inline-block; vertical-align: top}
.form .check_or_radio .bloc:nth-child(3), .form .check_or_radio .bloc:nth-child(6), .form .check_or_radio .bloc:nth-child(9), .form .check_or_radio .bloc:nth-child(12){margin-left: 0}
.form .check_or_radio > div  p{font-size: 1em; display: inline; vertical-align: middle;margin: 0;}
.form .check_or_radio input{vertical-align: middle; margin-right: 20px;}
.form .required{position: relative;}
.form .required:before{content:"*"; color: red; position: absolute; left: -10px; top: 40%; font-size: 20px;}

.form .bloc, .form .bloc2{position: relative;}
input:focus,select:focus,textarea:focus{outline: none;}
.form input[type="text"]+span, .form input[type="email"]+span,.form input[type="tel"]+span,.form input[type="number"]+span, .form textarea+span{position: absolute; top: 0;left: 0; bottom: 0; right: 0; pointer-events: none}
.form .headerForm input[type="text"]+span{position: relative;}
.form input[type="text"]+span::after, .form input[type="email"]+span::after,.form input[type="tel"]+span::after,.form input[type="number"]+span::after, .form textarea+span::after{display: block; content: ""; position: absolute; height: 2px; bottom: 0; width: 0; background-color: #434343; -webkit-transition-property: width;transition-duration: 0.5s}
.form input[type="text"]:focus+span::after, .form input[type="email"]:focus+span::after,.form input[type="tel"]:focus+span::after, textarea:focus + span::after{width: 100%;}

/********************************************************
 *            hide content
 *******************************************************/
.hide{ height:0; overflow: hidden; transform: scaleY(0); transform-origin: top; transition: all .5s }
.hide:target, .hide.show{transform: scaleY(1);height:auto;}

 /********************************************************
  *             content
  *******************************************************/
.espace{ margin-bottom: 0; min-height: 30px }

/********************************************************
 *            map
 *******************************************************/
.map>img{width: 100%; height: 100%; top: 0; left: 0;position: absolute;}
.map{position: relative; height: 0; padding-bottom: 50%}


/********************************************************
 *            mini-slider
 *******************************************************/
.slider .background.bloc2, body .editableZone .slider .background.bloc2{min-height: 450px; width: 100%; margin-right: 0; margin-left: 0}
.mini-slider{height: 450px; margin-bottom: 50px;}
.mini-slider > *:not(i){height: 100%; position: relative;}
.mini-slider > * li > *:not(i), .mini-slider .bx-controls, .mini-slider .bx-controls *{height: auto; position: static;}
.mini-slider ul, .mini-slider li{width: 100%}
main .bx-wrapper .bx-viewport{background: transparent;}

#FixBg{background-size: cover; background-position: center center;top: 0; left: 0;position: fixed; z-index: -1; width: 100vw; max-width: none; height: 100vh; max-height: none;  margin: 0;padding: 0;}
#FixBg *{object-fit:cover;width: 100%; height: 100%}
/********************************************************
 *         Circle Number
 *******************************************************/
.circleNumber{padding: 0;  max-width:250px; width:80%; display: inline-block; font-size: 4.5em;   }
.circleNumber .square_size{ position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden;}
.circleNumber .square_size .mouvableDad{height: 100%; position: absolute; top: 0;left: 0;width: 100%}
.circleNumber .square_size p:first-child{position: absolute; width: 100%;text-align: center; top: 15%;left: 0; margin: 0;padding: 0;}
.circleNumber .square_size p:nth-child(2){font-size: 0.2em;position: absolute; width: 100%;text-align: center; top: 75%;left: 0; margin: 0;padding: 0;}
.circleNumber svg{width: 100%; height: 100%; position: absolute;top: 0; left: 0; z-index: -1}
.circleNumber svg circle{fill: transparent; stroke: #333; stroke-width: 6%; stroke-dasharray: 320%; stroke-dashoffset:320%;
  transform: rotate(270deg);
transform-origin: 50% 50%;}


/********************************************************
 *    .defilement
 *******************************************************/
.defilement .mask{width: 100%; overflow: hidden; margin: 0;padding: 0;}
.defilement .wrapperItem{ text-align: left;width: 5000px;animation-timing-function: linear;}
.defilement .wrapperItem > .bloc{background-color: #000; height: 0;  padding: 0;padding-top:4%;  margin: 0.2%; width: 7%; min-height:0;color:#FFF; display: inline-block;}

/********************************************************
 *              .decalable
 *******************************************************/
.decalable{position: relative;}
/********************************************************
 * 					mix-blend
 *******************************************************/
.bg_choice.bloc1.mix-blendDad{padding-top: 30%; position: relative; overflow: hidden; min-height: 0; height: 0;  padding-bottom: 0}
.mix-blend, .currentItem.mix-blend{ font-weight: bold;position: absolute; top: 0; left: 0; width: 100%; height: 200%;background: rgba(150,0,0, 0.8); color: white; mix-blend-mode: multiply; position: absolute; font-size: 15vw;padding-top:0;margin-bottom: 0; text-align: left; line-height: 1em;}
/********************************************************
 * 				.content_switching
 *******************************************************/
.content_switching{margin-top: 1.25%; margin-bottom:1.25%; text-align: center;font-size: 0.8em;}
.content_switching .backgroundWrapper{padding-bottom: 45%;}
.buttons{border-bottom: 1px solid rgba(255,255,255,0.4); width: auto; display: inline-block; max-width: 100%; white-space: nowrap; margin-top: 25px; margin-bottom: 25px;}
.buttons>*{cursor:pointer; display: inline-block; margin-right: 15px;padding-bottom: 15px; margin-bottom: 0;opacity:0.6;white-space: nowrap;}
.buttons>*:last-child{margin-right: 0}
.buttons>*.selected{position: relative; opacity:1;}
.buttons>*.selected::after{content:""; position: absolute; bottom: -1px; left: 0; width: 100%;height: 1px; background-color: #FFF}
/********************************************************
 *             MEDIA-QUERY
 *******************************************************/
 /* 600 */
@media screen and (max-width: 600px) {
  .form{width: 92.5%}
  .defilement .wrapperItem{width: 3000px;}
  .bloc .bloc2, .bloc .bloc3, .bloc .bloc4, .img_text .CoteText, .img_text .CoteImg,
  .bloc .bloc2.bloc1-3, .bloc .bloc2.bloc3-1, .bloc .bloc2.bloc1-3.grand, .bloc .bloc2.bloc3-1.grand,
  body.amp-working.bloc .bloc2,body.amp-working .bloc .bloc3,body.amp-working .bloc .bloc4,body.amp-working .img_text .CoteText,body.amp-working .img_text .CoteImg,
  body.amp-working .bloc .bloc2.bloc1-3,body.amp-working .bloc .bloc2.bloc3-1,body.amp-working .bloc .bloc2.bloc1-3.grand,body.amp-working .bloc .bloc2.bloc3-1.grand{ width: 100% !important; margin-left: 0; margin-right: 0}
  .form .bloc .bloc2 {margin-bottom: 2.5%;margin-top: 2.5%;}
  .form form > .bloc{margin:0;}
  .img{text-align: center;}
  .youtube img, .CoteImg img{min-width: auto; max-width: 100%}
  .img amp-img img, .youtube amp-img img, .CoteImg amp-img img{min-width: 100%;}
  .ilus, .PartText,
  body.amp-working .ilus, html body.amp-working .PartText{width: 100% !important}

  .sliderWrap, .mini-slider{height: 250px}
  .background{min-height: 250px}
}