/* font-family : 'Proxima N W01 Cd Light'; font-family : 'Proxima N W01 Cd Reg'; font-family: 'Proxima N W01 Smbd'; font-family : 'Proxima N W01 Cd Bold'; font-family : 'ProximaNW01-CdBoldIt'; font-family : 'Open Sans', sans-serif; 400 et 700. green : #3aab3f; */ /* Initialisation */ * { padding:0; margin:0; border: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a, a:active, a:focus, input:focus, input, textarea:focus { outline: none; } :focus { outline: none; } ::-moz-focus-inner { border: 0; } ::-ms-clear { display: none; } table { border-collapse: collapse; } a { text-decoration: none; transition: color 200ms; -moz-transition: color 200ms; -webkit-transition: color 200ms; -o-transition: color 200ms; } ul { list-style-type: none; } h1,h2,h3,h4,h5,h6,b,strong { font-weight: normal; } em { font-style: normal; font-family: 'ProximaNW01-CdBoldIt', Arial, sans-serif; } 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; } ::selection { background: rgba(58, 171, 63, 0.3); color: #000; } ::-moz-selection { background: rgba(58, 171, 63, 0.3); color: #000; } ::-webkit-input-placeholder { color: #b3b5b8; } :-ms-input-placeholder { color: #b3b5b8 !important; } ::-moz-placeholder { color: #b3b5b8; } .preload * { transition: none !important; -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; } /** SHORTKEYS **/ .clearfloat { float: none !important; margin: 0 !important; clear: both; } .left { float: left; } .right { float: right; } .green { color: #3aab3f !important; } .red { color: red !important; } .nomargin { margin-bottom: 0 !important; } .hide { display: none; } /** MEDIA **/ .flag { position: absolute; left: -1000px; top: -1000px; display: none; width: 1px; height: 1px; } #dtMenuFlag { display: block; } #fullScrNavFlag { display: none; } .lg-view { display: none; } .sm-show { display: none; } /*** FRAMESET ***/ html { width: 100%; } body { width: 100%; font: normal 12px/12px 'Proxima N W01 Cd Reg', Arial, sans-serif; color: #000; overflow-y: scroll; } .container { position: relative; width: 100%; overflow: hidden; } .wrapper { position: relative; width: 1220px; margin: 0 auto; padding: 0 20px; transition: padding-bottom 300ms; -webkit-transition: padding-bottom 300ms; -moz-transition: padding-bottom 300ms; -o-transition: padding-bottom 300ms; } .backLink { color: #575a62; } .backLink { position: relative; float: right; display: block; padding: 0 0 0 15px; margin: 0 0 10px 0; font: normal 13px/15px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #575a62; text-transform: uppercase; letter-spacing: 1px; text-align: right; } .backLink img { position: absolute; left: 0; top: 2px; } .backLink .over { opacity: 0; filter: alpha(opacity=0); } .container .inLink { display: inline-block; margin: 0 0 10px 0; font: normal 13px/15px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #3aab3f; text-transform: uppercase; letter-spacing: 1px; } .container .inLink img { margin: 0 5px; } .container .boxed { position: relative; height: 44px; padding: 0 15px; margin: 0 0 20px 0; border: solid 1px #3aab3f; font-size: 12px; line-height: 44px; white-space: nowrap; z-index: 2; overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .container .boxedOver { position: absolute; left: 0; top: 0; width: 0; height: 44px; background: #3aab3f; z-index: -1; } /*** HEADER ***/ header { position: relative; } /*** TOPNAV AND NAVIG BAR ***/ .topNav { width: 100%; font: normal 14px/18px 'Proxima N W01 Cd Reg', Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; text-align: right; } .topNav p a { display: inline-block; padding: 0 10px; color: #fff; } .topNav strong { margin-left: 10px; font-size: 18px; font-family: 'Proxima N W01 Cd Bold', Arial, sans-serif; } .navToggle { float: right; width: 30px; height: 24px; padding: 32px 25px 24px 25px; text-align: center; cursor: pointer; background: #fff; background: rgba(255, 255, 255, 0.95); } .navToggle div { float: right; display: block; width: 30px; height: 2px; margin: 0 0 6px 0; background: #434343; transition: width 200ms; -webkit-transition: width 200ms; -moz-transition: width 200ms; -o-transition: width 200ms; } #dt-tNav { position: absolute; left: 0; top: 0; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); z-index: 2; } #dt-tNav .wrapper { padding: 24px 20px; } #dt-tNav a { color: #fff; } #fix-tNav { position: fixed; left: 0; top: -100px; color: #575a62; background: #fff; background: rgba(255, 255, 255, 0.94); z-index: 501; transition: top 300ms; -webkit-transition: top 300ms; -moz-transition: top 300ms; -o-transition: top 300ms; -webkit-box-shadow: 0 2px 7px 0 rgba(50, 50, 50, 0.2); -moz-box-shadow: 0 2px 7px 0 rgba(50, 50, 50, 0.2); box-shadow: 0 1px 8px 0 rgba(50, 50, 50, 0.2); } #fix-tNav .wrapper { padding: 31px 0; } #fix-tNav p { margin-right: 80px; } #fix-tNav #dfs { position: absolute; left: 20px; top: 0; display: block; height: 100%; width: 90px; line-height: 81px; } #fix-tNav #dfs img { vertical-align: middle; margin-top: -8px; } #fix-tNav a { color: #575a62; } #fix-tNav .navToggle { position: absolute; right: 0; top: 0; padding: 30px 25px 26px 25px; display: block; background: transparent; } /*** MAINNAV DT ***/ #homeLogo { position: relative; float: left; display: block; height: 28px; padding: 34px 0 18px 160px; font: normal 17px/14px 'ProximaNW01-CdBoldIt', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0; color: #fff; text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15); } #homeLogo img { position: absolute; left: 0; top: 0; } #homeLogo small { font-size: 13px; color: #dbdbdb; } #mainNavPos { position: absolute; left: 0; top: 66px; display: block; width: 100%; z-index: 101; } #mainNavPos > .expDfs { position: static; left: auto; bottom: auto; display: none; text-align: right; } #mainNavPos > .expDfs .wrapper { transition: opacity 250ms; -webkit-transition: opacity 250ms; -moz-transition: opacity 250ms; -o-transition: opacity 250ms; } #mainNav { position: relative; float: right; } #mainNav > ul li { float: left; } #mainNav > ul > li:first-child > a { padding-left: 35px; } #mainNav > ul > li:nth-child(3) > a { padding-right: 35px; } #mainNav > ul li.subNav { background: #000; background: rgba(0, 0, 0, 0.8); } #mainNav > ul li > a { display: block; padding: 1px 20px 0 15px; height: 79px; font: normal 15px/79px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 1px; } #mainNav > ul li.arrowOpen > a { color: #3aab3f; } #mainNav > ul li.arrowOpen .a-std { opacity: 0; filter: alpha(opacity=0); } #mainNav > ul li.arrowOpen .a-over { opacity: 1; filter: alpha(opacity=100); } #mainNav > ul li > a span { position: relative; display: inline-block; padding: 0 15px 0 0; } #mainNav > ul li > a span img { position: absolute; right: 0; top: 37px; } #mainNav > ul li .a-over { opacity: 0; filter: alpha(opacity=0); } #mainNav > ul li .a-scroll { display: none; } #mainNav ul ul { display: none; } #mainNav #contactLink { background: #3aab3f; background: rgba(58, 171, 63, 0.9); } #mainNav #contactLink a { padding: 1px 25px 0 25px; } #mainNav #expDfs { display: none; } /*** DT SUBNAV DROP ***/ .subNavBox { position: absolute; right: 0; top: 80px; width: 100%; height: 0; text-align: left; overflow: hidden; cursor: default; opacity: 0; transition: height 250ms, opacity 250ms; -webkit-transition: height 250ms, opacity 250ms; -moz-transition: height 250ms, opacity 250ms; -o-transition: height 250ms, opacity 250ms; } .subNavBox ul { position: absolute; left: 0; top: 0; display: block; width: 100%; padding: 30px 0 0 0; } .subNavBox ul li { float: left; width: 40%; margin: 0 5%; font: normal 15px/55px 'Proxima N W01 Cd Bold', Arial, sans-serif; text-transform: uppercase; } .subNavBox ul li a { position: relative; display: block; border-bottom: solid 1px #abaaac; color: #2f2f2f; background: url('../images/icones/arrow-rg.png') no-repeat 95% center; background-size: auto 10px; } .subNavBox ul li a img { position: absolute; right: 5px; top: 22px; } .expDfs { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 60px; font: normal 12px/60px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 1px; background: #3aab3f; background: rgba(58, 171, 63, 0.9); } .expDfs img { margin: -3px 25px 0 15px; vertical-align: middle; } #dt-secDrop { background: url('../images/header/bg-bdrop.png') repeat-x top center; } #dt-secDrop ul { display: none; } #dt-secDrop ul li a { color: #fff; border-bottom-color: #363638; } .show-secDrop #dt-secDrop { height: 314px; opacity: 1; filter: alpha(opacity=100); } /*** SCROLL AND TCH-DEVICE MENU ***/ .show-smMenu #dt-tNav { display: none; } .show-smMenu #fix-tNav { top: 0; transition: top 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: top 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: top 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: top 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } .show-smMenu #homeLogo { display: none; } .show-smMenu #mainNavPos { position: fixed; left: 0; top: 80px; display: none; background: #000; background: rgba(0, 0, 0, 0.9); z-index: 201; } .show-smMenu #mainNavPos > .expDfs { display: block; } .show-smMenu .subNavBox { display: none; } .show-smMenu #mainNav { float: none; padding: 40px 0 30px 0; text-align: right; } .show-smMenu #mainNav ul li { float: none; margin: 0 0 10px 0; } .show-smMenu #mainNav > ul > li:first-child > a { padding-left: 25px; } .show-smMenu #mainNav > ul > li:nth-child(3) > a { padding-right: 25px; } .show-smMenu #mainNav > ul li.subNav { background: transparent; } .show-smMenu #mainNav > ul li > a { display: inline-block; width: 250px; height: auto; padding: 0 25px; line-height: 40px; text-align: right; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .show-smMenu #mainNav > ul li.subOpen > a { color: #3aab3f; } .show-smMenu #mainNav > ul li > a span img { top: 15px; transition: transform 200ms; -webkit-transition: -webkit-transform 200ms; -moz-transition: -moz-transform 200ms; -o-transition: -o-transform 200ms; } .show-smMenu #mainNav > ul li.subOpen > a span img { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); } .show-smMenu #mainNav > ul li .a-std { display: none; } .show-smMenu #mainNav > ul li .a-scroll { display: block; opacity: 1; filter: alpha(opacity=100); } .show-smMenu #mainNav > ul li.arrowOpen .a-over { opacity: 0; filter: alpha(opacity=0); } .show-smMenu #mainNav ul ul { display: block; max-height: 0; overflow: hidden; opacity: 0; filter: alpha(opacity=0); transition: max-height 300ms ease, opacity 300ms ease 50ms; -webkit-transition: max-height 300ms ease, opacity 300ms ease 50ms; -moz-transition: max-height 300ms ease, opacity 300ms ease 50ms; -o-transition: max-height 300ms ease, opacity 300ms ease 50ms; } .show-smMenu #mainNav ul li.subOpen ul { max-height: 180px; opacity: 1; filter: alpha(opacity=100); transition: max-height 300ms ease, opacity 150ms ease 0ms; -webkit-transition: max-height 300ms ease, opacity 150ms ease 0ms; -moz-transition: max-height 300ms ease, opacity 150ms ease 0ms; -o-transition: max-height 300ms ease, opacity 150ms ease 0ms; } .show-smMenu #mainNav ul ul li { margin-bottom: 0; } .show-smMenu #mainNav ul ul li a { padding-right: 40px; font-family: 'Proxima N W01 Cd Reg', Arial, sans-serif; line-height: 30px; color: #c4c4c4; text-transform: none; white-space: nowrap; } .show-smMenu #mainNav #contactLink { margin-bottom: 0; background: transparent; } .show-smMenu #mainNav #contactLink a { padding-right: 40px; } .show-smMenu #mainNav > ul .anim { opacity: 0; filter: alpha(opacity=0); transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -o-transform: translateY(25px); transition: transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 350ms; -webkit-transition: -webkit-transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 250ms; -moz-transition: -moz-transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 250ms; -o-transition: -o-transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 250ms; } .show-smMenu #mainNav > ul .anim.start { opacity: 1; filter: alpha(opacity=100); transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); } .smNavOpen #smNavToggle div { width: 20px; background: #3aab3f; } .smNavOpen #smNavToggle .midBar { width: 30px; } /*** FOOTER ***/ footer { padding-top: 4%; color: #fff; background: #2f2f2f; } footer > .wrapper { padding-bottom: 6%; } #f-dfs { position: absolute; left: 20px; top: -20px; display: block; width: 78px; height: 46px; } #f-dfs img { position: absolute; left: 0; top: 0; } #f-cnx { position: absolute; left: 20px; bottom: 15px; padding: 0 145px 0 0; font: normal 10px/30px 'Open Sans', Arial, sans-serif; color: #c4c4c4; } #f-cnx img { position: absolute; right: 0; top: 0; } #chat { position: absolute; right: 20px; bottom: 0; width: 125px; height: 45px; font: normal 12px/45px 'Proxima N W01 Cd Bold', Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; background: #3aab3f; cursor: pointer; transition: all 200ms; -webkit-transition: all 200ms; -moz-transition: all 200ms; -o-transition: all 200ms; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } footer nav { width: 100%; padding: 0 0 0 150px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } footer nav ul li { margin: 0 0 10px 0; font: normal 14px/16px 'Proxima N W01 Cd Reg', Arial, sans-serif; letter-spacing: 1px; } footer nav ul li a { color: #c4c4c4; } footer .dt-view ul { float: left; width: 23%; } footer .dt-view ul li:first-child, footer .lg-view ul li { margin-bottom: 15px; font-family: 'Proxima N W01 Cd Bold', Arial, sans-serif; text-transform: uppercase; } footer .dt-view ul li:first-child a, footer .lg-view ul li a { color: #f7fbff; } #subFooter { background: #000; } #subFooter .wrapper { padding: 30px 20px; font: normal 10px/14px 'Open Sans', Arial, sans-serif; color: #c4c4c4; text-transform: uppercase; letter-spacing: 1px; } #subFooter p { float: left; opacity: 0.5; filter: alpha(opacity=50); } #subFooter a { float: right; display: block; width: 195px; color: #c4c4c4; opacity: 0.5; filter: alpha(opacity=50); } #subFooter a strong { font-weight: 700; letter-spacing: 1px; } #subFooter br { display: none; } /*** ASIDE ***/ aside { float: left; width: 25%; } aside ul li { margin: 0 0 10px 0; font: normal 16px/20px 'Proxima N W01 Cd Reg', Arial, sans-serif; letter-spacing: 1px; } aside ul li a, aside ul li span { position: relative; display: inline-block; padding: 5px 0; color: #6d6d6d; overflow: hidden; transition: padding 300ms, color 200ms; -webkit-transition: padding 300ms, color 200ms; -moz-transition: padding 300ms, color 200ms; -o-transition: padding 300ms, color 200ms; } aside ul li a img, aside ul li span img { position: absolute; left: -20px; top: 9px; filter: alpha(opacity=0); transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms; } aside ul .active a { padding-left: 15px; font-family: 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #3aab3f; cursor: default; } aside ul .active a img { left: 0; opacity: 1; filter: alpha(opacity=100); } aside ul .selected span { padding-left: 15px; font-family: 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #3aab3f; cursor: default; } aside ul .selected span img { left: 0; opacity: 1; filter: alpha(opacity=100); } /*** BANNER ***/ #banner { position: relative; height: 450px; margin-bottom: 50px; background-repeat: no-repeat; background-position: center center; background-size: cover; transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms; } #bannerShadow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/banner/bannershadow.png') repeat-x center top; } #postuler #banner { background-image: url('../images/banner/postuler.jpg'); } #emploi #banner { background-image: url('../images/banner/emploi.jpg'); } #section #banner { background-image: url('../images/banner/section.jpg'); } #presse #banner { background-image: url('../images/banner/revue-presse.jpg'); background-position: left center; } #logistique #banner { background-image: url('../images/banner/logistique.jpg'); background-position: left center; } #transportsec #banner { background-image: url('../images/banner/transport-sec.jpg'); } #transportref #banner { background-image: url('../images/banner/transport-refrigere.jpg'); background-position: right bottom; } #regions #banner { background-image: url('../images/banner/regions-desservies.jpg'); background-position: center bottom; } #carburant #banner { background-image: url('../images/banner/economie-carburant.jpg'); background-position: right bottom; } #refrigeration #banner { background-image: url('../images/banner/systeme-refrigeration.jpg'); } #efficacite #banner { background-image: url('../images/banner/efficacite-logistique.jpg'); } #atelier #banner { background-image: url('../images/banner/atelier-mecanique.jpg'); } #formation #banner { background-image: url('../images/banner/formation-securite.jpg'); } #apropos #banner { background-image: url('../images/banner/apropos.jpg'); } #devdurable #banner { background-image: url('../images/banner/developpement-durable.jpg'); } #team #banner { background-image: url('../images/banner/equipe.jpg'); background-position: right bottom; } #new #banner { background-image: url('../images/banner/nouvelle.jpg'); background-position: right bottom; } #contact #banner { background-image: url('../images/banner/contact.jpg'); } #event #banner { background-image: url('../images/banner/evenement.jpg'); background-position: right bottom; } #tracker #banner { background-image: url('../images/banner/tracker.jpg'); background-position: center bottom; } #error #banner { background-image: url('../images/banner/apropos.jpg'); } /*** CONTENT ***/ #breadcrumps { margin: 0 0 60px 0; font: normal 13px/13px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #575a62; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; } #breadcrumps span { margin: 0 10px; } #breadcrumps .relative { position: relative; margin: 0; } #breadcrumps .relative span { position: absolute; left: 0; top: 1px; margin: 0; opacity: 0; filter: alpha(opacity=0); transition: opacity 400ms; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; -o-transition: opacity 400ms; } #breadcrumps .relative .selected { opacity: 1; filter: alpha(opacity=100); transition: opacity 600ms ease 400ms; -webkit-transition: opacity 600ms ease 400ms; -moz-transition: opacity 600ms ease 400ms; -o-transition: opacity 600ms ease 400ms; } #breadcrumps a { display: inline-block; color: #575a62; } #breadcrumps a:first-child { position: relative; width: 15px; height: 12px; padding-left: 0; } #breadcrumps a:first-child img { position: absolute; left: 0; top: 0; } .content { position: relative; padding: 0 0 50px 0; } .content h1 { max-width: 95%; margin: 0 0 65px 0; font: normal 44px/44px 'Proxima N W01 Cd Light', Arial, sans-serif; color: #575a62; } .content h2 { margin: 0 0 25px 0; font: normal 24px/28px 'Proxima N W01 Cd Reg', Arial, sans-serif; color: #3aab3f; } .content h3 { margin: 0 0 10px 0; font: normal 32px/32px 'Proxima N W01 Cd Light', Arial, sans-serif; color: #575a62; } .content h4 { font: normal 20px/20px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #6d6d6d; } .content h5 { font: normal 22px/26px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #575a62; } .content h1 strong, .content h2 strong, .content h3 strong { font-family: 'Proxima N W01 Cd Bold', Arial, sans-serif; } .content p { margin: 0 0 25px 0; font: 400 15px/25px 'Open Sans', Arial, sans-serif; color: #6d6d6d; } .content hr { display: inline-block; width: 60px; height: 1px; margin: 0 0 20px 0; background: #3aab3f; } .content .date { font: normal 13px/15px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #3aab3f; text-transform: uppercase; letter-spacing: 1px; } .content .nb { margin: 0 0 45px 0; font: normal 13px/16px 'ProximaNW01-CdBoldIt', Arial, sans-serif; } article { margin: 0 0 60px 0; } #map1 { position: absolute; right: 0; top: 50px; } #map2 { position: absolute; right: 0; top: -100px; } #mockupDfsTracker { position: relative; min-height: 290px; margin: 0 0 0 0; padding: 70px 0 0 195px; } #mockupDfsTracker > img { position: absolute; left: 0; top: 0; } #mockupCt { position: relative; max-width: 390px; z-index: 2; } #mockupCt img { max-width: 80%; margin: 0 0 20px 0; } #mockupCt #check { position: absolute; left: -60px; top: -35px; z-index: -1; } #mockupCt p { font: 300 24px/30px 'Open Sans', Arial, sans-serif; color: #6d6d6d; } #shareIco { position: absolute; right: 340px; top: 0; cursor: pointer; } #shareIco .ico { display: inline-block; width: 38px; height: 38px; margin: 0 0 0 10px; line-height: 38px; border: solid 2px #e7ebef; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #shareIco .ico img { vertical-align: middle; } /*** DYNAMIC ***/ .content .dynamic > :first-child { margin-top: 0 !important; } .content .dynamic h2 { margin: 40px 0 30px 0; font: normal 24px/24px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #3aab3f; } .content .dynamic h3 { margin: 25px 0 25px 0; font: normal 20px/20px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #3aab3f; } .content .dynamic h4, .content .dynamic h5, .content .dynamic h6 { margin: 25px 0 25px 0; font: normal 20px/20px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #575a62; } .content .dynamic a { color: #3aab3f; } .content .dynamic strong { font-weight: 700; } .content .dynamic ul { margin: 25px 0 30px 25px; } .content .dynamic ol { margin: 25px 0 30px 35px; } .content .dynamic li { margin: 0 0 7px 0; font: 400 15px/22px 'Open Sans', Arial, sans-serif; color: #6d6d6d; } .content .dynamic ul li { position: relative; padding: 0 0 0 10px; } .content .dynamic ul li:before { position: absolute; left: -10px; top: 2px; font-size: 22px; content: '\2022'; color: #3aab3f; } /*** HOME ***/ #home #banner { display: none; } #homeBanner { position: relative; margin: 0 0 100px 0; background: url('../images/banner/home.jpg') no-repeat center bottom; background-size: cover; } .lg-shadow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/banner/shadow-large.png') no-repeat center top; background-size: cover; } .bannerDesc h1 { margin: 0 0 30px 0; font: normal 72px/72px 'Proxima N W01 Cd Light', Arial, sans-serif; color: #fff; opacity: 0; filter: alpha(opacity=0); transform: translateX(150px); -webkit-transform: translateX(150px); -moz-transform: translateX(150px); -o-transform: translateX(150px); } .bannerDesc h1 strong { font-family: 'Proxima N W01 Cd Bold', Arial, sans-serif; } .bannerDesc { display: inline-block; margin: 80px 0 0 0; vertical-align: middle; line-height: normal; } .bannerDesc .boxed { margin: 0 10px 10px 0; color: #fff; border-color: #fff; opacity: 0; filter: alpha(opacity=0); transform: translateX(150px); -webkit-transform: translateX(150px); -moz-transform: translateX(150px); -o-transform: translateX(150px); } .bannerDesc .boxedOver { background: #fff; } #bannerLink { position: absolute; right: 20px; bottom: 20px; display: block; width: 120px; font: normal 12px/16px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #fff; text-transform: uppercase; text-align: center; letter-spacing: 1px; } /*** .slide1 ***/ .bannerDesc h1 { opacity: 1; filter: alpha(opacity=100); transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transition: transform 900ms cubic-bezier(0.23, 1, 0.32, 1) 200ms, opacity 800ms ease 200ms; -webkit-transition: -webkit-transform 900ms cubic-bezier(0.23, 1, 0.32, 1) 200ms, opacity 800ms ease 200ms; -moz-transition: -moz-transform 900ms cubic-bezier(0.23, 1, 0.32, 1) 200ms, opacity 800ms ease 200ms; -o-transition: -o-transform 900ms cubic-bezier(0.23, 1, 0.32, 1) 200ms, opacity 800ms ease 200ms; } /*** .slide2 ***/ .bannerDesc .boxed { opacity: 1; filter: alpha(opacity=100); transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transition: transform 750s cubic-bezier(0.23, 1, 0.32, 1) 350ms, opacity 650ms ease 350ms; -webkit-transition: -webkit-transform 750s cubic-bezier(0.23, 1, 0.32, 1) 350ms, opacity 650ms ease 350ms; -moz-transition: -moz-transform 750s cubic-bezier(0.23, 1, 0.32, 1) 350ms, opacity 650ms ease 350ms; -o-transition: -o-transform 750s cubic-bezier(0.23, 1, 0.32, 1) 350ms, opacity 650ms ease 350ms; } #thumbsCol { position: absolute; left: 20px; top: 0; width: 640px; z-index: 1; } .homeThb { position: relative; float: left; display: block; width: 50%; line-height: 0; } .homeThb > img { width: 100%; } .homeThb h1 { position: absolute; left: 25px; top: 50%; margin: -66px 0 0 0; } .homeThb h1 br { display: block !important; } .thbDesc { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 35px; background: rgba(0, 0, 0, 0.3); box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .thbDesc > div { display: inline-block; margin-top: 30%; line-height: normal; vertical-align: middle; } .thbDesc h2 { margin-bottom: 15px; line-height: 24px; color: #fff; } .thbDesc hr { margin-bottom: 15px; background: #fff; } .thbDesc .inLink { display: block; margin: 0; color: #fff; } #homeNavTitle { margin-left: 730px; } #homeNav { margin: 0 0 100px 730px; } #homeNav ul { margin-bottom: 50px; } #homeNav ul li { border-bottom: solid 1px #cbced2; font: normal 16px/18px 'Proxima N W01 Cd Bold', Arial, sans-serif; } #homeNav ul li:first-child { padding: 20px 25px 20px 0; font-size: 14px; line-height: 14px; text-transform: uppercase; color: #575a62; } #homeNav ul li a { position: relative; display: block; padding: 20px 25px 20px 0; color: #3aab3f; } #homeNav ul li a img { position: absolute; right: 10px; top: 50%; margin: -5px 0 0 0; } #homeNav ul li a .over { opacity: 0; filter: alpha(opacity=0); } #truck { position: absolute; right: -330px; bottom: -150px; } .leftCol { position: absolute; left: 20px; top: 0; width: 640px; } .rightCol { margin-left: 730px; padding: 125px 0; } #greenBar { margin: 0 0 80px 0; background: #3aab3f; overflow: hidden; } #greenBar .leftCol > img { float: left; width: 50%; } #greenBar .leftCol p { font: italic 16px/25px Georgia, Arial, sans-serif; color: #2f2f2f; } #greenBar .leftCol .whiteBox { position: relative; float: left; width: 50%; height: 101%; padding: 240px 30px 0 30px; background: #fff; background: rgba(255, 255, 255, 0.9); box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #greenBar .whiteBox .inLink { position: relative; display: inline-block; padding-right: 20px; } #greenBar .whiteBox .inLink img { position: absolute; right: 0; top: 2px; } #greenBar .whiteBox .inLink .over { opacity: 0; filter: alpha(opacity=0); } #greenBar .rightCol h2 { padding-bottom: 30px; border-bottom: solid 1px #b0ddb2; color: #fff; } #greenBar .rightCol p { color: #fff; } #greenBar .rightCol .boxed { color: #fff; border-color: #fff; } #greenBar .rightCol .boxedOver { background: #fff; } #leftSideDeco { position: absolute; right: 100%; top: 0; height: 100%; background: url('../images/content/bureau.jpg') no-repeat right center; background-size: cover; opacity: 0.3; filter: alpha(opacity=30); } #subCt { min-height: 340px; } #subCt .leftCol { width: 550px; margin-bottom: 50px; } #subCt .rightCol { padding: 0; margin-bottom: 50px; } #subCt .newLink { display: block; padding-top: 20px; border-top: solid 1px #d2d5d8; } #subCt .newLink h2 { color: #575a62; } #subCt .allNews { position: relative; float: right; padding-right: 20px; } #subCt .allNews img { position: absolute; right: 0; top: 1px; } #subCt .allNews .over { opacity: 0; filter: alpha(opacity=0); } #subCt h3 { margin-bottom: 50px; } #home .date { display: inline-block; } #bannervideo { visibility: visible; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; } /*** RECRUTEMENT ***/ #recrut #banner { display: none; } #recrutBanner { position: relative; height: 700px; margin: 0 0 50px 0; z-index: 1; transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms; } #recrutBanner .wrapper { height: 100%; line-height: 700px; transition: line-height 300ms; -webkit-transition: line-height 300ms; -moz-transition: line-height 300ms; -o-transition: line-height 300ms; } #recrutBanner .cycle-slideshow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } #recrutBanner .recrutSlide { position: relative; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; } #recrutBanner .inLink { margin: 0 10px 10px 0; } .bannerDesc .greenBtn { background: #3aab3f; border-color: #3aab3f; } .bannerDesc .greenBtn .boxedOver { background-color: #fff; } #recrutBanner #recrutSlide1 { background-image: url('../images/banner/recrutement1.jpg'); background-position: right top; } #recrutBanner #recrutSlide2 { background-image: url('../images/banner/recrutement2.jpg'); background-position: center top; } #recrutBanner #recrutSlide3 { background-image: url('../images/banner/recrutement3.jpg'); background-position: center top; } #colLeft { float: left; width: 480px; } #recrut .content h1 { margin-bottom: 20px; } #colLeft p { margin-bottom: 30px; } #colRight { float: right; width: 460px; } #colRight .formList { margin-bottom: 30px; } #colRight .formList > li { margin-bottom: 10px; } #picBar { margin-bottom: 50px; } .picBloc { position: relative; float: left; width: 25%; line-height: 0; overflow: hidden; } .picBloc img { width: 100%; } .blocDesc { position: absolute; left: 0; top: 0; width: 100%; height: 65%; padding-top: 35%; background: rgba(0, 0, 0, 0.6); } .blocDesc > div { width: 80%; padding: 0 10%; } .blocDesc h2 { margin-bottom: 15px; color: #fff; } .blocDesc hr { margin-bottom: 10px; background: #fff; } .blocDesc p { margin: 0; color: #fff; } .bloctemoignages { position: relative; } .bloctemoignages h1 { margin-bottom: 0; } .cycleSlide { position: relative; height: 500px; width: 100%; opacity: 0.01 !important; transition: opacity 500ms ease-out; -webkit-transition: opacity 500ms ease-out; -moz-transition: opacity 500ms ease-out; -o-transition: opacity 500ms ease-out; } .cycleSlide.cycle-slide-active { opacity: 1 !important; transition: opacity 800ms ease-in; -webkit-transition: opacity 800ms ease-in; -moz-transition: opacity 800ms ease-in; -o-transition: opacity 800ms ease-in; } .cycleSlide .tagline { position: absolute; left: 0; bottom: 0; width: 510px; height: 50px; padding: 20px 0; font: 400 italic 19px/25px Georgia, Arial, sans-serif; text-align: center; color: #fff; background: #3aab3f; } .cycleSlide > img { position: absolute; left: 0; bottom: 90px; } .slideDesc { max-width: 450px; padding-top: 100px; margin: 0 0 0 620px; } .slideDesc .inLink { position: relative; padding-right: 20px; } .slideDesc .inLink img { position: absolute; right: 0; top: 1px; } .slideDesc .over { opacity: 0; filter: alpha(opacity=0); } #recrut .cycleNext { position: absolute; right: 20px; top: 50%; display: block; width: 20px; height: 40px; margin: -20px; opacity: 0.3; filter: alpha(opacity=30); box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #recrut .slideDesc h1 { margin-bottom: 5px; } .blocregion { margin: 0 0 80px 0; height: 520px; line-height: 0; background: url('../images/content/joliette.jpg') no-repeat center center; } #regionTab { position: absolute; right: 30px; top: 60px; display: block; height: 380px; width: 325px; padding: 80px 115px 0 80px; background-color: #000; background-color: rgba(0, 0, 0, 0.6); } #regionTab h3 { color: #fff; } #regionTab h4 { margin-bottom: 20px; color: #fff; } #regionTab p { color: #d6d6d6; } #regionTab .boxed { border-color: #fff; color: #fff; } #regionTab .boxedOver { background: #fff; } #jobLayer div .inLink { position: relative; padding-right: 20px; margin-bottom: 50px; } #jobLayer div .inLink img { position: absolute; right: 0; top: 2px; } #jobLayer div .inLink .over { opacity: 0; filter: alpha(opacity=0); } #jobLayer .jobBloc { margin-bottom: 40px; } /*** MAINPAGES ***/ .mainPage a { float: left; display: block; width: 30%; max-width: 320px; margin: 0 25px 40px 0; color: #6d6d6d; } .mainPage a h4 { margin-bottom: 5px; height: 20px; } .mainPic { position: relative; margin: 0 0 20px 0; line-height: 0; } .mainPic img { width: 100%; } .mainPage .shadow { position: absolute; left: 0; top: 0; display: none; width: 100%; height: 100%; background: #000; opacity: 0.2; filter: alpha(opacity=20); } /*** SELECTIVEAREA ***/ #selectedArea { position: relative; float: left; width: 75%; max-width: 680px; z-index: 2; } .resizing #selectedArea { transition: height 300ms ease-in-out; -webkit-transition: height 300ms ease-in-out; -moz-transition: height 300ms ease-in-out; -o-transition: height 300ms ease-in-out; } #selectedArea h1 { margin-bottom: 40px; } #selectedArea p.xmargin { margin-bottom: 50px; } .selectiveContent { position: absolute; left: 0; top: 0; display: none; width: 100%; opacity: 0; filter: alpha(opacity=0); transform: translateX(30px); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -o-transform: translateX(30px); } .selectCt { display: block; opacity: 1; filter: alpha(opacity=100); transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transition: transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 400ms; -webkit-transition: -webkit-transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 400ms; -moz-transition: -moz-transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 400ms; -o-transition: -o-transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 400ms; } .selectCt.transit { opacity: 0; filter: alpha(opacity=0); transform: translateX(100px); -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -o-transform: translateX(100px); transition: transform 350ms, opacity 350ms; -webkit-transition: -webkit-transform 350ms, opacity 350ms; -moz-transition: -moz-transform 350ms, opacity 350ms; -o-transition: -o-transform 350ms, opacity 350ms; } .selectiveContent .col { width: 45%; max-width: 320px; } .selectiveContent .xmargin { max-width: 650px; } /*** INNOVATION ***/ .innovation #selectedArea { min-height: 800px; } .innovation .cycleBox { position: relative; min-height: 280px; margin: 0 0 70px 0; } .innovation .cycle-slideshow { width: 100%; padding-bottom: 20px; text-align: center; } .innovation .cycle-slideshow > div { width: 100%; opacity: 0.01 !important; transition: opacity 500ms ease-out; -webkit-transition: opacity 500ms ease-out; -moz-transition: opacity 500ms ease-out; -o-transition: opacity 500ms ease-out; } .innovation .cycle-slideshow .cycle-slide-active { opacity: 1 !important; transition: opacity 500ms ease-in; -webkit-transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; -o-transition: opacity 500ms ease-in; } .innovation .cycle-slideshow .cyclePic { width: 100%; height: 225px; margin-bottom: 20px; line-height: 225px; } .innovation .cycle-slideshow .cyclePic img { max-width: 100%; vertical-align: middle; } .innovation .cycle-slideshow p { margin: 0; font: 400 16px/18px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #3aab3f; } .innovation .cycleNext { position: absolute; right: -30px; top: 50%; display: block; width: 20px; height: 40px; margin: -20px; opacity: 0.3; filter: alpha(opacity=30); box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .innovation .cPager { position: absolute; left: 0; top: 100%; width: 100%; z-index: 101; text-align: center; } .innovation .cPager li { display: inline-block; margin: 0 7px; } .innovation .cPager li a { display: block; width: 10px; height: 10px; background: #aeb0b4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .innovation .cPager .cycle-pager-active a { background: #3aab3f !important; cursor: default; } /*** SERVICES ***/ #regionsArea { margin-bottom: 30px; } #regionsArea div p { margin-bottom: 15px; } #regionsArea h1 { font-size: 32px; line-height: 34px; max-width: none; color: #575a62; } #regionsArea div { margin: 0 35px 30px 0; display: inline-block; width: 180px; border-bottom: solid 1px #d2d5d8; } #regionsArea #cnd { margin-top: 40px; } .accreditations p a { margin: 0 20px 0 0; } /*** EMPLOIS ***/ .jobBloc { float: left; display: block; width: 40%; margin: 0 10% 60px 0; } .jobBloc:nth-child(odd) { clear: both; } .jobBloc .date span { margin: 0 10px; } .jobBloc .date .cat { margin: 0; color: #6d6d6d; } #emploi .content .wrapper { width: 900px; padding: 0 340px 0 20px; } #emploi .content h1 { max-width: none; margin-right: 150px; } #emploi .date { margin-bottom: 10px; } #emploi .boxed { margin: 10px 0 40px 0; } #fastCard img { margin: 0 10px 0 0; vertical-align: middle; } #fastCard p { margin-bottom: 10px; } #fastCard p strong { font-weight: 700; } #fastCard ul { margin-bottom: 20px; } #fastCard ul li { margin-bottom: 5px; } #emploi #fastCard .inLink { margin-bottom: 0; } /*** POSTULER ***/ #postuler .smargin { margin-bottom: 20px; } #postuler .selectiveContent hr { margin-bottom: 30px; } #postuler aside li { opacity: 0.5; filter: alpha(opacity=50); } #postuler aside li.selected { opacity: 1; filter: alpha(opacity=0); } #postuler .nextForm { margin-top: 10px; } form { display: block; } #postuler form h4 { margin: 0 0 25px 0; color: #3aab3f; } #postuler form p { color: #575a62; } #postuler form p.nb { margin-bottom: 10px; } form fieldset { margin: 0 0 30px 0; border-bottom: solid 1px #d8d8d8; } form fieldset > div { margin: 0 0 20px 0; } form fieldset div.sm { width: 100%; max-width: 124px; } form fieldset div.md { width: 100%; max-width: 220px; } label { display: block; margin: 0 0 10px 0; font: normal 15px/20px 'Proxima N W01 Cd Smbd', Arial, sans-serif; color: #3aab3f; } label strong { font-size: 18px; font-family: 'Proxima N W01 Cd Bold', Arial, sans-serif; } /* Select */ div.fancy-select { position: relative; float: left; display: block; width: 100%; margin: 0 0 35px 0; font: normal 14px/15px 'Proxima N W01 Smbd', Arial, sans-serif; color: #575a62; } div.nomarginfancyselect .fancy-select { margin-bottom: 20px; } .noBotMargin div.fancy-select { margin-bottom: 0; } .dual div.fancy-select { width: 45%; margin-right: 5%; } div.fancy-select.disabled { opacity: 0.5; } div.fancy-select select:focus + div.trigger { color: #575a62; } div.fancy-select div.trigger { position: relative; width: 100%; max-width: 500px; padding: 15px 50px 15px 20px; color: #b3b5b8; background: #f2f2f3 url('../images/content/bg-select.gif') repeat-y right center; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; transition: all 240ms ease-out; -webkit-transition: all 240ms ease-out; -moz-transition: all 240ms ease-out; -o-transition: all 240ms ease-out; } div.fancy-select div.trigger.selected { color: #575a62; } div.fancy-select div.trigger:after { position: absolute; top: 20px; right: 16px; display: block; content: ""; width: 14px; height: 9px; background: url('../images/icones/arrow-bw.png') no-repeat center center; background-size: 7px 5px; } div.fancy-select div.trigger.open { background-color: #def1df !important; box-shadow: none; } div.fancy-select ul.options { position: absolute; top: 40px; left: 0; width: 100%; max-width: 500px; max-height: 185px; font-family: 'Proxima N W01 Cd Reg', Arial, sans-serif; background: #f2f2f3; visibility: hidden; z-index: 350; overflow: auto; opacity: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; } div.fancy-select ul.options.open { visibility: visible; top: 50px; opacity: 1; transition: opacity 300ms ease-out, top 300ms ease-out; -webkit-transition: opacity 300ms ease-out, top 300ms ease-out; -moz-transition: opacity 300ms ease-out, top 300ms ease-out; -o-transition: opacity 300ms ease-out, top 300ms ease-out; } div.fancy-select ul.options.overflowing { top: auto; bottom: 40px; transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out; -webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out; -moz-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out; -o-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out; } div.fancy-select ul.options.overflowing.open { top: auto; bottom: 50px; transition: opacity 300ms ease-out, bottom 300ms ease-out; -webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out; -moz-transition: opacity 300ms ease-out, bottom 300ms ease-out; -o-transition: opacity 300ms ease-out, bottom 300ms ease-out; } div.fancy-select ul.options li { padding: 10px 20px; cursor: pointer; transition: all 200ms ease-out; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; } div.fancy-select ul.options li:first-child { padding-top: 15px; border: none; } div.fancy-select ul.options li:last-child { padding-bottom: 15px; border: none; } div.fancy-select ul.options li.selected { font-family: 'Proxima N W01 Cd Bold', Arial, sans-serif; } div.fancy-select ul.options li.hover { background: #e2e2e2; } /* date expiration */ .text > div.trio { max-width: none; } .trio div.fancy-select { width: 30%; margin-right: 3%; max-width: 150px; } /* Radio AND CheckBox */ .radio label, .checkbox label { position: relative; display: inline-block; padding: 0 0 0 25px; margin: 0 25px 10px 0; color: #6d6d6d; cursor: pointer; } .radio label:before, .checkbox label:before { position: absolute; left: 0; display: inline-block; content: ""; width: 13px; height: 13px; border: solid 2px #c3c4c7; z-index: 2; transition: border 200ms; -webkit-transition: border 200ms; -moz-transition: border 200ms; -o-transition: border 200ms; } /* Radio */ .radio label:before { top: 0; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } input[type=radio] { display: none; } input[type=radio]:checked + label:before { border-color: #3aab3f; background: url(../images/icones/radio.jpg) no-repeat center center; background-size: 13px 13px; } /* Checkbox */ .checkbox label:before { top: 1px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .checkbox.w150 label { width: 150px; } .checkbox.w80 label { width: 80px; } .checkbox.w40 label { width: 40px; } .checkbox.fw50 label { min-width: 40%; } .checkbox.fw label { display: block; } input[type=checkbox] { display: none; } input[type=checkbox]:checked + label:before { content: "\2713"; border-color: #3aab3f; font-size: 20px; line-height: 10px; font-family: arial; font-weight: bold; color: #3aab3f; } /* Text */ .text > div { float: left; display: block; width: 100%; max-width: 275px; margin: 0 25px 0 0; } input[type=text] { display: block; width: 100%; height: 45px; padding: 0 20px; margin: 0 0 20px 0; font: 400 14px/45px 'Proxima N W01 Smbd', Arial, sans-serif; color: #575a62; background: #f2f2f3; cursor: pointer; overflow: hidden; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; transition: all 250ms ease-out; -webkit-transition: all 250ms ease-out; -moz-transition: all 250ms ease-out; -o-transition: all 250ms ease-out; } input[type=text]:focus { background-color: #f7f7f7 !important; -webkit-box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.15) !important; -moz-box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.15) !important; box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.15) !important; } /* Area */ textarea { display: block; width: 100%; height: 100px; max-width: 500px; padding: 10px 20px; font: 400 15px/20px 'Proxima N W01 Smbd', Arial, sans-serif; color: #575a62; background: #f2f2f3; cursor: pointer; overflow: hidden; resize: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; transition: all 250ms ease-out; -webkit-transition: all 250ms ease-out; -moz-transition: all 250ms ease-out; -o-transition: all 250ms ease-out; } textarea:focus { background-color: #f7f7f7 !important; -webkit-box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.15) !important; -moz-box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.15) !important; box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.15) !important; } /* Questions */ .formList { display: block; margin: 0 0 0 15px; clear: both; } .formList > li { position: relative; margin: 0 0 25px 0; font: 400 15px/20px 'Open Sans', Arial, sans-serif; color: #575a62; } .formList > li:last-child { margin-bottom: 10px; } .formList > li:before { position: absolute; left: -15px; top: 0; font-size: 25px; content: '\2022'; color: #3aab3f; } .formList > li strong { font-weight: 700; color: #3aab3f; } .formList > li small { font-size: 13px; font-family: 'ProximaNW01-CdBoldIt', Arial, sans-serif; color: #3aab3f; } .formList > li a.note { color: #3aab3f; } .formList > li a.note:hover { text-decoration:underline; } .formList > li p { margin: 15px 0 10px 0; } .formList > li > div { margin: 15px 25px 0 0; } .formList > li > div.select { float: left; } .formList > li > label { display: block; font: normal 15px/20px 'Proxima N W01 Smbd', Arial, sans-serif; color: #575a62; } .formList > li .formList { /* display: none; */ margin-left: 0; } .formList > li .formList li:before { display: none; } .formlink:hover { color: #5acb5f; } /* ie8Hack */ .ie label:before { display: none !important; } .ie input[type=radio] { display: inline-block; } /* Invalid */ form .invalid div.fancy-select div.trigger { color: #ed1c24 !important; background-color: #f6dbdb !important; } form .invalid label { color: #ed1c24 !important; } form .invalid input[type=text] { background-color: #f6dbdb !important; } /*** APROPOS ***/ #logos { margin: 0 0 50px 0; } #logos img { display: inline-block; margin: 0 22px 30px 22px; vertical-align: middle; } #logos img:first-of-type { margin-left: 0; } #logos img:last-child { margin-right: 0; } #logos br { display: none; } /*** PRESSE ***/ .ocList { max-width: 800px; border-top: solid 1px #cbced2; } .ocList h4 { position: relative; padding: 20px 35px 20px 10px; border-bottom: solid 1px #cbced2; color: #3aab3f; cursor: pointer; } .ocList h4 img { position: absolute; right: 20px; top: 50%; margin: -5px 0 0 0; } .ocList h4 .over { opacity: 0; filter: alpha(opacity=0); } .ocList .open h4 { color: #575a62; } .ocList .open h4 img { opacity: 0; filter: alpha(opacity=0); transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); } .ocList .open h4 .over { opacity: 1; filter: alpha(opacity=100); } .ocList ul { display: none; border-bottom: solid 1px #cbced2; } .ocList ul li { border-bottom: solid 1px #cbced2; font: normal 16px/20px 'Proxima N W01 Smbd', Arial, sans-serif; } .ocList ul li:last-child { border: none; } .ocList a { display: block; padding: 20px 35px 20px 35px; color: #575a62; } .ocList .link a { background: url('../images/icones/link.png') no-repeat 10px 24px; background-size: 12px 12px; } .ocList .doc a { background: url('../images/icones/doc.png') no-repeat 10px 24px; background-size: 12px 13px; } .ie .ocList ul li a { background: none; } /*** TEAM ***/ #team section { margin-bottom: 50px; } .teamBloc { position: relative; display: block; float: left; width: 25%; max-width: 320px; line-height: 0; } .teamBloc > img { width: 100%; } .teamOverlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; background: rgba(0, 0, 0, 0.5); } .teamOverlay h3 { margin: 0 0 3px 0; font-size: 30px; line-height: 26px; color: #fff; } .teamOverlay p { margin-bottom: 15px; line-height: 15px; color: #fff; } .teamDesc { position: absolute; left: 0; bottom: 10px; display: block; width: 100%; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .teamDesc .title { opacity: 0.7; filter: alpha(opacity=70); } .teamDesc .mail { display: inline-block; font: 400 15px/15px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #fff; letter-spacing: 1px; } .teamDesc .mail img { margin-left: 7px; } .teamIn { position: absolute; right: 20px; top: 20px; width: 38px; height: 38px; margin: 0 0 0 10px; line-height: 38px; border: solid 2px #fff; border: solid 2px rgba(255, 255, 255, 0.1); text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .teamIn img { vertical-align: middle; } #pub { background: #3aab3f; } #pub > div { position: absolute; left: 0; bottom: 25px; width: 100%; padding: 0 30px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #pub h2 { color: #fff; } #pubOver hr { margin-bottom: 15px; background: #fff; } #pubOver .inLink { display: block; color: #fff; } /*** NEWS ***/ .newBloc { position: relative; display: block; max-width: 600px; min-height: 340px; padding: 30px 0 0 400px; } .newBloc .inLink { margin-bottom: 50px; } .newPic { position: absolute; left: 0; top: 0; width: 320px; height: 320px; font: normal 16px/320px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #fff; text-align: center; letter-spacing: 1px; } .newOverlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; font: normal 50px/320px 'Proxima N W01 Cd Light', Arial, sans-serif; background: rgba(0, 0, 0, 0.6); opacity: 0; filter: alpha(opacity=0); } .pagination { margin: 30px 0 30px 400px; font: normal 16px/18px 'Proxima N W01 Cd Bold', Arial, sans-serif; } .pagination li { display: inline-block; } .pagination a, .pagination span { padding: 0 5px; color: #575a62; } .pagination .active * { color: #3aab3f; cursor: default; } .pagination li.disabled span, .pagination li.disabled a { color: #ddd !important; cursor: default; } #new #shareIco { right: 20px; } #shareIco .ico { float: right; } #new .newDesc { float: left; width: 600px; margin: 0 0 50px 0; } #new .newDesc > img { max-width: 100%; margin: 0 0 50px 0; } #gallery { float: right; width: 460px; margin: 40px 0 50px 0; } #gallery h2 { margin-bottom: 10px; } #gallery > img { width: 100%; max-width: 460px !important; max-height: 460px !important; margin-bottom: 20px; } #gallery ul { width: 100%; } #gallery ul li { float: left; width: 100px; margin: 0 20px 20px 0; } #gallery ul li:nth-child(4n) { margin-right: 0; } #gallery ul li a { position: relative; display: block; width: 100%; line-height: 0; } #gallery ul li a img { width: 100%; } #gallery ul li a span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.3; filter: alpha(opacity=30); } /*** EVENT ***/ .ie .eventBox { clear: both; } .eventBox { display: block; float: left; width: 30%; max-width: 320px; margin: 0 3% 50px 0; } .eventBox:nth-child(3n+1) { clear: left; } .eventPic { position: relative; margin: 0 0 30px 0; line-height: 0; } .eventPic img { width: 100%; } .eventPic div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; font: normal 50px/320px 'Proxima N W01 Cd Light', Arial, sans-serif; color: #fff; text-align: center; background: rgba(0, 0, 0, 0.6); opacity: 0; filter: alpha(opacity=0); } #event .pagination { display: block; margin-left: 0; text-align: center; } #event #gallery { float: none; width: auto; margin: 50px 0 30px 0; } #event #gallery ul li { display: inline-block; float: none; width: auto; margin: 0 20px 20px 0; } #event #gallery ul li:nth-child(4n) { margin-right: 20px; } #event .inLink { display: none; position: relative; padding-right: 20px; } #event .inLink img { position: absolute; right: 0; top: 2px; } #event .inLink .over { opacity: 0; filter: alpha(opacity=0); } #event #shareIco { right: 20px; } /*** CONTACT ***/ #coord h2 { margin-bottom: 10px; } #contact #banner { margin-bottom: 0; } #contact .content { padding: 60px 0; height: 750px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #contact .content .left { float: left; width: 250px; margin-bottom: 40px; } #contact .content .left li { font: 400 15px/25px 'Open Sans', Arial, sans-serif; color: #6d6d6d; } #contact .content .left li span { color: #3aab3f; } #contactForm { position: absolute; left: 45%; top: -60px; width: 500%; max-width: none; height: 750px; padding: 120px 0 0 70px; background: #242424; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #contactForm form { width: 600px; position: relative; } #contactForm .success, #contactForm .error { position: absolute; width: 100%; top:0; left:0; display:none; } #contactForm .success p, #contactForm .error p { color: #fff; } #contactForm h1 { color: #fff; } #contactForm label { color: #fff; } #contactForm label.invalid { color: red; } #contactForm textarea { max-width: 575px; margin: 0 0 50px 0; } #contactForm #spinner { display: none; margin: 0 10px 20px 10px; } /*** TRACKER ***/ #tracker #banner { height: 650px; } #tracker .content .wrapper { width: 680px; margin-top: -450px; } #tracker .content h1 { max-width: none; margin-bottom: 15px; font-size: 40px; line-height: 36px; color: #8bb751; } #tracker .content h1 img { margin: 0 15px; } #tracker .content h1 span { position: relative; } #tracker .boxed { border-color: #8bb751; color: #8bb751; } #tracker .boxedOver { background: #8bb751; } .innerRight { padding-top: 30px; margin-left: 275px; } .innerLeft { padding-top: 30px; width: 330px; } .txtRight { text-align: right; } .content #bloc1 h1 { margin-bottom: 75px; line-height: 40px; color: #fff; } #bloc1 > img { float: left; margin-left: -25px; } #bloc1 .xmargin { margin-bottom: 50px; } #trackerLogo { margin: 20px 0 20px -78px; } #bloc2 > img { float: right; margin-right: -25px; } #bloc3 { margin-top: -30px; } #bloc3 > img { float: left; margin-left: -40px; } #bloc3 .innerRight { margin-left: 320px; padding-top: 80px; margin-right: 25px; } #bloc3 .innerRight h1 img { position: absolute; left: -47px; top: 1px; margin: 0; } #bloc3 .innerRight > h1 img { left: auto; right: -47px; top: 7px; } #bloc3 .xmargin { margin-bottom: 100px; } #bloc4 { position: relative; margin-bottom: 350px; } #bloc4 .innerLeft { padding-top: 50px; width: 250px; } #bloc4 > img { position: absolute; right: -420px; top: 0; } /*** VISITE VIRTUELLE ***/ #visiteDfs #banner { display: none; } #visiteDfsBg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/visite/homebg.jpg') no-repeat center top; background-size: cover; } #visiteDfs .content { padding: 275px 0 200px 0; } .expBox { position: relative; float: left; display: block; width: 303px; line-height: 0; margin: 1px; overflow: hidden; } .expBox > img { width: 100%; } #visiteDfs .thbDesc { background: rgba(0, 0, 0, 0.5); } #expTitle { float: right; width: 608px; } #expTitle .thbDesc { padding-left: 15%; background: transparent; } #expTitle .thbDesc > div { margin-top: 0; } #expTitle h1 { max-width: none; margin: 0 0 20px 0; color: #fff; white-space: nowrap; } #expTitle h1 br { display: block !important; } #expTitle .inLink { display: inline-block; border-color: #fff; } #blank { clear: left; } .visite #banner { display: none; } .visite footer { display: none; } .visite { min-height: 700px; height: 100%; } .visite body { min-height: 700px; height: 100%; } .visite .container { min-height: 700px; height: 100%; } .visite .content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; } .visite .content > img { display: none; } #visiteNav { position: absolute; left: 0; bottom: 0; width: 100%; background: #000; z-index: 999; } #visiteNav li { float: left; width: 20%; } #visiteNav li a { position: relative; display: block; width: 100%; height: 15px; padding: 30px 0; font: normal 12px/15px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #fff; text-align: center; text-transform: uppercase; } #visiteNav li a:hover { color: #3aab3f; } #visiteNav li a img { position: absolute; right: 0; top: 30px; } #visiteNav li.main { display: none; } .dot { position: absolute; display: block; width: 220px; height: 45px; } #Gps.dot { width: 260px; } .dotInner { position: absolute; left: 50%; top: 0; width: 0; height: 45px; font: normal 13px/45px 'Proxima N W01 Cd Bold', Arial, sans-serif; color: #3aab3f; text-transform: uppercase; letter-spacing: 1px; text-align: center; background: #fff; overflow: hidden; z-index: 1; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px; transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms; } .dotInner span { opacity: 0; filter: alpha(opacity=0); transform: scaleX(0); -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -o-transform: scaleX(0); transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms; } .btnClose { position: absolute; top: 0; left: 50%; width: 45px; height: 45px; margin: 0 0 0 -25px; font-size: 35px; line-height: 50px; text-align: center; color: #3aab3f; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; transition: background 300ms; -webkit-transition: background 300ms; -moz-transition: background 300ms; -o-transition: background 300ms; } .btnClose span { transition: all 300ms ease 200ms; -webkit-transition: all 300ms ease 200ms; -moz-transition: all 300ms ease 200ms; -o-transition: all 300ms ease 200ms; } .btnClose .pulse { position: absolute; left: 1px; top: 1px; width: 41px; height: 41px; border: solid 1px #fff; opacity: 0; filter: alpha(opacity=0); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; animation: pulse 2s infinite; -webkit-animation: pulse 2s infinite; } #ocTab { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: #fff; background: rgba(255, 255, 255, 0.94); z-index: 500; transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -o-transform: translateX(100%); transition: transform 400ms cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: -webkit-transform 400ms cubic-bezier(0.7, 0, 0.3, 1); -moz-transition: -moz-transform 400ms cubic-bezier(0.7, 0, 0.3, 1); -o-transition: -o-transform 400ms cubic-bezier(0.7, 0, 0.3, 1); } #ocTab.open { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); } #ocTabClose { position: absolute; left: 10%; top: 15%; display: block; width: 18px; height: 18px; z-index: 999; opacity: 0; filter: alpha(opacity=0); transition: opacity 300ms ease 500ms; -webkit-transition: opacity 300ms ease 500ms; -moz-transition: opacity 300ms ease 500ms; -o-transition: opacity 300ms ease 500ms; } #ocTabClose img { position: absolute; left: 0; top: 0; } #ocTabClose .over { opacity: 0; filter: alpha(opacity=0); } #ocTab.open #ocTabClose { opacity: 1; filter: alpha(opacity=1); } #ocTabDesc { position: absolute; left: 10%; top: 25%; width: 90%; height: 100%; } #ocTabDesc > div { position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(opacity=0); transform: translateY(40px); -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -o-transform: translateY(40px); transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -o-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } #ocTabDesc > div h1 { max-width: none; margin-bottom: 40px; } #ocTabDesc > div p { max-width: 330px; } #ocTabDesc .inLink { position: relative; padding: 0 20px 0 0; } #ocTabDesc .inLink img { position: absolute; right: 0; top: 2px; } #ocTabDesc .over { opacity: 0; filter: alpha(opacity=0); } #ocTabDesc > div.selectedTab { z-index: 1; opacity: 1; filter: alpha(opacity=100); transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 500ms; -webkit-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 500ms; -moz-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 500ms; -o-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 500ms; } /* Atelier */ #expAtelier .content { background: url('../images/visite/atelier.jpg') no-repeat center center; background-size: cover; } #Env { left: 47%; top: 44%; } #Dis { left: 54%; top: 33%; } #Bai { left: 80%; top: 40%; } /* Baie */ #expBaie .content { background: url('../images/visite/baie.jpg') no-repeat center bottom; background-size: cover; } #Res { left: 55%; top: 85%; } #Cln { left: 28%; top: 45%; } #Atl { left: 75%; top: 20%; } /* Centre Logistique */ #expLogistique .content { background: url('../images/visite/centre-logistique.jpg') no-repeat center bottom; background-size: cover; } #Ser { left: 35%; top: 55%; } #Gps { left: 49%; top: 48%; } #Tck { left: 58%; top: 63%; } /* Camions Ext */ #expCamions .content { background: url('../images/visite/camions.jpg') no-repeat center bottom; background-size: cover; } #Ref { left: 14%; top: 27%; } #Pxo { left: 37%; top: 70%; } #Hab { left: 45%; top: 20%; } /* Habitacle */ #expHabitacle .content { background: url('../images/visite/habitacle.jpg') no-repeat center center; background-size: cover; } #Ext { left: 8%; top: 16%; } #Trs { left: 48%; top: 70%; } #Com { left: 65%; top: 47%; } /* Simulateur */ #expSimulateur .content { background: url('../images/visite/simulateur.jpg') no-repeat center center; background-size: cover; } #App { left: 16%; top: 22%; } #Cpr { left: 63%; top: 65%; } #Exp { left: 69%; top: 25%; } /*** ANIM ***/ .floating { animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } .floatingStop { animation-play-state: paused; -webkit-animation-play-state: paused; } @keyframes floating { 0% { transform: translateY(0%); } 60% { transform: translateY(12%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 60% { -webkit-transform: translateY(12%); } 100% { -webkit-transform: translateY(0%); } } @keyframes pulse { 0%, 50% { opacity: 1; -webkit-transform: scale(1); transform :scale(1); } 100% {opacity: 0;-webkit-transform:scale(1.6);transform:scale(1.6)} } @-webkit-keyframes pulse { 0%, 50% { opacity: 1; -webkit-transform:scale(1); transform:scale(1) } 100% {opacity: 0; -webkit-transform:scale(1.6);transform:scale(1.6)} }