/* _______ ______ _______ _______ ______ _______ _______ ______ _______ _______ _______ _ _ _ _______ ______ _ _ (_______)(_____ \ (_______)(_______)(_____ \ (_______) (_______)(_____ \ (_______)(_______)(_______)(_)(_)(_)(_______)(_____ \ (_) | | _ _____) ) _____ _______ ____) ) _____ _____ _____) ) _______ _ _ _ _____ _ _ _ _ _ _____) ) _____| | | | | __ / | ___) | ___ | / ____/ | ___) | ___) | __ / | ___ || ||_|| || ___) | || || || | | || __ / | _ _) | |_____ | | \ \ | |_____ | | | || (_____ | | | | | | \ \ | | | || | | || |_____ | || || || |___| || | \ \ | | \ \ \______)|_| |_||_______)|_| |_||_______)|_| |_| |_| |_||_| |_||_| |_||_______) \_____/ \_____/ |_| |_||_| \_) Version 0.9.6.0 Date 02/01/2015 */ /* ################################################################################################################ * IMPORTS *###############################################################################################################*/ @import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400..800&family=Libre+Caslon+Display&display=swap'); /* SLICK CORE + THEME */ .slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none} .slick-loading .slick-list{background:#fff center center no-repeat}@font-face{font-family:'slick';font-weight:400;font-style:normal;src:url(./fonts/slick.eot);src:url(./fonts/slick.eot?#iefix) format("embedded-opentype"),url(./fonts/slick.woff) format("woff"),url(./fonts/slick.ttf) format("truetype"),url(./fonts/slick.svg#slick) format("svg")}.slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:20px;height:20px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:none;background:transparent}.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color:transparent;outline:none;background:transparent}.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1}.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:.25}.slick-prev:before,.slick-next:before{font-family:'slick';font-size:20px;line-height:1;opacity:.75;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-prev{left:-25px}[dir='rtl'] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:'←'}[dir='rtl'] .slick-prev:before{content:'→'}.slick-next{right:-25px}[dir='rtl'] .slick-next{right:auto;left:-25px}.slick-next:before{content:'→'}[dir='rtl'] .slick-next:before{content:'←'}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{position:absolute;bottom:-25px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:transparent}.slick-dots li button:hover,.slick-dots li button:focus{outline:none}.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1}.slick-dots li button:before{font-family:'slick';font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-dots li.slick-active button:before{opacity:.75;color:#000} /*.slick-cloned{ height: 0;}*/ /* FANCY */ .fancybox-wrap,.fancybox-skin,.fancybox-outer,.fancybox-inner,.fancybox-image,.fancybox-wrap iframe,.fancybox-wrap object,.fancybox-nav,.fancybox-nav span,.fancybox-tmp{padding:0;margin:0;border:0;outline:none;vertical-align:top}.fancybox-wrap{position:absolute;top:0;left:0;z-index:8020}.fancybox-skin{position:relative;background:#f9f9f9;color:#444;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.fancybox-opened{z-index:8030}.fancybox-opened .fancybox-skin{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,0.5);box-shadow:0 10px 25px rgba(0,0,0,0.5)}.fancybox-outer,.fancybox-inner{position:relative}.fancybox-inner{overflow:hidden}.fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch}.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:15px;white-space:nowrap}.fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%}.fancybox-image{max-width:100%;max-height:100%}#fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url(jquery/fancybox2/fancybox_sprite.png)}#fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-22px;margin-left:-22px;background-position:0 -108px;opacity:.8;cursor:pointer;z-index:8060}#fancybox-loading div{width:44px;height:44px;background:url(jquery/fancybox2/fancybox_loading.gif) center center no-repeat}.fancybox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;cursor:pointer;z-index:8040}.fancybox-nav{position:absolute;top:0;width:40%;height:100%;cursor:pointer;text-decoration:none;background:transparent url(jquery/fancybox2/blank.gif);-webkit-tap-highlight-color:rgba(0,0,0,0);z-index:8040}.fancybox-prev{left:0}.fancybox-next{right:0}.fancybox-nav span{position:absolute;top:50%;width:36px;height:34px;margin-top:-18px;cursor:pointer;z-index:8040;visibility:hidden}.fancybox-prev span{left:10px;background-position:0 -36px}.fancybox-next span{right:10px;background-position:0 -72px}.fancybox-nav:hover span{visibility:visible}.fancybox-tmp{position:absolute;top:-9999px;left:-9999px;visibility:hidden}.fancybox-lock{overflow:hidden}.fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:8010;background:rgba(0,0,0,0.5);}.fancybox-overlay-fixed{position:fixed;bottom:0;right:0}.fancybox-lock .fancybox-overlay{overflow:auto;overflow-y:scroll}.fancybox-title{visibility:hidden;font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:8050}.fancybox-opened .fancybox-title{visibility:visible}.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:8050;text-align:center}.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;padding:2px 20px;background:transparent;background:rgba(0,0,0,0.8);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 2px #222;color:#FFF;font-weight:700;line-height:24px;white-space:nowrap}.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}.fancybox-title-inside-wrap{padding-top:10px}.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;padding:10px;background:#000;background:rgba(0,0,0,.8)} /* ################################################################################################################ * BASICS *###############################################################################################################*/ html, body { margin: 0; padding: 0; border: 0; } body { font-size:14px; background: #fff; color: #111; font-family: "Baloo Da 2", sans-serif; font-weight: 300; letter-spacing: 0.1em; line-height: 1.5em; overflow-y: scroll; overflow-x: hidden; } .lt-1440 body { font-size: 14px;} input, select, textarea { color: #333; font-family: "Baloo Da 2", sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5em; } a { -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; color: #d5bdaf; text-decoration: none; } a:hover { /*border-bottom-color: transparent; text-decoration: none;*/ /*color: #666; */ color: #ccc; text-decoration: underline; } a:active, a:focus { outline:0; } a img { border:0; } strong, b { font-weight: 900; } p, ul, ol, dl, table, blockquote { margin: 0 0 1.5em 0; } h1, h2, h3, h4, h5, h6 { color: inherit; font-weight: 300; line-height: 1em; margin-bottom: 1em; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; border: 0; } h2 { font-size: 1.8em; } h3 { font-size: 1.5em; } h4 { font-size: 1.3em; } sub { font-size: 0.8em; position: relative; top: 0.5em; } sup { font-size: 0.8em; position: relative; top: -0.5em; } hr { border-top: solid 1px rgba(124, 128, 129, 0.2); border: 0; margin-bottom: 1.5em; } blockquote { border-left: solid 0.5em rgba(124, 128, 129, 0.2); font-style: italic; padding: 1em 0 1em 2em; } pre { margin:10px; padding:5px; background:#fafafa; border:1px dashed #ebebeb; font-family:Arial, Trebuchet MS, Helvetica, sans-serif; font-size:12px; } /** * Lists */ ul { margin:0; padding:0; } li { list-style-type:none;} dl { margin:0; padding:0; } dt {} dd {} sup{ font-size: 0.5em;} p strong{ font-weight: 600;} .pullman{ text-transform: uppercase; font-style: italic; } /* ################################################################################################################ * ELEMENTS *###############################################################################################################*/ /* Table */ table { width: 100%; } table.default { width: 100%; } table.default tbody tr { border-bottom: solid 1px rgba(124, 128, 129, 0.2); } table.default td { padding: 0.5em 1em 0.5em 1em; } table.default th { font-weight: 400; padding: 0.5em 1em 0.5em 1em; text-align: left; } table.default thead { background: #7c8081; color: #fff; } /* Form */ input[type="text"], input[type="password"], input[type="email"], textarea{ -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; background: none; border: none; border-bottom: solid 1px rgba(0, 0, 0, 0.85); color: #000; display: block; padding: 0.4em 2%; text-decoration: none; width: 96%; outline: 0; line-height: 1.3em; } textarea{ border: solid 1px rgba(0, 0, 0, 0.85); } select{ -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; background: none; border: solid 1px rgba(0, 0, 0, 0.85); color: #000; display: block; padding: 0.4em 0.75em; border-right-width: 1px; border-right-style: solid; line-height: 1.3em; } .missingField label, .invalidField label { color:#EE2E24 !important; font-weight: 600; } .missingField input, .missingField textarea, .missingField select, .invalidField input, .invalidField textarea, .invalidField select { border-color:#EE2E24 !important; } .formErrors { margin:0; padding:10px 0 10px 0; } .formErrors li { list-style:none; margin:0px 0 5px 0; line-height:16px; color:#EE2E24 !important; font-weight: 600;} .fancybox-inner .missingField label, .fancybox-inner .invalidField label { color:#000; } .fancybox-inner .missingField input, .fancybox-inner .missingField textarea, .fancybox-inner .missingField select, .fancybox-inner .invalidField input, .fancybox-inner .invalidField textarea, .fancybox-inner .invalidField select { color:#000; } .fancybox-inner .formErrors li { color:#000;} input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus, select:focus, input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, textarea:hover, select:hover { /*border-color: rgba(0, 161, 222, 0.7);*/ border-color: #999; } fieldset{ border: none !important; margin: 0; padding: 0;} #field-security { display: none !important; } .formButtons { text-align: center;} label { color: #000;} .textField, .textareaField, p.selectField{ margin: 0 0 10px 0;} /* Button */ input[type="button"], input[type="submit"], input[type="reset"], .button{ -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; background: none; border: 1px solid #fff; color: #fff; cursor: pointer; display: inline-block; font-size: 0.8em; font-weight: 300; letter-spacing: 0; padding: 1em 2em; line-height: 1.2em; text-align: center; text-decoration: none; width: auto; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; margin-bottom: 15px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, .button:hover{ background: #d5bdaf; border-color: #d5bdaf; color: #fff; } .black .button, .button.black{ border: 1px solid #000; color: #000; } .button.marrondefault { border-color: #d5bdaf; background: #d5bdaf; color: #fff; } .button.marrondefault:hover { border-color: #d5bdaf; background: #fff; color: #000 !important; } /* Specials */ /** * Floating elems */ .float, .floatL {display:inline; float:left;} .floatR {display:inline; float:right;} img.floatL, img.floatR{ display:block; } img.floatL{ margin: 0 20px 20px 0; } img.floatR{ margin: 0 0 20px 20px; } /** * Away elems */ .awayText {text-indent: -9999px; overflow: hidden; } .hidden {display: none;} .no-mobile .mobileZim{ display: none !important;} /** * WRAPPERS 980 */ .focus { margin:0 auto; width: 980px; } .clear{ clear: both; min-height: 0;} .bigclear{ clear: both; height: 80px;} /** * Overlays */ /* WHITE*/ .overlay-w { background:rgba(255,255,255,0.7); } .lt-ie9 .overlay-w{ background:none; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff)"; zoom: 1; } /* BLACK*/ .overlay-b{ background:rgba(0,0,0,0.7); } .lt-ie9 .overlay-b{ background:none; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000)"; zoom: 1; } .sfont { font-family: "Libre Caslon Display", serif; } .fksfont { font-weight: 800; } .shadow{ text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); } .shadow-w{ text-shadow: 1px 1px 0px rgba(255, 255, 255, 1); } .clearblue{ color: #60B0E3 } .focusW{ width: 980px; margin: 0 auto;} .rcorner{ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;} #SpecialAnnounce, .specialAnnounce, #SAContent{ display: none;} #SAContent{ width: 700px; height: 700px; margin: 0; overflow: hidden;} #SAContent a{ vertical-align: top; } #SAContent a img{ display: block; width: 100%; vertical-align: top;} @media(max-width:1024px) { #SAContent{ width: 480px; height: 480px; } } @media(max-width:415px) { #SAContent{ width: 340px; height: 340px; } } #OverlayLoad{ height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 9999; background: #cea594 url(zims/loader/loader.gif) no-repeat center; } /* ################################################################################################################ * PAGES *###############################################################################################################*/ /*html{ overflow-y: scroll;}*/ html, body, #Main{ height: 100%; } body.noscroll, .noscroll #Main{ overflow: hidden;} #Main{ width: 100%; height: 100%;} .page{ width: 100%; overflow: hidden; position: relative;} .simpleformPage{ width: 100%; height: 100%; overflow: hidden; position: relative;} .screensW, .screensAnimW{ width: 100%; height: 100%; } .screen{ width: 100%; min-height: 600px; position: relative; } .screenZimW, .screenCarouselW, .screenCarouselZoomW{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; background: #d5bdaf;} .screenZim, .carouselZim, .carouselZoomZim, .carouselZoomZimW{ display: block; position: absolute; } .screenZim{ display: none;} .screenCarouselW{ display: none;} .carouselZim, .carouselZoomZimW{ opacity: 0;} /*.screenCarouselZoomW.half{ height: 50%;}*/ .screenCarouselZoom{ height: 100%; width: 100%;} .screensAnimW{ overflow: hidden; } .halfZimW{} .halfZimW div{ width: 50%; height: 100%; overflow:hidden; position:absolute; } .halfZimL{ left: 0; top: 0; } .halfZimR{ right: 0; top: 0; } .halfZimR img{ right: 0; left: auto !important;} .carouselZoomZim { /* image à l'échelle 1 au départ */ -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .carouselZoomZim.scale{ /* propriétés de transition */ -moz-transition:all 6s ease-out; -webkit-transition:all 6s ease-out; -o-transition:all 6s ease-out; transition:all 6s ease-out; transform: translate3d(0px, 0px, 0px) scale(1.10); } #ZoomHalfBanner{ height: 550px; position: relative; overflow: hidden;} #ZoomHalfBanner.darkPanel{ } #ZoomHalfBanner h2{ position: absolute; z-index: 500; font-size: 4em; bottom: 25px; left: 0; width: 100%; text-align: center; margin: 0; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,1);} .darkPanel *{ color: #fff; } .paddingupdown { padding: 20px 0; } .screenPanelW{ width: 100%; height: 100%; position: absolute;} .screenPanel{ position: absolute; } .halfPanel{ width: 46%; height: 100%; background: #222; padding: 8% 2% 0; background-image: url(zims/frontend/); background-repeat: no-repeat; background-position: center; background-size: cover; } .halfPanelR{right: 0; } .halfPanelL{left: 0} h2.pageTitle{ font-size: 3em; margin: 0; } h2.pageTitle span{ } .littleup { font-size: 1.2em !important } .big { font-size: 1.5em !important } .super { font-size: 1.8em !important } .mega { font-size: 2.8em !important } .ultra { font-size: 3.8em !important } .mini { font-size: 0.8em !important } .micro { font-size: 0.5em !important } .centered{ text-align: center !important;} .lefted{ text-align: left !important;} .righted{ text-align: right !important;} /* .mainTextW{ padding: 30px 0 0 30px; border-left: 1px solid #fff; } .mainTextW *:first-child{ margin-top: 0;} .justified *, .justified { text-align: justify } p.justified, .justified p{ line-height: 1.5em; } .centered *, .centered{ text-align: center; } .bigmargin{ margin-top: 50px!important; margin-bottom: 50px !important;} .mediummargin{ margin-top: 20px!important; margin-bottom: 20px !important;} .notitle{ margin: 50px 0 0 0;} .nomargintop{ margin-top: 0;} .sidepadding{ padding: 0 25px; width: auto !important;} .next-section { position: absolute; bottom: 0; z-index: 4000; width:100%; left:0; } .arrowNext{ position: relative; bottom: 20px; display: block; width: 120px; height: 31px; background: url(zims/frontend/arrow2.png) no-repeat center bottom; opacity: 0; margin:0 auto; text-align: center; font-weight: 500; text-transform: uppercase; line-height: 1em; color: #fff; font-size: 0.75em; padding-top: 18px; }*/ .colzim{ display: block; width: 100%;} .fitzimW{ overflow: hidden; position: relative;} .fitzim{ display: block; height: 100%; position: absolute; top: 0;} .centeredlist{ width: 100%; clear: both; margin-left: 7.5%!important; margin-right: 7.5%!important; width: 85%; padding-top: 70px;} .centeredlist:first-child{ padding-top: 0;} .flexi{ display: flex; } .flexilist{ display: flex; flex-wrap: wrap;} .centeredlist100{ margin-left: 0%!important; margin-right: 0%!important; width: 100%} .centeredlist90{ margin-left: 5%!important; margin-right: 5%!important; width: 90%} .centeredlist85{ margin-left: 7.5%!important; margin-right: 7.5%!important; width: 85%} .centeredlist80{ margin-left: 10%!important; margin-right: 10%!important; width: 80%} .centeredlist75{ margin-left: 12.5%!important; margin-right: 12.5%!important; width: 75%} .centeredlist70{ margin-left: 15%!important; margin-right: 15%!important; width: 70%} .centeredlist60{ margin-left: 20%!important; margin-right: 20%!important; width: 60%} .centeredlist50{ margin-left: 25%!important; margin-right: 25%!important; width: 50%} .centeredlist30{ margin-left: 35%!important; margin-right: 35%!important; width: 30%} .centeredlist > li{ display: inline-block; vertical-align: top; position: relative;} .centeredlist > li{ width: 45%; } .flexilist > li.vcenter{ display: flex; align-items: center; } .centeredlist > li.col5{ width: 5%; margin: 0; } .centeredlist > li.col10{ width: 10%; margin: 0; } .centeredlist > li.col20{ width: 20%; } .centeredlist > li.col25{ width: 25%; } .centeredlist > li.col30{ width: 30%; } .centeredlist > li.col33{ width: 33.33%; } .centeredlist > li.col40{ width: 40%; } .centeredlist > li.col45{ width: 44.5%; } .centeredlist > li.col50{ width: 50%; } .centeredlist > li.col60{ width: 60%; } .centeredlist > li.col70{ width: 70%; } .centeredlist > li.col100{ width: 100%; } .mediummargin{ margin-top: 40px; margin-bottom: 40px;} .bigmargin{ margin-top: 80px; margin-bottom: 80px;} .bigmargintop{ margin-top: 80px; } .marginbottom{ margin-bottom: 50px;} .titlepadding{ padding-top: 95px;} .titlepaddingmini{ padding-top: 45px;} .titlepaddingmicro{ padding-top: 20px;} .titlepaddingmedium{ padding-top: 150px;} .titlepaddingbig{ padding-top: 200px;} .smallpadding{ padding: 30px 0; } .mediumpadding{ padding: 60px 0; } .mediumpaddingtop{ padding: 60px 0 0 0; } .bigpadding{ padding: 100px 0; } .bigpadding2{ padding: 200px 0; } .nospacetop{ margin-top: 0; padding-top: 0;} .nospacebottom{ margin-bottom: 0; padding-bottom: 0;} .nospace{ margin-bottom: 0; padding-bottom: 0; margin-top: 0; padding-top: 0;} .themecolor{ color: #c8a997;} .themebg, .themebgtarget:hover, .themebgtarget.active{ background-color: #c8a997;} .linedLink{ display: inline-block; margin: 0 auto; color: #222; font-size: 1.2em; letter-spacing: 0.5em; padding: 10px 0; text-transform: uppercase; border-top: 1px solid #222; border-bottom: 1px solid #222; margin-bottom: 15px; } .linedLink:hover{ text-decoration: underline; } .linedLink.mini{ font-size: 1.1em; letter-spacing: 0.2em;} .hoverlink{ display: block; position: absolute; top: 30px; left: 7.5%; text-transform: uppercase; text-align: center; padding: 25px 30px 60px 30px; color: #fff; background: #222 url(zims/frontend/biglink-bg.jpg) no-repeat center 80%;} .hoverlink:hover{ text-decoration: underline; } .hoverlink.right{ left: auto; right: 7.5%; } .legend { font-style: italic; color: #777; font-size: 0.9em;} .paralaxW{ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 200px; width: 100%; margin: 30px 0;} .contactBlockW{ margin: 50px 0;} .contactBlock{} .contactBlock.push{ padding: 70px 0 0 25px; } .contactBlock p{ /*background: url(zims/frontend/sprite-icons.png) no-repeat left top; padding-left: 50px;*/} .contactBlock p svg{ display: block; float: left; font-size: 1.5em;} .contactBlock p.acces{} .contactBlock p.horaires{ background-position: left -145px;} .contactBlock p.coords{ background-position: left -292px;} .contactBlock p span.line{ display: block; border-bottom: 1px solid #000; padding: 0 0 20px 40px;} .contactBlock p span.line.noborder{ border-bottom: none; } .contactBlockW a{ color: #000; } .contactBlockW .button{ color: #000; border-color: #000;} .contactBlockW .button:hover{ color: #fff;} /* Special*/ .pageappear{ opacity: 0; position: relative;} .soontext{ margin: 180px 0; text-align: center; font-size: 1.6em; font-style: italic;} #TopBorder{ height: 5px; width: 100%; position: fixed; top: 0; left: 0; z-index: 4999; background: rgb(226,185,101); background: linear-gradient(90deg, rgba(226,185,101,1) 3%, rgba(232,199,105,1) 14%, rgba(252,246,186,1) 38%, rgba(227,190,111,1) 57%, rgba(251,245,183,1) 83%, rgba(236,204,120,1) 95%); } .headerBand{ height: 150px; background: url(zims/frontend/pattern.jpg) no-repeat center top; background-size: 100% auto; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * GENERAL * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* COLORS JAUNE1 d5bdaf JAUNE2 D7B179 */ /* HEADER */ #Header { position: fixed; top: 0; width: 100%; z-index: 1000; -moz-transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out; background-image: url(zims/frontend/header-repeat.png); background-repeat: repeat-x; background-position: center 99%; background-color: rgba(196,154,92,0); border-bottom: 1px solid #f5ebe0; border-bottom: none; } .scrolled #Header, .forcedHeader #Header{ background-color: rgba(213,189,175,0.75); border-bottom: 1px solid #f5ebe0; } #HomeLinkW { position: relative; text-align: center; z-index: 900; margin: 10px 0 0 0; width: 100%;} #HomeLinkW a{ display: inline-block; width: 80px; padding: 0; -moz-transition: width 0.2s ease-in-out, padding 0.2s ease-in-out; -webkit-transition: width 0.2s ease-in-out, padding 0.2s ease-in-out; -o-transition: width 0.2s ease-in-out, padding 0.2s ease-in-out; -ms-transition: width 0.2s ease-in-out, padding 0.2s ease-in-out; transition: width 0.2s ease-in-out, padding 0.2s ease-in-out; } #HomeLinkW a img{ display: block; width: 100%; } .scrolled #HomeLinkW a , .forcedHeader #HomeLinkW a { width: 50px; } /* MAIN MENU */ #Nav{ position: fixed; top: 0; width: 100%; height: auto; z-index: 5001;} #Nav.open{ height: 100%; } /*#UpperNav{ position: absolute; z-index: 5010; height: 70px; width: 100%; }*/ #UpperMenu{ width: 100%; position: relative; z-index: 1;} #UpperMenu > ul{ width: 32%; height: 40px; position: absolute; top: 0; margin-top: 25px; } #UpperMenu > ul#LeftUpperMenu{ left: 0; padding-left: 8%; } #UpperMenu > ul#RightUpperMenu{ right: 0; padding-right: 3%; } #UpperMenu > ul li{ display: inline-block; float: left; margin: 5px 0 0 0; padding-top: 0; /*background: url(zims/frontend/upmenu-line.gif) no-repeat center top;*/ } #UpperMenu > ul > li > a{ color: #fff; text-transform: uppercase; font-size: 0.9em; border-left: 1px solid #fff; padding: 0 15px; display: inline-block; letter-spacing: 0.3em; vertical-align: middle; text-align: center; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } #UpperMenu > ul > li > a.icon{ padding: 0 15px 0 0; font-size: 1em; padding-top: 2px; } #UpperMenu > ul > li > a span{ display: inline-block; position: relative;} #UpperMenu > ul > li > a:hover span{ text-decoration: underline;} #UpperMenu > ul li.noline > a{ border-left: none; } #UpperMenu > ul li > a svg, #UpperMenu ul li a svg{ font-size: 1.3em;} #UpperMenu > ul li > a svg.fa-instagram{ font-size: 1.33em;} #UpperMenu > ul#RightUpperMenu li{ float: right; position: relative; margin-top: 0 !important; } #MgalLogo { position: absolute; right: 2.5%; top: 0;} .animbtn { width: 178px; height: 19px; padding: 5px 0 !important; cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,0.6); outline: none; transition: 1s ease-in-out; font-size: 0.9em !important; letter-spacing: 2px; position: relative; } .animbtn svg { position: absolute; left: 0; top: 0; fill: none; stroke: #fff; stroke-dasharray: 150 480; stroke-dashoffset: 150; transition: 1s ease-in-out; } .animbtn:hover { transition: 1s ease-in-out; background: rgba(0,0,0,0.5); } .animbtn:hover svg { stroke-dashoffset: -480; } /* ANIMATED MENU ICO */ #NavIco { display: block; position: fixed; z-index: 5001; height: 25px; width: 32px; left: 2.5%; top: 31px; font-family: 'Questrial', sans-serif; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #NavIco span { display: block; position: absolute; height: 2px; width: 100%; background: #fff; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .open #NavIco span { background: #000; } .open #NavIco { transform: rotate(180deg); } #NavIco span:nth-child(1) { top: 0px; } #NavIco span:nth-child(2),#NavIco span:nth-child(3) { top: 9px; } #NavIco span:nth-child(4) { top: 18px; } #NavIco.active span:nth-child(1) { top: 18px; width: 0%; left: 50%; } #NavIco.active span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #NavIco.active span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #NavIco.active span:nth-child(4) { top: 18px; width: 0%; left: 50%; } #NavIco strong { position: absolute; left: 55px; font-size: 1.1em; line-height: 1em; top: 10px; color: #fff; text-transform: uppercase; font-weight: normal; } #MenuW{ overflow: visible; width: 100%; height: 100%; position: relative; z-index: 1001; } #MenuOverlay{ background: rgba(213,189,175,0.5); height: 100%; width: 100%; top: 0; left: 0; position: absolute; z-index: 900; } #Menu{ overflow: visible; background: #fff url(zims/frontend/logo-menu.png) no-repeat -100px 120%; background-size: 300px; height: 100%; position: absolute; z-index: 1000; opacity: 0; overflow: visible; height: 100%;width: 23%; } #MainMenuW{ padding-top: 110px; margin-bottom: 30px; } #MainMenu > li{ } #MainMenu > li > a, #MainMenu > li > strong{ display: block; position:relative; /*background: url(zims/frontend/menu-line-w.gif) no-repeat left bottom;*/ padding: 15px 0 10px 40px; text-transform: uppercase; font-family: "Libre Caslon Display", serif; font-weight: 300; color: #000; font-size: 1.32em; cursor: pointer; text-align: left; -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } #MainMenu > li > a span, #MainMenu > li > strong span{ width: 100%; display: inline-block; } /*#MainMenu > li > a svg, #MainMenu > li > strong svg { float: right; margin-right: 25px;} #MainMenu > li > a svg.fa-caret-down, #MainMenu > li > a svg.fa-caret-up, #MainMenu > li > strong svg.fa-caret-down, #MainMenu > li > strong svg.fa-caret-up { display: none;} */ #MainMenu > li > a:hover, #MainMenu > li > strong:hover, #MainMenu > li.actived > a, #MainMenu > li.actived > strong{ color: #fff; text-decoration : none; background-color: #d5bdaf } #MainMenu li .submenu{ position: absolute; right: 0; top: 0; background: #fff; padding: 155px 0 0 0; height: 100%; display: none;} #ResaSelector, #BkdoSelector{ display: none; position: absolute; right:0; top: calc(100% + 2px); width:180px; } #BkdoSelector{ right:200px; } #ResaSelector ul, #BkdoSelector ul{ display: flex;padding: 5px; gap: 5px; } #ResaSelector ul li, #BkdoSelector ul li{ border-right: 1px solid #fff; } #ResaSelector ul li a, #BkdoSelector ul li a{ display: block; color: #fff; text-transform: uppercase; text-align: center; font-size: 0.9em; padding: 0 5px; line-height: 1.2em;} /*#ResaSelector ul li a.resaRoofLink svg, #BkdoSelector { position: relative; left: 5px;}*/ /*#ResaSelector ul li a svg { font-size: 2.8em; margin-bottom: 5px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}*/ #ResaSelector ul li:last-child, #BkdoSelector ul li:last-child { border-right: none;} #ResaSelector ul li:last-child a, #BkdoSelector ul li:last-child a { padding-right: 0;} /*#ResaSelector ul li a:hover svg { color: #000; }*/ #InstaSelector{ display: none; position: absolute; left:10%; top: 20px; width: 170px; z-index: 200; } #MainInstaBtn{ cursor: pointer; } #InstaSelector ul{ display: flex; flex-direction: column; gap: 5px; } #InstaSelector ul li a { display: block; color: #fff; text-transform: uppercase; text-align: left; font-size: 0.9em; padding-right: 5px; line-height: 1.2em;} #BkdoPopup{ padding: 25px 40px 0; } /* #ResaSelector ul li a.resaRoofLink svg { position: relative; left: 5px;} #ResaSelector ul li a svg { font-size: 2.8em; margin-bottom: 5px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #ResaSelector ul li:last-child { border-right: none;} #ResaSelector ul li:last-child a { padding-right: 0;} #ResaSelector ul li a:hover svg { color: #000; }*/ #SecondaryMenu{ } #SecondaryMenu > li > a, #SecondaryMenu > li > strong{ display: block; padding: 2px 0 2px 45px; font-weight: 300; color: #fff; font-size: 1em; cursor: pointer; text-align: left; } #SecondaryMenu li > a:hover{ text-decoration : underline; } #Copyrights{ padding: 0 40px; font-size: 0.7em; line-height: 1.2em; position: absolute; bottom: 20px; color: #000; } #LangsW{ position: absolute; left: 100px; top: 32px; width: 60px; z-index: 5010; } #LangsW #LangOpen{ display: block; float: left; color: #fff; font-size: 1.4em; } #LangLinks{ float: right; } #LangLinks li{ text-align: right } #LangLinks li a{ color: #fff; text-transform: uppercase; padding: 0 4px; display: block; font-size: 0.9em; letter-spacing: 0.3em;} #LangLinks li.disabled{ display: none;} .open #LangsW #LangOpen, .open #LangLinks li a{color: #000; } #FooterW{ background: url(zims/frontend/pattern2.jpg) no-repeat center top; min-height: 200px; padding: 2px 0; } #FooterW *{ color: #000; } #Footer{ /*border-top: 6px double #111;*/ padding: 40px 5% 30px; overflow: auto; } #FooterMenu{ display: inline; float: left; width: 40%; } #FootMenu{ display: flex; flex-wrap: wrap; gap: 2px 20px;} #FootMenu li{ text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.85em; width: calc(50% - 10px); } #FooterLinks{ display: inline; float: left; width: 30%; } #FooterLinks p{ text-align: center;} #Footer p.reseaux a{ margin: 0 10px 0 0;} #Footer p.reseaux a svg{ font-size: 1.5em; } #FooterCoords{ display: inline; float: right; width: 30%; } #FooterCoords img{ width: 200px; } #FooterCoords .vcard svg{ display: none; } #FooterCoords .vcard p{ margin: 0; } #FooterCoords .vcard p .org{ display: none;} #FooterCoords * { text-align: right; } #FooterCoords .button { border-color: #fff; float:right; margin-top: 5px; padding: 6px 12px;} #FooterCoords .button:hover { background: #666;} #FooterNewsW{padding: 0; margin: 0 auto; position: relative; } #FooterNewsW h3{ text-align: center; margin: 0 0 5px 0; } #FooterNewsW label{ display: none; } #FooterNewsW .textField { width: 100%; } #FooterNewsW .textField input{ width: calc(100% - 20px); border: 1px solid #000; text-align: center; padding: 10px; } #FootNewsErrors{ display: block; margin-bottom: 10px; } #NewsletterFormButtons{ text-align: center;} #FootNewsCheck{ display: block; position: absolute; bottom: -25px; left: 0; width: 100%; text-align: center; font-size: 2.2em; display: none; } #Credits{ font-size: 0.8em;} /* Content */ .simplePageTitle{ font-size: 3em; font-weight: 600; text-align: center; margin: 50px 0; text-transform: uppercase;} #ResaBtns{ position: fixed; bottom: 0; z-index: 5030; width: 100%} #ResaBtns p{ margin: 0} #ResaBtns a{ display: inline-block; background: #3d3c3c; padding: 8px 25px; text-transform: uppercase; border-top: 1px solid #fff; min-width: 260px; } #ResaBtns a#ResaHotel{ border-left: 1px solid #fff; } #ResaBtns a#ResaResto{ background: #d5bdaf; color: #fff; border-right: 1px solid #fff; } #SpecialAnnounce{ display: none;} #BreadCrumb{ display: table; text-align: center; padding: 20px 0;} #BreadCrumb li{ display: inline-block; margin: 0 3px; } #BreadCrumb a{ color: #000; letter-spacing: 1px; } #Sitemap{ margin: 30px 0} #Sitemap > li{ margin: 0 0 20px 0; padding-bottom: 20px; border-bottom: 1px solid #999; text-align: center;} #Sitemap a{ color: #000; letter-spacing: 1px;} #Sitemap .HTMLMenu-Level2 { /*padding-left: 20px;*/ } #Sitemap > li > a { font-size: 1.4em; } #SoonPopupW, #BkdoPopupW{ display: none;} #SoonPopup{ padding: 25px 100px;} /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * HOME * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #page-home #ContentW, #page-home #Content { height: auto;} #VideoW { box-sizing: border-box; height: 100vh; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; overflow: hidden; } #VideoHome{ position: absolute; z-index: -1;} .vjs-text-track-display {display: none; } #VideoW video, #VideoW .video-js{display: block; } .videopanelW{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .videopanel{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .videoOverlay, #VideoHomeCache{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;} .videoOverlay.overB{ background: rgba(0,0,0,0.3); } .videoOverlay.overW{ background: rgba(255,255,255,0.3); } #VideoHomeCache{ background: rgba(0,0,0,0); z-index: 0; left: 0; top: 0; position: absolute; width: 100%; height: 100%; } #VideoLogo{ width: 100%; text-align: center; padding-top: 37vh; display: none; } #VideoLogo img{ width: 600px; max-width: 90%;} #page-home #ContentW{ margin-top: 100vh; } #ArrowBottom{ position: absolute; bottom: 150px; left: 48.5%; z-index: 500;} #ArrowBottom a { } #ArrowBottom a span { position: absolute; cursor: pointer; top: 0; left: 50%; width: 80px; height: 80px; margin-left: -23px; border: 2px solid #fff; border-radius: 100%; box-sizing: border-box; } #ArrowBottom a:hover span { border-color: #aaa; } #ArrowBottom a span::after { position: absolute; top: 50%; left: 50%; content: ''; width: 16px; height: 16px; margin: -12px 0 0 -8px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-sizing: border-box; } #ArrowBottom a:hover span::after{ border-color: #aaa; } #ArrowBottom a span::before { position: absolute; top: 0; left: 0; z-index: -1; content: ''; width: 80px; height: 80px; box-shadow: 0 0 0 0 rgba(0,0,0,.2); border-radius: 100%; opacity: 0; -webkit-animation: sdb03 3s infinite; animation: sdb03 3s infinite; box-sizing: border-box; } @-webkit-keyframes sdb03 { 0% { opacity: 0; } 30% { opacity: 1; } 60% { box-shadow: 0 0 0 60px rgba(255,255,255,.1); opacity: 0; } 100% { opacity: 0; } } @keyframes sdb03 { 0% { opacity: 0; } 30% { opacity: 1; } 60% { box-shadow: 0 0 0 60px rgba(255,255,255,.1); opacity: 0; } 100% { opacity: 0; } } #HomeTitleW{ position: absolute; bottom: 100px; width: 100%; z-index: 200; } #HomeTitleW h2 { text-align: center; text-shadow: 10px 0px 15px rgba(0, 0, 0, 1); color: #fff;} #HomeTitleW h2 strong{ display: inline-block; border-bottom: 1px solid #fff; font-weight: 400; padding: 0 0 10px 0; margin: 0 0 10px 0; } #HomeTitleW h2 em{ font-size: 0.8em; font-weight: 300; font-style: normal;} #SoonAtelierW{ display: none;} #SoonAtelier{ padding: 40px 80px 100px; width: 400px; background: #d5bdaf; } #SoonAtelier p{ text-align: center; font-size: 2em; color: #fff; margin: 0; line-height: 1.2em;} #SoonAtelier p img{ width: 200px;} @keyframes scrollOrder { 0% {opacity: 0; top: 0; transform: scale(1);} 50%{opacity: 1; top: 20px; transform: scale(0.95);} 100% {opacity: 0; top: 0; transform: scale(1);} } .scrollIcon{ display: block; position: relative; margin: 20px auto 0; text-align: center; animation-name: scrollOrder; animation-duration:3s; animation-iteration-count:infinite; animation-timing-function:ease-in-out;; } .scrollIcon img{ } .homeSection, .contentSection{ padding: 60px 0 30px;/* overflow: auto; */ } .autoSection{ overflow: auto; clear: both; } .homeSection.paralax1{ background: url(../media/images/home/paralax1.jpg) no-repeat center !important; background-attachment: fixed !important;} .homeSection.paralax2{ background: url(../media/images/home/paralax2.jpg) no-repeat center !important; background-attachment: fixed !important;} .homeSection.paralax-visage{ background: url(../media/images/soins/visage/paralax.jpg) no-repeat center !important; background-attachment: fixed !important;} .introSection{ padding-top: 150px; padding-bottom: 0;} .starterdeco{ height: 50px; background: url(zims/frontend/pattern.jpg) no-repeat center top; background-size: 100% auto; border-top: 4px solid #d5bdaf; } .smallpadding{ padding: 30px 0; } .mediumpadding{ padding: 60px 0; } .bigpadding{ padding: 100px 0; } .bigpadding2{ padding: 150px 0; } .nospacetop{ padding-top : 0; margin-top : 0;} .homeSection ul{ } .homeSection p{margin-bottom: 25px; } .sable .homeSection, .sable .contentSection{ background: #d5bdaf; /*url(zims/frontend/pattern3.jpg) no-repeat center; background-size: cover;*/ } .sable .homeSection *, .sable .contentSection *{ color: #fff; } .sable .styledBlock *, .sable .styledBlock h3{ color: #fff !important; } .sable .homeSection .button, .sable .contentSection .button{ border-color: #fff; } .homeSection .styledBlock .button{ border-color: #000; } .sable .homeSection .styledBlock .button{ border-color: #fff; color: #fff; } .homeSection .button:hover, .contentSection .button:hover{ color: #fff; border-color: #d5bdaf !important; } .sable .homeSection .button:hover, .sable .contentSection .button:hover{ color: #000 !important; border-color: #fff !important; background: #fff; } .pattern .homeSection, .pattern .contentSection{ } .pattern .homeSection *, .pattern .contentSection *{ color: #000; } .pattern .homeSection .soulign { border-color: #000; } .pattern .contentSection *{ color: #000; } .leaf { } .leaf .homeSection, .leaf .contentSection{ } .leaf .homeSection.oneleaf, .leaf .contentSection.oneleaf{ background: none; } .leaf-r .homeSection, .leaf-r .contentSection{ } .leaf-l .homeSection, .leaf-l .contentSection{ } .dark .homeSection, .dark .contentSection{ background: #3D3C3C; } .dark .homeSection *, .dark .contentSection *{ color: #fff !important; } .dark .homeSection .bordered, .dark .contentSection .bordered{ border-top-color: #fff; border-bottom-color: #fff; } #HomeContentW h2{ font-size: 2.6em; color:#333; } #HomeContentW h3{ letter-spacing: 2px; font-size: 2.3em; color: #d5bdaf; line-height: 1em; } .bordered{ padding-top: 15px; padding-bottom : 15px;} .sidemargin{ margin-left: 25px; margin-right: 25px; } .away{ position: relative; opacity: 0;} .awayleft{ left: -200px;} .awayright{ right: -200px;} .awaytop{ top: -100px;} .awaybottom{ bottom: -100px;} .styledBlockW{ /*background: rgba(255,255,255,0.85);*/ padding: 15px; position: relative; z-index: 10;} .styledBlockW.big{ top: 20px;} .styledBlock{ padding: 10px 40px; border: 1px solid #d5bdaf; } .sable .styledBlock{ border: 1px solid #fff; } .styledBlock *{ color: #111; text-align: center; } .sable .styledBlock *{ color: #fff; } /*.decalLeft{ margin-left: -110px; } .decalRight{ margin-right: -110px; }*/ .styledBlockW .button, .white .button{ border-color: #111; color: #111;} .styledBlockW .button:hover, .white .button:hover{color: #fff; border-color: #d5bdaf !important;} .chambreTitle{ font-size: 1.2em; padding: 8px 15px; background: #d5bdaf; display: inline-block; } .chambrePresta{ margin-top: 20px; } .chambrePresta li{display: inline; float: left; width: 45%; margin-right: 5%; } .chambrePresta li:before { content: "\2022"; margin-right: 6px; color: #d5bdaf !important; } .sablecolor{ color: #d5bdaf !important;} .sable .chambreTitle, .dark .chambreTitle{ background: #fff; color: #d5bdaf !important;} .sable .chambrePresta li:before { color: #fff !important; } .whitecolor{ color: #fff !important;} span.zoomIco{ text-shadow: 3px 3px 10px rgba(0,0,0,0.8); font-size: 3.2em; position: absolute; z-index: 101; color: #fff !important; bottom: 10px; right: 10px; -moz-transition: right 0.3s ease-in-out, bottom 0.3s ease-in-out; -webkit-transition: right 0.3s ease-in-out, bottom 0.3s ease-in-out; -o-transition: right 0.3s ease-in-out, bottom 0.3s ease-in-out; -ms-transition: right 0.3 ease-in-out, bottom 0.3s ease-in-out; transition: right 0.3s ease-in-out, bottom 0.3s ease-in-out;} .sable .contentSection span.zoomIco svg, .dark .contentSection span.zoomIco svg{ color: #fff !important; } .offre{ margin-bottom: 25px;} .offre h3{ background: #d5bdaf; margin-bottom: 50px; padding: 8px 15px; margin-top: 0;} .offre .colZim{ width: 100% !important } .offreTarif{ border-top: 1px solid #111; font-style: italic; padding-top: 20px;} h4.sable{ font-size: 1.6em; color: #c69e63; margin: 5px 0 10px; font-weight: bold} .caractTable{ background: #d5bdaf; } .caractTable li{border-bottom: 2px solid #fff; color: #fff; padding: 10px 25px; font-size: 1.1em; } .caractTable li svg{ font-size: 1.3em; } .caractTable.lined{ overflow: auto;} .caractTable.lined li{ border: 0; border-right: 2px solid #fff; display: inline; float: left; width: 45.5%; padding: 10px 2%;text-align: center; } .caractTable li:last-child{ border: 0; } .sable .caractTable{ background: #fff; } .sable .caractTable li{border-color: #d5bdaf; } .styledBlockW .caractTable{ background: none; } .styledBlockW .caractTable li{border-color: #000; border-width: 1px; } #ServicesList{ display: table; width: 100%; text-align: center; border-top: 1px solid #666; border-bottom: 1px solid #666; padding: 15px 0; } #ServicesList li{ display: inline-block; width:12%; padding: 0 2%; text-align: center; line-height: 2em } #ServicesList li img{ width: 70px; } /*.stretchanim{ opacity: 0; position: relative; letter-spacing: 25px; transition: all 2.5s; line-height: 1.5em;} .stretchanim.unstretch{ letter-spacing: 1px; opacity: 1;}*/ .soulign{ display: inline-block; border-bottom: 1px solid #fff; margin-top: -20px; width: 100px; } /* SUB MENU */ #SubMenuW{ margin-bottom: 10px; position: relative; z-index: 100; top: -2px; } #SubMenuW.nomargin{margin-bottom: 0; } #SubMenuW ul.submenu{ background: #fff; width: 100%; display: table; text-align: center; border-bottom: 1px solid #d5bdaf; border-top: 1px solid #d5bdaf;} #SubMenuW.colormenu ul.submenu{ background: #fff; } #SubMenuW ul.submenu li{ display: inline-block; border-right: 1px solid #d5bdaf; } #SubMenuW ul.submenu li a { display: block; padding: 14px 30px; color: #000; text-transform: uppercase; -moz-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; -ms-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; } #SubMenuW ul.submenu li a:hover { background: #d5bdaf; color: #fff; } #SubMenuW ul.submenu li:last-child{ border-right:none } /*#SubMenuW ul.submenu li.current{ background: #fff; } #SubMenuW ul.submenu li.current a{ color: #000; }*/ .gallerylistW{ position: relative; max-height: 95vh;} .gallerylist img{display: inline-block; width: 100%; vertical-align: top;} .gallerylistArrow{ display: block; position: absolute; z-index: 100; top: 48%; width: 30px; height: 30px; cursor: pointer; } .gallerylistArrow.arrowL{ border-left: 3px solid #c8a997; border-top: 3px solid #c8a997; transform: rotate(-45deg); left : -60px;} .gallerylistArrow.arrowR{ border-right: 3px solid #c8a997; border-top: 3px solid #c8a997; transform: rotate(45deg); right : -65px; } .gallerylistArrow.arrowL.vertcolor, .gallerylistArrow.arrowR.vertcolor{ border-color: var(--vert); } .gallerylistW .slick-slide { /* margin: 0 20px */ } .optionFrame{ border: 2px solid #d5bdaf; padding: 20px; position: relative; margin: 40px 0; margin-left: 11.5%!important; margin-right: 11.5%!important; width: 30%; background: rgba(255,255,255,0.7); } .optionFrame h4{ background: #d5bdaf; padding: 5px 10px; position: absolute; top: -28px; left: -10px; display: inline-block; color: #fff; margin: 0;} .optionFrame ul li{margin-bottom: 10px; display: flex;} .optionFrame ul li span{ width: 70% } .optionFrame ul li span:last-child{ width: 30%; text-align: right; } #InstaList{ display: flex; width: 100%;} #InstaList > li{ flex:1; position: relative;} #InstaList > li span{ position: absolute; width: 85%; height: 85%; margin: 7.5%; text-align: center; z-index: 10; opacity: 0; background: rgba(255,255,255,0.7); -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #InstaList > li a:hover span{ width: 80%; height: 80%; margin: 10%; opacity: 1; } #InstaList > li svg{ font-size: 3em; padding-top: 42%; color: #b09586; } #InstaList > li img{ position: relative; z-index: 5; display: block; width: 100%;} #WordSliderWW{ height: 72px; overflow: hidden; background: url(zims/frontend/pattern.jpg) no-repeat center top; background-size: cover; padding-top: 50px; } #WordSliderW{ width: 100%; display: table; text-align: center; position: relative; opacity: 0; padding-top: 0;} #WordSliderW >div{ position: relative;} #WordSliderW .list{ font-size: 2.8em; padding: 0 10px; display: inline-block; margin-bottom: 20px; position: relative; } #WordSliderW .list.cloned{ position: absolute; top: 0px; left: 8px;} #WordSliderW .list li { float: left; color: #333; font-family: "Libre Caslon Display", serif; letter-spacing: 3px;} #WordSliderW .list li.spacer { width: 20px;} #WordSliderW .list span{ display: block; position: relative; font-weight: 300; /*text-shadow: 0px 2px 0px #d5bdaf;*/} .formation{ padding-top: 50px;} .formation h3{ display: block; padding-bottom: 10px; font-size: 2.2em; border-bottom: 2px solid #c8a997; margin-top: 0; margin-bottom: 15px; padding-top: 40px; } .desktop .formation .introW h3{ padding-top: 100px; } .formation h3.little{ font-size: 1.6em; } .formation h4{ border-bottom: 1px solid #888; font-size: 1.4em; padding-bottom: 3px; margin-bottom: 5px; } .formation .introW{} .formation .introW p{ line-height: 1.3em;} .formation .introW video{ display: inline-block; float: right; margin: 0 0 20px 50px; width: 25%;} .formation .textW{ margin-bottom: 25px;} .decoFormation{ display: block; float: right; width: 40%; margin: 0 0 20px 30px; min-width: 360px;} .formation .lefted{} .formation li.lefted *{ text-align: left; } .formationProg{ text-align: left; } .formationProg strong.num{ font-size: 1.6em; } .prestaList{ overflow: auto; } .goldsepar{ margin-top: 40px; border-top: 2px solid; border-image-slice: 1; border-image-source: linear-gradient(45deg, rgba(226,185,101,1) 3%, rgba(232,199,105,1) 14%, rgba(252,246,186,1) 38%, rgba(227,190,111,1) 57%, rgba(251,245,183,1) 83%, rgba(236,204,120,1) 95%); } .prestaList li{ width: 47.5%; float: left; text-align: left; margin-bottom: 10px;} .prestaList li:nth-child(odd){ margin-right: 5%; clear: left; } .prestaList.centered li, .prestaList.centered li *{ text-align: center; } .prestaList.centered li h4{ display: inline-block; margin-bottom: 8px;} .price{ border: none !important;} .solutiontech{ } .solutiontech img{ width: 100%; display: block; margin-bottom: 25px; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * NEWS * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #page-contact #ZoomHalfBanner #page-actualite #ZoomHalfBanner{ height:400px; } .noData{ margin: 160px 10%; font-size: 1.3em; font-style: italic; width: 80%;} #ActusList{ margin: 40px auto;} #ActusList li:nth-child(3n+1){ clear: left; } .actu{ position: relative; margin-bottom: 30px;} .actu h3{ margin: 0; height: 100%; position: relative; overflow: hidden;} .actu a { display: block; vertical-align: top;} .actu a img{ width: 100%;} .actu-listItemOverlay { position: absolute; top: 0; left: 0; display: table; height: 92%; width: 92%; vertical-align: middle; padding: 4%; background: rgba(20,20,20,0.2); } .chrome .actu-listItemOverlay { width: 93%; height: 100%;} /*.actu a:hover .actu-listItemOverlay { padding: 0; width: 100%; height: 100%}*/ .actu-listItemTitle{ font-size: 1.3em; line-height: 1.4em; margin: 0; color: #fff; height: 100%; width: 100%; display: table-cell; text-align: center; vertical-align: middle; text-transform: uppercase; padding: 10px; border: 1px solid #000; } .actu a:hover .actu-listItemTitle { border: 1px solid #fff;} .actu-listItemSubtitle{ font-size: 0.5em; display: inline-block; margin-top: 20px; border-top: 1px solid #fff; line-height: 1.2em; padding-top: 10px; } .backLink{ display: block; margin-top: 15px; font-size: 1.1em; text-transform: uppercase; letter-spacing: 0; color: #111;} .actuSubtitle{ background: #d5bdaf; text-align: center; color: #111; padding: 0.6em 10px; margin-top: 0; text-transform: uppercase; font-style: italic; font-size: 1.3em; } .actuFlyerW{} .actuFlyerW img, .actuHeaderW img, .actuFooterW img{ display: block; width: 100%;} .actuHeaderW{ margin-bottom: 40px;} .actuFooterW { margin-top: 20px;} .blogactu{ } .blogactucontents{ gap: 40px; flex-wrap: wrap; padding-top: 20px;} .blogzim{ width: calc(30% - 40px); } .blogzim img{ display: block; width: 100% } .blogtextW{ width: 70% } .blogtextW.full{ width: 100% } .blogtextW h2{ color: var(--bleu); margin: 0 0 20px 0; } .blogtextW h3{ color: var(--bleu); } .blogGal{ gap: 30px; flex-wrap: wrap;} .blogGal li{ width: calc(25% - 24px); } .blogGal img{ display: block; width: 100% } .eventList{ display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; } .eventList li{ width: calc(25% - 30px); min-height: 300px; position: relative;} .eventList li img{ width: 100%; display: block; position: relative; z-index: 1; } .eventList li a span.eventOv{ width: 100%; height: 100%; display: flex; position: absolute; z-index: 5; top: 0; left: 0; background: rgba(0,0,0,0.4); -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .eventList li a span.eventTitle{ width: 100%; height: 100%; display: flex; position: absolute; z-index: 10; flex-direction: column; align-items: center; text-align: center; color: #fff; justify-content: center; font-size: 1.8em; line-height: 1.1em; top: 0; left: 0; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .eventList li a span.eventTitle span{ font-size: 0.7em; } .eventList li a:hover span.eventTitle{ color: #000; } .eventList li a:hover span.eventOv{ background: rgba(0,255,19,0.5); } .noData{ padding: 150px 0; text-align: center; font-style: italic; font-size: 1.5em;} /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * CHAMBRES / REU * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ .bigItemList{ clear: both; padding: 0; margin: 0; width: 100%; display: flex; flex-wrap: wrap; text-align: center; gap: 30px; justify-content: center;} .chambre{ position: relative; width: calc(33.33% - 20px); margin: 0; } .col4 .chambre{ position: relative; width: calc(25% - 24px); margin: 0; } .chambre .decoline{ display: block; background: #d5bdaf; width: 80%; left: 10%; bottom: -15px; height: 30px; padding-top: 20px; color: #fff; position: absolute; } .chambre h3{ margin: 0; overflow: hidden;} .chambre-couvLink{ display: block; position: relative; vertical-align: middle; height: 400px; } .chambre-couvLink img{ display: inline-block; height: 100%; position: absolute; z-index: 10; vertical-align: top; display: none;} .chambre-overlay{ position: absolute; z-index: 15; display: table; height: 100%; width: 100%; vertical-align: middle; background: rgba(10,10,10,0.15); -moz-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; -ms-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; } .chambre-titre{ font-size: 1.5em; line-height: 1.3em; text-align: center; vertical-align: bottom; text-transform: uppercase; margin: 0; height: 100%; width: 100%; color: #fff; display: table-cell; } .chambre-button{ font-size: 0.4em; padding: 5px 7px; line-height: 1.5em; text-align: center; vertical-align: middle; color: #fff; } .chambre-couvLink:hover .chambre-overlay{ background: rgba(213,189,175,0.4); color: #fff; } #PresseList{ display: flex; flex-wrap: wrap; gap: 20px 30px; margin-bottom: 40px; justify-content: center; } #PresseList > li{ width: calc(33.33% - 65px); padding: 20px; background: #edede9; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } #PresseList.col2 > li{ width: 45%; background: #edede9; } #PresseList > li img{ width: auto; max-width: 100%; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 10px; } #PresseList > li span.articleTitle{ display: block; border-top: 2px solid #fff; padding-top: 15px; margin-top: 0; text-transform: uppercase; color: #b19a8d; } #PresseList > li span.articleDate{ font-size: 0.9em; } #PresseList.partners li{ width: calc(17% - 30px); padding: 15px 2%; background: #e3d5ca; } #PresseList.partners li .logoW{ display: flex ; min-height: 220px; align-items: center; } .hashListW { position: relative; display:block; text-align: center; } .hashListW img { position: relative; z-index: 10; vertical-align: top; } .hashList { display: flex; flex-wrap: wrap; position: absolute; bottom: 7px; left: 7px; width: calc(100% - 14px); z-index: 20; gap: 7px; } .hashList > li { white-space: nowrap; /* empêche le contenu de se couper à la ligne */ overflow: hidden; /* évite les débordements visibles */ text-overflow: ellipsis; /* ajoute "..." si le mot est trop long (optionnel) */ padding: 4px 6px; background: #d5bdaf; border-radius: 5px; text-transform: uppercase; color: #fff; } /* .hashList{ display: flex; position: absolute; bottom: 7px; left: 7px; width: calc(100% - 14px); z-index: 20; gap: 7px; } .hashList li{ padding: 4px 6px; background: #d5bdaf; border-radius: 5px; text-transform: uppercase; color: #fff;} */ .soinsList{ display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; } .soinsList li{ overflow: hidden; aspect-ratio: 1 / 1; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #fff; color: #fff; padding: 30px 20px; font-size: 1.1em; text-align: center; line-height: 1.4em; display: flex; width: calc(25% - 50px); align-items: center; justify-content: center; flex-direction: column; } .soinsList li strong{ font-size: 1.5em; padding-bottom: 5px; line-height: 1.2em;} .soinsList li.soinZim{ border: none; padding: 2px; } .soinsList li.soinZim img{ height: 100%; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DEVIS * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /*#page-event form input { border-bottom: solid 1px rgba(0, 0, 0, 0.85); } #page-event form label { color: #000; }*/ /*#EventW, #PostuleW, #MentionsW{ margin: 0 0 40px 0; } #EventForm .textField label, #EventForm .textareaField label, #PostuleForm .textField label, #PostuleForm .textareaField label { text-align: left; margin-bottom: 7px; display: block;} #EventForm fieldset p, #PostuleForm fieldset p{ width: 47.5%; display: inline; float: left; text-align: left; margin-bottom: 40px;} #EventForm fieldset p#field-datesevent, #EventForm fieldset p#field-budget { margin-right: 5%; width: 20%; } #EventForm fieldset p#field-datesflex { margin-right: 7.5%; width: 20%; } #EventForm fieldset p#field-budgetflex { margin-right:0; width: 20%; } #EventForm fieldset p#field-datesevent, #EventForm fieldset p#field-nom{ clear: left; } #EventForm fieldset p#field-nom, #EventForm fieldset p#field-email{ margin-right: 5%; } #EventForm fieldset p#field-typeevent, #EventForm fieldset p#field-infos, #EventForm fieldset p#field-newsletter{ width: 100% } #EventForm fieldset p#field-societe{ margin-top: 50px;} #EventForm fieldset p#field-tel { width: 20%; } .uniqueCheckBoxField input{ width: auto; } #EventForm ::placeholder, #PostuleForm ::placeholder { color: #fff; } */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * CONTACT * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* #ContactW{ width: 80%; margin: 0 10%; overflow: auto;} #FormW, #CoordsW{ display: inline; float: left;} #FormW{ width: 60%; margin-right: 5%; } #CoordsW{ width: 35%; } #ContactW h3{ font-style: italic; text-transform: uppercase; font-weight: 900; font-size: 2em; }*/ #jGMapW { width:100%; height:700px; margin:0; border:none; clear: both; } #jGMapW .vcard{ } #jGMap { width:100%; height:100%; } .vcard p { margin:0 0 15px 0; padding:0; font-size:1em; line-height: 1.2em;} .vcard .tel .type, .vcard .uri, .vcard .geo { display:none; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * FANCY * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #ContactBlock { margin-right: 4%; padding: 50px 0;} #ContactBlock svg { font-size: 2em; color:#d5bdaf } #ContactFormWW{ padding: 50px 0;} #ContactForm{ margin: 25px 0; padding: 0 0 0 0%;} #ContactForm fieldset p{ width: 45%; display: inline; float: left; margin-bottom: 40px;} #ContactForm fieldset p#field-nom, #ContactForm fieldset p#field-email{ margin-right: 5%; } #ContactForm fieldset p#field-objet, #ContactForm fieldset p#field-message{ width: 100%; } #objet, #message{ width: 93%; } /* #ContactForm fieldset p#field-date, #ContactForm fieldset p#field-heure, #ContactForm fieldset p#field-nbpers{ width: 30%;}*/ #message{ height: 100px; } #date, #heure, #nbpers{ width: 90px; } /*.formButtons { display: inline; float: left; width: 100%; texta-lign: center;} .formButtons input{ padding: 0.5em 2em; line-height: 2em; border-color: #222; color: #222;} .formButtons input:hover{ color: #fff;}*/ .formButtons input{ background: #fff; color: #000; font-size: 1em; border-color: #000; } .textField label{ display: none;} p#Confirmation{ font-size: 1.2em; font-weight: 300; color: #222; line-height:1.3em; margin: 100px 0; text-align:center; } /*.fancybox-inner p#Confirmation{ padding: 50px 15px; margin: 0;} #FancyContactBox{ width: 600px; background: #cb1517; } #FancyContact{ padding: 0 25px 25px; } #FancyContact h2{ color: #000; font-size: 2.5em; font-weight: 900; letter-spacing:normal; font-style:italic; text-transform: uppercase; margin: 0 0 15px 0; text-align:left; padding-top: 15px;} #ContactForm{ margin: 0;} input{ width: 90%; margin: 0;} #ContactForm fieldset p{ width: 43%; display: inline; float: left;} #ContactForm fieldset p#field-nom, #ContactForm fieldset p#field-email{ margin-right: 10%; } #ContactForm fieldset p#field-objet, #ContactForm fieldset p#field-message{ width: 96%; } #message{ height: 100px; } .formButtons { display: inline; float: left; width: 100%; text-align: center;} #EsssaiBox{ margin: 15px 0; color: #fff; font-size: 1.5em; font-weight: 700; letter-spacing:normal; font-style:italic; width: 100% !important; text-transform:uppercase; line-height: 25px; } #EsssaiBox img{ vertical-align: middle; margin-right: 15px; float: left; display: block; } */ .mobonly{ display: none !important} @media(max-width:1700px) { } @media(max-width:1440px) { #MainResaLink{ right: 15px; padding: 7px 20px; } .carteCategTitle{ font-size: 3em;} .carteCategTitle.longtitle{ font-size: 2.6em; } #LangLinks li { margin-right: 8px; } } @media(max-width:1350px) { #UpperMenu ul#LeftUpperMenu { padding-left: 15%; width: 29%;} .soinsList { margin-left: 2.5%!important; margin-right: 2.5%!important; width: 95%; } .soinsList li { padding: 30px 10px; width: calc(25% - 40px); } } @media(max-width:1200px) { /*.centeredlist80, .centeredlist85, .centeredlist74, .centeredlist70, .centeredlist60 { margin-left: 5%!important; margin-right: 5%!important; width: 90%}*/ } @media(max-width:1024px) { body { font-size:17px; } input, select, textarea { font-size: 17px; } .nomob{display: none !important } .mobonly{ display: inline !important} #Header { background-position: center -54px; } #MainSelector { top: 16px; right: 2%; } #MainSelector .resaLegend { padding: 6px 12px; font-size: 1.1em; letter-spacing: 0.5px; } /*#MainSelector .resaLegend { padding: 11px 9px 0 7px; color: #000;} #MainSelector p a.gotoRooms, #MainSelector p a.gotoRooms:hover{ background-position: -82px 8px; } #MainSelector p a.gotoResto, #MainSelector p a.gotoResto:hover{ background-position: -82px -53px;} #MainSelector p a { width: 45px; }*/ #HomeLinkW { text-align: left; margin: 10px 0 0 2%;} #HomeLinkW a { width:60px !important} #HomeLinkW a img { width: 100%; padding-top:10px; } .scrolled #HomeLinkW a , .forcedHeader #HomeLinkW a { } /*.scrolled #Header, .forcedHeader #Header{ background-color: rgba(0,0,0,0.9); }*/ #LangsW { left: 65px; top: 24px; width: 62px; display: none; } .open #LangsW { display: block;} #NavIco { top: 27px; left: 80px; } .open #NavIco { left: 15px; } .subactivated #NavIco span { background: #000; } #Menu{ width: 100%; } #MainMenuW { padding-top: 75px; margin-bottom: 15px; } #MainMenu > li > a, #MainMenu > li > strong { padding: 5px 0 4px 15px; -moz-transition: background-color 0s ease-in-out, color 0s ease-in-out; -webkit-transition: background-color 0s ease-in-out, color 0s ease-in-out; -o-transition: background-color 0s ease-in-out, color 0s ease-in-out; -ms-transition: background-color 0s ease-in-out, color 0s ease-in-out; transition: background-color 0s ease-in-out, color 0s ease-in-out; } #MainMenu li{ font-size: 0.95em; padding: 7px 0; } #MainMenu > li{ position: relative; } #MainMenu > li > a:hover, #MainMenu > li > strong:hover, #MainMenu > li.actived > a, #MainMenu > li.actived > strong { color: #000; background-color: #fff; } #MainMenu-resa-Item{ color: #fff; background-color: #000;} #MainMenu-resa-Item a{ color: #fff !important; } #MainMenu > li > a svg , #MainMenu > li > strong svg { font-size: 1.3em; } #UpperMenu{ } /*#UpperMenu ul#LeftUpperMenu { padding-left: 25%; width: 50%; }*/ #UpperMenu > ul#RightUpperMenu { margin-top: 20px; } #UpperMenu > ul#LeftUpperMenu { padding-left: 89px; margin-top: 70px; } #MainBkdoBtn{ display: none !important;} #InstaSelector { left: 35%; top: 65px; } h2.pageTitle{ font-size: 2.5em;} h3{ font-size: 1.4em; } .screenZimW{ position: static; height: 300px;} .screenZim{ display: block; position: static; width: 100%;} .screenPanelW, .screenPanel{ position: static;} .halfPanel{ width: 100%; padding-top: 20px; height: auto; background-image: none; } .mainTextW{ width: 83%; padding: 20px 0 30px 20px; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus, select:focus { border-color: #6c5953; } #FooterMenu, #FooterNews, #FooterAddr{ display: block; float: none; width: 100%;} #FooterMenu { text-align: center;} #FooterNews{ margin-top: 50px;} #FootNewsCheck { bottom: -20px; right: 47%; } #NewsletterForm{width: auto; } #FooterNews .textField, #FooterNews .formButtons{ display: block; float: none; margin: 0 0 25px 0 !important; width: 100% !important;} #FooterAddr{ text-align: center; margin-left: 0 } #AllLink{ margin-top: 50px;} #FooterSocials{ display: block; margin-top: 50px;} #FooterMenu li{ padding: 8px 0;} #FooterMenu a{ font-size: 1.2em;} #FooterLinks, #FooterCoords { display: block; float: none; width: 100%; margin: 40px 0; text-align: center; } #FooterCoords *{ text-align: center;} #FooterCoords .button{ float: none; display: inline-block; margin: 0 auto;} #ZoomHalfBanner { height: 300px; } #page-home #ZoomHalfBanner { height: 600px; } #ZoomHalfBanner h2 { font-size: 2.5em; line-height: 1.1em; } /* */ #HomeTitleW h2 strong{ padding: 0 4% 15px; line-height: 1em; font-size: 3em; transition: unset !important;} #HomeTitleW h2 em {display: inline-block; padding: 0 2%; font-size: 1.8em; line-height: 1.5em; } .homeSection .spacer, .homeSection .spacerMega{ padding-top: 0;} .centeredlist{ display: block;text-align: left; padding-top: 25px; } .centeredlist80, .centeredlist85, .centeredlist74, .centeredlist70, .centeredlist60 { margin-left: 5%!important; margin-right: 5%!important; width: 90%} .centeredlist > li, .centeredlist.col3 > li, .centeredlist.col4 > li{ display: block; vertical-align: top; position: relative;} .centeredlist > li, .centeredlist > li.col60, .centeredlist > li.col50, .centeredlist > li.col40, .centeredlist > li.col30, .centeredlist > li.col45 { width: 100%; } .centeredlist > li.decalleft{ margin-left: 0} .centeredlist > li.decalright{ margin-right: 0} .centeredlist > li.decalleft{ margin-left: 0} .centeredlist > li.decalleftmini{ margin-left: 0} .centeredlist > li.decalright{ margin-right: 0} .centeredlist > li.decalrightmini{ margin-right: 0} .centeredlist > li:nth-child(odd) { margin-bottom: 25px; } .sidepadding{ padding-left: 0; padding-right: 0;} .sidemargin{ margin-left: 0; margin-right: 0;} .mediumpadding { padding: 40px 0; } .RearBigTitle { width: 100%; opacity: 0.8; line-height: 1.5em; font-size: 1.4em !important; position: relative; bottom: -65px !important; } .galleryArrowW{ position: absolute; right: 0; width: 10%; z-index: 900; top: 30%;} .galleryArrow { font-size: 2em; } .styledZimFloat{ left: 0 !important;} #DesignFloatLinks{ right: 0;} .scroll-section { display: none; } #ArrowBottom2{ display: block; } .mobpadding { padding-top: 60px;} .titlepadding, .titlepaddingmini, .titlepaddingmedium, .titlepaddingbig{ padding-top: 0; margin-top: 30px;} .mega { font-size: 2.5em !important; } .mega .mega { font-size: 1.8em !important; } /*.mega .sfont { font-size: 3em !important; }*/ .ultra { font-size: 3em !important; } #SubMenuW ul.submenu li {padding: 0 5px; } #SubMenuW ul.submenu li a { padding: 10px 7px; } .styledBlockW { padding: 0; } .styledBlock { padding: 15px; } .headerBand { height: 127px; background-size: auto 100%; } .righted *, .righted, .centeredlist > li p.righted{ text-align: left; } #page-home #UpperNav{ display: block; right: 0;} #HomeTitleW{ bottom: 5%;} #HomeContentW h3, .contentSection h3 { font-size: 1.5em; } .homeSection, .contentSection { padding: 20px 0; } .decalLeft{ margin-left: 0;} .decalRight{ margin-right: 0;} .styledBlock { padding: 20px; } .styledBlockW{ top: 0 !important; } #SubMenuW ul.submenu li{ border: none;} .chambre-details { width: 95%; } .chambre-details-text { width: 100%; display: block; float: none; margin-right: 0; } .chambre-miniGalW { display: block; float: none; width: 100%; height: 260px; } .miniGalArrow { top: 30%; } .chambre-detailEquip li { width: 100%; margin-right: 0; } .chambre-couvLink{ height: 240px; } #InstaList { flex-wrap: wrap; } #InstaList > li { flex: unset; width: 50%; } .gallerylistArrow { top: 45%; } .gallerylistArrow.arrowL { left: 20px; } .gallerylistArrow.arrowR { right: 20px; } .soinsList { gap: 20px; } .soinsList li { padding: 20px 20px; width: calc(100%); } /*#HomeTitleW h2 { font-size: 1.2em;} #HomeTitleW h2 span{ bottom: 40px !important} .homeSectionW { padding-bottom: 110px !important; } #HomeDestination{ padding-bottom: 70px !important; } #HomeDestination .RearBigTitle{ bottom: -20px !important; } #HomeGal{ padding-bottom: 70px !important; } #HomeGal .RearBigTitle { bottom: -30px !important; } #HomeDestination .RearBigTitle.mobDecal{ bottom: -55px !important; } .RearBigTitle.mobDecal2{ bottom: -45px !important; } .RearBigTitle.mobDecal3{ bottom: -45px !important; } #HomeContentW h2 { font-size: 2.4em;} #Logo-Umami, #Logo-Filia{ width: 175px; } */ #ActusList li{ width: 100% !important; margin-right: 0; } /* FORMS */ #EventForm fieldset p, #PostuleForm fieldset p { width: 100%; display: block; float: none; } #EventForm fieldset p#field-datesevent, #EventForm fieldset p#field-budget { margin-right: 0; width: 100%; } #EventForm fieldset p#field-datesflex, #EventForm fieldset p#field-budgetflex, #EventForm fieldset p#field-tel { margin-right:0; width: 100%; } /* CONTACT */ #FancyContactBox{ width: auto; } #ContactW{ width: 90%; margin: 0 5%;} #FormW, #CoordsW{ display: block; float: none;} #FormW{ width: 100%; margin-right: 0; } #CoordsW{ width: 100%; } #ContactForm fieldset p{ width: 100%; display: block; float: none;} #ContactForm fieldset p#field-objet, #ContactForm fieldset p#field-message{ width: 92%;} #jGMapW { width:100%; height:600px; } #ServicesList li{ display: inline-block; width:44%; padding: 0 2%; text-align: center; line-height: 2em; margin-bottom: 25px; } #ServicesList li img{ width: 55px; } .bigItemList { margin: 0 2.5%; width: 95%; } .chambre, .col4 .chambre { width: 100%; margin: 0 0 50px; } .chambre-titre { font-size: 1.2em; } .homeSectionW.pattern .introSection{ padding-top: 150px; } .homeSectionW.pattern .introSection h2 { line-height: 1.3em;} .homeSectionW.pattern .introSection h2 .soulign { display: none } .optionFrame { margin-left: 2.5% !important; margin-right: 2.5% !important; width: calc(95% - 40px); } .citationFrame { margin: 25px 0; } #ContactBlock { margin-right: 0; padding: 0 0 20px 0; } #PresseList { } #PresseList > li { width: 100%; padding: 20px; } #PresseList.col2 > li{ width: 100%; } } @media(max-width:768px) { #HomeTitleW { bottom: 15%;} #FootMenu li { width: calc(100%); } #SoonPopup { padding: 25px; } .forcedHeader #Content{ padding-top: 120px;} .formation .introW video { display: block; float: none; margin: 0 0 20px 0; width: 100%; } .formation { padding-top:0; } .goldsepar{ padding-top: 25px;} .blogactucontents{ flex-direction: column; } .blogzim, .blogtextW { width: calc(100%); } .blogGal li { width: calc(100%); } } @media(max-width:600px) { #Copyrights{ padding: 0 20px; } } @media(max-width:375px) { #HomeTitleW h2 { font-size: 1em;} input, select, textarea { font-size: 15px; } .verticalgallery{ min-height: 150px; } #MainMenu li{ font-size: 1.1em; } #HomeContentW h2 {font-size: 2em; } #jGMapW { height:500px; } }