/* IMPORT FONTS */ @font-face { font-family: 'sw-bc'; src: url('../fonts/swiss721bt-blackcondensed.eot'); src: url('../fonts/swiss721bt-blackcondensed.eot?#iefix') format('embedded-opentype'), url('../fonts/swiss721bt-blackcondensed.woff') format('woff'), url('../fonts/swiss721bt-blackcondensed.ttf') format('truetype'), url('../fonts/swiss721bt-blackcondensed.svg#webfont') format('svg'); } @font-face { font-family: 'ak-sb'; src: url('../fonts/akrobat-semibold.eot'); src: url('../fonts/akrobat-semibold.eot?#iefix') format('embedded-opentype'), url('../fonts/akrobat-semibold.woff') format('woff'), url('../fonts/akrobat-semibold.ttf') format('truetype'), url('../fonts/akrobat-semibold.svg#webfont') format('svg'); } @font-face { font-family: 'sw-r'; src: url('../fonts/swis721-cn-bt-roman.eot'); src: url('../fonts/swis721-cn-bt-roman.eot?#iefix') format('embedded-opentype'), url('../fonts/swis721-cn-bt-roman.woff') format('woff'), url('../fonts/swis721-cn-bt-roman.ttf') format('truetype'), url('../fonts/swis721-cn-bt-roman.svg#webfont') format('svg'); } @font-face { font-family: 'sw-b'; src: url('../fonts/swiss-721-bold-condensed-bt.eot'); src: url('../fonts/swiss-721-bold-condensed-bt.eot?#iefix') format('embedded-opentype'), url('../fonts/swiss-721-bold-condensed-bt.woff') format('woff'), url('../fonts/swiss-721-bold-condensed-bt.ttf') format('truetype'), url('../fonts/swiss-721-bold-condensed-bt.svg#webfont') format('svg'); } @font-face { font-family: 'dosis'; src: url('../fonts/dosis-medium-webfont.eot'); src: url('../fonts/dosis-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/dosis-medium-webfont.woff') format('woff'), url('../fonts/dosis-medium-webfont.ttf') format('truetype'), url('../fonts/dosis-medium-webfont.svg#dosismedium') format('svg'); font-weight: 500; font-style: normal; } /* RESET */ body, ul, li, ol, form, h1, h2, h3, h4, h5, h6, div, span, p { padding:0; margin:0; border:0; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none;} article, aside, footer, header, main, nav, section { display:block;} strong,b { font-weight:normal; font-family:sw-bc;} ul { list-style-type:none;} body { font:normal 16px/23px sw-r; color:#00385b; background:#fff;} a { text-decoration:none; color:#00385b; outline:none;} img { border:none;} #wrapper { min-width:320px;} * { box-sizing:border-box;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; outline:0} iframe { width:100%; padding: 10px; border:1px solid #ededed; background: #fff; height: 350px; margin:0;} /* CLASS */ .clear { clear:both; float:none !important; width:100% !important; padding:0 !important; margin:0 !important; display:block;} .left { float:left;} .right { float:right;} .sousTitre { font:normal 18px/24px sw-r; color:#00385b; position:relative; margin:0 0 25px 0; } .link { width:auto; height:53px; display:inline-block; border:1px solid #00385b; position:relative; font:normal 15px/53px sw-r; letter-spacing:.5px; color:#00385b; text-decoration:none !important; padding:0 20px; text-transform:uppercase;} .clr:after { content:''; display:table; width:100%; clear:both} .wrapper { max-width:1366px; padding:0 60px; margin:0 auto; width:100%; position:relative} /* HEADER */ #header { width:100%; position:relative; height:100vh;} .headerTop { width:100%; position:relative; z-index:100; padding:0 60px; background:#fff} .rs { width:30px; height:30px; text-indent:-9999px;} .logo { float:left; display: inline-block; padding: 17.5px 0;} .logo img { display: block; max-width: 100%; height: auto; } .headerTop .social { /*width:194px; */padding:22px 0} .social { float:left; padding:0; background:#00385b; position:absolute; right:0; z-index:99} .social a { width:48px; height:36px; font-size:0; display:block; float:left;cursor:pointer; border-right:1px dotted #33607c} .social .facebook { background:url(../images/facebook.svg) 50% 50% no-repeat;} .social .google { background:url(../images/google.svg) 55% 50% no-repeat;} .social .lettre { background:url(../images/lettre.svg) 55% 50% no-repeat;} .social a:last-of-type { text-align:center; padding-top:12px; border:none;} /* lang*/ .langue { border: none; } .btn-group { position: absolute; right: 0; top: 80px; background: #eee; display:none} .btn-group a { padding: 14px 0 !important; border:1px solid #ddd; border-top: none;font-size: 15px; line-height: 15px; background: #fff; cursor:pointer; display: block; text-align: center; color: #222; height: auto; } /*.btn-group a.active { background:#17375e; color:#fff; }*/ .btn-group li { margin: 0; display:block} /* MENU */ .menu { display:block; position:relative; z-index:60; float:right; padding-right:219px;} .menu>ul { display:block; position:relative; text-align:center; background:#fff; font-size:0; line-height:0; } .menu li { display:inline-block; position:relative; margin:0 20px;} .menu a { width:auto; height:80px; font:normal 16px/80px ak-sb; letter-spacing:.2px; color:#00385b; text-transform:uppercase; display:block; padding:0; position:relative;} .menu a span { width:14px; height:3px; position:absolute; left:0; right:0; bottom:24px; opacity:0; margin:0 auto; border:1px solid #00385b; display:block;} .menu>ul>li.active>a span { opacity:1} /* SUB */ .sub { width:300px; position:absolute; top:80px; left:50%; z-index:995; margin-left:-150px; display:block; background:#f0f0f0; visibility:hidden; opacity:0;} .sub li { width:100%; margin:0; border:none; padding:0; text-align:center;} .sub li a { width:100%; height:60px; line-height:60px; position:relative; border-bottom:1px solid #cecece; margin:0;} .sub li:last-child a { border:0;} .menu li:hover .sub { opacity:1; visibility:visible; z-index:999;} .menu .sub li.active a { color: #b8d433; background: #0b3a5b;} @media (min-width:1025px) { .menu ul { display:block !important;}} .txt-banner { position:absolute; left:0; z-index:50; bottom:0; right:0; color:#fff; max-width:649px; padding:86px 0 0 60px; text-shadow:1px 1px 2px rgba(0,0,0,0.45);-webkit-text-shadow:1px 1px 2px rgba(0,0,0,0.45);-moz-text-shadow:1px 1px 2px rgba(0,0,0,0.45); overflow: hidden;} .txt-banner:before { position: absolute; content: ''; left: -164px; bottom: 0; width: 649px; height: 100%; background: rgba(0,56,91,0.9); -webkit-transform: skew(37.75deg); -moz-transform: skew(37.75deg); -ms-transform: skew(37.75deg); transform: skew(37.75deg); } .txt-banner em { display:block; font:normal 25px/40px 'sw-r'; letter-spacing:0.5px; text-transform:lowercase} .txt-banner em:first-letter { text-transform:uppercase} .txt-banner>span { position: relative; font:normal 50px/48px 'sw-b'; text-transform:uppercase; letter-spacing:2.7px; padding-bottom:13px; display:block} .txt-banner>span:after { content:''; display:block; width:85px; height:4px; background:#b7e627; margin:18px 0 7px 0} .slogan { position: relative; text-transform:uppercase; font:normal 18px/22px 'sw-b'; letter-spacing:0.2px;} .pagination { position:absolute; bottom:44px; left:152px; width:62px; font:normal 18px/22px sw-b;height: 23px;} .slidPagination { color:#b7e627; overflow: hidden;} .slidPagination span { color:#fff;} .aside-banner { position:absolute; top:0; right:0; width:100%; max-width:340px; background:rgba(255,255,255,0.85); z-index:99; display:table; padding:0 60px 0 51px} .aside-banner div { height:100vh; display:table-cell; vertical-align:middle; padding-top: 80px;} .aside-banner .titre { color:#00385b; text-transform:uppercase; letter-spacing:0.5px; font:normal 20px/40px 'sw-r'; padding-bottom:22px} .aside-banner p { padding-bottom:33px} .arrowSlider { text-align:left; padding:90px 0 50px 0;} .arrowSlider .slick-dots { text-align:left; height:10px;} .arrowSlider .slick-dots li { height:10px; margin:0 5px;} .arrowSlider .slick-dots button { width:10px; height:10px; border:none; background:#fff} .arrowSlider .slick-active button { background:#b7e627;} .scroll { display:block; margin:0 auto; width:29px; height:29px; border-radius:50%; background:url(../images/scroll.svg) center no-repeat #00385b; position:absolute; bottom:21px; z-index:101; left:0; right:0} /* SLIDER */ #slider { width:100%; height:100%; min-height:500px; position:absolute; top:0; z-index:45;} #slider:before { content:''; display:block; width:100%; height:100%; top:0;left:0; background:url(../images/banner-motif.png) repeat; position:absolute; z-index:9} #slider .slick-list { width:100%; height:100%;} #slider .slick-track { width:100%; height:100%;} #slider .banner1 { background:url(../images/banner1.jpg) 50% 50% no-repeat; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover;} #slider .banner2 { background:url(../images/banner2.jpg) 50% 50% no-repeat; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover;} #slider .banner3 { background:url(../images/banner3.jpg) 50% 50% no-repeat; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover;} #slider .banner4 { background:url(../images/banner4.jpg) 50% 50% no-repeat; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover;} .slick-prev { width:18px; height:30px; background:url(../images/arrow-l.svg) center no-repeat; position:absolute; left:0; top:50%; z-index:50; cursor:pointer; text-indent:-9999px; outline:none; border:0; padding:0; margin-top:-15px;} .slick-next { width:18px; height:30px; background:url(../images/arrow-r.svg) center no-repeat; position:absolute; right:0; top:50%; z-index:50; cursor:pointer; text-indent:-9999px; outline:none; border:0; padding:0; margin-top:-15px;} .slick-dots { width:100%; height:16px; position:relative; text-align:center; padding:0; line-height:0; z-index:50;} .slick-dots li { display:inline-block; height:16px; margin:0 10px;} .slick-dots button { display:block; width:16px; height:16px; border-radius:50%; text-indent:-9999px; background:none; outline:none; padding:0; border:1px solid #fff;} .slick-active button { background:#fff;} /* HOME PAGE */ .blocTitre { text-align:center; padding:67px 0 65px 0} .blocTitre h2 { text-align:center; font:normal 30px/30px sw-bc; text-transform:uppercase; position:relative; display:inline-block;} .blocTitre h2:before { content:''; display:block; left:0; right:0; top:14px; height:1px; background:#e5ebee; position:absolute} .blocTitre h2 span { display:inline-block; vertical-align:top;position: relative; padding:0 6px; background:#fff; font:normal 16px/30px sw-r;} .blocTitre em { position:relative; display:block; font-style:normal; margin-top: -4px;} .slideProduits>div { padding:25px 0} .slideProduits .bloc-slide { padding:25px 0} .slideProduits .content div { width:50%; position:relative} .slideProduits .content .boximg { width: 100%; } .produit { text-align:center; background: rgb(231,231,231); background: -moz-linear-gradient(left, rgba(231,231,231,1) 0%, rgba(248,248,248,1) 50%, rgba(231,231,231,1) 100%); background: -webkit-linear-gradient(left, rgba(231,231,231,1) 0%,rgba(248,248,248,1) 50%,rgba(231,231,231,1) 100%); background: linear-gradient(to right, rgba(231,231,231,1) 0%,rgba(248,248,248,1) 50%,rgba(231,231,231,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#e7e7e7',GradientType=1 ); } .plus { width:60px; height:60px; border-radius:4px; background:#00385b; color:#fff; display:block; text-transform:uppercase; text-align:left; padding:7px 10px 25px 5px; font:normal 13px/15px 'sw-b'; position:absolute; top:13px; left:0; right:0; margin:0 auto;} .plus:after { content:url(../images/plus.svg); float:right; margin-right:2px} .plus:before { position: absolute; display: inline-block; width: 0; height: 0; content: ""; border-right: 11px solid #00385b; border-left: 11px solid transparent; border-bottom: 11px solid transparent; top: 58px; left: -3px; } .numero { color:#fff; font:normal 60px/62px 'sw-bc'; letter-spacing:0.5px; position:absolute; right:-10px; top:22px; text-shadow:2px 1px 7px rgba(0,0,0,0.05);-webkit-text-shadow:1px 1px 2px rgba(0,0,0,0.45);-moz-text-shadow:1px 1px 2px rgba(0,0,0,0.45);} .itpro3 .numero { right: -4px; } .produit { line-height:0} .produit .titre, .itemprod .titre { text-transform:uppercase; position:absolute; letter-spacing:0.5px; font:normal 25px/20px 'sw-b'; top:40px} .produit .titre span, .itemprod .titre span { font-size:14px; color:#979797} .decription { display:table} .icon { width:86px; height:86px; border-radius:50%; background-position:center; background-repeat:no-repeat; display:block; float:left; border:1px dashed #00385b; position:absolute; top:50%; margin-top:-43px; left:30px;} .icon:before { content:''; display:block; width:70px; height:70px; border-radius:50%; border:1px solid #e9e9e9; position:absolute; top:6px; left:6px; background: #fff; z-index: -1;} .decription p { height:300px; display:table-cell; vertical-align:middle; padding:0 0 0 150px;} .blocRight .decription p { padding:0 150px 0 0; text-align:right} .blocRight .decription .icon { left:auto; right:30px;} .blocRight .numero { right:auto; left:-3px} .blocRight .produit .titre { right:auto; left:-233px;} .parachevement .produit .titre { right:-295px;} .slideProduits { padding-bottom:65px} .decription.left .titre { right:30px;} .decription.right .titre { left:30px;} .produit h2.titre { display: none;} .aside .produit h2.titre { display: block;} .decription h2.titre { display: block;} /* BLOC INFOS */ .blocInfos { position:relative;} .blocInfos:before { content:''; top:0; bottom:0; left:0;width:50%; background:#fff; position:absolute; display:block} .blocInfos:after { content:''; top:0; bottom:0; right:0;width:50%; background:#002b46; position:absolute; display:block} .blocLogo { float:left; padding:62px 93px 0 0; min-height:280px;} .blocLogo .logo { float:none; display:block; width:196px} .blocLogo .icon { position:relative; top:auto; left:auto; margin:19px 0 0 29px; display:block; float:none} .blocLogo .icon:before { content: ''; display: block; width: 70px; height: 70px; border-radius: 50%; border: 1px solid #e9e9e9;position: absolute; top: 6px; left: 6px; background: #fff url(../images/map.svg) no-repeat center; z-index: 2 } .infos { float:left; position:relative; background:#00385b; color:#fff; padding:67px 0 0 7px; min-height:281px;z-index: 9;} .infos:before { content:''; position:absolute; top:0; bottom:0; width:176px; left:-176px; background:url(../images/bg-shape01.png) center no-repeat} .infos:after { content:url(../images/bg-shape02.jpg); position:absolute; top:0; bottom:0; width:176px; right:-135px; z-index: -1;} .infos span { display:inline-block; vertical-align:middle; font:normal 16px/18px 'sw-r'; letter-spacing:0.2px} .infos i { font:normal 16px/18px 'sw-b';} .infos em { display:block; text-transform:uppercase; font-style:normal; font-family:sw-b} .infos a { color:#fff} .adr { margin-right:89px} .infos div { margin-top:27px} .infos div:before { content:url(../images/calendar.svg); width:35px; height:35px; display:inline-block; vertical-align:middle; text-align:center; line-height:40px; border-radius:50%; border:1px solid #255573; margin-right:12px} .infos .titre { text-transform:uppercase; font:normal 24px/30px 'sw-b'; letter-spacing:0.2px; padding-bottom:19px} .blocInfos .infos:last-of-type:before, .blocInfos .infos:last-of-type:after { display:none;} .blocInfos .infos:last-of-type { background:none; float:right} .blocMarq { padding-bottom:80px} .wslidemark {background:#f3f3f3} .slideMarque { padding: 0 20px; } .slideMarque .slick-active { position: relative;} .slideMarque .slick-active:before { position: absolute; content: ''; left: 0; top: 0; width: 1px; height: 100%; border-left: 1px dotted #c6c6c6; } .slideMarque .slick-active.slick-current:before { display: none; } .blocMarq .wrapper { padding:28px 20px; } .blocMarq .blocTitre { padding:51px 0 27px 0;} .blocMarq .slick-slide img { margin:0 auto; -webkit-filter: grayscale(100%); filter: grayscale(100%);} /* Adress*/ .bcadress { position: relative; padding: 42px 60px; color: #fff; background: #00385b; } .bcadress a { color: #fff; letter-spacing: 0.3px; } .leftadre { float: left; } .rightadre { float: right; text-align: right; } .bcadress .titre { font: normal 20px/20px sw-b; letter-spacing: 1.5px; } .bcadress p { font: normal 13px/18px sw-r; margin-bottom: 0 } .icomap { position: absolute; top: 27px; left: 50%; margin-left: -43px; display: block; width: 86px; height: 86px; border: 1px dashed #fff; border-radius: 50%; background: url(../images/mapw.svg) no-repeat center; } .icomap:before { position: absolute; content: ''; left: 50%; margin-left: -35px; top: 50%; margin-top: -35px; border: 1px solid #fff; width: 69px; height: 69px; border-radius: 50%; } .hpage.bcadress { display: none; } /* CONTENT + ASIDE */ .page #slider .slick-list , .page .slogan, .page .arrowSlider , .page .pagination , .page .aside-banner , .page .scroll { display: none; } .page#header { height: 399px; } #header.page:before { position: absolute; left: 506px; width: 100px; bottom: -34px; content: ''; height: 34px; background: #00385b; -webkit-transform: skew(32deg); -moz-transform: skew(32deg); -ms-transform: skew(32deg); transform: skew(32deg);} #header.page:after { position: absolute; left: 550px; right: 0; bottom: -34px; content: ''; height: 34px; background: #00385b; } .page #slider { min-height: auto; background: url(../images/banner-page.jpg) no-repeat center; background-size: cover; } .page .txt-banner { padding: 104px 0 0 60px; max-width: none;} .page .txt-banner::before { width: 575px; } .page .txt-banner > span { letter-spacing: 2.7px; } .page .txt-banner em { line-height: 30px; letter-spacing: 1.6px; } .intpage { text-align: center; margin-bottom: 21px; } .titrePage { text-align: center; font: normal 30px/30px sw-bc; text-transform: uppercase; position: relative; display: inline-block; } .titrePage span { display: inline-block; vertical-align: top; position: relative; padding: 0 6px; background: #fff; font: normal 16px/26px sw-r; z-index: 2; } .intpage .sousTitre { text-align: center; font: normal 30px/30px sw-bc; text-transform: uppercase; position: relative; display: inline-block; margin-top: -6px; } .intpage .sousTitre:before { content: ''; display: block; left: 0; right: 0; top: -12px; height: 1px; background: #e5ebee; position: absolute; } .pageContent { width:100%; min-height:1298px; margin:0 auto; position:relative; padding:0 340px 0 60px; } .pageLeft { width:100%; max-width:975px; position:relative; margin:0 auto; padding:77px 60px 30px 50px;} .pageLeft p a { color: #00b9fe; } .pageLeft p { margin:0 0 25px 0;} .pageLeft ul { margin:0; padding: 0 0 25px 25px; } .pageLeft ul.listeMenu { margin:0; } .pageLeft ul li { line-height:23px; padding:0 0 0 24px; background:url(../images/listicon.svg) 0 4px no-repeat; margin-bottom: 13px;} .photoPage { width:100%; height:auto; padding: 29px 8px 67px; max-width: 815px;} .itemph { float: left; width: 33.33%; } .photoPage .inneritemph { position: relative; padding-bottom: 10px; } .photoPage .inneritemph:before { position: absolute; content: ''; left: 50%; bottom: 0; height: 10px; margin-left: -42.5px; width: 85px; background: #b7e627; } .photoPage img { display: block; width:100%; height:auto; margin:0; padding:0 10px;} .aside { width:340px; height:100%; position:absolute; right:0; top:0; padding-top: 34px; z-index: 999 } .aside>.titre { border-left:1px solid #cecece; font:normal 18px/100px sw-bc; text-transform:uppercase; text-align:center; background:#fff;} .aside .slideRight { width:100%; position:relative; background:#00385b; padding-bottom:65px;} .aside .blocSlide { width:auto; padding:70px 40px 45px 40px; cursor:pointer;} .aside .blocSlide a { width:30px; height:15px; margin:0 auto; background:url(../images/icone-arrow2.svg) 0 0 no-repeat; display:block; text-indent:-9999px;} .aside .blocContenu1 { width:100%; height:240px; background:url(../images/banner-contenu2.jpg) 50% 10% no-repeat; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover;} /*.aside .blocRight { padding:50px 40px;}*/ /*.aside .blocRight .titre { padding:0 0 20px 0; font:normal 24px/28px sspl;}*/ /*--------------------*/ .aside .blocActivites { padding: 0; } .aslideProduits .content { padding-bottom: 40px; background: rgb(231,231,231); background: -moz-linear-gradient(left, rgba(231,231,231,1) 0%, rgba(248,248,248,1) 50%, rgba(231,231,231,1) 100%); background: -webkit-linear-gradient(left, rgba(231,231,231,1) 0%,rgba(248,248,248,1) 50%,rgba(231,231,231,1) 100%); background: linear-gradient(to right, rgba(231,231,231,1) 0%,rgba(248,248,248,1) 50%,rgba(231,231,231,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#e7e7e7',GradientType=1 ); } .aslideProduits .produit { background: none; } .aside .blocTitre { padding: 28px 0 19px; border-bottom: 10px solid #b7e627; } .aside .blocTitre h2 { display: block; } .aside .blocTitre em { font-size: 22px; line-height: 30px; vertical-align: middle; display: inline-block; } .aside .blocTitre h2 span { line-height: 26px; vertical-align: bottom; padding: 0; } .blocActivites .aslideProduits .blocTitre h2 span , .aside .blocTitre h2::before { display: none; } .blocActivites .aslideProduits .blocTitre { padding: 45px 0 33px; border-bottom: 10px solid #b7e627; } .blocActivites .aslideProduits .blocTitre h2 { font-size: 22px; line-height: 30px; } .aslideProduits { padding-bottom: 0; border-bottom: 40px solid #00385b; margin-bottom: 1px; } .aslideProduits .slick-prev { top: auto; bottom: -40px; width: 68px; height: 40px; background: url(../images/larrow-2.svg) no-repeat center; } .aslideProduits .slick-next { top: auto; bottom: -40px; width: 68px; height: 40px; background: url(../images/rarrow-2.svg) no-repeat center; } .aslideProduits > div { padding: 0; } .aslideProduits .content .boximg { position: relative; padding: 49px 40px 0; min-height: 272px; margin-bottom: 0; } .aslideProduits .produit img { display: block; max-width: 210px; margin: 0 auto;} .aslideProduits .decription { padding: 0 40px; text-align: center; } .aslideProduits .plus { text-align: left; top: 36px; } .aslideProduits .numero , .aslideProduits .icon { display: none; } .aslideProduits .content div { float: none; width: 100%; display: block; } .aslideProduits .produit .titre, .aslideProduits .parachevement .produit .titre, .aslideProduits .blocRight .produit .titre { position: relative; padding-top: 140px; top: auto; left: auto; right: auto; } .aslideProduits .produit .titre:before { position: absolute; content: ''; top: 31px; left: 50%; margin-left: -43px; width: 86px; height: 86px; border-radius: 50%; background-position: center; background-repeat: no-repeat; display: block; border: 1px dashed #00385b; } .aslideProduits .produit .titre:after { position: absolute; content: ''; display: block; width: 70px; height: 70px; border-radius: 50%; top: 40px; left: 50%; margin-left: -34.5px; background: #00385b no-repeat center; } .aslideProduits .itpro1 .produit .titre:after { background-image: url(../images/icon1-2.svg); } .aslideProduits .itpro2 .produit .titre:after { background-image: url(../images/icon2-2.svg); } .aslideProduits .itpro3 .produit .titre:after { background-image: url(../images/icon3-2.svg); } .aslideProduits .itpro4 .produit .titre:after { background-image: url(../images/icon4-2.svg); } .aslideProduits .decription p, .aslideProduits .blocRight .decription p { padding: 0; height: auto; max-width: 400px; margin: 0 auto; display: block; text-align: center;} .aside .blocMarq .wrapper { padding: 28px 0; background: #f3f3f3; } .aside .blocMarq .blocTitre { border-bottom: none; padding: 26px 0 31px; background: #fff; } .aslideMarque { padding: 0 44px; } .aslideMarque .slick-prev { left: 23px; } .aslideMarque .slick-next { right: 23px; } .pageLeft .listeMenu li { width: 65%; } .blocPage.fancybox a { display: inline-block; position: relative; background: #000; float: left; width: 30%;} .blocPage.fancybox img { display:inline-block; width: 100%; border: 0; } /* FOOTER */ #footer { width:100%; height:auto; position:relative;} .footer { background:#002237; padding:0 60px; position:relative} .footer .social { background:none; float:right; padding:20px 110px 0 0} .footer .social a { border:none} .footer .left { color:#fff; padding:25px 0} .footer .left a { color:#fff; font:normal 13px/18px 'sw-r'; letter-spacing:0.2px; cursor: pointer;} .footer .left i { font-style:normal; color:#405969; margin:0 14px; display:inline-block;} .footer .left span { letter-spacing:0.75px; font-size: 13px; line-height: 18px;} .toponweb { position: fixed; right: 0; bottom: 0; display:block; width:102px; text-align:center; height:73px; background:#b7e627; padding-top:25px; z-index:100; opacity: 0;} .toponweb.fixed { opacity: 1;} .toponweb img { width:86px; display:block; margin:0 auto;} .plan { width: 100%; position: relative; padding: 25px; text-align: center; overflow: hidden; display: none;} .plan a { margin:0 10px} .pageLeft ul.listeProduits { background: none; padding-top: 0px; } .pageLeft ul li.product { line-height:23px; padding:8px 0 8px 129px; position:relative; min-height: 150px; background: none; text-align: justify; } .pageLeft ul li.product img { position:absolute; top:0; left:0; } /* PAGE SERVICES */ .blocPage { margin:30px 0 10px 0; padding:30px 0 0 0; border-top:1px dotted #cecece;} .blocPage>div { border-bottom:1px dotted #cecece; padding:0 0 30px 0; margin:0 0 30px 0;} .blocPage>div img { width:30%; height:auto; float:left; padding:0;} .blocPage>div>div { width:70%; height:auto; float:left; padding:10px 0 0 30px; } .blocPage>div .sousTitre { margin:0 0 10px 0;} .blocPage>div p { margin:0 0 14px 0;} .blocPage>div .link { margin:0 0 5px 0;} @media (max-width:800px) { .blocPage>div img { width:40%;} .blocPage>div>div { width:60%;} } @media (max-width:600px) { .blocPage>div img { display:none;} .blocPage>div>div { width:100%; float:none; padding:0;} } @media (max-width: 500px) { .blocPage>div .link { margin:0 0 5px 25px;} } .date { font-size:12px; color:#828282; font-weight: normal;} .contentActu img { width: 100%; height: auto;} /* PAGE CONTACT */ form { width:100%; } input { width:100%; border:1px solid #cecece; padding:0 20px; margin:0 0 15px 0; line-height:60px; height:60px; outline:none; font:normal 16px/23px sw-r;} textarea { width:100%; min-height:160px; border:1px solid #cecece; padding:20px; margin:0 0 7px 0; font:normal 16px/23px sw-r; outline:none;} form .link { width:auto; cursor:pointer; margin:15px 0 30px 0; border:0; border:1px solid #00385b; background: #fff; } form .error { border:1px solid #e03c2a;} input, textarea { -webkit-appearance:none; -ms-appearance:none; appearance:none; -moz-appearance:none; -o-appearance:none; border-radius:0;} .requis { background:url(../images/icone-requis.svg) right 24px no-repeat;} .requisTxt { padding:8px 0 8px 20px; background:url(../images/icone-requis.svg) left 50% no-repeat;} .formError { color:#fff; text-align:center; width:100%; height:60px; line-height:60px; margin: 0 0 15px 0; background:#e03c2a;} .formSent { max-width:500px; padding:40px; margin:20px auto; border:2px solid #45b552; text-align:center; background:#e3f4e5;} .formSent img { margin:0 0 12px 0;} .formSent p { font:normal 18px/26px sspr; color:#45b552; margin:0 0 20px 0;} .formSent .link { border:1px solid #45b552; color:#45b552; background:#fff;} .formSent .link:hover { color:#fff; background:#45b552; border-color:#45b552;} @media (max-width:500px) { .formSent { padding:25px; margin:0 auto;} form { padding: 0 25px; } .blocContact { padding:0 25px; } } .blocContact { margin:0 0 50px 0; } .blocContact>div { width:100%; border-bottom:1px dotted #cecece; padding:15px 0 15px 40px; position:relative;} .blocContact>div a { color:#00385b;} .blocContact>div a.map:hover { color:#00385b;} .blocContact>div a:hover { color:#b7e627;} .blocContact>div span { display:block; width:30px; height:30px; background:url(../images/icones-contact.svg) 0 0 no-repeat #00385b; border-radius:50%; position:absolute; left:0; top:13px;} .blocContact .contact1 { background-position:0 0;} .blocContact .contact2 { background-position:0 -30px; cursor:default;} .blocContact .contact3 { background-position:0 -60px;} .blocContact .contact4 { background-position:0 -90px;} .contactBloc { float:left; width: 50%; box-sizing: border-box; padding: 0 25px;} .accesAdresse { background:#00385b; text-align:center; color:#fff; padding:10px 0; margin:0;} .accesAdresse a, .accesLeft a, .accesRight a { color:#fff;} .accesAdresse a:hover, .accesLeft a:hover, .accesRight a:hover { color:#fff!important;} .accessContact {display: flex; margin:0;} .accesLeft { width:50%; padding:10px 5px; text-align:center; color:#00385b; background:#f3f3f3;} .accesRight { width:50%; padding:10px 5px; text-align:center; color:#00385b; background:#e4e4e4;} .map { height: 350px;} @media (max-width:1280px) { .wrapper { max-width:100%; padding-left:40px; padding-right:40px} .txt-banner { background-position:-120px 0} .footer { padding:0 40px} } @media (max-width:1160px) { .menu { padding-right: 179px; } .infos:before,.infos:after { display:none} .adr { margin-right:10px} .infos { padding:40px 20px 20px; width:37%;} .adr { display:block !important; padding-bottom:20px} .adr br:first-of-type { display:none;} .blocLogo { padding-right:40px} .blocLogo .icon { margin:19px auto 0} .horaire { width:calc(100% - 49px); width:-webkit-calc(100% - 49px); width:-moz-calc(100% - 49px);} .blocInfos:before { display:none} .aside-banner { max-width:300px; padding:0 40px} .pageLeft .listeMenu li { width: 100%; } } @media (min-width:1201px) { body a span, body a, span:before, span:after, a:after, a:before, .link, .slick-prev, .slick-next, .slick-dots button, .blocSlide, .blocSlide *, .sub, .blocContenu1 .right div, .blocMarq .slick-slide img, .blocPage.fancybox a img { -webkit-transition:all 400ms ease-in-out; -moz-transition:all 400ms ease-in-out; -ms-transition:all 400ms ease-in-out; transition:all 400ms ease-in-out;} .footer .left a:hover, a:hover { color:#b7e627;} .pageLeft p a:hover { color: #b7e627;} .btn-group a:hover { background-color: #00385b; } .logo:hover { opacity:.5;} .rs:hover { background-color:#006492 !important;} .headerTop .tel:hover { background-color:#006492; border-color:#006492; color:#fff;} .menu li:hover>a { color:#00385b;} .menu .sub a:hover, .menu .sub li.active a:hover { background: #0b3a5b;color: #b8d433;} .txt-banner a:hover { color:#fff;} .txt-banner a:hover:after { width:0%;} .scroll:hover , .slick-prev:hover, .slick-next:hover { opacity:.5;} .link:hover { background:#00385b; color:#fff;} .blocSlide:hover .hide { opacity:1;} .hide .link:hover { background-color:#fff; color:#00385b;} .blocContenu1 .right:hover>div { background:rgba(0,0,0,.8);} .devis:hover { background-color:#006492; border-color:#006492;} .toponweb:hover { opacity:1;} .slide-galerie a:hover span { opacity:1;} .blocLogo:hover .icomap2:before, .slideProduits .content:hover .icon:before { background: #00385b; border:1px solid #00385b} .blocLogo:hover .icon:before { background: #00385b url(../images/map.svg) no-repeat center; } .menu>ul>li:hover>a span { opacity:1} .blocMarq .slick-slide:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); } .blocPage.fancybox a:hover img { opacity:0.45; border: 0;} } /* HIDE MOBILE */ .wrapMenuMobile, .menu .vueMobile { display:none;} /* RESPONSIVE */ @media (max-width: 1200px) { .pageLeft ul { background: none; } } @media (max-width:1024px) { /* header */ .headerTop { padding: 0 40px; } .social { right: 155px; } .wrapMenuMobile { width:auto; height:60px; display:block; z-index:80; transition:all 400ms ease-in-out; color:#00385b; font:normal 15px/18px dosis; letter-spacing:.8px; cursor:pointer; padding:33px 40px 0 0; text-transform:uppercase; position:absolute; right:0; top:0;} .menuMobile { width:auto; display:block; height:14px; cursor:pointer; position:relative; line-height:14px; padding:0 40px 0 0;} .menuMobile>div { width:20px; height:2px; background:#00385b; position:absolute; right:0; top:50%; margin-top:-1px;} .menuMobile>div:before { width:100%; height:2px; background:#00385b; position:absolute; right:0; top:6px; content:"";} .menuMobile>div:after { width:100%; height:2px; background:#00385b; position:absolute; right:0; top:-6px; content:"";} .menuMobile.active>div { height:0px;} .menuMobile.active>div:before { top:0; transform:rotate(45deg);} .menuMobile.active>div:after { top:0; transform:rotate(-45deg);} .menu { position: absolute; left: 0; right: 0; top: 80px; } .menu>ul { width:100%; height:auto; position:absolute; left:0; top:0; padding:0; background:#f0f0f0; display:none; z-index:999;} .menu ul li { width:100%; margin:0 auto; display:block; float:none; padding:0;} .menu li a { height:60px; line-height:60px; border:0; padding:0 40px; margin:0; text-align:left; border-bottom:1px solid #cecece;} .menu li a span { display:none;} .menu>ul>li.active>a { background:#00385b; color:#fff; border-color:#00385b;} .menu i { display:block; width:100%; height:60px; position:absolute; right:0; top:0;} .menu i:before { display:block; width:2px; height:22px; position:absolute; right:50px; top:50%; margin-top:-11px; content:""; background:#00385b;} .menu i:after { display:block; width:22px; height:2px; position:absolute; right:40px; top:50%; margin-top:-1px; content:""; background:#00385b;} .menu i.active:before { display:none;} .menu li.active i:before { background:#fff;} .menu li.active i:after { background:#fff;} .menu .vueMobile { display:block;} .menu .sub { display:none; visibility:visible; width:100%; position:relative; left:auto; top:auto; margin:0; opacity:1; background:#fff; padding:0; border-bottom:1px solid #cecece;} .menu .sub li a { color:#444; text-align:left; padding:0 60px;} .menu .sub li.active a { color:#b8d433; background:#fff;} .blocLogo { display:none} .infos { width:50%} .blocInfos .wrapper { padding:0} .blocMarq .blocTitre, .blocTitre { padding: 45px 0 30px; } .slogan span { display:block} #slider .banner1 { background-image:url(../images/banner1.jpg);} .txt-banner { max-width: 100%; padding-left: 40px; } .txt-banner::before { max-width: 476px; padding-left: 40px; } .txt-banner>span { font-size:38px; letter-spacing: 0.5px;} .blocServices .hide { display:none;} .decription p { padding-left:128px} .page .txt-banner { padding: 47px 0 0 40px; } #header.page::before { left: 426px; } #header.page:after { left: 490px; } .page .menu .sub { top:auto;} .aside { display:none;} .pageContent { padding:0; min-height:516px;} .pageLeft { padding:50px 40px 30px 40px; max-width:880px;} .pageLeft ul { padding: 20px 20px 33px;} .footer .social { padding-right: 0; } .bcadress { padding: 42px 40px } .toponweb, .toponweb.fixed { position:absolute; opacity: 1;} .toponweb { padding-top: 20px;} } @media (max-width:767px) { .menu { top: 43px; } .logo { max-width: 115px; padding: 8.5px 0;} .wrapMenuMobile { padding-top: 16px; } .social , .aside-banner, .scroll, .slogan, .arrowSlider, .pagination , .blocInfos::after , .footer .left > * , .footer .left i { display:none;} .footer .social { display: block; right: 134px; } .txt-banner { height: 200px; padding-top: 50px; } .txt-banner::before { max-width: 440px; } #header { height: 540px; } .infos { width: 100%; min-height: 265px; } .blocInfos .infos:last-of-type { background: #002b46; } .footer .left > span { display: block; } .photoPage .slick-arrow { margin-top: -35px; } .page .txt-banner::before { width: 415px;} #header.page::before { left: 350px;} #header.page::after { left: 380px; } .blocActivites { padding: 0; } .slideProduits .content { padding-bottom: 40px; background: rgb(231,231,231); background: -moz-linear-gradient(left, rgba(231,231,231,1) 0%, rgba(248,248,248,1) 50%, rgba(231,231,231,1) 100%); background: -webkit-linear-gradient(left, rgba(231,231,231,1) 0%,rgba(248,248,248,1) 50%,rgba(231,231,231,1) 100%); background: linear-gradient(to right, rgba(231,231,231,1) 0%,rgba(248,248,248,1) 50%,rgba(231,231,231,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#e7e7e7',GradientType=1 ); } .produit { background: none; } .blocTitre h2 { display: block; } .blocTitre em { font-size: 22px; line-height: 30px; vertical-align: middle; display: inline-block; margin-top: auto; } .blocTitre h2 span { line-height: 25px; vertical-align: bottom; padding: 0; } .blocActivites .blocTitre h2 span , .blocTitre h2::before { display: none; } .blocActivites .blocTitre { padding: 45px 0 33px; border-bottom: 10px solid #b7e627; } .blocActivites .blocTitre h2 { font-size: 22px; line-height: 30px; } .slideProduits { padding-bottom: 0; border-bottom: 40px solid #00385b; margin-bottom: 1px; } .slideProduits .slick-prev { top: auto; bottom: -40px; width: 68px; height: 40px; background: url(../images/larrow-2.svg) no-repeat center; } .slideProduits .slick-next { top: auto; bottom: -40px; width: 68px; height: 40px; background: url(../images/rarrow-2.svg) no-repeat center; } .slideProduits > div { padding: 0; } .slideProduits .content .boximg { position: relative; padding: 49px 40px 0; min-height: 308px; margin-bottom: 0; } .produit img { display: block; max-width: 210px; margin: 0 auto;} .decription { padding: 0 40px; text-align: center; } .plus { text-align: left; top: 36px; } .itemph { width: 50%; } .itemph:nth-child(3) { display: none; } .page .txt-banner { padding-left: 40px; height: 129px; padding-top: 33px;} .page .txt-banner > span { font-size: 25px; line-height: 30px;} .page .txt-banner em { font-size: 18px; line-height: 30px;} .numero , .icon { display: none; } .slideProduits .content div { float: none; width: 100%; display: block; } .produit .titre, .parachevement .produit .titre, .blocRight .produit .titre { position: relative; padding-top: 140px; top: auto; left: auto; right: auto; } .produit .titre:before { position: absolute; content: ''; top: 31px; left: 50%; margin-left: -43px; width: 86px; height: 86px; border-radius: 50%; background-position: center; background-repeat: no-repeat; display: block; border: 1px dashed #00385b; } .produit .titre:after { position: absolute; content: ''; display: block; width: 70px; height: 70px; border-radius: 50%; top: 40px; left: 50%; margin-left: -34.5px; background: #00385b no-repeat center; } .itpro1 .produit .titre:after { background-image: url(../images/icon1-2.svg); } .itpro2 .produit .titre:after { background-image: url(../images/icon2-2.svg); } .itpro3 .produit .titre:after { background-image: url(../images/icon3-2.svg); } .itpro4 .produit .titre:after { background-image: url(../images/icon4-2.svg); } .decription p, .blocRight .decription p { padding: 0; height: auto; max-width: 400px; margin: 0 auto; display: block; text-align: center;} .toponweb { height: 68px;} .contactBloc { float:none; width: 100%; box-sizing: border-box; padding: 0;} .accessContact { display:block;} .accesLeft { width:100%; padding:10px 5px; text-align:center; color:#00385b; background:#f3f3f3;} .accesRight { width:100%; padding:10px 5px; text-align:center; color:#00385b; background:#e4e4e4;} .decription h2.titre { display: none;} .produit h2.titre { display: block;} } @media (max-width:620px) { .bcadress {padding: 147px 40px 34px;} .icomap { top:38px; } .icomap::before, .bcadress a { display: none; } .leftadre, .rightadre { width: 100%; } .leftadre { margin-bottom: 17px; } .icomap:before { width:72px; height:72px; content:''; position:absolute; display:block; border:1px solid #fff; top: 40px; left: 40px;} } @media (max-width:500px) { #header { height: 450px; } #slider { min-height: auto; background: url(../images/banner-mobile.jpg) no-repeat center; background-size: cover; } .page#header { height: 220px; } .page #slider { position: relative; height: 177px; background: url(../images/banner-page-mobile.jpg) no-repeat center; background-size: cover; } #slider .slick-list , .blocInfos, .page .txt-banner { display: none; } .headerTop { padding: 0 25px; } .txt-banner { padding-left: 15px; height: 129px; padding-top: 33px; } .txt-banner::before { right: 0; } .txt-banner > span { font-size: 25px; line-height: 30px; } .txt-banner em { font-size: 18px; line-height: 30px; } .txt-banner > span::after { margin: 7px 0 0; } #header.page::before { left: 86px; height: 21px; bottom: -21px;} #header.page::after { left: 100px; height: 21px; bottom: -21px;} .wrapMenuMobile { padding:17px 25px 0 0;} .menu li a { padding:0 25px;} .menu i:before { right:35px;} .menu i:after { right:25px;} .menu .sub li a { padding:0 45px;} .pageLeft { padding-left: 0; padding-right: 0; } .pageLeft p , .sousTitre { padding-left: 25px; padding-right: 25px; } .pageLeft ul { padding: 2px 25px 33px; } .intpage { margin-bottom: 0;} .titrePage span { line-height: 26px; } .intpage .sousTitre { font-size: 25px; line-height: 25px; } .photoPage { padding: 6px 0 33px;} .photoPage img { padding: 0; } .bcadress { padding: 147px 25px 34px;} .hpage.bcadress { display: block; } .blocMarq { padding-bottom: 0; } .decription { padding: 0 25px; } .slideProduits .content .boximg { padding: 49px 25px 0; } .blocActivites .blocTitre { padding: 26px 0 19px; } .blocMarq .blocTitre { padding: 22px 0 25px; } .itemph { float: none; width: 100%; margin: 0 auto; } .itemph:nth-child(2) { display: none; } .footer { padding:26px 25px 0 25px;} .toponweb, .toponweb.fixed { position: static; margin: 0 auto; } .footer > div { float: none; } .footer .left { padding: 0; text-align: center; } .footer .social { float: none; position: static; display: block; width: 100%; text-align: center; padding: 15px 0 11px; } .footer .social a { float: none; margin: 0 2px; display: inline-block; vertical-align: middle; } .social a { width:35px;} }