/* * Modification "Franboud-menu-temp" * Modifications temporaires sur le CSS car des items dans le menu ont été enlevés, * mais vont être remis dans le menu quand les pages seront créées : * - Process * - FAQ * * Modification "Franboud-call-to-action-temp" * Modifications temporaires sur le CSS car les calls to action ne sont pas encore * définis, mais vont l'être quand les autres pages auront été crées. */ /* Mobile first: @media (min-width: 768px) {} @media (min-width: 992px) {} @media (min-width: 1200px) {} Or not! @media (max-width: 767px) {} @media (max-width: 991px) {} @media (max-width: 1199px) {} */ /* FONTS ....................................................................... Font: League Gothic Regular: 400 Font: Futura PT Light: 300 Book: 400 */ html, body, p, h1, h2, h3, h4, h5, h6, th, input, textarea, button, strong, label, .services-style a, h4, .h4, p.footnote, .map-zone .contact-form ul li, .faq .item h3, .ppf-individual-part__title { font-family: "futura-pt-n4", "futura-pt", Arial, sans-serif; font-style: normal; font-weight: 400; } p, .page-formatting li, .page-formatting td, .portfolio-style .controls button.filter, .form-item input, .form-item textarea, .form-item label.floating, .portfolio-style .items a span.desc { font-family: "futura-pt-n3", "futura-pt", sans-serif; font-style: normal; font-weight: 300; } h1, h2, .h2, .h2-alt, .h2-bigger, .big-text-separator, .big-text, .big-text-smaller, h3, .h3, .portfolio-style .items a span, .comppub p.pub_name, .comppub p.pub_price, .guide-entretien-style .produits-recommandes h5, .guide-entretien-style .container-description h5, .ppf-package__number, .ppf-individual-part__number, .wraps-package-option__number { font-family: "league-gothic-n4", "league-gothic", sans-serif; font-style: normal; font-weight: 400; text-transform: uppercase; } /* FOUT */ .wf-loading p, .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4, .wf-loading h5, .wf-loading h6, .wf-loading strong, .wf-loading label, .wf-loading a, .wf-loading ul, .wf-loading li { visibility: hidden; } /* IcoMoon */ @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon.eot?v20161216'); src:url('../fonts/icomoon.eot?v20161216#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?v20161216') format('truetype'), url('../fonts/icomoon.woff?v20161216') format('woff'), url('../fonts/icomoon.svg?v20161216#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"], .page-formatting ul li:before, .faq .item h3 a.trigger:before {font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-upload:before {content: "\e900";} .icon-close:before {content: "\e209";} .icon-facebook:before {content: "\e60d";} .icon-instagram:before {content: "\e60e";} .icon-youtube:before {content: "\e60f";} .icon-banners-signs:before {content: "\e605";} .icon-branding:before {content: "\e606";} .icon-commercial-vehicle-wraps:before {content: "\e607";} .icon-custom-vehicle-wraps:before {content: "\e608";} .icon-graphic-design:before {content: "\e609";} .icon-installation:before {content: "\e60a";} .icon-promotional-items:before {content: "\e60b";} .icon-windows-walls:before {content: "\e60c";} .icon-ppf-window-tinting:before {content: "\e901";} .icon-icon-play:before {content: "\e604";} .icon-fleche_bas:before {content: "\e603";} .icon-keyboard_arrow_down:before {content: "\e10f";} .icon-keyboard_arrow_left:before {content: "\e110";} .icon-keyboard_arrow_right:before {content: "\e111";} .icon-keyboard_arrow_up:before {content: "\e112";} .icon-location-outline:before {content: "\e600";} .icon-mail:before {content: "\e601";} .icon-phone-outline:before {content: "\e602";} /* BASE TAGS ................................................................ */ body {font-size:22px; line-height:100%;position: relative; color: #2c3e50; background-color: #fff; overflow-x: hidden;} a {text-decoration: underline; cursor: pointer;} a:focus {outline: thin dotted;} a:hover, a:active {outline: 0;} a:hover, a:focus {color:#000;} .link-with-sup {text-decoration: none;border-bottom: 1px solid #0d5579;display: inline-block;line-height: 19px;} .link-with-sup:hover, .link-with-sup:focus {text-decoration:none;} /* Un fix pour IE10 responsive, et aussi pour le "snap mode" */ @-ms-viewport {width: 100%;} @viewport {width: device-width;} picture {display: block; padding: 0; border: 0; max-width: 100%;} /* SVGs ....................................................................... Styles des SVGs du site. Les SVGs sont majoritairement utile pour les icones, mais pas uniquement pour ca. */ /* WRAP Chaque SVG est wrapped dans un .iconSVG. On utilise , mais si pertinent on prend autre chose (ex :
) */ .iconSVG {display:inline-block;font-size: 1em;line-height: 1;width: 1em;height: 1em;} .iconSVG > svg { /* make it match the text color */ fill: currentColor; max-width: none; display: inline-block; transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); /* display: block; */ /* make it match the font-size */ width: 1em; height: 1em; } a .iconSVG > svg, button .iconSVG > svg {transition:none;} /* BOX SIZING ............................................................ */ .form-item input, .form-item textarea, p.form-item.full-width { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } /* COLORS ................................................................... */ /* AutoTrim Estrie - Blue */ a, .brand-blue, h3.std.brand-blue, .portfolio-style .controls button.filter:hover, .portfolio-style .controls button.filter.active, #contact .icons-rs a:hover, #contact .icons-rs a:focus, .copyrights a:hover, .copyrights a:focus, .page-formatting ul li:before, .comppub .pub_wrap p.pub_price, .comppub .pub_wrap p.pub_name, .faq .item a.trigger:focus {color:#0d5579;} .btn:hover, .btn:focus, #header .navbar-toggle:hover, #header li a.btn:hover, #header li a.btn:focus, .portfolio-style .items a, .portfolio-style.portfolio-style-videos .items a:hover, .portfolio-style.portfolio-style-videos .items a.active, #id_body .form-item.focus label.floating, .comppub h3, .comppub .pub_wrap span.pub_bar_bg span.animate_this {background-color:#0d5579;} .btn:hover, .btn:focus, #header .navbar-toggle:hover, .portfolio-style .controls button.filter.active, .form-item input:focus, .form-item.white input:focus, .form-item textarea:focus, .form-item.white textarea:focus, .form-item select:focus, .form-item.white select:focus, .btn.btn-black-border:hover, .btn.btn-black-border:focus, .copyrights a:hover, .copyrights a:focus, .comppub .pub_wrap .pub_bar, .form-item.input-file input:focus + label, .form-item.input-file input + label:hover {border-color:#0d5579;} /* AutoTrim Estrie - Light blue (for menu) */ #header li a:hover, #header li.active a, #header li.active-page a /* Main menu */ {color:#437ea5;} /* TRANSITIONS .............................................................. */ a, button, .btn, .label, .form-control, .carousel-indicators li, .carousel.slide, #header .navbar-toggle, #header .navbar-toggle .icon-bar, #hero .down-arrow a .icon-fleche_bas, .video-big .text p.icon, .services-style .container-icons h3, .portfolio-style .items a img, .portfolio-style .items a span, .portfolio-style-details .sidebar .arrows button span, .portfolio-style-details .sidebar-hover-trigger, .portfolio-style-details .sidebar .arrow-right, .portfolio-style-details .image img, .guide-entretien-style .container-icons h3, .guide-entretien-style .container-icons h3 *, .form-item input, .form-item textarea, .form-item.input-file input + label, .add-transition { transition:all 0.3s ease; } .remove-transition { transition:none !important; } /* ANIMATE .................................................................. */ .animate, .animate-staggered-item {opacity: 0; filter: alpha(opacity=0); visibility: hidden;} .animated, .no-js .animate, .no-js .animate-staggered-item {opacity: 1; filter: alpha(opacity=100); visibility: visible;} .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* Stop all animations on iPad and lower */ @media (max-width: 1024px) { .animate, .animate-staggered-item {opacity: 1; filter: alpha(opacity=100); visibility: visible;} .animated {opacity: 1; filter: alpha(opacity=100); visibility: visible; /*CSS transitions*/ -o-transition-property: none !important; -moz-transition-property: none !important; -webkit-transition-property: none !important; transition-property: none !important; /*CSS transforms*/ -ms-transform: none !important; -webkit-transform: none !important; transform: none !important; /*CSS animations*/ -webkit-animation: none !important; animation: none !important; } } /* PAGE ..................................................................... */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {margin-bottom: 15px; margin-top: 0;} h1 {} h2, .h2 {font-size: 40px; text-align: center; color: #919191; line-height: 100%; letter-spacing: 5px;text-indent: 5px;text-transform: uppercase;margin-bottom: 20px;} h2 .subtitle {font-size: 26px;line-height: 1;display: block;margin-top: 0.25em;color: #b9b9b9;} .h2-bigger {font-size: 50px;} h3, .h3 {font-size: 40px;line-height: 100%;letter-spacing: 5px;text-indent: 5px;} h3.faq, h3.std {font-size: 30px; color: #919191; letter-spacing: 2px;} h4, .h4 {font-size: 22px; line-height: 30px; color: #fff;margin-bottom: 20px;} p {margin-bottom: 20px;} p:last-child {margin-bottom: 0;} /* Base tags */ .page-formatting {} .page-formatting h2 {margin-top: 50px;} .page-formatting h2:first-child {margin-top:0;} .page-formatting .h2-alt {color:#fff;font-size: 56px;line-height: 56px;text-transform: uppercase; letter-spacing: 5px; text-indent: 5px;} .page-formatting p, .page-formatting li, .page-formatting th, .page-formatting td {color: #5e5e5e; font-size: 22px; line-height: 30px;text-align: center;} .page-formatting p.no_spacing {margin-bottom: 0;} .page-formatting ul {list-style: none; padding:0; margin:0 0 20px 0;} .page-formatting ul li {padding-left: 0;text-indent: -20px;margin-bottom: 20px;} .page-formatting ul li:before {content: "\e111";padding-right: 4px;font-size: 16px;position: relative;top: -1px;left: -4px;} .page-formatting ul.no-list li {padding-left: 0; text-indent: 0;margin-bottom: 0;} .page-formatting ul.no-list li:before {content: ""; padding-right: 0;position: static;top: 0;} .page-formatting ul ol {margin: 20px 0;padding-left: 20px;} .page-formatting ul ol li {padding-left: 0;text-indent: 0;} .page-formatting ul ol li:before {display: none;} /* Les titres h3, h4 ne sont pas top par défaut. Cette classe les corrige. */ .page-formatting__titles-fix h3 {color: #2c3e50;font-size: 30px;letter-spacing: 2px;} .page-formatting__titles-fix h4 {color: #5e5e5e;margin-top: 2em;font-size: 24px;} /* Cols */ /* Set 1 : Pour 2 colonnes layout */ .page-formatting .set-1 {} .page-formatting .set-1 h2 {text-indent:0; margin-bottom:30px;} .page-formatting .set-1 .col-left {float: left;width: 50%;text-align:right;padding: 40px 5% 40px 0;} .page-formatting .set-1 .col-left p, .page-formatting .set-1 .col-left h2, .page-formatting .set-1 .col-left li {text-align:right;} .page-formatting .set-1 .col-right {float: right; width: 50%; text-align:left;padding: 40px 0 40px 5%; border-left:1px solid #cecece;} .page-formatting .set-1 .col-right p, .page-formatting .set-1 .col-right h2, .page-formatting .set-1 .col-right li {text-align:left;} .page-formatting .set-1 .col-right h3.std {text-indent: 0;} .page-formatting .set-1.alt .col-left {padding: 10px 3% 10px 0;} .page-formatting .set-1.alt .col-right {padding: 10px 0 10px 3%; border:none;} .page-formatting .set-1.alt-comppub .col-left {padding: 10px 3% 10px 0;} .page-formatting .set-1.alt-comppub .col-right {padding: 10px 0 10px 3%; border:none;} .page-formatting .set-1.alt-faq .col-left {padding: 39px 2% 10px 0;width: 35%;} .page-formatting .set-1.alt-faq .col-right {padding: 25px 0 25px 2%;border:none;width: 65%;} .page-formatting .set-1.alt-wider-right .col-left {padding: 25px 2% 10px 0;width: 35%;} .page-formatting .set-1.alt-wider-right .col-right {padding: 25px 0 25px 2%;border:none;width: 65%;} /* Media queries */ @media (max-width: 1350px) { .page-formatting .set-1 {padding: 0 7%;} .page-formatting .set-1 .col-left {padding-right: 7%;} .page-formatting .set-1 .col-right {padding-left: 7%;} .page-formatting .set-1.alt .col-left {padding-right: 3%;} .page-formatting .set-1.alt .col-right {padding-left: 3%;} } @media (max-width: 1200px) { /* Section "Investissement publicitaire" passe en 1 seule colonne */ .page-formatting .set-1.alt-comppub .col-left {float: none;width: 100%;max-width: 700px;padding: 20px 0 70px 0;margin: 0 auto;} .page-formatting .set-1.alt-comppub .col-right {float: none;width: 100%;max-width: 800px;padding: 0;margin: 0 auto;text-align: center;} .page-formatting .set-1.alt-comppub .col-left p, .page-formatting .set-1.alt-comppub .col-left h2, .page-formatting .set-1.alt-comppub .col-left li {text-align:center;} } @media (max-width: 1000px) { /* Section "FAQ" passe en 1 seule colonne */ .page-formatting .set-1.alt-faq .col-left {float: none;width: 100%;padding: 50px 0 5px 0;text-align: center;margin: 0;} .page-formatting .set-1.alt-faq .col-right {float: none;width: 100%;padding: 0;margin: 0;} .page-formatting .set-1.alt-faq .col-left p, .page-formatting .set-1.alt-faq .col-left h2, .page-formatting .set-1.alt-faq .col-left li, .page-formatting .set-1.alt-faq .col-right p, .page-formatting .set-1.alt-faq .col-right h2, .page-formatting .set-1.alt-faq .col-right li {text-align:left;} /* Section "Wider right" passe en 1 seule colonne */ .page-formatting .set-1.alt-wider-right .col-left {float: none;width: 100%;padding: 50px 0 5px 0;text-align: center;margin: 0;} .page-formatting .set-1.alt-wider-right .col-right {float: none;width: 100%;padding: 0;margin: 0;} .page-formatting .set-1.alt-wider-right .col-left p, .page-formatting .set-1.alt-wider-right .col-left h2, .page-formatting .set-1.alt-wider-right .col-left li, .page-formatting .set-1.alt-wider-right .col-right p, .page-formatting .set-1.alt-wider-right .col-right h2, .page-formatting .set-1.alt-wider-right .col-right li {text-align:left;} } @media (max-width: 840px) { .page-formatting .set-1 {padding: 0 10%;} .page-formatting .set-1 .col-left {float: none;width: 100%;padding: 20px 0 0 0;margin-bottom: 20px;text-align: center;border: none;} .page-formatting .set-1 .col-right {float: none;width: 100%;padding: 0 0 20px 0;text-align: center;border: none;} .page-formatting .set-1 .col-left p, .page-formatting .set-1 .col-left h2, .page-formatting .set-1 .col-left li, .page-formatting .set-1 .col-right p, .page-formatting .set-1 .col-right h2, .page-formatting .set-1 .col-right li {text-align:center;} .page-formatting .set-1.alt .col-left {padding-right: 0;} .page-formatting .set-1.alt .col-right {padding-left: 0;} } @media (max-width: 600px) { .page-formatting .set-1.alt-faq {padding: 0;} } /* Set 2 : 1 colonne layout, moins large que standard */ .page-formatting .set-2 {padding: 0 15%;} /* Media queries */ @media (max-width: 1100px) { .page-formatting .set-2 {padding: 0 7%;} } @media (max-width: 600px) { .page-formatting .set-2 {padding: 0;} } /* Set 3 : Pour 2 colonnes layout, mais les 2 colonnes sont text-align:left */ .page-formatting .set-3 {} .page-formatting .set-3 h3 {text-indent:0;} .page-formatting .set-3 .col-left {float: left;width: 50%;text-align:right;padding: 40px 5% 40px 0;} .page-formatting .set-3 .col-right {float: right; width: 50%; text-align:left;padding: 40px 0 40px 5%;} .page-formatting .set-3 p, .page-formatting .set-3 li, .page-formatting .set-3 h3 {text-align:left;} /* Media queries */ @media (max-width: 1350px) { .page-formatting .set-3 {padding: 0 7%;} .page-formatting .set-3 .col-left {padding-right: 5%;} .page-formatting .set-3 .col-right {padding-left: 5%;} } @media (max-width: 840px) { .page-formatting .set-3 {padding: 0 10%;} .page-formatting .set-3 .col-left {float: none;width: 100%;padding: 20px 0 0 0;margin-bottom: 20px;text-align: center;border: none;} .page-formatting .set-3 .col-right {float: none;width: 100%;padding: 0 0 20px 0;text-align: center;border: none;} .page-formatting .set-3 p, .page-formatting .set-3 li, .page-formatting .set-3 h3 {text-align:center;} } /* Text section wrapper */ .text-section-wrapper {width: 1200px; margin: 0 auto;text-align: center; position: relative;} .text-section-wrapper h2 {margin-bottom:30px;padding: 0 5%;} .text-section-wrapper .text-section-center-text {width: auto;margin: 0 20%; position: relative;z-index: 1;} /* Media queries */ @media (max-width: 1350px) { .text-section-wrapper {width: 100%;} } @media (max-width: 950px) { .text-section-wrapper .text-section-center-text {width:100%; margin:0 auto; max-width: 580px; padding: 0 50px;margin-bottom: 50px;min-height: auto;} } @media (max-width: 550px) { .text-section-wrapper .text-section-center-text {padding: 0 7%;} } /* Big text */ p.big-text {font-size: 53px; line-height: 100%;} p.big-text-smaller {font-size: 40px; line-height: 100%;} /* Big text separator */ p.big-text-separator {border-top: 1px solid #ababab; padding: 35px 5% 30px 5%; font-size: 56px; line-height: 95%;text-transform: uppercase;width: 80%;margin: 0 auto;margin-top: 80px;} /* Media queries */ @media (max-width: 1150px) { p.big-text-separator {font-size:46px;} } @media (max-width: 500px) { p.big-text-separator {font-size:36px;} } /* Section */ .section {padding: 85px 0; position: relative;} .navbar.active-section {top: 0 !important;} /* Custom sections styles */ .section.product-description {} /* Section title zone */ .section-title {max-width: 900px;margin: 0 auto;margin-bottom: 40px;padding: 0 4%;} /* Tableau comparaison de pub */ .comppub {} section.investissement-publicitaire {} .comppub h3 {text-indent: 0; font-size: 26px; letter-spacing: 2px; color: #fff;padding: 8px 15px 6px;margin-bottom: 30px;display: inline-block;} .comppub .pub_item {margin-bottom: 10px;height: 100%;position: relative;} .comppub figure {float: left;width: 10%;position: absolute;height: 100%;} .comppub figure img {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);} .comppub .pub_bar {background: url('../images/comp-pub-bar-bg.svg');background-size: 48px 60px;float: left;width: 74%;position: relative;margin-left: 13%;border: 2px solid #fff;} .comppub span.pub_bar_bg {width: 100%; display: block;height: 51px;} .comppub span.pub_bar_bg span.animate_this {display: block;height: 51px;background: rgba(101, 110, 114, 0.9);width: 100%;} .comppub p.pub_name {position: absolute; color: #fff; text-transform: uppercase; top: 0; left: 0;font-size: 30px;line-height: 100%;margin: 12px 0 0 13px;letter-spacing: 1px;text-shadow:#000 0px 0px 7px;} .comppub p.pub_price {font-size: 30px;line-height: 100%;margin: 14px 0 0 2%;float: left;letter-spacing: 1px;} .comppub p.pub_price sup {font-size: 18px; margin-right: 2px;} .comppub p.footnote {margin-left: 13%; margin-right: 80px; margin-top: 25px;} /* Icons */ .comppub .pub_journaux figure img {width: 71%;} .comppub .pub_television figure img {width: 71%;} .comppub .pub_radio figure img {width: 48%;} .comppub .pub_abribus figure img {width: 65%;} .comppub .pub_wrap figure img {width: 105%;} /* Wrap emphasis */ .comppub .pub_wrap p.pub_name {text-shadow: rgba(0,0,0,0.25) 0px 0px 5px;} .comppub .pub_wrap p.pub_price {font-size: 44px;margin-top: 6px;} .comppub .pub_wrap p.pub_price sup {font-size: 26px;} /* Bar width (on considere qu'une barre pleine largeur est 35$) */ .comppub .pub_journaux span.pub_bar_bg {width: 93%;} /* 32.50 / 35 */ .comppub .pub_television span.pub_bar_bg {width: 58%;} /* 20.38 / 35 */ .comppub .pub_radio span.pub_bar_bg {width: 39%;} /* 13.50 / 35 */ .comppub .pub_abribus span.pub_bar_bg {width: 10%;} /* 3.45 / 35 */ .comppub .pub_wrap span.pub_bar_bg {width: 1%;} /* 0.15 / 35 */ /* Animations */ section.investissement-publicitaire .col-left {-webkit-animation-delay: 0.3s; animation-delay: 0.3s;} section.investissement-publicitaire .col-right h3 {-webkit-animation-delay: 0.6s; animation-delay: 0.6s;} .comppub .pub_journaux {-webkit-animation-delay: 0.9s; animation-delay: 0.9s;} .comppub .pub_television {-webkit-animation-delay: 1.2s; animation-delay: 1.2s;} .comppub .pub_radio {-webkit-animation-delay: 1.5s; animation-delay: 1.5s;} .comppub .pub_abribus {-webkit-animation-delay: 1.8s; animation-delay: 1.8s;} .comppub .pub_wrap {-webkit-animation-delay: 2.1s; animation-delay: 2.1s;} .comppub .footnote {-webkit-animation-delay: 3s; animation-delay: 3s;} .comppub span.pub_bar_bg span.animate_this {-webkit-animation-duration: 2s; animation-duration: 2s;} .comppub .pub_journaux span.pub_bar_bg span.animate_this {-webkit-animation-delay: 2s; animation-delay: 2s;} .comppub .pub_television span.pub_bar_bg span.animate_this {-webkit-animation-delay: 2.5s; animation-delay: 2.5s;} .comppub .pub_radio span.pub_bar_bg span.animate_this {-webkit-animation-delay: 3s; animation-delay: 3s;} .comppub .pub_abribus span.pub_bar_bg span.animate_this {-webkit-animation-delay: 3.5s; animation-delay: 3.5s;} .comppub .pub_wrap span.pub_bar_bg span.animate_this {-webkit-animation-delay: 4s; animation-delay: 4s;} .comppub .pub_journaux .pub_name, .comppub .pub_journaux .pub_icon {-webkit-animation-delay: 2.3s; animation-delay: 2.3s;} .comppub .pub_television .pub_name, .comppub .pub_television .pub_icon {-webkit-animation-delay: 2.8s; animation-delay: 2.8s;} .comppub .pub_radio .pub_name, .comppub .pub_radio .pub_icon {-webkit-animation-delay: 3.3s; animation-delay: 3.3s;} .comppub .pub_abribus .pub_name, .comppub .pub_abribus .pub_icon {-webkit-animation-delay: 3.8s; animation-delay: 3.8s;} .comppub .pub_wrap .pub_name, .comppub .pub_wrap .pub_icon {-webkit-animation-delay: 4.3s; animation-delay: 4.3s;} .comppub .pub_journaux .pub_price {-webkit-animation-delay: 2.8s; animation-delay: 2.8s;} .comppub .pub_television .pub_price {-webkit-animation-delay: 3.3s; animation-delay: 3.3s;} .comppub .pub_radio .pub_price {-webkit-animation-delay: 3.8s; animation-delay: 3.8s;} .comppub .pub_abribus .pub_price {-webkit-animation-delay: 4.3s; animation-delay: 4.3s;} .comppub .pub_wrap .pub_price {-webkit-animation-delay: 4.8s; animation-delay: 4.8s;} /* Media queries */ @media (max-width: 1350px) { .comppub .pub_bar {width: 72%;} } @media (max-width: 1200px) { .comppub .pub_bar {width: 74%;margin-left: 11%;} .comppub figure {width: 8%;} } @media (max-width: 820px) { } @media (max-width: 700px) { .comppub .pub_bar {width: 72%; margin-left:13%;} .comppub figure {width: 10%;} } @media (max-width: 560px) { .comppub figure {display:none;} .comppub .pub_bar {width: 75%;margin-left: 0;} .comppub p.pub_price {margin-left: 4%;} .comppub p.footnote {margin-left: 10%; margin-right: 10%;} } /* HOMEPAGE .................................................................. */ /* Hero (common styles) */ #hero {background: #4e4b46; position: relative; color: #fff; overflow: hidden; top: 0;padding: 0;} #hero .cover-image {background: #565656; position: absolute; top: 0; left: 0; width: 100%; height: 100%;background-repeat: no-repeat;background-position: center center;background-size: cover;background-image: url('../images/hero-bg.jpg'); z-index: 0;} #hero .parallax_out {position: relative; top: 0;} #hero .title {position: absolute; z-index: 6; text-align: right; color: #fff;width: 50%;} #hero .title h1 {text-transform: uppercase; font-size: 145px; margin: 0 0 30px 0;line-height: 0.83;} #hero .title_under {font-weight: 400;font-size: 2em;margin-bottom: 2em;} /* Hero (home) */ #hero.home {height: 900px; /* Height will be adjusted in JS */ min-height: 800px;} #hero.home .cover-image {background-image: url('../images/hero-bg.jpg');} #hero.home .title { top: 51%; /* Un peu plus vers le haut car on ne veut pas que ca colle la fleche du bas */ margin-top: -286px; /* Hauteur du div divise par 2 */ } #hero.home .title h1 {font-size: 145px; margin: 0 0 30px 0;} /* Hero: Home Tesla */ #hero.home-tesla {height: 100svh;min-height: 37em;} #hero.home-tesla .cover-image {background-image: url('../images/hero-tesla-pare-pierre.jpg');} #hero.home-tesla .title { top: 50%; transform: translateY(-50%); } #hero.home-tesla .title h1 {font-size: 7em;margin: 0 0 30px 0;} #hero.home-tesla .title h1 .first-word {display: inline-block;margin-right: -0.215em;} /* Hero: Splitted in 2 */ #hero.phSplit {--topbar-height:97px; } #hero.phSplit .phSplit__layout {display: flex;min-height: 100svh;position: relative;} #hero.phSplit .phSplit__c {position: relative;flex:0 0 auto;width: 50%;display: grid;grid-template-columns: 100%;grid-template-rows: auto;align-items: center;} #hero.phSplit .phSplit__ctn {grid-column: 1 / -1; grid-row: 1 / -1; z-index: 1;text-align: center;padding: 10%;} #hero.phSplit .phSplit__ctn h1 {font-size: min(max(6vw, 3.3em), 15vw); line-height: 0.9;margin-bottom: 0.2em;padding-top: var(--topbar-height); } #hero.phSplit .phSplit__ctn .title_under {font-size: min(max(2vw, 1.2em), 5.5vw);line-height: 1.1;text-wrap: balance;margin-bottom: 0.9em;} #hero.phSplit .phSplit__image {position: absolute; top: 0; bottom: 0; left: 0; right: 0;} #hero.phSplit .phSplit__image * {width: 100%; height: 100%; object-fit: cover; } /* Down arrow */ #hero.phSplit .phSplit__downArrow {font-size: 10em;position: absolute;z-index: 2;left: 50%;bottom: 0;transform: translateX(-50%);} #hero.phSplit .phSplit__downArrow .down-arrow {line-height: 1;overflow: hidden;position: static;width: auto;font-size: 1em;margin: 0;} #hero.phSplit .phSplit__downArrow .down-arrow a {width: auto;height: auto;text-decoration: none;display: block;margin: -0.2em -0.4em;} #hero.phSplit .phSplit__downArrow .down-arrow a > span {display: block;position: static;} #hero.phSplit .phSplit__downArrow .down-arrow a:hover > span {transform: translateY(5%);} /* Hero (page) */ #hero.page {height: 650px;background: none;} #hero.page .title {position: absolute; top: 50%; padding-left: 9%; padding-top: 97px; /* Hauteur de la barre de menu, pour l'enlever du centering */ transform: translateY(-50%); } #hero.page .title-right {right: 0;text-align: left;padding-left: 0;padding-right: 9%;} #hero.page .title h1 {font-size: 100px;margin: 0;} /* Hero (small) */ #hero.hero--small {height: auto;min-height: 14em;background: none;} #hero.hero--small .title {position: absolute;text-align: left;top: 50%; /* Hauteur de la barre de menu, pour l'enlever du centering */ padding: 97px 9% 0 9%;width: 100%;transform: translateY(-50%);} #hero.hero--small .title h1 {font-size: 100px;margin: 0;width: min(100%, 8em);text-wrap: balance;} /* Hero (other components) */ #hero .down-arrow {text-align: center; position: absolute; width: 136px; z-index: 4; bottom: -40px; font-size: 160px; line-height: 100%;left: 50%;margin-left: -68px;} #hero .down-arrow a {color:#fff; width: 136px;display: inline-block;text-align: center;overflow: hidden;height: 100px; opacity: 0.3;} #hero .down-arrow a .icon-fleche_bas {position: relative; left: -70px; top: -40px;} #hero .down-arrow a:hover {opacity:1;} #hero .down-arrow a:hover .icon-fleche_bas {top:-30px;} #hero .logos {position: absolute; width: auto; z-index: 3; bottom: 4%; right: 3%;} #hero .logos a {display: inline-block; width: 65px; margin-left: 40px;} #hero .logos a:first-child {margin-left:0;} #hero .logos a img {} #hero .logos a:hover {opacity:0.5;} /* Hero, right zone */ #hero .hero-title-right-zone {width: 80%;max-width: 870px;position: absolute;left: 108%;bottom: 100px;text-align: left;/* border-left: 1px solid #666; *//* padding-left: 5%; *//* left: 107%; */} #hero .hero-title-right-zone hr {border-color: #666;width: 100px;text-align: left;margin: 0 0 24px 0;} #hero .hero-title-right-zone h3 {text-indent: 0;font-size: 30px;color: #919191;letter-spacing: 2px;} #hero .hero-title-right-zone p {font-size: 22px;line-height: 26px;color: #ccc;} #hero .hero-title-right-zone a {color:#fff;} #hero .hero-title-right-zone a:hover {color:#fff;} /* Animations */ #hero .title h1 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; animation-delay: 0s; } .wf-loading #hero .title h1 {opacity:0;} .wf-active #hero .title h1 {-webkit-animation-name: fadeInLeft; animation-name: fadeInLeft;} #hero .title p, #hero .title h3, #hero .title hr { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; animation-delay: 0s; } .wf-loading #hero .title p, .wf-loading #hero .title h3, .wf-loading #hero .title hr {opacity:0;} .wf-active #hero .title p, .wf-active #hero .title h3, .wf-active #hero .title hr {-webkit-animation-name: fadeInLeft; animation-name: fadeInLeft;} #hero .down-arrow, #hero .logos { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; animation-delay: 0s; } /* Media queries */ @media (max-width: 1740px) { #hero.page .title {padding-left:5%;} #hero.page .title-right {padding-left:0; padding-right:5%;} } @media (max-width: 1360px) { #hero.home {min-height: 750px;} #hero.home .title {margin-top:-254px;} #hero.home .title h1 {font-size: 130px;} } @media (max-width: 1150px) { #hero.home {min-height: 720px;} #hero.home .title {margin-top:-244px;} #hero.home .title h1 {font-size: 120px;} } @media (max-width: 1070px) { #hero .title {text-align: center; width: 100%;} #hero.page .title {padding-left:0;} #hero.page .title-right {padding-right:0;text-align: center;} #hero.page .title h1 {padding: 0 10%;} #hero.hero--small {height: auto;min-height: 0; } #hero.hero--small .title {position: static;text-align: center;padding: calc(92px + 2em) 10% 2em 10%;transform: none;} #hero .logos {bottom: 20px; right: 3%;} #hero .logos a {margin-left: 20px;} #hero .hero-title-right-zone {display:none;} } @media (max-width: 768px) { #hero .title_under {font-size: 1.7em;} #hero.phSplit {--topbar-height:91px; } #hero.phSplit .phSplit__layout {display: flex;flex-direction: column;} #hero.phSplit .phSplit__c {width: 100%;flex-grow: 1;} #hero.phSplit .phSplit__ctn {padding: min(10%, 3em) 10%;} #hero.phSplit .phSplit__ctn h1 br {display: none; } #hero.phSplit .phSplit__c + .phSplit__c .phSplit__ctn h1 {padding-top: 0; } #hero.phSplit .phSplit__downArrow {display: none;} #hero.page {height: 550px;} #hero.page .title {padding-top:80px;} /* Hero: Home Tesla */ #hero.home-tesla {min-height: 34em; } #hero.home-tesla .cover-image {background-image: url('../images/hero-tesla-pare-pierre-mobile.jpg');} #hero.home-tesla .title h1 {font-size: 6em; } } @media (max-width:46rem) { #hero.hero--small .title {padding-top: calc(75px + 2em);} #hero.hero--small .title h1 {font-size: min(17vw, 70px);} #hero.phSplit {--topbar-height:75px; } } @media (max-width: 600px) { #hero.home {min-height: 580px;} #hero.home .title {margin-top: -206px;} #hero.home .title h1 {font-size: 90px;} #hero.page {height:420px;} #hero.page .title h1 {font-size: 80px;} /* Repositionne logos : un a gauche l'autre a droite */ #hero .logos {width: 90%; margin: 0 5%; right: auto;} #hero .logos a:first-child {float: left;} #hero .logos a {float: right;} } @media (max-width: 500px) { #hero .title_under {font-size: 1.2em;margin-bottom: 1.3em;} #hero.home {min-height: 450px;} #hero.home .title {margin-top: -145px;} #hero.home .title h1 {font-size: 60px;} /* Hero: Home Tesla */ #hero.home-tesla {min-height: 25em; } #hero.home-tesla .title h1 {font-size: 4.5em; } #hero.page {height:380px;} #hero.page .title h1 {font-size: 60px;} #hero .btn-lg {font-size: 18px; padding: 12px 22px;} #hero .logos a {width: 55px;} #hero .down-arrow a {color:#fff; width: 136px;display: inline-block;text-align: center;overflow: hidden;height: 100px; opacity: 0.3;} #hero .down-arrow a .icon-fleche_bas {position: relative; left: -70px; top: -40px;} } /* Le menu pare-pierre réduit en hauteur à partir de 470px, donc centrer verticalement le titre sinon le gap en haut est de plus en plus gros */ @media (max-width: 470px) { #hero.phSplit {--topbar-height: calc(11vw + 2rem);} #hero.hero--small .title {padding-top: calc(15vw + 2em);} } /* Avis */ .avis {background: #881313;} .avis p {color:#fff;} .avis a {font-weight:bold; color:#fff} /* About Us */ .aboutus {padding-top: 85px;} .aboutus h2 {margin-bottom: 30px;} .aboutus .text-section-center-text {min-height: 170px; margin: 0 30%;} .aboutus .logo-3m-preferred, .aboutus .logo-3m-mcs {position: absolute; top: 105px;left: 0;width: 18%;z-index: 2;} .aboutus .logo-3m-mcs {right: 0; left: auto;} .aboutus .logo-3m-preferred a, .aboutus .logo-3m-mcs a {display:block;} .aboutus .logo-3m-preferred a:hover, .aboutus .logo-3m-mcs a:hover {opacity: 0.6;} .aboutus .logo-3m-preferred a.active, .aboutus .logo-3m-mcs a.active {opacity:0.4; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .aboutus .logo-3m-preferred a:focus, .aboutus .logo-3m-mcs a:focus {outline:none;} #aboutus-3m-preferred, #aboutus-3m-mcs-warranty {display: none;} .aboutus .text-section-center-text.about-additional-content {margin-top: 100px;display: none;} /* Animations */ .aboutus .logo-3m-preferred {-webkit-animation-delay: 0s; animation-delay: 0s;} .aboutus .text-section-center-text {-webkit-animation-delay: 0.5s; animation-delay: 0.5s;} .aboutus .logo-3m-mcs {-webkit-animation-delay: 1s; animation-delay: 1s;} /* Media queries */ @media (max-width: 1350px) { .aboutus .text-section-center-text {margin: 0 31%;} .aboutus .logo-3m-preferred, .aboutus .logo-3m-mcs {margin-left: 8%; margin-right: 8%; width: 16%;} } @media (max-width: 1100px) { .aboutus .text-section-center-text {margin: 0 30%;} .aboutus .logo-3m-preferred, .aboutus .logo-3m-mcs {margin-left: 4%; margin-right: 4%; width: 17%;} } @media (max-width: 1070px) { .aboutus .text-section-center-text.about-additional-content {display: block;} } @media (max-width: 950px) { .aboutus .text-section-center-text {width:100%; margin:0 auto; max-width: 580px; padding: 0 50px;margin-bottom: 50px;min-height: auto;} /* Logos en bas du texte */ .aboutus .logo-3m-preferred, .aboutus .logo-3m-mcs {position: static; width: 150px; display: inline-block;} } @media (max-width: 550px) { .aboutus .text-section-center-text {padding: 0 7%;} .aboutus .logo-3m-preferred, .aboutus .logo-3m-mcs {width: 120px; margin-left: 6%; margin-right: 6%;} } @media (max-width: 350px) { .aboutus .logo-3m-preferred, .aboutus .logo-3m-mcs {width: 100px; margin-left: 4%; margin-right: 4%;} } /* About Us - Video */ .video-big {width: 100%; text-align: center; padding: 0; color: #fff;cursor: pointer; background: url('../videos/aboutus-video-img-bg.jpg') no-repeat 50% 50%;background-size: 100% auto;} .video-big .text {height: 100%;position: absolute;width: 100%; z-index: 2;margin: 0;max-width: none;padding: 0;} .video-big .text p.h2-alt {position: relative; top: 210px;} .video-big .text p.icon {font-size: 65px; color: #fff;position: relative;top: 210px;} .video-big:hover .text p.icon {font-size:85px; top:200px;} .video-big .video {position: relative; overflow: hidden; height: 550px; z-index: 1;text-align: left;} .video-big .video video {width: 100%; height: auto; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* Media queries */ @media (max-width: 1000px) { .video-big .video {height:350px;} .video-big .text p.h2-alt {top: 110px;} .video-big .text p.icon {top: 110px;} .video-big:hover .text p.icon {top:100px;} } @media (max-width: 650px) { .video-big .video {height:250px;} .video-big .text p.h2-alt {top: 60px;font-size: 40px;} .video-big .text p.icon {top: 60px;font-size: 55px;} .video-big:hover .text p.icon {top: 50px; font-size:75px;} } @media (max-width: 500px) { .video-big .video {height:200px;} .video-big .text p.h2-alt {top: 40px;letter-spacing: 2px; text-indent: 2px;} .video-big .text p.icon {top: 30px;} .video-big:hover .text p.icon {top: 20px;} } @media (max-width: 400px) { .video-big .video {height:150px;} .video-big .text p.h2-alt {top: 10px;font-size: 30px;} .video-big .text p.icon {top: 0px;} .video-big:hover .text p.icon {top: -10px;} } /* SERVICES / PRODUCTS .......................................................................... */ .services {/* padding-bottom: 0; */} .products {} .services .with-bg {color: #fff; height: 830px; position: relative;} .products .with-bg {color: #fff; height: auto; position: relative;} /* Franboud-call-to-action-temp */ .services .with-bg {height: 720px;} .services-style a {color: #fff; text-decoration: underline;} .services-style a:hover {text-decoration: underline;} .services-style a.btn {text-decoration:none;} .services-style .container-icons {padding-top: 90px;} .products.services-style .container-icons {margin: 0 auto;max-width: 1450px;} .services-style .container-icons h3 {text-align: center; cursor: pointer;padding: 20px; margin-bottom: 0;font-size: 35px;letter-spacing: 3px; text-indent: 3px;position: relative;z-index: 2;color: #fff;color: rgba(255,255,255,0.5);} .products.services-style .container-icons h3 {padding: 5%;font-size: 26px;letter-spacing: 2px;text-indent: 2px;} .services-style .container-icons h3:hover, .services-style .container-icons h3.active {color: #fff;} .services-style .container-icons .icon {display: block; font-size: 180px; margin-bottom: 27px;} .products.services-style .container-icons .icon {font-size: 150px;margin-bottom: 20px;} .services-style .container-description {background:#0a1c25; background: rgba(0, 0, 0, 0.5); padding: 50px 0 40px;} .services-style .arrow {margin-top: 23px;} .services-style .arrow img {position: relative; display: none;} .services-style .left {float: left; width: 50%;padding-right: 30px; text-align:right;} .services-style .right {float: right; width: 50%;padding-left: 30px; text-align:left;} .services-style .left .set-width {width: 530px; float: right;} .services-style .right .set-width {width: 530px;} .services-style .left .set-width.citation {width: 600px;} .services-style .left p {text-align: right; color: #c1c6c8;} .services-style .right p {text-align: left; color: #c1c6c8;} .services-style p strong {color: #fff;} .services-style p.big-text {color: #fff;margin-bottom: 0;} .services-style p.big-text-smaller {color: #6a7277;} #services-graphic-design, #services-branding, #services-installation {display: none;} #products-commercial-vehicle-wraps, #products-custom-vehicle-wraps, #products-ppf-window-tinting, #products-banners-signs, #products-windows-walls, #products-promotional-items {display: none;} .services-style .call-to-action {width: 100%; position:absolute; bottom:25px;} .products.services-style .call-to-action {margin-top: 60px;padding-bottom: 25px; position:static;} /* Le produit WWF est trop haut, donc on ne peut pas mettre en absolute, sinon il y a un trop gros espace blanc entre les produits et la barre du bas */ .services-style .call-to-action .h3 {color: #fff; margin-right: 35px;} .services-style .call-to-action .btn {position: relative; top: -9px;} /* Franboud-call-to-action-temp */ .services-style .call-to-action, .products.services-style .call-to-action {margin-top:10px;padding-bottom: 30px; position:static;} /* Animations */ .services .s1 {-webkit-animation-delay: 0s; animation-delay: 0s;} .services .s2 {-webkit-animation-delay: 0.2s; animation-delay: 0.2s;} .services .s3 {-webkit-animation-delay: 0.4s; animation-delay: 0.4s;} .services .animate-services {-webkit-animation-delay: 0.6s; animation-delay: 0.6s;} .products .p1 {-webkit-animation-delay: 0s; animation-delay: 0s;} .products .p2 {-webkit-animation-delay: 0.2s; animation-delay: 0.2s;} .products .p3 {-webkit-animation-delay: 0.4s; animation-delay: 0.4s;} .products .p4 {-webkit-animation-delay: 0.6s; animation-delay: 0.6s;} .products .p5 {-webkit-animation-delay: 0.8s; animation-delay: 0.8s;} .products .p6 {-webkit-animation-delay: 1s; animation-delay: 1s;} .products .animate-products {-webkit-animation-delay: 1.2s; animation-delay: 1.2s;} /* Media queries */ @media (max-width: 1710px) { .services .with-bg {height:780px;} /* Franboud-call-to-action-temp */ .services .with-bg {height: 690px;} .services-style .container-icons h3 {font-size: 32px;letter-spacing: 2px; text-indent: 2px;} .services-style .container-icons .icon {font-size: 160px;} } @media (max-width: 1600px) { .products.services-style .container-icons {max-width: none;margin-left: 5%;margin-right: 5%;} .products.services-style .container-icons h3 {font-size: 22px;padding: 5%;} .products.services-style .container-icons .icon {font-size: 130px;} } @media (max-width: 1540px) { .services .with-bg {height:740px;} /* Franboud-call-to-action-temp */ .services .with-bg {height: 640px;} .services-style .container-icons h3 {font-size: 26px;letter-spacing: 2px; text-indent: 2px;padding: 0 10px;margin: 20px 0;} .services-style .container-icons .icon {font-size: 140px; margin-bottom: 20px;} } @media (max-width: 1340px) { .services .with-bg {height:720px;} /* Franboud-call-to-action-temp */ .services .with-bg {height: 630px;} .services-style .left {padding-right:20px;} .services-style .right {padding-left:20px;} .services-style .left .set-width.citation {width: 500px;} .services-style p.big-text {font-size: 44px; line-height: 44px;} .services-style p.big-text-smaller {font-size: 34px; line-height: 100%;} .products.services-style .container-icons h3 {font-size: 20px;} .products.services-style .container-icons .icon {font-size: 120px;} } @media (max-width: 1270px) { .services .with-bg {height:700px;} /* Franboud-call-to-action-temp */ .services .with-bg {height: 620px;} .services-style .container-icons h3 {font-size: 22px;} .services-style .container-icons .icon {font-size: 120px;} } @media (max-width: 1240px) { .services-style .left .set-width, .services-style .right .set-width {width: 430px;} } @media (max-width: 1199px) { .services .with-bg {height:750px;} /* Franboud-call-to-action-temp */ .services .with-bg {height: 680px;} /* Changer la disposition des 5 produits, en 2 lignes */ .services-style .container-icons {padding-top: 55px;} .services-style .container-icons h3 {font-size: 32px;letter-spacing: 2px; text-indent: 2px;margin-top: 55px;} .services-style .container-icons .col-sm-4 h3 {padding: 0 20px;} .services-style .container-icons .icon {font-size: 160px;} /* Changer la disposition des 6 produits, en 2 lignes (cette section herite de celle 2 lignes plus haut) */ .products.services-style .container-icons {margin-left: 10%;margin-right: 10%;} .products.services-style .container-icons .container-title {float: left;width: 28.57%;} .products.services-style .container-icons .container-title.four {margin-left: 14.29%;} .products.services-style .container-icons h3 {font-size: 24px;margin-top: 45px;margin-bottom: 0;} .products.services-style .container-icons .icon {font-size: 140px;} .products.services-style .arrow {margin-top: 30px;} } @media (max-width: 1100px) { /* Mettre les 2 colonnes de description de service / produit une par-dessus l'autre */ .services .with-bg {height:860px;} /* Franboud-call-to-action-temp */ .services .with-bg {height: 800px;} .services-style .left {float: none; width: 100%; padding-right: 0;margin-bottom: 30px;text-align: center;} .services-style .right {float: none; width: 70%; padding-left: 0;margin: 0 auto;text-align: center;} .services-style .left .set-width, .services-style .left .set-width.citation {width: 80%; float: none;margin: 0 auto;} .services-style .right .set-width {width: 100%;} .services-style .left p {text-align: center;} .services-style .right p {text-align: center;} .services-style p.big-text {font-size: 53px; line-height: 100%;} .services-style p.big-text-smaller {font-size: 40px; line-height: 100%;} .services-style .container-icons h3 {font-size: 28px;} .services-style .container-icons .icon {font-size: 150px;} } @media (max-width: 991px) { .services .with-bg {height:850px;} /* Franboud-call-to-action-temp */ .services .with-bg {height: 790px;} .services-style .container-icons h3 {font-size: 26px;} .services-style .container-icons .icon {font-size: 140px;} .services-style .arrow {margin-top:10px;} .products.services-style .container-icons {margin-left: 6%;margin-right: 6%;} } @media (max-width: 850px) { .services .with-bg {height:870px;} /* Franboud-call-to-action-temp */ .services .with-bg {height: 760px;} .services-style .container-icons .icon {font-size: 130px;} .services-style .call-to-action .h3 {letter-spacing: 2px; text-indent: 2px;} .products.services-style .container-icons h3 {font-size: 22px;} .products.services-style .container-icons .icon {font-size: 120px;} } @media (max-width: 767px) { .services .with-bg {height:auto;} /* Fix for mobile because there is a gap at the right */ .services-style .container-icons .row {margin: 0;} .services-style .container-icons .col-xs-12 {padding: 0;} .services-style .container-icons {padding-top: 50px;} .services-style .container-icons h3, .services-style .container-icons .col-sm-4 h3, .products.services-style .container-icons h3 {padding: 20px 0; font-size: 35px;letter-spacing: 3px; text-indent:3px;width: 350px;margin: 0 auto;margin-bottom: 30px;} .services-style .container-icons .icon, .products.services-style .container-icons .icon {font-size: 180px; margin-bottom: 27px;} .services-style .arrow {display:none;} .services-style p.big-text {font-size: 46px; line-height: 46px;} .services-style p.big-text-smaller {font-size: 34px; line-height: 100%;} .services-style .call-to-action {position: static; padding-bottom: 30px;width: 85%;margin: 0 auto;margin-top: 40px;} .services-style .call-to-action .h3 {margin-right: 0;} .services-style .call-to-action .btn {position: static; top: 0;display: block;margin: 0 auto;margin-top: 8px;} .products.services-style .container-icons .container-title, .products.services-style .container-icons .container-title.four {float: none;width: 100%;margin-left: 0;} } @media (max-width: 500px) { .services-style .container-icons h3, .services-style .container-icons .col-sm-4 h3, .products.services-style .container-icons h3 { margin-bottom: 20px; font-size: 25px; max-width:270px; width: auto;} .services-style .container-icons .icon, .products.services-style .container-icons .icon {font-size: 120px; margin-bottom: 20px;} } /* GUIDE D'ENTRETIEN ............................................................................ */ .guide-entretien-style { } .guide-entretien-style h2 {margin-left: -80px;margin-right: -80px;} .guide-entretien-style .container-icons {margin: 80px auto 30px auto;max-width: 1350px;} .guide-entretien-style .container-icons h3 {text-align: center;cursor: pointer;padding: 9%;margin-bottom: 0;font-size: 26px;letter-spacing: 0;text-indent: 0;position: relative;z-index: 2;color: #919191;color:#b9b9b9;} .guide-entretien-style .container-icons h3 svg {margin-bottom:20px;} .guide-entretien-style .container-icons h3 svg .fill-color {fill:#919191; fill:#b9b9b9;} .guide-entretien-style .container-icons h3 svg .stroke-color {stroke:#919191; stroke:#b9b9b9;} .guide-entretien-style .container-icons h3:hover, .guide-entretien-style .container-icons h3.active {color: #0d5579;} .guide-entretien-style .container-icons h3:hover svg .fill-color, .guide-entretien-style .container-icons h3.active svg .fill-color {fill:#0d5579;} .guide-entretien-style .container-icons h3:hover svg .stroke-color, .guide-entretien-style .container-icons h3.active svg .stroke-color {stroke:#0d5579;} .logos-certifications-style .container-icons h3 img {opacity: 0.5; -webkit-filter: grayscale(100%); filter: grayscale(100%);} .logos-certifications-style .container-icons h3:hover img, .logos-certifications-style .container-icons h3.active img {opacity:1; -webkit-filter: grayscale(0%); filter: grayscale(0%);} .guide-entretien-style .container-description { } .guide-entretien-style .ligne-top {width: auto;height: 1px;background: #ddd;margin: 0 auto 60px auto;max-width: 1420px;} .guide-entretien-style .arrow {opacity: 0.25;} .guide-entretien-style .arrow img {position: relative; display: none;} .guide-entretien-style .left {float: left; width: 50%;padding-right: 30px; text-align:right;} .guide-entretien-style .right {float: right; width: 50%;padding-left: 30px; text-align:left;} .guide-entretien-style .left p {text-align: right;} .guide-entretien-style .left li {text-align: right;margin-bottom: 5px;} .guide-entretien-style .right p {text-align: left;} .guide-entretien-style .set-width {max-width: 730px; margin:0 auto;} .guide-entretien-style .left .set-width {width: 600px;float: right;margin: 0;} .guide-entretien-style .right .set-width {width: 600px;margin: 0;} .guide-entretien-style .container-description h4 {font-size: 40px;} .guide-entretien-style .container-description h5 {margin: 40px 0 20px 0;font-size: 30px;color: #919191;letter-spacing: 2px;} .guide-entretien-style .container-description h5.title {margin: 10px 0 40px 0;font-size: 30px;color: #919191;letter-spacing: 2px;text-align: center;padding: 0 30px;} /* .guide-entretien-style .produits-recommandes .set-width {padding: 0 2%;} .guide-entretien-style .produits-recommandes h5 {text-align: center;margin: 0px 0 0 0;font-size: 60px;color: #ddd;letter-spacing: 5px;} .guide-entretien-style .produits-recommandes figure {display: inline-block;width: 49%;box-sizing: border-box;padding: 4%;} .guide-entretien-style .produits-recommandes img {padding: 4% 15%;} .guide-entretien-style .produits-recommandes figcaption {text-align: center;font-size: 16px;border-top: 1px solid #ccc;color: #999;margin-top: 18px;padding-top: 10px;} */ #guide-entretien-lavage-main, #guide-entretien-lave-auto, #guide-entretien-lavage-pression, #guide-entretien-entreposage, #guide-entretien-cire, #guide-entretien-restauration {display: none;} #installateurs_3m_preferes, #privilegie_or_3m, #garantie_mcs_3m, #threem_preferred_installers, #threem_gold_provider, #threem_warranty {display: none;} /* Animations */ .guide-entretien-style .a1 {-webkit-animation-delay: 0s; animation-delay: 0s;} .guide-entretien-style .a2 {-webkit-animation-delay: 0.2s; animation-delay: 0.2s;} .guide-entretien-style .a3 {-webkit-animation-delay: 0.4s; animation-delay: 0.4s;} .guide-entretien-style .a4 {-webkit-animation-delay: 0.6s; animation-delay: 0.6s;} .guide-entretien-style .a5 {-webkit-animation-delay: 0.8s; animation-delay: 0.8s;} .guide-entretien-style .a6 {-webkit-animation-delay: 1s; animation-delay: 1s;} .guide-entretien-style .animate-products {-webkit-animation-delay: 0.5s; animation-delay: 0.5s;} @media (max-width:1500px) { .guide-entretien-style .container-icons {max-width: none;margin: 60px 10% 10px 10%;} .guide-entretien-style .container-icons h3 {margin-bottom: 20px;} .guide-entretien-style .ligne-top {max-width: none;margin: 0 5% 50px 5%;} .guide-entretien-style .left {width: 40%; margin-left:10%;padding-right: 20px;} .guide-entretien-style .right {width: 40%; margin-right:10%;padding-left: 20px;} .guide-entretien-style .left .set-width, .guide-entretien-style .right .set-width {width: 100%;} } @media (max-width:1200px) { .guide-entretien-style .container-icons {margin: 50px auto 0 auto;max-width: 680px;} .guide-entretien-style .container-icons .container-title {float: left;width: 28.57%;} .logos-certifications-style .container-icons .container-title {width: 33.33%;} .guide-entretien-style .container-icons .container-title.four {margin-left: 14.29%;} .guide-entretien-style .container-icons h3 svg {margin-left: 5%;margin-right: 5%;} .guide-entretien-style .ligne-top {margin: 0 auto 60px auto;max-width: 770px;} .logos-certifications-style .container-icons h3 {padding: 15%;} } @media (max-width:1100px) { .guide-entretien-style .left {margin-left: 0;float: none;width: 100%;padding-right: 0;margin-bottom: 30px;text-align: center;} .guide-entretien-style .right {margin-right: 0;padding-left: 0;float: none;width: 100%;margin-bottom: 30px;text-align: center;} .guide-entretien-style .set-width, .guide-entretien-style .left .set-width, .guide-entretien-style .right .set-width {float: none;max-width: 900px;margin:0 auto;padding: 0 10%;} .guide-entretien-style .left p, .guide-entretien-style .left li, .guide-entretien-style .right p {text-align: center;} } @media (max-width:1000px) { .guide-entretien-style h2 {margin-left: 50px;margin-right: 50px;} } @media (max-width:900px) { .guide-entretien-style .container-icons {max-width: none;margin: 50px 8% 0 8%;} .guide-entretien-style .ligne-top {max-width: none;margin: 0 5% 50px 5%;} } @media (max-width: 767px) { .guide-entretien-style .container-icons .container-title, .guide-entretien-style .container-icons .container-title.four {float: none;width: 100%;margin-left: 0;} .guide-entretien-style .container-icons h3 {padding: 20px 0;font-size: 35px;letter-spacing: 3px;text-indent: 3px;width: 350px;margin: 0 auto;margin-bottom: 30px;} .logos-certifications-style .container-icons h3 {width: 200px;} .guide-entretien-style .container-icons h3 svg {margin: 0 22% 20px 22%;} .guide-entretien-style .arrow {display:none;} .guide-entretien-style .container-icons {margin-bottom:10px;} .guide-entretien-style h2 {margin-left: 0;margin-right: 0;} } @media (max-width: 500px) { .guide-entretien-style .container-icons h3 {margin-bottom: 15px;font-size: 25px;max-width:270px;width: auto;} .logos-certifications-style .container-icons h3 {max-width: 150px;} .guide-entretien-style .container-icons h3 svg {margin: 0 auto 20px auto;max-width: 130px;display: block;} } /* PORTFOLIO ................................................................ */ .portfolio-style {} #portfolio {padding-bottom: 55px;} .portfolio-style-details {width: 100%;position: relative;margin-bottom: 90px;} .portfolio-style-details .image {overflow: hidden; position: relative; height: 950px; background-position: 50% 50%;z-index: 2;} .portfolio-style-details .image #ytplayer_video {} .portfolio-style-details .image img {width: 100%; height: auto; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .portfolio-style-details .portfolio-close {position:absolute; top: 20px; right: 20px;z-index: 3;} .portfolio-style-details .portfolio-close .btn {font-size: 26px;height: 46px;padding: 8px 12px;} .portfolio-style-details .sidebar-hover-trigger {position: absolute; top: 0; left: -330px; height: 100%;overflow: hidden;padding-right: 25%;z-index: 3;} .portfolio-style-details .sidebar {background-color:#262626; background-color: rgba(0, 0, 0, 0.7); width: 380px; padding: 75px 50px 10px 50px; height:100%;position: relative;} .portfolio-style-details .sidebar h3 {color: #919191; letter-spacing: 0; text-indent: 0; font-size: 40px; line-height: 100%; margin-bottom: 20px; } .portfolio-style-details .sidebar h3 .client-name {color: #fff; font-size: 55px; line-height: 50px; display: block;} .portfolio-style-details .sidebar p {text-align:left;} .portfolio-style-details .sidebar .description {color: #ababab;} .portfolio-style-details .sidebar .arrows {margin-top: 30px;} .portfolio-style-details .sidebar .arrows button {font-size: 28px; line-height: 100%; background: none;padding: 11px 21px; border: 1px solid #fff;margin: 0 5px 0 0;} .portfolio-style-details .sidebar .arrows button span {color: #fff;} .portfolio-style-details .sidebar .arrows button:hover {background-color:#fff;} .portfolio-style-details .sidebar .arrows button:hover span {color:#000;} .portfolio-style-details .sidebar .arrows button:focus {outline:none;} .portfolio-style-details .sidebar .arrow-right {position: absolute; top: 50%; right: -7px; color: #fff; font-size: 70px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .portfolio-style-details .sidebar .arrow-right .icon-keyboard_arrow_left {display:none;} .portfolio-style-details .sidebar-hover-trigger:hover {left:0;} .portfolio-style-details .sidebar-hover-trigger:hover .arrow-right {opacity:0;} .portfolio-style .controls {text-align: center;width: 95%;margin:0 auto;margin-bottom: 25px;} .portfolio-style .controls button.filter {color: #5e5e5e;font-size: 22px;line-height: 30px;text-transform: uppercase;background: none;border: 0;padding: 0 0 3px 0;border-bottom:1px solid #fff;margin: 0 15px 10px 15px;} .portfolio-style .controls button.filter:focus {outline:none;} .portfolio-style .items {padding: 0; text-align: justify; font-size: 0.1px; -webkit-backface-visibility: hidden;} .portfolio-style .items:after {content: ''; display: inline-block; width: 100%;} .portfolio-style .items .mix {text-align: left; display: none;} .portfolio-style .items .gap {display: inline-block;} .portfolio-style .items .mix:before {display: inline-block;} .portfolio-style .items .mix, .portfolio-style .items .gap {width: 14.285%;} .portfolio-style .items a {width:100%;display: block;position: relative;background-position: 50% 50%;} .portfolio-style .items img {width: 100%; outline: 1px solid transparent;} .portfolio-style .items a span {position: absolute; color:#fff; top: 50%; left: 8%; width: 84%; color: #fff;font-size: 40px;line-height: 100%;text-align: center;opacity: 0;letter-spacing: 2px; text-indent: 2px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .portfolio-style .items a span.icon {} /* Hover and active */ .portfolio-style .items a:hover {color: #fff;} /* IE Edge */ .portfolio-style .items a:hover img, .portfolio-style .items a.active img {opacity: 0.20;} .portfolio-style .items a:hover span, .portfolio-style .items a.active span {opacity: 1;} .portfolio-style .items a.loading {background-image:url('../images/ajax-loader.gif'); background-repeat:no-repeat;} .portfolio-style .items a.loading span {opacity: 0;} .portfolio-style-details.loading .image {background-image:url('../images/ajax-loader-gray.gif'); background-repeat:no-repeat; background-color:#262626; background-color:rgba(0,0,0,0.7);} .portfolio-style-details.loading .image img {opacity:0.1;} /* Portfolio videos */ .portfolio-style.portfolio-style-videos {padding-top: 0;} #portfolio-videos {padding: 0;} .portfolio-style.portfolio-style-videos .portfolio-style-details {margin-bottom:3px;} .portfolio-style.portfolio-style-videos .items {margin-top:3px;} .portfolio-style.portfolio-style-videos .items .mix {float: left; /* Pas le choix de mettre un float ici sinon il y a un gap entre les rangées de vidéos.*/} .portfolio-style.portfolio-style-videos .items a {height:255px;overflow: hidden;background-color:#a6a6a6;} .portfolio-style.portfolio-style-videos .items img { position: absolute; top: 50%; opacity: 0.40; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .portfolio-style.portfolio-style-videos .items a span {opacity: 1;letter-spacing: 5px;} /* Image classe de modification pour certaines images */ .portfolio-style.portfolio-style-videos .items .top img {top: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* x items per line */ .portfolio-style.portfolio-style-videos-3-items .items .mix, .portfolio-style.portfolio-style-videos-3-items .items .gap {width: 33.333%;} .portfolio-style.portfolio-style-videos-4-items .items .mix, .portfolio-style.portfolio-style-videos-4-items .items .gap {width: 25%;} /* Media queries */ @media (max-width: 1840px) { .portfolio-style .items .mix, .portfolio-style .items .gap {width: 16.666%;} } @media (max-width: 1700px) { .portfolio-style.portfolio-style-videos .items a {height:200px;} } @media (max-width: 1550px) { .portfolio-style .items .mix, .portfolio-style .items .gap {width: 20%;} } @media (max-width: 1530px) { /* La grosse image peut etre affichee au complet puisque la hauteur du viewport n'est pas trop haute */ .portfolio-style-details .image {overflow: hidden; position: static; height: auto; max-height:950px;} .portfolio-style-details .image img {width: auto; position: static; top: auto; height:auto; max-width:100%; width: 100% \9; /* Pour IE 8-10 SVG */ -webkit-transform: none; -ms-transform: none; transform: none; } } @media (max-width: 1360px) { .portfolio-style .controls {width: 720px;} .portfolio-style .controls button.filter {margin: 0 10px 15px 10px;} .portfolio-style .items a span {font-size: 34px;} .portfolio-style.portfolio-style-videos .items a span {font-size: 34px;} } @media (max-width: 1300px) { .portfolio-style.portfolio-style-videos .items a {height:150px;} } @media (max-width: 1240px) { .portfolio-style-details .sidebar {padding-top: 55px;} .portfolio-style-details .sidebar h3 {font-size: 30px; } .portfolio-style-details .sidebar h3 .client-name {font-size: 45px; line-height: 40px;} .portfolio-style-details .sidebar .description {font-size: 20px; line-height: 24px;} .portfolio-style-details .sidebar .arrows button {padding: 8px 16px;} .portfolio-style .items a span {font-size: 30px; letter-spacing:1px; text-indent: 1px;} .portfolio-style.portfolio-style-videos .items a span {font-size: 30px; letter-spacing:3px; text-indent: 3px;} } @media (max-width: 1200px) { .portfolio-style.portfolio-style-videos {padding-bottom:30px;} } @media (max-width: 1199px) { .portfolio-style .items .mix, .portfolio-style .items .gap {width: 25%;} } @media (max-width: 980px) { .portfolio-style-details .sidebar-hover-trigger {left: -500px;} .portfolio-style-details .sidebar {width: 550px;} .portfolio-style .items a span {letter-spacing:0; text-indent: 0;} .portfolio-style.portfolio-style-videos .items a span {font-size: 34px; letter-spacing:5px; text-indent: 5px;} .portfolio-style.portfolio-style-videos .items a {height: 190px;} .portfolio-style.portfolio-style-videos-4-items .items .mix, .portfolio-style.portfolio-style-videos-4-items .items .gap {width: 50%;} } /* iPad and below */ @media (max-width: 768px) { #portfolio {} .portfolio-style-details {margin-bottom: 70px;} .portfolio-style-details .sidebar-hover-trigger, .portfolio-style-details .sidebar-hover-trigger:hover {padding-right: 0;width: 100%;left: -93%;} .portfolio-style-details .sidebar {width: 100%;padding-right: 70px;} .portfolio-style-details .sidebar .arrow-right {cursor: pointer;padding: 100px 0;} /* Override previous styles */ .portfolio-style-details .sidebar-hover-trigger:hover .arrow-right {opacity:1;} /* New interaction (JS adds class) */ .portfolio-style .portfolio-style-details .sidebar-hover-trigger.active {left:0;} .portfolio-style-details .sidebar-hover-trigger.active .arrow-right .icon-keyboard_arrow_left {display:block;} .portfolio-style-details .sidebar-hover-trigger.active .arrow-right .icon-keyboard_arrow_right {display:none;} } @media (max-width: 767px) { .portfolio-style-details {margin-bottom: 50px;} .portfolio-style-details .portfolio-close {top: 0; right: 0;} .portfolio-style .controls {width: 94%;} .portfolio-style .controls button.filter {font-size: 18px; margin-bottom: 5px; padding-bottom: 0;} .portfolio-style .items .mix, .portfolio-style .items .gap {width: 33.333%;} } @media (max-width: 740px) { .portfolio-style-details .sidebar-hover-trigger, .portfolio-style-details .sidebar-hover-trigger:hover {left: -92%;} } @media (max-width: 700px) { .portfolio-style .portfolio-style-details .sidebar-hover-trigger, .portfolio-style .portfolio-style-details .sidebar-hover-trigger.active {position: static; height: auto;} .portfolio-style-details .sidebar {padding: 40px 50px 15px 50px; background-color:#262626; background-color: rgba(0, 0, 0, 0.8);} .portfolio-style .portfolio-style-details .sidebar-hover-trigger .arrow-right {display: none;} } @media (max-width: 620px) { .portfolio-style.portfolio-style-videos .items a {height: 120px;} .portfolio-style.portfolio-style-videos .items a span {font-size: 30px; letter-spacing:1px; text-indent: 1px;} } @media (max-width: 550px) { .portfolio-style .items .mix, .portfolio-style .items .gap {width: 50%;} .portfolio-style .items a span {font-size: 30px; letter-spacing:1px; text-indent: 1px;} } @media (max-width: 499px) { .portfolio-style .section-title {margin-bottom: 30px;} .portfolio-style .controls {width: 100%;} .portfolio-style .controls button.filter {display: block; padding: 0; margin: 0 auto 5px auto;} .portfolio-style .items a span {font-size: 24px;} .portfolio-style.portfolio-style-videos .items a span {font-size: 24px;} } @media (max-width: 400px) { .portfolio-style-details .sidebar {padding: 40px 30px 15px 30px;} .portfolio-style-details .sidebar h3 {font-size: 24px;} .portfolio-style-details .sidebar h3 .client-name {font-size: 35px; line-height: 32px;} .portfolio-style .items a span {letter-spacing:0; text-indent: 0;} .portfolio-style.portfolio-style-videos .items a {height: 90px;} .portfolio-style.portfolio-style-videos .items a span {letter-spacing:0; text-indent: 0;} } /* PPF ...................................................................... */ /* Packages */ section.ppf-packages {padding-top: 2em; } .ppf-package {--spacing: 5em;display: flex;align-items: center;gap: 1.5em 5%;padding: 0 7%;max-width: 1400px;margin: 0 auto;box-sizing: content-box;} .ppf-package:not(:last-child) {margin-bottom: var(--spacing); } .ppf-package__img {flex:0 0 auto;width: 40%;} .ppf-package__ctn {flex:1 1 auto; } .ppf-package__ctn > * {text-wrap: balance;} .ppf-package__img img {width: 100%; } p.ppf-package__price {color: #0d5579; text-transform: uppercase; } .ppf-package__number {display: block;font-weight: 700;font-size: 2.5em;line-height: 1;letter-spacing: 0.05em;} /* Stacked */ @media (max-width:62rem) { section.ppf-packages {padding-top: 0; } .ppf-package {--spacing: 4em;display: flex;flex-direction: column;} .ppf-package__img {width: 100%; max-width: 25em; } } @media (max-width:46rem) { .ppf-package {--spacing: 3em;padding: 0 5%;} } /* Individual parts */ .ppf-individual-parts { } .ppf-individual-parts__list {padding: 0 7%;margin: 2em auto 0 auto;max-width: 1400px;box-sizing: content-box;display: grid;grid-template-columns: repeat(6, 1fr);gap: 1.5em 0.7em;} .ppf-individual-parts__list > * {flex: 1 1 auto; } .ppf-individual-part {font-size: 0.8em;display: flex;flex-direction: column;gap: 1em;} .ppf-individual-part__img { } .ppf-individual-part__img a {display: block; position: relative; } .ppf-individual-part__img a::before {position:absolute;z-index:1;display:block;content:'';top:0;bottom:0;left:0;right:0;background-color: #0d5579;mix-blend-mode: multiply; opacity: 0;transition: opacity 0.4s; } .ppf-individual-part__img img {width: 100%; } .ppf-individual-part__ctn {text-align: center; } .ppf-individual-part__ctn h3 {font-size: 1.15em;line-height: 0.9;letter-spacing: 0.05em;text-indent: 0;text-transform: none;margin-bottom: 0.4em;color: #919191;text-wrap: balance;} p.ppf-individual-part__price {font-size: 1em;color: #0d5579;font-weight: 400;vertical-align: text-top;} .ppf-individual-part__number {display: inline-block;font-weight: 700;font-size: 2.5em;line-height: 1;letter-spacing: 0.05em;vertical-align: text-top;margin-right: 0.05em;} /* Hover */ .ppf-individual-part__img a:hover::before {opacity: 0.6; } /* 4 cols */ @media (max-width:1300px) { .ppf-individual-parts__list {grid-template-columns: repeat(4, 1fr); } } /* 3 cols */ @media (max-width:62rem) { .ppf-individual-parts__list {grid-template-columns: repeat(3, 1fr); } } /* 2 cols responsive text */ @media (max-width:46rem) { .ppf-individual-parts__list {margin-top: 0;padding: 0 5%;grid-template-columns: repeat(2, 1fr);} .ppf-individual-part {font-size: 4vw;gap: 0.7em;} } /* FORM PROJET ...................................................................... */ .section-form-projet {scroll-margin-top: 60px;} .section-form-projet__ctn {max-width: 1200px;margin: 0 auto;padding: 0 7%;box-sizing: content-box;text-align: center;position: relative;} .form-projet { } .form-projet__section:first-child {border-top: 1px solid #ddd;padding-top: 1.5em;} .form-projet__section {display: flex;gap: 4%;border-bottom: 1px solid #ddd;padding-bottom: 0.5em;margin: 1.5em 0;} .form-projet__title {flex:0 0 auto;width: 33%;padding: 5px 0 10px 0;text-align: right;} .form-projet__fields {flex:1 1 auto;width: 100%;display: flex;flex-wrap: wrap; gap: 1%;} .form-projet__fields .form-item {width: 49.5%;flex: 0 1 auto;} .form-projet__fields .form-item.full-width {width: 100%; } .form-projet__fields .form-item--title {margin-bottom: -0.2em;} .form-projet__status {margin: 0 auto 1em auto;max-width: 30em;text-wrap: balance;} .form-projet__status .form-projet__success {display: none;font-weight: 400;color:#66a736;} .form-projet__status .form-projet__error {display: none; font-weight: 400; color:#bf1b02; } .form-projet h3 {font-size: 30px; color: #919191; letter-spacing: 0.07em; } /* ALT : Status. */ .form-projet__status.success .form-projet__success {display: block; } .form-projet__status.error .form-projet__error {display: block; } /* Titles over inputs */ @media (max-width: 800px) { .form-projet__section {display: flex; flex-direction: column; } .form-projet__section > * {width: 100%; } .form-projet__title {text-align: center; padding-top: 0; } } /* Everything stacked */ @media (max-width: 46rem) { .section-form-projet {scroll-margin-top: 0;} .section-form-projet__ctn {padding: 0 5vw; } .form-projet__section:first-child {padding-top: 1em;} .form-projet__section {margin: 1em -5vw; padding-left:5vw; padding-right: 5vw; } .form-projet__title {padding-bottom: 0; } .form-projet__fields {display: flex; flex-wrap: nowrap; flex-direction: column; gap: 0; } .form-projet__fields .form-item {flex:1 1 auto; width: 100%; } } /* WRAPS ...................................................................... */ /* Packages */ section.wraps-packages {padding-top: 2em;} .wraps-package {--spacing: 8em;padding: 0 7%;max-width: 1400px;margin: 0 auto;box-sizing: content-box;display: flex;flex-direction: column;align-items: center;} .wraps-package:not(:last-child) {margin-bottom: var(--spacing); } .wraps-package__desc {max-width: 30em;} .wraps-package__desc > * {text-wrap: balance;} .wraps-package__options {width: 100%;display: flex;gap: calc(0.5 * var(--spacing)) 1%;} .wraps-package-option {width: 100%;flex: 1 1 auto;} .wraps-package-option__img { } .wraps-package-option__img img {width: 100%; } p.wraps-package-option__cat {color: #0d5579;text-transform: uppercase;font-size: 1.2em;font-weight: 400;margin: 0.7em 0 0.1em 0;} p.wraps-package-option__price {color: #0d5579; text-transform: uppercase; } .wraps-package-option__number {display: block;font-weight: 700;font-size: 2.5em;line-height: 1;letter-spacing: 0.05em;} /* Stacked */ @media (max-width:62rem) { section.wraps-packages {padding-top: 0; } .wraps-package {--spacing: 4em; } .wraps-package__options {flex-direction: column;} .wraps-package-option__img {margin: 0 auto;max-width: 25em;} } /* Spacings */ @media (max-width:46rem) { .wraps-package {--spacing: 3em;padding: 0 5%;} } /* FAQ .......................................................................................... */ section.faq {} /* Voir aussi le set de colonne .set-1.alt-faq */ .faq .faq_list {text-align: left;} .faq .item {border-bottom: 1px solid #ddd;height: auto;position: relative;} .faq .item:first-child {border-top: 1px solid #ddd;} .faq .item a.trigger {display: block;text-decoration: none;padding: 12px 15px 12px 45px;text-indent: -29px;} .faq .item a.trigger:hover {background-color: #eee;} .faq .item a.trigger:focus {outline:none;} .faq .item h3 {margin-bottom: 0;color: #5e5e5e;font-size: 22px;line-height: 30px;text-transform: none;letter-spacing: 0;} .faq .item h3 a.trigger:before {content: "\e111";padding-right: 13px;font-size: 16px;position: relative;top: 0;} .faq .item .data {margin: 0px 15px 20px 45px; display:none;height: auto;position: relative;} .faq .item p, .faq .item li {text-align: left;} .faq .item.on {} .faq .item.on h3 a.trigger:before {content: "\e10f";} .faq .item.on a.trigger:hover {background-color: #fff;} /* Media Queries */ @media (max-width: 600px) { .faq .item a.trigger {padding-right: 35px;} .faq .item .data {margin-right: 35px;} } /* VITRES TEINTEES .............................................................................. */ section.section-vitres-bienfaits { } .section-vitres-bienfaits .bienfait-item {position:relative;margin-top: 30px;margin-bottom: 60px;text-align: left;} .section-vitres-bienfaits .bienfait-item:last-child {margin-bottom:0;} .section-vitres-bienfaits h3, .section-vitres-bienfaits p {margin-left: 94px;} .section-vitres-bienfaits .icon-inline-with-title {position: absolute;width: 60px;top: -16px;left: 0;} .section-vitres-bienfaits .icon-vitres-teintees-apparence {top: -22px;} .section-vitres-bienfaits .icon-vitres-teintees-rejet-chaleur {width: 62px;top: -26px;left: -4px;} .section-vitres-bienfaits .icon-vitres-teintees-eblouissement { } .section-vitres-bienfaits .icon-vitres-teintees-protection-uv {width: 72px;top: -43px;left: -10px;} .section-vitres-bienfaits .icon-vitres-teintees-intimite {top: -7px;} .section-vitres-bienfaits .icon-vitres-teintees-protection-couleur {top: -6px;width: 55px;} /* Animations */ .section-vitres-bienfaits .b1 {-webkit-animation-delay: 0.2s; animation-delay: 0.2s;} .section-vitres-bienfaits .b2 {-webkit-animation-delay: 0.6s; animation-delay: 0.6s;} .section-vitres-bienfaits .b3 {-webkit-animation-delay: 1.0s; animation-delay: 1.0s;} .section-vitres-bienfaits .b4 {-webkit-animation-delay: 0.4s; animation-delay: 0.4s;} .section-vitres-bienfaits .b5 {-webkit-animation-delay: 0.8s; animation-delay: 0.8s;} .section-vitres-bienfaits .b6 {-webkit-animation-delay: 1.4s; animation-delay: 1.4s;} /* Media queries */ @media (max-width: 1100px) { .section-vitres-bienfaits h3, .section-vitres-bienfaits p {margin-left: 0;} .section-vitres-bienfaits .icon-inline-with-title {position:relative;top:0;margin-bottom: 20px;} .section-vitres-bienfaits .icon-vitres-teintees-protection-uv {margin-top:-21px;} } @media (max-width: 840px) { .section-vitres-bienfaits .bienfait-item {text-align: center;} } /* FOOTER ................................................................... */ #contact {padding-bottom: 40px;} /* Google Map */ #google-map {position: absolute; width: 100%; height: 100%;z-index: 1;top: 0;} /* Map zone */ .map-zone {position: relative;margin-bottom: 120px;overflow: hidden;} .map-zone .data-wrapper-bg {background:#1a2a33; background: rgba(3, 21, 30, 0.9);position: relative;z-index: 2;} .map-zone .data-wrapper {width: 1000px; margin:0 auto;padding: 90px 0;} .map-zone .coordonnees {float:left; width: 30%;padding: 35px 0 35px;padding-right: 6%;} .map-zone .contact-form {float:left; width: 70%; border-left:1px solid #0e191e;padding: 35px 0 35px 7%;} .map-zone p {color:#d6d7d8;} .map-zone p a {color:#d6d7d8; text-decoration:none;} .map-zone p a:hover {color:#fff;} .map-zone .coordonnees p {margin-top: 40px;margin-bottom: 20px;} .map-zone .coordonnees p.heures-ouverture {margin-top: 0;} .map-zone .coordonnees p.heures-ouverture strong {color: #fff;} .map-zone .coordonnees p:first-child, .map-zone .coordonnees p:last-child {margin-top:0;} .map-zone .coordonnees p:last-child {margin-bottom:0;} .map-zone .coordonnees .coordonnee span.icon {display:block; opacity:0.35; font-size: 57px;margin-bottom: 10px;} .map-zone .coordonnees .coordonnee span.icon.icon-mail {font-size: 70px;margin-bottom: 5px;} .map-zone .contact-form h3 {color:#535f66;font-size: 30px;line-height: 120%;margin-bottom: 50px;margin-left: 30px;letter-spacing: 3px; text-indent: 3px;} .map-zone .contact-form h3 span.blanc {color:#fff; display:block;font-size: 40px;line-height: 100%;} .map-zone .contact-form p, .map-zone .contact-form ul {text-align:left;margin-left: 30px;margin-right: 30px;} .map-zone .contact-form ul li {text-align:left;} .map-zone .contact-form p.left {margin-right:0;} .map-zone .contact-form p.right {margin-left:0;} .map-zone .contact-form button {padding: 9px 18px 9px 25px;} .map-zone .contact-form .optional-fields {background:#22333c; background:rgba(255, 255, 255, 0.07);padding: 15px 0 20px 0;margin-bottom: 20px;} .map-zone .contact-form .optional-fields p.form-item {margin-bottom: 10px;} .map-zone .contact-form .optional-fields p.input-file {margin-bottom: 0;} .map-zone .open-map {opacity: 0; visibility: hidden; z-index:1;} .map-zone .close-map {opacity: 0; visibility: hidden; position: absolute; top: 12px; left: 50%; z-index:2; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .map-zone .open-map span, .map-zone .close-map span {font-size: 20px; position: relative; line-height: 10px; top: 3px; left: 4px;} .map-zone .open-map.active, .map-zone .close-map.active {opacity: 1; visibility: visible;} /* Social Icons */ #contact .icons-rs-wrapper {margin-bottom:60px;} #contact .icons-rs-wrapper h2 {margin-bottom: 50px;} #contact .icons-rs {font-size: 60px;padding-bottom: 10px;} #contact .icons-rs a {text-decoration: none; padding: 0 30px; color: #919191;display: inline-block;} /* Newsletter */ .newsletter-zone {background-color:#e8e8e8; padding: 35px 0 35px 55px;max-width: 1100px;margin: 0 auto 110px auto;} .newsletter-zone h2 {float:left;margin-bottom: 0; width: 280px;text-align: left;} .newsletter-zone p {text-align:left;} .newsletter-zone p.form-item {float:left;margin-bottom: 0;margin-right: 10px;} .newsletter-zone p.form-submit button {padding: 9px 18px;height: 38px;} /* Logos */ #contact .logos {width: 650px;margin: 0 auto;} #contact .logos p {float: left;width: 19%;margin: 0 4%;display: inline-block;height: 120px;} #contact .logos p a, #contact .logos p.faded {opacity: 0.5; -webkit-filter: grayscale(100%); filter:grayscale(100%); } #contact .logos p.autotrim-canada {width: 32%;} #contact .logos p.preferred-3m {width: 18.6%;} #contact .logos p.silver-3m {width: 17.3%;} #contact .logos a:hover, #contact .logos a:focus {opacity: 1; -webkit-filter: grayscale(0%); filter:grayscale(0%); } #contact .logos img {height:auto; max-width:100%; width: 100% \9; /* Pour IE 8-10 SVG */ position:relative; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* Copyrights */ .copyrights {border-top: 1px solid #cecece;width: 820px;margin: 0 auto;padding-top: 40px;margin-top: 40px;} .copyrights p.up {margin-bottom:30px;} .copyrights p.up a {padding: 8px 14px 8px 18px;} .copyrights p.up a .icon {font-size: 23px;position: relative;line-height: 10px;top: 4px;left: 3px;} .copyrights a {text-decoration:none; border-bottom: 1px solid #cecece; color:#5e5e5e;} /* Animations */ .map-zone .c1 {-webkit-animation-delay: 0s; animation-delay: 0s;} .map-zone .c2 {-webkit-animation-delay: 0.2s; animation-delay: 0.2s;} .map-zone .c3 {-webkit-animation-delay: 0.4s; animation-delay: 0.4s;} .map-zone .c3-2 {-webkit-animation-delay: 0.6s; animation-delay: 0.6s;} .map-zone .c4 {-webkit-animation-delay: 1s; animation-delay: 1s;} .map-zone .contact-form {-webkit-animation-delay: 0.3s; animation-delay: 0.3s;} #contact .icons-rs {-webkit-animation-delay: 0s; animation-delay: 0s;} #contact .logos p.autotrim-canada {-webkit-animation-delay: 0s; animation-delay: 0s;} #contact .logos p.preferred-3m {-webkit-animation-delay: 0.3s; animation-delay: 0.3s;} #contact .logos p.silver-3m {-webkit-animation-delay: 0.6s; animation-delay: 0.6s;} /* Media queries */ @media (max-width: 1100px) { /* Map zone */ .map-zone .data-wrapper {width: 700px;} .map-zone .coordonnees {width: 38%;} .map-zone .contact-form {width: 62%;} .lang-fr .map-zone .contact-form h3 {letter-spacing: 1px; text-indent: 1px;font-size: 24px;} .map-zone p.form-item.right {float:left;} .map-zone .contact-form p.left, .map-zone .contact-form p.right, .map-zone .contact-form .optional-fields p.form-item {margin: 0 30px 20px 30px;width: auto;float: none;} .map-zone .contact-form .optional-fields {padding-bottom: 0;} /* Newsletter */ .newsletter-zone {width: 100%;text-align: center;padding: 35px 20px;} .newsletter-zone h2 {float: none; margin: 0 0 30px 0;text-align: center;width: auto;} .newsletter-zone p {text-align:center;} .newsletter-zone p.form-item {margin: 0 5px 20px 5px;float: none;width: 400px;display: inline-block;} .newsletter-zone p.form-submit {clear:both;} } @media (max-width: 950px) { /* Newsletter */ .newsletter-zone {margin-bottom:70px;} /* Logos */ #contact .logos {width: 90%;} /* Copyrights */ .copyrights {width: 90%;} } @media (max-width: 800px) { /* Map zone */ .map-zone .data-wrapper {width: 100%;padding: 90px 0 45px 0;} .map-zone .coordonnees {float:none; width: 90%;overflow: hidden;border-bottom: 1px solid #0e191e;margin: 0 5%;padding: 20px 0 40px 0;} .map-zone .contact-form {float: none; width: 90%; border-left: none;padding: 40px 0 0 0; margin: 0 5%;} .map-zone .coordonnees p, .map-zone .coordonnees p:first-child, .map-zone .coordonnees p:last-child {float:left; width: 33.33%;margin: 0;} .map-zone .coordonnees p.coordonnee span.icon, .map-zone .coordonnees p.coordonnee span.icon.icon-mail {height: 70px;line-height: 70px;margin-bottom: 10px;} .map-zone .coordonnees p.coordonnee span.icon.icon-mail {position: relative; top: -7px;} .map-zone .coordonnees p.heures-ouverture {margin-top: -30px;} .map-zone .coordonnees p.btn-open {float: none; position: absolute; top: 12px; opacity:1;width: 90%;border-bottom: 1px solid #0e191e;padding-bottom: 12px;} .map-zone .coordonnees p.btn-open.animate {opacity: 0;} .map-zone .contact-form h3 {margin-bottom: 30px;} .map-zone .contact-form p.form-item, .map-zone .contact-form .optional-fields p.form-item {width: 45%;} .map-zone p.form-item.full-width {width:auto;} .map-zone p.form-item.left, .map-zone .contact-form .optional-fields p.form-item.left {float:left;} .map-zone p.form-item.right, .map-zone .contact-form .optional-fields p.form-item.right {float:right;} .map-zone .contact-form p.left, .map-zone .contact-form .optional-fields p.form-item.left {margin-right:0;} .map-zone .contact-form p.right, .map-zone .contact-form .optional-fields p.form-item.right {margin-left:0;} /* Logos */ #contact .logos p {height: 100px;} } /* Avant, cette section triggered a 767px, maintenant on met 800 car on veut qu'elle * s'applique aussi aux tablettes : le layout est mieux avec les heures d'ouverture. */ @media (max-width: 800px) { /* Map zone : Map under the form, visible. 3 icons one over the other. Form 1 col. */ .map-zone {overflow: visible;} #google-map {position: relative;height: 500px !important;} .map-zone .data-wrapper {padding: 45px 0 70px 0;} .map-zone .contact-form {text-align:center;} .map-zone .coordonnees {padding-bottom:0;} .map-zone .coordonnees p, .map-zone .coordonnees p:first-child, .map-zone .coordonnees p:last-child {float:none; width: 100%;margin: 0 0 50px 0;} .map-zone .coordonnees p.btn-open {display:none;} .map-zone .contact-form h3 {margin-left: 0;} .map-zone .contact-form p {text-align:center;} .map-zone p.form-item.right {float:left;} .map-zone .contact-form p.left, .map-zone .contact-form p.right, .map-zone .contact-form .optional-fields p.form-item, .map-zone .contact-form .optional-fields p.form-item.left, .map-zone .contact-form .optional-fields p.form-item.right {margin: 0 30px 20px 30px;width: auto;float: none;} .map-zone .contact-form .optional-fields {padding-bottom: 0;} } @media (max-width: 700px) { /* Logos */ #contact .logos p {height: auto;display: block;float: none;margin: 0 auto 50px auto;} #contact .logos p.autotrim-canada {width: auto;max-width: 240px;} #contact .logos p.preferred-3m {width: auto;max-width: 170px;} #contact .logos p.silver-3m {width: auto;max-width: 150px;} #contact .logos img {top: auto; position: static; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* Copyrights */ .copyrights {margin-top: 0;} } @media (max-width: 500px) { /* Map zone */ #google-map {position: relative;height: 300px !important;} /* Newsletter */ .newsletter-zone p.form-item {margin-left: 0; margin-right: 0; width: 100%;} /* Social Icons */ #contact .icons-rs {font-size: 45px;} #contact .icons-rs a {padding: 0 10px;} /* Copyrights */ .copyrights p {font-size: 18px;line-height: 140%;} } /* HEADER ................................................................... */ #header {box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);background-color: rgba(0, 0, 0, 0.85);border: none;} /* Navbar */ .nav .open>a, .nav .open>a:hover, .nav .open>a:focus {background: transparent; border: none; border-color: rgba(255, 255, 255, 0);} .nav>li>a:hover, .nav>li>a:focus {background-color: #ecf0f1;} .nav .caret, .nav a:hover .caret {border-top-color: #1abc9c; border-bottom-color: #1abc9c;} .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {border-color: #bdc3c7;} .navbar-inverse .navbar-toggle {background-color: #34495e; border-color: #2c3e50; margin-top: 23px;} .navbar-inverse .navbar-toggle:focus {outline: none;} .navbar-inverse .navbar-nav>li>a {color: inherit; text-transform: uppercase; font-size: 12px;} .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {background-color: transparent; background-color: rgba(255, 255, 255, 0); color: #3498db;} #header .navbar-nav {margin-top: 20px;} #header .navbar-header {width: 291px;} #header .navbar-collapse {border-color: #101010;max-height: 360px;} /* Logo : plusieurs lignes de code pour le vertical centering et responsive img */ #header .navbar-brand {float: none;padding: 0;flex: 1 1 auto; display: block;} #header .wrapper {padding: 0 0.91em;margin-top: 5px;margin-bottom: 5px;} #header .imgFrame {position: relative; text-align: center; width: 100%; height: 87px;} #header .innerFrame {height: 100%;display: flex;align-items: center;} #header .innerFrame img {max-width: 100%; width: 100%; height: auto; vertical-align: middle;} #header .innerFrame img.logoNarrow {display: none; } /* Links */ #header li a, #header li a.btn {text-decoration:none;letter-spacing:1px;text-indent: 1px;color:#fff;font-size:18px;line-height:100%;padding: 20px 12px;margin: 0 5px;white-space: nowrap;} #header li a.btn {padding: 8px 18px; margin-left: 50px; margin-top: 11px;} #header li a.btn:hover, #header li a.btn:focus, #header li.active a.btn {color: #fff;} #header a:focus {outline:none;} #header li a .iconSVG {display: inline;vertical-align: middle;font-size: 0.8em;margin-left: 0.5em;margin-right: -0.3em;} /* Sous menu */ #header li .nav__submenu {position: absolute;top: 77px;left: 50%;transform: translateX(-50%);background-color: rgba(0, 0, 0, 0.85);list-style: none;margin: 0;padding: 0 0 0.6em 0;text-align: center;transition: all 0.3s;} #header li .nav__submenu li { } #header li .nav__submenu a {display: block;padding: 0.9em 1em;margin: 0;text-transform: uppercase;width: 18em;font-size: 16px;color: #fff;position: relative;white-space: normal;} #header li .nav__submenu li.active-page a {color: #437ea5;} #header li .nav__submenu li a:before {position:absolute;display:block;content:" ";width: 6%;height: 1px;background: #fff;top: 0;left: 50%;transform: translateX(-50%);opacity: 0.3;} #header li .nav__submenu a:hover {color:#437ea5; } /* Open / close submenu */ #header li .nav__submenu {opacity: 0;visibility: hidden;transform:translate(-50%, 1em); transition-delay: 0.3s;} #header li:hover .nav__submenu {opacity: 1;visibility: visible;transform:translate(-50%, 0); transition-delay: 0s; } /* Media queries */ @media (max-width: 768px) { #header li .nav__submenu {top: -65px;left: 100%;width: 100%;background: none;padding: 0;text-align: left;} #header li .nav__submenu:before {position:absolute;display:block;content:" ";height: 100%;width: 1px;background: #fff;top: 0;left: -5%;opacity: 0.3;} #header li .nav__submenu a {padding: 0.5em;font-size: 14px;width: auto;display: inline-block;} #header li .nav__submenu li a:before {display: none;} #header li .nav__submenu {transform: translate(1em,0);} #header li:hover .nav__submenu {transform: translate(0,0);} } @media (max-width: 600px) { #header li .nav__submenu {position: static;width: 100%;padding-left: 45px;} #header li .nav__submenu:before {left: 35px;} #header li .nav__submenu {max-height:0;transition-delay: 0s;margin-bottom: 0; } #header li:hover .nav__submenu {max-height:240px;transition-delay: 0s;margin-bottom: 15px;} } /* Franboud-menu-temp */ #header li a {padding: 20px 16px;} #header li a, #header li a.btn {letter-spacing: 2px; text-indent: 2px;} /* Toggle */ #header .navbar-toggle {position: relative; right: 0;margin-top: 21px; background-color:#000; border-color:#fff;} /* Animations */ #header { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; animation-delay: 0s; } .wf-loading #header {opacity:0;} .wf-active #header {-webkit-animation-name: fadeInDown; animation-name: fadeInDown;} /* Media queries */ @media (min-width: 1530px) { #header .container-fluid {width:1500px; margin:0 auto;} } @media (max-width: 1530px) { /* Franboud-menu-temp */ #header li a, #header li a.btn {letter-spacing:1px; text-indent: 1px;} #header li a.btn {margin-left:20px;} } @media (max-width: 1425px) { #header li a.btn {margin-left: 10px;} /* Franboud-menu-temp */ #header li a.btn {margin-left:20px;} } @media (max-width: 1380px) { #header li a {padding: 20px 6px; letter-spacing:0; text-indent: 0;} /* Franboud-menu-temp */ #header li a, #header li a.btn {letter-spacing: 1px; text-indent: 1px;} } @media (max-width: 1230px) { #header .navbar-header {width: 18%;} } @media (max-width: 1150px) { /* Fix the size so the menu won't go under the logo */ #header .navbar-header {width: 25%;} #header nav.main {width:75%;} /* Menu item in 2 lines. Reset styles. */ #header nav.main .left {width: 450px;} #header li a {padding: 6px 12px; letter-spacing:1px; text-indent: 1px;} /* "Start a project" and lang selector at right, on 2 lines. */ #header nav.main .right {float:right;} #header nav.main .right li {float: none; text-align: right;} #header nav.main .right li a {} #header li a.btn {margin-top: 0;padding: 5px 13px;} #header nav.main .right li:last-child a {padding-right: 0; display: inline-block;} /* Franboud-menu-temp */ #header nav.main .left {width: 400px;} #header li a.btn {margin-left: 0;} } @media (max-width: 930px) { #header nav.main .left {width: 370px;} #header li a {padding: 6px 6px; letter-spacing:0; text-indent: 0;} /* Franboud-menu-temp */ #header nav.main .left {width: 330px;} #header li a.btn {letter-spacing:0; text-indent: 0;} } @media (max-width: 810px) { #header nav.main {padding-left: 7px;} #header nav.main .left {width: 345px;} #header li a {padding: 6px 3px;} #header li a.btn {margin-top: -1px;padding: 6px 14px;} /* Franboud-menu-temp */ #header nav.main .left {width: 305px;} } @media (max-width: 768px) { /* Navbar */ #header .navbar-header {width: 100%;} #header nav.main {width: 100%; padding: 0 30px;} #header nav.main .left {width:100%;} #header nav.main .right {float: none;margin-top: 0; margin-bottom: 60px;} #header nav.main .right li {text-align: left;} /* Logo */ #header .imgFrame {width: 190px;height: 65px;} /* Links */ #header li a, #header nav.main .right li:last-child a {padding: 8px;display: inline-block;} #header li a.btn {margin-top:0; margin-bottom:5px;} } /* Bootstrap override: we show the condensed menu at 768px instead of 767px */ @media (max-width: 768px) { .navbar-header {float: none;} .navbar-toggle {display: block;} .navbar-collapse {border-top: 1px solid transparent;box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);} .navbar-collapse.collapse {display: none!important;} .navbar-nav {float: none!important;margin: 7.5px -15px;} .navbar-nav>li {float: none;width: 50%;} .navbar-nav>li>a {padding-top: 10px; padding-bottom: 10px;} } @media (max-width: 600px) { .navbar-nav>li {width: 100%;} } /* Nav plus simple qui ne tombe jamais en dropdown */ #header.navbar--simple { } #header.navbar--simple .container-fluid {display: flex; align-items: center; justify-content: space-between; } #header.navbar--simple .navbar-header {width: 291px;} #header.navbar--simple .imgFrame {width: 100%;height: auto; padding: 0.7em 0;} #header.navbar--simple .navbar__simpleNav {padding: 0 0.7em;} #header.navbar--simple .navbar__simpleNav ul {list-style: none;margin: 0;padding: 0;display: flex; align-items: center;} #header.navbar--simple .navbar__simpleNav ul li { } #header.navbar--simple .navbar__simpleNav ul li a:not(.btn) {text-transform: uppercase;display: block;padding: 1.2em 1em;letter-spacing: 2px;text-indent: 2px;transition: color 0.3s ease;} #header.navbar--simple .navbar__simpleNav ul li.navbar__startProjectBtn { } #header.navbar--simple .navbar__simpleNav ul li.navbar__startProjectBtn .btn {padding: 8px 18px;margin: 0 0 0 2em;} #header.navbar--simple .navbar__simpleNav ul li.navbar__lang { } #header.navbar--simple .navbar__simpleNav .navbar__wordCommercial {display: inline; } #header.navbar--simple .navbar__simpleNav .navbar__wordPPFFull {display: inline; } #header.navbar--simple .navbar__simpleNav .navbar__wordPPF {display: none; } /* Logo en version etroite */ @media (max-width:75rem) { #header.navbar--simple .navbar-header {width: 8em;} #header.navbar--simple .imgFrame {padding: 0.6em 0 0.4em 0;} #header .innerFrame img {display: none; } #header .innerFrame img.logoNarrow {display: block; } } /* Spacings */ @media (max-width: 75rem) { #header.navbar--simple .navbar__simpleNav ul li a:not(.btn) {padding: 1.2em 0.5em; } #header.navbar--simple .navbar__simpleNav ul li.navbar__startProjectBtn .btn {margin-left: 1em; } } /* Enlever bouton "Commencer projet" */ @media (max-width:62rem) { #header.navbar--simple .navbar__simpleNav ul li.navbar__startProjectBtn {display: none; } #header.navbar--simple .navbar__simpleNav ul li.navbar__lang {margin-left: 0.5em; } #header.navbar--simple .navbar__simpleNav .navbar__wordPPFFull {display: none; } #header.navbar--simple .navbar__simpleNav .navbar__wordPPF {display: inline; } } /* Enlever mot "Commerciaux" pour prendre moins de place Responsive navbar size. */ @media (max-width:46rem) { #header.navbar--simple {font-size: min(3.7vw, 0.8em);} #header.navbar--simple .navbar__simpleNav {padding-left: 0.3em;} #header.navbar--simple .navbar__simpleNav ul li a:not(.btn) {font-size: 1em;padding: 1.2em 0.3em;} #header.navbar--simple .navbar__simpleNav ul li.navbar__lang {margin-left: 0; } #header.navbar--simple .navbar__simpleNav .navbar__wordCommercial {display: none; } } /* FORMS .................................................................... */ /* Honeypot */ .pogne {position: absolute;visibility: hidden;pointer-events: none;} /* Form item */ p.form-item {position: relative; margin-bottom: 20px;width: 280px;} p.form-item.left {float:left;} p.form-item.right {float:right;} p.form-item.full-width {width: auto;} /* Input, textarea et select */ .form-item input, .form-item textarea, .form-item select {-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: 8px 16px;border: 1px solid #535f66;font-size: 18px; line-height: 1.3; font-weight: 400;width: 100%; border-radius:0; background-color:#132229;background-color: rgba(13, 24, 29, 0.4);color: #fff;} .form-item textarea {height: 100px; min-height: 100px; width: 100%;} .form-item select {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 768 768'%3E%3Cpath d='M237 250.5l147 147 147-147 45 45-192 192-192-192z' fill='%230d5579'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 0.3em center;background-size: 1.4em;} .form-item select option {color: #fff;} .form-item input:focus, .form-item textarea:focus, .form-item select:focus {outline: none;} /* ALT */ .form-item.white input, .form-item.white textarea, .form-item.white select {border-color: #aeaeae; background-color: #fff; color: #5e5e5e;} .form-item.white select option {color: #5e5e5e;} /* Placeholder */ ::placeholder {color: rgba(0 0 0 / 50%); text-transform: uppercase; } /* Labels */ .form-item label.floating, .floating-style-inline { position: absolute; display: inline-block; text-transform: uppercase; top: 8px; left: 7px; padding: 3px 10px; line-height: 20px; font-size: 18px; pointer-events: none; color: #b2b3b4; white-space: nowrap; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translateY(0) scale(1); -ms-transform: translateY(0) scale(1); transform: translateY(0) scale(1); -webkit-transition: all 300ms; transition: all 300ms; } /* ALT */ .form-item.white label.floating {color:#5e5e5e;} /* Focus */ .form-item.data label.floating, .form-item.focus label.floating {color: #fff; text-transform: uppercase; background-color:#535f66; -webkit-transform: translateY(-24px) scale(0.75); -ms-transform: translateY(-24px) scale(0.75); transform: translateY(-24px) scale(0.75); } /* ALT */ .form-item.data.white label.floating, .form-item.focus.white label.floating {color: #fff; background-color:#aeaeae;} /* Just the style, pour l'utiliser comme un titre */ .floating-style-inline {position: static;display: block;width: fit-content;white-space: normal;text-align: left;color: #fff;background-color: #919191;font-size: 0.75em;line-height: 1.1;padding: 0.3em 0.6em;margin-bottom: 0.5em;} /* No interaction (IE8 and before) */ .form-item.no-interaction label.floating {top:-16px; font-size: 12px; padding: 1px 7px;} /* JS validation error messages */ .form-item label.error {color:#bf1b02;display: inline-block;margin: 10px 0 0 15px;font-size: 18px;line-height: 100%;} /* CHECKBOX & RADIO */ .formCF7Checkbox, .formCF7Radio {font-size: 0.9em;font-weight: 300;line-height: 1.2;text-align: left;display: flex;flex-wrap: wrap;gap: 0.5em 2em;} /* Flex items */ .formCF7Checkbox > *, .formCF7Radio > * {display: block; flex:0 0 auto; } /* Label wraps the input and text content */ .formCF7Checkbox label, .formCF7Radio label {display: block;margin: 0;font-weight: inherit;} /* Hide the default radio / checkbox, because we want to custom style it. */ .formCF7Checkbox input[type="checkbox"], .formCF7Radio input[type="radio"] {position: absolute;opacity: 0;visibility: hidden;} /* Label styles */ .formCF7Checkbox label > span, .formCF7Radio label > span {cursor: pointer;display: block;padding-top: 0.1em;padding-bottom: 0em;padding-left: 2em;position: relative;} /* Les styles custom sont ici */ .formCF7Checkbox input + span::before, .formCF7Radio input + span::before {position: absolute;display: block;content: '';left: 0;top: 0;width: 1.3em;height: 1.3em;background: #fff;background-position: 50% 50%;background-repeat: no-repeat;border: 1px solid #aeaeae;border-radius: 0;cursor: pointer;transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);} /* Active + focus */ .formCF7Checkbox input:active + span::before, .formCF7Radio input:active + span::before { } /* Checked */ .formCF7Checkbox input:checked + span::before, .formCF7Radio input:checked + span::before {background-color: #0d5579;box-shadow: inset 0 0 0 0.2em #fff;} /* Hidden text field qui s'affiche quand le checkbox est checked */ .formCF7Checkbox label > span.show-on-checked {cursor: auto;padding-top: 0.3em;padding-bottom: 0; opacity: 0; visibility: hidden; height: 0; transition: opacity 0.3s, visibility 0.3s;} /* Checked = show */ .formCF7Checkbox input:checked ~ span.show-on-checked {opacity: 1; visibility: visible; height: auto;} /* Radio mods */ .formCF7Radio input + span::before {border-radius: 50%; } /* ALT : Stacked. */ .formCF7Checkbox--stacked { } .formCF7Checkbox--stacked > * {width: 100%; } .formCF7Checkbox--inline-mobile > * {width: 100%; } /* Input file */ .form-item.input-file {clear: both;} .form-item.input-file input {width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1;padding: 0;} .form-item.input-file label {cursor:pointer;text-align: left;display: inline-block;text-transform: uppercase;overflow: hidden;color: #b2b3b4;white-space: nowrap;padding: 8px 16px;margin-bottom: 0;border: 1px solid #535f66;line-height: 20px;font-size: 18px;width: 100%;background-color: #132229;background-color: rgba(13, 24, 29, 0.4);} /* Difference between hide and soft-hide: hide has important, soft-hide doesn't */ .form-item.input-file label span.icon-upload {margin-right: 4px;} .form-item.input-file input:focus + label, .form-item.input-file input + label:hover {color: #fff;} .form-item.input-file input + label * {pointer-events: none;} /* ALT : White. */ .form-item.input-file.white { } .form-item.input-file.white label {background-color: transparent; border-color: #aeaeae; color: #5e5e5e; font-weight: 300; } .form-item.input-file.white input:focus + label, .form-item.input-file.white input + label:hover {color: #0d5579;} /* Messages : warning and success after form send */ .contact-form .msg_warning {list-style: none; padding: 0; margin-bottom: 30px;margin-top: -15px;} .contact-form .msg_confirm {margin-bottom: 30px; margin-top: -15px;} /* Media queries */ @media (max-width: 767px) { /* JS validation error messages */ .form-item label.error {margin-left:0;} } /* BUTTONS .................................................................. */ /* Default : white border, blue on hover */ .btn {text-transform:uppercase; padding: 8px 18px; border-radius:0; font-size:18px; line-height:100%; background:none; color:#fff; border:1px solid #fff; text-decoration: none; letter-spacing:1px; text-indent: 1px; white-space: normal;} .btn:hover, .btn:focus {outline: none; color:#fff; /* Colors change too */} /* Button sizes */ .btn-med {padding: 0.7em 1.3em;font-size: 20px;} .btn-lg {padding: 18px 38px;font-size: 24px;line-height: 100%;background-color: rgba(0 0 0 / 30%); border-width: 2px;} /* White border, white on hover */ .btn.btn-white {} .btn.btn-white:hover, .btn.btn-white:focus {background-color: #fff; border-color: #fff; color: #000;} /* Full blue, white on hover */ .btn.btn-full-blue {background-color: #0d5579; border-color: #0d5579;} .btn.btn-full-blue:hover, .btn.btn-full-blue:focus {background-color: #fff; border-color: #0d5579; color: #000;} /* Black border, blue on hover */ .btn.btn-black-border {border-color: #000; color: #000;} .btn.btn-black-border:hover, .btn.btn-black-border:focus {color: #fff;} /* Semi-transparent black BG, black on hover */ .btn.btn-semi-black {background-color:#262626; background-color: rgba(0, 0, 0, 0.7); border-color: #000;} .btn.btn-semi-black:hover, .btn.btn-semi-black:focus {background-color:#000;} /* Btn red for notice : utile pour bouton AVIS - COVID-19 sur le hero de l'accueil. * .btn.btn-avis {background-color: #b52121;border-color: #881313;} .btn.btn-avis:hover, .btn.btn-avis:focus {background-color:#881313;} /* Icon on btn */ .map-zone .contact-form button .icon, .btn.btn-full-blue .icon {font-size: 23px;position: relative;line-height: 10px;top: 4px;left: 3px;} /* Buttons un a cote de l'autre */ .btn-multiple {margin-right: 10px;margin-bottom: 10px;} .btn-multiple + .btn {margin-bottom:10px;} /* Button "Catalogue" avec icone a gauche et 2 styles de texte a droite. */ a.btnCatalog {text-decoration: none;display: inline-block;line-height: 1;background-color: #0d5579;border-color: #0d5579;position: relative;padding: 0.75em 1.5em 0.75em 4em;text-align: left;margin-top: 0.3em;} .btnCatalog__icon {font-size: 2em;display: block;position: absolute;top: 50%;left: 1em;transform: translate(-50%, -50%);} .btnCatalog__title {display: block;text-transform: uppercase;} .btnCatalog__desc {display: block;opacity: 1;font-size: 0.8em;} /* Hover */ a.btnCatalog:focus, a.btnCatalog:hover {background-color: #fff;border-color: #0d5579;color: #000;text-decoration: none;} /* Icon over text on mobile sinon le bouton coupe sur 4 lignes */ @media (max-width: 600px) { a.btnCatalog {text-align: center;padding: 3.3em 1em 0.75em 1em;} .btnCatalog__icon {top: 0.9em;left: 50%;} } /* TABLES ................................................................... */ .table-lines {margin-top:40px;} .table-lines th, .table-lines td {text-align: left;padding: 15px 15px 15px 0;border-bottom: 1px solid #ddd;vertical-align: top;} .table-lines th {text-align:right;width: 35%;} .table-lines td {padding-left: 15px;padding-right:0;} .table-lines tr:first-child th, .table-lines tr:first-child td {border-top: 1px solid #ddd;} .table-lines p, .table-lines li {text-align:left;} .table-lines ol {padding-left: 20px;} .table-lines ol li {padding-left: 10px;} @media (max-width: 767px) { .table-lines tr:first-child th, .table-lines tr th {display: block;width: 100%;text-align: center;border:0;padding: 15px 0 5px 0;} .table-lines tr:first-child th {border-top: 1px solid #ddd;} .table-lines tr:first-child td, .table-lines tr td {display: block;width: 100%;text-align: center;border:0;border-bottom: 1px solid #ddd;padding: 0 0 15px 0;} .table-lines p, .table-lines li {text-align:center;} .table-lines ol {padding-left: 0;} .table-lines ol li {list-style-position: inside;} } /* COOKIE BAR ............................................................... */ .iCookieBar {--gap: 1em;background: #e8e8e8;position: fixed;z-index: 3;bottom: var(--gap);left: var(--gap);width: calc(100% - (2 * var(--gap)));max-width: 25em;padding: 1.4em;transition: opacity 0.3s, visibility 0.3s;} .iCookieBar__ctn { } .iCookieBar__ctn p {font-size: 0.8em;line-height: 1.2;} .iCookieBar__buttons {margin-top: 1em;} .iCookieBar__button { } .iCookieBar__button--deny { } .iCookieBar--hide {opacity: 0; visibility: hidden; } @media (max-width: 767px) { .iCookieBar {--gap: 0px;padding: 1em;max-width: none;} } /* NOTICE ................................................................... */ .noticeBar { position: fixed; z-index: 1031; bottom: 0; left: 0; right: 0; background: #891616; color: #fff; text-align: center; padding: 1em;} .noticeBar a {color: #fff;} /* AUTRES ................................................................... */ .msg_warning, .msg_warning li {color:#bf1b02;} p.msg_confirm {color:#66a736;} p.footnote {font-size: 15px;line-height: 120%;color: #aaa;} p.footnote a {color: #aaa;} .responsive-img {height:auto; max-width:100%; width: 100% \9; /* Pour IE 8-10 SVG */} .soft-hide {display: none;} /* Difference between hide and soft-hide: hide has important, soft-hide doesn't */ .container-fluid > .row {margin-left: 0; margin-right: 0;}