/* font-family: 300 'Rubik', sans-serif; font-family: 'GeogrotesqueW01-Semibol1185184'; */ @font-face { font-family: 'GeogrotesqueW01-Semibol1185184'; src: url('../../fonts/Geogrotesque-SemiBoldItalic.ttf'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Rubik'; src: url('../../fonts/Rubik-Regular.ttf'); font-weight: normal; font-style: normal; font-display: swap; } /* Initialisation */ * { padding: 0; margin: 0; border: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; } a, a:active, a:focus, a:hover, input:focus, input, textarea:focus { outline: none !important; text-decoration: none; color: inherit; transition: color 220ms; } :focus { outline: none !important; } ::-moz-focus-inner { border: 0; } ::-ms-clear { display: none; } table { border-collapse: collapse; } ul { list-style-type: none; } h1,h2,h3,h4,h5,h6,b,strong { font-weight: normal; } ul, ol { margin-bottom: 0; } sup, sub { vertical-align: 0; position: relative; } sup { bottom: 1ex; } input { outline: none; -webkit-appearance: none; -moz-appearance: none; } textarea { outline: none; -webkit-appearance: none; -moz-appearance: none; } /* Font */ @font-face { font-family: 'Glyphicons_Halflings_Regular'; src: url('../../fonts/glyphicons-halflings-regular.eot'); src: url('../../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../fonts/glyphicons-halflings-regular.svg#Glyphicons_Halflings_Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } /*** FRAMESET ***/ html { height: 100%; width: 100%; } body { width: 100%; font: 300 14px/14px 'Rubik', Arial, sans-serif; color: #898989; background: #fff; -webkit-overflow-scrolling: touch; } .container-fluid { position: relative; width: 100%; opacity: 0; transition: opacity 300ms; overflow: hidden; } .loaded .container-fluid { opacity: 1; } /*** SHORTKEY ***/ .clearfloat { height: 0px; width: 0px; margin: 0; clear: both; } .noMargin { margin-bottom: 0 !important; } .xMargin { margin-bottom: 40px !important; } .xxMargin { margin-bottom: 50px !important; } .centerize { display: inline-block; vertical-align: middle; line-height: normal; } /*** FOOTER ***/ footer { position: relative; background: #05212f; z-index: 110;} footer .blanko { float: left; display: block; height: 100px; line-height: 100px; width: 195px; opacity: 0.3; } footer .blanko img { width: 100%; vertical-align: middle; } footer p { float: right; margin: 3px 0 0 0; font-size: 12px; line-height: 97px; color: #ffffff51;} footer p span { margin: 0 10px; } footer .footerlink { transition: color 300ms; } footer .footerlink:hover { color: white; } footer .footerlinkMobile { display: none; } .backBtn { position: absolute; right: 55px; top: -45px; width: 60px; height: 60px; line-height: 60px; text-align: center; background: #f95a1a; border-radius: 50%; } /*** HEADER ***/ header { position: relative; z-index: 107; } header .wrapper { float: none; max-width: 1440px; margin: 0 auto; } .topNav { background: #05212f; } .topNav-marker { float: left; display: block; width: 18px; margin: 0 10px 0 0; line-height: 50px; text-align: center; } .topNav-marker span { display: inline-block; height: 18px; width: 100%; margin: 1px 0 0 0; line-height: 18px; vertical-align: middle; background: #fff; background: rgba(255, 255, 255, 0.5); border-radius: 50%; transition: background 220ms; } .topNav-marker span img { margin-top: -2px; } .topNav-number { float: left; display: block; width: auto; padding: 19px 0 15px 0; font: 400 16px/16px 'GeogrotesqueW01-Semibol1185184', Arial, sans-serif; color: #f95a1a; } .topNav-number a { color: #f95a1a; } .topNav ul { float: right; } .topNav li { float: left; font-size: 13px; text-transform: uppercase; } .topNav li a { display: block; padding: 19px 12px 17px 12px; color: #fff; } .topNav li:last-child a { padding-right: 0; } .mainNav { background: #fff; box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.15); } .mainNav-logo { position: relative; float: left; display: block; height: 130px; width: 250px; max-width: 45%; line-height: 130px; background: #f95a1a; } .mainNav-logo::before { position: absolute; right: 100%; top: 0; height: 100%; width: 5000px; content:''; background: #f95a1a; } .mainNav-logo::after { position: absolute; left: 100%; top: 0; display: block; height: 0; width: 0; content:''; border-style: solid; border-width: 130px 15px 0 0; border-color: #f95a1a transparent transparent transparent; } .mainNav-logo img { max-width: 90%; vertical-align: middle; } .mainMenu { float: right; } .mainMenu > li { float: left; margin: 0 0 0 40px; font-weight: 400; font-size: 17px; } .mainMenu > li:first-child { margin-left: 0; } .mainMenu > li > a { display: block; line-height: 130px; color: #898989; } .mainMenu .wSubMenu { position: relative; } .mainMenu .wSubMenu ul { position: absolute; left: -50px; top: 100%; padding: 30px 0; background: #05212f; box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1); transform: translateY(0); opacity: 0; visibility: hidden; z-index: 105; transition: opacity 300ms, transform 300ms, visibility 0ms ease 300ms; } .mainMenu .wSubMenu ul li { font-weight: 300; } .mainMenu .wSubMenu ul li a { display: block; padding: 20px 50px; color: #fff; white-space: nowrap; } .mainMenu .wSubMenu:hover > a { color: #f95a1a; } .mainMenu .wSubMenu:hover ul { opacity: 1; visibility: visible; transform: translateY(-25px); transition: opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 75ms, transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 75ms; } /*** SHAREBAR ***/ .withShare { position: relative; background: #f5f5f5; } .shareBar { position: absolute; right: 0; top: calc(50% - 180px); height: 50px; font: 300 12px/50px 'Rubik', Arial, sans-serif; color: #fff; text-transform: uppercase; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform-origin: right bottom; -webkit-transform-origin: right bottom; } #shareBoxCarriere .shareBar { top: 120px; } .shareBar .shareTitle { float: left; padding: 0 20px; background: #333; } .shareIcones { float: left; padding: 0 10px; background: #fff; } .shareBar a, .shareBar span { position: relative; display: block; float: left; width: 40px; height: 50px; cursor: pointer; } .shareBar a img, .shareBar span img { position: absolute; left: 0; top: 0; opacity: 1; } .shareBar a img:first-child, .shareBar span img:first-child { opacity: 0; } /*** BCRUMPS ***/ .bcrumps { margin-bottom: 30px; font-weight: 400; font-size: 13px; text-transform: uppercase; color: #999; } .bcrumps .spacer { margin: 0 12px; } .bcrumps a { color: #999; } .bcrumps a:first-child { margin-right: 5px; } .bcrumps a:first-child::after { position: relative; content:'\e021'; font-family: 'Glyphicons_Halflings_Regular'; font-size: 12px; line-height: 14px; color: #999; } /*** CONTENT ***/ .content { min-height: calc(100vh - 280px); } .maxWidth { max-width: 850px; } .boxed { padding-top: 130px; padding-bottom: 130px; } .boxed div > :last-child { margin-bottom: 0; } .paddingBottom { padding-bottom: 130px; } .noPadding { padding-left: 0; padding-right: 0; } .noBanner { padding-top: 100px; padding-bottom: 100px; } .noBanner h1 { color: #333; } .bg_white { background: #fff; } .bg_gray { background: #f5f5f5; } .bg_blue { background: #05212f; } .bg_orange { background: #f95a1a; } .sidePadding { padding-left: 80px; padding-right: 80px; } aside { padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; } /*** OcList ***/ .listTitle { margin-top: 90px; color: #333; } .ocList { border-bottom: solid 1px #d6d6d6; } .ocList > li { border-top: solid 1px #d6d6d6; font: 400 20px/22px 'Rubik', Arial, sans-serif; } .ocList > li > a { position: relative; display: block; margin: 0; padding: 25px 50px 25px 0; color: #333; } .ocList > li > a span { position: absolute; right: 0; top: 0; display: block; height: 100%; width: 30px; background: url('../../images/icones/arrow.png') no-repeat center center; background-size: 10px 7px; transition: transform 300ms; -webkit-transition: -webkit-transform 300ms; } .ocList .open > a { color: #f95a1a; } .ocList .open > a span { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); } .innerOcList { display: none; opacity: 0; } .innerOcList ul { margin: 0 0 30px 0; } .innerOcList ul > :last-child { margin-bottom: 60px; } .innerOcList ul > :first-child { padding-top: 20px; } .innerOcList li { margin: 0 0 15px 0; font: 300 18px/20px 'Rubik', Arial, sans-serif; color: #898989; } .stdList { padding-top: 30px; border-top: solid 1px #d6d6d6; } .stdList li { position: relative; padding: 0 0 0 20px; margin: 0 0 25px 0; font: 300 18px/24px 'Rubik', Arial, sans-serif; color: #898989; border: none; } .stdList li::before { position: absolute; left: 0; top: 0; font-weight: 500; font-size: 20px; content: '-'; color: #f95a1a; } .stdList li:last-child { margin-bottom: 0; } /*** STYLES ***/ h1 { font: 400 46px/50px 'GeogrotesqueW01-Semibol1185184', Arial, sans-serif; color: #fff; text-transform: uppercase; } h2 { margin: 0 0 40px 0; font: 300 32px/46px 'Rubik', Arial, sans-serif; color: #231f20; } h3, .date { margin: 0 0 20px 0; font: 400 16px/20px 'GeogrotesqueW01-Semibol1185184', Arial, sans-serif; color: #f84c07; text-transform: uppercase; } h4 { margin: 0 0 30px 0; font: 300 28px/38px 'Rubik', Arial, sans-serif; color: #333; } h5 { margin: 0 0 30px 0; font: 400 30px/1em 'GeogrotesqueW01-Semibol1185184', Arial, sans-serif; color: #fff; text-transform: uppercase; } h6 { margin: 0 0 60px 0; font: 300 42px/1.3em 'Rubik', Arial, sans-serif; color: #333; } p { margin: 0 0 20px 0; font: 300 20px/36px 'Rubik', Arial, sans-serif; color: #898989; } .btn { display: inline-block; padding: 15px 20px; font: 500 15px/20px 'Rubik', Arial, sans-serif; color: #f84c07; background: #fff; border-radius: 5px; } .btn_o { color: #fff; background: #f84c07; } .btn_lg { background: #f5f5f5; } .btn_lgo { color: #f84c07; background: #f5f5f5; } .link { margin: 0; font-weight: 400; font-size: 15px; line-height: 15px; color: #898989; opacity: 0.9; } .link_o { color: #f95a1a; } .txt_o { color: #f95a1a; } /*** DYNAMIC ***/ .dynamic > :first-child { margin-top: 0; } .dynamic > :last-child { margin-bottom: 0; } .dynamic h1 { margin: 50px 0 30px 0; font: 400 24px/1.3em 'GeogrotesqueW01-Semibol1185184', Arial, sans-serif; color: #898989; text-transform: none; } .dynamic h2, .dynamic h3 { margin: 50px 0 25px 0; font: 400 16px/18px 'GeogrotesqueW01-Semibol1185184', Arial, sans-serif; color: #f95a1a; text-transform: uppercase; } .dynamic p { margin: 0 0 25px 0; } .dynamic p.nb { font: 400 13px/13px 'GeogrotesqueW01-Semibol1185184', Arial, sans-serif; color: #f95a1a; } .dynamic a { color: #f95a1a; } .dynamic strong { font-weight: 500; } .dynamic em { font-style: normal; color: #333; } .dynamic ul { margin: 25px 0 30px 0; } .dynamic ul li { padding-left: 20px; font-size: 20px; } .dynamic ul li::before { position: absolute; left: 0; top: 0; content:'-'; font-weight: 500; font-size: 20px; color: #f95a1a; } .dynamic ol { margin: 25px 0 30px 20px; } .dynamic li { position: relative; margin: 0 0 12px 0; font: 300 18px/24px 'Rubik', Arial, sans-serif; } .dynamic li:last-child { margin-bottom: 0; } .dynamic img { display: block; margin: 50px 0; max-width: 100%; height: auto !important; } /*** BANNER ***/ .banner { position: relative; height: 520px; line-height: 520px; background-repeat: no-repeat; background-position: center center; background-size: cover; } .banner h1 { display: inline-block; margin: 0; vertical-align: middle; } .banner #saaq { position: absolute; bottom: 0; right: 0; } .scrollLink { position: absolute; left: 0.93rem; bottom: 40px; font-weight: 400; font-size: 15px; line-height: 21px; color: #f95a1a !important; } .scrollLink img { margin: 0 0 0 10px; vertical-align: middle; } .scrollLink:hover { color: #f95a1a; } .diagnostic { background-image: url('../../images/banner/diagnostic-mecanique-electronique.jpg'); } .huile { background-image: url('../../images/banner/changement-huile.jpg'); } .entretien { background-image: url('../../images/banner/entretien.jpg'); } .usinage { background-image: url('../../images/banner/fabrication.jpg'); } .mecanique { background-image: url('../../images/banner/mecanique-generale.jpg'); } .reparation { background-image: url('../../images/banner/reparation-remorques-citernes.jpg'); } .suspension { background-image: url('../../images/banner/suspension.jpg'); } .toiles { background-image: url('../../images/banner/toiles.jpg'); background-position: right center; } .apropos { background-image: url('../../images/banner/apropos.jpg'); background-position: center top; } .culture { background-image: url('../../images/banner/culture.jpg'); } .pieces { background-image: url('../../images/banner/pieces.jpg'); } .excelerator { background-image: url('../../images/banner/excelerator.jpg'); } .experience { background-image: url('../../images/banner/experience.jpg'); } .carriereBanner { background-image: url('../../images/banner/carriere.jpg'); background-position: left center; } /*** THUMBSLIST ***/ .thumbsList { padding-right: 0; } .thumbsList a { float: left; display: block; width: 50%; margin: 0 0 50px 0; } .thumbsList a:last-child { margin-bottom: 0; } .thumbsList a:last-child::after { display: table; clear: both; content:''; } .thumbsList a:nth-child(2n + 1) { clear: left; } .thumbsList a div { position: relative; margin: 0 0 40px 0; line-height: 0; } .thumbsList a img { width: 100%; } .thumbsList a h2 { margin: 0 0 12px 25px; font-size: 25px; line-height: 1em; color: #898989; } .thumbsList a p { margin: 0 0 0 25px; font-weight: 400; font-size: 12px; line-height: 12px; color: #f95a1a; text-transform: uppercase; } /*** BLOCSLIST ***/ .blocsList { /*** padding-bottom: 50px; ***/ } .blocsList a { display: block; clear: left; } .blocPic { position: relative; float: left; width: 475px; line-height: 0; } .blocPic img { max-width: 100%; max-height: 100%; } .blocDesc { float: left; width: calc(100% - 475px); padding: 0 0 0 80px; } .blocDesc h4 { max-width: 700px; max-height: 190px; overflow: hidden; } .pagination { margin-top: 40px; display: flex; justify-content: space-evenly; } .page-item { border-radius: 0px !important; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .page-item .page-link { border-color: #eee; font-weight: 700; color: #666; border-radius: 0px !important; transition: all 220ms; } .page-item:first-child .page-link span::before, .page-item:last-child .page-link span::before { display: inline; content:'\e072'; font-family: 'Glyphicons_Halflings_Regular'; font-weight: normal; font-size: 10px; line-height: normal; color: #666; } .page-item:first-child .page-link { transform: rotate(180deg); -webkit-transform: rotate(180deg); } .page-link:focus, .page-link:hover { background: #eee; color: #222; } .pagination .disabled { opacity: 0.5; } .page-item.active .page-link, .page-item.active .page-link:focus, .page-item.active .page-link:hover { border-color: #f95a1a; background: #f95a1a; } /*** HOME ***/ .homeCycleLayer { position: relative; min-height: 530px; } .show-alert .homeCycleLayer { height: calc(100% - 240px); margin-top: -60px; } .closed-alert .homeCycleLayer { height: calc(100% - 180px); transition: height 200ms, margin 200ms; } .homeCycle { height: 100%; width: 100%; } .homeCycle .centerize { width: 100%; } .slide { height: 100%; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .slide0 { background-image: url('../../images/banner/banniere_agrandissement.jpg'); } .slide0b { background-image: url('../../images/banner/banniere_recrutement.jpg'); } .slide1 { background-image: url('../../images/banner/banniere_pieces.jpg'); } .slide2 { background-image: url('../../images/banner/banniere_stationnement.jpg'); } .slide3 { background-image: url('../../images/banner/banniere_equipe.jpg'); } .slide4 { background-image: url('../../images/banner/banniere_excelerator.jpg'); } .cycle-slideshow h1 { margin-bottom: 55px; font-size: 86px; line-height: 1em; text-shadow: 0 0 3px rgba(0,0,0,0.2); } .slide .centerize { visibility: hidden; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition: transform 150ms ease-out 0s, opacity 150ms linear 0s, visibility 0ms ease 150ms; -webkit-transition: -webkit-transform 150ms ease-out 0s, opacity 150ms linear 0s, visibility 0ms ease 150ms; } .cycle-slide-active .centerize { visibility: visible; opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); transition: transform 0.5s cubic-bezier(0,.09,.04,1) 1.2s, opacity 0.5s linear 1.2s; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0,.09,.04,1) 1.2, opacity 0.5s linear 1.2s; } .slide.firstSlide .centerize { opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); } .slide.loaded .centerize { opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); transition: transform 0.5s cubic-bezier(0,.09,.04,1) 1.4s, opacity 0.5s linear 1.25s; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0,.09,.04,1) 1.4s, opacity 0.5s linear 1.25s; } #cPager { position: absolute; left: 25%; bottom: 25px; margin-left: 0.9735rem; z-index: 105; } #cPager li { display: block; float: left; margin-right: 10px; } #cPager li a { display: block; width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 0.5; } #cPager .cycle-pager-active a { opacity: 1; } .scrollHome { position: absolute; right: 0; bottom: -1px; height: 80px; padding: 0 60px; font: 400 16px/80px 'GeogrotesqueW01-Semibol1185184', Arial, sans-serif; color: #fff !important; text-transform: uppercase; background: #05212f; background: rgba(5,33,47,0.8); cursor: pointer; z-index: 105; } .scrollHome img { position: absolute; right: 60px; top: 30px; } .homeServices a { position: relative; float: left; width: 25%; } .homeServices a img { width: 100%; } .homeRow { position: relative; background: #f2f2f2; } .homeServices .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding-top: 40%; text-align: center; background: rgba(249, 90, 26, 0.5); } .homeServices .overlay p { font-weight: 400; font-size: 15px; line-height: 20px; color: #fff; } #home aside { position: absolute; right: 0; top: 0; width: 25%; min-height: 100%; padding: 40px 0 0 0; text-align: center; } #home aside div { padding: 35px 0; } #home aside::after { display: none; } #home .technoRoute { height: 830px; padding-top: 150px; text-align: center; background: url('../../images/content/technoroute.jpg') no-repeat center bottom; background-size: cover; } #home .technoRoute div { display: inline-block; max-width: 650px; padding: 0 0.9735rem; } .homeNews { padding-bottom: 60px; } .homeNews h1 { color: #333; } #home .blocsList { padding-bottom: 0; padding-left: 0;} .alertFlag { height: 0; background: #333; overflow: hidden; transition: height 200ms; } .show-alert .alertFlag { height: 60px; } .alertFlag .alertBox { position: relative; height: 60px; max-width: 900px; margin: 0 auto; } .alertFlag .alertBox h3 { float: left; margin: 0 35px 0 0; line-height: 60px; } .alertFlag .alertBox h3.hidden-lg-up { margin: 0; } .alertFlag .alertBox p { float: left; margin: 0; font-size: 16px; line-height: 60px; color: #fff; max-width: 650px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: color 220ms; } .alertFlag .alertBox > a { float: right; font-size: 26px; line-height: 60px; color: #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .homeLoading, .homeLoading body, .homeLoading .container-fluid { overflow: hidden; } .homeLoading #homeLoader { left: 0; opacity: 1; visibility: visible; } #homeLoader { position: fixed; left: -125%; top: 0; width: 100%; height: 100%; background: #f95a1a; visibility: hidden; z-index: 999; opacity: 0; transition: left 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.5s, visibility 0ms ease 1.5s; } #homeLoader img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } #homeLoader span { position: absolute; left: 100%; top: 0; width: 0; height: 0; display: block; border-style: solid; border-right-width: 100px; border-bottom-width: 0; border-left-width: 0; border-color: #f95a1a transparent transparent transparent; } /*** SERVICES ***/ .callTo { position: relative; text-align: center; background-image: url('../../images/banner/techno-trucks.jpg'); } .callTo::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: #05212f; opacity: 0.8; } .callTo .centerize { position: relative; max-width: 650px; z-index: 1; } .callTo h1 { margin: 0 0 15px 0; font-size: 38px; line-height: 40px; color: #f95a1a; } .callTo p { margin-bottom: 40px; font-size: 22px; line-height: 26px; color: #fff; } .callTo p br { display: none; } #parkingCallTo { background-image: url('../../images/banner/stationnement.jpg'); } /*** TOILE ***/ .technoflex { position: absolute; left: 0.93rem; bottom: 20px; font-weight: 400; font-size: 15px; line-height: 35px; color: #fff; } .technoflex img { margin: 0 0 0 20px; vertical-align: middle; } .technoflex br { display: none; } .technoBar { height: 600px; line-height: 600px; text-align: center; } .technoLogo { position: relative; float: right; height: 100%; background: #e01e26; } .technoLogo img { vertical-align: middle; max-width: 60%; } .technoCycle { height: 100%; } .technoCycle .cycle-slideshow { width: 100%; height: 100%; } .technoCycle .bg { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg1 { background-image: url('../../images/content/technoflex-bg1.jpg'); } .bg2 { background-image: url('../../images/content/technoflex-bg2.jpg'); } .bg3 { background-image: url('../../images/content/technoflex-bg3.jpg'); } .technoDesc { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 101; } .technoDesc .centerize { max-width: 600px; text-align: left; } .technoDesc h2 { color: #fff; } /*** TECHNOROUTE ***/ .techno-route { position: absolute; left: 0.93rem; bottom: 20px; font-weight: 400; font-size: 15px; line-height: 40px; color: #fff; } .techno-route img { margin: 0 0 0 20px; vertical-align: top; } .techno-route br { display: none; } .bar { height: 800px; line-height: 800px; } .bar > div { height: 100%; padding-left: 10%; background: #05212f; background: rgba(5,33,47,0.95); } .bar h2 { color: #fff; } .technoRouteBar { background: url('../../images/content/technoroute-bg.jpg') no-repeat center top; background-size: cover; } .technoRouteBar p { margin-bottom: 50px; } .technoRouteBar h2 { margin: 0; line-height: 1em; } .technoRouteBar a { position: relative; display: block; padding: 12px 0 12px 40px; } .technoRouteBar a img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: opacity 220ms; } .technoRouteBar a img:first-child { opacity: 0; } /*** CULTURE ***/ .cultureBar { background: url('../../images/content/culture-bg.jpg') no-repeat center top; background-size: cover; } .cultureBar h2 { max-width: 75%; } .cultureBar a { margin-bottom: 20px; } /*** PIECES ***/ .piecesBar h3 { color: #fff; } .piecesBar > div { background: #f95a1a; } .piecesBar .bg { background: url('../../images/content/pieces-bg.jpg') no-repeat center top; background-size: cover; } .deliveryForm { width: 100%; max-width: 365px; padding-top: 0 !important; } .deliveryForm label { display: block; font-size: 15px; line-height: 1em; color: #fff; } .deliveryForm .dropdown { margin: 0 0 30px 0; z-index: 1; } .deliveryForm .dropdown-menu { display: block; height: 0px; border: solid 1px #fff; border-bottom: none; width: 100%; top: calc(100% - 8px); padding: 0; z-index: -1; overflow: hidden; transition: height 220ms; } .deliveryForm .dropdown-item { display: block; padding: 10px 20px; font: 300 15px/20px 'Rubik', Arial, sans-serif; color: #898989; } .deliveryForm .dropdown-item:first-child { padding-top: 30px; } .deliveryForm .dropdown-item:last-child { padding-bottom: 20px; } .deliveryForm .open .dropdown-menu { height: 195px; overflow-y: scroll; } .deliveryForm .dropdown-item { transition: color 220ms; } .deliveryForm .dropdown-item:hover { color: #f95a1a; background: #fff; } .deliveryForm button.btn { position: relative; float: none; width: 100%; padding-right: 40px; margin: 0; font: 300 15px/20px 'Rubik', Arial, sans-serif; color: #898989; text-align: left; transition: box-shadow 0ms !important; } .deliveryForm button.btn:hover { background: #fff; } .deliveryForm button.btn::after { display: none; } .deliveryForm button.btn img { position: absolute; right: 20px; top: 24px; transition: all 220ms; } .deliveryForm .open button.btn { box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15); } .deliveryForm .open button.btn img { top: 22px; transform: rotate(-90deg); } .deliveryForm input { border-color: #fff; } form.deliveryForm .w50 { width: calc(50% - 10px); } .deliveryForm > a { padding: 20px; font-weight: 300; line-height: 15px; } .deliveryForm > a:focus { color: #f95a1a; } .deliveryForm > a { transition: all 220ms; } .deliveryForm > a:hover { color: #fff; background: #333; } .hoursModal { display:none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #05212f; background: rgba(5,33,47,0.95); z-index: 999; } .innerModal { position: absolute; left: 50%; top: 50%; width: 100%; max-width: 750px; padding: 0 0.9735rem; text-align: center; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .innerModal h2 { color: #fff; } .innerModal h3 { margin-bottom: 5px; } .innerModal table { margin: 0 0 30px 0; width: 100%; } .innerModal table thead td { padding: 10px 0; font: 700 16px/24px 'Rubik', Arial, sans-serif; text-align: right; color: #f95a1a; text-transform: uppercase; } .innerModal table thead td:first-child { text-align: left; } .innerModal table thead tr { border-bottom: solid 1px #3f4f58; } .innerModal table tbody tr { border-bottom: solid 1px #3f4f58; } .innerModal table tbody td { padding: 10px 0; font: 300 20px/24px 'Rubik', Arial, sans-serif; text-align: right; color: #fff; } .innerModal table tbody td:first-child { text-align: left; color: #fff; } .innerModal p { margin-bottom: 10px; font-weight: 400; font-size: 15px; line-height: 1em; color: #fff; } .innerModal h5 { margin-bottom: 20px; font-size: 38px; line-height: 40px; color: #f95a1a; } .innerModal h5 a { color: #f95a1a; } .innerModal h6 { margin-bottom: 20px; font-size: 22px; line-height: 28px; color: #fff; } .closeHoursModal { position: absolute; right: 0.9735rem; top: -35px; } .closeHoursModal::after { display: inline-block; content:'+'; font-size: 28px; font-weight: 400; color: #fff; vertical-align: middle; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .deliveryForm p.errorMsgsCp { clear: both; font: 300 14px/18px 'Rubik', Arial, sans-serif; color: #fff; opacity: 0; margin: 10px 0; } /*** EXP TECHNO ***/ .abs { position: absolute; left: 0.9735rem; bottom: 30px; margin: 0; } aside .abs { bottom: 20px; } .mainSide h1 { margin-bottom: 30px; color: #333; } .mainSide h2 { margin-bottom: 45px; } .mainSide > :last-child { margin-bottom: 0; } aside { position: relative; padding-left: 60px; padding-right: 60px; background: #fff; } aside h4 { line-height: 32px; } aside ul { margin-bottom: 50px; } aside ul li { margin-bottom: 30px; font-size: 20px; line-height: 1em; color: #333; } .asideTitle { position: absolute; left: 0; top: -80px; width: 100%; padding: 30px 60px; background: #f95a1a; cursor: pointer; } .asideTitle h3 { margin: 0; color: #fff; } .asideTitle img { position: absolute; right: 60px; top: 30px; } /*** APROPOS ***/ aside .aproposInner { position: relative; padding-left: 60px; padding-right: 60px; } aside .aproposInner h4 { margin-bottom: 20px; } aside .aproposInner h4 span { color: #f84c07; } aside .aproposInner p { margin-bottom: 40px; } .teamBox { position: relative; float: right; display: block; width: 100%; } .teamBox .abs { left: 25%; top: -40px; margin-left: 0.9757rem; } .teamBloc { position: relative; float: left; width: 25%; } .teamBloc:nth-child(1), .teamBloc:nth-child(4) { margin-left: 25%; } .teamBloc img { width: 100%; } .teamBloc div { position: absolute; left: 0; bottom: 30px; padding: 0 50px; } .teamBloc div h2 { margin: 0 0 2px 0; line-height: 1em; color: #fff; } .teamBloc div h3 { margin: 0; } /*** EXP ***/ #exp aside h4 { margin-bottom: 40px; } #exp aside .btn { margin-top: 20px; } .expCycle { background: url('../../images/content/exp-bg.jpg') no-repeat left bottom; background-size: cover; } .expSlide { width: 100%; height: 700px; padding: 0 0.9735rem; line-height: 700px; text-align: center; } .expSlide .centerize { max-width: 800px; opacity: 0; transition: opacity 500ms; } .expSlide p { font-weight: 500; font-size: 15px; line-height: 20px; color: #fff; } .expSlide p span { margin: 0 15px; } .expSlide p br { display: none; } .expSlide h2 { margin-bottom: 10px; color: #fff; } .expSlide h3 { margin: 30px 0 0 0; } .cycle-slide-active .centerize { opacity: 1; transition: opacity 1000ms ease 500ms; } .depannage { height: 600px; text-align: center; } .depannage > div { height: 100%; padding-top: 120px; } .depannage > div > div { display: inline-block; max-width: 600px; width: 100%; text-align: left; } .depannage h1 { margin-bottom: 25px; line-height: 1.05em; color: #333; } .depannage h2 { margin-bottom: 20px; font-weight: 400; line-height: 1em; } .outHours { background: #fff; } .outHours h2, .outHours h2 a { color: #f95a1a; } .outHours .black, .outHours .black a { font-weight: 400; line-height: 28px; margin-bottom: 0; color: #333; } .inHours { background: #f95a1a; } .inHours h3, .inHours h2, .inHours h2 a, .inHours p { line-height: 1em; color: #fff; } /*** HISTORIQUE ***/ #histo, #histo body { height: 100%; } #histo .container-fluid { height: 100%; } .histoCycleLayer { position: relative; height: calc(100% - 280px); min-height: 600px; } #cycleLoader { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #05212f; z-index: 101; text-align: left; } #cycleLoader > div { position: absolute; left: 45%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } #cycleLoader h1 { margin: 0; line-height: 1em; white-space: nowrap; } #cycleLoader h1:last-child { margin-left: 15%; } .show-cycle #cycleLoader h1:first-child { opacity: 0; transform: translateX(-30%); -webkit-transform: translateX(-30%); transition: opacity 600ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: opacity 600ms cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1); } .show-cycle #cycleLoader h1:last-child { opacity: 0; transform: translateX(30%); -webkit-transform: translateX(30%); transition: opacity 600ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: opacity 600ms cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1); } .show-cycle #cycleLoader { opacity: 0; visibility: hidden; transition: opacity 1s ease 800ms, visibility 0ms ease 1800ms; } .show-cycle #histoPagerRow { opacity: 1; transition: opacity 500ms ease 1700ms; } .histoCycle { height: 100%; width: 100%; text-align: center; background: #05212f; } .histoCycle h1 { margin-bottom: 40px; } .histoCycle h2 { max-width: 670px; margin: 0 auto; color: #fff; } .histoCycle h2 span { color: #f95a1a; } .histoCycle p { margin: 30px 0 0 0; opacity: 0.5; } .histoCycle p.txt { max-width: 670px; margin-left: auto; margin-right: auto; } .histoCycle p img { margin: 0 50px; } .year { height: 100%; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: auto 100%; opacity: 0 !important; transition: opacity 300ms; } .year.cycle-slide-active { opacity: 1 !important; transition: opacity 1200ms; } .year > div { display: inline-block; width: 100%; margin-top: 12vh; } .year1987 { background-image: url('../../images/content/1987.gif'); } .year2005 { background-image: url('../../images/content/2005.gif'); } .year2013 { background-image: url('../../images/content/2013.gif'); } .year2016 { background-image: url('../../images/content/2016.gif'); } #histoPagerRow { position: absolute; left: 0; bottom: 9px; width: 100%; text-align: center; z-index: 105; opacity: 0; } #histoCommands { position: relative; display: inline-block; } #histoPager li { display: inline-block; margin: 0 6px; font: 400 14px/14px 'GeogrotesqueW01-Semibol1185184', Arial, sans-serif; } #histoPager li a { position: relative; display: block; padding-bottom: 7px; color: #fff; opacity: 0.15; transition: all 300ms; } #histoPager li a::after { position: absolute; left: 50%; bottom: 0px; width: 70%; height: 2px; margin-left: -35%; content: ''; background: #fff; transition: all 300ms; } #histoPager li a:hover { opacity: 1; } #histoPager li a:hover::after { width: 100%; background: #fff; margin-left: -50%; } #histoPager .cycle-pager-active a { opacity: 1 !important; color: #f95a1a !important; cursor: default; } #histoPager .cycle-pager-active a::after { width: 100% !important; background: #f95a1a !important; margin-left: -50% !important; } #histoCommands span { position: absolute; top: 0; cursor: pointer; transition: all 300ms; } #next { right: -30px; } #next:hover { right: -40px; padding-left: 10px; } #prev { left: -30px; } #prev:hover { left: -40px; padding-right: 10px; } #next img { transform: rotate(180deg); -webkit-transform: rotate(180deg); } #histo .backBtn { display: none; } .txtHisto { text-align: center; padding: 0; } .txtHisto > div { padding: 60px 0.9735rem; max-width: 650px; margin: 0 auto; border-bottom: solid 1px #fff; border-color: rgba(255, 255, 255, 0.1); background-repeat: no-repeat; background-position: center center; background-size: auto 80%; } .txtHisto > div:first-of-type { padding-top: 10px; } .txtHisto > div:last-child { padding-bottom: 0; border: none; } .txtHisto > div h1 { margin-bottom: 10px; color: #f95a1a; background-repeat: no-repeat; } .txtHisto > div h4 { line-height: 1.5em; color: #fff; } .txtHisto > div h4 span { color: #f95a1a; } .txtHisto > div p { margin: 0; opacity: 0.5; } .txtHisto > div .ico img { margin: 0 15px 20px 15px; } .txtHisto > div p img { max-width: 100%; } /*** NOUVELLE/PROMOTION ***/ .openframe .noBanner h1 { margin-bottom: 40px; min-height: 2em; } .openframe .noBanner .date { margin-bottom: 50px; } .openframe .shareBox { position: relative; } .openframe .shareBar { top: calc(50% - 140px); } .openframe .shareIcones { background: #eee; } .openframe .btn { margin-top: 50px; } .new .noBanner { background: #05212f; } .new .noBanner h1 { color: #fff; } .promo .noBanner { background: #f5f5f5; } .cycleRow { margin-top: -80px; } .noImg .cycleRow { display: none; } .cycleBox { max-width: 1240px; } .cycleLayer { position: relative; } .galeriePic { position: relative; } .galeriePic > img { width: 100%; } .galeriePic > a { position: absolute; left: 0; bottom: 0; padding: 0 55px 0 20px; height: 50px; font-size: 12px; line-height: 50px; text-align: center; color: #fff; text-transform: uppercase; background: #f95a1a; } .galeriePic > a::after { position: absolute; right: 20px; top: 17px; content:'\e096'; font-family: 'Glyphicons_Halflings_Regular'; font-weight: normal; font-size: 16px; line-height: 16px; } .thumbs { position: absolute; right: 0; bottom: 0; width: 100%; max-width: calc(100% - 150px); } .thumbs a { position: relative; float: right; width: 80px; height: 50px; } .thumbs a img { width: 100%; } .after-main { position: static; right: auto; bottom: auto; max-width: none; } .noImgShareBar .shareBar { display: none; } .noImg .cycleRow .shareBar { display: none; } .noImg .noImgShareBar .shareBar { display: block; } /*** PROMO ***/ .filter { margin-top: 40px; } .filter span { float: left; margin-right: 20px; font: 400 16px/50px 'GeogrotesqueW01-Semibol1185184', Arial, sans-serif; color: #898989; text-transform: uppercase; } .filter .btn { float: left; display: block; margin: 0 10px 10px 0; color: #898989; background: #f5f5f5; transition: all 220ms; } .filter .active { color: #fff; background: #05212f; cursor: default; } /*** CARRIERES ***/ .slickCarousel > a { position: absolute; right: 20px; top: 50%; width: 60px; height: 60px; line-height: 60px; margin-top: -30px; text-align: center; background: #fff; background: rgba(255, 255, 255, 0.2); border-radius: 50%; } .slickCarousel > a img { vertical-align: middle; } .slickCarousel .abs { position: absolute; left: 25%; top: -40px; margin: 0 0 0 0.9735rem; } .carousel div img { width: 100%; } .toJob h1 { margin-bottom: 60px; color: #333; } .linkList { margin-bottom: 100px; border-top: solid 1px #cecece; } .linkList:last-child { margin: 0; } .linkList li { position: relative; display: block; padding: 25px 0; border-bottom: solid 1px #cecece; } .linkList li::after { position: absolute; right: 10px; top: 50%; content: '\e080'; margin-top: -6px; font: normal 12px/12px 'Glyphicons_Halflings_Regular'; } .linkList li a { display: block; } .linkList li p { position: absolute; left: 0; top: 50%; margin: -11px 0 0 0; font-size: 15px; line-height: 22px; } .linkList li h1 { margin: 0 60px 0 195px; font: 300 20px/22px 'Rubik', Arial, sans-serif; color: #333; text-transform: none; } .form .cvBtn { position: relative; } .form .cvBtn input { position: absolute; left: 0; top: 0; margin: 0; height: 100%; width: 100%; opacity: 0; } #jobFormWrapper .formResponse { position: static; left: auto; top: auto; display: block; max-width: 600px; margin-top: 30px; } #jobForm .cvBtn, #jobForm #submitform { margin-top: 20px; } /*** FORMS ***/ .formWrapper { position: relative; } .formTitle { margin-bottom: 5px; line-height: 1em; } .form { position: relative; padding-top: 50px; } .form input { float: left; height: 55px; padding: 0 20px; margin: 0 0 20px 0; border: solid 1px #d6d6d6; line-height: 55px; color: #231f20; border-radius: 5px; cursor: pointer; transition: box-shadow 220ms, background 220ms; } .form textarea { height: 250px; width: 100%; margin: 0 0 20px 0; padding: 20px; border: solid 1px #d6d6d6; border-radius: 5px; resize: none; } .form .right { float: right; } .form .w50 { width: calc(50% - 10px); } .form .fw { width: 100%; } .form .btn { margin-left: 20px; } .form ::-webkit-input-placeholder { color: #898989; } .form :-ms-input-placeholder { color: #898989; } .form ::-moz-placeholder { color: #898989; } .form input:focus, .form textarea:focus { border-color: #d6d6d6; color: #231f20; background: #f9f9f9; box-shadow: 0 0 3px 0 rgba(50, 50, 50, 0.2); } .form .invalid { border-color: #f84c07; color: #f84c07; box-shadow: 0 0 10px 0 rgba(248, 76, 7, 0.5); } #cp.invalid { border-color: #000; color: #f84c07; box-shadow: 0 0 10px 0 rgba(000, 0, 0, 0.5); } .errorMsgs { position: absolute; left: 0; top: 5px; font-size: 15px; line-height: 16px; color: #f84c07; } .formResponse { position: absolute; left: 0; top: 50px; display: none; max-width: 600px; } .formResponse h3 { margin-bottom: 10px; } .formResponse p { line-height: 1.1em; } /*** CONTACT ***/ .add h2 { margin-bottom: 15px; font-weight: 400; line-height: 1em; } .add h2 a { color: #231f20; } .add p { margin-bottom: 15px; font-weight: 400; } .add p span { display: inline-block; width: 125px; } .add p .mail { color: #f84c07; line-height: 30px; } .add ul { margin-bottom: 50px; } .add ul:last-child { margin: 0; } .add ul li { margin-bottom: 10px; font-weight: 400; font-size: 15px; line-height: 17px; } .add ul li::before { content:'-'; margin-right: 10px; color: #f95a1a; } .add .col { float: left; width: 50%; } .add .right { float: right; width: auto; margin: 0; } #comm a { display: block; padding: 45px 0 45px 25px; font: 400 18px/30px 'Rubik', Arial, sans-serif; color: #fff; } #comm a img { position: absolute; left: 0.9735rem; top: 57px; opacity: 0; transition: transform 200ms, opacity 220ms; -webkit-transition: -webkit-transform 200ms, opacity 220ms; } #comm a img:last-child { opacity: 1; } #commDesc { height: 0; overflow: hidden; transition: height 300ms; } #commDesc ul { padding-bottom: 45px; margin-left: 25px; } #commDesc ul li { margin: 0 0 15px 0; font: 300 18px/20px 'Rubik', Arial, sans-serif; color: #fff; } #comm.show-comm a { color: #231f20; } #comm.show-comm a img { transform: rotate(180deg); -webkit-transform: rotate(180deg); } #comm.show-comm #commDesc { height: 360px; } #comm.show-comm a img { opacity: 1; } #comm.show-comm a img:last-child { opacity: 0; } .hours { padding-top: 60px; padding-bottom: 70px; } .hours h3 { color: #fff; } .hours ul { border-top: solid 1px #374d59; } .hours li { display: block; padding: 25px 0; border-bottom: solid 1px #374d59; } .hours li p { margin: 0 0 5px 0; line-height: 30px; } .hours li p:first-child { color: #f84c07; } .hours li p:not(:first-child) { color: #fff; margin-bottom: 0; } .hours li p.extra { color: #898989 !important; } .managers .col { float: left; width: 50%; } .managers .right { float: right; width: auto; margin: 0; max-width: 50%; } .managers p { margin: 0; line-height: 24px; color: #231f20; } .managers p a { color: #f84c07; } .managers .margin { margin-bottom: 40px; } .managers h3 { margin-bottom: 10px; color: #231f20; } .map { position: relative; height: 380px; } .map #map { width: 100%; height: 100%; } #maplink { position: absolute; top: 0; left: 0; } .map .btn { border-radius: 0px; } /* ============================= */ /*#newsletter-popup-container { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 999; } #newsletter-popup-container .background { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,0.6); } #newsletter-popup-container .popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 650px; max-height: 90%; overflow-y: auto; padding: 50px; background: #f95a1a; border-radius: 15px; } #newsletter-popup-container .popup p, #newsletter-popup-container .popup div, #newsletter-popup-container .popup input { color: #fff; } #newsletter-popup-container .popup #close-newsletter { position: absolute; top: 20px; right: 20px; font-size: 40px; color: #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); cursor: pointer; } #newsletter-popup-container .popup .small-title { font: 400 20px/1em 'GeogrotesqueW01-Semibol1185184'; letter-spacing: 1px; } #newsletter-popup-container .popup .title { font-family: 'Rubik'; font-weight: 300; font-size: 38px; line-height: 1.2em; } #newsletter-popup-container .popup .error { font-size: 13px; color: #fff; font-weight: bold; position: relative; display: none; } #newsletter-popup-container .popup .error.noheight { height: 0px; } #newsletter-popup-container .popup .email { width: 70%; margin: 20px 0px 0px; background: #fff; border: none; border-radius: 10px; line-height: 60px; text-indent: 15px; color: #000; } @media only screen and (max-width: 650px) { #newsletter-popup-container .popup .email { width: 100%; } } #newsletter-popup-container .popup .bt-container { margin: 20px 0px; } #newsletter-popup-container .popup .bt-container a { font: 'Rubik'; font-weight: 500; } #newsletter-popup-container .popup .other-fields { } #newsletter-popup-container .popup .other-fields > div { width: 47.5%; float: left; margin: 20px 5% 20px 0px; } #newsletter-popup-container .popup .other-fields > div:nth-child(even) { margin-right: 0px; } #newsletter-popup-container .popup .other-fields > div.fullwidth { width: 100%; } @media only screen and (max-width: 650px) { #newsletter-popup-container .popup .other-fields > div { width: 100%; margin-right: 0px; } } #newsletter-popup-container .popup .other-fields input { background: none; border-bottom: 1px solid #fff; line-height: 40px; width: 100%; } #newsletter-popup-container .popup .other-fields input::placeholder { color: #fff !important; }*/ .infolettre .formResponse { position: relative; margin-bottom: 50px; top: 0; } .infolettre .form div .error { font-size: 13px; color: #f84c07; font-weight: bold; position: relative; display: none; } .infolettre .form div .btn { margin: 0; } .infolettre .formResponse h1 { color: #f84c07; } .infolettre .form div:not(.clearfloat) { float: left; width: 50%; padding: 0 1%; min-height: 100px; } @media only screen and (max-width: 650px) { .infolettre .form div:not(.clearfloat) { width: 100%; } } .infolettre .form div p{ font-size: 12px; margin: 0; border: none; color: #898989; box-shadow: 0 0 0 0 rgba(0,0,0,0); } .infolettre .form div input{ float: none; width: 100%; margin-bottom: 5px; } /* Nouveau popup */ #newsletter-popup-container #infolettreOverlay { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0, 0.7); z-index: 800; opacity: 0; visibility: hidden; transition: opacity 500ms, visibility 0ms ease 500ms; } #newsletter-popup-container #infolettreBox { position: fixed; left: 50%; top: 50%; width: 500px; max-height: calc(100% - 40px); max-width: calc(100% - 40px); margin: 20px 0 0 0; line-height: 0; background: #f7f8f8; z-index: 801; visibility: hidden; transform: translate(-50%, -50%); opacity: 0; transition: opacity 500ms, margin 500ms, visibility 0ms ease 500ms; } @media only screen and (max-width: 600px) { #newsletter-popup-container #infolettreBox { padding-top: 50px; } } @media only screen and (max-width: 600px) { #newsletter-popup-container #infolettreBox > img { display: none; } } #newsletter-popup-container #infolettreBox > a { position: absolute; right: 15px; top: 15px; display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #f84c07; border-radius: 50%; -webkit-transition: background 300ms; transition: background 300ms; } #newsletter-popup-container #infolettreBox > a:hover { background: #898989; } #newsletter-popup-container #infolettreBox > a img { vertical-align: middle; } #newsletter-popup-container #infolettreBox > div { line-height: normal; padding: 40px 75px 50px 75px; text-align: center; } @media only screen and (max-width: 600px) { #newsletter-popup-container #infolettreBox > div { padding: 20px 30px 40px 30px; } } #newsletter-popup-container #infolettreBox > div h4 { margin-bottom: 10px; } #newsletter-popup-container #infolettreBox > div p { font-size: 17px; line-height: 23px; color: #898989; margin-bottom: 30px; } .show-infolettrePopup #newsletter-popup-container #infolettreOverlay { opacity: 1; visibility: visible; transition: opacity 500ms; } .show-infolettrePopup #newsletter-popup-container #infolettreBox { margin: 0; opacity: 1; visibility: visible; transition: opacity 500ms, margin 500ms; }