/************************************************************************* _____ _____ _ __ _ _____ _ __ _____ _____ | _ \ / _ \ | | | \ | | |_ _| | | / / | ____| | _ \ | |_| | | | | | | | | \| | | | | | __ / / | |__ | |_| | | ___/ | | | | | | | |\ | | | | | / | / / | __| | _ { | | | |_| | | | | | \ | | | | |/ |/ / | |___ | |_| | |_| \_____/ |_| |_| \_| |_| |___/|___/ |_____| |_____/ ************************************************************************** @ Copyright © 2019 POINT WEB @ Catégorie : Structure site @ Site : @ Auteur : SERCO POINT WEB / www.point-web.fr **************************************************************************/ /************* GENERAL **************/ #explicitsubmit, #explicitsubmit:focus{border:none;background:transparent;color:#FFF;margin-left:0.5em;outline:none;} input#impliedsubmit{background-color:#FFF;color:#3e4035;border:none;border-radius:100px;margin:0 0 0 1em;padding:0 0.5em;font-size:10px;} *, *:after, *:before{-webkit-tap-highlight-color:transparent;list-style-position:inside;list-style-type:none;color:inherit;box-sizing:border-box;margin:0;padding:0;outline:none;position:relative;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;} *:after,*:before{display:inline-block;z-index:1;} html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td,p,figure,figcaption,button,var,abbr{font-style:normal;border:0;font-size:inherit;color:inherit;background:transparent;text-decoration:none;font-family: proxima-nova, sans-serif;} section,article,header,footer,nav,aside{display:block; font-family: proxima-nova, sans-serif;} table,td,blockquote,code,pre,textarea,input,video{max-width:100%;} p,dd,ul{word-wrap:break-word;-webkit-hyphens:none;-ms-hyphens:none;-o-hyphens:none;hyphens:none;} input,textarea,button{resize:none;-webkit-appearance:none;font-family:inherit;} img{border:none;max-width:100%;height:auto;} a,button{border:0;cursor:pointer;color:inherit;text-decoration:none;transition:.25s;} a,a:hover,a:active,a:focus,button,button:hover,button:focus,button:active{text-decoration:none;outline:none;} .clear{clear:both;background:none;outline:none;border:none;height:1px;margin:0;} .swiper-slide{display:flex;align-items:center;overflow:hidden;flex:1 0 auto;height:100%;} .swiper-wrapper{display:flex;flex-wrap:nowrap;height:100%;} [data-link]{cursor:pointer;} [data-bg]{background-size:cover;background-position:center center;} [data-mail]{cursor:pointer;display:inline!important;} [data-zoom]{cursor:zoom-in!important;} [data-grid] > *{position:absolute;transition:transform .5s;transform:scale(0);} [data-grid] > *.show{position:absolute;transform:scale(1);} strong{font-weight:bold;} i.fa-at{font-size:90%!important;top:1px!important;margin:0!important;} hr{outline:none;border:none;} .paragraphe {color:#666666; font-size: 16px;} .separator{display:block;width:100%;height:1px;background:#d0d0d0;margin:10px auto;} .important{font-weight:bold;color: #951b81;font-size:20px;margin-bottom:1em;} a:hover {color: #67b52e;} /* autocomplete styles in Chrome */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 0 #000 inset;transition:background-color 5000s ease-in-out 0s;background-color:inherit!important;} /* selection styling */ *::-moz-selection{background: rgba(149, 27, 129, 0.5);color:#fff;} *::selection{background: rgba(149, 27, 129, 0.5);color:#fff;} /* selection placeholder */ ::-webkit-input-placeholder{color:inherit;opacity:.5;} ::-moz-placeholder{color:inherit;opacity:.5;} ::-ms-input-placeholder{color:inherit;opacity:.5;} /* scroll fix */ [data-scrollfix]{z-index:999;cursor:pointer;transition:.25s;background: #951b81;color:#fff;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;text-align:center;position:fixed;bottom:25px;right:25px;opacity:0;visibility:hidden;} .fix [data-scrollfix]{opacity:1;visibility:visible;} [data-scrollfix].down{transform:rotate(180deg);} /* reset bootstrap */ .btn-link{color: #951b81;} .btn-link:hover{color: #67b52e;} /* error */ .error-page{text-align:center;padding:calc(20px + 5%) 0;} .error-page img{width:300px;max-width:70%;} .error-page .error-code{letter-spacing:2px;margin-top:calc(25px + 2%);font-size:calc(18px + 20 * (100vw - 320px) / 1080);font-weight:bold;text-transform:uppercase;} .error-page p{font-size:calc(13px + 2.5 * (100vw - 320px) / 1080);margin:10px 0 calc(15px + 2%);} /* html body */ html{width:100%;overflow-x:hidden;line-height:1;} body{width:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .btn-primary {color: #fff;background-color: #67b52e;border-color: #67b52e; font-weight: 100; text-transform: uppercase; border-radius: 50px; font-size: 12px; padding: 1em 2em;letter-spacing: 2px;} .btn-primary:hover {color: #fff;background-color: #951b81;border-color: #951b81;} .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem rgba(78, 194, 34, 0.5);} .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {color: #fff;background-color: #67b52e;border-color: #67b52e;} .btn-secondary {color: #951b81;background-color: transparent;border-color: transparent;font-weight: 800;padding: 0;} .btn-secondary:hover {color: #479c29;background-color: transparent;border-color: transparent;} .btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem rgba(108, 117, 125, 0);} .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {color: #479c29;background-color: transparent;border-color: transparent;} .btn-danger {color: #fff;background-color: #951b81;border-color: #951b81; font-weight: 100; text-transform: uppercase; border-radius: 50px; font-size: 12px; padding: 1em 2em;letter-spacing: 2px;} .btn-danger:hover {color: #fff;background-color: #479c29;border-color: #479c29;} .btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-danger.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem rgba(149, 27, 129, 0.5);} .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle {color: #fff;background-color: #951b81;border-color: #951b81;} /*.btn-success {color: #fff;background-color: #479c29;border-color: #479c29; font-weight: 100; text-transform: uppercase; border-radius: 50px; font-size: 12px; padding: 1em 2em;letter-spacing: 2px;}*/ .breadcrumb {background-color: transparent; padding: 0; font-weight: 300;letter-spacing: 2px; padding-bottom: 2em;} .breadcrumb::before { font-family: "Font Awesome 5 Pro", sans-serif;content: "\f015"; padding-right: 0.5em;} .breadcrumb-item + .breadcrumb-item::before {display: inline-block;padding-right: .5rem;padding-left: .5rem;color: #67b52e;content: "\f105";font-family: "Font Awesome 5 Pro", sans-serif;font-weight: 300;} .breadcrumb a{ color: #4e4c4d; } .breadcrumb-item a:focus{ color: #951b81;} .breadcrumb-item a:active{ color: #4e4c4d;} .breadcrumb-item.active {color: #951b81;} .sitemapPAGE .breadcrumb li{ list-style-type: none;} .sitemapPAGE h3 {padding-bottom: 1em} .sitemapPAGE li{ list-style-position: inside; line-height: 24px;color: #951b81;} .sitemapPAGE .liens li a { color: #67b52e; } .sitemapPAGE .liens li:nth-child(odd) a {color: #951b81;} .sitemapPAGE .liens li:nth-child(odd){color: #67b52e;} .sitemapPAGE .liens li a:hover{ text-decoration: underline;} @media screen and (min-width:0\0) { .d-flex, .icon {width: 100%;} #slider .container, #slider .swiper-slide::before{left: 0!important; } #formulaire form {width: 100% !important} #slider .swiper-slide::before {top:0;} [data-nav] {justify-content: none;} } /*----------------------------------------------------< APP >---------------------------------------------------*/ /************* header **************/ #header{z-index:9999999;transition:transform .6s;width:100%;position:absolute;} .fix #header{position:fixed;} .down #header{transform:translateY(-100%);} #header .top{background: #ffffff;color:#fff;padding:10px 0;} #header .bottom{background:#fff;padding:2em 0;} #header .bottom .container{display:flex;align-items:center;justify-content:space-between;} /*#header .right {width: 100%;}*/ #logo {max-width: 70%; width: 80%} /************* data-nav **************/ [data-nav]{transition:.3s;display:none;width:60px;height:60px;border:1px solid #eee;border-radius:50%;align-items:center;cursor:pointer;} [data-nav]:hover{border-color: #951b81;} .openNav [data-nav]{transform:rotate(90deg);} [data-nav] > div{background:#888;transition:.3s;margin:auto;align-self:center;width:25px;height:2px;} [data-nav]:hover > div, [data-nav]:hover > div:before{background: #951b81;} [data-nav]:hover > div:after{background: #951b81;} .openNav [data-nav] > div{width:0;} [data-nav] > div:before, [data-nav] > div:after{left:0;transition:.3s;content:'';width:25px;height:2px;background:#888;position:absolute;} [data-nav] > div:before{top:-7px;} [data-nav] > div:after{bottom:-7px;} .openNav [data-nav] > div:before{transform:rotate(45deg);left:-7px;top:-8px;transform-origin:top left;} .openNav [data-nav] > div:after{transform:rotate(-45deg);left:-7px;bottom:-9px;transform-origin:bottom left;} /************* slider **************/ #slider{width:100%;height:700px;min-height:400px;background:#eee;} #slider > div{width:100%;height:100%;} #slider .swiper-slide{padding:0 calc(20px + 3%);overflow:hidden;align-items:center;height:100%; text-align: center} #slider .swiper-slide::after{left: 0;width:100%; height:100%;content:'';position:absolute;background: linear-gradient(180deg, rgba(95,53,231,0.6) 0%, rgba(95,53,231,0) 100%);} #slider .swiper-slide::before{left: 0;width:100%; height:100%;content:'';position:absolute;background: linear-gradient(90deg, rgba(149,27,128,0.8) 0%, rgba(149,27,128,0) 100%) ;} #slider .container{line-height:1;text-shadow:0 3px 5px rgba(0,0,0,.3);z-index:1000;color:#fff; top:-40px;} #slider .title{transition:opacity 1s, top 1s;opacity:0;top:-50px;font-size: 14px;font-weight:200;letter-spacing: 3px; padding-bottom: 1em} #slider .end .title{opacity:1;top:0;} #slider h2 {transition:opacity 1s, top 1s;opacity:0;top:50px;font-size: 38px; font-weight: 300; white-space: pre-line;padding: 0 0 0.5em;} #slider .end h2{opacity:1;top:0;} #slider .btn{transition:all .25s, opacity 1s, bottom 1s;bottom:-40px;opacity:0;} #slider .end .btn{bottom:0;opacity:1;} #slider [data-bg]{transition:transform 1s;z-index:0;position:absolute;width:100%;height:100%;top:0;left:0;} #slider .end [data-bg]{transform:scale(1.05);} #slider .nav{position:absolute;z-index:90;padding:2px;} #slider .nav button{border:1px solid #fff;margin:10px;width:40px;height:40px;display:inline-block; border-radius: 50px; color:#fff; font-size: 12px;font-weight: 800;} #slider .nav{justify-content:center;width:100%;bottom: 170px;} #contact-top{ width:auto !important; height:auto !important; position: absolute;top: 40%; left:0; z-index: 200; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .bt_contact { width:240px;float:left; background-color: transparent;text-decoration: none;padding: 2em;color: #FFF;border: 1px solid rgba(255, 255, 255, 0.3);margin-top: -1px;display: block;-webkit-transition: all ease 0.7s;-o-transition: all ease 0.7s;transition: all ease 0.7s;} .bt_contact i{ float: right;margin-top: 0.2em; margin-left: 2.5em;} .bt_contact p{ margin-bottom: 0;float: left;width: 100%;} .bt_contact span{ display: block; float: left;} .bt_contact_two{top: -1px;} #btn-email,#btn-tel{ left: -160px;} #btn-email:hover,#btn-tel:hover{ left: -1px; color: #FFF;} .slider-interne {position: relative;z-index: 10;width: 100%;clear: both;height: 400px; background-size: cover;background-position: center center; } .slider-interne::before {content: ''; opacity: 0.7;position:absolute; width: 100% ; height: 100%; top:0; left: 0;background: rgb(95,53,231);background: -moz-linear-gradient(0deg, rgba(95,53,231,1) 0%, rgba(149,27,128,1) 100%);background: -webkit-linear-gradient(0deg, rgb(149, 27, 129) 0%, rgba(149,27,128,1) 100%);background: linear-gradient(0deg, rgba(95,53,231,1) 0%, rgba(149,27,128,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5f35e7",endColorstr="#951b80",GradientType=1);} .accroche-slider-interne { width:100%; text-align: center;position: absolute;top: 50%;transform: translate(-50%,-50%);left: 50%; color:#fff; display: inline-block; z-index: 9;} .accroche-slider-interne *{ margin: 0; padding: 0;} .accroche-slider-interne img {height: 70px;} .accroche-slider-interne .titre-slider-interne { color: #fff; font-size: 28px; text-transform: uppercase; letter-spacing: 3px ; font-weight: 800;} .accroche-slider-interne h1 { color: #efefef;font-size: 14px;white-space: pre-line; text-transform: uppercase; letter-spacing: 3px;padding: 0;} .slider-interne .container{ position: relative; height: 100%;} .bg-pan-br{-webkit-animation:bg-pan-br 7s both;animation:bg-pan-br 7s both} @-webkit-keyframes bg-pan-br{0%{background-position:0 0}100%{background-position:30% 30%}}@keyframes bg-pan-br{0%{background-position:0 0}100%{background-position:30% 30%}} .slide-in-left{-webkit-animation:slide-in-left .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-left .5s cubic-bezier(.25,.46,.45,.94) both} @-webkit-keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}} .slide-in-right{-webkit-animation:slide-in-right .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-right .5s cubic-bezier(.25,.46,.45,.94) both} @-webkit-keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}} .animated.paused:before,.animated.paused:after,.animated.paused{-webkit-animation-play-state:paused!important;animation-play-state:paused!important} /************* aside **************/ aside{background-color:#f5f6f7;} #content{width:100%;float:left;background-color: #f5f6f7;} #content h2{margin-bottom:1em;} #formulaire form { -webkit-box-shadow: 0 0 2px 0 #666;box-shadow: 0 0 2px 0 #666;background-color: #fff;align-items: center; position: absolute;z-index: 99;top: 0;left: 0; transform: translateY(-50%); width: 100%; max-width: 80%;} #formulaire form label {color:#4e4c4d; font-size: 13px; width: 100%; display: block;} #formulaire .row{ margin-left: 0; margin-right: 0;} #formulaire .container-infos{ padding: 1.5em; } .col-button{ padding-right: 0;} .form-group{ padding: 0 0.5em; margin-bottom: 0;} #formulaire .form-group{ float:left;} #formulaire input, #formulaire select, .input-group-append span{ font-size: 13px;} #formulaire input:focus, #formulaire select:focus{ box-shadow: none; border: #951b81 solid 1px;} #formulaire .form-control::-webkit-input-placeholder{color:#999;opacity:.5;} #formulaire .form-control::-moz-placeholder{color:#999;opacity:.5;} #formulaire .form-control::-ms-input-placeholder{color:#999;opacity:.5;} #form-group-surface{ padding-left: 0;} #form-group-surface .input-group{ float: left; width: 48%; max-width: 48%;} #form-group-surface .input-group:nth-child(1){ margin-right: 1em;} #form-group-surface input{ display: inline-block; } .custom-select {color: #9999;border: 1px solid #CCC;} #btn-recherche {border-radius: 0; width: 100%; right: 0;height: 150px; display: block; background-color:#67b52e; color:#FFF; text-transform: uppercase;} #btn-recherche:hover{ background-color: #951b81;} #formulaire { height: 100%; width: 100%;} .form-row{ justify-content: start;} .indexPage {background-color: #f5f6f7;height: 100%; width: 100%;} .indexPage .container-fluid{ padding-left: 0; padding-right: 0;} .indexPage .container-infos {z-index: 1;} .indexPage .container-infos .paragraphe{ max-width: 80%;} .indexPage .container-infos::before {background-color: #67b52e;width:25px;height: 150px;content: '';position: absolute;left:0; top:-30%;} /* .row-offre::after {content: url("../../img/offre_back.png");background-size: contain;background-position: top left;height: 170px;top: -200px;position: relative;display: block;z-index: 0;} */ .indexPage [data-bg] {background-size: contain; height: 500px; width: 100%; background-repeat: no-repeat; background-position: left bottom;} .indexPage .swiper-container-horizontal {height: 100%;width: 100%;overflow: hidden;z-index: 9;} h3, .titre-page {font-size: 34px; font-weight: 700;color:#353535;} .row-offre .container-infos{ padding-left: 8em;} .row-offre{ background: url("../../img/offre_back.jpg") no-repeat bottom left; padding: 4em 0; } #offres {height: 100%; width: 100%; padding: 4em 4em 0 0;} #offres [data-bg] {height: 300px; background-size: cover; background-position: center center;} #offres .swiper-slide{ padding: 3em 2em; cursor: pointer;} #offres .swiper-slide .container {transition:all .25s, opacity 1s, bottom 1s;bottom:-40px;position: relative; max-width: 100%; } .bg-card-img-top {padding: 0;width: 100%;text-align: center;background-color: #FFF;-webkit-transition: all ease 0.5s;-ms-transition: all ease 0.5s;-moz-transition: all ease 0.5s;transition: all ease 0.5s;position: relative;top: 0; } #offres .swiper-slide:hover .bg-card-img-top{transform: translateY(-50px); box-shadow: -0.454px 12.992px 40px 0px rgba(25, 22, 25, 0.32);} #offres .swiper-slide .container .infos-bloc {opacity: 0; bottom: 0;} #offres .swiper-slide:hover .container .infos-bloc {opacity: 1; bottom: 30px;transition:all .25s; color:#951b80;} #offres .swiper-slide .container .infos-bloc i {padding-right: 1em;} #offres .swiper-slide .container .infos-bloc .legende {color:#333; font-size: 20px; display: inline-block; width: 100%; font-weight: 700; margin-bottom: 0.5em;} #offres .nav{position:absolute;z-index:90;padding:2px;right: 10%; bottom: 0;} #offres .nav button{border:1px solid #4e4c4d;margin:0 4px;width:40px;height:40px;display:inline-block; border-radius: 50px; color: #4e4c4d; font-size: 12px;font-weight: 800;} #offres .nav .next {background-color: #172432; color:#fff; border:none} .infos-bloc p{ margin-bottom: 0;} .soustitre-mauve {color: #951b81} .soustitre-vert {color: #67b52e} .soustitre-mauve, .soustitre-vert {font-weight: 800;} #infos {width: 100%;height: 100%;padding: 2em 0;clear: both;} #infos .container-fluid{ padding-right: 0; padding-left: 0;} #infos .swiper-container-horizontal {height: 100%; width: 100%; } #infos .swiper-container-horizontal .swiper-slide {height: 100%; width: 100%; overflow: visible;} #infos .swiper-container-horizontal .swiper-slide {height: 100%; width: 100%; overflow: visible;} #infos [data-bg] {height: 600px;background-size: cover;background-position: center center;width: 100%;} #infos .swiper-slide .container-infos {padding:6em 14em 6em 8em; background-color: #fff;} #infos .swiper-slide .container-infos .soustitre-mauve{font-size: 14px; font-weight: 300; letter-spacing: 2px; margin-bottom: 2em;} #infos .swiper-slide .container-infos h3{ font-size: 28px; font-weight: 600; margin-bottom: 1.5em;} #infos .swiper-slide .container-infos .btn-primary{ margin-top: 1.5em;} #infos .slider_img {top: -114px;} #infos .nav {position: absolute;z-index: 90;bottom: 25px;left: 33%;} #infos .nav button{border:1px solid #666;margin:10px;width:40px;height:40px;display:inline-block; border-radius: 50px; color: #666; font-size: 12px; font-weight: 800;} #infos .nav .next {background-color: #172432; color:#fff; border:none} #infos .swiper-slide .container-infos h3::before {content: ''; width: 150px; height: 3px; background-color: #951b81; left: -27%; position: absolute; margin: 0.5em ; border-radius: 20px} .col-text{ padding: 0 22em 0 6em;} .garanties {padding-bottom: 5em;} #adresse-left {position: absolute;bottom: -2%;left: 0;z-index: 200;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);} #adresse-left .bt_contact { border:none;width:380px;float:left; background-color: #951b81;text-decoration: none;padding: 2em;color: #FFF;margin-top: -1px;display: block;-webkit-transition: all ease 0.7s;-o-transition: all ease 0.7s;transition: all ease 0.7s;} #adresse-left .bt_contact i{margin-top: 0.2em; margin-right: 2em;} #adresse-left .bt_contact p{float: right;width: 100%; opacity: 1; color:#fff; margin: 0; } #infos .bt_contact span{ display: block; float: right;padding: 1em;} #infos .bt_contact_two{top: -1px;} #infos #btn-email {left: -110px;} #infos #btn-email i{ float: right;} #infos #btn-email:hover{ left: -100px; color: #FFF;} .titre-style {font-weight: 300; font-size: 26px; text-align: center; font-style: italic; color:#172432;} .icon { display: block; text-align: center; padding: 3em;} #infos .col-text .soustitre-vert, #infos .col-text .soustitre-mauve{font-weight: 600; font-size: 22px;} #infos .garanties .paragraphe {font-weight: 300;} .rgpdpage ul li, .sitemapPAGE ul li{ list-style-type: disc; letter-spacing: normal;} /*!************* aside **************!*/ .grid {position: relative;clear: both;max-width: 1000px;list-style: none;text-align: center; padding-top: 3em;} /* Common style */ .grid figure {position: relative;float: left;overflow: hidden;width: 100%;height: auto;background: #fff;text-align: left;cursor: pointer;} .grid figure img {position: relative;display: block;min-height: 100%;max-width: 100%;opacity: 0.8;} .grid figure figcaption {color: #fff;text-transform: uppercase;font-size: 16px;-webkit-backface-visibility: hidden;backface-visibility: hidden;} .grid figure figcaption::before, .grid figure figcaption::after {pointer-events: none;} .grid figure figcaption, .grid figure figcaption > a {position: absolute;top: 0;left: 0;width: 100%;height: 100%; z-index: 100;} /* Anchor will cover the whole item by default */ /* For some effects it will show as a button */ .grid figure figcaption > a {z-index: 1000;text-indent: 200%;white-space: nowrap;font-size: 0;opacity: 0;} .grid figure h4 {word-spacing: -0.15em;font-weight: 800;font-size: 16px;letter-spacing: 2px; background-color: #951b81; padding: 0.5em 1em; width: auto; display: inline-block;} .grid figure h4, .grid figure p {margin: 0;} .grid figure p {letter-spacing: 1px;font-size: 14px;} /***** Goliath *****/ /*-----------------*/ figure.effect-goliath {background: #67b52e;} figure.effect-goliath [data-bg], figure.effect-goliath h3 { width:100%;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;z-index: 1; background-color: #951b81; color: #FFF; font-size: 16px;} figure.effect-goliath [data-bg] {-webkit-backface-visibility: hidden;backface-visibility: hidden;} figure.effect-goliath h3, figure.effect-goliath .paragraphe {position: absolute;bottom: 0;left: 0;padding: 30px;} figure.effect-goliath .paragraphe { color:#fff;text-transform: none;font-size: 14px;opacity: 0;-webkit-transition: opacity 0.30s, -webkit-transform 0.30s;transition: opacity 0.30s, transform 0.30s;-webkit-transform: translate3d(0,-20px,0);transform: translate3d(0,-20px,0);z-index: 99} figure.effect-goliath:hover [data-bg] {-webkit-transform: translate3d(0,-120px,0);transform: translate3d(0,-120px,0);} figure.effect-goliath:hover h3 {-webkit-transform: translate3d(0,-100px,0);transform: translate3d(0,-100px,0);} figure.effect-goliath:hover .paragraphe {opacity: 1;-webkit-transform: translate3d(0,0px,0);transform: translate3d(0,0px,0);} .listingCatalogPage [data-bg] {height: 300px; background-size: cover;} .listingArticlePage [data-bg] {height: 300px; background-size: cover;} .listingArticlePage figure.effect-goliath:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} .showCatalogPage [data-bg]{height: 350px; background-size: cover; background-position: center center;} .showCatalogPage ul {font-weight: 300; letter-spacing: 1px; display: inline-block; margin-right: 2em;color: rgba(53, 53, 53, 0.89); } .showCatalogPage .bloc {padding: 1em 0;} .showCatalogPage ul li span{color: #67b52e} .btn-block .btn-danger {margin-right: 1em;} .RealisationsPage #photo [data-bg] {height: 400px; background-size: cover; background-position: center center; } .RealisationsPage h3, .RealisationsPage .soustitre-vert {padding-bottom: 0.5em;} .btn:focus{ box-shadow: none !important;} /************* show **************/ .showCatalogPage{ padding: 8em 0 5em 0;} #productShow h3{margin-bottom:1.5em;} .owl-carousel-page img{border:#ccc solid 1px;width:100%;} /************* pagination **************/ .zui-pager{display:inline-block;} .zui-pager .pagination{list-style-type:none;margin:0;padding:0;display:inline-block;} .zui-pager .page-item{display:inline-block;margin:0;padding:0;height:40px;float:left;} .zui-pager .page-item .page-link{cursor:pointer;border-radius:0;margin:0;padding:0.5em 1em;border:0;font-weight:300;background-color:transparent;-webkit-box-shadow:inset 0 -2px 0 0 #bbb;box-shadow:inset 0 -2px 0 0 #bbb;color:#bbb;} .zui-pager .page-item .page-link:hover{-webkit-box-shadow:inset 0 -4px 0 0 #bbb;box-shadow:inset 0 -4px 0 0 #bbb;} .zui-pager .page-item.active span{-webkit-box-shadow:inset 0 -4px 0 0 #951b81;box-shadow:inset 0 -4px 0 0 #951b81;color: #951b81;font-weight:600;} .zui-pager .page-item.active span:hover{-webkit-box-shadow:inset 0 -4px 0 0 #951b81;box-shadow:inset 0 -4px 0 0 #951b81;cursor:default;} .zui-pager .page-link[disabled]{-webkit-box-shadow:inset 0 -2px 0 0 #951b81;box-shadow:inset 0 -2px 0 0 #951b81;color: #951b81;} .zui-pager .page-link[disabled]:hover{-webkit-box-shadow:inset 0 -2px 0 0 #951b81;box-shadow:inset 0 -2px 0 0 #e6e6e6;cursor:default;} .zui-pager .i-chevron-left, .zui-pager .i-chevron-right{margin:15px;border-style:solid;border-color:#3a3a3a;width:6px;height:6px;display:block;cursor:pointer;} .zui-pager .i-chevron-left{border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);} .zui-pager .i-chevron-right{border-width:1px 1px 0 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} /************* news listing **************/ .listingNews{margin-bottom:2em;cursor:pointer;} .listingNews:hover h3 a{color:#f36f45;} .listingNews img{border-left:#ccc solid 1px;border-right:#ccc solid 1px;border-bottom:#ccc solid 1px;} .listingNews h3{font-size:1.5em;overflow:hidden;height:25px;margin-bottom:0.5em;} .listingNews h3 a{color:#333;} .date{background-color: transparent;color: #67b52e;text-align:left;padding:0.5em 0; letter-spacing: 2px} .listingNews .paragraphe{color:#999;overflow:hidden;height:80px;} .listingNews div:first-child{padding-left:0;} /************* news show **************/ .newsShow .date{display:inline-block;padding:0.5em 1em;text-align:center;} .newsShow h3{margin:1em 0;} .colImg{padding-left:0;} .colInfos{padding-right:0;} /************* footer**************/ #container-footer{ padding-top: 6em;} #footer{margin:0;clear:both; height: 100%; width: 100%;} #footer [data-bg] {background-size: cover; height: 700px; background-position: center center; width: 100%; padding-top: 6em; padding-bottom: 6em;} #footer .container {background-color: #fff; border-top: 9px solid #67b52e; height: 100%; padding: 4em 6em;} #footer h3 {padding: 1em 0; font-size: 26px;} #coordonnees {color:#666;} #footer .soustitre-mauve{ margin-bottom: 0;} .soussoustitre-mauve{ color: #951b81; font-weight: 400; margin-bottom: 1em; display: inline-block;} #footer .bloc {display: inline-block; padding-right: 2em; font-size: 14px;} #copyright {color:#666; } #copyright::before {content: ''; height: 200px; width: 1px; background-color: #ebebeb; left: -20%; position: absolute; margin: 1em} #copyright .fa-heart {color: #951b81} .encart_appel i{ margin-right:0.5em; top:-11px; font-size: 14px; border:2px solid #bf66b0; padding: 1em; font-family: "Font Awesome 5 Pro", sans-serif; border-radius: 100px; display: inline-block;} .encart_appel .tel,.encart_appel .mail{display: inline-block; line-height: 1;} .encart_appel .tel div,.encart_appel .mail div{ display:inline-block; } .encart_appel .tel{ margin-bottom: 2em;} .encart_appel {top: 82%;left: 0;width: 500px; height: 250px;background-color: #951b81; position: absolute; display: block; color:#fff; padding: 4.5em 4em 4em 4em; } .encart_appel span { text-transform: uppercase; font-size: 14px; font-weight: 300; letter-spacing: 2px;} .encart_appel p { font-size: 30px; font-weight: 800; letter-spacing: 2px; margin: 0; } /************* contact **************/ .contactPage form{margin-top:1.5em;clear:both;width:100%;float:left;} .contactPage .form-group{ margin-bottom: 0.5em;} .contactPage form input[type=submit]{margin-top:1em;} input[type="checkbox"]{-webkit-appearance:checkbox;} input[type="radio"]{-webkit-appearance:radio;} input[type="submit"], input[type="button"]{-webkit-appearance:button;} select{-webkit-appearance:textfield;} .form-control:focus{ box-shadow: none !important; border:#951b81 solid 1px;} /************* galerie **************/ [data-swiper="galerie"]{overflow:hidden;padding:0;} [data-swiper="galerie"] .swiper-slide{height:100%;width:100%;} [data-swiper="galerie"] .nav{transition:.2s;opacity:0;z-index:1000;position:absolute;top:50%;transform:translateY(-50%);width:100%;} [data-swiper="galerie"]:hover .nav{opacity:1;} [data-swiper="galerie"] .nav button{color:#fff;position:absolute;background:#1f1d14;width:40px;height:40px;} [data-swiper="galerie"] .nav button:hover{background: #951b81;color:#1f1d14;} [data-swiper="galerie"] .nav button.next{right:0;} /************* galerie product photo **************/ #photo .box{box-shadow:0 3px 10px rgba(0,0,0,.02);background:#fff;border:1px solid #eee;border-radius:3px;} #photo > [data-swiper]{overflow:hidden;} #photo .swiper-slide{text-align:center;display:flex;align-items:center;justify-content:center;} #photo .swiper-slide > *{margin:auto;align-self:center;} #photo .thumbs{user-select:none;-moz-user-select:none;padding:10px 40px;margin-top:16px;} #photo .thumbs > div{overflow:hidden;} #photo .thumbs .swiper-wrapper{display:flex;} #photo .thumbs .swiper-slide{max-height:50px;cursor:pointer;width:16.66%;max-width:16.66%;flex-basis:16.66%;margin: 5px;} #photo .thumbs .swiper-slide > div{border:1px solid #eee;transition:border-color .2s;display:flex;align-items:center;justify-content:center;} #photo .thumbs .swiper-slide img{max-height:100%;} #photo .thumbs .swiper-slide:hover > div{border-color:#d8d8d8;} #photo .thumbs .swiper-slide-thumb-active > div{border-color: #951b81 !important;} #photo .thumbs button{padding:0;background:#fafafa;color:#333;position:absolute;top:0;width:35px;height:100%;text-align:center;} #photo .thumbs button i{margin-left:0;} #photo .thumbs button:hover{color: #67b52e;} #photo .thumbs button.prev{left:0;border-right:1px solid #eee;} #photo .thumbs button.next{right:0;border-left:1px solid #eee;} /*----------------------------------------------------< MEDIA QUERIES >---------------------------------------------------*/ @media screen and (max-width:1712px){ #formulaire form {max-width: 86%;} #infos .swiper-slide .container-infos h3::before {width: 30%; left: -50%; transform: translateX(50%); } } @media screen and (max-width:1593px){ #formulaire form {max-width: 90%;} } @media screen and (max-width:1522px){ #formulaire form {max-width: 100%;transform:none; position: static; top:auto; left:auto;} .row-offre {padding: 0;} } @media screen and (max-width:1360px){ #formulaire .form-group{ width: 50%;} #form-group-surface.form-group{ width: 100% !important;} #form-group-surface .input-group {width: 100%;} #formulaire .form-group:nth-child(3), #formulaire .form-group:nth-child(4){ margin-top: 0.5em;} #btn-recherche {height: 187px;} #slider {height: 600px;} #slider .container {top: 0;} #slider .nav {bottom: 10%;} .indexPage .container-infos .paragraphe {max-width: 100%;} .col-text {padding: 0 12em 0 6em;} #infos .swiper-slide .container-infos h3::before {width: 40%; left: -70%; transform:none); } #infos .nav button {margin:0 5px;} #infos .nav {bottom: 58px;left: 31%;} } @media screen and (max-width:1215px){ #adresse-left {bottom: 0;} #infos .swiper-slide .container-infos {padding: 6em 8em 6em 8em;} } @media screen and (max-width:1200px){ #infos .slider_img {max-width: 100%;} #contact-top{ display: none;} #offres .swiper-slide .container .infos-bloc .legende{ line-height: 1.2;font-size: 18px;} h3 {font-size: 33px;} #nav nav > ul > li {padding: 0 9px;} #infos .nav {left: 28%;} #footer [data-bg] {height: 610px;} #footer .container {padding: 4em 4em 6em 4em;} #footer [data-bg] {height: 750px;} .encart_appel {top: 96%;width: 455px;} } @media screen and (max-width:1192px){ #form-group-surface { display: flex;} } @media screen and (min-width:992px){ #nav nav > ul{margin-bottom:0;line-height:1;font-size:15px;letter-spacing:1px;display:flex;} #nav nav > ul > li{padding:0 20px;text-align: center!important; color:#4e4c4d;} #nav nav > ul > li:first-child{display:none;} #nav nav > ul > li a:hover{color: #4e4c4d;} #nav nav > ul > li > .item:before{transition:.3s;content:'';position:absolute;width:0;height:2px;bottom:-15px;background: #951b81;left:50%;transform:translateX(-50%);} #nav nav > ul > li > .item:hover:before{width:100%;} /*#nav nav > ul > li[data-sub] > a:after{transition:.2s;margin-left:8px;font-size:10px;top:-1px;content:'\f078';font-family:'Font Awesome 5 Pro';font-weight:300;}*/ #nav nav > ul > li[data-sub] > a.open:after{transform:rotate(180deg);top:0;} #nav nav > ul > li ul{display:block!important;transition:.4s;opacity:0;visibility:hidden;text-align:center;padding:0;font-size:14px;color:#fff;background:#1f1d14;position:absolute;min-width:160px;left:50%;transform:translateX(-50%);top:50px;} #nav nav > ul > li > a.open + ul{opacity:1;visibility:visible;top:30px;} #nav nav > ul > li ul li{padding:2px;display:block;} #nav nav > ul > li ul li > *:not(ul){text-transform:none;letter-spacing:0;padding:15px 10px;font-weight:400;display:block;} #nav nav > ul > li ul li ul{position:absolute;left:100%;top:0;} #nav nav > ul > li ul li ul.left{left:auto;right:100%;} #nav nav > ul > li ul li ul:hover, #nav nav > ul > li ul li *:hover + ul{opacity:1;visibility:visible;display:block;transform:none;} #logo-responsive, .col-logo-responsive {display: none} } /************* max 992 **************/ @media screen and (max-width:991px){ .showCatalogPage {padding: 3em 0;} #header .bottom {padding: 1em 0;} .col-button{ text-align: center; padding-right: 15px;} #slider h2{ line-height: 1;} #slider {height: 500px;} .indexPage .container-infos::before{ display: none;} #btn-recherche {height: auto; padding: 0.5em 1em; border-radius: .25rem; display: inline-block; width: 96%;} .row-offre .container-infos {padding-left:15px; padding-right: 15px; margin-top: 3em;} [data-nav]{display:flex;} #nav{z-index:99999;transform:translateX(-100%);transition:box-shadow .6s, transform .6s;max-width:calc(100vw - 90px);width:300px;overflow:hidden;font-size:calc(12px + 3 * (100vw - 320px) / 1080);letter-spacing:1px;color:#fff;background:#353535;;position:fixed;top:0;left:0;height:100vh;} .openNav #nav{transform:translateX(0);box-shadow:0 0 2000px 300px rgba(149, 27, 129, 0.3), 0 0 500px 100px #951b81;} #nav nav > ul{margin-bottom:0;margin-left:0;overflow-y:scroll;height:100vh;width:500px;} #nav nav > ul li{transition:.6s;width:300px;max-width:calc(100vw - 90px);padding:0;border-bottom:1px solid rgba(0,0,0,.2);} #nav nav > ul > li:not(.show){opacity:0;top:-50px;} #nav nav > ul > li.show{top:0;opacity:1;} #nav nav > ul > li:first-child{cursor:pointer;padding:10px 15px;font-size:11px;opacity:.5;} #nav nav > ul > li:hover:first-child{opacity:1;} #nav nav > ul li a{font-weight:bold;padding:calc(22px + .6%) calc(20px + .6%) calc(20px + .6%);display:block;} #nav nav > ul li a:hover{background: #67b52e;color:#1f1d14;} #nav nav > ul li[data-sub] > a:after{display:flex;align-items:center;justify-content:center;text-align:center;width:calc(50px + 1.2%);position:absolute;height:100%;right:0;background:rgba(255,255,255,.05);border-left:1px solid rgba(0,0,0,.5);transition:.2s;font-size:16px;top:0;content:'\f078';font-family:'Font Awesome 5 Pro';font-weight:300;} #nav nav > ul li[data-sub] > a.open:after{content:'\f077';} #nav nav > ul li ul{background:rgba(0,0,0,.2);display:none;border-top:1px solid rgba(0,0,0,.2);} #nav nav > ul li ul li:last-child{border-bottom:0;} #nav nav > ul li ul li a{font-size:11px;padding:calc(18px + .6%) calc(20px + .6%) calc(16px + .6%);} #slider {height: 550px;} .col-nav-right{ justify-content: flex-end; display: flex;} #header .bottom .container{ max-width: 100%;} .indexPage form {padding: 1em} .indexPage, .showCatalogPage, .showArticlePage, .showArticlePage .date , .RealisationsPage {text-align: center;} #offres {padding: 2em;} #offres .swiper-slide .bg-card-img-top {transform: translateY(-50px);box-shadow: -0.454px 12.992px 40px 0px rgba(25, 22, 25, 0.32);} #offres .swiper-slide .container .infos-bloc {opacity: 1;bottom: 30px;transition: all .25s;color: #951b80;} #infos .swiper-slide .container-infos {padding: 2em } #offres .nav {right:auto;left:50%;transform: translateX(-50%);bottom: -3%;} #infos .slider_img {top:0;} #infos .nav {justify-content: center;bottom: -100px; } #infos h3 {font-size: 20px;} .row-offre::after {height: 190px;} #infos #btn-email {left: -210px;} #adresse-left {bottom: -120px;} .titre-style {font-size: 22px;} #garanties {padding-top: 4em;} #infos {text-align: center;} #infos .slider_img {text-align: left;top: 0;position: relative;float: left;max-width: 100%;} #infos .swiper-slide {flex-wrap: wrap;} h3, titre-page {font-size: 25px;padding-bottom: 0.5em;} #infos .swiper-container-horizontal {overflow: hidden;} #infos [data-bg] {height: 381px;} #copyright {white-space: normal;} .encart_appel, #header .logo {display: none!important;} figure.effect-goliath [data-bg] {-webkit-transform: translate3d(0,-150px,0);transform: translate3d(0,-150px,0);} figure.effect-goliath:hover h4 {-webkit-transform: translate3d(0,-120px,0);transform: translate3d(0,-120px,0);} #photo {padding-top: 3em;} .grid figure {text-align: center!important;} figure.effect-goliath .paragraphe {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0); font-size: 13px;} figure.effect-goliath h3 {bottom: 120px;} figure.effect-goliath:hover h4 {-webkit-transform: none;transform: none;} figure.effect-goliath:hover p {-webkit-transform: none;transform: none;} figure.effect-goliath [data-bg], figure.effect-goliath:hover [data-bg]{-webkit-transform: none;transform: none;} figure.effect-goliath [data-bg]::before {content: '';left: 0;position:absolute;width: 100%;height: 100%;opacity: 0.5;background: rgb(95,53,231);background: -moz-linear-gradient(0deg, rgba(95,53,231,1) 0%, rgba(149,27,128,1) 100%);background: -webkit-linear-gradient(0deg, rgb(149, 27, 129) 0%, rgba(149,27,128,1) 100%);background: linear-gradient(0deg, rgba(95,53,231,1) 0%, rgba(149,27,128,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5f35e7",endColorstr="#951b80",GradientType=1);} .accroche-slider-interne .titre-slider-interne {font-size: 22px;} .showArticlePage .swiper-container-horizontal {margin: 2em 0 2em;} #infos .swiper-slide .container-infos h3::before {width: 70px;} #formulaire form {background-color: #fff;align-items: center;height: 280px;position: relative;padding: 1em;} .input-group-append {height: 100%;} #infos .swiper-slide .container-infos h3::before, #infos .swiper-slide .container-infos .paragraphe, #adresse-left {display: none;} .col-text {padding: 0 2em 0 2em;} #infos .swiper-slide .container-infos{ padding: 4em;} #infos .swiper-slide .container-infos h3{ margin-bottom: 0} #infos .swiper-container-horizontal{ overflow: visible} #infos .nav {justify-content: center;bottom: -10%;left:50%;transform: translateX(-50%);} .icon {padding: 0;margin-bottom: 0.5em; display: inline-block;} #garanties .container{ max-width: 90%;} #garanties .soustitre-mauve, #garanties .soustitre-vert{ font-size: 24px; width: 100%; display: inline-block; clear: both;} #footer h3{ text-align: center; line-height: 1;} #footer{ text-align: center;} #footer .container {padding: 2em; display: inline-block;} #footer .bloc {padding-right: 0;} #infos .container-fluid {padding-right: 15px;padding-left: 15px; max-width: 90%; margin-top: 2em;} #footer [data-bg] {height: 780px;} figure.effect-goliath [data-bg]::before {display: none;} .grid figure figcaption, .grid figure figcaption > a {position: static;top: auto;left: auto;} figure.effect-goliath h3, figure.effect-goliath .paragraphe {position: static;bottom: auto;left: auto;} figure.effect-goliath {background: #FFF;} figure.effect-goliath .paragraphe{ color: #333;} .grid figure figcaption{ padding:0; } .grid figure{ margin-bottom: 1.5em;} } /************* max 767 **************/ @media screen and (max-width:767px){ #slider .title {font-size: 13px;} #slider h2 {font-size: 27px;} .indexPage .container-infos::before, #adresse-left {display: none;} #slider {height: 480px;} .icon { padding: 2em;} #infos [data-bg] {height: 303px;} #offres [data-bg] {height: 382px;} #infos h3 {padding-bottom: 0;} #infos{text-align: center;} #garanties {padding-top: 0;} .titre-style {font-size: 20px;} .paragraphe {font-size: 14px;} #footer {text-align: center;} #coordonnees {font-size: 14px;} figure.effect-goliath h3 {bottom: 75px;left: auto;} .accroche-slider-interne .titre-slider-interne {font-size: 17px;} .slider-interne {height: 320px;} .accroche-slider-interne .paragraphe {letter-spacing: 1px;} #infos h3 {font-size: 25px; margin-bottom: 1em;} .garanties{ padding-top: 0 !important;} .titre-style{ margin-top: 1.5em;} #footer .container{ max-width: 90%;} #footer .bloc {padding-right: 15px;} } @media screen and (max-width:575px){ #logo-responsive{ transition: .5s ease-in;} #logo-responsive{width: 99%;} .fix #logo-responsive{width: 75%;} .icon{ max-width: 30%; padding: 0;} #slider .title {font-size: 11px;} #slider {height: 440px;} #footer [data-bg] {height: 710px;} #infos .swiper-slide .container-infos {padding: 3em;} #footer [data-bg] {height: auto;} } @media screen and (max-width:479px){ #formulaire .form-group {width: 100%;} #formulaire form{ height: auto; padding: 2em;} #formulaire .container-infos{ padding: 0;} #btn-recherche{ width: 100%; margin-top: 1em;} .col-button{ padding-right: 0; padding-left: 0;} .form-group{ padding: 0.5em 0;} #formulaire .form-group:nth-child(3), #formulaire .form-group:nth-child(4){ margin: 0;} #offres .swiper-slide {padding: 0;} #offres .swiper-slide .bg-card-img-top, #offres .swiper-slide:hover .bg-card-img-top {box-shadow:none;} #offres .swiper-slide .container {bottom: 0;} #infos .swiper-slide .container-infos h3 {font-size: 23px;} .showCatalogPage ul {margin-right: 0; width: 100%; display: block;} .showCatalogPage .btn{ width: 100%; display: block;} .showCatalogPage .btn-primary{ margin-top: 1em;} } @media screen and (max-width:360px){ .col-logo-responsive{ padding-left: 0; padding-right: 0;} [data-nav] {width: 30px;height: 30px; border: none;} #slider h2 {font-size: 22px;} #slider {height: 380px;} #slider .nav{ display: none;} #offres [data-bg] {height: 250px;} #offres {padding: 2em 0;} #infos .swiper-slide .container-infos {padding: 2em;} #infos .swiper-slide .container-infos h3 {font-size: 20px;} #infos h3 {font-size: 22px;} #footer h3 br {display: none;} } /* !************* max 476 **************! @media screen and (max-width:480px){ .btn-block .btn-danger {margin-bottom: 1em;} } !************* max 457 **************! @media screen and (max-width:457px){ .grid figure h4 {font-size: 14px;letter-spacing: 1px; } figure.effect-goliath h4 {bottom: 95px;} .icon {max-width: 50%;} #infos [data-bg] {height: 183px;} .accroche-slider-interne .paragraphe {font-size: 12px;} } !************* max 400 **************! @media screen and (max-width:399px){ .accroche-slider-interne {top: 24%;width: 100%;} } !************* max 380 **************! @media screen and (max-width:380px){ .row-offre::after {height: 120px;} .slider-interne {height: 270px;} } !************* max 360 **************! @media screen and (max-width:360px){ #offres .swiper-slide .container .infos-bloc .btn {position: relative;} #offres .swiper-slide:hover .container .infos-bloc {text-align: left;} .titre-style, #infos h3 {font-size: 16px;} .showCatalogPage ul {margin-right: 0;} .accroche-slider-interne .paragraphe {letter-spacing: 0;} #slider h2 {font-size: 14px;} figure.effect-goliath h4 {bottom: 115px;left: 0;} #offres .swiper-slide .container .infos-bloc, #offres .swiper-slide:hover .container .infos-bloc{text-align: center;} #offres [data-bg] {height: 260px;} #offres .swiper-slide .container .infos-bloc {font-size: 13px;padding: 1em;} #offres .nav {bottom: -100px;} } !************* max 320 **************! @media screen and (max-width:320px){ #offres .swiper-slide .container .infos-bloc .legende {display: none} #offres .swiper-slide:hover .container .infos-bloc {text-align: center;} #offres .nav {bottom: -70px;} #slider .nav button {font-size: 10px;} figure.effect-goliath p {font-size: 11px;} } !************* max 320 **************! @media screen and (max-width:290px){ figure.effect-goliath h4 {bottom: 155px;left: 0;} }*/