h1 { text-transform: uppercase; font-size: 50px; font-size: 5rem; line-height: 1; } @media only screen and (max-width: 1200px) { h1 { font-size: 40px; font-size: 4rem; } } @media only screen and (max-width: 992px) { h1 { font-size: 50px; font-size: 5rem; } } @media only screen and (max-width: 767px) { h1 { font-size: 30px; font-size: 3rem; } } .head1 { text-transform: uppercase; font-size: 30px; font-size: 3rem; line-height: 1; } @media only screen and (max-width: 1200px) { .head1 { font-size: 40px; font-size: 3.5rem; } } @media only screen and (max-width: 992px) { .head1 { font-size: 50px; font-size: 5rem; } } @media only screen and (max-width: 767px) { .head1 { font-size: 30px; font-size: 2.9rem; line-height:35px } } .head2 { text-transform: uppercase; font-size: 30px; font-size: 3rem; line-height: 1; } @media only screen and (max-width: 1200px) { .head2 { font-size: 40px; font-size: 2rem; } } @media only screen and (max-width: 992px) { .head2 { font-size: 50px; font-size: 3rem; } } @media only screen and (max-width: 767px) { .head2 { font-size: 30px; font-size: 2.8rem; line-height:35px } } .head3 { text-transform: uppercase; font-size: 30px; font-size: 3rem; line-height: 1; } @media only screen and (max-width: 1200px) { .head3 { font-size: 40px; font-size: 3.5rem; } } @media only screen and (max-width: 992px) { .head3 { font-size: 50px; font-size: 5rem; } } @media only screen and (max-width: 767px) { .head3 { font-size: 30px; font-size: 3.2rem; line-height:45px; padding:12px } } h2 { font-family: "futura-pt"; font-weight: 700; text-transform: uppercase; font-size: 33px; font-size: 3.3rem; line-height: 1; } @media only screen and (max-width: 1200px) { h2 { font-size: 24px; font-size: 2.4rem; } } @media only screen and (max-width: 992px) { h2 { font-size: 28px; font-size: 2.8rem; } } @media only screen and (max-width: 767px) { h2 { font-size: 18px; font-size: 1.8rem; } } h3, #marque .intro ul li a .visuel + span { font-weight: 700; text-transform: uppercase; font-size: 15px; font-size: 1.5rem; line-height: 1.2; } @media only screen and (max-width: 992px) { h3, #marque .intro ul li a .visuel + span { font-size: 18px; font-size: 1.8rem; } } @media only screen and (max-width: 767px) { h3, #marque .intro ul li a .visuel + span { font-size: 14px; font-size: 1.4rem; } } p { margin-bottom: 20px; font-weight: 400; font-size: 14px; font-size: 1.4rem; } @media only screen and (max-width: 1440px) { p { } } @media only screen and (max-width: 1200px) { p { } } p.intro { font-size: 24px; font-size: 2.4rem; font-weight: 100; line-height: 1.2; } @media only screen and (max-width: 1440px) { p.intro { font-size: 18px; font-size: 1.8rem; } } @media only screen and (max-width: 992px) { p.intro { font-size: 16px; font-size: 1.6rem; } } a, a:hover, a:focus { color: inherit; text-decoration: none; } a:focus { outline: none; } footer a { color: #f8f8f8; } footer a:hover, footer a:focus { text-decoration: none; color: white; } a.iconed { overflow: hidden; } a.iconed span { display: inline-block; } a.iconed:hover span { -webkit-animation: hoverTranslateV .2s 1; -moz-animation: hoverTranslateV .2s 1; -o-animation: hoverTranslateV .2s 1; animation: hoverTranslateV .2s 1; } a.iconed:hover .icon { -webkit-animation: hoverTranslateV .25s 1; -moz-animation: hoverTranslateV .25s 1; -o-animation: hoverTranslateV .25s 1; animation: hoverTranslateV .25s 1; } .btn.btn-more.btn-oxylane, .btn.btn-more.red, .btn.btn-more.black, .btn.btn-more.blue, .btn.btn-more.green, .btn.btn-more.gptw { color: white; } .btn.btn-more.btn-oxylane:before, .btn.btn-more.red:before, .btn.btn-more.black:before, .btn.btn-more.blue:before, .btn.btn-more.green:before, .btn.btn-more.gptw:before { background: url("../img/shared/icon-more-white.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .btn.btn-more.btn-oxylane:before, .btn.btn-more.red:before, .btn.btn-more.black:before, .btn.btn-more.blue:before, .btn.btn-more.green:before, .btn.btn-more.gptw:before { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/icon-more-white2x.png"); background-size: 16px 16px; } } .btn { display: inline-block; padding: 15px 25px; text-transform: uppercase; font-family: "futura-pt-condensed"; font-weight: 700; border-radius: 0px; border: none; overflow: hidden; font-size: 14px; font-size: 1.4rem; line-height: 1.1; } @media only screen and (max-width: 1440px) { .btn { font-size: 13px; font-size: 1.3rem; } } @media only screen and (max-width: 767px) { .btn { padding: 12px 16px; } } .btn > span { display: inline-block; } .btn.btn-more { position: relative; background: white; padding-left: 20px; padding-right: 46px; white-space: normal; text-align: left; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (max-width: 767px) { .btn.btn-more { padding-right: 45px; } } .no-touch .btn.btn-more:hover { padding-left: 33px; padding-right: 33px; } .btn.btn-more span { color: #11496b; } .no-touch .btn.btn-more:hover:before { -moz-transform: translateX(40px) rotate(-90deg); -webkit-transform: translateX(40px) rotate(-90deg); -o-transform: translateX(40px) rotate(-90deg); -ms-transform: translateX(40px) rotate(-90deg); transform: translateX(40px) rotate(-90deg); } .btn.btn-more:before { content: ' '; margin-top: 2px; display: block; position: absolute; top: 50%; margin-top: -8px; right: 16px; width: 16px; height: 16px; -moz-transform: translateX(0px) rotate(0deg); -webkit-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); background: url("../img/shared/icon-more.png") no-repeat center center; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .btn.btn-more:before { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/icon-more2x.png"); background-size: 16px 16px; } } @media only screen and (max-width: 767px) { .btn.btn-more:before { right: 15px; } } .btn.btn-more.btn-oxylane, .btn.btn-more.red { background: #dd3333; } .btn.btn-more.btn-oxylane span, .btn.btn-more.red span { color: white; } .btn.btn-more.black { background: #2a2a2a; } .btn.btn-more.black span { color: white; } .btn.btn-more.blue { background: #0082C3; } .btn.btn-more.blue span { color: white; } .btn.btn-more.green { background: #1fa689; } .btn.btn-more.green span { color: white; } .no-touch .btn.btn-more.green:hover { background: #109376; } .btn.btn-more.gptw { background: #b82130; } .btn.btn-more.gptw span { color: white; } .btn.btn-more + .btn-more { margin-left: 30px; } @media only screen and (max-width: 767px) { .btn.btn-more + .btn-more { display: inline-block; margin-left: 0; margin-top: 15px; } } .btn.btn-apply { background: #EC6607; color: white; padding: 15px 0px; padding-left: 20px; padding-right: 46px; position: relative; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; /*&:hover:before { @include animation('hoverTranslateH .3s 1'); } &:hover span { @include animation('hoverTranslateH .5s 1'); }*/ } .no-touch .btn.btn-apply:hover { padding-left: 33px; padding-right: 33px; } .no-touch .btn.btn-apply:hover:before { -moz-transform: translateX(50px); -webkit-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); } .btn.btn-apply:before { content: ' '; margin-top: 2px; display: block; float: right; width: 24px; margin-left: 10px; height: 15px; background: url("../img/shared/icon-job.png") no-repeat center center; position: absolute; top: 50%; margin-top: -8px; right: 14px; -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .btn.btn-apply:before { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/icon-job2x.png"); background-size: 24px 15px; } } .btn-lined { font-family: "futura-pt"; display: inline-block; border: 2px solid white; padding: 10px 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; border-radius: 40px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ font-size: 11px; font-size: 1.1rem; color: white; text-transform: uppercase; font-weight: 800; transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (max-width: 1200px) { .btn-lined { font-size: 10px; font-size: 1rem; } } .btn-lined:hover, .btn-lined.current { background: #0082C3 !important; border-color: #0082C3 !important; color: white; } .btn-search { width: 50px; height: 50px; border: none; text-indent: -9999px; background: url("../img/icons/icon-search.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .btn-search { /* on retina, use image that's scaled by 2 */ background-image: url("../img/icons/icon-search2x.png"); background-size: 27px 22px; } } .no-touch .btn-search:hover { background: url("../img/icons/icon-search-over.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .no-touch .btn-search:hover { /* on retina, use image that's scaled by 2 */ background-image: url("../img/icons/icon-search-over2x.png"); background-size: 27px 22px; } } .btn-video { position: relative; display: block; background: #161616; } .btn-video .play { text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } .btn-video .play .vcenter { height: 100%; display: table; width: 100%; padding: 0 !important; } .btn-video .play .icon { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; } .btn-video .play .icon img { width: 12%; max-width: 50px; display: inline-block; } .btn-video:hover .play .icon img { -webkit-animation: hoverTranslateH .3s 1; -moz-animation: hoverTranslateH .3s 1; -o-animation: hoverTranslateH .3s 1; animation: hoverTranslateH .3s 1; } .btn-video:hover video, .btn-video:hover > img { opacity: 0.3; filter: alpha(opacity=30); } .btn-video video, .btn-video > img { max-width: 100%; display: block; height: auto; overflow: hidden; opacity: 1; filter: alpha(opacity=100); transition: opacity 0.1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (max-width: 767px) { .btn-video > img { width: 100%; } } @media only screen and (max-width: 992px) { .btn-video video { display: none; } } .touch .btn-video video { display: none; } .btn-video video + img { display: none; } @media only screen and (max-width: 992px) { .btn-video video + img { display: block; } } .touch .btn-video video + img { display: block; } .btn-play { display: block; width: 45px; height: 45px; border: 2px solid white; position: relative; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; margin: 15px auto 0px; transition: transform 400ms cubic-bezier(0.86, 0, 0.07, 1) 0ms; } .btn-play .icon { position: absolute; top: 50%; left: 50%; margin-left: 2px; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .boxed { display: inline-block; border: 3px solid white; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) ; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) ; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) ; } .mfp-content { width: 80% !important; } .mfp-content .mfp-close { background: #0082C3; opacity: 1; filter: alpha(opacity=100); width: 44px; height: 44px; padding: 0; text-align: center; right: -44px; top: 0px; } .mfp-content .mfp-close span { width: 44px; height: 44px; display: block; background: url("../img/shared/icon-close.png") no-repeat center center; transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .mfp-content .mfp-close span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/icon-close2x.png"); background-size: 14px 14px; } } .no-touch .mfp-content .mfp-close:hover span { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .back-to { display: block; left: 2.5%; width: 3%; max-width: 52px; -webkit-border-radius: 26px; -moz-border-radius: 26px; -ms-border-radius: 26px; border-radius: 26px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ border: 3px solid #0082C3; top: 125px; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); z-index: 10; } .back-to object { width: 100%; display: block; height: auto; position: relative; padding-top: 100%; } .back-to object svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (max-width: 767px) { .back-to { position: relative; top: 0px; left: 0px; margin-left: 30px; margin-top: 30px; float: left; width: 40px; } } .no-touch .back-to:hover svg { -webkit-animation: hoverTranslateHBack .4s 1; -moz-animation: hoverTranslateHBack .4s 1; -o-animation: hoverTranslateHBack .4s 1; animation: hoverTranslateHBack .4s 1; } .btn-rambo { display: inline-block; padding: 10px 40px; text-align: center; text-transform: uppercase; font-weight: 700; color: #fff; cursor: pointer; font-family: "futura-pt"; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; border-radius: 40px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ font-size: 12px; font-size: 1.2rem; font-weight: 800; overflow: hidden; position: relative; -webkit-transition: background 0.2s ease 0s, color 0.2s ease; -moz-transition: background 0.2s ease 0s, color 0.2s ease; transition: background 0.2s ease 0s, color 0.2s ease; } @media only screen and (max-width: 1200px) { .btn-rambo { font-size: 10px; font-size: 1rem; } } .btn-rambo > span { cursor: pointer; position: relative; z-index: 10; } .btn-rambo > .hover { position: absolute; top: 50%; left: 50%; width: 105%; height: 105%; border-radius: 30px; z-index: 0; -moz-transform: translate(-150%, -50%); -o-transform: translate(-150%, -50%); -ms-transform: translate(-150%, -50%); -webkit-transform: translate(-150%, -50%); transform: translate(-150%, -50%); -webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); -moz-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .btn-rambo.btn-jaune { background: #fdca12; border-color: #fdca12; } .btn-rambo.btn-jaune.btn-stroke { color: #fdca12; } .btn-rambo.btn-jaune.btn-stroke > .hover { background: #fdca12; } .btn-rambo.btn-violet { background: #642a6b; border-color: #642a6b; } .btn-rambo.btn-violet.btn-stroke { color: #642a6b; } .btn-rambo.btn-violet.btn-stroke > .hover { background: #642a6b; } .btn-rambo.btn-orange { background: #eb7120; border-color: #eb7120; } .btn-rambo.btn-orange.btn-stroke { color: #eb7120; } .btn-rambo.btn-orange.btn-stroke > .hover { background: #eb7120; } .btn-rambo.btn-vert { background: #a9c844; border-color: #a9c844; } .btn-rambo.btn-vert.btn-stroke { color: #a9c844; } .btn-rambo.btn-vert.btn-stroke > .hover { background: #a9c844; } .btn-rambo.btn-blanc { background: #fff; border-color: #fff; } .btn-rambo.btn-blanc.btn-stroke { color: #fff; } .btn-rambo.btn-stroke { border-style: solid; border-width: 2px; background: transparent; } .btn-rambo.transform-jaune > .hover { background: #fdca12; } .btn-rambo.transform-violet > .hover { background: #642a6b; } .btn-rambo.transform-vert > .hover { background: #a9c844; } .btn-rambo.transform-orange > .hover { background: #eb7120; } .btn-rambo.transform-blanc > .hover { background: #fff; } .btn-rambo.transform-bleu > .hover { background: #0082C3; } .no-touch .btn-rambo:hover { -webkit-transition: background 0.1s ease 0.1s, color 0.2s ease; -moz-transition: background 0.1s ease 0.1s, color 0.2s ease; transition: background 0.1s ease 0.1s, color 0.2s ease; } .no-touch .btn-rambo:hover > .hover { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .no-touch .btn-rambo:hover.btn-stroke { color: #fff; } .no-touch .btn-rambo:hover.transform-jaune { background: #fdca12; } .no-touch .btn-rambo:hover.transform-violet { background: #642a6b; } .no-touch .btn-rambo:hover.transform-vert { background: #a9c844; } .no-touch .btn-rambo:hover.transform-orange { background: #eb7120; } .no-touch .btn-rambo:hover.transform-blanc { background: #fff; color: #18252F; } .no-touch .btn-rambo:hover.transform-bleu > .hover { background: #0082C3; } #IconOffers #Shoes, #IconOffers #Arrows { transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } a:hover #IconOffers #Shoes { -webkit-animation: IconOfferShoes 2200ms; -moz-animation: IconOfferShoes 2200ms; -o-animation: IconOfferShoes 2200ms; animation: IconOfferShoes 2200ms; } a:hover #IconOffers #Arrows { -webkit-animation: IconOfferCible 2000ms; -moz-animation: IconOfferCible 2000ms; -o-animation: IconOfferCible 2000ms; animation: IconOfferCible 2000ms; } @-webkit-keyframes IconOfferCible { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25% { -moz-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); -webkit-transform: translate(15px, 15px); transform: translate(15px, 15px); } 50% { -moz-transform: translate(-10px, 5px); -o-transform: translate(-10px, 5px); -ms-transform: translate(-10px, 5px); -webkit-transform: translate(-10px, 5px); transform: translate(-10px, 5px); } 75% { -moz-transform: translate(10px, -10px); -o-transform: translate(10px, -10px); -ms-transform: translate(10px, -10px); -webkit-transform: translate(10px, -10px); transform: translate(10px, -10px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-moz-keyframes IconOfferCible { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25% { -moz-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); -webkit-transform: translate(15px, 15px); transform: translate(15px, 15px); } 50% { -moz-transform: translate(-10px, 5px); -o-transform: translate(-10px, 5px); -ms-transform: translate(-10px, 5px); -webkit-transform: translate(-10px, 5px); transform: translate(-10px, 5px); } 75% { -moz-transform: translate(10px, -10px); -o-transform: translate(10px, -10px); -ms-transform: translate(10px, -10px); -webkit-transform: translate(10px, -10px); transform: translate(10px, -10px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-o-keyframes IconOfferCible { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25% { -moz-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); -webkit-transform: translate(15px, 15px); transform: translate(15px, 15px); } 50% { -moz-transform: translate(-10px, 5px); -o-transform: translate(-10px, 5px); -ms-transform: translate(-10px, 5px); -webkit-transform: translate(-10px, 5px); transform: translate(-10px, 5px); } 75% { -moz-transform: translate(10px, -10px); -o-transform: translate(10px, -10px); -ms-transform: translate(10px, -10px); -webkit-transform: translate(10px, -10px); transform: translate(10px, -10px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes IconOfferCible { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25% { -moz-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); -webkit-transform: translate(15px, 15px); transform: translate(15px, 15px); } 50% { -moz-transform: translate(-10px, 5px); -o-transform: translate(-10px, 5px); -ms-transform: translate(-10px, 5px); -webkit-transform: translate(-10px, 5px); transform: translate(-10px, 5px); } 75% { -moz-transform: translate(10px, -10px); -o-transform: translate(10px, -10px); -ms-transform: translate(10px, -10px); -webkit-transform: translate(10px, -10px); transform: translate(10px, -10px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-webkit-keyframes IconOfferShoes { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25% { -moz-transform: translate(10px, 10px); -o-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px); -webkit-transform: translate(10px, 10px); transform: translate(10px, 10px); } 50% { -moz-transform: translate(-5px, 0px); -o-transform: translate(-5px, 0px); -ms-transform: translate(-5px, 0px); -webkit-transform: translate(-5px, 0px); transform: translate(-5px, 0px); } 75% { -moz-transform: translate(5px, -5px); -o-transform: translate(5px, -5px); -ms-transform: translate(5px, -5px); -webkit-transform: translate(5px, -5px); transform: translate(5px, -5px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-moz-keyframes IconOfferShoes { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25% { -moz-transform: translate(10px, 10px); -o-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px); -webkit-transform: translate(10px, 10px); transform: translate(10px, 10px); } 50% { -moz-transform: translate(-5px, 0px); -o-transform: translate(-5px, 0px); -ms-transform: translate(-5px, 0px); -webkit-transform: translate(-5px, 0px); transform: translate(-5px, 0px); } 75% { -moz-transform: translate(5px, -5px); -o-transform: translate(5px, -5px); -ms-transform: translate(5px, -5px); -webkit-transform: translate(5px, -5px); transform: translate(5px, -5px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-o-keyframes IconOfferShoes { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25% { -moz-transform: translate(10px, 10px); -o-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px); -webkit-transform: translate(10px, 10px); transform: translate(10px, 10px); } 50% { -moz-transform: translate(-5px, 0px); -o-transform: translate(-5px, 0px); -ms-transform: translate(-5px, 0px); -webkit-transform: translate(-5px, 0px); transform: translate(-5px, 0px); } 75% { -moz-transform: translate(5px, -5px); -o-transform: translate(5px, -5px); -ms-transform: translate(5px, -5px); -webkit-transform: translate(5px, -5px); transform: translate(5px, -5px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes IconOfferShoes { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25% { -moz-transform: translate(10px, 10px); -o-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px); -webkit-transform: translate(10px, 10px); transform: translate(10px, 10px); } 50% { -moz-transform: translate(-5px, 0px); -o-transform: translate(-5px, 0px); -ms-transform: translate(-5px, 0px); -webkit-transform: translate(-5px, 0px); transform: translate(-5px, 0px); } 75% { -moz-transform: translate(5px, -5px); -o-transform: translate(5px, -5px); -ms-transform: translate(5px, -5px); -webkit-transform: translate(5px, -5px); transform: translate(5px, -5px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } #IconPaie #pageOne, #IconPaie #pageTwo, #IconPaie #pageThree { transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } #IconPaie #pageOne rect { transform-origin: left top; -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } a:hover #IconPaie #pageOne { -webkit-animation: IconPaiePageSlide 800ms 75ms; -moz-animation: IconPaiePageSlide 800ms 75ms; -o-animation: IconPaiePageSlide 800ms 75ms; animation: IconPaiePageSlide 800ms 75ms; } a:hover #IconPaie #pageOne #rect1 { -webkit-animation: IconPaieRectArrive 800ms; -moz-animation: IconPaieRectArrive 800ms; -o-animation: IconPaieRectArrive 800ms; animation: IconPaieRectArrive 800ms; } a:hover #IconPaie #pageOne #rect2 { -webkit-animation: IconPaieRectArrive 900ms; -moz-animation: IconPaieRectArrive 900ms; -o-animation: IconPaieRectArrive 900ms; animation: IconPaieRectArrive 900ms; } a:hover #IconPaie #pageOne #rect3 { -webkit-animation: IconPaieRectArrive 1000ms; -moz-animation: IconPaieRectArrive 1000ms; -o-animation: IconPaieRectArrive 1000ms; animation: IconPaieRectArrive 1000ms; } a:hover #IconPaie #pageTwo { -webkit-animation: IconPaiePageSlide 800ms 50ms; -moz-animation: IconPaiePageSlide 800ms 50ms; -o-animation: IconPaiePageSlide 800ms 50ms; animation: IconPaiePageSlide 800ms 50ms; } a:hover #IconPaie #pageThree { -webkit-animation: IconPaiePageSlide 800ms 25ms; -moz-animation: IconPaiePageSlide 800ms 25ms; -o-animation: IconPaiePageSlide 800ms 25ms; animation: IconPaiePageSlide 800ms 25ms; } @-webkit-keyframes IconPaiePageSlide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 50% { -moz-transform: translate(0px, -10px); -o-transform: translate(0px, -10px); -ms-transform: translate(0px, -10px); -webkit-transform: translate(0px, -10px); transform: translate(0px, -10px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-moz-keyframes IconPaiePageSlide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 50% { -moz-transform: translate(0px, -10px); -o-transform: translate(0px, -10px); -ms-transform: translate(0px, -10px); -webkit-transform: translate(0px, -10px); transform: translate(0px, -10px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-o-keyframes IconPaiePageSlide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 50% { -moz-transform: translate(0px, -10px); -o-transform: translate(0px, -10px); -ms-transform: translate(0px, -10px); -webkit-transform: translate(0px, -10px); transform: translate(0px, -10px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes IconPaiePageSlide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 50% { -moz-transform: translate(0px, -10px); -o-transform: translate(0px, -10px); -ms-transform: translate(0px, -10px); -webkit-transform: translate(0px, -10px); transform: translate(0px, -10px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-webkit-keyframes IconPaieRectArrive { 0% { -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } } @-moz-keyframes IconPaieRectArrive { 0% { -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } } @-o-keyframes IconPaieRectArrive { 0% { -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes IconPaieRectArrive { 0% { -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } } #IconProduction #Sicssor, #IconProduction #Line { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } a:hover #IconProduction #Sicssor { -webkit-animation: IconProductionScissor 1000ms; -moz-animation: IconProductionScissor 1000ms; -o-animation: IconProductionScissor 1000ms; animation: IconProductionScissor 1000ms; } a:hover #IconProduction #Line { -webkit-animation: IconProductionLine 820ms; -moz-animation: IconProductionLine 820ms; -o-animation: IconProductionLine 820ms; animation: IconProductionLine 820ms; } @-webkit-keyframes IconProductionLine { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 100% { -moz-transform: translate(-9px, 19px); -o-transform: translate(-9px, 19px); -ms-transform: translate(-9px, 19px); -webkit-transform: translate(-9px, 19px); transform: translate(-9px, 19px); } } @-moz-keyframes IconProductionLine { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 100% { -moz-transform: translate(-9px, 19px); -o-transform: translate(-9px, 19px); -ms-transform: translate(-9px, 19px); -webkit-transform: translate(-9px, 19px); transform: translate(-9px, 19px); } } @-o-keyframes IconProductionLine { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 100% { -moz-transform: translate(-9px, 19px); -o-transform: translate(-9px, 19px); -ms-transform: translate(-9px, 19px); -webkit-transform: translate(-9px, 19px); transform: translate(-9px, 19px); } } @keyframes IconProductionLine { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 100% { -moz-transform: translate(-9px, 19px); -o-transform: translate(-9px, 19px); -ms-transform: translate(-9px, 19px); -webkit-transform: translate(-9px, 19px); transform: translate(-9px, 19px); } } @-webkit-keyframes IconProductionScissor { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 49% { -moz-transform: translate(34px, -75px); -o-transform: translate(34px, -75px); -ms-transform: translate(34px, -75px); -webkit-transform: translate(34px, -75px); transform: translate(34px, -75px); opacity: 1; filter: alpha(opacity=100); } 50% { -moz-transform: translate(34px, -75px); -o-transform: translate(34px, -75px); -ms-transform: translate(34px, -75px); -webkit-transform: translate(34px, -75px); transform: translate(34px, -75px); opacity: 0; filter: alpha(opacity=0); } 51% { -moz-transform: translate(-34px, 75px); -o-transform: translate(-34px, 75px); -ms-transform: translate(-34px, 75px); -webkit-transform: translate(-34px, 75px); transform: translate(-34px, 75px); opacity: 0; filter: alpha(opacity=0); } 52% { -moz-transform: translate(-34px, 75px); -o-transform: translate(-34px, 75px); -ms-transform: translate(-34px, 75px); -webkit-transform: translate(-34px, 75px); transform: translate(-34px, 75px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-moz-keyframes IconProductionScissor { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 49% { -moz-transform: translate(34px, -75px); -o-transform: translate(34px, -75px); -ms-transform: translate(34px, -75px); -webkit-transform: translate(34px, -75px); transform: translate(34px, -75px); opacity: 1; filter: alpha(opacity=100); } 50% { -moz-transform: translate(34px, -75px); -o-transform: translate(34px, -75px); -ms-transform: translate(34px, -75px); -webkit-transform: translate(34px, -75px); transform: translate(34px, -75px); opacity: 0; filter: alpha(opacity=0); } 51% { -moz-transform: translate(-34px, 75px); -o-transform: translate(-34px, 75px); -ms-transform: translate(-34px, 75px); -webkit-transform: translate(-34px, 75px); transform: translate(-34px, 75px); opacity: 0; filter: alpha(opacity=0); } 52% { -moz-transform: translate(-34px, 75px); -o-transform: translate(-34px, 75px); -ms-transform: translate(-34px, 75px); -webkit-transform: translate(-34px, 75px); transform: translate(-34px, 75px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-o-keyframes IconProductionScissor { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 49% { -moz-transform: translate(34px, -75px); -o-transform: translate(34px, -75px); -ms-transform: translate(34px, -75px); -webkit-transform: translate(34px, -75px); transform: translate(34px, -75px); opacity: 1; filter: alpha(opacity=100); } 50% { -moz-transform: translate(34px, -75px); -o-transform: translate(34px, -75px); -ms-transform: translate(34px, -75px); -webkit-transform: translate(34px, -75px); transform: translate(34px, -75px); opacity: 0; filter: alpha(opacity=0); } 51% { -moz-transform: translate(-34px, 75px); -o-transform: translate(-34px, 75px); -ms-transform: translate(-34px, 75px); -webkit-transform: translate(-34px, 75px); transform: translate(-34px, 75px); opacity: 0; filter: alpha(opacity=0); } 52% { -moz-transform: translate(-34px, 75px); -o-transform: translate(-34px, 75px); -ms-transform: translate(-34px, 75px); -webkit-transform: translate(-34px, 75px); transform: translate(-34px, 75px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes IconProductionScissor { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 49% { -moz-transform: translate(34px, -75px); -o-transform: translate(34px, -75px); -ms-transform: translate(34px, -75px); -webkit-transform: translate(34px, -75px); transform: translate(34px, -75px); opacity: 1; filter: alpha(opacity=100); } 50% { -moz-transform: translate(34px, -75px); -o-transform: translate(34px, -75px); -ms-transform: translate(34px, -75px); -webkit-transform: translate(34px, -75px); transform: translate(34px, -75px); opacity: 0; filter: alpha(opacity=0); } 51% { -moz-transform: translate(-34px, 75px); -o-transform: translate(-34px, 75px); -ms-transform: translate(-34px, 75px); -webkit-transform: translate(-34px, 75px); transform: translate(-34px, 75px); opacity: 0; filter: alpha(opacity=0); } 52% { -moz-transform: translate(-34px, 75px); -o-transform: translate(-34px, 75px); -ms-transform: translate(-34px, 75px); -webkit-transform: translate(-34px, 75px); transform: translate(-34px, 75px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } #IconCommunication { transform-origin: center center; -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } a:hover #IconCommunication { -webkit-animation: IconCommunicationMegaphone 1000ms infinite; -moz-animation: IconCommunicationMegaphone 1000ms infinite; -o-animation: IconCommunicationMegaphone 1000ms infinite; animation: IconCommunicationMegaphone 1000ms infinite; } #IconCommunication #MegaphoneLine1, #IconCommunication #MegaphoneLine2, #IconCommunication #MegaphoneLine2 { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } #IconCommunication #MegaphoneLine1, #IconCommunication #MegaphoneLine2, #IconCommunication #MegaphoneLine3 { -moz-transform: translate(-15px, 0px); -o-transform: translate(-15px, 0px); -ms-transform: translate(-15px, 0px); -webkit-transform: translate(-15px, 0px); transform: translate(-15px, 0px); opacity: 0; filter: alpha(opacity=0); } a:hover #IconCommunication #MegaphoneLine1, a:hover #IconCommunication #MegaphoneLine2, a:hover #IconCommunication #MegaphoneLine3 { -webkit-animation: IconCommunicationLine 1000ms infinite; -moz-animation: IconCommunicationLine 1000ms infinite; -o-animation: IconCommunicationLine 1000ms infinite; animation: IconCommunicationLine 1000ms infinite; } @-webkit-keyframes IconCommunicationLine { 20% { -moz-transform: translate(-15px, 0px); -o-transform: translate(-15px, 0px); -ms-transform: translate(-15px, 0px); -webkit-transform: translate(-15px, 0px); transform: translate(-15px, 0px); opacity: 0; filter: alpha(opacity=0); } 50% { -moz-transform: translate(15px, 0px); -o-transform: translate(15px, 0px); -ms-transform: translate(15px, 0px); -webkit-transform: translate(15px, 0px); transform: translate(15px, 0px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(15px, 0px); -o-transform: translate(15px, 0px); -ms-transform: translate(15px, 0px); -webkit-transform: translate(15px, 0px); transform: translate(15px, 0px); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes IconCommunicationLine { 20% { -moz-transform: translate(-15px, 0px); -o-transform: translate(-15px, 0px); -ms-transform: translate(-15px, 0px); -webkit-transform: translate(-15px, 0px); transform: translate(-15px, 0px); opacity: 0; filter: alpha(opacity=0); } 50% { -moz-transform: translate(15px, 0px); -o-transform: translate(15px, 0px); -ms-transform: translate(15px, 0px); -webkit-transform: translate(15px, 0px); transform: translate(15px, 0px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(15px, 0px); -o-transform: translate(15px, 0px); -ms-transform: translate(15px, 0px); -webkit-transform: translate(15px, 0px); transform: translate(15px, 0px); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes IconCommunicationLine { 20% { -moz-transform: translate(-15px, 0px); -o-transform: translate(-15px, 0px); -ms-transform: translate(-15px, 0px); -webkit-transform: translate(-15px, 0px); transform: translate(-15px, 0px); opacity: 0; filter: alpha(opacity=0); } 50% { -moz-transform: translate(15px, 0px); -o-transform: translate(15px, 0px); -ms-transform: translate(15px, 0px); -webkit-transform: translate(15px, 0px); transform: translate(15px, 0px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(15px, 0px); -o-transform: translate(15px, 0px); -ms-transform: translate(15px, 0px); -webkit-transform: translate(15px, 0px); transform: translate(15px, 0px); opacity: 0; filter: alpha(opacity=0); } } @keyframes IconCommunicationLine { 20% { -moz-transform: translate(-15px, 0px); -o-transform: translate(-15px, 0px); -ms-transform: translate(-15px, 0px); -webkit-transform: translate(-15px, 0px); transform: translate(-15px, 0px); opacity: 0; filter: alpha(opacity=0); } 50% { -moz-transform: translate(15px, 0px); -o-transform: translate(15px, 0px); -ms-transform: translate(15px, 0px); -webkit-transform: translate(15px, 0px); transform: translate(15px, 0px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(15px, 0px); -o-transform: translate(15px, 0px); -ms-transform: translate(15px, 0px); -webkit-transform: translate(15px, 0px); transform: translate(15px, 0px); opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes IconCommunicationMegaphone { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 100% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-moz-keyframes IconCommunicationMegaphone { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 100% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-o-keyframes IconCommunicationMegaphone { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 100% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes IconCommunicationMegaphone { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 100% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } } #IconFinance #Feuille, #IconFinance #Calcul { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } #IconFinance #Calcul > *[id^='#alcbtn01'] { opacity: 1; filter: alpha(opacity=100); } a:hover #IconFinance #Feuille { -webkit-animation: IconFinanceCenterVisuel 2000ms; -moz-animation: IconFinanceCenterVisuel 2000ms; -o-animation: IconFinanceCenterVisuel 2000ms; animation: IconFinanceCenterVisuel 2000ms; } a:hover #IconFinance #Calcul { -webkit-animation: IconFinanceCenterVisuel 2000ms; -moz-animation: IconFinanceCenterVisuel 2000ms; -o-animation: IconFinanceCenterVisuel 2000ms; animation: IconFinanceCenterVisuel 2000ms; } a:hover #IconFinance #Calcul #calcbtn01 { -webkit-animation: IconFinanceCalcBtn 400ms 1200ms; -moz-animation: IconFinanceCalcBtn 400ms 1200ms; -o-animation: IconFinanceCalcBtn 400ms 1200ms; animation: IconFinanceCalcBtn 400ms 1200ms; } a:hover #IconFinance #Calcul #calcbtn02 { -webkit-animation: IconFinanceCalcBtn 400ms 500ms; -moz-animation: IconFinanceCalcBtn 400ms 500ms; -o-animation: IconFinanceCalcBtn 400ms 500ms; animation: IconFinanceCalcBtn 400ms 500ms; } a:hover #IconFinance #Calcul #calcbtn03 { -webkit-animation: IconFinanceCalcBtn 400ms 900ms; -moz-animation: IconFinanceCalcBtn 400ms 900ms; -o-animation: IconFinanceCalcBtn 400ms 900ms; animation: IconFinanceCalcBtn 400ms 900ms; } a:hover #IconFinance #Calcul #calcbtn04 { -webkit-animation: IconFinanceCalcBtn 400ms 700ms; -moz-animation: IconFinanceCalcBtn 400ms 700ms; -o-animation: IconFinanceCalcBtn 400ms 700ms; animation: IconFinanceCalcBtn 400ms 700ms; } a:hover #IconFinance #Calcul #calcbtn05 { -webkit-animation: IconFinanceCalcBtn 400ms 1000ms; -moz-animation: IconFinanceCalcBtn 400ms 1000ms; -o-animation: IconFinanceCalcBtn 400ms 1000ms; animation: IconFinanceCalcBtn 400ms 1000ms; } a:hover #IconFinance #Calcul #calcbtn06 { -webkit-animation: IconFinanceCalcBtn 400ms 1400ms; -moz-animation: IconFinanceCalcBtn 400ms 1400ms; -o-animation: IconFinanceCalcBtn 400ms 1400ms; animation: IconFinanceCalcBtn 400ms 1400ms; } a:hover #IconFinance #Calcul #calcbtn07 { -webkit-animation: IconFinanceCalcBtn 400ms 6000ms; -moz-animation: IconFinanceCalcBtn 400ms 6000ms; -o-animation: IconFinanceCalcBtn 400ms 6000ms; animation: IconFinanceCalcBtn 400ms 6000ms; } a:hover #IconFinance #Calcul #calcbtn08 { -webkit-animation: IconFinanceCalcBtn 400ms 1200ms; -moz-animation: IconFinanceCalcBtn 400ms 1200ms; -o-animation: IconFinanceCalcBtn 400ms 1200ms; animation: IconFinanceCalcBtn 400ms 1200ms; } a:hover #IconFinance #Calcul #calcbtn09 { -webkit-animation: IconFinanceCalcBtn 400ms 800ms; -moz-animation: IconFinanceCalcBtn 400ms 800ms; -o-animation: IconFinanceCalcBtn 400ms 800ms; animation: IconFinanceCalcBtn 400ms 800ms; } @-webkit-keyframes IconFinanceCenterVisuel { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 20% { -moz-transform: translate(8px, -17px); -o-transform: translate(8px, -17px); -ms-transform: translate(8px, -17px); -webkit-transform: translate(8px, -17px); transform: translate(8px, -17px); } 80% { -moz-transform: translate(8px, -17px); -o-transform: translate(8px, -17px); -ms-transform: translate(8px, -17px); -webkit-transform: translate(8px, -17px); transform: translate(8px, -17px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-moz-keyframes IconFinanceCenterVisuel { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 20% { -moz-transform: translate(8px, -17px); -o-transform: translate(8px, -17px); -ms-transform: translate(8px, -17px); -webkit-transform: translate(8px, -17px); transform: translate(8px, -17px); } 80% { -moz-transform: translate(8px, -17px); -o-transform: translate(8px, -17px); -ms-transform: translate(8px, -17px); -webkit-transform: translate(8px, -17px); transform: translate(8px, -17px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-o-keyframes IconFinanceCenterVisuel { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 20% { -moz-transform: translate(8px, -17px); -o-transform: translate(8px, -17px); -ms-transform: translate(8px, -17px); -webkit-transform: translate(8px, -17px); transform: translate(8px, -17px); } 80% { -moz-transform: translate(8px, -17px); -o-transform: translate(8px, -17px); -ms-transform: translate(8px, -17px); -webkit-transform: translate(8px, -17px); transform: translate(8px, -17px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes IconFinanceCenterVisuel { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 20% { -moz-transform: translate(8px, -17px); -o-transform: translate(8px, -17px); -ms-transform: translate(8px, -17px); -webkit-transform: translate(8px, -17px); transform: translate(8px, -17px); } 80% { -moz-transform: translate(8px, -17px); -o-transform: translate(8px, -17px); -ms-transform: translate(8px, -17px); -webkit-transform: translate(8px, -17px); transform: translate(8px, -17px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-webkit-keyframes IconFinanceCalcBtn { 0% { opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } 100% { opacity: 1; filter: alpha(opacity=100); } } @-moz-keyframes IconFinanceCalcBtn { 0% { opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } 100% { opacity: 1; filter: alpha(opacity=100); } } @-o-keyframes IconFinanceCalcBtn { 0% { opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } 100% { opacity: 1; filter: alpha(opacity=100); } } @keyframes IconFinanceCalcBtn { 0% { opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } 100% { opacity: 1; filter: alpha(opacity=100); } } #IconSupply > path { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } a:hover #IconSupply #box01 { -webkit-animation: IconSupplyBox01Slide 1000ms; -moz-animation: IconSupplyBox01Slide 1000ms; -o-animation: IconSupplyBox01Slide 1000ms; animation: IconSupplyBox01Slide 1000ms; } a:hover #IconSupply #box02 { -webkit-animation: IconSupplyBox02Slide 1000ms; -moz-animation: IconSupplyBox02Slide 1000ms; -o-animation: IconSupplyBox02Slide 1000ms; animation: IconSupplyBox02Slide 1000ms; } a:hover #IconSupply #box03 { -webkit-animation: IconSupplyBox03Slide 1000ms; -moz-animation: IconSupplyBox03Slide 1000ms; -o-animation: IconSupplyBox03Slide 1000ms; animation: IconSupplyBox03Slide 1000ms; } a:hover #IconSupply #box04 { -webkit-animation: IconSupplyBox04Slide 1000ms; -moz-animation: IconSupplyBox04Slide 1000ms; -o-animation: IconSupplyBox04Slide 1000ms; animation: IconSupplyBox04Slide 1000ms; } @-webkit-keyframes IconSupplyBox01Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 49% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 50% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 51% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 52% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-moz-keyframes IconSupplyBox01Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 49% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 50% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 51% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 52% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-o-keyframes IconSupplyBox01Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 49% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 50% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 51% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 52% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes IconSupplyBox01Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 49% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 50% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 51% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 52% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-webkit-keyframes IconSupplyBox02Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 39% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 40% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 41% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 42% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-moz-keyframes IconSupplyBox02Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 39% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 40% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 41% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 42% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-o-keyframes IconSupplyBox02Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 39% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 40% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 41% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 42% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes IconSupplyBox02Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 39% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 40% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 41% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 42% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-webkit-keyframes IconSupplyBox03Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 29% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 30% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 31% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 32% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-moz-keyframes IconSupplyBox03Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 29% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 30% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 31% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 32% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-o-keyframes IconSupplyBox03Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 29% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 30% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 31% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 32% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes IconSupplyBox03Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 29% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 30% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 31% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 32% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-webkit-keyframes IconSupplyBox04Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 39% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 40% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 41% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 42% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-moz-keyframes IconSupplyBox04Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 39% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 40% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 41% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 42% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-o-keyframes IconSupplyBox04Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 39% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 40% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 41% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 42% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes IconSupplyBox04Slide { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 39% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 1; filter: alpha(opacity=100); } 40% { -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); opacity: 0; filter: alpha(opacity=0); } 41% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 0; filter: alpha(opacity=0); } 42% { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); opacity: 1; filter: alpha(opacity=100); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } #IconMagasin #Sac { -moz-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } a:hover #IconMagasin #Sac { -webkit-animation: IconMagasinSac 1200ms; -moz-animation: IconMagasinSac 1200ms; -o-animation: IconMagasinSac 1200ms; animation: IconMagasinSac 1200ms; } @-webkit-keyframes IconMagasinSac { 0% { -moz-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 39% { -moz-transform: translate(75px, -55px) rotate(25deg); -o-transform: translate(75px, -55px) rotate(25deg); -ms-transform: translate(75px, -55px) rotate(25deg); -webkit-transform: translate(75px, -55px) rotate(25deg); transform: translate(75px, -55px) rotate(25deg); } 40% { -moz-transform: translate(75px, -55px) rotate(25deg); -o-transform: translate(75px, -55px) rotate(25deg); -ms-transform: translate(75px, -55px) rotate(25deg); -webkit-transform: translate(75px, -55px) rotate(25deg); transform: translate(75px, -55px) rotate(25deg); } 41% { -moz-transform: translate(-75px, -55px) rotate(-25deg); -o-transform: translate(-75px, -55px) rotate(-25deg); -ms-transform: translate(-75px, -55px) rotate(-25deg); -webkit-transform: translate(-75px, -55px) rotate(-25deg); transform: translate(-75px, -55px) rotate(-25deg); } 42% { -moz-transform: translate(-75px, -55px) rotate(-25deg); -o-transform: translate(-75px, -55px) rotate(-25deg); -ms-transform: translate(-75px, -55px) rotate(-25deg); -webkit-transform: translate(-75px, -55px) rotate(-25deg); transform: translate(-75px, -55px) rotate(-25deg); } 100% { -moz-transform: translate(0px, 0px) rotate(0); -o-transform: translate(0px, 0px) rotate(0); -ms-transform: translate(0px, 0px) rotate(0); -webkit-transform: translate(0px, 0px) rotate(0); transform: translate(0px, 0px) rotate(0); } } @-moz-keyframes IconMagasinSac { 0% { -moz-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 39% { -moz-transform: translate(75px, -55px) rotate(25deg); -o-transform: translate(75px, -55px) rotate(25deg); -ms-transform: translate(75px, -55px) rotate(25deg); -webkit-transform: translate(75px, -55px) rotate(25deg); transform: translate(75px, -55px) rotate(25deg); } 40% { -moz-transform: translate(75px, -55px) rotate(25deg); -o-transform: translate(75px, -55px) rotate(25deg); -ms-transform: translate(75px, -55px) rotate(25deg); -webkit-transform: translate(75px, -55px) rotate(25deg); transform: translate(75px, -55px) rotate(25deg); } 41% { -moz-transform: translate(-75px, -55px) rotate(-25deg); -o-transform: translate(-75px, -55px) rotate(-25deg); -ms-transform: translate(-75px, -55px) rotate(-25deg); -webkit-transform: translate(-75px, -55px) rotate(-25deg); transform: translate(-75px, -55px) rotate(-25deg); } 42% { -moz-transform: translate(-75px, -55px) rotate(-25deg); -o-transform: translate(-75px, -55px) rotate(-25deg); -ms-transform: translate(-75px, -55px) rotate(-25deg); -webkit-transform: translate(-75px, -55px) rotate(-25deg); transform: translate(-75px, -55px) rotate(-25deg); } 100% { -moz-transform: translate(0px, 0px) rotate(0); -o-transform: translate(0px, 0px) rotate(0); -ms-transform: translate(0px, 0px) rotate(0); -webkit-transform: translate(0px, 0px) rotate(0); transform: translate(0px, 0px) rotate(0); } } @-o-keyframes IconMagasinSac { 0% { -moz-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 39% { -moz-transform: translate(75px, -55px) rotate(25deg); -o-transform: translate(75px, -55px) rotate(25deg); -ms-transform: translate(75px, -55px) rotate(25deg); -webkit-transform: translate(75px, -55px) rotate(25deg); transform: translate(75px, -55px) rotate(25deg); } 40% { -moz-transform: translate(75px, -55px) rotate(25deg); -o-transform: translate(75px, -55px) rotate(25deg); -ms-transform: translate(75px, -55px) rotate(25deg); -webkit-transform: translate(75px, -55px) rotate(25deg); transform: translate(75px, -55px) rotate(25deg); } 41% { -moz-transform: translate(-75px, -55px) rotate(-25deg); -o-transform: translate(-75px, -55px) rotate(-25deg); -ms-transform: translate(-75px, -55px) rotate(-25deg); -webkit-transform: translate(-75px, -55px) rotate(-25deg); transform: translate(-75px, -55px) rotate(-25deg); } 42% { -moz-transform: translate(-75px, -55px) rotate(-25deg); -o-transform: translate(-75px, -55px) rotate(-25deg); -ms-transform: translate(-75px, -55px) rotate(-25deg); -webkit-transform: translate(-75px, -55px) rotate(-25deg); transform: translate(-75px, -55px) rotate(-25deg); } 100% { -moz-transform: translate(0px, 0px) rotate(0); -o-transform: translate(0px, 0px) rotate(0); -ms-transform: translate(0px, 0px) rotate(0); -webkit-transform: translate(0px, 0px) rotate(0); transform: translate(0px, 0px) rotate(0); } } @keyframes IconMagasinSac { 0% { -moz-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 39% { -moz-transform: translate(75px, -55px) rotate(25deg); -o-transform: translate(75px, -55px) rotate(25deg); -ms-transform: translate(75px, -55px) rotate(25deg); -webkit-transform: translate(75px, -55px) rotate(25deg); transform: translate(75px, -55px) rotate(25deg); } 40% { -moz-transform: translate(75px, -55px) rotate(25deg); -o-transform: translate(75px, -55px) rotate(25deg); -ms-transform: translate(75px, -55px) rotate(25deg); -webkit-transform: translate(75px, -55px) rotate(25deg); transform: translate(75px, -55px) rotate(25deg); } 41% { -moz-transform: translate(-75px, -55px) rotate(-25deg); -o-transform: translate(-75px, -55px) rotate(-25deg); -ms-transform: translate(-75px, -55px) rotate(-25deg); -webkit-transform: translate(-75px, -55px) rotate(-25deg); transform: translate(-75px, -55px) rotate(-25deg); } 42% { -moz-transform: translate(-75px, -55px) rotate(-25deg); -o-transform: translate(-75px, -55px) rotate(-25deg); -ms-transform: translate(-75px, -55px) rotate(-25deg); -webkit-transform: translate(-75px, -55px) rotate(-25deg); transform: translate(-75px, -55px) rotate(-25deg); } 100% { -moz-transform: translate(0px, 0px) rotate(0); -o-transform: translate(0px, 0px) rotate(0); -ms-transform: translate(0px, 0px) rotate(0); -webkit-transform: translate(0px, 0px) rotate(0); transform: translate(0px, 0px) rotate(0); } } #IconInformatique #Mac { -moz-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } a:hover #IconInformatique #Mac { -webkit-animation: IconInfoMac 1200ms; -moz-animation: IconInfoMac 1200ms; -o-animation: IconInfoMac 1200ms; animation: IconInfoMac 1200ms; } @-webkit-keyframes IconInfoMac { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 39% { -moz-transform: translate(75px, 0px); -o-transform: translate(75px, 0px); -ms-transform: translate(75px, 0px); -webkit-transform: translate(75px, 0px); transform: translate(75px, 0px); } 40% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(75px, 0px); -o-transform: translate(75px, 0px); -ms-transform: translate(75px, 0px); -webkit-transform: translate(75px, 0px); transform: translate(75px, 0px); } 41% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(-75px, 0px); -o-transform: translate(-75px, 0px); -ms-transform: translate(-75px, 0px); -webkit-transform: translate(-75px, 0px); transform: translate(-75px, 0px); } 42% { -moz-transform: translate(-75px, 0px); -o-transform: translate(-75px, 0px); -ms-transform: translate(-75px, 0px); -webkit-transform: translate(-75px, 0px); transform: translate(-75px, 0px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-moz-keyframes IconInfoMac { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 39% { -moz-transform: translate(75px, 0px); -o-transform: translate(75px, 0px); -ms-transform: translate(75px, 0px); -webkit-transform: translate(75px, 0px); transform: translate(75px, 0px); } 40% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(75px, 0px); -o-transform: translate(75px, 0px); -ms-transform: translate(75px, 0px); -webkit-transform: translate(75px, 0px); transform: translate(75px, 0px); } 41% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(-75px, 0px); -o-transform: translate(-75px, 0px); -ms-transform: translate(-75px, 0px); -webkit-transform: translate(-75px, 0px); transform: translate(-75px, 0px); } 42% { -moz-transform: translate(-75px, 0px); -o-transform: translate(-75px, 0px); -ms-transform: translate(-75px, 0px); -webkit-transform: translate(-75px, 0px); transform: translate(-75px, 0px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-o-keyframes IconInfoMac { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 39% { -moz-transform: translate(75px, 0px); -o-transform: translate(75px, 0px); -ms-transform: translate(75px, 0px); -webkit-transform: translate(75px, 0px); transform: translate(75px, 0px); } 40% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(75px, 0px); -o-transform: translate(75px, 0px); -ms-transform: translate(75px, 0px); -webkit-transform: translate(75px, 0px); transform: translate(75px, 0px); } 41% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(-75px, 0px); -o-transform: translate(-75px, 0px); -ms-transform: translate(-75px, 0px); -webkit-transform: translate(-75px, 0px); transform: translate(-75px, 0px); } 42% { -moz-transform: translate(-75px, 0px); -o-transform: translate(-75px, 0px); -ms-transform: translate(-75px, 0px); -webkit-transform: translate(-75px, 0px); transform: translate(-75px, 0px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes IconInfoMac { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 39% { -moz-transform: translate(75px, 0px); -o-transform: translate(75px, 0px); -ms-transform: translate(75px, 0px); -webkit-transform: translate(75px, 0px); transform: translate(75px, 0px); } 40% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(75px, 0px); -o-transform: translate(75px, 0px); -ms-transform: translate(75px, 0px); -webkit-transform: translate(75px, 0px); transform: translate(75px, 0px); } 41% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(-75px, 0px); -o-transform: translate(-75px, 0px); -ms-transform: translate(-75px, 0px); -webkit-transform: translate(-75px, 0px); transform: translate(-75px, 0px); } 42% { -moz-transform: translate(-75px, 0px); -o-transform: translate(-75px, 0px); -ms-transform: translate(-75px, 0px); -webkit-transform: translate(-75px, 0px); transform: translate(-75px, 0px); } 100% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } #IconEcommerce { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 42px; height: 36px; } a:hover #IconEcommerce { -webkit-animation: IconEcommerce 600ms; -moz-animation: IconEcommerce 600ms; -o-animation: IconEcommerce 600ms; animation: IconEcommerce 600ms; } a:hover #IconEcommerce #Arrow { -webkit-animation: IconEcommerceArrow 600ms; -moz-animation: IconEcommerceArrow 600ms; -o-animation: IconEcommerceArrow 600ms; animation: IconEcommerceArrow 600ms; } @-webkit-keyframes IconEcommerce { 0% { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 39% { -moz-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } 40% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } 41% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(-100%, -50%); -o-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } 42% { -moz-transform: translate(-100%, -50%); -o-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } 100% { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @-moz-keyframes IconEcommerce { 0% { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 39% { -moz-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } 40% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } 41% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(-100%, -50%); -o-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } 42% { -moz-transform: translate(-100%, -50%); -o-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } 100% { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @-o-keyframes IconEcommerce { 0% { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 39% { -moz-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } 40% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } 41% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(-100%, -50%); -o-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } 42% { -moz-transform: translate(-100%, -50%); -o-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } 100% { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @keyframes IconEcommerce { 0% { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 39% { -moz-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } 40% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } 41% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(-100%, -50%); -o-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } 42% { -moz-transform: translate(-100%, -50%); -o-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } 100% { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @-webkit-keyframes IconEcommerceArrow { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 49% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(-20px, -20px); -o-transform: translate(-20px, -20px); -ms-transform: translate(-20px, -20px); -webkit-transform: translate(-20px, -20px); transform: translate(-20px, -20px); } 50% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(80px, 80px); -o-transform: translate(80px, 80px); -ms-transform: translate(80px, 80px); -webkit-transform: translate(80px, 80px); transform: translate(80px, 80px); } 100% { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-moz-keyframes IconEcommerceArrow { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 49% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(-20px, -20px); -o-transform: translate(-20px, -20px); -ms-transform: translate(-20px, -20px); -webkit-transform: translate(-20px, -20px); transform: translate(-20px, -20px); } 50% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(80px, 80px); -o-transform: translate(80px, 80px); -ms-transform: translate(80px, 80px); -webkit-transform: translate(80px, 80px); transform: translate(80px, 80px); } 100% { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-o-keyframes IconEcommerceArrow { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 49% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(-20px, -20px); -o-transform: translate(-20px, -20px); -ms-transform: translate(-20px, -20px); -webkit-transform: translate(-20px, -20px); transform: translate(-20px, -20px); } 50% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(80px, 80px); -o-transform: translate(80px, 80px); -ms-transform: translate(80px, 80px); -webkit-transform: translate(80px, 80px); transform: translate(80px, 80px); } 100% { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes IconEcommerceArrow { 0% { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 49% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(-20px, -20px); -o-transform: translate(-20px, -20px); -ms-transform: translate(-20px, -20px); -webkit-transform: translate(-20px, -20px); transform: translate(-20px, -20px); } 50% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(80px, 80px); -o-transform: translate(80px, 80px); -ms-transform: translate(80px, 80px); -webkit-transform: translate(80px, 80px); transform: translate(80px, 80px); } 100% { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } .pusher { height: 100%; z-index: 0; position: fixed; right: 0; width: 0; top: 0; } .newstab-open .pusher { z-index: 32000; } .newstab { bottom: 40px; right: 0; position: fixed; top: 0px; width: 375px; z-index: 1000; opacity: 0; background: #efefef; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition: all 0.4s; transition: all 0.4s; } @media only screen and (max-width: 1440px) { .newstab { width: 300px; } } @media only screen and (max-width: 992px) { .newstab { bottom: 0px; } } @media only screen and (max-width: 767px) { .newstab { width: 250px; } } .newstab-open .newstab { opacity: 1; -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } .newstab .navbar { margin: 0; border-radius: 0px; background: #efefef; border: none; border-top: 5px solid white; font-family: "futura-pt-condensed"; padding: 0 15px; } @media only screen and (max-width: 767px) { .newstab .navbar .navbar-nav { margin: 0 !important; } } .newstab .navbar .navbar-nav > li { position: relative; float: left; } .newstab .navbar .navbar-nav > li:before { content: ' '; display: block; width: 100%; position: absolute; bottom: 100%; height: 0px; background: #0082C3; transition: height 0.12s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .newstab .navbar .navbar-nav > li.active:before { height: 5px; } .newstab .navbar .navbar-nav > li.active a, .newstab .navbar .navbar-nav > li:hover a { color: #0082C3; } .newstab .navbar .navbar-nav > li a { font-size: 14px; font-size: 1.4rem; font-weight: 700; padding: 20px 15px; text-transform: uppercase; color: #2a2a2a; } @media only screen and (max-width: 1440px) { .newstab .navbar .navbar-nav > li a { padding: 15px 10px; font-size: 12px; font-size: 1.2rem; } } @media only screen and (max-width: 1200px) { .newstab .navbar .navbar-nav > li a { font-size: 11px; font-size: 1.1rem; } } .newstab .news-scroll { top: 65px; width: 100%; -webkit-overflow-scrolling: touch; } @media only screen and (max-width: 1440px) { .newstab .news-scroll { top: 55px; } } @media only screen and (max-width: 992px) { .newstab .news-scroll { overflow-y: auto !important; position: absolute; bottom: 0px; top: 55px; } } .newstab .newstab-list { margin: 0; list-style: none; padding: 0; overflow: hidden; } .newstab .newstab-list li { display: block; position: relative; opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .newstab .newstab-list li.waiting { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } .newstab article { position: relative; display: block; overflow: hidden; } .newstab article a { display: table; width: 100%; padding: 20px 25px; background: #f4f4f4; } @media only screen and (max-width: 1440px) { .newstab article a { padding: 15px 20px; } } .newstab article a:hover { text-decoration: none; } .newstab article a:hover h3, .newstab article #marque .intro ul li a:hover .visuel + span, #marque .intro ul li .newstab article a:hover .visuel + span { color: #0082C3; } .newstab article a:hover .visuel img { opacity: 0.4; filter: alpha(opacity=40); } .newstab article a > * { display: table-cell; vertical-align: middle; } .newstab article .post-content { padding-left: 20px; line-height: 1.2; padding-right: 0px; width: 100%; } .newstab article .visuel { vertical-align: middle; width: 80px; } .newstab article .visuel:before, .newstab article .visuel:after { content: ''; display: block; width: 7px; left: 60px; height: 50%; position: absolute; top: 0px; background: url("../img/newstab/line.png") no-repeat top center; z-index: 0; } @media only screen and (max-width: 1440px) { .newstab article .visuel:before, .newstab article .visuel:after { left: 45px; } } .newstab article .visuel:after { bottom: 0px; top: inherit; background-position: bottom center; } .newstab article .visuel > span { z-index: 10; position: relative; display: block; background: #0082C3; width: 80px; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ } @media only screen and (max-width: 1440px) { .newstab article .visuel > span { width: 60px; } } .newstab article .visuel > span img { transition: opacity 0.1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; opacity: 1; filter: alpha(opacity=100); } .newstab article h3, .newstab article #marque .intro ul li a .visuel + span, #marque .intro ul li a .newstab article .visuel + span { margin: 0; font-size: 13px; font-size: 1.3rem; line-height: 1.1; text-transform: uppercase; color: #2a2a2a; font-weight: 700; } @media only screen and (max-width: 1200px) { .newstab article h3, .newstab article #marque .intro ul li a .visuel + span, #marque .intro ul li a .newstab article .visuel + span { font-size: 12px; font-size: 1.2rem; } } .newstab article time { margin: 0; font-size: 10px; font-size: 1rem; line-height: 1; color: #0082C3; font-weight: 700; } @media only screen and (max-width: 1440px) { .newstab article time { font-size: 11px; font-size: 1.1rem; } } .newstab .offer a { background: #ececec; } .newstab .offer a:hover h3, .newstab .offer #marque .intro ul li a:hover .visuel + span, #marque .intro ul li .newstab .offer a:hover .visuel + span { color: #EC6607; } .newstab .offer a:hover .icon { -webkit-animation: hoverTranslateH .3s 1; -moz-animation: hoverTranslateH .3s 1; -o-animation: hoverTranslateH .3s 1; animation: hoverTranslateH .3s 1; } .newstab .offer .pastille { z-index: 20; background: #EC6607; padding: 5px; width: 80px; height: 80px; max-width: 80px; } @media only screen and (max-width: 1440px) { .newstab .offer .pastille { width: 60px; height: 60px; } } .newstab .offer .pastille svg { width: 70px; height: 70px; } @media only screen and (max-width: 1440px) { .newstab .offer .pastille svg { width: 50px; height: 50px; } } .newstab .offer h3, .newstab .offer #marque .intro ul li a .visuel + span, #marque .intro ul li a .newstab .offer .visuel + span { font-size: 16px; font-size: 1.6rem; line-height: 1.1; } @media only screen and (max-width: 1440px) { .newstab .offer h3, .newstab .offer #marque .intro ul li a .visuel + span, #marque .intro ul li a .newstab .offer .visuel + span { font-size: 14px; font-size: 1.4rem; } } .newstab .offer .city { display: block; color: #EC6607; font-weight: 700; text-transform: uppercase; line-height: 1; margin-top: 0px; font-size: 10px; font-size: 1rem; } @media only screen and (max-width: 1440px) { .newstab .offer .city { font-size: 11px; font-size: 1.1rem; } } .numbers { padding: 0; list-style: none; margin: 0; } .numbers > * { padding: 0; position: relative; } .numbers .num-container { position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; display: block; z-index: 10; text-align: center; text-decoration: none; } .numbers .num-container .num { position: absolute; width: 100%; display: block; top: 50%; color: white; font-family: "futura-pt-condensed"; font-weight: 300; font-size: 70px; font-size: 7rem; -moz-transform: translate(0px, -50%); -o-transform: translate(0px, -50%); -ms-transform: translate(0px, -50%); -webkit-transform: translate(0px, -50%); transform: translate(0px, -50%); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; /*.touch & { -webkit-transform: translateY(-40%); -moz-transform: translateY(-40%); -ms-transform: translateY(-40%); transform: translateY(-40%); }*/ } @media only screen and (max-width: 1440px) { .numbers .num-container .num { font-size: 55px; font-size: 5.5rem; } } @media only screen and (max-width: 1200px) { .numbers .num-container .num { font-size: 44px; font-size: 4.4rem; line-height: 1.4; } } @media only screen and (max-width: 767px) { .numbers .num-container .num { font-size: 36px; font-size: 3.6rem; line-height: 1.7; } } .numbers .num-container .num:before { position: relative; top: 0px; left: 50%; margin-left: -18px; content: ''; display: block; width: 35px; height: 35px; background: url("../img/shared/num-icon.svg") no-repeat center center; background-size: cover; -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (max-width: 1200px) { .numbers .num-container .num:before { width: 20px; height: 20px; margin-left: -10px; } } .numbers .num-container .num-legend { position: absolute; top: 50%; display: block; padding: 0px 10%; color: white; width: 100%; text-align: center; font-size: 22px; font-size: 2.2rem; line-height: 1.2; font-family: "futura-pt-condensed"; text-transform: uppercase; margin-top: 20px; -moz-transform: translate(0px, 150px); -o-transform: translate(0px, 150px); -ms-transform: translate(0px, 150px); -webkit-transform: translate(0px, 150px); transform: translate(0px, 150px); transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; opacity: 0; /* .touch & { top:60%; }*/ } @media only screen and (max-width: 1440px) { .numbers .num-container .num-legend { font-size: 16px; font-size: 1.6rem; line-height: 1.1; } } @media only screen and (max-width: 1200px) { .numbers .num-container .num-legend { font-size: 14px; font-size: 1.4rem; line-height: 1.1; margin-top: 10px; } } @media only screen and (max-width: 992px) { .numbers .num-container .num-legend { font-size: 14px; font-size: 1.4rem; line-height: 1.1; margin-top: 5px; } } .numbers .num-container:hover .num { -moz-transform: translate(0px, -90%); -o-transform: translate(0px, -90%); -ms-transform: translate(0px, -90%); -webkit-transform: translate(0px, -90%); transform: translate(0px, -90%); } .numbers .num-container:hover .num:before { -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); } .numbers .num-container:hover .num-legend { -moz-transform: translate(0px, -20%); -o-transform: translate(0px, -20%); -ms-transform: translate(0px, -20%); -webkit-transform: translate(0px, -20%); transform: translate(0px, -20%); opacity: 1; } .list-articles-container { position: absolute; left: 0; width: 100%; top: 0px; bottom: 0px; padding: 0 60px; top: 0px; overflow-y: auto; z-index: 10; } @media only screen and (max-width: 1440px) { .list-articles-container { padding: 0 30px; } } @media only screen and (max-width: 992px) { .list-articles-container { padding: 0 30px; position: relative; overflow: hidden; height: auto; } } @media only screen and (max-width: 767px) { .list-articles-container { padding-top: 40px !important; } } .list-articles { margin: 0; margin-left: -18px; margin-right: -18px; min-height: 350px; } @media only screen and (max-width: 992px) { .list-articles { margin-left: -10px; margin-right: -10px; } } .list-articles > * { padding: 0 18px; margin-bottom: 30px; } @media only screen and (max-width: 992px) { .list-articles > * { padding: 0 10px; margin-bottom: 20px; } } .list-articles article { display: block; position: relative; } .list-articles article > a { display: block; } .list-articles article > a .visuel { position: relative; background: #0082C3; } .list-articles article > a .visuel > img { width: 100%; opacity: 1; filter: alpha(opacity=100); } .list-articles article > a .visuel .view-more, .list-articles article > a .visuel { text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; opacity: 0; filter: alpha(opacity=0); transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .list-articles article > a .visuel .view-more .vcenter, .list-articles article > a .visuel .vcenter { padding: 0 !important; } .list-articles article > a .visuel .view-more .icon, .list-articles article > a .visuel .icon { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; } .list-articles article > a .visuel .view-more .icon img, .list-articles article > a .visuel .icon img { width: 18%; display: inline-block; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .list-articles article > a .visuel img { -webkit-transform: translate3D(0, -10px, 0); -moz-transform: translate3D(0, -10px, 0); -ms-transform: translate3D(0, -10px, 0); transform: translate3D(0, -10px, 0); } .list-articles article > a .visuel .view-more img { -webkit-transform: translate3D(-10px, 0, 0); -moz-transform: translate3D(-10px, 0, 0); -ms-transform: translate3D(-10px, 0, 0); transform: translate3D(-10px, 0, 0); } .list-articles article > a header { margin-top: 20px; font-family: "futura-pt"; font-size: 12px; font-size: 1.2rem; font-weight: 600; text-transform: uppercase; } @media only screen and (max-width: 992px) { .list-articles article > a header { margin-top: 10px; } } .list-articles article > a header .post-infos { white-space: nowrap; overflow: hidden; } .list-articles article > a header time { color: #929292; margin-right: 10px; } @media only screen and (max-width: 1170px) { .list-articles article > a header time { font-size: 10px; font-size: 1rem; } } @media only screen and (max-width: 767px) { .list-articles article > a header time { font-size: 12px; font-size: 1.2rem; } } .list-articles article > a header .cat { color: #0082C3; font-family: "futura-pt"; } @media only screen and (max-width: 1170px) { .list-articles article > a header .cat { font-size: 10px; font-size: 1rem; } } @media only screen and (max-width: 767px) { .list-articles article > a header .cat { font-size: 12px; font-size: 1.2rem; } } .list-articles article > a header h3, .list-articles #marque .intro ul li article > a header .visuel + span, #marque .intro ul li .list-articles article > a header .visuel + span { margin: 0; height: 60px; overflow: hidden; color: #414141; font-size: 16px; font-size: 1.6rem; line-height: 1; transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (max-width: 767px) { .list-articles article > a header h3, .list-articles #marque .intro ul li article > a header .visuel + span, #marque .intro ul li .list-articles article > a header .visuel + span { height: auto; font-size: 18px; font-size: 1.8rem; } } .no-touch .list-articles article > a:hover .visuel .view-more, .no-touch .list-articles article > a:hover .visuel { opacity: 1; filter: alpha(opacity=100); } .no-touch .list-articles article > a:hover .visuel .view-more .icon img, .no-touch .list-articles article > a:hover .visuel .icon img { -webkit-transform: translate3D(0, 0, 0); -moz-transform: translate3D(0, 0, 0); -ms-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); } .no-touch .list-articles article > a:hover .visuel > img { opacity: 0.2; filter: alpha(opacity=20); } .no-touch .list-articles article > a:hover h3, .no-touch .list-articles #marque .intro ul li article > a:hover .visuel + span, #marque .intro ul li .no-touch .list-articles article > a:hover .visuel + span { color: #0082C3; } .list-articles a { text-decoration: none; } .list-articles .featured h3, .list-articles .featured #marque .intro ul li a .visuel + span, #marque .intro ul li a .list-articles .featured .visuel + span { font-size: 30px; font-size: 3rem; height: auto; max-height: 75px; } @media only screen and (max-width: 1170px) { .list-articles .featured h3, .list-articles .featured #marque .intro ul li a .visuel + span, #marque .intro ul li a .list-articles .featured .visuel + span { font-size: 16px; font-size: 1.6rem; height: auto; } } .list-articles .featured footer { margin-top: 20px; } @media only screen and (max-width: 1170px) { .list-articles .featured footer { display: none; } } .passion-block { background-size: cover; text-align: left; background: url("../img/blocks/passion_bg.jpg") no-repeat bottom right #bcd5d9; background-size: auto 100%; } @media only screen and (max-width: 1440px) { .passion-block { background-position: right center; } } @media only screen and (max-width: 992px) { .passion-block { width: 100% !important; position: relative !important; height: auto !important; background-size: cover !important; background-position: 0px center; } } .passion-block .vcenter { padding: 20px 10%; max-width: 500px; } @media only screen and (max-width: 1440px) { .passion-block .vcenter { max-width: 400px; } } @media only screen and (max-width: 992px) { .passion-block .vcenter { padding: 40px 10% !important; } } .passion-block h2 { margin: 0; color: #0082C3; margin-bottom: 20px; } @media only screen and (max-width: 992px) { .passion-block h2 { font-size: 24px; font-size: 2.4rem; } } .passion-block p { color: #0082C3; } @media only screen and (max-width: 767px) { .passion-block p { max-width: 50%; } } .passion-block .btn-more { background: #0082C3; color: white; } .passion-block .btn-more:before { background: url("../img/shared/icon-more-white.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .passion-block .btn-more:before { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/icon-more-white2x.png"); background-size: 16px 16px; } } .myPopupPassionate .mfp-content { max-width: 640px; } .popup-passsionate { padding: 50px; padding-right: 50%; background: url("../img/passionne/popup_bg.png") no-repeat center center #DDEBED; background-size: cover; } @media only screen and (max-width: 767px) { .popup-passsionate { padding: 30px; padding-bottom: 60px; background-position: right bottom; background-size: contain; } } .popup-passsionate .mfp-close { background: none; color: #0082C3; top: 0; right: 0; font-weight: 600; } .popup-passsionate h1 { font-size: 45px; font-size: 4.5rem; line-height: 0.9; margin: 0; color: #0082C3; margin: 0px; } @media only screen and (max-width: 767px) { .popup-passsionate h1 { font-size: 25px; font-size: 2.5rem; } } .popup-passsionate p { margin: 40px 0px; max-width: 200px; } @media only screen and (max-width: 767px) { .popup-passsionate p { margin: 20px 0px; } } .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mfp-fade.mfp-bg.mfp-ready { opacity: 0.8; } .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } .short-block { width: 55%; position: absolute; height: 100%; right: 0; top: 0; background-size: cover; overflow: hidden; } @media only screen and (min-width: 767px) { .short-block { background: url("../img/events/short-fallback.png") no-repeat center center; } } @media only screen and (max-width: 767px) { .short-block { background: url("../img/events/short-fallback_mobile.jpg") no-repeat center center #5e7996; background-size: cover; } } @media only screen and (max-width: 992px) { .short-block { width: 100% !important; position: relative !important; height: auto !important; } } .short-block #logo_short { width: 150px; height: auto; position: absolute; top: 50%; right: 10%; margin-top: -40px; } @media only screen and (max-width: 767px) { .short-block #logo_short { position: relative; top: 0; right: 0; margin: 0; margin-bottom: 20px; } } .short-block .step { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; padding: 0 10%; transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .short-block .intro { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); color: white; position: relative; } .short-block .intro h1 { font-size: 45px; font-size: 4.5rem; margin: 0px; } @media only screen and (max-width: 1440px) { .short-block .intro h1 { font-size: 30px; font-size: 3rem; } } @media only screen and (max-width: 767px) { .short-block .intro h1 { font-size: 24px; font-size: 2.4rem; } } .short-block .intro p { margin: 40px 0; margin-right: 200px; } @media only screen and (max-width: 1440px) { .short-block .intro p { font-size: 12px; font-size: 1.2rem; } } @media only screen and (max-width: 767px) { .short-block .intro p { margin: 20px 0; } } .short-block .inscription { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); color: white; } .short-block .inscription .header { position: relative; } .short-block .inscription .back-to { position: absolute; width: 5%; left: -8%; top: 25%; border-color: white; } @media only screen and (max-width: 767px) { .short-block .inscription .back-to { position: relative; width: 40px; display: inline-block; left: 0px; top: 0px; margin: 0; margin-bottom: 10px; float: none; } } .short-block .inscription h3, .short-block .inscription #marque .intro ul li a .visuel + span, #marque .intro ul li a .short-block .inscription .visuel + span { font-size: 54px; font-size: 5.4rem; margin: 0; color: #1fa689; margin-top: -3px; } @media only screen and (max-width: 767px) { .short-block .inscription h3, .short-block .inscription #marque .intro ul li a .visuel + span, #marque .intro ul li a .short-block .inscription .visuel + span { font-size: 40px; font-size: 4rem; } } @media only screen and (max-height: 680px) { .short-block .inscription h3, .short-block .inscription #marque .intro ul li a .visuel + span, #marque .intro ul li a .short-block .inscription .visuel + span { font-size: 34px; font-size: 3.4rem; } } .short-block .inscription h2 { font-size: 34px; font-size: 3.4rem; margin: 0; } @media only screen and (max-height: 680px) { .short-block .inscription h2 { font-size: 24px; font-size: 2.4rem; } } .short-block .inscription #gforms_confirmation_message { padding: 0px; font-size: 18px; font-size: 1.8rem; } .short-block .vcenter { padding: 20px 0 !important; } @media only screen and (max-width: 992px) { .short-block .vcenter { padding: 60px 0 !important; } } @media only screen and (max-width: 767px) { .short-block .vcenter { padding: 40px 0 !important; } } .short-block .gform_wrapper li { margin-bottom: 8px; } .short-block form { position: relative; margin-top: 20px; } @media only screen and (max-height: 680px) { .short-block form { margin-top: 10px; } } .short-block form .gform_fields { position: relative; } .short-block form .gfield { position: relative; } .short-block form .gfield .ginput_container > * { padding-left: 55px; } .short-block form label { margin: 0; width: 55px; position: absolute; height: 100%; top: 0px; left: 0px; text-indent: -9999px; overflow: hidden; display: block !important; cursor: pointer; background: url(../img/form/icon-name.svg) no-repeat center center; background-size: 25px auto; z-index: 10; } .short-block form #field_1_1 label { background-image: url(../img/form/icon-name.svg); } .short-block form #field_1_2 label { background-image: url(../img/form/icon-sport.svg); } .short-block form #field_1_3 label { background-image: url(../img/form/icon-mail.svg); } .short-block form #field_1_4 label { background-image: url(../img/form/icon-school.svg); } .short-block form #field_1_5 label { background-image: url(../img/form/icon-degree.svg); } .short-block form #field_1_8 label { background-image: url(../img/form/icon-shop.svg); } .short-block form #field_1_9 label { background-image: url(../img/form/icon-when.svg); } .short-block form .ginput_container { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.2); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .short-block form .ginput_container:before { content: ''; display: block; } .short-block form .ginput_container input, .short-block form .ginput_container select { border: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; border-radius: 0px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ padding: 12px 20px; height: 46px; font-weight: 700; color: white; padding-left: 0px; box-shadow: none; background: none; padding-left: 55px; text-transform: uppercase; /* firefox 19+ */ /* ie */ } @media only screen and (max-width: 1440px) { .short-block form .ginput_container input, .short-block form .ginput_container select { font-size: 12px; font-size: 1.2rem; padding: 9px 20px; height: 36px; } } .short-block form .ginput_container input::-webkit-input-placeholder, .short-block form .ginput_container select::-webkit-input-placeholder { color: white; opacity: 1; filter: alpha(opacity=100); text-transform: uppercase; } .short-block form .ginput_container input::-moz-placeholder, .short-block form .ginput_container select::-moz-placeholder { color: white; opacity: 1; filter: alpha(opacity=100); text-transform: uppercase; } .short-block form .ginput_container input:-ms-input-placeholder, .short-block form .ginput_container select:-ms-input-placeholder { color: white; opacity: 1; filter: alpha(opacity=100); text-transform: uppercase; } .short-block form .ginput_container input:-moz-placeholder, .short-block form .ginput_container select:-moz-placeholder { color: white; opacity: 1; filter: alpha(opacity=100); text-transform: uppercase; } .short-block form .gf_left_half { width: 40%; } @media only screen and (max-width: 1440px) { .short-block form .gf_left_half { width: 50%; } } .short-block form .gf_right_half, .short-block form .gform_footer { width: 60%; } @media only screen and (max-width: 1440px) { .short-block form .gf_right_half, .short-block form .gform_footer { width: 50%; } } .short-block form .gf_left_half { padding-right: 7px; float: left; clear: left; } @media only screen and (max-width: 1440px) { .short-block form .gf_left_half { padding-right: 4px; } } @media only screen and (max-width: 767px) { .short-block form .gf_left_half { float: none; width: 100%; padding: 0px !important; } } .short-block form .gf_right_half { position: absolute; top: 0; right: 0; padding-left: 7px; } @media only screen and (max-width: 1440px) { .short-block form .gf_right_half { padding-left: 4px; } } @media only screen and (max-width: 767px) { .short-block form .gf_right_half { position: relative; top: 0 !important; width: 100%; padding: 0px !important; } } .short-block form .gf_right_half label { left: 7px; } @media only screen and (max-width: 1440px) { .short-block form .gf_right_half label { left: 4px; } } .short-block form .gf_right_half label { display: none; } .short-block form .gf_right_half + .gf_right_half { top: 54px; } @media only screen and (max-width: 1440px) { .short-block form .gf_right_half + .gf_right_half { top: 44px; } } .short-block form .gf_right_half + .gf_right_half + .gf_right_half { top: 108px; } @media only screen and (max-width: 1440px) { .short-block form .gf_right_half + .gf_right_half + .gf_right_half { top: 88px; } } .short-block form .gfield.disabled { opacity: 0.3; filter: alpha(opacity=30); } .short-block form select { text-transform: uppercase; -webkit-appearance: none; } .short-block form select option { background: white; padding: 12px; color: #2a2a2a; font-weight: 300; text-transform: uppercase; } .short-block form .gform_footer { position: absolute; right: 0px; top: 133px; padding-top: 30px; padding-left: 7px; text-align: right; } @media only screen and (max-width: 1440px) { .short-block form .gform_footer { top: 102px; padding-left: 4px; } } @media only screen and (max-width: 767px) { .short-block form .gform_footer { position: relative; top: 0px; padding: 0px; width: 100%; } } .short-block form .gform_footer #gform_submit_button_1 { display: block; width: 100%; padding: 15px 20px 15px; } @media only screen and (max-width: 1440px) { .short-block form .gform_footer #gform_submit_button_1 { padding: 11px 20px 10px; } } .short-block form #gform_submit_button_1[disabled="disabled"]:before { width: 20px; height: 12px; background: url("../img/shared/loader.gif") no-repeat center center; margin-top: -6px; opacity: 0.8; filter: alpha(opacity=80); } .short-block form #gform_ajax_spinner_1 { display: none !important; } .short-block form .gfield_description, .short-block form .validation_error { display: none; } .short-block form .gfield_error .ginput_container { background: rgba(228, 50, 42, 0.5); position: relative; } .short-block form .gfield_error .ginput_container input { box-shadow: none; } .short-block #no-sessions { position: relative; top: 1px; height: 49px; width: auto; } @media only screen and (max-width: 767px) { .short-block #no-sessions { width: auto; height: 40px; } } .short-block.showForm .intro { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); position: absolute; } .short-block.showForm .inscription { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); position: relative; } .programme-block { text-align: center; overflow-y: auto; padding: 0 40px !important; } @media only screen and (min-width: 767px) { .programme-block { background: url("../img/blocks/programme_bg.jpg") no-repeat center center; background-size: cover; } } @media only screen and (max-width: 767px) { .programme-block { background: url("../img/blocks/programme_bg_mobile.jpg") no-repeat bottom center #c9b8a4; background-size: cover; } } @media only screen and (max-width: 992px) { .programme-block { width: 100% !important; position: relative !important; height: auto !important; bottom: 0; } } @media only screen and (max-width: 767px) { .programme-block { padding: 0px 40px !important; background-position: center bottom; } } .programme-block .vcenter { position: relative; z-index: 10; padding: 40px 0px !important; } @media only screen and (max-width: 992px) { .programme-block .vcenter { padding: 60px 0 !important; } } @media only screen and (max-width: 767px) { .programme-block .vcenter { padding: 40px 0 !important; } } .programme-block h2 { margin-top: 0; margin-bottom: 20px; } @media only screen and (max-width: 1440px) { .programme-block h2 { margin-bottom: 10px; } } @media only screen and (max-width: 767px) { .programme-block h2 { font-size: 24px; font-size: 2.4rem; } } .programme-block p { max-width: 600px; margin: 0 auto; font-weight: 400; } @media only screen and (max-width: 1440px) { .programme-block p { font-size: 12px; font-size: 1.2rem; } } .programme-block a.btn-video { max-width: 490px; margin: 40px auto 0; } .programme-block a.btn-video img { width: 100%; } .programme-block .logo { max-width: 137px; margin: 0 auto; margin-bottom: 40px; } @media only screen and (max-width: 767px) { .programme-block .logo { max-width: 100px; } } .programme-block .left { float: left; width: 75%; margin-left: 8%; } @media only screen and (max-width: 992px) { .programme-block .left { float: none; width: 85%; margin-left: 15%; } } @media only screen and (max-width: 767px) { .programme-block .left { margin-top: 20px; width: 100%; margin-left: 0%; } } .myPopupGptw .mfp-content { max-width: 1180px; } @media only screen and (max-width: 992px) { .myPopupGptw .mfp-content { max-width: 450px; } } @media only screen and (max-width: 767px) { .myPopupGptw .mfp-content { max-width: 100%; padding: 6px 0px; width: 100% !important; } } .popup-gptw { padding: 60px; background: #fff; } @media only screen and (max-width: 992px) { .popup-gptw { padding: 40px; } } .popup-gptw .mfp-close { background: none; color: #1c7fc5; top: 36px; right: 32px; font-weight: 600; } @media only screen and (max-width: 992px) { .popup-gptw .mfp-close { top: 0; right: 0; } } .popup-gptw h2 { font-size: 39px; font-size: 3.9rem; line-height: 0.9; margin: 10px 0 0; color: #1c7fc5; margin: 0px; margin-bottom: 60px; } @media only screen and (max-width: 992px) { .popup-gptw h2 { font-size: 25px; font-size: 2.5rem; margin-bottom: 40px; text-align: center; } } .popup-gptw h2 span { font-size: 30px; font-size: 3rem; font-weight: 300; display: block; } @media only screen and (max-width: 992px) { .popup-gptw h2 span { font-size: 20px; font-size: 2rem; } } .popup-gptw p { color: #b82130; margin: 15px 0px; max-width: 220px; font-size: 15px; font-size: 1.5rem; font-weight: 500; } @media only screen and (max-width: 992px) { .popup-gptw p { margin: 20px 0px; max-width: 100%; } } .popup-gptw .content-pop { padding-left: 40px; margin-left: 66%; } @media only screen and (max-width: 992px) { .popup-gptw .content-pop { margin: 0px; padding: 0px; text-align: center; } } .popup-gptw .content-pop p../img { margin-top: 0; max-width: 100%; } .popup-gptw .content-pop p../img img { display: inline-block; } .popup-gptw .visuel-popup { float: left; max-width: 780px; width: 66%; margin-left: -60px; margin-bottom: -60px; } @media only screen and (max-width: 992px) { .popup-gptw .visuel-popup { float: none; margin-left: -40px; margin-right: -40px; width: auto; margin-bottom: 40px; } } .simple-page { background: #f8f8f8; overflow-y: auto !important; } .simple-page .simple-content { padding: 60px; } @media only screen and (max-width: 767px) { .simple-page .simple-content { padding: 40px; } } .simple-page .simple-content h1 { margin: 0; margin-bottom: 40px; } .page-template-default .curtain { background: white; } .page-template-default #loaderPage span { background: url("../img/loader/loader-g.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .page-template-default #loaderPage span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g2x.png"); background-size: 75px 525px; } } @media only screen and (max-width: 767px) { .page-template-default #loaderPage span { background: url("../img/loader/loader-g-min.png") no-repeat center center; } } @media only screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 2.6 / 2), only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-resolution: 1.3dppx) { .page-template-default #loaderPage span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g-min2x.png"); background-size: 30px 210px; } } .page-404 { background: #F8F8F8; overflow-y: auto !important; } .page-404 .visuel { text-align: right; } @media only screen and (max-width: 992px) { .page-404 .visuel { text-align: left; } } .page-404 .visuel .visuel-404 { display: inline-block; width: 60%; max-width: 350px; height: auto; margin-top: -30px; } @media only screen and (max-width: 992px) { .page-404 .visuel .visuel-404 { margin-top: 0px; } } .page-404 .visuel .visuel-404 object { width: 100%; display: block; height: auto; position: relative; padding-top: 100%; } .page-404 .visuel .visuel-404 object svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } @media only screen and (max-width: 767px) { .page-404 .row > * { padding: 0px 60px; } } .page-404 .vcenter { padding: 40px auto; } .page-404 .vcenter .inner { display: table-cell; vertical-align: middle; } .page-404 h1 { font-size: 100px; font-size: 10rem; margin: 0px; } @media only screen and (max-width: 1200px) { .page-404 h1 { font-size: 80px; font-size: 8rem; } } @media only screen and (max-width: 992px) { .page-404 h1 { font-size: 60px; font-size: 6rem; } } .page-404 h1 + span { text-transform: uppercase; color: #919191; font-size: 12px; font-size: 1.2rem; margin-bottom: 5%; display: block; font-weight: 400; } .page-404 .list-backs { margin: 0px; } .page-404 .list-backs li { margin-bottom: 10px; } .page-404 .list-backs a { display: inline-block; color: #0082C3; text-transform: uppercase; min-height: 23px; font-weight: 400; line-height: 23px; } .page-404 .list-backs a:before { content: ''; display: block; float: left; width: 23px; height: 23px; background: url("../img/shared/link-arrow.png") no-repeat center center; margin-right: 10px; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .page-404 .list-backs a:before { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/link-arrow2x.png"); background-size: 23px 23px; } } .error404 #loaderPage { border-color: #e5e5e5; } .error404 #loaderPage span { background: url("../img/loader/loader-g.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .error404 #loaderPage span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g2x.png"); background-size: 75px 525px; } } @media only screen and (max-width: 767px) { .error404 #loaderPage span { background: url("../img/loader/loader-g-min.png") no-repeat center center; } } @media only screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 2.6 / 2), only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-resolution: 1.3dppx) { .error404 #loaderPage span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g-min2x.png"); background-size: 30px 210px; } } .error404 .curtain { background: white; } .home .gptw__link { display: block; z-index: 10; max-width: 280px; position: absolute; bottom: 100px; text-align: center; right: 20px; z-index: 100; } @media only screen and (max-width: 767px) { .home .gptw__link { position: relative; margin: -40px auto 40px; width: 220px; right: 0; bottom: 0; } } #home > section { position: absolute; z-index:1; top: 0; left: 0; width: 100%; padding: 0 40px; overflow: hidden !important; height: 100% !important; } @media only screen and (max-width: 767px) { #home > section { ; } } #home > section .vcenter { padding: 40px 0px; } @media only screen and (max-width: 767px) { #home > section .vcenter { padding: 60px 0px !important; } } #home h2 { color: white; font-size: 60px; font-size: 6rem; line-height: 1; margin: 0px; } @media only screen and (max-width: 1440px) { #home h2 { font-size: 50px; font-size: 5rem; } } @media only screen and (max-width: 1200px) { #home h2 { font-size: 40px; font-size: 4rem; } } @media only screen and (max-width: 767px) { #home h2 { margin: 10px 0px; } } #home .list-icons { margin-top: 40px; margin-left: 0px; text-align: center; } #home .list-icons li { padding: 0 40px; margin-bottom: 20px; } @media only screen and (max-width: 1440px) { #home .list-icons li { padding: 20px 20px; } } #home .list-icons a { display: block; position: relative; } #home .list-icons a span { position: absolute; top: 100%; font-family:tahoma left: 50%; padding-top: 10px; color: white; font-size: 2.8vh; line-height: 1.1; text-transform: uppercase; width: 100%; max-width: 75px; -moz-transform: translate(-50%, 0px); -o-transform: translate(-50%, 0px); -ms-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); } @media only screen and (max-width: 1200px) { #home .list-icons a span { font-size: 2.4vh; font-weight:600 } } #home .list-icons .icon { width: 75px; height: 75px; margin: 0 auto 30px; overflow: hidden; -webkit-border-radius: 38px; -moz-border-radius: 38px; -ms-border-radius: 38px; border-radius: 38px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ } @media only screen and (max-width: 1200px) { #home .list-icons .icon { width: 60px; height: 60px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ } } #home .list-icons .icon svg { display: block; } #home .content { text-align: center; } #home .gptw { z-index: 2; background: url("../img/bac-footer.jpg") no-repeat top center #fff; background-size: auto 100%; } @media only screen and (min-width: 768px) { #home .gptw { -moz-transform: translate(0, 100%); -o-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -webkit-transform: translate(0, 100%); transform: translate(0, 100%); transition-property: transform, -webkit-transform, opacity; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } } @media only screen and (min-width: 768px) { #home .gptw .vcenter { padding-top: 20px; } } #home .gptw .logo_gptw { display: block; margin: 0 auto 20px; max-width: 300px; } @media only screen and (min-width: 768px) { #home .gptw .logo_gptw { width: 100%; max-width: 150px; -moz-transform: translate(0, 400px); -o-transform: translate(0, 400px); -ms-transform: translate(0, 400px); -webkit-transform: translate(0, 400px); transform: translate(0, 400px); transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } } #home .gptw .title_gptw { display: block; margin: 0 auto 0px; width: 80%; } @media only screen and (min-width: 768px) { #home .gptw .title_gptw { max-width: 300px; -moz-transform: translate(0, 500px); -o-transform: translate(0, 500px); -ms-transform: translate(0, 500px); -webkit-transform: translate(0, 500px); transform: translate(0, 500px); transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } } @media only screen and (min-width: 1600px) { #home .gptw .title_gptw { max-width: 400px; } } #home .gptw p { font-size: 1.4rem; line-height: 1.2; color: #00233a; margin: 0px auto 60px; } @media only screen and (min-width: 768px) { #home .gptw p { font-size: 1.8rem; -moz-transform: translate(0, 450px); -o-transform: translate(0, 450px); -ms-transform: translate(0, 450px); -webkit-transform: translate(0, 450px); transform: translate(0, 450px); transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } } @media only screen and (min-width: 1600px) { #home .gptw p { font-size: 2.6rem; } } #home .gptw p strong { display: block; line-height: 1; font-size: 2rem; } @media only screen and (min-width: 768px) { #home .gptw p strong { font-size: 3rem; } } @media only screen and (min-width: 1600px) { #home .gptw p strong { font-size: 4.2rem; } } #home .gptw p span { color: #ba1f2c; font-weight: 400; } #home .gptw .btn { margin-top: -80px; background: #ba1f2c; } @media only screen and (min-width: 768px) { #home .gptw .btn { -moz-transform: translate(0, 500px); -o-transform: translate(0, 500px); -ms-transform: translate(0, 500px); -webkit-transform: translate(0, 500px); transform: translate(0, 500px); transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } } #home .gptw .go-to { opacity: 0; top: 30px; bottom: inherit; -moz-transform: translate(-50%, 50px); -o-transform: translate(-50%, 50px); -ms-transform: translate(-50%, 50px); -webkit-transform: translate(-50%, 50px); transform: translate(-50%, 50px); color: #000 !important; } #home .gptw .go-to .arrow { margin-top: 0; margin-bottom: 15px; } @media only screen and (max-width: 1440px) { #home .gptw .go-to .arrow { margin-bottom: 8px; } } #home .gptw .go-to .arrow svg { -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } #home .gptw .go-to .arrow svg > * { fill: #000; } #home .jobs { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0s; } @media only screen and (min-width: 767px) { #home .jobs { background: url("../img/background.jpg") no-repeat center bottom; background-size: cover; } } @media only screen and (max-width: 767px) { #home .jobs { background: url("../img/background.jpg") no-repeat center bottom; background-size: cover; } } #home .jobs .vcenter { padding-bottom: 80px; transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 50ms; } @media only screen and (max-width: 1440px) { #home .jobs .vcenter { padding-bottom: 60px; } } #home .jobs .headline { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #home .jobs .headline .logo { width: 105px; height: 27px; display: block; margin: 0 auto; margin-bottom: 5px; } #home .jobs .headline p { font-size: 17px; font-size: 1.7rem; margin: 0px; color: white; } @media only screen and (max-width: 1440px) { #home .jobs .headline p { font-size: 15px; font-size: 1.5rem; } } @media only screen and (max-width: 1200px) { #home .jobs .headline p { font-size: 13px; font-size: 1.3rem; } } #home .jobs .jobsearch { position: relative; max-width: 600px; margin: 0 auto; margin-top: 40px; transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 50ms; } @media only screen and (max-width: 767px) { #home .jobs .jobsearch { max-width: 90%; } } #home .jobs .jobsearch .searchcontainer .form-group { margin: 0px; } #home .jobs .jobsearch .searchcontainer .icon { display: block; position: absolute; top: 50%; margin-top: -8px; width: 20px; height: 16px; left: 20px; } @media only screen and (max-width: 767px) { #home .jobs .jobsearch .searchcontainer .icon { left: 20px; } } #home .jobs .jobsearch .searchcontainer .form-control { background: rgba(0, 0, 0, 0.5); border: none; box-shadow: none; padding: 20px 10% 20px 60px; height: auto; color: white; font-size: 17px; font-size: 1.7rem; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ transition: background 300ms cubic-bezier(0.77, 0, 0.175, 1) 0s; } @media only screen and (max-width: 1200px) { #home .jobs .jobsearch .searchcontainer .form-control { padding: 14px 18% 14px 60px; font-size: 14px; font-size: 1.4rem; } } #home .jobs .jobsearch .searchcontainer .form-control:focus { background: rgba(0, 0, 0, 0.7); } #home .jobs .jobsearch .searchcontainer .loader { display: block; position: absolute; top: 50%; margin-top: -7px; width: 14px; height: 14px; right: 15px; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1) 0s; } #home .jobs .jobsearch .searchcontainer .loader.show { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -webkit-animation: Spin 800ms infinite linear 300ms; -moz-animation: Spin 800ms infinite linear 300ms; -o-animation: Spin 800ms infinite linear 300ms; animation: Spin 800ms infinite linear 300ms; } #home .jobs .jobsearch .searchresults { overflow: hidden; visibility: hidden; position: absolute; top: 100%; width: 100%; z-index: 100; transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1) 0s; -webkit-border-radius: 0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -ms-border-radius: 0px 0px 6px 6px; border-radius: 0px 0px 6px 6px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ } #home .jobs .jobsearch .searchresults .wrapper { position: relative; background: white; padding: 20px 30px; padding-bottom: 0px; transition-property: transform, -webkit-transform; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0s; -moz-transform: translate(0, -100%); -o-transform: translate(0, -100%); -ms-transform: translate(0, -100%); -webkit-transform: translate(0, -100%); transform: translate(0, -100%); -webkit-border-radius: 0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -ms-border-radius: 0px 0px 6px 6px; border-radius: 0px 0px 6px 6px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ text-align: left; } @media only screen and (max-width: 1200px) { #home .jobs .jobsearch .searchresults .wrapper { padding: 20px; } } #home .jobs .jobsearch .searchresults .wrapper:after { content: ''; display: block; width: 100%; left: 0px; bottom: 0px; position: absolute; height: 40px; pointer-events: none; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 77%, white 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(77%, white), color-stop(100%, white)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 77%, white 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 77%, white 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 77%, white 100%); /* IE10+ */ background: linear, to bottom, rgba(255, 255, 255, 0) 0%, white 77%, white 100%; /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } @media only screen and (max-width: 1200px) { #home .jobs .jobsearch .searchresults .wrapper:after { height: 20px; } } #home .jobs .jobsearch .searchresults .legende { display: block; font-size: 13px; font-size: 1.3rem; font-style: italic; -moz-transform: translate(0%, -100px); -o-transform: translate(0%, -100px); -ms-transform: translate(0%, -100px); -webkit-transform: translate(0%, -100px); transform: translate(0%, -100px); transition-property: transform, -webkit-transform; transition-duration: 600ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #home .jobs .jobsearch .searchresults ul { display: block !important; top: 0px !important; left: inherit !important; width: 100% !important; margin: 0px; padding: 0; list-style: none; margin-top: 5px; -moz-transform: translate(0%, -100%); -o-transform: translate(0%, -100%); -ms-transform: translate(0%, -100%); -webkit-transform: translate(0%, -100%); transform: translate(0%, -100%); transition-property: transform, -webkit-transform; transition-duration: 550ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; height: 130px; overflow-y: auto; -webkit-overflow-scrolling: touch; } @media only screen and (min-width: 1200px) { #home .jobs .jobsearch .searchresults ul { height: 190px; } } #home .jobs .jobsearch .searchresults ul li { color: #0082C3; font-size: 18px; font-size: 1.8rem; font-weight: 500; padding: 8px 25px; display: block; border-radius: 4px; position: relative; transition: background 150ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; cursor: pointer; } #home .jobs .jobsearch .searchresults ul li:before { content: ''; display: block; background: #0082C3; width: 3px; height: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ position: absolute; top: 20px; left: 13px; } #home .jobs .jobsearch .searchresults ul li:hover { background: #f6f9fc; } #home .jobs .jobsearch .searchresults ul li:last-child { margin-bottom: 20px; } #home .jobs .jobsearch.opened .searchresults { visibility: visible; } #home .jobs .jobsearch.opened .searchresults .wrapper { -moz-transform: translate(0, 0%); -o-transform: translate(0, 0%); -ms-transform: translate(0, 0%); -webkit-transform: translate(0, 0%); transform: translate(0, 0%); } #home .jobs .jobsearch.opened .searchresults ul, #home .jobs .jobsearch.opened .searchresults .legende { -moz-transform: translate(0%, 0); -o-transform: translate(0%, 0); -ms-transform: translate(0%, 0); -webkit-transform: translate(0%, 0); transform: translate(0%, 0); } #home .jobs .jobsearch.opened .form-control { background: rgba(0, 0, 0, 0.5); -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; -ms-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ } @media only screen and (max-width: 992px) { #home .jobs .list-icons { max-width: 500px; margin-left: auto; margin-right: auto; } } #home .jobs .list-icons .icon { border: 2px solid #0082C3; } #home .jobs .list-icons .icon path, #home .jobs .list-icons .icon rect, #home .jobs .list-icons .icon polygon { fill: #0082C3; } #home .jobs .list-icons li:nth-child(1) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 30ms; } #home .jobs .list-icons li:nth-child(2) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 60ms; } #home .jobs .list-icons li:nth-child(3) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 90ms; } #home .jobs .list-icons li:nth-child(4) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 120ms; } #home .jobs .list-icons li:nth-child(5) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 150ms; } #home .jobs .list-icons li:nth-child(6) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 180ms; } #home .jobs .list-icons li:nth-child(7) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 210ms; } #home .jobs .list-icons li:nth-child(8) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 240ms; } #home .jobs .list-icons li:nth-child(9) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 270ms; } #home .jobs .list-icons li:nth-child(10) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 300ms; } #home .jobs .go-to { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(-50%, 0px); -o-transform: translate(-50%, 0px); -ms-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); transition-property: transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 600ms; } #home .jobs .go-to .mask-line > span { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition-property: transform, -webkit-transform; transition-duration: 400ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 900ms; } #home .jobs .go-to .mask-line + .mask-line > span { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition-property: transform, -webkit-transform; transition-duration: 400ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 800ms; } #home .jobs.waiting .headline { -moz-transform: translate(0, 75px); -o-transform: translate(0, 75px); -ms-transform: translate(0, 75px); -webkit-transform: translate(0, 75px); transform: translate(0, 75px); } #home .jobs.waiting .list-icons li { -moz-transform: translate(0, 500px); -o-transform: translate(0, 500px); -ms-transform: translate(0, 500px); -webkit-transform: translate(0, 500px); transform: translate(0, 500px); } #home .jobs.waiting .jobsearch { -moz-transform: translate(0, 75px); -o-transform: translate(0, 75px); -ms-transform: translate(0, 75px); -webkit-transform: translate(0, 75px); transform: translate(0, 75px); } #home .jobs.waiting .go-to { -moz-transform: translate(-50%, -50px); -o-transform: translate(-50%, -50px); -ms-transform: translate(-50%, -50px); -webkit-transform: translate(-50%, -50px); transform: translate(-50%, -50px); opacity: 0; filter: alpha(opacity=0); transition-property: transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #home .jobs.waiting .go-to .mask-line > span { -moz-transform: translate(0px, -100%); -o-transform: translate(0px, -100%); -ms-transform: translate(0px, -100%); -webkit-transform: translate(0px, -100%); transform: translate(0px, -100%); } #home .jobs.waiting .go-to .mask-line + .mask-line > span { -moz-transform: translate(0px, -100%); -o-transform: translate(0px, -100%); -ms-transform: translate(0px, -100%); -webkit-transform: translate(0px, -100%); transform: translate(0px, -100%); } @media only screen and (min-width: 768px) { #home .valeurs { -moz-transform: translate(0, 100%); -o-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -webkit-transform: translate(0, 100%); transform: translate(0, 100%); transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0s; } } @media only screen and (min-width: 767px) { #home .valeurs { background: url("../img/bac-index1.jpg") no-repeat center bottom; background-size: cover; } } @media only screen and (max-width: 767px) { #home .valeurs { background: url("") no-repeat center center; background-size: cover; } } #home .valeurs .go-to:not(.bttm) { top: 30px; bottom: inherit; -moz-transform: translate(-50%, 0px); -o-transform: translate(-50%, 0px); -ms-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); } #home .valeurs .go-to:not(.bttm) .arrow { margin-top: 0; margin-bottom: 15px; } @media only screen and (max-width: 1440px) { #home .valeurs .go-to:not(.bttm) .arrow { margin-bottom: 8px; } } #home .valeurs .go-to:not(.bttm) .arrow svg { -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } #home .valeurs h2 { margin: 0 auto; } @media only screen and (max-width: 1200px) { #home .valeurs h2 { max-width: 550px; } } #home .valeurs .vcenter { position: relative; z-index: 10; max-width: 900px; margin: 0 auto; } #home .valeurs .list-icons { margin-bottom: 20px; } #home .valeurs .list-icons .icon { background: #0082C3; transition: background 400ms cubic-bezier(0.77, 0, 0.175, 1) 0s; } #home .valeurs .list-icons .icon #Visuel { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); fill: white; } #home .valeurs .list-icons a:hover .icon { background: white; } #home .valeurs .list-icons a:hover #Visuel { fill: #0082C3; -webkit-animation: IconSwipe 350ms; -moz-animation: IconSwipe 350ms; -o-animation: IconSwipe 350ms; animation: IconSwipe 350ms; } @media only screen and (min-width: 767px) { #home.showValues .jobs { opacity: 0.3; filter: alpha(opacity=30); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); transition-property: transform, -webkit-transform, opacity; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #home.showValues .jobs .go-to { -moz-transform: translate(-50%, -50px); -o-transform: translate(-50%, -50px); -ms-transform: translate(-50%, -50px); -webkit-transform: translate(-50%, -50px); transform: translate(-50%, -50px); opacity: 0; filter: alpha(opacity=0); transition-property: transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #home.showValues .jobs .go-to .mask-line > span { -moz-transform: translate(0px, -100%); -o-transform: translate(0px, -100%); -ms-transform: translate(0px, -100%); -webkit-transform: translate(0px, -100%); transform: translate(0px, -100%); } #home.showValues .jobs .go-to .mask-line + .mask-line > span { -moz-transform: translate(0px, -100%); -o-transform: translate(0px, -100%); -ms-transform: translate(0px, -100%); -webkit-transform: translate(0px, -100%); transform: translate(0px, -100%); } #home.showValues .jobs .headline { -moz-transform: translate(0, 75px); -o-transform: translate(0, 75px); -ms-transform: translate(0, 75px); -webkit-transform: translate(0, 75px); transform: translate(0, 75px); } #home.showValues .jobs .vcenter { -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #home.showValues .jobs .jobsearch { -moz-transform: translate(0, 75px); -o-transform: translate(0, 75px); -ms-transform: translate(0, 75px); -webkit-transform: translate(0, 75px); transform: translate(0, 75px); } #home.showValues .jobs .list-icons li { -moz-transform: translate(0, 500px); -o-transform: translate(0, 500px); -ms-transform: translate(0, 500px); -webkit-transform: translate(0, 500px); transform: translate(0, 500px); } #home.showValues .valeurs { -moz-transform: translate(0, 0%); -o-transform: translate(0, 0%); -ms-transform: translate(0, 0%); -webkit-transform: translate(0, 0%); transform: translate(0, 0%); transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #home.showValues .valeurs h2 { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 200ms; } #home.showValues .valeurs .list-icons { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 250ms; } #home.showValues .valeurs .btn-more { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 0s; } #home.showValues .valeurs .go-to { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(-50%, 0px); -o-transform: translate(-50%, 0px); -ms-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); transition-property: transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 600ms; } #home.showValues .valeurs .go-to .mask-line > span { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition-property: transform, -webkit-transform; transition-duration: 400ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 800ms; } #home.showValues .valeurs .go-to .mask-line + .mask-line > span { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition-property: transform, -webkit-transform; transition-duration: 400ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 900ms; } #home.showGPTW .gptw { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0, 0%); -o-transform: translate(0, 0%); -ms-transform: translate(0, 0%); -webkit-transform: translate(0, 0%); transform: translate(0, 0%); transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0s; } #home.showGPTW .gptw .content > * { -moz-transform: translate(0, 0%); -o-transform: translate(0, 0%); -ms-transform: translate(0, 0%); -webkit-transform: translate(0, 0%); transform: translate(0, 0%); } #home.showGPTW .gptw .btn-more { transition: padding 400ms cubic-bezier(0.77, 0, 0.175, 1) 0s; } #home.showGPTW .gptw .go-to { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(-50%, 0px); -o-transform: translate(-50%, 0px); -ms-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); transition-property: transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 600ms; } #home.showGPTW .gptw .go-to .mask-line > span { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition-property: transform, -webkit-transform; transition-duration: 400ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 800ms; } #home.showGPTW .gptw .go-to .mask-line + .mask-line > span { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition-property: transform, -webkit-transform; transition-duration: 400ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 900ms; } #home.showGPTW .valeurs { opacity: 0.3; filter: alpha(opacity=30); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); transition-property: transform, -webkit-transform, opacity; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #home.showGPTW .valeurs .go-to { -moz-transform: translate(-50%, -50px); -o-transform: translate(-50%, -50px); -ms-transform: translate(-50%, -50px); -webkit-transform: translate(-50%, -50px); transform: translate(-50%, -50px); opacity: 0; filter: alpha(opacity=0); transition-property: transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #home.showGPTW .valeurs .go-to.bttm { -moz-transform: translate(-50%, 50px); -o-transform: translate(-50%, 50px); -ms-transform: translate(-50%, 50px); -webkit-transform: translate(-50%, 50px); transform: translate(-50%, 50px); opacity: 0; filter: alpha(opacity=0); transition-property: transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #home.showGPTW .valeurs h2, #home.showGPTW .valeurs .list-icons, #home.showGPTW .valeurs .btn-more { -moz-transform: translate(0, -150px); -o-transform: translate(0, -150px); -ms-transform: translate(0, -150px); -webkit-transform: translate(0, -150px); transform: translate(0, -150px); transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #home .valeurs .go-to { -moz-transform: translate(-50%, 50px); -o-transform: translate(-50%, 50px); -ms-transform: translate(-50%, 50px); -webkit-transform: translate(-50%, 50px); transform: translate(-50%, 50px); opacity: 0; filter: alpha(opacity=0); transition-property: transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #home .valeurs h2, #home .valeurs .list-icons, #home .valeurs .btn-more { -moz-transform: translate(0, 150px); -o-transform: translate(0, 150px); -ms-transform: translate(0, 150px); -webkit-transform: translate(0, 150px); transform: translate(0, 150px); transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } } @-webkit-keyframes IconSwipe { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } 49% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(25px, 0); -o-transform: translate(25px, 0); -ms-transform: translate(25px, 0); -webkit-transform: translate(25px, 0); transform: translate(25px, 0); } 51% { -moz-transform: translate(-25px, 0); -o-transform: translate(-25px, 0); -ms-transform: translate(-25px, 0); -webkit-transform: translate(-25px, 0); transform: translate(-25px, 0); } 100% { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-moz-keyframes IconSwipe { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } 49% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(25px, 0); -o-transform: translate(25px, 0); -ms-transform: translate(25px, 0); -webkit-transform: translate(25px, 0); transform: translate(25px, 0); } 51% { -moz-transform: translate(-25px, 0); -o-transform: translate(-25px, 0); -ms-transform: translate(-25px, 0); -webkit-transform: translate(-25px, 0); transform: translate(-25px, 0); } 100% { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-o-keyframes IconSwipe { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } 49% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(25px, 0); -o-transform: translate(25px, 0); -ms-transform: translate(25px, 0); -webkit-transform: translate(25px, 0); transform: translate(25px, 0); } 51% { -moz-transform: translate(-25px, 0); -o-transform: translate(-25px, 0); -ms-transform: translate(-25px, 0); -webkit-transform: translate(-25px, 0); transform: translate(-25px, 0); } 100% { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes IconSwipe { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } 49% { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(25px, 0); -o-transform: translate(25px, 0); -ms-transform: translate(25px, 0); -webkit-transform: translate(25px, 0); transform: translate(25px, 0); } 51% { -moz-transform: translate(-25px, 0); -o-transform: translate(-25px, 0); -ms-transform: translate(-25px, 0); -webkit-transform: translate(-25px, 0); transform: translate(-25px, 0); } 100% { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes bounceArrow { 0% { -moz-transform: translate(0px, -5px); -o-transform: translate(0px, -5px); -ms-transform: translate(0px, -5px); -webkit-transform: translate(0px, -5px); transform: translate(0px, -5px); } 50% { -moz-transform: translate(0px, 5px); -o-transform: translate(0px, 5px); -ms-transform: translate(0px, 5px); -webkit-transform: translate(0px, 5px); transform: translate(0px, 5px); } 100% { -moz-transform: translate(0px, -5px); -o-transform: translate(0px, -5px); -ms-transform: translate(0px, -5px); -webkit-transform: translate(0px, -5px); transform: translate(0px, -5px); } } @-moz-keyframes bounceArrow { 0% { -moz-transform: translate(0px, -5px); -o-transform: translate(0px, -5px); -ms-transform: translate(0px, -5px); -webkit-transform: translate(0px, -5px); transform: translate(0px, -5px); } 50% { -moz-transform: translate(0px, 5px); -o-transform: translate(0px, 5px); -ms-transform: translate(0px, 5px); -webkit-transform: translate(0px, 5px); transform: translate(0px, 5px); } 100% { -moz-transform: translate(0px, -5px); -o-transform: translate(0px, -5px); -ms-transform: translate(0px, -5px); -webkit-transform: translate(0px, -5px); transform: translate(0px, -5px); } } @-o-keyframes bounceArrow { 0% { -moz-transform: translate(0px, -5px); -o-transform: translate(0px, -5px); -ms-transform: translate(0px, -5px); -webkit-transform: translate(0px, -5px); transform: translate(0px, -5px); } 50% { -moz-transform: translate(0px, 5px); -o-transform: translate(0px, 5px); -ms-transform: translate(0px, 5px); -webkit-transform: translate(0px, 5px); transform: translate(0px, 5px); } 100% { -moz-transform: translate(0px, -5px); -o-transform: translate(0px, -5px); -ms-transform: translate(0px, -5px); -webkit-transform: translate(0px, -5px); transform: translate(0px, -5px); } } @keyframes bounceArrow { 0% { -moz-transform: translate(0px, -5px); -o-transform: translate(0px, -5px); -ms-transform: translate(0px, -5px); -webkit-transform: translate(0px, -5px); transform: translate(0px, -5px); } 50% { -moz-transform: translate(0px, 5px); -o-transform: translate(0px, 5px); -ms-transform: translate(0px, 5px); -webkit-transform: translate(0px, 5px); transform: translate(0px, 5px); } 100% { -moz-transform: translate(0px, -5px); -o-transform: translate(0px, -5px); -ms-transform: translate(0px, -5px); -webkit-transform: translate(0px, -5px); transform: translate(0px, -5px); } } @-moz-keyframes Spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes Spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes Spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #entreprise .main-content { background: url("../img/entreprise/background.jpg") no-repeat center bottom; background-size: cover; color: white; } #entreprise .main-content .scrollable { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; } @media only screen and (max-width: 1200px) { #entreprise .main-content .scrollable { position: relative; } } #entreprise .main-content .content { padding: 0 15% 0 10%; } @media only screen and (max-width: 1440px) { #entreprise .main-content .content { padding: 0 10%; } } @media only screen and (max-width: 1200px) { #entreprise .main-content .content { padding: 0 60px; } } @media only screen and (max-width: 767px) { #entreprise .main-content .content { padding: 0 40px; } } #entreprise .main-content .great-place { pointer-events: none; z-index: 10; max-width: 250px; width: 25%; position: absolute; top: 0; text-align: center; right: 0; } @media only screen and (max-width: 1440px) { #entreprise .main-content .great-place { width: 20%; } } @media only screen and (max-width: 767px) { #entreprise .main-content .great-place { width: 100%; position: relative; max-width: 100%; background: #8E101E; } } @media only screen and (max-width: 767px) { #entreprise .main-content .great-place .visible-xs { display: inline-block !important; } } #entreprise .main-content header { margin-bottom: 4%; } #entreprise .main-content header h1 { margin-top: 0px; font-size: 3.3rem; } #entreprise .main-content header p { font-style: italic; } #entreprise .main-content .post-content { -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; } @media only screen and (max-width: 1200px) { #entreprise .main-content .post-content { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } } @media only screen and (max-width: 1200px) { #entreprise .main-content .post-content { -webkit-columns: 1; -moz-columns: 1; columns: 1; } } #entreprise .main-content footer { margin-top: 5%; margin-left: -15px; margin-right: -15px; } @media only screen and (max-width: 465px) { #entreprise .main-content footer { width: 100%; } } @media only screen and (min-width: 466px) and (max-width: 767px) { #entreprise .main-content footer { width: 70%; } } #entreprise .main-content footer .btn { margin: 5px 15px; } #entreprise aside .map { padding: 0 10%; height: auto; background: #2e3641; } #entreprise aside .map header { display: block; padding: 20px; margin: 0 auto; max-width: 280px; background: #0082C3; color: white; text-align: center; margin-bottom: 40px; } #entreprise aside .map header h2 { margin: 0; font-size: 1.5rem; } #entreprise aside .map .vcenter { padding: 20px 0; } @media only screen and (max-width: 992px) { #entreprise aside .map .vcenter { padding: 40px 0; } } @media only screen and (max-width: 767px) { #entreprise aside .map .vcenter { height: auto !important; } } #entreprise aside .map .world-map { width: 100%; display: block; } #entreprise aside .map .world-map object { width: 100%; display: block; height: auto; position: relative; padding-top: 50%; } #entreprise aside .map .world-map object svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #entreprise aside .map .world-map object svg #pays path { fill: #434A54; transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } #entreprise aside .map .world-map object svg #pays path.show { fill: #0082C3; } #entreprise aside .numbers { position: absolute; bottom: 0; left: 0; width: 100%; } @media only screen and (max-width: 992px) { #entreprise aside .numbers { position: relative; } } #entreprise aside .numbers li a { background: #3a4550; } #entreprise aside .numbers li + li a { background: #1b2129; } #entreprise aside .numbers li + li + li a { background: #191d22; } @media only screen and (max-width: 992px) { #entreprise aside .numbers .num { font-size: 60px; font-size: 6rem; } } @media only screen and (max-width: 767px) { #entreprise aside .numbers .num { font-size: 30px; font-size: 3rem; } } @media only screen and (max-width: 992px) { #entreprise aside .numbers .num-legend { font-size: 20px; font-size: 2rem; line-height: 1.2; } } @media only screen and (max-width: 767px) { #entreprise aside .numbers .num-legend { font-size: 11px; font-size: 1.1rem; } } #history .timeline article:before, #history .timeline article:after { content: ''; display: block; position: absolute; top: 50%; margin-top: -10px; width: 20px; height: 20px; z-index: 10; opacity: 0; filter: alpha(opacity=0); -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; pointer-events: none; } font-weight: 100; pointer-events: none; max-width: 300px; font-weight: 100; font-family: "futura-pt"; transition-property: transform, opacity; transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-delay: 0.4s; } @media only screen and (max-width: 992px) { #history .timeline article header { max-width: 100%; margin-top: -20px; } } #history .timeline article header span { transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .no-touch #history .timeline article:hover > header span { color: #0082C3; } .no-touch #history .timeline article:hover, #history .timeline article.current { border-bottom-color: #0082C3; } .no-touch #history .timeline article:hover .date-visuel, #history .timeline article.current .date-visuel { opacity: 0.2; filter: alpha(opacity=20); } #history .timeline article .visuel img { width: 100%; } #history .timeline article .date-content { position: relative; z-index: 10; overflow: hidden; width: 0px; height: 100%; color: white; transition: width 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s; } @media only screen and (max-width: 992px) { #history .timeline article .date-content { width: 100%; height: 150px; text-align: center; } } #history .timeline article .date-content .row { display: flex; height: 100%; margin-left: 0px; margin-right: 0px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(40%); -moz-transform: translateY(40%); -ms-transform: translateY(40%); transform: translateY(40%); transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (max-width: 992px) { #history .timeline article .date-content .row { display: block; vertical-align: middle; width: 100%; } } #history .timeline article .date-content .row .vcenter { padding: 0px !important; } #history .timeline article .date-content .row > * { height: 100%; padding: 0px; } @media only screen and (max-width: 992px) { #history .timeline article .date-content .row > * { width: 100% !important; float: none; height: auto; padding: 0px !important; margin-bottom: 40px; } } #history .timeline article .date-content .row .visuel { padding-left: 8%; } @media only screen and (max-width: 992px) { #history .timeline article .date-content .row .visuel { width: 100% !important; margin-bottom: 0px; } } #history .timeline article .date-content .date { font-size: 130px; font-size: 13rem; line-height: 1; } @media only screen and (max-width: 992px) { #history .timeline article .date-content .date { font-size: 80px; font-size: 8rem; } } #history .timeline article .date-content h3, #history .timeline article .date-content #marque .intro ul li a .visuel + span, #marque .intro ul li a #history .timeline article .date-content .visuel + span { color: #0082C3; margin-top: -3px; margin-bottom: 10%; } @media only screen and (max-width: 992px) { #history .timeline article .date-content h3, #history .timeline article .date-content #marque .intro ul li a .visuel + span, #marque .intro ul li a #history .timeline article .date-content .visuel + span { margin-bottom: 20px; } } #history .timeline article .date-content ul { margin-left: 0; padding-left: 0; list-style: none; text-align: left !important; } #history .timeline article .date-content ul li { padding-left: 20px; position: relative; } #history .timeline article .date-content ul li:before { display: block; content: ''; width: 6px; height: 6px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ background: #0082C3; /* or whatever color you prefer */ position: absolute; top: 6px; left: 0; } #history .timeline article.current { z-index: 100; cursor: default; } #history .timeline article.current .date-content { transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (max-width: 992px) { #history .timeline article.current .date-content { transition: all 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; height: auto; width: 100% !important; } } #history .timeline article.current .row { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); opacity: 1; filter: alpha(opacity=100); transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } #history .timeline article.current header { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(10%); -moz-transform: translateY(10%); -ms-transform: translateY(10%); transform: translateY(10%); transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } #history .timeline article.current:before, #history .timeline article.current:after { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); opacity: 1; filter: alpha(opacity=100); transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s; } @media only screen and (max-width: 992px) { #history .timeline article.current:before, #history .timeline article.current:after { display: none; } } #history .timeline .date-visuel { position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.07; filter: alpha(opacity=7); pointer-events: none; z-index: 0; transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .page-template-page-history-php #header { position: fixed; } @media only screen and (max-width: 992px) { .page-template-page-history-php #header { position: relative; top: 0; bottom: 0; } } .page-template-page-history-php #main { position: fixed; bottom: 40px; top: 55px; } @media only screen and (max-width: 1440px) { .page-template-page-history-php #main { top: 55px; } } @media only screen and (max-width: 767px) { .page-template-page-history-php #main { position: relative; top: 0; bottom: 0; } } .page-template-page-history-php #footer { position: fixed; bottom: 0; } @media only screen and (max-width: 767px) { .page-template-page-history-php #footer { position: relative; top: 0; bottom: 0; } } #oxylane { overflow: hidden; } #oxylane:after { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; -webkit-animation: ZoomInOut 30s infinite; -moz-animation: ZoomInOut 30s infinite; -o-animation: ZoomInOut 30s infinite; animation: ZoomInOut 30s infinite; } @media only screen and (min-width: 767px) { #oxylane:after { background: url("../img/oxylane/background.jpg") no-repeat top left; background-size: cover; } } @media only screen and (max-width: 767px) { #oxylane:after { background: url("../img/oxylane/background_mobile.jpg") no-repeat bottom left #93a8a9; background-size: contain; } } #oxylane .main-content { width: 100%; padding: 0px 18%; z-index: 100; } @media only screen and (max-width: 1440px) { #oxylane .main-content { padding: 0 15%; } } @media only screen and (max-width: 767px) { #oxylane .main-content { padding: 0px 40px; } } #oxylane .main-content .vcenter { padding: 40px 0; position: relative; z-index: 10; } @media only screen and (max-width: 767px) { #oxylane .main-content .vcenter { display: block; } } #oxylane .main-content .content { padding: 0; padding-right: 40px; } @media only screen and (max-width: 1200px) { #oxylane .main-content .content { display: block; padding: 0px !important; width: 100% !important; } } #oxylane .main-content .btn-more { margin-bottom: 10px; } @media only screen and (max-width: 767px) { #oxylane .main-content .btn-more { display: block; margin: 0; margin-top: 10px; } } #oxylane .main-content aside.content { width: 36%; padding-right: 0px; padding-left: 40px; } @media only screen and (max-width: 1440px) { #oxylane .main-content aside.content { padding-left: 0px; } } @media only screen and (max-width: 1200px) { #oxylane .main-content aside.content { margin-top: 60px; padding: 0px !important; } } @media only screen and (max-width: 1200px) { #oxylane .main-content aside.content { margin-top: 40px; } } #oxylane h1 { font-size: 60px; font-size: 6rem; margin-top: 0; } @media only screen and (max-width: 767px) { #oxylane h1 { font-size: 40px; font-size: 4rem; } } #oxylane h1 span { font-size: 30px; font-size: 3rem; display: block; } #oxylane .post-content { margin: 30px 0; } #oxylane footer a + a { margin-left: 5px; } #oxylane .fundation { padding: 40px; background: rgba(19, 19, 19, 0.8); color: white; } @media only screen and (max-width: 1440px) { #oxylane .fundation { padding: 30px; } } #oxylane .fundation h3, #oxylane .fundation #marque .intro ul li a .visuel + span, #marque .intro ul li a #oxylane .fundation .visuel + span { font-size: 20px; font-size: 2rem; margin: 0; margin-bottom: 30px; } @media only screen and (max-width: 1440px) { #oxylane .fundation h3, #oxylane .fundation #marque .intro ul li a .visuel + span, #marque .intro ul li a #oxylane .fundation .visuel + span { margin-bottom: 15px; } } #oxylane .fundation p { font-size: 13px; font-size: 1.3rem; margin: 0; font-weight: 400; } @media only screen and (max-width: 1440px) { #oxylane .fundation p { font-size: 12px; font-size: 1.2rem; } } #oxylane .fundation p a { color: #0082C3; text-decoration: none; } #oxylane .fundation > * + * { margin-top: 20px; } #oxylane .fundation + .fundation { background: rgba(35, 35, 35, 0.9); margin-top: 20px; } .post-type-archive-app_marqueemployeur #main { position: absolute; top: 0; bottom: 0; } @media only screen and (max-width: 767px) { .post-type-archive-app_marqueemployeur #main { position: relative; background: url("../img/timthumb.png") no-repeat center bottom #ebf6fc; background-size: contain; } } @media only screen and (min-width: 767px) { .post-type-archive-app_marqueemployeur #main:after { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url("../img/bac2.jpg") no-repeat bottom center; background-size: cover; z-index: -1; -webkit-animation: ZoomInOut 30s infinite; -moz-animation: ZoomInOut 30s infinite; -o-animation: ZoomInOut 30s infinite; animation: ZoomInOut 30s infinite; } } .post-type-archive-app_marqueemployeur > header { position: fixed; top: 0; width: 100%; } @media only screen and (max-width: 767px) { .touch .post-type-archive-app_marqueemployeur > header { position: relative; } } .post-type-archive-app_marqueemployeur > footer { position: fixed; bottom: 0; width: 100%; z-index: 100; } @media only screen and (max-width: 767px) { .touch .post-type-archive-app_marqueemployeur > footer { position: relative; } } #marque { position: relative; z-index: 10; } #marque.easing { transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } #marque .intro { text-align: center; padding: 65px 20% 40px; } @media only screen and (max-width: 1200px) { #marque .intro { padding: 65px 15% 40px; } } @media only screen and (max-width: 992px) { #marque .intro { padding-left: 15%; padding-right: 10%; } } @media only screen and (max-width: 767px) { #marque .intro { height: 250px; } } @media only screen and (max-width: 992px) { #marque .intro .vcenter { height: 100% !important; } } @media only screen and (max-width: 767px) { #marque .intro header { margin-bottom: 0px !important; } } #marque .intro h1 { margin: 20px 40px; font-weight: 900; } #marque .intro ul { margin: 0; margin-left: -15px; margin-right: -15px; } @media only screen and (max-width: 767px) { #marque .intro ul { display: none; } } #marque .intro ul li { width: 20%; padding: 0 15px; float: left; } #marque .intro ul li a { text-decoration: none; } #marque .intro ul li a .pastille { margin: 0 auto; margin-bottom: -22%; position: relative; z-index: 10; width: 50%; -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4) ; -moz-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4) ; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4) ; transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } #marque .intro ul li a .pastille object { width: 100%; display: block; height: auto; position: relative; padding-top: 100%; } #marque .intro ul li a .pastille object svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #marque .intro ul li a .pastille path { transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } #marque .intro ul li a .visuel + span { display: block; font-size: 15px; font-size: 1.5rem; font-weight: 900; margin-top: 20px; color: #00629b; margin-bottom: 0; } @media only screen and (max-width: 1440px) { #marque .intro ul li a .visuel + span { font-size: 13px; font-size: 1.3rem; } } @media only screen and (max-width: 1200px) { #marque .intro ul li a .visuel + span { font-size: 12px; font-size: 1.2rem; } } #marque .intro ul li a .visuel { position: relative; z-index: 0; width: 100%; display: block; margin: 0 auto; max-width: 180px; background: #0082C3; } #marque .intro ul li a .view-more { text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; background: rgba(0, 150, 240, 0.4); opacity: 0; filter: alpha(opacity=0); transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } #marque .intro ul li a .view-more .vcenter { display: table; width: 100%; height: 100%; } #marque .intro ul li a .view-more .icon { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; } #marque .intro ul li a .view-more .icon img { width: 24%; display: inline-block; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; -webkit-transform: translate3D(0, -10px, 0) rotate(90deg); -moz-transform: translate3D(0, -10px, 0) rotate(90deg); -ms-transform: translate3D(0, -10px, 0) rotate(90deg); transform: translate3D(0, -10px, 0) rotate(90deg); } #marque .intro ul li a:hover .view-more { opacity: 1; filter: alpha(opacity=100); } #marque .intro ul li a:hover .view-more .icon img { -webkit-transform: translate3D(0, 0, 0) rotate(90deg); -moz-transform: translate3D(0, 0, 0) rotate(90deg); -ms-transform: translate3D(0, 0, 0) rotate(90deg); transform: translate3D(0, 0, 0) rotate(90deg); } #marque .intro ul li a:hover .pastille { background: white; } #marque .intro ul li a:hover .pastille svg { -webkit-animation: hoverTranslateH .3s 1; -moz-animation: hoverTranslateH .3s 1; -o-animation: hoverTranslateH .3s 1; animation: hoverTranslateH .3s 1; } #marque .intro ul li a:hover .pastille svg path { fill: #0082C3; } #marque > section { padding: 65px 15% 40px; overflow: hidden; } @media only screen and (max-width: 1200px) { #marque > section { padding-top: 55px !important; } } @media only screen and (max-width: 992px) { #marque > section { padding-left: 15%; padding-right: 10%; text-align: center; } } @media only screen and (max-width: 767px) { #marque > section { padding: 50px 60px 130px !important; width: 100%; overflow: hidden; } } @media only screen and (max-width: 767px) { .touch #marque > section { padding: 40px !important; width: 100%; overflow: auto; } } #marque > section > .row { display: flex; height: 100%; margin-left: 0px; margin-right: 0px; } #marque > section > .row > * { padding: 0 0px; } @media only screen and (max-width: 767px) { #marque > section > .row > * { width: 100%; float: none; padding: 0px !important; } } #marque > section .vcenter { padding: 40px 0px !important; } @media only screen and (max-width: 992px) { #marque > section .vcenter { padding: 0px 10px !important; } } @media only screen and (max-width: 767px) { #marque > section .vcenter { text-align: center; } } #marque > section .col-md-4 { padding-left: 4%; } @media only screen and (max-width: 1200px) { #marque > section .col-md-4 { padding-left: 6%; } } @media only screen and (max-width: 992px) { #marque > section .col-md-4 { padding-left: 0; padding-right: 0%; } } @media only screen and (max-width: 767px) { #marque > section .col-md-4 { margin-top: 20px; } } #marque > section .col-md-pull-8 { padding-left: 0; padding-right: 4%; } @media only screen and (max-width: 1200px) { #marque > section .col-md-pull-8 { padding-left: 0; padding-right: 6%; } } @media only screen and (max-width: 992px) { #marque > section .col-md-pull-8 { padding-left: 0; padding-right: 0%; } } #marque > section .pastille { margin-bottom: 20px; width: 12%; } @media only screen and (max-width: 1200px) { #marque > section .pastille { margin-bottom: 10px; } } #marque > section header { margin-bottom: 5%; } #marque > section header h2 { font-size: 40px; font-size: 4rem; margin: 0; } @media only screen and (max-width: 1200px) { #marque > section header h2 { font-size: 30px; font-size: 3rem; } } @media only screen and (max-width: 767px) { #marque > section header h2 { font-size: 24px; font-size: 2.4rem; } } #marque > section .btn-video { max-width: 190px; width: 33%; } @media only screen and (max-width: 767px) { #marque > section .btn-video { width: 80%; margin: 0 auto; max-width: 100%; } } #marque > section .btn-video .vcenter { padding: 0px !important; height: 100% !important; } #marque > section .btn-video .icon img { width: 30%; max-width: 35px; } #marque > section .btn-more { margin-right: 10px; margin-bottom: 10px; } #marque > section footer { margin-top: 5%; } #marque > section footer a + a { margin-left: 15px; } @media only screen and (max-width: 992px) { #marque > section .pullpush2 { display: none; } } #marque > section .content > .visuel { display: block; margin: 0 auto; max-width: 500px; position: relative; } @media only screen and (max-width: 992px) { #marque > section .content > .visuel { width: 60%; } } #marque > section .content > .visuel.device-small { width: 120px; margin-bottom: 40px; } @media only screen and (max-width: 768px) { #marque > section .content > .visuel.device-small { display: none; } } @media only screen and (min-width: 992px) { #marque > section .content > .visuel.device-small { display: none; } } #marque > section .content > .visuel.device-small .visuel-container { position: relative; width: 113px; height: 113px; overflow: hidden; z-index: 1; } #marque > section .content > .visuel.device-small .visuel-container img { position: absolute; top: 50%; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } #marque > section .content > .visuel .pastille { margin-bottom: 0px; width: 80px; position: absolute; top: -40px; left: 50%; margin-left: -40px; z-index: 10; } #marque > section .content > .visuel img { width: 100%; } #marque > section .accessibility-documents { padding-top: 10px; white-space: nowrap; } @media only screen and (max-width: 767px) { #marque > section .accessibility-documents { white-space: normal; } } #marque > section .accessibility-documents a { color: #0082C3; font-weight: 400; margin-top: 5px; display: inline-block; } #marque > section .accessibility-documents a .icon { width: 16px; height: 16px; float: left; margin-right: 15px; margin-top: 1px; } @media only screen and (max-width: 767px) { #marque > section .accessibility-documents a .icon { display: none; } } #marque > section .accessibility-documents a .icon svg { width: 16px; height: 16px; } #marque > section .accessibility-documents a .icon path { fill: #0082C3; } [data-slug="accessibilite"] .popup-video { float: left; margin-right: 40px; } @media only screen and (max-width: 767px) { [data-slug="accessibilite"] .popup-video { float: none; margin-right: auto; } } #totop { position: fixed; top: 320px; left: 3.3%; width: 28px; height: 28px; background: url("../img/shared/totop.png") no-repeat center center; overflow: hidden; text-indent: -9999px; z-index: 10; opacity: 0; filter: alpha(opacity=0); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); pointer-events: none; transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { #totop { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/totop2x.png"); background-size: 28px 28px; } } @media only screen and (max-width: 767px) { #totop { display: none; } } @media only screen and (max-width: 992px) { #totop { top: 75px; } } #totop.showed { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); pointer-events: all; } .newstab-open #totop { transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; -webkit-transform: translateX(-375px); -moz-transform: translateX(-375px); -ms-transform: translateX(-375px); transform: translateX(-375px); pointer-events: all; } #fullPage-nav { transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 2; -webkit-transform: translateX(-375px); -moz-transform: translateX(-375px); -ms-transform: translateX(-375px); transform: translateX(-375px); pointer-events: none; opacity: 0; filter: alpha(opacity=0); } @media only screen and (max-width: 767px) { #fullPage-nav { display: none; } } #fullPage-nav.visible { opacity: 1; filter: alpha(opacity=100); pointer-events: all; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); transition: all 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .newstab-open #fullPage-nav { transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; -webkit-transform: translateX(-375px); -moz-transform: translateX(-375px); -ms-transform: translateX(-375px); transform: translateX(-375px); pointer-events: all; } #fullPage-nav.left { left: 3%; } #fullPage-nav li { width: auto; height: auto; } #fullPage-nav li + li { margin-top: 8px; } #fullPage-nav a { display: block; } #fullPage-nav a span { display: block; position: relative; top: 0; left: 0; width: 20px; height: 20px; border: 10px solid white; background: #0082C3 !important; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (max-width: 767px) { #fullPage-nav a span { width: 10px; height: 10px; border-width: 5px; } } #fullPage-nav a:hover span { border: 8px solid white; } @media only screen and (max-width: 767px) { #fullPage-nav a:hover span { border-width: 4px; } } #fullPage-nav a.active span, #fullPage-nav a.active:hover span { background: white !important; border: 8px solid #0082C3; } @media only screen and (max-width: 767px) { #fullPage-nav a.active span, #fullPage-nav a.active:hover span { border-width: 4px; } } #events { /*.passion-block { position:absolute; width:60%; height:45%; top:auto; right:0; bottom:0; } .short-block { width:60%; height:55%; } aside { width:55%; @media only screen and (max-width: 992px) { width:100%; } .passion-block { width:45%; left:0; height:70%; padding:40px 5%; @media only screen and (max-width: 992px) { padding-bottom:250px; } } .short-block { height:70%; width:100%; .vcenter { z-index:10; } } }*/ } #events .programme-block { background-position: bottom center; } @media screen and (max-width: 991px) { #events .programme-block .vcenter { padding-top: 60px !important; padding-bottom: 240px !important; } } @media screen and (min-width: 992px) { #events .programme-block { color: white; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } } #events .programme-block .content { transition: all 1200ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } .viewVideo #events .programme-block .content { opacity: 0; transform: translateY(-80px); } #events .programme-block .play { display: none; width: 60px; margin: 0 auto; margin-top: 40px; cursor: pointer; transition: transform 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } @media screen and (min-width: 992px) { #events .programme-block .play { display: block; } } #events .programme-block .play:hover { transform: scale(1.2); } #events .background-video { position: absolute; top: 0 !important; left: 0; width: 100%; bottom: 0px; background: #000; z-index: 0; overflow: hidden; transition: transform 1600ms cubic-bezier(0.77, 0, 0.175, 1) 300ms; } @media only screen and (min-width: 992px) { #events .background-video { pointer-events: none; } } @media only screen and (max-width: 992px) { #events .background-video { position: relative !important; width: 100%; top: 0px !important; padding-top: 47%; z-index: 10; } } @media only screen and (max-width: 992px) { #events .background-video.bandes { padding-top: 56.25%; } } .viewVideo #events .background-video { pointer-events: all; transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } #events .background-video iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; } @media only screen and (max-width: 992px) { #events .background-video iframe { width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; } } #events .background-video:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: black; /* Old browsers */ background: -moz-linear-gradient(left, black 0%, #071f32 31%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, black), color-stop(31%, #071f32)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, black 0%, #071f32 31%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, black 0%, #071f32 31%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, black 0%, #071f32 31%); /* IE10+ */ background: linear, to right, black 0%, #071f32 31%; /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#071f32',GradientType=1 ); /* IE6-9 */ opacity: 0.65; filter: alpha(opacity=65); transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .viewVideo #events .background-video:after { opacity: 0; filter: alpha(opacity=0); } @media screen and (max-width: 991px) { #events .background-video:after { display: none; } } #events .close-video { position: absolute; top: -65px; right: 0px; z-index: 10; width: 53px; height: 53px; z-index: 24000; background: #0082C3; transition: top 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (max-width: 1440px) { #events .close-video { width: 50px; top: -50px; height: 50px; } } #events .close-video .icon { width: 14px; height: 14px; top: 50%; left: 50%; margin-left: -7px; margin-top: -7px; position: absolute; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .viewVideo #events .close-video { top: 0px; } #events .close-video:hover .icon { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .post-type-archive-app_student #studentPageContainer { -moz-transform: translate(0, 100%); -o-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } .post-type-archive-app_student.showPage #studentsIntro { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(0, -20%); -o-transform: translate(0, -20%); -ms-transform: translate(0, -20%); -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } @media only screen and (max-width: 767px) { .post-type-archive-app_student.showPage #studentsIntro { display: none; } } .post-type-archive-app_student.showPage #studentPageContainer { display: block; opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0, 0%); -o-transform: translate(0, 0%); -ms-transform: translate(0, 0%); -webkit-transform: translate(0, 0%); transform: translate(0, 0%); } .post-type-archive-app_student.showPage .students-nav-container { -moz-transform: translate(0, 0%); -o-transform: translate(0, 0%); -ms-transform: translate(0, 0%); -webkit-transform: translate(0, 0%); transform: translate(0, 0%); } .post-type-archive-app_student.showPage .students-nav-container .jobs-nav ul li { -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } .students-nav-container { position: fixed; left: 100px; height: 100%; top: 0; z-index: 30; transition-property: transform, -webkit-transform; transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 150ms; -moz-transform: translate(-500px, 0%); -o-transform: translate(-500px, 0%); -ms-transform: translate(-500px, 0%); -webkit-transform: translate(-500px, 0%); transform: translate(-500px, 0%); } @media only screen and (max-width: 1440px) { .students-nav-container { left: 40px; } } @media only screen and (max-width: 992px) { .students-nav-container { left: 10px; } } @media only screen and (max-width: 767px) { .students-nav-container { display: none; } } .students-nav-container:after { content: ''; display: block; background: white; position: absolute; top: 0; left: -6px; width: 16px; height: 16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5); -moz-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5); } .students-nav-container .students-nav { position: absolute; top: 50%; left: 0px; color: white; -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); width: 200px; z-index: 10; } .students-nav-container .students-nav .cat { padding-left: 25px; font-weight: 800; font-size: 12px; font-size: 1.2rem; line-height: 1.2; text-transform: uppercase; font-family: "futura-pt"; } .students-nav-container .students-nav ul { list-style: none; padding: 0; margin: 0px; margin-top: 30px; } .students-nav-container .students-nav ul li { padding-left: 25px; position: relative; } .students-nav-container .students-nav ul li:before { content: ''; display: block; position: absolute; top: 50%; left: -1px; width: 6px; height: 6px; background: white; margin-top: -3px; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .students-nav-container .students-nav ul li:nth-child(1) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 280ms; } .students-nav-container .students-nav ul li:nth-child(2) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 310ms; } .students-nav-container .students-nav ul li:nth-child(3) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 340ms; } .students-nav-container .students-nav ul li:nth-child(4) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 370ms; } .students-nav-container .students-nav ul li:nth-child(5) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 400ms; } .students-nav-container .students-nav ul li:nth-child(6) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 430ms; } .students-nav-container .students-nav ul li:nth-child(7) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 460ms; } .students-nav-container .students-nav ul li:nth-child(8) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 490ms; } .students-nav-container .students-nav ul li:nth-child(9) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 520ms; } .students-nav-container .students-nav ul li:nth-child(10) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 550ms; } .students-nav-container .students-nav ul li + li { margin-top: 10px; } .students-nav-container .students-nav ul li a { text-transform: uppercase; font-weight: 700; font-family: "futura-pt"; } .no-touch .students-nav-container .students-nav ul li a:hover span:after { width: 100%; } .students-nav-container .students-nav ul li a span { display: inline-block; font-size: 10px; font-size: 1rem; line-height: 1.1; position: relative; } .students-nav-container .students-nav ul li a span:after { content: ''; display: block; position: absolute; bottom: -2px; left: 0; width: 0%; height: 1px; background: white; transition: width 250ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } .students-nav-container .students-nav ul li.active a span:after { width: 100%; } .students-nav-container .students-nav.dark { color: #2a2a2a; } .students-nav-container .students-nav.dark li:before { background: #2a2a2a; } .students-nav-container .students-nav.dark li a span:after { background: #2a2a2a !important; } .students-nav-container .progress-line { position: absolute; top: 0; left: 1px; width: 2px; height: 100%; background: white; opacity: 0.1; filter: alpha(opacity=10); z-index: 0; } #students-pages-menu { display: none; width: 100%; } @media only screen and (max-width: 767px) { #students-pages-menu { display: block; } } #students-pages-menu.fixed { position: fixed; top: 0; left: 0; z-index: 15; } #students-pages-menu button { box-shadow: none !important; border: none; width: 100%; padding: 15px 0; text-align: center; text-transform: uppercase; font-family: "proxima-nova"; font-size: 14px; font-size: 1.4rem; font-weight: 300; line-height: 1.4; position: relative; background: #035180; color: #fff; font-style: italic; text-transform: none; } #students-pages-menu button .caret { border: none; background: url("../img/metiers/caret.png") no-repeat 0 0/0px 10px transparent; width: 9px; height: 5px; margin-top: -2px; margin-left: 4px; background-size: cover; } #students-pages-menu ul.dropdown-menu { box-shadow: none !important; background: #034770 none repeat scroll 0 0; border: medium none; border-radius: 0; color: #fff; float: none; margin: 0; padding: 0; position: relative; text-align: center; text-transform: uppercase; display: block; height: 0; overflow: hidden; -webkit-transition: height 300ms cubic-bezier(0.23, 1, 0.32, 1), padding 300ms cubic-bezier(0.23, 1, 0.32, 1); -moz-transition: height 300ms cubic-bezier(0.23, 1, 0.32, 1), padding 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: height 300ms cubic-bezier(0.23, 1, 0.32, 1), padding 300ms cubic-bezier(0.23, 1, 0.32, 1); } #students-pages-menu ul.dropdown-menu li { padding: 0; } .no-touch #students-pages-menu ul.dropdown-menu li:hover { background: #035180; } #students-pages-menu ul.dropdown-menu li.active a { color: #EC6607; } #students-pages-menu ul.dropdown-menu a { background: transparent !important; padding: 10px 0; color: #fff; font-family: "futura-pt"; font-size: 14px; font-size: 1.4rem; font-weight: 800; line-height: 1.4; } #students-pages-menu.open ul.dropdown-menu { padding: 13px 0; height: auto; } #students-pages-menu.open .caret { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #studentsIntro { z-index: 1; background: #0d1724; color: white; width: auto; height: auto; left: 0px; right: 0px; bottom: 0px; transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; overflow: auto; text-align: center; } @media only screen and (min-width: 992px) { #studentsIntro { right: 210px; } } @media only screen and (min-width: 1200px) { #studentsIntro { right: 260px; } } @media only screen and (min-width: 1600px) { #studentsIntro { right: 320px; } } @media only screen and (min-width: 767px) { #studentsIntro.loading { opacity: 0.2; filter: alpha(opacity=20); } } #studentsIntro .logo__happy { display: block; margin: 40px auto 0px; max-width: 150px; } @media only screen and (min-width: 767px) { #studentsIntro .logo__happy { position: absolute; top: 60px; right: 60px; z-index: 10; margin: 0px; } } #studentsIntro .logo__happy img { display: block; max-width: 100%; height: auto; } #studentsIntro > .inner { position: relative; height: 100%; min-height: 600px; } @media only screen and (min-width: 768px) { #studentsIntro > .inner { padding-bottom: 150px; } } @media only screen and (min-width: 1200px) { #studentsIntro > .inner { padding-bottom: 180px; min-height: 700px; } } @media only screen and (min-width: 1600px) { #studentsIntro > .inner { padding-bottom: 250px; min-height: 800px; } } #studentsIntro .vcenter { position: relative; z-index: 10; transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1) 50ms; } @media only screen and (max-width: 767px) { #studentsIntro .vcenter { padding: 60px 40px !important; } } .viewVideo #studentsIntro .vcenter { pointer-events: none; } #studentsIntro .wrapper { max-width: 240px; margin: 0 auto; text-align: center; padding: 0 0px; } @media only screen and (min-width: 768px) { #studentsIntro .wrapper { max-width: 1440px; } } @media only screen and (min-width: 992px) { #studentsIntro .wrapper { padding: 0 80px; } } @media only screen and (min-width: 1200px) { #studentsIntro .wrapper { padding: 0 150px; } } @media only screen and (min-width: 1600px) { #studentsIntro .wrapper { padding: 0 250px; } } #studentsIntro .btn-play { width: 40px; height: 40px; margin-bottom: 20px; } @media only screen and (min-width: 1200px) { #studentsIntro .btn-play { width: 60px; height: 60px; } } @media only screen and (min-width: 1600px) { #studentsIntro .btn-play { margin-bottom: 40px; } } @media only screen and (min-width: 1200px) { #studentsIntro .btn-play img { width: 17px; } } #studentsIntro h2 { font-size: 24px; font-size: 2.4rem; line-height: 1; margin: 0px auto; margin-bottom: 20px; } @media only screen and (min-width: 768px) { #studentsIntro h2 { font-size: 30px; font-size: 3rem; } } @media only screen and (min-width: 1200px) { #studentsIntro h2 { font-size: 40px; font-size: 4rem; } } @media only screen and (min-width: 1600px) { #studentsIntro h2 { font-size: 46px; font-size: 4.6rem; margin-bottom: 40px; } } #studentsIntro .bizbii, #studentsIntro .btn-apply { display: inline-block; vertical-align: middle; } #studentsIntro .bizbii { margin: 0 40px 20px; } @media only screen and (min-width: 768px) { #studentsIntro .bizbii { margin-bottom: 0px; margin-right: 20px; } } #studentsIntro .bizbii > img { height: 40px; width: auto; } #studentsIntro .pages-list { margin: 0px; margin-top: 30px; } @media only screen and (min-width: 1600px) { #studentsIntro .pages-list { margin-top: 60px; } } #studentsIntro .pages-list li { display: block; } #studentsIntro .pages-list li + li { margin-top: 10px; } @media only screen and (min-width: 768px) { #studentsIntro .pages-list li + li { margin-top: 0px; } } @media only screen and (min-width: 768px) { #studentsIntro .pages-list li { margin-bottom: 15px; display: inline-block; } } #studentsIntro .pages-list li:nth-child(1) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 30ms; } #studentsIntro .pages-list li:nth-child(2) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 60ms; } #studentsIntro .pages-list li:nth-child(3) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 90ms; } #studentsIntro .pages-list li:nth-child(4) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 120ms; } #studentsIntro .pages-list li:nth-child(5) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 150ms; } #studentsIntro .pages-list li:nth-child(6) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 180ms; } #studentsIntro .pages-list li:nth-child(7) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 210ms; } #studentsIntro .pages-list li:nth-child(8) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 240ms; } #studentsIntro .pages-list li:nth-child(9) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 270ms; } #studentsIntro .pages-list li:nth-child(10) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 300ms; } #studentsIntro .pages-list li:nth-child(11) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 330ms; } #studentsIntro .pages-list li:nth-child(12) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 360ms; } #studentsIntro .pages-list li:nth-child(13) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 390ms; } #studentsIntro .pages-list li:nth-child(14) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 420ms; } #studentsIntro .pages-list li:nth-child(15) { transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 450ms; } #studentsIntro .pages-list .btn-rambo { font-size: 10px; font-size: 1rem; display: block; } @media only screen and (min-width: 768px) { #studentsIntro .pages-list .btn-rambo { font-size: 12px; font-size: 1.2rem; } } #studentsIntro .background-video { position: absolute; top: 0 !important; left: 0; width: 100%; bottom: 0px; -moz-transform: translate(0, -75px); -o-transform: translate(0, -75px); -ms-transform: translate(0, -75px); -webkit-transform: translate(0, -75px); transform: translate(0, -75px); background: #000; z-index: 0; overflow: hidden; transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } @media only screen and (min-width: 1200px) { #studentsIntro .background-video { -moz-transform: translate(0, -90px); -o-transform: translate(0, -90px); -ms-transform: translate(0, -90px); -webkit-transform: translate(0, -90px); transform: translate(0, -90px); } } @media only screen and (min-width: 1600px) { #studentsIntro .background-video { -moz-transform: translate(0, -125px); -o-transform: translate(0, -125px); -ms-transform: translate(0, -125px); -webkit-transform: translate(0, -125px); transform: translate(0, -125px); } } @media only screen and (min-width: 768px) { #studentsIntro .background-video { pointer-events: none; } } @media only screen and (max-width: 767px) { #studentsIntro .background-video { position: relative !important; width: 100%; top: 0px !important; padding-top: 47%; -moz-transform: translate(0, 0px); -o-transform: translate(0, 0px); -ms-transform: translate(0, 0px); -webkit-transform: translate(0, 0px); transform: translate(0, 0px); z-index: 10; } } @media only screen and (max-width: 767px) { #studentsIntro .background-video.bandes { padding-top: 56%; } } .viewVideo #studentsIntro .background-video { pointer-events: all; -moz-transform: translate(0, 0px); -o-transform: translate(0, 0px); -ms-transform: translate(0, 0px); -webkit-transform: translate(0, 0px); transform: translate(0, 0px); } #studentsIntro .background-video iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; } @media only screen and (max-width: 992px) { #studentsIntro .background-video iframe { width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; } } #studentsIntro .background-video:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-color: #1c1f2b; background-image: -webkit-linear-gradient(top, #1c1f2b 0%, #1c1f2b 50%, #4a2d25 100%); background-image: linear-gradient(to bottom,#1c1f2b 0%, #1c1f2b 50%, #4a2d25 100%); transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; opacity: 0.85; } @media only screen and (max-width: 767px) { #studentsIntro .background-video:after { display: none; } } .viewVideo #studentsIntro .background-video:after { opacity: 0; filter: alpha(opacity=0); } #studentsIntro .close-video { position: absolute; top: -65px; right: 0px; z-index: 10; width: 53px; height: 53px; z-index: 24000; background: #0082C3; transition: top 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (max-width: 1440px) { #studentsIntro .close-video { width: 50px; top: -50px; height: 50px; } } #studentsIntro .close-video .icon { width: 14px; height: 14px; top: 50%; left: 50%; margin-left: -7px; margin-top: -7px; position: absolute; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .viewVideo #studentsIntro .close-video { top: 0px; } #studentsIntro .close-video:hover .icon { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } #studentsIntro.waiting .vcenter, .viewVideo #studentsIntro .vcenter { -moz-transform: translate(0, 50px) scale(0.9); -o-transform: translate(0, 50px) scale(0.9); -ms-transform: translate(0, 50px) scale(0.9); -webkit-transform: translate(0, 50px) scale(0.9); transform: translate(0, 50px) scale(0.9); opacity: 0; } #studentsIntro.waiting .pages-nav li, .viewVideo #studentsIntro .pages-nav li { -moz-transform: translate(0, 150px); -o-transform: translate(0, 150px); -ms-transform: translate(0, 150px); -webkit-transform: translate(0, 150px); transform: translate(0, 150px); } #studentPageContainer { z-index: 20; pointer-events: none; transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 200ms; } @media only screen and (max-width: 767px) { #studentPageContainer { display: none; } } #studentPageContainer .scrollpane { transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; width: auto; } @media only screen and (min-width: 768px) { #studentPageContainer .scrollpane { position: absolute !important; left: 0px; pointer-events: all; overflow-y: auto !important; } } @media only screen and (min-width: 992px) { #studentPageContainer .scrollpane { right: 210px; } } @media only screen and (min-width: 1200px) { #studentPageContainer .scrollpane { right: 260px; } } @media only screen and (min-width: 1600px) { #studentPageContainer .scrollpane { right: 320px; } } #studentPageContainer .scrollpane.loading { opacity: 0.2; pointer-events: none; overflow: hidden; } #studentPageContainer .scrollpane.toTop { -moz-transform: translate(0px, -100%); -o-transform: translate(0px, -100%); -ms-transform: translate(0px, -100%); -webkit-transform: translate(0px, -100%); transform: translate(0px, -100%); } #studentPageContainer .scrollpane.toBtm { -moz-transform: translate(0px, 100%); -o-transform: translate(0px, 100%); -ms-transform: translate(0px, 100%); -webkit-transform: translate(0px, 100%); transform: translate(0px, 100%); } #studentPageContainer .scrollpane.fromBtm { -moz-transform: translate(0px, 100%); -o-transform: translate(0px, 100%); -ms-transform: translate(0px, 100%); -webkit-transform: translate(0px, 100%); transform: translate(0px, 100%); } #studentPageContainer .scrollpane.fromTop { -moz-transform: translate(0px, -100%); -o-transform: translate(0px, -100%); -ms-transform: translate(0px, -100%); -webkit-transform: translate(0px, -100%); transform: translate(0px, -100%); } #studentPageContainer article { pointer-events: all; background: #f8f8f8; } #studentPageContainer article section .mask-line > span { -moz-transform: translate(0px, -100%); -o-transform: translate(0px, -100%); -ms-transform: translate(0px, -100%); -webkit-transform: translate(0px, -100%); transform: translate(0px, -100%); transition-property: transform, -webkit-transform, opacity; transition-duration: 400ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #studentPageContainer article section .mask-line + .mask-line > span { -moz-transform: translate(0px, -100%); -o-transform: translate(0px, -100%); -ms-transform: translate(0px, -100%); -webkit-transform: translate(0px, -100%); transform: translate(0px, -100%); } #studentPageContainer article section .content { -moz-transform: translate(0px, 150px); -o-transform: translate(0px, 150px); -ms-transform: translate(0px, 150px); -webkit-transform: translate(0px, 150px); transform: translate(0px, 150px); opacity: 0; filter: alpha(opacity=0); } #studentPageContainer article section.visible .content { -moz-transform: translate(0px, 0%); -o-transform: translate(0px, 0%); -ms-transform: translate(0px, 0%); -webkit-transform: translate(0px, 0%); transform: translate(0px, 0%); opacity: 1; filter: alpha(opacity=100); transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #studentPageContainer article section.visible .mask-line > span { -moz-transform: translate(0px, 0%); -o-transform: translate(0px, 0%); -ms-transform: translate(0px, 0%); -webkit-transform: translate(0px, 0%); transform: translate(0px, 0%); transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #studentPageContainer article section.visible .mask-line + .mask-line > span { -moz-transform: translate(0px, 0%); -o-transform: translate(0px, 0%); -ms-transform: translate(0px, 0%); -webkit-transform: translate(0px, 0%); transform: translate(0px, 0%); transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 200ms; } #studentPageContainer article h2 { margin: 0px; font-size: 45px; font-size: 4.5rem; line-height: 1.1; font-weight: 700; letter-spacing: -1px; margin-bottom: 40px; text-transform: uppercase; } @media only screen and (max-width: 767px) { #studentPageContainer article h2 { font-size: 28px; font-size: 2.8rem; margin-bottom: 20px; } } #studentPageContainer article h2 .sub { font-family: "proxima-nova"; font-style: italic; font-size: 17px; font-size: 1.7rem; font-weight: 100; display: block; top: 5px; position: relative; } @media only screen and (max-width: 767px) { #studentPageContainer article h2 .sub { font-size: 16px; font-size: 1.6rem; } } #studentPageContainer article p { font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin: 0 auto; } @media only screen and (max-width: 1200px) { #studentPageContainer article p { font-size: 14px; font-size: 1.4rem; line-height: 1.4; } } #studentPageContainer article .wrapper { max-width: 1360px; margin: 0 auto; text-align: center; padding: 0 40px; } @media only screen and (min-width: 768px) { #studentPageContainer article .wrapper { padding: 0 150px; } } @media only screen and (min-width: 1200px) { #studentPageContainer article .wrapper { padding: 0px 200px; } } #studentPageContainer article.waiting header p { opacity: 0; } #studentPageContainer article header { color: white; position: relative; z-index: 10; text-align: center; height: 400px; } @media only screen and (min-width: 768px) { #studentPageContainer article header { height: 65vh; } } @media only screen and (min-width: 992px) { #studentPageContainer article header { padding: 0px; } } @media only screen and (min-width: 1200px) { #studentPageContainer article header { height: 75vh; } } #studentPageContainer article header .vcenter { padding-bottom: 60px !important; position: relative; z-index: 10; padding-top: 0px; } @media only screen and (min-width: 1200px) { #studentPageContainer article header .vcenter { padding-bottom: 80px; } } @media only screen and (min-width: 1600px) { #studentPageContainer article header .vcenter { padding-bottom: 100px; } } #studentPageContainer article header .sub { display: block; font-family: "proxima-nova"; margin: 0 auto; font-size: 16px; font-size: 1.6rem; line-height: 1; font-style: italic; font-weight: 100; margin-bottom: 5px; text-transform: initial; top: 0; } #studentPageContainer article header h2 { margin-bottom: 0; line-height: 0.9; letter-spacing: 0; } #studentPageContainer article header h2 .mask-line > span { padding: 8px 0px; display: inline-block; } #studentPageContainer article header h2 .mask-line > span:after, #studentPageContainer article header h2 .mask-line > span:before { content: ''; display: block; position: absolute; top: 50%; margin-top: -1px; margin-left: 10px; width: 40px; height: 1px; left: 100%; background: white; } #studentPageContainer article header h2 .mask-line > span:before { left: inherit; right: 100%; margin-left: 0px; margin-right: 10px; } #studentPageContainer article header h1 { margin: 0px auto 20px; font-size: 55px; font-size: 5.5rem; max-width: 50%; font-weight: 700; line-height: 0.9; position: relative; } @media only screen and (max-width: 1200px) { #studentPageContainer article header h1 { font-size: 42px; font-size: 4.2rem; } } @media only screen and (max-width: 992px) { #studentPageContainer article header h1 { font-size: 38px; font-size: 3.8rem; max-width: 500px; } } @media only screen and (max-width: 767px) { #studentPageContainer article header h1 { font-size: 28px; font-size: 2.8rem; max-width: 300px; } } #studentPageContainer article header h1 .mask-line > span { padding: 8px 0px; } #studentPageContainer article header p { width: 75%; transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 1200ms; } @media only screen and (min-width: 1200px) { #studentPageContainer article header p { width: 50%; max-width: 750px; } } #studentPageContainer article header .page-visuel-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #161616; overflow: hidden; } #studentPageContainer article header .page-visuel-container:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-color: #1c1f2b; background-image: -webkit-linear-gradient(top, #1c1f2b 0%, #1c1f2b 50%, #4a2d25 100%); background-image: linear-gradient(to bottom,#1c1f2b 0%, #1c1f2b 50%, #4a2d25 100%); transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; opacity: 0.85; } #studentPageContainer article header .page-visuel-container .page-visuel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-size: cover !important; background-repeat: no-repeat; transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 200ms; -webkit-animation: ZoomInOut 30s infinite; -moz-animation: ZoomInOut 30s infinite; -o-animation: ZoomInOut 30s infinite; animation: ZoomInOut 30s infinite; } #studentPageContainer article.alternance .block-intro { background-position: left center; background-size: 80% auto; } #studentPageContainer article.stages .block-intro { background-position: left 40px; background-size: 50% auto; } #studentPageContainer article .block-intro { position: relative; z-index: 10; padding-bottom: 40px; background-position: right center; background-repeat: no-repeat; background-size: contain; } @media only screen and (max-width: 767px) { #studentPageContainer article .block-intro { background-image: none !important; } } #studentPageContainer article .block-intro .portrait-container { position: relative; margin: 0 auto; width: 120px; height: 120px; padding: 10px; top: -60px; background: rgba(28, 128, 197, 0.3); border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; } @media only screen and (min-width: 1200px) { #studentPageContainer article .block-intro .portrait-container { width: 160px; height: 160px; top: -80px; } } @media only screen and (min-width: 1600px) { #studentPageContainer article .block-intro .portrait-container { width: 200px; height: 200px; top: -100px; } } #studentPageContainer article .block-intro .portrait-container .portrait { overflow: hidden; width: 100%; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; } #studentPageContainer article .block-intro .content:before, #studentPageContainer article .block-intro .content:after { content: ''; display: block; margin: 0 auto; width: 1px; height: 40px; background: #dfdfdf; } @media only screen and (min-width: 1200px) { #studentPageContainer article .block-intro .content:before, #studentPageContainer article .block-intro .content:after { height: 80px; } } #studentPageContainer article .block-intro .content:before { margin-bottom: 20px; } #studentPageContainer article .block-intro .content:after { margin-top: 20px; } #studentPageContainer article .block-intro p { max-width: 700px; line-height: 1.4; } #studentPageContainer article .block-intro p + p { margin-top: 20px; } #studentPageContainer article .block-simple, #studentPageContainer article .block-profil, #studentPageContainer article .block-schools { background: #eeeeee; padding: 40px 0px; } @media only screen and (min-width: 768px) { #studentPageContainer article .block-simple, #studentPageContainer article .block-profil, #studentPageContainer article .block-schools { padding: 80px 0px; } } @media only screen and (min-width: 1200px) { #studentPageContainer article .block-simple, #studentPageContainer article .block-profil, #studentPageContainer article .block-schools { padding: 120px 0px; } } #studentPageContainer article .block-simple .wrapper > p, #studentPageContainer article .block-profil .wrapper > p, #studentPageContainer article .block-schools .wrapper > p { max-width: 700px; } @media only screen and (min-width: 1200px) { #studentPageContainer article .block-simple .wrapper > p, #studentPageContainer article .block-profil .wrapper > p, #studentPageContainer article .block-schools .wrapper > p { font-size: 1.5rem; line-height: 1.3; } } #studentPageContainer article .block-simple .wrapper > p + p, #studentPageContainer article .block-profil .wrapper > p + p, #studentPageContainer article .block-schools .wrapper > p + p { margin-top: 20px; } #studentPageContainer article .block-profil .profil-list { list-style: none; margin: 0; padding: 0; max-width: 1000px; margin: 0 auto; } @media only screen and (max-width: 767px) { #studentPageContainer article .block-profil .profil-list { margin-bottom: 40px; } } #studentPageContainer article .block-profil .profil-list:before, #studentPageContainer article .block-profil .profil-list:after { content: " "; display: table; } #studentPageContainer article .block-profil .profil-list:after { clear: both; } #studentPageContainer article .block-profil .profil-list li { position: relative; font-weight: 500; } @media only screen and (min-width: 767px) { #studentPageContainer article .block-profil .profil-list li { width: 50%; clear: both; float: left; padding-right: 40px; padding-bottom: 40px; text-align: right; } } @media only screen and (min-width: 1200px) { #studentPageContainer article .block-profil .profil-list li { padding-right: 60px; padding-bottom: 60px; } } @media only screen and (max-width: 767px) { #studentPageContainer article .block-profil .profil-list li { padding: 40px 0px 0px; } } @media only screen and (max-width: 767px) { #studentPageContainer article .block-profil .profil-list li + li { margin-top: 20px; } } #studentPageContainer article .block-profil .profil-list li p { font-size: 15px; font-size: 1.5rem; line-height: 1.6; font-weight: 500; } @media only screen and (min-width: 767px) { #studentPageContainer article .block-profil .profil-list li p { text-align: right; } } @media only screen and (max-width: 1200px) { #studentPageContainer article .block-profil .profil-list li p { font-size: 14px; font-size: 1.4rem; line-height: 1.4; } } @media only screen and (min-width: 767px) { #studentPageContainer article .block-profil .profil-list li:before { content: ''; display: block; width: 2px; height: 60px; right: 0px; margin: 0 auto; background: #d4e7f8; -moz-transform: translate(50%, 0); -o-transform: translate(50%, 0); -ms-transform: translate(50%, 0); -webkit-transform: translate(50%, 0); transform: translate(50%, 0); position: absolute; height: 100%; } } #studentPageContainer article .block-profil .profil-list li:after { content: ''; display: block; width: 22px; height: 22px; -webkit-border-radius: 11px; -moz-border-radius: 11px; -ms-border-radius: 11px; border-radius: 11px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ background: #0082C3; position: absolute; right: 50%; border: 3px solid #99c9f9; top: 0; right: -11px; } @media only screen and (max-width: 767px) { #studentPageContainer article .block-profil .profil-list li:after { right: 50%; margin-right: -11px; } } @media only screen and (min-width: 767px) { #studentPageContainer article .block-profil .profil-list li:nth-child(2n+1) { float: right; padding-right: 0px; padding-left: 40px; text-align: left; } #studentPageContainer article .block-profil .profil-list li:nth-child(2n+1) p { text-align: left; } #studentPageContainer article .block-profil .profil-list li:nth-child(2n+1):after { left: -11px; right: inherit; } #studentPageContainer article .block-profil .profil-list li:nth-child(2n+1):before { left: 0px; right: inherit; -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @media only screen and (min-width: 1200px) { #studentPageContainer article .block-profil .profil-list li:nth-child(2n+1) { padding-left: 60px; } } #studentPageContainer article .block-profil .profil-list li:last-child:before { top: 6px; width: 4px; height: 85px; background: url("../img/metiers/li_dots.png") no-repeat top left; background-size: cover; } #studentPageContainer article .block-schools { background: white; } #studentPageContainer article .block-schools .filter-schools { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; text-align: center; list-style: none; margin: 0px; padding: 0px; margin: 40px -40px; } @media only screen and (min-width: 768px) { #studentPageContainer article .block-schools .filter-schools { margin: 60px auto; width: 100%; } } @media only screen and (min-width: 1200px) { #studentPageContainer article .block-schools .filter-schools { width: 80%; } } #studentPageContainer article .block-schools .filter-schools li { width: 25%; opacity: 0.4; } #studentPageContainer article .block-schools .filter-schools li.active { opacity: 1; } #studentPageContainer article .block-schools .filter-schools li a { display: block; padding: 0 20px; height: 32px; } @media only screen and (min-width: 768px) { #studentPageContainer article .block-schools .filter-schools li a { height: 24px; height: 42px; } } #studentPageContainer article .block-schools .filter-schools li.com a { background: url("../img/students/filtre_com.png") no-repeat center center; background-size: auto 100%; } #studentPageContainer article .block-schools .filter-schools li.commerce a { background: url("../img/students/filtre_commerce.png") no-repeat center center; background-size: auto 100%; } #studentPageContainer article .block-schools .filter-schools li.design a { background: url("../img/students/filtre_design.png") no-repeat center center; background-size: auto 100%; } #studentPageContainer article .block-schools .filter-schools li.ingenieur a { background: url("../img/students/filtre_ingenieur.png") no-repeat center center; background-size: auto 100%; } #studentPageContainer article .btn.join { font-family: "futura-pt"; color: white; background: #EC6607; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; width: 220px; } #studentPageContainer article p + .btn.join { margin-top: 40px; } #studentPageContainer article .businessCall { position: relative !important; right: 0px !important; } .businessCall { z-index: 15; transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } .viewVideo .businessCall { -moz-transform: translate(0, 100%); -o-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } @media only screen and (min-width: 768px) { .businessCall { position: absolute; left: 0; bottom: 0px; width: 100%; } } @media only screen and (min-width: 992px) { .businessCall { right: 210px; } } @media only screen and (min-width: 1200px) { .businessCall { right: 260px; } } @media only screen and (min-width: 1600px) { .businessCall { right: 320px; } } .businessCall .inner { background: url("../img/students/background.jpg") no-repeat center center #0d1820; background-size: cover; padding: 40px; text-align: center; } @media only screen and (min-width: 768px) { .businessCall .inner { display: table; width: 100%; height: 150px; padding: 0px 80px; } } @media only screen and (min-width: 1200px) { .businessCall .inner { height: 180px; padding: 0 120px; } } @media only screen and (min-width: 1600px) { .businessCall .inner { height: 250px; padding: 0 120px; } } .businessCall .inner > * { display: block; } @media only screen and (min-width: 768px) { .businessCall .inner > * { display: table-cell; text-align: center; vertical-align: middle; padding: 0px; } } .businessCall .inner > * + * { margin-top: 20px; } @media only screen and (min-width: 768px) { .businessCall .inner > * + * { margin-top: 0px; } } @media only screen and (min-width: 768px) { .businessCall .inner > *.businessLogo { width: 25%; } } .businessCall .inner > *.businessLogo .icon { display: inline-block; max-width: 80px; margin: 0 auto; } @media only screen and (min-width: 768px) { .businessCall .inner > *.businessLogo .icon { max-width: 50%; } } @media only screen and (min-width: 768px) { .businessCall .inner > *.saisonLogo { width: 50%; } } .businessCall .inner > *.saisonLogo span { display: inline-block; max-width: 180px; } @media only screen and (min-width: 768px) { .businessCall .inner > *.saisonLogo span { width: 70%; max-width: 480px; margin: 0 auto; } } .businessCall .inner > * .btn { text-decoration: none; padding: 12px 20px; color: white; padding-right: 55px; font-family: "futura-pt-condensed"; text-transform: uppercase; font-weight: 400; font-size: 1.4rem; letter-spacing: 1px; background: url("../img/business/btn-background.png") no-repeat bottom right #2ba8d1; background-size: 40px auto; display: inline-block; cursor: pointer; } @media only screen and (min-width: 1200px) { .businessCall .inner > * .btn { padding: 15px 25px; font-size: 1.8rem; background-size: 50px auto; padding-right: 70px; } } aside.agenda { position: absolute; top: 0; right: 0; width: 210px; background: white; display: none; z-index: 20; box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.1); } @media only screen and (min-width: 992px) { aside.agenda { display: block; } } @media only screen and (min-width: 1200px) { aside.agenda { width: 260px; } } @media only screen and (min-width: 1600px) { aside.agenda { width: 320px; } } aside.agenda .inner { padding: 30px; } @media only screen and (min-width: 1200px) { aside.agenda .inner { padding: 40px; } } @media only screen and (min-width: 1600px) { aside.agenda .inner { padding: 60px; } } aside.agenda h3, aside.agenda #marque .intro ul li a .visuel + span, #marque .intro ul li a aside.agenda .visuel + span { margin-top: 0px; margin-bottom: 30px; font-size: 1.8rem; line-height: 1; text-transform: uppercase; } @media only screen and (min-width: 1200px) { aside.agenda h3, aside.agenda #marque .intro ul li a .visuel + span, #marque .intro ul li a aside.agenda .visuel + span { font-size: 2.2rem; margin-bottom: 40px; } } aside.agenda h3 .icon, aside.agenda #marque .intro ul li a .visuel + span .icon, #marque .intro ul li a aside.agenda .visuel + span .icon { display: block; width: 20px; margin-bottom: 10px; position: relative; } aside.agenda h3 .icon .day, aside.agenda #marque .intro ul li a .visuel + span .icon .day, #marque .intro ul li a aside.agenda .visuel + span .icon .day { position: absolute; width: 100%; text-align: center; bottom: 4px; line-height: 1; font-size: 1rem; font-style: normal; color: #0082C3; } aside.agenda .list-events { list-style: none; margin: 0px; padding: 0px; } aside.agenda .list-events .event + .event { margin-top: 30px; } @media only screen and (min-width: 1600px) { aside.agenda .list-events .event + .event { margin-top: 40px; } } aside.agenda .list-events .event > * { display: block; font-weight: 500; } aside.agenda .list-events .event .event-date { color: #c9c9c9; display: block; border-bottom: 1px solid #c9c9c9; font-size: 1rem; font-weight: 500; margin-bottom: 10px; } @media only screen and (min-width: 1600px) { aside.agenda .list-events .event .event-date { margin-bottom: 15px; font-size: 1.2rem; } } aside.agenda .list-events .event .event-date span { display: inline-block; color: #2db5e1; margin-left: 5px; float: right; } aside.agenda .list-events .event .event-name { font-size: 1.6rem; line-height: 1; font-weight: 700; } @media only screen and (min-width: 1200px) { aside.agenda .list-events .event .event-name { font-size: 1.8rem; } } @media only screen and (min-width: 1600px) { aside.agenda .list-events .event .event-name { font-size: 2rem; } } aside.agenda .list-events .event .event-where { color: #2db5e1; font-weight: 500; font-size: 1.1rem; } @media only screen and (min-width: 1200px) { aside.agenda .list-events .event .event-where { font-size: 1.2rem; } } @media only screen and (min-width: 1600px) { aside.agenda .list-events .event .event-where { font-size: 1.4rem; } } aside.agenda .list-events .event .event-where:before { content: '@'; } aside.agenda .list-events .event .event-type { font-size: 1rem; line-height: 1; color: #bdbdbd; } aside.agenda .list-events .event .event-tags { display: block; margin: 0px 0px 5px; } aside.agenda .list-events .event .event-tags span { display: inline-block; font-size: 1rem; line-height: 1; color: #bdbdbd; background: #f1f1f1; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 2px 8px; } aside.agenda p.no-results { font-size: 3rem; line-height: 0.9; text-transform: uppercase; font-weight: 900; font-family: "futura-pt"; opacity: 0.1; } @-webkit-keyframes shake { 0% { -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 8% { -moz-transform: rotate(25deg); -o-transform: rotate(25deg); -ms-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); } 16% { -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 24% { -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 100% { -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } } @-moz-keyframes shake { 0% { -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 8% { -moz-transform: rotate(25deg); -o-transform: rotate(25deg); -ms-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); } 16% { -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 24% { -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 100% { -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } } @-o-keyframes shake { 0% { -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 8% { -moz-transform: rotate(25deg); -o-transform: rotate(25deg); -ms-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); } 16% { -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 24% { -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 100% { -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes shake { 0% { -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 8% { -moz-transform: rotate(25deg); -o-transform: rotate(25deg); -ms-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); } 16% { -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 24% { -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 100% { -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } } #business { background: #151515; } #business .single-container { background: #f8f8f8; right: 0px; left: 0px; text-align: center; position: absolute !important; height: 100% !important; transition: right 800ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } @media only screen and (max-width: 992px) { #business .single-container { overflow-y: auto !important; right: 0px; } } @media only screen and (max-width: 767px) { #business .single-container { position: relative !important; overflow: hidden !important; height: auto !important; right: 0px; } } #business .single-container > * { padding: 40px; position: relative; } #business .single-container > * h2 { margin: 0px; margin-bottom: 60px; } #business .single-container > * p { margin: 60px auto; font-size: 1.7rem; line-height: 1.5; } #business .single-container > * p > img { display: block; max-width: 100%; height: auto; margin-top: 40px; } #business .single-container .intro, #business .single-container .principe { color: white; } #business .single-container .intro { background: #19242a; height: calc(100vh - 95px); padding: 0px; } @media only screen and (max-width: 992px) { #business .single-container .intro { height: auto; } } #business .single-container .intro .logo { display: none; } @media only screen and (min-width: 992px) { #business .single-container .intro .logo { position: absolute; display: block; top: 70px; left: 50%; -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); z-index: 10; margin-bottom: 0px; width: auto; opacity: 1; -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } } #business .single-container .intro h1 { max-width: 720px; width: 70%; margin: 0% auto; } #business .single-container .intro h1 #title_teammates { max-height: 100%; max-width: 100; -moz-transform: skewY(-8deg); -o-transform: skewY(-8deg); -ms-transform: skewY(-8deg); -webkit-transform: skewY(-8deg); transform: skewY(-8deg); } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > * { opacity: 1; -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); transition-property: transform, -webkit-transform; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.41, 0, 0.3, 1); transition-delay: 0s; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(1) { -webkit-transition-delay: 275ms; -moz-transition-delay: 275ms; transition-delay: 275ms; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(2) { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; transition-delay: 300ms; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(3) { -webkit-transition-delay: 325ms; -moz-transition-delay: 325ms; transition-delay: 325ms; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(4) { -webkit-transition-delay: 350ms; -moz-transition-delay: 350ms; transition-delay: 350ms; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(5) { -webkit-transition-delay: 375ms; -moz-transition-delay: 375ms; transition-delay: 375ms; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(6) { -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; transition-delay: 400ms; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(7) { -webkit-transition-delay: 425ms; -moz-transition-delay: 425ms; transition-delay: 425ms; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(8) { -webkit-transition-delay: 450ms; -moz-transition-delay: 450ms; transition-delay: 450ms; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(9) { -webkit-transition-delay: 475ms; -moz-transition-delay: 475ms; transition-delay: 475ms; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(10) { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; transition-delay: 500ms; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(11) { -webkit-transition-delay: 525ms; -moz-transition-delay: 525ms; transition-delay: 525ms; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(12) { -webkit-transition-delay: 550ms; -moz-transition-delay: 550ms; transition-delay: 550ms; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(13) { -webkit-transition-delay: 575ms; -moz-transition-delay: 575ms; transition-delay: 575ms; } #business .single-container .intro h1 #title_teammates #Les_coéquipiers > *:nth-child(14) { -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; transition-delay: 600ms; } #business .single-container .intro h1 #title_teammates #saison > * { opacity: 1; -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); transition-property: transform, -webkit-transform, opacity; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.41, 0, 0.3, 1); transition-delay: 0s; } #business .single-container .intro h1 #title_teammates #saison > *:nth-child(1) { -webkit-transition-delay: 825ms; -moz-transition-delay: 825ms; transition-delay: 825ms; } #business .single-container .intro h1 #title_teammates #saison > *:nth-child(2) { -webkit-transition-delay: 850ms; -moz-transition-delay: 850ms; transition-delay: 850ms; } #business .single-container .intro h1 #title_teammates #saison > *:nth-child(3) { -webkit-transition-delay: 875ms; -moz-transition-delay: 875ms; transition-delay: 875ms; } #business .single-container .intro h1 #title_teammates #saison > *:nth-child(4) { -webkit-transition-delay: 900ms; -moz-transition-delay: 900ms; transition-delay: 900ms; } #business .single-container .intro h1 #title_teammates #saison > *:nth-child(5) { -webkit-transition-delay: 925ms; -moz-transition-delay: 925ms; transition-delay: 925ms; } #business .single-container .intro h1 #title_teammates #saison > *:nth-child(6) { -webkit-transition-delay: 950ms; -moz-transition-delay: 950ms; transition-delay: 950ms; } #business .single-container .intro h1 #title_teammates #saison > *:nth-child(7) { -webkit-transition-delay: 975ms; -moz-transition-delay: 975ms; transition-delay: 975ms; } #business .single-container .intro h1 #title_teammates .st7 { stroke-dasharray: 280; stroke-dashoffset: 0; transition: all 600ms cubic-bezier(0.41, 0, 0.3, 1) 400ms; } #business .single-container .intro h1 #title_teammates .lines-group > * { opacity: 1; -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); transition-property: transform, -webkit-transform, opacity; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.41, 0, 0.3, 1); transition-delay: 800ms; } #business .single-container .intro h1 #title_teammates .lines-group > *:nth-child(1) { -webkit-transition-delay: 450ms; -moz-transition-delay: 450ms; transition-delay: 450ms; } #business .single-container .intro h1 #title_teammates .lines-group > *:nth-child(2) { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; transition-delay: 500ms; } #business .single-container .intro h1 #title_teammates .lines-group > *:nth-child(3) { -webkit-transition-delay: 550ms; -moz-transition-delay: 550ms; transition-delay: 550ms; } #business .single-container .intro h1 #title_teammates .lines-group > *:nth-child(4) { -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; transition-delay: 600ms; } #business .single-container .intro h1 #title_teammates .lines-group > *:nth-child(5) { -webkit-transition-delay: 650ms; -moz-transition-delay: 650ms; transition-delay: 650ms; } #business .single-container .intro h1 #title_teammates .lines-group > *:nth-child(6) { -webkit-transition-delay: 700ms; -moz-transition-delay: 700ms; transition-delay: 700ms; } #business .single-container .intro h1 #title_teammates .lines-group > *:nth-child(7) { -webkit-transition-delay: 750ms; -moz-transition-delay: 750ms; transition-delay: 750ms; } #business .single-container .intro h1 #title_teammates #rectSaison { stroke-width: 2px; transition: all 250ms cubic-bezier(0.41, 0, 0.3, 1) 800ms; } #business .single-container .intro .content { position: relative; padding: 15% 0; } @media only screen and (min-width: 992px) { #business .single-container .intro .content { padding: 0; top: 50%; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; transition-property: transform, opacity; transition-duration: 600ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 300ms; } } #business .single-container .intro #cross1 { position: absolute; bottom: -40px; left: 40%; } #business .single-container .intro #cross2 { position: absolute; bottom: -10px; left: 22%; } #business .single-container .intro #cross3 { position: absolute; top: 30px; left: 25%; } #business .single-container .intro #cross4 { position: absolute; top: -20px; left: 58%; } #business .single-container .intro #cross5 { position: absolute; top: 45px; left: 65%; } @media only screen and (max-width: 992px) { #business .single-container .intro #cross1, #business .single-container .intro #cross2, #business .single-container .intro #cross3, #business .single-container .intro #cross4, #business .single-container .intro #cross5 { display: none; } } #business .single-container .intro .go-to { bottom: 40px; opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(-50%, 0px); -o-transform: translate(-50%, 0px); -ms-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); transition-property: transform, opacity; transition-duration: 600ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 300ms; } #business .single-container .intro .go-to .mask-line > span { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition-property: transform, -webkit-transform; transition-duration: 400ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 900ms; } #business .single-container .intro .go-to .mask-line + .mask-line > span { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition-property: transform, -webkit-transform; transition-duration: 400ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 800ms; } @media only screen and (max-width: 992px) { #business .single-container .intro .go-to { display: none; } } #business .single-container .intro .view-video { display: inline-block; font-family: "futura-pt-condensed"; font-size: 1.6rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.2px; position: relative; margin-top: -30px; opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 250ms; } @media only screen and (max-width: 992px) { #business .single-container .intro .view-video { display: none; } } #business .single-container .intro .view-video .btn-icon { background: #2ba8d1; display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; position: relative; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; overflow: hidden; transition-property: transform, -webkit-transform; transition-duration: 400ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #business .single-container .intro .view-video .btn-icon > svg { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-left: 2px; } #business .single-container .intro .view-video .btn-text { position: absolute; top: 50%; left: 100%; margin-left: 15px; white-space: nowrap; -moz-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } #business .single-container .intro .view-video:hover .btn-icon { -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); } #business .single-container .intro .background-video { z-index: 0; overflow: hidden; -webkit-transform: translateZ(0); position: relative; width: 100%; background: #000; } @media only screen and (min-width: 992px) { #business .single-container .intro .background-video { pointer-events: none; position: fixed; top: 55px !important; left: 0px; right: 0px; bottom: 40px !important; } } @media only screen and (max-width: 992px) { #business .single-container .intro .background-video { padding-top: 47%; } } @media only screen and (max-width: 992px) { #business .single-container .intro .background-video.bandes { padding-top: 57%; } } #business .single-container .intro .background-video iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; } @media only screen and (max-width: 992px) { #business .single-container .intro .background-video iframe { width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; } } #business .single-container .intro .background-video:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: #0c171f; opacity: 0.7; filter: alpha(opacity=70); transition: opacity 600ms cubic-bezier(0.645, 0.045, 0.355, 1) 300ms; } #business .single-container .intro .close-video { position: absolute; top: 0px; right: 0px; z-index: 10; width: 53px; height: 53px; z-index: 24000; background: #0082C3; -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); transition: transform 600ms cubic-bezier(0.645, 0.045, 0.355, 1) 600ms; } #business .single-container .intro .close-video .icon { width: 14px; height: 14px; top: 50%; left: 50%; margin-left: -7px; margin-top: -7px; position: absolute; transition: transform 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } #business .single-container .intro .close-video:hover .icon { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } #business .single-container .principe { background: #0d1820; padding-top: 160px; padding-bottom: 160px; overflow: hidden; } @media only screen and (max-width: 767px) { #business .single-container .principe { padding-top: 80px; padding-bottom: 80px; } } #business .single-container .principe .background { position: absolute; top: 0; left: 0; width: 100%; height: 200%; background: url("../img/business/principe_background.jpg") no-repeat center center #0d1820; z-index: 0; } @media only screen and (max-width: 767px) { #business .single-container .principe .background { height: 100%; background-size: cover; } } #business .single-container .principe h2 { position: relative; max-width: 170px; margin-bottom: 70px; margin-left: auto; margin-right: auto; width: 80%; } #business .single-container .principe h2 #title_principe { max-height: 100%; max-width: 100; -moz-transform: skewY(-8deg); -o-transform: skewY(-8deg); -ms-transform: skewY(-8deg); -webkit-transform: skewY(-8deg); transform: skewY(-8deg); } #business .single-container .principe h2 #title_principe #Principe > * { -moz-transform: translateY(150px); -o-transform: translateY(150px); -ms-transform: translateY(150px); -webkit-transform: translateY(150px); transform: translateY(150px); transition-property: transform, -webkit-transform; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.41, 0, 0.3, 1); transition-delay: 0s; } #business .single-container .principe h2 #title_principe #Principe > *:nth-child(1) { -webkit-transition-delay: 25ms; -moz-transition-delay: 25ms; transition-delay: 25ms; } #business .single-container .principe h2 #title_principe #Principe > *:nth-child(2) { -webkit-transition-delay: 50ms; -moz-transition-delay: 50ms; transition-delay: 50ms; } #business .single-container .principe h2 #title_principe #Principe > *:nth-child(3) { -webkit-transition-delay: 75ms; -moz-transition-delay: 75ms; transition-delay: 75ms; } #business .single-container .principe h2 #title_principe #Principe > *:nth-child(4) { -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; transition-delay: 100ms; } #business .single-container .principe h2 #title_principe #Principe > *:nth-child(5) { -webkit-transition-delay: 125ms; -moz-transition-delay: 125ms; transition-delay: 125ms; } #business .single-container .principe h2 #title_principe #Principe > *:nth-child(6) { -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; transition-delay: 150ms; } #business .single-container .principe h2 #title_principe #Principe > *:nth-child(7) { -webkit-transition-delay: 175ms; -moz-transition-delay: 175ms; transition-delay: 175ms; } #business .single-container .principe h2 #title_principe #Principe > *:nth-child(8) { -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; transition-delay: 200ms; } #business .single-container .principe h2 #title_principe #Principe > *:nth-child(9) { -webkit-transition-delay: 225ms; -moz-transition-delay: 225ms; transition-delay: 225ms; } #business .single-container .principe h2 #title_principe #Principe > *:nth-child(10) { -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; transition-delay: 250ms; } #business .single-container .principe h2 #cross6 { position: absolute; bottom: -20px; right: 0%; } #business .single-container .principe p { font-size: 2rem; max-width: 750px; -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; transition-delay: 150ms; } @media only screen and (max-width: 767px) { #business .single-container .principe p { font-size: 1.6rem; } } #business .single-container .principe p span { max-width: 550px; display: block; font-size: 1.4rem; margin: 40px auto 0; } #business .single-container .principe > .btn-link { text-decoration: none; padding: 15px 25px; color: white; padding-right: 70px; font-family: "futura-pt-condensed"; text-transform: uppercase; font-weight: 400; font-size: 1.8rem; letter-spacing: 1px; background: url("../img/business/btn-background.png") no-repeat bottom right #2ba8d1; background-size: 50px auto; -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; transition-delay: 300ms; display: inline-block; margin-bottom: 30px; } #business .single-container .principe .btn-download { color: #2ba8d1; text-transform: uppercase; font-weight: 600; position: relative; font-family: "futura-pt-condensed"; font-size: 1.6rem; -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; transition-delay: 300ms; } #business .single-container .principe .btn-download:after { content: ''; display: block; position: absolute; bottom: -8px; left: 0px; right: 0px; height: 2px; background: #2ba8d1; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; transition-property: transform, -webkit-transform; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.41, 0, 0.3, 1); transition-delay: 0s; } #business .single-container .principe .btn-download:hover:after { -moz-transform: translateY(-5px); -o-transform: translateY(-5px); -ms-transform: translateY(-5px); -webkit-transform: translateY(-5px); transform: translateY(-5px); } #business .single-container .principe > *:not(.background) { position: relative; z-index: 10; opacity: 0; -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); transition-property: transform, -webkit-transform, opacity; transition-duration: 600ms; transition-timing-function: cubic-bezier(0.41, 0, 0.3, 1); transition-delay: 0s; } #business .single-container .principe.visible > *:not(.background) { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } #business .single-container .principe.visible #title_principe #Principe > * { opacity: 1; -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #business .single-container .projets { background: #f8f8f8; padding-top: 100px; padding-bottom: 40px; overflow: hidden; } @media only screen and (max-width: 767px) { #business .single-container .projets { padding-top: 80px; } } #business .single-container .projets .wrapper { max-width: 1000px; margin: 0 auto; } #business .single-container .projets .wrapper > h2, #business .single-container .projets .wrapper > p, #business .single-container .projets .wrapper > .btn-link { opacity: 0; -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); transition-property: transform, -webkit-transform, opacity; transition-duration: 600ms; transition-timing-function: cubic-bezier(0.41, 0, 0.3, 1); transition-delay: 0s; } #business .single-container .projets .wrapper > h2 { max-width: 270px; width: 80%; margin-left: auto; margin-right: auto; } #business .single-container .projets .wrapper > h2 #title_projets { max-height: 100%; max-width: 100; -moz-transform: skewY(-8deg); -o-transform: skewY(-8deg); -ms-transform: skewY(-8deg); -webkit-transform: skewY(-8deg); transform: skewY(-8deg); } #business .single-container .projets .wrapper > h2 #title_projets #Discover > * { -moz-transform: translateY(150px); -o-transform: translateY(150px); -ms-transform: translateY(150px); -webkit-transform: translateY(150px); transform: translateY(150px); transition-property: transform, -webkit-transform; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.41, 0, 0.3, 1); transition-delay: 0s; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(1) { -webkit-transition-delay: 25ms; -moz-transition-delay: 25ms; transition-delay: 25ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(2) { -webkit-transition-delay: 50ms; -moz-transition-delay: 50ms; transition-delay: 50ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(3) { -webkit-transition-delay: 75ms; -moz-transition-delay: 75ms; transition-delay: 75ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(4) { -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; transition-delay: 100ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(5) { -webkit-transition-delay: 125ms; -moz-transition-delay: 125ms; transition-delay: 125ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(6) { -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; transition-delay: 150ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(7) { -webkit-transition-delay: 175ms; -moz-transition-delay: 175ms; transition-delay: 175ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(8) { -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; transition-delay: 200ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(9) { -webkit-transition-delay: 225ms; -moz-transition-delay: 225ms; transition-delay: 225ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(10) { -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; transition-delay: 250ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(11) { -webkit-transition-delay: 275ms; -moz-transition-delay: 275ms; transition-delay: 275ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(12) { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; transition-delay: 300ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(13) { -webkit-transition-delay: 325ms; -moz-transition-delay: 325ms; transition-delay: 325ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(14) { -webkit-transition-delay: 350ms; -moz-transition-delay: 350ms; transition-delay: 350ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(15) { -webkit-transition-delay: 375ms; -moz-transition-delay: 375ms; transition-delay: 375ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(16) { -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; transition-delay: 400ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(17) { -webkit-transition-delay: 425ms; -moz-transition-delay: 425ms; transition-delay: 425ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(18) { -webkit-transition-delay: 450ms; -moz-transition-delay: 450ms; transition-delay: 450ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(19) { -webkit-transition-delay: 475ms; -moz-transition-delay: 475ms; transition-delay: 475ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(20) { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; transition-delay: 500ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(21) { -webkit-transition-delay: 525ms; -moz-transition-delay: 525ms; transition-delay: 525ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(22) { -webkit-transition-delay: 550ms; -moz-transition-delay: 550ms; transition-delay: 550ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(23) { -webkit-transition-delay: 575ms; -moz-transition-delay: 575ms; transition-delay: 575ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(24) { -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; transition-delay: 600ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(25) { -webkit-transition-delay: 625ms; -moz-transition-delay: 625ms; transition-delay: 625ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(26) { -webkit-transition-delay: 650ms; -moz-transition-delay: 650ms; transition-delay: 650ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(27) { -webkit-transition-delay: 675ms; -moz-transition-delay: 675ms; transition-delay: 675ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(28) { -webkit-transition-delay: 700ms; -moz-transition-delay: 700ms; transition-delay: 700ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(29) { -webkit-transition-delay: 725ms; -moz-transition-delay: 725ms; transition-delay: 725ms; } #business .single-container .projets .wrapper > h2 #title_projets #Discover > *:nth-child(30) { -webkit-transition-delay: 750ms; -moz-transition-delay: 750ms; transition-delay: 750ms; } #business .single-container .projets .wrapper > p { max-width: 970px; color: #8c8c8c; -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; transition-delay: 150ms; margin: 0px auto; } @media only screen and (max-width: 767px) { #business .single-container .projets .wrapper > p { font-size: 1.4rem; } } #business .single-container .projets .wrapper > p + p { margin-top: 20px; } #business .single-container .projets .wrapper > .btn-link { display: inline-block; text-decoration: none; padding: 15px 25px; color: white; padding-right: 70px; font-family: "futura-pt-condensed"; text-transform: uppercase; font-weight: 400; font-size: 1.8rem; letter-spacing: 1px; background: url("../img/business/btn-background.png") no-repeat bottom right #2ba8d1; background-size: 50px auto; margin-top: 40px; -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; transition-delay: 300ms; margin-bottom: 90px; } @media only screen and (max-width: 767px) { #business .single-container .projets .wrapper > .btn-link { margin-bottom: 60px; } } #business .single-container .projets.visible > .wrapper > h2, #business .single-container .projets.visible > .wrapper > p, #business .single-container .projets.visible > .wrapper > .btn-link, #business .single-container .projets.visible .nav-tabs { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } #business .single-container .projets.visible .wrapper > h2 #title_projets #Discover > * { -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } #business .single-container .projets .nav-tabs { margin: 0px; border: none; text-align: center; opacity: 0; -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); transition-property: transform, -webkit-transform, opacity; transition-duration: 600ms; transition-timing-function: cubic-bezier(0.41, 0, 0.3, 1); transition-delay: 0s; margin-bottom: 40px; } #business .single-container .projets .nav-tabs > li { display: inline-block; float: none; padding: 0px; padding-top: 15px; position: relative; width: 150px; text-align: center; } @media only screen and (max-width: 768px) { #business .single-container .projets .nav-tabs > li { width: auto; display: block; padding: 10px 10px 0px; } } #business .single-container .projets .nav-tabs > li.disabledTab { pointer-events: none; } #business .single-container .projets .nav-tabs > li:before { content: ''; display: none; position: absolute; background: #2ba8d1; width: 8px; height: 8px; top: -4px; left: 50%; margin-left: -4px; overflow: hidden; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; z-index: 10; transition: background 250ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } @media only screen and (max-width: 768px) { #business .single-container .projets .nav-tabs > li:before { display: none; } } #business .single-container .projets .nav-tabs > li .line { position: absolute; top: -1px; width: 150px; height: 2px; left: 50%; background: #e7e7e7; z-index: 0; display: none; } @media only screen and (max-width: 768px) { #business .single-container .projets .nav-tabs > li .line { display: none; } } #business .single-container .projets .nav-tabs > li .line:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #2ba8d1; transition: width 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } #business .single-container .projets .nav-tabs > li a { padding: 0px; background: none !important; border: none !important; text-transform: uppercase; font-weight: 600; color: #e7e7e7; font-size: 1.1rem; margin: 0px; transition: color 250ms linear 0ms; } @media only screen and (max-width: 768px) { #business .single-container .projets .nav-tabs > li a { color: #e7e7e7; } } #business .single-container .projets .nav-tabs > li a .txt { position: relative; display: inline-block; padding-bottom: 10px; } #business .single-container .projets .nav-tabs > li a .txt:after { content: ''; display: block; position: absolute; width: 0%; height: 2px; background: #2ba8d1; transition: width 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } #business .single-container .projets .nav-tabs > li.active { /*& ~ li { &:before { background:#e7e7e7; } > .line:after { width:0%; } a { color:#e7e7e7; } }*/ } #business .single-container .projets .nav-tabs > li.active:before { -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; transition-delay: 250ms; } #business .single-container .projets .nav-tabs > li.active a { color: #2ba8d1; } #business .single-container .projets .nav-tabs > li.active a > .txt:after { width: 100%; } #business .single-container .projets .nav-tabs > li.active > .line:after { width: 0%; } #business .single-container .projets .nav-tabs.nav-tabs-saisons { margin-top: 60px; margin-bottom: 60px; } @media only screen and (max-width: 768px) { #business .single-container .projets .nav-tabs.nav-tabs-saisons { margin-bottom: 40px; margin-top: 40px; } } #business .single-container .projets .nav-tabs.nav-tabs-saisons > li { width: auto; } #business .single-container .projets .nav-tabs.nav-tabs-saisons > li + li { margin-left: 15px; } #business .single-container .projets .nav-tabs.nav-tabs-saisons > li.active > a { border-color: #2ba8d1 !important; } #business .single-container .projets .nav-tabs.nav-tabs-saisons > li > a { padding: 8px 15px; border-radius: 0px !important; border: 2px solid #e7e7e7 !important; } #business .single-container .projets .nav-tabs.nav-tabs-saisons > li > a > .txt { padding-bottom: 0px !important; } #business .single-container .projets .nav-tabs.nav-tabs-saisons > li > a > .txt:after { display: none !important; } #business .single-container .projets .tab-content { position: relative; } #business .single-container .projets .tab-content .tab-pane { display: block; visibility: hidden; opacity: 0; overflow: visible; -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; position: absolute; width: 100%; top: 0; } #business .single-container .projets .tab-content .tab-pane.active { visibility: visible; opacity: 1; -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%); position: relative; } #business .single-container .projets .tab-content .tab-pane.active ~ .tab-pane { visibility: hidden; opacity: 0; -moz-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); position: absolute; } #business .single-container .projets .list-projets { margin-left: -25px; margin-right: -25px; } #business .single-container .projets .list-projets > * { padding: 0 25px; margin-bottom: 60px; } #business .single-container .projets .list-projets > *:nth-child(3n + 1) .projet { -webkit-transition-delay: 50ms; -moz-transition-delay: 50ms; transition-delay: 50ms; } #business .single-container .projets .list-projets > *:nth-child(3n + 2) .projet { -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; transition-delay: 150ms; } #business .single-container .projets .list-projets > *:nth-child(3n + 3) .projet { -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; transition-delay: 200ms; } #business .single-container .projets .list-projets .projet { text-align: left; opacity: 0; -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); transition-property: transform, -webkit-transform, opacity; transition-duration: 600ms; transition-timing-function: cubic-bezier(0.41, 0, 0.3, 1); transition-delay: 0s; } #business .single-container .projets .list-projets .projet.visible { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } #business .single-container .projets .list-projets .projet.finaliste .projet-preview .preview-container { overflow: hidden; } #business .single-container .projets .list-projets .projet.finaliste .projet-preview .preview-container:before { content: "Finaliste"; position: absolute; top: 16px; left: -22px; background: #2ba8d1; z-index: 10; color: white; font-weight: 900; font-size: 1rem; padding: 4px 0px; width: 100px; text-align: center; text-transform: uppercase; transform: rotate(-45deg); } #business .single-container .projets .list-projets .projet .projet-preview { position: relative; display: block; } #business .single-container .projets .list-projets .projet .projet-preview:hover .preview-container { box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.3); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); } #business .single-container .projets .list-projets .projet .projet-preview:hover .icon-play { -moz-transform: scale(0.85); -o-transform: scale(0.85); -ms-transform: scale(0.85); -webkit-transform: scale(0.85); transform: scale(0.85); } #business .single-container .projets .list-projets .projet .projet-preview .icon-play { width: 60px; height: 60px; position: absolute; top: 50%; left: 50%; margin-left: -30px; margin-top: -30px; z-index: 10; transition: all 400ms cubic-bezier(0.41, 0, 0.3, 1) 0s; } #business .single-container .projets .list-projets .projet .projet-preview .preview-container { position: relative; z-index: 0; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3); transition: all 400ms cubic-bezier(0.41, 0, 0.3, 1) 0s; } #business .single-container .projets .list-projets .projet .projet-preview .preview-container:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; z-index: 1; opacity: 0.55; } #business .single-container .projets .list-projets .projet .projet-infos { margin-top: 20px; position: relative; } #business .single-container .projets .list-projets .projet .projet-infos .vote { display: block; position: absolute; top: 0; right: 0; text-align: right; cursor: pointer; } #business .single-container .projets .list-projets .projet .projet-infos .vote > * { vertical-align: middle; display: inline-block; } #business .single-container .projets .list-projets .projet .projet-infos .vote:after { background: url("/wp-content/themes/decathlon-rh/img/business/vote-blue.png") no-repeat; content: " "; width: 25px; height: 25px; display: inline-block; vertical-align: middle; } #business .single-container .projets .list-projets .projet .projet-infos .vote.already { cursor: auto; } #business .single-container .projets .list-projets .projet .projet-infos .vote.already:after { background: url("/wp-content/themes/decathlon-rh/img/business/vote-grey.png") no-repeat; } #business .single-container .projets .list-projets .projet .projet-infos .vote .projet-vote { text-align: right; color: #aaaaaa; font-size: 1.2rem; line-height: 25px; white-space: nowrap; margin-right: 10px; top: 4px; position: relative; } #business .single-container .projets .list-projets .projet .projet-infos-inner { padding-right: 90px; } #business .single-container .projets .list-projets .projet .projet-infos-inner > * { display: block; } #business .single-container .projets .list-projets .projet .projet-infos-title { font-family: "futura-pt-condensed"; color: #1c1c1c; font-size: 1.6rem; font-weight: 600; text-transform: uppercase; } #business .single-container .projets .list-projets .projet .projet-infos-by { color: #2ba8d1; font-size: 1.2rem; font-weight: 400; } #business .tweets-toggle { display: none; background: white; position: absolute; top: 0; right: -10px; border: none; padding: 20px; height: auto; outline: none; padding-right: 30px; transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #business .tweets-toggle svg { display: block; -webkit-animation: shake 3000ms ease-out infinite; -moz-animation: shake 3000ms ease-out infinite; -o-animation: shake 3000ms ease-out infinite; animation: shake 3000ms ease-out infinite; } #business .tweets-toggle svg path { fill: #0082C3; } .viewTweets #business .tweets-toggle { -moz-transform: translateX(-300px); -o-transform: translateX(-300px); -ms-transform: translateX(-300px); -webkit-transform: translateX(-300px); transform: translateX(-300px); } @media only screen and (min-width: 992px) { #business .tweets-toggle { display: block; } } #business .more-content { position: absolute; top: 0; right: 0; width: 300px; background: white; padding: 50px 30px; -moz-transform: translateX(300px); -o-transform: translateX(300px); -ms-transform: translateX(300px); -webkit-transform: translateX(300px); transform: translateX(300px); transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; display: none; } @media only screen and (min-width: 992px) { #business .more-content { display: block; } } .viewTweets #business .more-content { -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%); } #business .more-content h3, #business .more-content #marque .intro ul li a .visuel + span, #marque .intro ul li a #business .more-content .visuel + span { margin: 0px; text-align: center; max-width: 200px; margin: 0 auto; margin-bottom: 40px; -moz-transform: skewY(-8deg); -o-transform: skewY(-8deg); -ms-transform: skewY(-8deg); -webkit-transform: skewY(-8deg); transform: skewY(-8deg); } #business .more-content h3 svg, #business .more-content #marque .intro ul li a .visuel + span svg, #marque .intro ul li a #business .more-content .visuel + span svg { max-height: 100%; max-width: 100%; } #business .more-content .list-tweets { margin: 0px; } #business .more-content .list-tweets > li { opacity: 0; -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); transition-property: transform, -webkit-transform, opacity; transition-duration: 600ms; transition-timing-function: cubic-bezier(0.41, 0, 0.3, 1); transition-delay: 0s; } #business .more-content .list-tweets > li.visible { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } #business .more-content .list-tweets li + li { margin-top: 30px; } #business .more-content .list-tweets article { text-align: center; font-size: 1.4rem; line-height: 1.3; } #business .more-content .list-tweets article .tweet-user .tweet-user-avatar { display: block; width: 45px; height: 45px; margin: 0 auto; margin-bottom: 16px; overflow: hidden; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; } #business .more-content .list-tweets article .tweet-user .tweet-user-name { color: #2f3138; font-weight: 600; } #business .more-content .list-tweets article .tweet-content { color: #2e3037; margin: 0px; } #business .more-content .list-tweets article .tweet-content a { color: #2db5e1; text-decoration: none; } #business .more-content .list-tweets article .tweet-date { color: #bdbdbd; font-size: 1.1rem; font-weight: 400; } .viewVideo #business .single-container { overflow: hidden !important; height: 100%; right: 0px; -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; transition-delay: 300ms; } .viewVideo #business .single-container .intro .logo { -moz-transform: translate(-50%, -150px); -o-transform: translate(-50%, -150px); -ms-transform: translate(-50%, -150px); -webkit-transform: translate(-50%, -150px); transform: translate(-50%, -150px); -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; transition-delay: 0ms; } .viewVideo #business .single-container .intro .content { -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; transition-delay: 0ms; } .viewVideo #business .single-container .intro .go-to { -moz-transform: translate(-50%, 150px); -o-transform: translate(-50%, 150px); -ms-transform: translate(-50%, 150px); -webkit-transform: translate(-50%, 150px); transform: translate(-50%, 150px); -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; transition-delay: 0ms; } .viewVideo #business .single-container .intro .background-video { pointer-events: all; right: 0px; } .viewVideo #business .single-container .intro .background-video .close-video { -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; transition-delay: 0ms; } .viewVideo #business .single-container .intro .background-video:after { opacity: 0; -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; transition-delay: 300ms; } .viewVideo #business .more-content { -moz-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; transition-delay: 300ms; } .viewVideo #business .tweets-toggle { -moz-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; transition-delay: 300ms; } #business.waiting .intro .logo { opacity: 0; -moz-transform: translate(-50%, 75px); -o-transform: translate(-50%, 75px); -ms-transform: translate(-50%, 75px); -webkit-transform: translate(-50%, 75px); transform: translate(-50%, 75px); } #business.waiting .intro h1 #title_teammates #Les_coéquipiers > * { opacity: 0; -moz-transform: translateY(150px); -o-transform: translateY(150px); -ms-transform: translateY(150px); -webkit-transform: translateY(150px); transform: translateY(150px); } #business.waiting .intro h1 #title_teammates #saison > * { opacity: 0; -moz-transform: translateY(15px); -o-transform: translateY(15px); -ms-transform: translateY(15px); -webkit-transform: translateY(15px); transform: translateY(15px); } #business.waiting .intro h1 #title_teammates .lines-group > * { opacity: 0; -moz-transform: translateY(15px); -o-transform: translateY(15px); -ms-transform: translateY(15px); -webkit-transform: translateY(15px); transform: translateY(15px); } #business.waiting .intro h1 #title_teammates .st7 { stroke-dashoffset: 280; } #business.waiting .intro h1 #title_teammates #rectSaison { stroke-width: 0px; } #business.waiting .intro .view-video { opacity: 0; -moz-transform: translateY(75px); -o-transform: translateY(75px); -ms-transform: translateY(75px); -webkit-transform: translateY(75px); transform: translateY(75px); } .popupBusiness { z-index: 25000; /* animate in */ /* animate out */ /* animate in */ /* animate out */ } .popupBusiness.mfp-bg { background: #000; opacity: 0; transition: opacity 300ms linear 0ms; } .popupBusiness .mfp-content { max-width: 980px; margin: 100px 0px; } @media only screen and (max-width: 767px) { .popupBusiness .mfp-content { margin: 0px; padding: 60px 0px; } } .popupBusiness .mfp-content .mfp-close { color: white; background: none; top: 90px; } @media only screen and (max-width: 767px) { .popupBusiness .mfp-content .mfp-close { top: 10px; } } .popupBusiness .projet-details { text-align: center; } .popupBusiness .projet-details > * { opacity: 0; -moz-transform: translateY(75px); -o-transform: translateY(75px); -ms-transform: translateY(75px); -webkit-transform: translateY(75px); transform: translateY(75px); transition-property: transform, -webkit-transform, opacity; transition-duration: 600ms; transition-timing-function: cubic-bezier(0.41, 0, 0.3, 1); transition-delay: 0s; } .popupBusiness .projet-details > header { height: 50px; margin-bottom: 40px; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; transition-delay: 0ms; } .popupBusiness .projet-details > header .projet-details-title { font-family: "futura-pt-condensed"; color: white; font-size: 3.2rem; line-height: 1; text-transform: uppercase; font-weight: 600; margin: 0px; } .popupBusiness .projet-details > header .projet-details-by { color: #2ba8d1; font-size: 1.2rem; font-weight: 400; } .popupBusiness .projet-details > .projet-details-video { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; transition-delay: 150ms; background: #000; } .popupBusiness .projet-details > .projet-details-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .popupBusiness .projet-details > .projet-details-content { padding: 40px 0px; -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; transition-delay: 300ms; } .popupBusiness .projet-details > .projet-details-content p { color: white; font-size: 1.4rem; line-height: 1.4; width: 80%; margin: 0 auto; } .popupBusiness .projet-details > .projet-details-content p + p { margin-top: 40px; } .popupBusiness.mfp-ready .projet-details > * { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } .popupBusiness.mfp-removing .projet-details > * { opacity: 0; -moz-transform: translateY(75px); -o-transform: translateY(75px); -ms-transform: translateY(75px); -webkit-transform: translateY(75px); transform: translateY(75px); -webkit-transition-duration: 400ms; -moz-transition-duration: 400ms; transition-duration: 400ms; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; transition-delay: 0ms; } .popupBusiness.mfp-ready.mfp-bg { opacity: 0.9; } .popupBusiness.mfp-removing.mfp-bg { opacity: 0; -webkit-transition-duration: 200ms; -moz-transition-duration: 200ms; transition-duration: 200ms; -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; transition-delay: 200ms; } /*#business { background:white; #loader { span { background: url("../img/loader/loader-g.png") no-repeat center center; @include image-2x("../img/loader/loader-g2x.png", 75px, 525px); @media only screen and (max-width: 767px) { background: url("../img/loader/loader-g-min.png") no-repeat center center; @include image-2x("../img/loader/loader-g-min2x.png", 30px, 210px); } } } @media only screen and (max-width: 992px) { position:relative; height:auto; } .single-container { height: 100%; left: 0; overflow: hidden; position: absolute; right: 20%; top: 0; @media only screen and (min-width : 767px) { background:url('../img/business/background_page.jpg') no-repeat center center #f7f7f7; background-size:cover; } @media only screen and (max-width : 767px) { background:url('../img/business/background_page_mobile.jpg') no-repeat top center #f0f0f0; background-size:100% auto!important; } @media only screen and (max-width: 1170px) { right:0; } @media only screen and (max-width: 992px) { position:relative; height:auto; width:100%; } @media only screen and (max-width: 767px) { overflow:visible!important; clear:both; background-size:auto; } .content { padding:0 10%; .page-title { text-align:center; margin-bottom:5%; @media only screen and (max-width : 992px){ margin-bottom:40px; } h1 { @include font-size(2.65); color:$blue-decath; line-height:1.1; @media only screen and (max-width : 1200px){ @include font-size(1.6); } @media only screen and (max-width : 992px){ @include font-size(2); } @media only screen and (max-width : 767px){ @include font-size(1.8); } span { display:block; @include font-size(4.5); color:$font-color; @media only screen and (max-width : 1200px){ @include font-size(2.6); } @media only screen and (max-width : 992px){ @include font-size(3.4); } @media only screen and (max-width : 767px){ @include font-size(2.6); } } } } .row { margin-left:-35px; margin-right:-35px; > * { padding:0 35px; & + * { @media only screen and (max-width : 992px){ margin-top:40px; } } } } .logo { img{ display:inline-block; } } h3 { @include font-size(2.5); text-transform:none; margin:0 0 10px 0; } p { @include font-size(1.5); @media only screen and (max-width : 1200px){ @include font-size(1.3); } } } } .more-content { background:white; position:absolute; right:0; width:20%; height:100%; top:0; @media only screen and (max-width: 1170px) { position:relative; height:auto; width:100%; display:none; } .scroll-container { padding:0px 15%; top:110px; width:100%; @media only screen and (max-width: 992px) { top:0; padding:0 30px; } } .list-articles > * { margin-bottom:60px; } .post-infos { white-space:normal; @media only screen and (max-width: 1600px) { @include font-size(1); } .cat { @media only screen and (max-width: 1440px) { display:block; } } } > h3 { position:relative; z-index:10; @include font-size(2.4); margin:0; padding:40px 15%; @media only screen and (max-width: 992px) { @include font-size(1.8); padding:20px 30px; } } article { header h3 { height:auto; } } } }*/ #press { background: white; } #press .curtain { background: white; } #press > header { position: relative; z-index: 100; padding: 30px 60px; background: white; } @media only screen and (max-width: 1440px) { #press > header { padding: 30px; } } @media only screen and (max-width: 767px) { #press > header { display: none; } } #press > header .back-to { float: left; margin-right: 20px; width: 50px; } #press > header .navbar-press { border: none; margin: 0; margin-left: 70px; } #press > header .navbar-press > ul { margin: 0; } #press > header .navbar-press .dropdown { margin-right: 15px; } @media only screen and (max-width: 767px) { #press > header .navbar-press .dropdown { margin: 0; margin-bottom: 5px; } } #press > header .navbar-press .dropdown .arrow { width: 14px; display: inline-block; height: 8px; vertical-align: middle; margin-left: 10px; background: url("../img/shared/dropdown-arrow.png") no-repeat top center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { #press > header .navbar-press .dropdown .arrow { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/dropdown-arrow2x.png"); background-size: 14px 16px; } } @media only screen and (max-width: 992px) { #press > header .navbar-press .dropdown .arrow { float: right; margin-top: 6px; } } #press > header .navbar-press .dropdown .dropdown-toggle { background: #efefef; text-transform: uppercase; font-weight: 600; font-size: 12px; font-size: 1.2rem; } #press > header .navbar-press .dropdown .dropdown-menu { position: absolute; overflow-y: auto !important; border: none; padding: 0; background: #efefef; box-shadow: none; border-radius: 0px; min-width: 100%; max-height: 300px; overflow-y: auto; top: 100%; bottom: inherit; } #press > header .navbar-press .dropdown .dropdown-menu li a { padding: 12px 15px; } #press > header .navbar-press .dropdown.open .arrow { background-position: bottom center; } #press > header .navbar-press .navbar-form { margin: 0; padding: 0; border-bottom: 1px solid #d5d5d5; position: relative; } #press > header .navbar-press .navbar-form .form-group { width: 100%; padding-right: 50px; } #press > header .navbar-press .navbar-form .form-control { box-shadow: none; border-radius: 0px; border: none; height: 46px; background: none; } #press > header .navbar-press .navbar-form button { position: absolute; top: 0; right: 0; height: 46px; } #press .list-articles-container { top: 110px; } @media only screen and (max-width: 992px) { #press .list-articles-container { position: relative; top: 0; padding-bottom: 20px; } } .page-template-page-press-php #loaderPage span { background: url("../img/loader/loader-g.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .page-template-page-press-php #loaderPage span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g2x.png"); background-size: 75px 525px; } } @media only screen and (max-width: 767px) { .page-template-page-press-php #loaderPage span { background: url("../img/loader/loader-g-min.png") no-repeat center center; } } @media only screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 2.6 / 2), only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-resolution: 1.3dppx) { .page-template-page-press-php #loaderPage span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g-min2x.png"); background-size: 30px 210px; } } @media only screen and (min-width: 100px) { body.post-type-archive-app_job > header, body.post-type-archive-app_job > footer { position: fixed; } } @media only screen and (min-width: 100px) { body.post-type-archive-app_job .main, body.post-type-archive-app_job .main > section { position: fixed; height: 100%; top: 0px; } } @media only screen and (min-width: 100px) { body.single-app_job #metiers { -moz-transform: translate(0, 100%); -o-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } body.single-app_job.showMetier #filieres { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(0, -20%); -o-transform: translate(0, -20%); -ms-transform: translate(0, -20%); -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } body.single-app_job.showMetier #metiers { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0, 0%); -o-transform: translate(0, 0%); -ms-transform: translate(0, 0%); -webkit-transform: translate(0, 0%); transform: translate(0, 0%); } body.single-app_job.showMetier .jobs-nav-container { -moz-transform: translate(0, 0%); -o-transform: translate(0, 0%); -ms-transform: translate(0, 0%); -webkit-transform: translate(0, 0%); transform: translate(0, 0%); } body.single-app_job.showMetier .jobs-nav-container .jobs-nav .cat { -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } body.single-app_job.showMetier .jobs-nav-container .jobs-nav .indicator:after { transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1) 650ms; -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } body.single-app_job.showMetier .jobs-nav-container .jobs-nav ul li { -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } body.single-app_job.showMetier.viewVideo .jobs-nav-container { -moz-transform: translate(-500px, 0%); -o-transform: translate(-500px, 0%); -ms-transform: translate(-500px, 0%); -webkit-transform: translate(-500px, 0%); transform: translate(-500px, 0%); } } @media only screen and (max-width: 767px) { body.single-app_job.showMetier #filieres { display: none; } } .jobs-nav-container { position: fixed; left: 100px; height: 100%; top: 0; z-index: 10; transition-property: transform, -webkit-transform; transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 150ms; -moz-transform: translate(0, 50%); -o-transform: translate(0, 50%); -ms-transform: translate(0, 50%); -webkit-transform: translate(0, 50%); transform: translate(0, 50%); } .showMetier.viewVideo .jobs-nav-container { -moz-transform: translate(-500px, 0%); -o-transform: translate(-500px, 0%); -ms-transform: translate(-500px, 0%); -webkit-transform: translate(-500px, 0%); transform: translate(-500px, 0%); } @media only screen and (max-width: 1440px) { .jobs-nav-container { left: 40px; } } @media only screen and (max-width: 992px) { .jobs-nav-container { left: 10px; } } @media only screen and (max-width: 767px) { .jobs-nav-container { display: none; } } .jobs-nav-container:after { content: ''; display: block; background: white; position: absolute; top: 0; left: -6px; width: 16px; height: 16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5); -moz-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5); } .jobs-nav-container .jobs-nav { position: absolute; top: 50%; left: 0px; color: white; -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); width: 200px; z-index: 10; } .jobs-nav-container .jobs-nav.dark .cat { color: #414141; } .jobs-nav-container .jobs-nav .cat { display: block; padding-left: 25px; font-weight: 800; font-size: 12px; font-size: 1.2rem; line-height: 1.2; text-transform: uppercase; font-family: "futura-pt"; -moz-transform: translateY(1000px); -o-transform: translateY(1000px); -ms-transform: translateY(1000px); -webkit-transform: translateY(1000px); transform: translateY(1000px); transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 250ms; } .jobs-nav-container .jobs-nav ul { list-style: none; padding: 0; margin: 0px; margin-top: 30px; } .jobs-nav-container .jobs-nav ul li { padding-left: 25px; position: relative; -moz-transform: translateY(1000px); -o-transform: translateY(1000px); -ms-transform: translateY(1000px); -webkit-transform: translateY(1000px); transform: translateY(1000px); } .jobs-nav-container .jobs-nav ul li:nth-child(1) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 280ms; } .jobs-nav-container .jobs-nav ul li:nth-child(2) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 310ms; } .jobs-nav-container .jobs-nav ul li:nth-child(3) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 340ms; } .jobs-nav-container .jobs-nav ul li:nth-child(4) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 370ms; } .jobs-nav-container .jobs-nav ul li:nth-child(5) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 400ms; } .jobs-nav-container .jobs-nav ul li:nth-child(6) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 430ms; } .jobs-nav-container .jobs-nav ul li:nth-child(7) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 460ms; } .jobs-nav-container .jobs-nav ul li:nth-child(8) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 490ms; } .jobs-nav-container .jobs-nav ul li:nth-child(9) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 520ms; } .jobs-nav-container .jobs-nav ul li:nth-child(10) { transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 550ms; } .jobs-nav-container .jobs-nav ul li + li { margin-top: 10px; } .jobs-nav-container .jobs-nav ul li a { text-transform: uppercase; font-weight: 900; color: #bcc5cc; font-family: "futura-pt"; } .no-touch .jobs-nav-container .jobs-nav ul li a:hover { color: #0082C3; } .jobs-nav-container .jobs-nav ul li a span { display: inline-block; font-size: 10px; font-size: 1rem; line-height: 1.1; } .jobs-nav-container .jobs-nav ul li.current a { color: #0082C3; } .jobs-nav-container .jobs-nav .indicator { left: -1px; pointer-events: none; position: absolute; top: 52px; transition: top 600ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } .jobs-nav-container .jobs-nav .indicator:after { -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); content: ''; display: block; background: #0082C3; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ height: 6px; width: 6px; overflow: hidden; transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } .jobs-nav-container .progress-line { position: absolute; top: 0; left: 1px; width: 2px; height: 100%; background: white; opacity: 0.1; filter: alpha(opacity=10); z-index: 0; } .jobs-nav-container.waiting { -moz-transform: translate(0, 105%); -o-transform: translate(0, 105%); -ms-transform: translate(0, 105%); -webkit-transform: translate(0, 105%); transform: translate(0, 105%); } #filieres { position: relative; z-index: 1; background: #0d1724; color: white; transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } @media only screen and (min-width: 767px) { #filieres.loading { opacity: 0.2; filter: alpha(opacity=20); } } #filieres:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: -moz-linear-gradient(top, rgba(7, 24, 37, 0) 0%, #071825 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(7, 24, 37, 0)), color-stop(100%, #071825)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(7, 24, 37, 0) 0%, #071825 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(7, 24, 37, 0) 0%, #071825 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(7, 24, 37, 0) 0%, #071825 100%); /* IE10+ */ background: linear, to bottom, rgba(7, 24, 37, 0) 0%, #071825 100%; /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00071825', endColorstr='#071825',GradientType=0 ); /* IE6-9 */ } #filieres .list-icons { text-align: center; margin: 0px; margin-bottom: 20px; transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 400ms; } #filieres .list-icons li { display: none; } #filieres .list-icons .icon { width: 75px; height: 75px; overflow: hidden; -webkit-border-radius: 38px; -moz-border-radius: 38px; -ms-border-radius: 38px; border-radius: 38px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ border: 2px solid #0082C3; } @media only screen and (max-width: 1200px) { #filieres .list-icons .icon { width: 60px; height: 60px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ } } #filieres .list-icons .icon path, #filieres .list-icons .icon rect, #filieres .list-icons .icon polygon { fill: #0082C3; } #filieres .vcenter { position: relative; z-index: 10; } @media only screen and (max-width: 767px) { #filieres .vcenter { padding: 60px 40px !important; } } #filieres .wrapper { max-width: 1440px; margin: 0 auto; text-align: center; padding: 0 250px; } @media only screen and (max-width: 1200px) { #filieres .wrapper { padding: 0px 100px; } } @media only screen and (max-width: 992px) { #filieres .wrapper { padding: 0px 10%; } } #filieres h2 { font-size: 70px; font-size: 7rem; line-height: 1; margin: 0px; margin-bottom: 60px; } @media only screen and (max-width: 1440px) { #filieres h2 { font-size: 50px; font-size: 5rem; margin-bottom: 30px; } } @media only screen and (max-width: 1200px) { #filieres h2 { font-size: 40px; font-size: 4rem; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { #filieres h2 { font-size: 30px; font-size: 3rem; } } @media only screen and (max-width: 480px) { #filieres h2 { font-size: 22px; font-size: 2.2rem; } } #filieres h2 .sub { font-size: 26px; font-size: 2.6rem; font-style: italic; font-family: "proxima-nova"; font-weight: 100; text-transform: none; } @media only screen and (max-width: 1440px) { #filieres h2 .sub { font-size: 18px; font-size: 1.8rem; } } #filieres p { font-size: 16px; font-size: 1.6rem; line-height: 1.6; color: #bcc5cc; margin: 0 auto; transition-property: transform, -webkit-transform, opacity; transition-duration: 1200ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 400ms; } @media only screen and (max-width: 1440px) { #filieres p { font-size: 14px; font-size: 1.4rem; } } @media only screen and (max-width: 1200px) { #filieres p { font-size: 13px; font-size: 1.3rem; line-height: 1.4; } } #filieres .list-jobs { margin: 0px; margin-top: 60px; } @media only screen and (max-width: 1440px) { #filieres .list-jobs { margin-top: 30px; } } #filieres .list-jobs li { margin-bottom: 15px; } @media only screen and (max-width: 767px) { #filieres .list-jobs li { display: block; padding: 0px; width: 100%; } } #filieres .list-jobs li:nth-child(1) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 280ms; } #filieres .list-jobs li:nth-child(2) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 310ms; } #filieres .list-jobs li:nth-child(3) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 340ms; } #filieres .list-jobs li:nth-child(4) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 370ms; } #filieres .list-jobs li:nth-child(5) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 400ms; } #filieres .list-jobs li:nth-child(6) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 430ms; } #filieres .list-jobs li:nth-child(7) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 460ms; } #filieres .list-jobs li:nth-child(8) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 490ms; } #filieres .list-jobs li:nth-child(9) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 520ms; } #filieres .list-jobs li:nth-child(10) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 550ms; } #filieres .list-jobs li:nth-child(11) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 580ms; } #filieres .list-jobs li:nth-child(12) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 610ms; } #filieres .list-jobs li:nth-child(13) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 640ms; } #filieres .list-jobs li:nth-child(14) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 670ms; } #filieres .list-jobs li:nth-child(15) { transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 700ms; } #filieres .list-jobs .btn-lined { font-size: 12px; font-size: 1.2rem; } @media only screen and (max-width: 767px) { #filieres .list-jobs .btn-lined { font-size: 10px; font-size: 1rem; display: block; } } #filieres .visuel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-size: cover; opacity: 0.2; filter: alpha(opacity=20); transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 200ms; -webkit-animation: ZoomInOut 30s infinite; -moz-animation: ZoomInOut 30s infinite; -o-animation: ZoomInOut 30s infinite; animation: ZoomInOut 30s infinite; } #filieres.waiting .list-icons { -moz-transform: translate(0, 100px); -o-transform: translate(0, 100px); -ms-transform: translate(0, 100px); -webkit-transform: translate(0, 100px); transform: translate(0, 100px); opacity: 0; filter: alpha(opacity=0); } #filieres.waiting .jobs-nav li { -moz-transform: translate(0, 500px); -o-transform: translate(0, 500px); -ms-transform: translate(0, 500px); -webkit-transform: translate(0, 500px); transform: translate(0, 500px); } #filieres.waiting .visuel { -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); } #filieres.waiting p { -moz-transform: translate(0, 100px); -o-transform: translate(0, 100px); -ms-transform: translate(0, 100px); -webkit-transform: translate(0, 100px); transform: translate(0, 100px); opacity: 0; filter: alpha(opacity=0); } #filieres.offre-conception .list-icons li.icon-offre { display: inline-block; } #filieres.paie .list-icons li.icon-paie { display: inline-block; } #filieres.communication .list-icons li.icon-communication { display: inline-block; } #filieres.production .list-icons li.icon-production { display: inline-block; } #filieres.finance .list-icons li.icon-finance { display: inline-block; } #filieres.supply-logistique .list-icons li.icon-supply { display: inline-block; } #filieres.magasin .list-icons li.icon-magasin { display: inline-block; } #filieres.informatique .list-icons li.icon-informatique { display: inline-block; } #mobile-metier-menu { display: none; width: 100%; } @media only screen and (max-width: 767px) { .showMetier #mobile-metier-menu { display: block; } } #mobile-metier-menu.fixed { position: fixed; top: 0; left: 0; z-index: 15; } #mobile-metier-menu button { box-shadow: none !important; border: none; width: 100%; padding: 15px 0; text-align: center; text-transform: uppercase; font-family: "proxima-nova"; font-size: 14px; font-size: 1.4rem; font-weight: 300; line-height: 1.4; position: relative; background: #035180; color: #fff; font-style: italic; text-transform: none; } #mobile-metier-menu button .caret { border: none; background: url("../img/metiers/caret.png") no-repeat 0 0/0px 10px transparent; width: 9px; height: 5px; margin-top: -2px; margin-left: 4px; background-size: cover; } #mobile-metier-menu ul.dropdown-menu { box-shadow: none !important; background: #034770 none repeat scroll 0 0; border: medium none; border-radius: 0; color: #fff; float: none; margin: 0; padding: 0; position: relative; text-align: center; text-transform: uppercase; display: block; height: 0; overflow: hidden; -webkit-transition: height 300ms cubic-bezier(0.23, 1, 0.32, 1), padding 300ms cubic-bezier(0.23, 1, 0.32, 1); -moz-transition: height 300ms cubic-bezier(0.23, 1, 0.32, 1), padding 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: height 300ms cubic-bezier(0.23, 1, 0.32, 1), padding 300ms cubic-bezier(0.23, 1, 0.32, 1); } #mobile-metier-menu ul.dropdown-menu li { padding: 0; } .no-touch #mobile-metier-menu ul.dropdown-menu li:hover { background: #035180; } #mobile-metier-menu ul.dropdown-menu li.active a { color: #EC6607; } #mobile-metier-menu ul.dropdown-menu a { background: transparent !important; padding: 10px 0; color: #fff; font-family: "futura-pt"; font-size: 14px; font-size: 1.4rem; font-weight: 800; line-height: 1.4; } #mobile-metier-menu.open ul.dropdown-menu { padding: 13px 0; height: auto; } #mobile-metier-menu.open .caret { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #metiers { z-index: 5; transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 200ms; } @media only screen and (max-width: 767px) { #metiers { display: none; } } @media only screen and (max-width: 767px) { .showMetier #metiers { display: block; } } #metiers .background-video { position: absolute; top: 0 !important; left: 0; width: 100%; bottom: 0px; background: #000; z-index: 0; overflow: hidden; transform: translateY(-50px); -webkit-transform: translateY(-50px); transition: transform 1600ms cubic-bezier(0.77, 0, 0.175, 1) 300ms; } @media only screen and (min-width: 992px) { #metiers .background-video { pointer-events: none; } } @media only screen and (max-width: 1200px) { #metiers .background-video { transform: translateY(-20px); -webkit-transform: translateY(-20px); } } @media only screen and (max-width: 992px) { #metiers .background-video { position: relative !important; width: 100%; top: 0px !important; padding-top: 47%; z-index: 10; } } @media only screen and (max-width: 992px) { #metiers .background-video.bandes { padding-top: 56.25%; } } .viewVideo #metiers .background-video { pointer-events: all; transform: translateY(0px); -webkit-transform: translateY(0px); transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1) 0ms; } #metiers .background-video iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; } @media only screen and (max-width: 992px) { #metiers .background-video iframe { width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; } } #metiers .background-video:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: black; /* Old browsers */ background: -moz-linear-gradient(left, black 0%, #071f32 31%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, black), color-stop(31%, #071f32)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, black 0%, #071f32 31%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, black 0%, #071f32 31%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, black 0%, #071f32 31%); /* IE10+ */ background: linear, to right, black 0%, #071f32 31%; /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#071f32',GradientType=1 ); /* IE6-9 */ opacity: 0.65; filter: alpha(opacity=65); transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .viewVideo #metiers .background-video:after { opacity: 0; filter: alpha(opacity=0); } #metiers .close-video { position: absolute; top: -65px; right: 0px; z-index: 10; width: 53px; height: 53px; z-index: 24000; background: #0082C3; transition: top 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (max-width: 1440px) { #metiers .close-video { width: 50px; top: -50px; height: 50px; } } #metiers .close-video .icon { width: 14px; height: 14px; top: 50%; left: 50%; margin-left: -7px; margin-top: -7px; position: absolute; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .viewVideo #metiers .close-video { top: 0px; } #metiers .close-video:hover .icon { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } #metiers .scrollpane { width: 100%; height: 100%; z-index: 10; transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (min-width: 100px) { #metiers .scrollpane { overflow-y: auto !important; } } #metiers .scrollpane.loading { opacity: 0.2; filter: alpha(opacity=20); pointer-events: none; overflow: hidden; } #metiers .scrollpane.loading .background-video { top: 0px !important; position: absolute; } #metiers .scrollpane.toTop { -moz-transform: translate(0px, -100%); -o-transform: translate(0px, -100%); -ms-transform: translate(0px, -100%); -webkit-transform: translate(0px, -100%); transform: translate(0px, -100%); } #metiers .scrollpane.toBtm { -moz-transform: translate(0px, 100%); -o-transform: translate(0px, 100%); -ms-transform: translate(0px, 100%); -webkit-transform: translate(0px, 100%); transform: translate(0px, 100%); } #metiers .scrollpane.fromBtm { -moz-transform: translate(0px, 100%); -o-transform: translate(0px, 100%); -ms-transform: translate(0px, 100%); -webkit-transform: translate(0px, 100%); transform: translate(0px, 100%); } #metiers .scrollpane.fromTop { -moz-transform: translate(0px, -100%); -o-transform: translate(0px, -100%); -ms-transform: translate(0px, -100%); -webkit-transform: translate(0px, -100%); transform: translate(0px, -100%); } #metiers .fiche-metier { overflow: hidden; } #metiers .fiche-metier h2 { margin: 0px; font-size: 45px; font-size: 4.5rem; line-height: 1.1; font-weight: 700; letter-spacing: -1px; margin-bottom: 40px; } @media only screen and (max-width: 767px) { #metiers .fiche-metier h2 { font-size: 28px; font-size: 2.8rem; margin-bottom: 20px; } } #metiers .fiche-metier h2 .sub { font-family: "proxima-nova"; font-style: italic; font-size: 17px; font-size: 1.7rem; font-weight: 100; display: block; text-transform: none; top: 5px; position: relative; } @media only screen and (max-width: 767px) { #metiers .fiche-metier h2 .sub { font-size: 16px; font-size: 1.6rem; } } #metiers .fiche-metier p { font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin: 0 auto; } @media only screen and (max-width: 1200px) { #metiers .fiche-metier p { font-size: 14px; font-size: 1.4rem; line-height: 1.4; } } .viewVideo #metiers .fiche-metier { height: 100% !important; } #metiers .fiche-metier .visuel-fiche-container { position: absolute; top: 0px; left: 0; width: 100%; bottom: 0px; z-index: 0; overflow: hidden; background: #0d1724; pointer-events: none; } #metiers .fiche-metier .visuel-fiche-container:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: -moz-linear-gradient(top, rgba(7, 24, 37, 0) 0%, #071825 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(7, 24, 37, 0)), color-stop(100%, #071825)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(7, 24, 37, 0) 0%, #071825 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(7, 24, 37, 0) 0%, #071825 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(7, 24, 37, 0) 0%, #071825 100%); /* IE10+ */ background: linear, to bottom, rgba(7, 24, 37, 0) 0%, #071825 100%; /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00071825', endColorstr='#071825',GradientType=0 ); /* IE6-9 */ } #metiers .fiche-metier .visuel-fiche-container .visuel-fiche { background-size: cover !important; opacity: 0.2; filter: alpha(opacity=20); width: 100%; height: 100%; transition-property: transform, -webkit-transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 200ms; } @media only screen and (min-width: 992px) { #metiers .fiche-metier.has-video .visuel-fiche-container { display: none; } } #metiers .fiche-metier .wrapper { max-width: 1360px; margin: 0 auto; text-align: center; padding: 0px 200px; } @media only screen and (max-width: 1440px) { #metiers .fiche-metier .wrapper { padding: 0 150px; } } @media only screen and (max-width: 767px) { #metiers .fiche-metier .wrapper { padding: 0px; } } #metiers .fiche-metier header { color: white; position: relative; z-index: 10; text-align: center; } @media only screen and (max-width: 992px) { #metiers .fiche-metier header { padding: 40px; text-align: center; } } @media only screen and (max-width: 767px) { #metiers .fiche-metier header { height: 420px !important; } } .viewVideo #metiers .fiche-metier header { -moz-transform: translate(0px, 100%); -o-transform: translate(0px, 100%); -ms-transform: translate(0px, 100%); -webkit-transform: translate(0px, 100%); transform: translate(0px, 100%); pointer-events: none; } #metiers .fiche-metier header .vcenter { padding-bottom: 160px; position: relative; z-index: 10; } @media only screen and (max-width: 1200px) { #metiers .fiche-metier header .vcenter { padding-bottom: 40px; padding-top: 0px; } } #metiers .fiche-metier header .sub { display: block; font-family: "proxima-nova"; margin: 0 auto; font-size: 16px; font-size: 1.6rem; line-height: 1; font-style: italic; font-weight: 100; margin-bottom: 5px; text-transform: initial; top: 0; } #metiers .fiche-metier header a.view-video { color: white; width: 110px; display: block; margin: 0 auto; font-family: "futura-pt-condensed"; font-weight: 600; font-size: 14px; font-size: 1.4rem; text-align: center; text-transform: uppercase; margin-top: 20px; z-index: 10; transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 900ms; } @media only screen and (max-width: 1440px) { #metiers .fiche-metier header a.view-video { position: relative; width: 60px; right: 0px; bottom: 0px; margin: 0 auto 10px; } } @media only screen and (max-width: 992px) { #metiers .fiche-metier header a.view-video { display: none; } } #metiers .fiche-metier header a.view-video .icon { margin: 0 auto 0px; width: 60px; height: 60px; position: relative; } #metiers .fiche-metier header a.view-video span { margin-top: 10px; display: block; } @media only screen and (max-width: 1440px) { #metiers .fiche-metier header a.view-video span { display: none; } } #metiers .fiche-metier header h2 { margin-bottom: 0; line-height: 0.9; letter-spacing: 0; } #metiers .fiche-metier header h2 .mask-line > span { padding: 8px 0px; } #metiers .fiche-metier header h1 { margin: 0px auto 20px; font-size: 55px; font-size: 5.5rem; max-width: 50%; font-weight: 700; line-height: 0.9; position: relative; } @media only screen and (max-width: 1200px) { #metiers .fiche-metier header h1 { font-size: 42px; font-size: 4.2rem; } } @media only screen and (max-width: 992px) { #metiers .fiche-metier header h1 { font-size: 38px; font-size: 3.8rem; max-width: 500px; } } @media only screen and (max-width: 767px) { #metiers .fiche-metier header h1 { font-size: 28px; font-size: 2.8rem; max-width: 300px; } } #metiers .fiche-metier header h1 .mask-line > span { padding: 8px 0px; } #metiers .fiche-metier header .offres { display: block; margin: 20px auto 0; transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 800ms; } #metiers .fiche-metier header .offres .offres-content { text-align: left; display: inline-block; color: #EC6607; margin-right: 25px; } #metiers .fiche-metier header .offres .offres-content span { display: inline-block; } #metiers .fiche-metier header .offres .offres-content .numCount { font-size: 50px; font-size: 5rem; line-height: 1; font-family: "futura-pt-condensed"; font-weight: 600; margin-right: 10px; } #metiers .fiche-metier header .offres .offres-content span + span { font-family: "futura-pt"; position: relative; top: -3px; text-transform: uppercase; line-height: 1.2; font-weight: 300; } #metiers .fiche-metier header .offres .btn-apply { display: inline-block; vertical-align: top; top: 3px; } #metiers .fiche-metier header .view-more { position: absolute; bottom: 200px; left: 50%; margin-left: -5px; display: block; width: 9px; cursor: pointer; z-index: 10; transition-property: transform, -webkit-transform, opacity; transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 600ms; } #metiers .fiche-metier header .view-more .arrow { display: block; width: 9px; height: 27px; -webkit-animation: bounceArrow 1200ms infinite; -moz-animation: bounceArrow 1200ms infinite; -o-animation: bounceArrow 1200ms infinite; animation: bounceArrow 1200ms infinite; } @media only screen and (max-width: 1200px) { #metiers .fiche-metier header .view-more { bottom: 80px !important; left: inherit; right: 40px; } } @media only screen and (max-width: 767px) { #metiers .fiche-metier header .view-more { right: inherit; left: 50%; bottom: 40px !important; } } #metiers .fiche-metier .fiche-content { position: relative; z-index: 20; margin-top: -100px; transition-property: transform, margin; transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 400ms; } @media only screen and (max-width: 1200px) { #metiers .fiche-metier .fiche-content { margin-top: -40px; } } @media only screen and (max-width: 992px) { #metiers .fiche-metier .fiche-content { margin-top: 0px; } } .viewVideo #metiers .fiche-metier .fiche-content { transition-property: transform, margin; transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; -moz-transform: translate(0px, 100%); -o-transform: translate(0px, 100%); -ms-transform: translate(0px, 100%); -webkit-transform: translate(0px, 100%); transform: translate(0px, 100%); } @media only screen and (max-width: 767px) { #metiers .fiche-metier .fiche-content { margin-top: 0px; } } @media only screen and (max-width: 767px) { #metiers .fiche-metier .fiche-content > * { padding-left: 40px !important; padding-right: 40px !important; } } #metiers .fiche-metier .fiche-content .no-touch .mask-line > span { -moz-transform: translate(0px, -100%); -o-transform: translate(0px, -100%); -ms-transform: translate(0px, -100%); -webkit-transform: translate(0px, -100%); transform: translate(0px, -100%); transition-property: transform, -webkit-transform, opacity; transition-duration: 400ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } #metiers .fiche-metier .fiche-content .no-touch .mask-line + .mask-line > span { -moz-transform: translate(0px, -100%); -o-transform: translate(0px, -100%); -ms-transform: translate(0px, -100%); -webkit-transform: translate(0px, -100%); transform: translate(0px, -100%); } .no-touch #metiers .fiche-metier .fiche-content section.block-content { -moz-transform: translate(0px, 150px); -o-transform: translate(0px, 150px); -ms-transform: translate(0px, 150px); -webkit-transform: translate(0px, 150px); transform: translate(0px, 150px); opacity: 0; filter: alpha(opacity=0); } .no-touch #metiers .fiche-metier .fiche-content section.visible .block-content { -moz-transform: translate(0px, 0%); -o-transform: translate(0px, 0%); -ms-transform: translate(0px, 0%); -webkit-transform: translate(0px, 0%); transform: translate(0px, 0%); opacity: 1; filter: alpha(opacity=100); transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } .no-touch #metiers .fiche-metier .fiche-content section.visible .mask-line > span { -moz-transform: translate(0px, 0%); -o-transform: translate(0px, 0%); -ms-transform: translate(0px, 0%); -webkit-transform: translate(0px, 0%); transform: translate(0px, 0%); transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } .no-touch #metiers .fiche-metier .fiche-content section.visible .mask-line + .mask-line > span { -moz-transform: translate(0px, 0%); -o-transform: translate(0px, 0%); -ms-transform: translate(0px, 0%); -webkit-transform: translate(0px, 0%); transform: translate(0px, 0%); transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 200ms; } #metiers .fiche-metier .temoignage { background: white; padding: 100px 0px 50px; overflow: hidden; } @media only screen and (max-width: 767px) { #metiers .fiche-metier .temoignage { padding: 40px 0px; } } #metiers .fiche-metier .temoignage:before, #metiers .fiche-metier .temoignage:after { content: ''; display: block; margin: 20px auto; width: 1px; height: 80px; background: #eeeeee; } @media only screen and (max-width: 1200px) { #metiers .fiche-metier .temoignage:before, #metiers .fiche-metier .temoignage:after { height: 40px; } } @media only screen and (max-width: 767px) { #metiers .fiche-metier .temoignage:before, #metiers .fiche-metier .temoignage:after { height: 20px; } } #metiers .fiche-metier .temoignage .portrait-container { width: 120px; height: 120px; position: absolute; top: -60px; left: 50%; margin-left: -60px; } @media only screen and (max-width: 767px) { #metiers .fiche-metier .temoignage .portrait-container { position: relative; top: 0px; left: 0%; margin-left: 0px; margin: 0 auto 20px; } } #metiers .fiche-metier .temoignage .portrait-container .portrait { position: relative; z-index: 0; width: 100%; height: 100%; overflow: hidden; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; border-radius: 60px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ } #metiers .fiche-metier .temoignage .portrait-container:before { content: ""; display: block; height: 36px; width: 36px; position: absolute; right: -2px; bottom: -2px; z-index: 10; } #metiers .fiche-metier .temoignage .quote { max-width: 600px; margin: 0 auto; font-size: 24px; font-size: 2.4rem; font-weight: 100; line-height: 1.2; transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } #metiers .fiche-metier .temoignage .quote:before, #metiers .fiche-metier .temoignage .quote:after { font-family: "proxima-nova"; font-size: 30px; font-size: 3rem; letter-spacing: 2; line-height: 1; font-weight: 100; content: '" '; } @media only screen and (max-width: 1200px) { #metiers .fiche-metier .temoignage .quote:before, #metiers .fiche-metier .temoignage .quote:after { font-size: 18px; font-size: 1.8rem; } } #metiers .fiche-metier .temoignage .quote:after { content: ' "'; } @media only screen and (max-width: 1200px) { #metiers .fiche-metier .temoignage .quote { font-size: 18px; font-size: 1.8rem; } } @media only screen and (min-width: 992px) { .no-touch #metiers .fiche-metier .temoignage .quote { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(0px, 200px); -o-transform: translate(0px, 200px); -ms-transform: translate(0px, 200px); -webkit-transform: translate(0px, 200px); transform: translate(0px, 200px); } } #metiers .fiche-metier .temoignage .by { position: relative; display: block; font-size: 14px; font-size: 1.4rem; font-family: "futura-pt-condensed"; color: #0082C3; text-transform: uppercase; font-weight: 600; margin-top: 20px; transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (min-width: 992px) { .no-touch #metiers .fiche-metier .temoignage .by { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(0px, 200px); -o-transform: translate(0px, 200px); -ms-transform: translate(0px, 200px); -webkit-transform: translate(0px, 200px); transform: translate(0px, 200px); } } .no-touch #metiers .fiche-metier .temoignage.visible .quote, .no-touch #metiers .fiche-metier .temoignage.visible .by { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } #metiers .fiche-metier .offre { background: #f8f8f8; padding: 80px 0px; padding-bottom: 180px; position: relative; z-index: 2; } @media only screen and (max-width: 767px) { #metiers .fiche-metier .offre { padding: 40px; padding-bottom: 180px; } } #metiers .fiche-metier .offre h2 { color: #414141; } #metiers .fiche-metier .offre .row { margin-left: -80px; margin-right: -80px; } #metiers .fiche-metier .offre .row > * { padding: 0px 80px; } #metiers .fiche-metier .offre section + section { margin-top: 80px; } @media only screen and (max-width: 767px) { #metiers .fiche-metier .offre section + section { margin-top: 40px; } } #metiers .fiche-metier .offre section.profil p { margin: 0 auto; font-size: 18px; font-size: 1.8rem; font-weight: 100; } @media only screen and (max-width: 1200px) { #metiers .fiche-metier .offre section.profil p { font-size: 17px; font-size: 1.7rem; } } @media only screen and (max-width: 767px) { #metiers .fiche-metier .offre section.profil p { font-size: 14px; font-size: 1.4rem; } } #metiers .fiche-metier .offre section.profil p + * { margin-top: 40px; } #metiers .fiche-metier .offre section.mission .visuel-mission { width: 200px; height: 200px; overflow: hidden; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; border-radius: 100px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ margin: 0 auto; border: 2px solid #d4e7f8; position: relative; transition-property: transform, -webkit-transform; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-delay: 0ms; transform-origin: center center; } .no-touch #metiers .fiche-metier .offre section.mission .visuel-mission { -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } #metiers .fiche-metier .offre section.mission .visuel-mission .visuel { position: absolute; top: 50%; left: 50%; width: 160px; height: 160px; margin-top: -80px; margin-left: -80px; overflow: hidden; -webkit-border-radius: 80px; -moz-border-radius: 80px; -ms-border-radius: 80px; border-radius: 80px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ transition-property: transform, -webkit-transform; transition-duration: 1200ms; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-delay: 0ms; } .no-touch #metiers .fiche-metier .offre section.mission .visuel-mission .visuel { -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } #metiers .fiche-metier .offre section.mission .no-touch .block-content { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } #metiers .fiche-metier .offre section.mission .mission-list { list-style: none; margin: 0; padding: 0; max-width: 1000px; margin: 0 auto; } #metiers .fiche-metier .offre section.mission .mission-list:before, #metiers .fiche-metier .offre section.mission .mission-list:after { content: " "; display: table; } #metiers .fiche-metier .offre section.mission .mission-list:after { clear: both; } #metiers .fiche-metier .offre section.mission .mission-list:before { content: ''; display: block; width: 2px; height: 80px; margin: 0 auto; background: #d4e7f8; } @media only screen and (max-width: 767px) { #metiers .fiche-metier .offre section.mission .mission-list:before { height: 40px; } } #metiers .fiche-metier .offre section.mission .mission-list li { position: relative; } @media only screen and (min-width: 767px) { #metiers .fiche-metier .offre section.mission .mission-list li { width: 50%; clear: both; float: left; padding-right: 40px; padding-bottom: 60px; } } @media only screen and (max-width: 767px) { #metiers .fiche-metier .offre section.mission .mission-list li { padding: 40px 0px 0px; } } @media only screen and (max-width: 767px) { #metiers .fiche-metier .offre section.mission .mission-list li + li { margin-top: 20px; } } .no-touch #metiers .fiche-metier .offre section.mission .mission-list li { -moz-transform: translate(0, 40px); -o-transform: translate(0, 40px); -ms-transform: translate(0, 40px); -webkit-transform: translate(0, 40px); transform: translate(0, 40px); opacity: 0; filter: alpha(opacity=0); } #metiers .fiche-metier .offre section.mission .mission-list li p { font-size: 15px; font-size: 1.5rem; line-height: 1.6; font-weight: 500; } @media only screen and (min-width: 767px) { #metiers .fiche-metier .offre section.mission .mission-list li p { text-align: right; } } @media only screen and (max-width: 1200px) { #metiers .fiche-metier .offre section.mission .mission-list li p { font-size: 14px; font-size: 1.4rem; line-height: 1.4; } } @media only screen and (min-width: 767px) { #metiers .fiche-metier .offre section.mission .mission-list li:before { content: ''; display: block; width: 2px; height: 60px; right: 0px; margin: 0 auto; background: #d4e7f8; -moz-transform: translate(50%, 0); -o-transform: translate(50%, 0); -ms-transform: translate(50%, 0); -webkit-transform: translate(50%, 0); transform: translate(50%, 0); position: absolute; height: 100%; } } #metiers .fiche-metier .offre section.mission .mission-list li:after { content: ''; display: block; width: 22px; height: 22px; -webkit-border-radius: 11px; -moz-border-radius: 11px; -ms-border-radius: 11px; border-radius: 11px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ background: #0082C3; position: absolute; right: 50%; border: 3px solid #99c9f9; top: 0; right: -11px; } @media only screen and (max-width: 767px) { #metiers .fiche-metier .offre section.mission .mission-list li:after { right: 50%; margin-right: -11px; } } @media only screen and (min-width: 767px) { #metiers .fiche-metier .offre section.mission .mission-list li:nth-child(2n+1) { float: right; padding-right: 0px; padding-left: 40px; } #metiers .fiche-metier .offre section.mission .mission-list li:nth-child(2n+1) p { text-align: left; } #metiers .fiche-metier .offre section.mission .mission-list li:nth-child(2n+1):after { left: -11px; right: inherit; } #metiers .fiche-metier .offre section.mission .mission-list li:nth-child(2n+1):before { left: 0px; right: inherit; -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } #metiers .fiche-metier .offre section.mission .mission-list li:last-child:before { top: 6px; width: 4px; height: 85px; background: url("../img/metiers/li_dots.png") no-repeat top left; background-size: cover; } .no-touch #metiers .fiche-metier .offre section.mission.visible .visuel-mission { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .no-touch #metiers .fiche-metier .offre section.mission.visible .visuel { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; filter: alpha(opacity=100); } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(1) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 200ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(2) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 400ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(3) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 600ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(4) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 800ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(5) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 1000ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(6) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 1200ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(7) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 1400ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(8) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 1600ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(9) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 1800ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(10) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 2000ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(11) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 2200ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(12) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 2400ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(13) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 2600ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(14) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 2800ms; } .no-touch #metiers .fiche-metier .offre section.mission.visible .mission-list li:nth-child(15) { transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 3000ms; } #metiers .fiche-metier .offre section.formations p { max-width: 400px; } #metiers .fiche-metier .offre section.formations .list-tags { margin-left: -5px; margin-right: -5px; margin-top: 40px; } #metiers .fiche-metier .offre section.formations .list-tags li { padding: 0 5px; margin-bottom: 10px; } #metiers .fiche-metier .offre section.formations .list-tags span { display: inline-block; background: #eeeeee; font-family: "futura-pt-condensed"; text-transform: uppercase; font-size: 12px; font-size: 1.2rem; padding: 8px 12px; color: #9a9999; font-weight: 600; } #metiers .fiche-metier .offre section.remuneration p { max-width: 400px; } #metiers .fiche-metier .offre .numbers_container { overflow: hidden; position: absolute; width: 260px; height: 260px; left: 50%; bottom: -140px; margin-left: -140px; overflow: hidden; -webkit-border-radius: 130px; -moz-border-radius: 130px; -ms-border-radius: 130px; border-radius: 130px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ -webkit-box-shadow: 0 0 0 10px rgba(1, 152, 241, 0.1); -moz-box-shadow: 0 0 0 10px rgba(1, 152, 241, 0.1); box-shadow: 0 0 0 10px rgba(1, 152, 241, 0.1); } @media only screen and (max-width: 992px) { #metiers .fiche-metier .offre .numbers_container { width: 200px; height: 200px; bottom: -100px; margin-left: -100px; } } #metiers .fiche-metier .offre .numbers_container .numbers { background: #0082C3; } #metiers .fiche-metier .offre .numbers_container .num-container { -webkit-border-radius: 130px; -moz-border-radius: 130px; -ms-border-radius: 130px; border-radius: 130px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ } #metiers .fiche-metier .offre .numbers_container .num-container .num { font-size: 55px; font-size: 5.5rem; } @media only screen and (max-width: 992px) { #metiers .fiche-metier .offre .numbers_container .num-container .num { font-size: 44px; font-size: 4.4rem; } } #metiers .fiche-metier .offre .numbers_container .num-container .num:before { width: 35px; height: 35px; margin-left: -17px; } @media only screen and (max-width: 992px) { #metiers .fiche-metier .offre .numbers_container .num-container .num:before { width: 20px; height: 20px; margin-left: -10px; } } #metiers .fiche-metier .offre .numbers_container .num-container .num-legend { font-size: 16px; font-size: 1.6rem; } @media only screen and (max-width: 992px) { #metiers .fiche-metier .offre .numbers_container .num-container .num-legend { font-size: 14px; font-size: 1.4rem; margin-top: 10px; } } #metiers .fiche-metier .offre-more { background: #202020; color: #f8f8f8; position: relative; z-index: 1; } #metiers .fiche-metier .offre-more .background-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.04; filter: alpha(opacity=4); z-index: 0; } #metiers .fiche-metier .offre-more .background-container .background { width: 100%; height: 100%; background-size: cover !important; } #metiers .fiche-metier .offre-more > * { position: relative; z-index: 10; } #metiers .fiche-metier .offre-more .evolution { padding: 260px 0px 220px; } @media only screen and (max-width: 992px) { #metiers .fiche-metier .offre-more .evolution { padding: 180px 0px 80px; } } #metiers .fiche-metier .offre-more .evolution p { max-width: 600px; line-height: 1.4; color: #878787; } .no-touch #metiers .fiche-metier .offre-more .evolution p { -moz-transform: translate(0px, 150px); -o-transform: translate(0px, 150px); -ms-transform: translate(0px, 150px); -webkit-transform: translate(0px, 150px); transform: translate(0px, 150px); opacity: 0; filter: alpha(opacity=0); } #metiers .fiche-metier .offre-more .evolution .schem { text-align: center; background-size: auto 2px; margin-top: 80px; } @media only screen and (min-width: 992px) { #metiers .fiche-metier .offre-more .evolution .schem { background: url("../img/metiers/schem_dots.png") repeat-x left center; } } @media only screen and (max-width: 992px) { #metiers .fiche-metier .offre-more .evolution .schem { padding: 0px !important; margin-top: 40px; } } .no-touch #metiers .fiche-metier .offre-more .evolution .schem { -moz-transform: translate(0px, 150px); -o-transform: translate(0px, 150px); -ms-transform: translate(0px, 150px); -webkit-transform: translate(0px, 150px); transform: translate(0px, 150px); opacity: 0; filter: alpha(opacity=0); } #metiers .fiche-metier .offre-more .evolution .schem ul { list-style: none; padding: 0px; margin: 0px; position: relative; } #metiers .fiche-metier .offre-more .evolution .schem ul li { vertical-align: middle; } #metiers .fiche-metier .offre-more .evolution .schem > ul > li { display: inline-block; } @media only screen and (max-width: 992px) { #metiers .fiche-metier .offre-more .evolution .schem > ul > li { display: block; } } @media only screen and (min-width: 992px) { #metiers .fiche-metier .offre-more .evolution .schem > ul > li:nth-child(1), #metiers .fiche-metier .offre-more .evolution .schem > ul > li:nth-child(3) { position: absolute; top: 50%; -moz-transform: translate(-100%, -50%); -o-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); margin-left: -40px; } } @media only screen and (max-width: 992px) { #metiers .fiche-metier .offre-more .evolution .schem > ul > li + li:before { content: ''; display: block; margin: 0 auto; background: url("../img/metiers/schem_btwn_dots.png") no-repeat center center; background-size: 6px auto; width: 6px; height: 42px; } } @media only screen and (min-width: 992px) { #metiers .fiche-metier .offre-more .evolution .schem > ul > li:nth-child(3) { -moz-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); margin-left: 40px; } } #metiers .fiche-metier .offre-more .evolution .schem > ul > li a { min-width: 200px; background: #232322; } @media only screen and (max-width: 767px) { #metiers .fiche-metier .offre-more .evolution .schem > ul > li a { width: 100%; } } @media only screen and (max-width: 992px) { #metiers .fiche-metier .offre-more .evolution .schem > ul > li ul > li + li { margin-top: 10px; } } @media only screen and (min-width: 992px) { #metiers .fiche-metier .offre-more .evolution .schem > ul > li ul > li + li:before { content: ''; display: block; margin: 0 auto; background: url("../img/metiers/schem_btwn_dots.png") no-repeat center center; background-size: 6px auto; width: 6px; height: 42px; } } .no-touch #metiers .fiche-metier .offre-more .evolution.visible p { -moz-transform: translate(0px, 0%); -o-transform: translate(0px, 0%); -ms-transform: translate(0px, 0%); -webkit-transform: translate(0px, 0%); transform: translate(0px, 0%); opacity: 1; filter: alpha(opacity=100); transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 0ms; } .no-touch #metiers .fiche-metier .offre-more .evolution.visible .schem { -moz-transform: translate(0px, 0%); -o-transform: translate(0px, 0%); -ms-transform: translate(0px, 0%); -webkit-transform: translate(0px, 0%); transform: translate(0px, 0%); opacity: 1; filter: alpha(opacity=100); transition-property: transform, -webkit-transform, opacity; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 200ms; } #metiers .fiche-metier .offre-more .apply { padding-bottom: 0px; background: #EC6607; padding: 50px 0px; } @media only screen and (max-width: 767px) { #metiers .fiche-metier .offre-more .apply { margin-left: -40px; margin-right: -40px; } } #metiers .fiche-metier .offre-more .apply .offres { margin-right: 50px; display: inline-block; transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0ms; } @media only screen and (max-width: 767px) { #metiers .fiche-metier .offre-more .apply .offres { margin-right: 0px; display: block; margin-bottom: 20px; } } @media only screen and (min-width: 992px) { .no-touch #metiers .fiche-metier .offre-more .apply .offres { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(-200px, 0px); -o-transform: translate(-200px, 0px); -ms-transform: translate(-200px, 0px); -webkit-transform: translate(-200px, 0px); transform: translate(-200px, 0px); } } #metiers .fiche-metier .offre-more .apply .offres span { display: block; } #metiers .fiche-metier .offre-more .apply .offres .numCount { font-size: 80px; font-size: 8rem; line-height: 1; font-family: "futura-pt-condensed"; font-weight: 600; } #metiers .fiche-metier .offre-more .apply .offres span + span { font-size: 13px; font-size: 1.3rem; font-family: "futura-pt"; text-transform: uppercase; line-height: 1.1; font-weight: 300; letter-spacing: 1px; } #metiers .fiche-metier .offre-more .apply .btn-apply { display: inline-block; background: white !important; color: #EC6607 !important; font-size: 15px; font-size: 1.5rem; padding: 16px 50px 16px 30px; position: relative; top: -40px; transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 200ms; } @media only screen and (max-width: 767px) { #metiers .fiche-metier .offre-more .apply .btn-apply { top: 0px; } } @media only screen and (min-width: 992px) { .no-touch #metiers .fiche-metier .offre-more .apply .btn-apply { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(200px, 0px); -o-transform: translate(200px, 0px); -ms-transform: translate(200px, 0px); -webkit-transform: translate(200px, 0px); transform: translate(200px, 0px); } } #metiers .fiche-metier .offre-more .apply .btn-apply:before { background: url("../img/shared/icon-job-orange.png") no-repeat center center; right: 20px; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { #metiers .fiche-metier .offre-more .apply .btn-apply:before { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/icon-job-orange@2x.png"); background-size: 24px 15px; } } #metiers .fiche-metier .offre-more .apply.visible .btn-apply { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } #metiers .fiche-metier .offre-more .apply.visible .offres { opacity: 1; filter: alpha(opacity=100); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } #metiers .fiche-metier .offre-more .apply.no-offer .btn-apply { top: 0; } #metiers .next-fiche { font-family: "futura-pt"; text-transform: uppercase; text-align: center; color: white; font-size: 23px; font-size: 2.3rem; margin: 0; font-weight: 600; display: block; padding: 70px 60px 90px; position: relative; } #metiers .next-fiche:after { content: ''; display: block; width: 17px; height: 10px; background: url("../img/shared/arrow-more-white.png") no-repeat center center; position: absolute; bottom: 70px; left: 50%; margin-left: -10px; -webkit-animation: bounceNext 0.5s infinite alternate; -moz-animation: bounceNext 0.5s infinite alternate; -o-animation: bounceNext 0.5s infinite alternate; animation: bounceNext 0.5s infinite alternate; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { #metiers .next-fiche:after { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/arrow-more-white@2x.png"); background-size: 17px 10px; } } .waiting .fiche-metier header .offres, .waiting .fiche-metier header .view-video { -moz-transform: translate(0, 150px); -o-transform: translate(0, 150px); -ms-transform: translate(0, 150px); -webkit-transform: translate(0, 150px); transform: translate(0, 150px); opacity: 0; filter: alpha(opacity=0); } .waiting .fiche-metier header .visuel-fiche { -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); } .waiting .fiche-metier header .view-more { opacity: 0; filter: alpha(opacity=0); -moz-transform: translate(0, -50px); -o-transform: translate(0, -50px); -ms-transform: translate(0, -50px); -webkit-transform: translate(0, -50px); transform: translate(0, -50px); } .waiting .fiche-metier .fiche-content { margin-top: 100px !important; } #stores { height: 100%; background: #fcfcfc; } #stores .curtain { background: white; } #stores .main-content { overflow: auto; position: absolute; height: 100%; width: 22%; } @media only screen and (max-width: 1440px) { #stores .main-content { width: 25%; } } @media only screen and (max-width: 992px) { #stores .main-content { width: 35%; } } @media only screen and (max-width: 767px) { #stores .main-content { position: relative; width: 100%; } } #stores .main-content .page-content { background: #fcfcfc; } #stores .main-content .page-content .vcenter { padding: 20px 40px !important; } @media only screen and (max-width: 767px) { #stores .main-content .page-content .vcenter { padding: 40px !important; height: auto !important; } } #stores .main-content .page-content h1 { margin: 0; margin-bottom: 20px; color: #3c3c3c; font-size: 40px; font-size: 4rem; } @media only screen and (max-width: 1440px) { #stores .main-content .page-content h1 { font-size: 30px; font-size: 3rem; } } @media only screen and (max-width: 1200px) { #stores .main-content .page-content h1 { font-size: 24px; font-size: 2.4rem; } } @media only screen and (max-width: 992px) { #stores .main-content .page-content h1 { font-size: 30px; font-size: 3rem; } } @media only screen and (max-width: 767px) { #stores .main-content .page-content h1 { margin: 0; } } @media only screen and (max-height: 680px) { #stores .main-content .page-content h1 { margin-bottom: 5px; font-size: 20px; font-size: 2rem; } } #stores .main-content .page-content p { margin: 0; font-weight: 100; color: #3c3c3c; font-size: 14px; font-size: 1.4rem; line-height: 1.2; } @media only screen and (max-width: 1280px) { #stores .main-content .page-content p { font-size: 12px; font-size: 1.2rem; line-height: 1.1; } } @media only screen and (max-width: 992px) { #stores .main-content .page-content p { font-size: 14px; font-size: 1.4rem; line-height: 1.2; } } @media only screen and (max-width: 767px) { #stores .main-content .page-content p { display: none; } } @media only screen and (max-height: 680px) { #stores .main-content .page-content p { font-size: 12px; font-size: 1.2rem; } } #stores .main-content .page-content p + p { margin-top: 20px; } #stores .main-content .numbers { bottom: 0; width: 100%; float: left; width: 100%; } #stores .main-content .numbers > li { width: 50%; float: left; } #stores .main-content .numbers > li a { background: #2f2f2f; } #stores .main-content .numbers > li a .num { font-size: 60px; font-size: 6rem; } @media only screen and (max-width: 1440px) { #stores .main-content .numbers > li a .num { font-size: 50px; font-size: 5rem; } } @media only screen and (max-width: 1200px) { #stores .main-content .numbers > li a .num { font-size: 40px; font-size: 4rem; } } #stores .main-content .numbers > li a .num-legend { font-size: 18px; font-size: 1.8rem; } @media only screen and (max-width: 1440px) { #stores .main-content .numbers > li a .num-legend { font-size: 14px; font-size: 1.4rem; } } @media only screen and (max-width: 1200px) { #stores .main-content .numbers > li a .num-legend { font-size: 11px; font-size: 1.1rem; } } #stores .main-content .numbers > li + li a { background: #EC6607; } #stores .map-container { position: fixed; right: 0px; top: 55px; bottom: 40px; width: 78%; } @media only screen and (max-width: 1440px) { #stores .map-container { width: 75%; top: 55px; } } @media only screen and (max-width: 992px) { #stores .map-container { width: 65%; } } @media only screen and (max-width: 767px) { #stores .map-container { position: relative; width: 100%; height: 350px; top: 0px; bottom: 0px; float: left; } } #stores #store-map { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } #stores #store-map .leaflet-left .leaflet-control { margin-top: 40px; margin-left: 40px; } #stores #store-map .leaflet-bottom { display: none; } #stores #store-map .switchs { position: absolute; bottom: 40px; left: 40px; z-index: 10; margin: 0; font-size: 0px; font-size: 0rem; } @media only screen and (max-width: 767px) { #stores #store-map .switchs { left: 0px; bottom: 0px; right: 0px; } } #stores #store-map .switchs li { padding: 0; } @media only screen and (max-width: 767px) { #stores #store-map .switchs li { width: 50%; } } #stores #store-map .switchs li + li a { background: white; color: #EC6607; } #stores #store-map .switchs li + li a:hover, #stores #store-map .switchs li + li.current a { background: #EC6607; color: white; } #stores #store-map .switchs li a { display: block; padding: 20px 30px; background: white; color: #003b5e; text-transform: uppercase; font-size: 15px; font-size: 1.5rem; font-weight: 700; font-family: "futura-pt"; text-decoration: none; } @media only screen and (max-width: 767px) { #stores #store-map .switchs li a { width: 100%; padding: 15px 10px; text-align: center; } } #stores #store-map .switchs li a:hover, #stores #store-map .switchs li.current a { background: #003b5e; color: white; text-decoration: none; } #stores #store-map .leaflet-popup-content-wrapper { border-radius: 0px; background: #004876; color: white; } #stores #store-map .leaflet-popup-content-wrapper .leaflet-popup-content { margin: 30px; max-width: 200px; } #stores #store-map .leaflet-popup-content-wrapper .leaflet-popup-content span { font-size: 24px; font-size: 2.4rem; font-weight: 700; text-transform: uppercase; font-family: "futura-pt"; line-height: 1; display: block; } #stores #store-map .leaflet-popup-content-wrapper .leaflet-popup-content ul { margin: 0; padding: 0; list-style: none; margin-top: 20px; } #stores #store-map .leaflet-popup-content-wrapper .leaflet-popup-content ul li { padding-left: 15px; position: relative; } #stores #store-map .leaflet-popup-content-wrapper .leaflet-popup-content ul li + li { margin-top: 10px; } #stores #store-map .leaflet-popup-content-wrapper .leaflet-popup-content ul li:before { content: ''; display: block; background: #EC6607; width: 6px; height: 6px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ position: absolute; top: 5px; left: 0; } #stores #store-map .leaflet-popup-tip { background: #004876; } #stores #store-map .leaflet-popup-close-button { display: none; } .page-template-page-carte-des-metiers-php #header { position: fixed; } @media only screen and (max-width: 767px) { .page-template-page-carte-des-metiers-php #header { position: relative; } } .page-template-page-carte-des-metiers-php #main { position: fixed; top: 55px; bottom: 40px; } @media only screen and (max-width: 1440px) { .page-template-page-carte-des-metiers-php #main { top: 55px; } } @media only screen and (max-width: 767px) { .page-template-page-carte-des-metiers-php #main { position: relative; bottom: 0px; top: 0px; } } .page-template-page-carte-des-metiers-php #footer { position: fixed; bottom: 0; } @media only screen and (max-width: 767px) { .page-template-page-carte-des-metiers-php #footer { position: relative; } } .page-template-page-carte-des-metiers-php #loaderPage span { background: url("../img/loader/loader-g.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .page-template-page-carte-des-metiers-php #loaderPage span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g2x.png"); background-size: 75px 525px; } } @media only screen and (max-width: 767px) { .page-template-page-carte-des-metiers-php #loaderPage span { background: url("../img/loader/loader-g-min.png") no-repeat center center; } } @media only screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 2.6 / 2), only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-resolution: 1.3dppx) { .page-template-page-carte-des-metiers-php #loaderPage span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g-min2x.png"); background-size: 30px 210px; } } .post-type-archive-app_actu { background: white; } #actus_liste { background: white; transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } #actus_liste.waitLoading { opacity: 0.2; filter: alpha(opacity=20); -moz-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); pointer-events: none; } #actus_liste .curtain { background: white; } #actus_liste > header { position: relative; z-index: 100; padding: 30px 60px; background: rgba(255, 255, 255, 0.96); } @media only screen and (max-width: 1440px) { #actus_liste > header { padding: 30px; } } @media only screen and (max-width: 767px) { #actus_liste > header { display: none; } } #actus_liste > header .back-to { position: absolute; top: 50%; left: 60px; margin-top: -26px; z-index: 10; display: inline-block; } @media only screen and (max-width: 992px) { #actus_liste > header .back-to { width: 40px; position: relative; display: block; margin-top: 0; left: 0; margin-bottom: 15px; } } #actus_liste > header .navbar-actus { border: none; margin: 0; min-height: 0px; } #actus_liste > header .navbar-actus ul { margin: 0; margin-top: 12px; } @media only screen and (max-width: 992px) { #actus_liste > header .navbar-actus ul { margin-top: 0px; margin-bottom: 10px; } } #actus_liste > header .navbar-actus li { margin-right: 20px; } @media only screen and (max-width: 992px) { #actus_liste > header .navbar-actus li { display: inline-block; } } #actus_liste > header .navbar-actus a { padding: 0px; font-weight: 600; text-transform: uppercase; font-size: 12px; font-size: 1.2rem; font-family: "futura-pt"; } @media only screen and (max-width: 992px) { #actus_liste > header .navbar-actus a { font-size: 10px; font-size: 1rem; } } #actus_liste > header .navbar-actus a:hover { background: none; color: #0082C3; } #actus_liste > header .navbar-actus .active a, #actus_liste > header .navbar-actus a:focus { color: #0082C3; background: none; } #actus_liste > header .navbar-actus .navbar-form { margin: 0; padding: 0; border-bottom: 1px solid #d5d5d5; position: relative; } @media only screen and (max-width: 992px) { #actus_liste > header .navbar-actus .navbar-form { width: 100%; } } #actus_liste > header .navbar-actus .navbar-form .form-group { width: 100%; padding-right: 50px; } #actus_liste > header .navbar-actus .navbar-form .form-control { box-shadow: none; border-radius: 0px; border: none; height: 46px; background: none; } #actus_liste > header .navbar-actus .navbar-form button { position: absolute; top: 0; right: 0; height: 46px; } #actus_liste .list-articles-container { padding-top: 107px; } @media only screen and (max-width: 992px) { #actus_liste .list-articles-container { padding-top: 0px; padding-bottom: 20px; } } #actu-single-container { position: absolute; background: #f8f8f8; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } @media only screen and (max-width: 992px) { #actu-single-container { overflow-y: auto; } } .single-loaded #actu-single-container { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } @media only screen and (max-width: 992px) { .single-loaded #actu-single-container { position: relative; } } .single-loaded #actus_liste { -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } @media only screen and (max-width: 992px) { .single-loaded #actus_liste { position: absolute; } } .page-template-page-actus-php #loaderPage { border-color: #e5e5e5; } .page-template-page-actus-php #loaderPage span { background: url("../img/loader/loader-g.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .page-template-page-actus-php #loaderPage span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g2x.png"); background-size: 75px 525px; } } @media only screen and (max-width: 767px) { .page-template-page-actus-php #loaderPage span { background: url("../img/loader/loader-g-min.png") no-repeat center center; } } @media only screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 2.6 / 2), only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-resolution: 1.3dppx) { .page-template-page-actus-php #loaderPage span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g-min2x.png"); background-size: 30px 210px; } } .page-template-page-actus-php .curtain { background: white; } #actu_single { background: #f8f8f8; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #actu_single #loader span { background: url("../img/loader/loader-g.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { #actu_single #loader span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g2x.png"); background-size: 75px 525px; } } @media only screen and (max-width: 767px) { #actu_single #loader span { background: url("../img/loader/loader-g-min.png") no-repeat center center; } } @media only screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 2.6 / 2), only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-resolution: 1.3dppx) { #actu_single #loader span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g-min2x.png"); background-size: 30px 210px; } } @media only screen and (max-width: 992px) { #actu_single { position: relative; height: auto; padding: 60px; } } @media only screen and (max-width: 767px) { #actu_single { padding: 40px; } } #actu_single .back-to { position: fixed; } .post-type-archive-app_actu #actu_single .back-to { top: 65px; } @media only screen and (max-width: 992px) { #actu_single .back-to { display: block; position: relative; width: 40px; top: 0px !important; float: left; left: 0; } } @media only screen and (max-width: 767px) { #actu_single .back-to { margin: 0px; } } #actu_single .list-share { position: fixed; top: 50%; left: 2.8%; margin-top: -60px; width: 2%; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); z-index: 10; } @media only screen and (max-width: 1380px) { #actu_single .list-share { width: 3%; } } @media only screen and (max-width: 992px) { #actu_single .list-share { position: relative; float: right; top: 0; left: inherit; width: auto; margin-top: 0px; } } @media only screen and (max-width: 992px) { #actu_single .list-share li { float: left; width: 40px; } } #actu_single .list-share li a object { display: block; height: auto; padding-top: 100%; position: relative; width: 100%; } #actu_single .list-share li a object svg { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } #actu_single .list-share li a svg path { transition: fill 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } #actu_single .list-share .sharefb:hover svg path { fill: #3B5998; } #actu_single .list-share .sharetw:hover svg path { fill: #55ACEE; } #actu_single .list-share .sharepin:hover svg path { fill: #CD2024; } #actu_single .list-share .sharemail:hover svg path { fill: #0082C3; } #actu_single .list-share .sharelinkd:hover svg path { fill: #1380B9; } #actu_single .single-container { position: absolute; left: 0; top: 0; right: 20%; height: 100%; overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); } @media only screen and (max-width: 1170px) { #actu_single .single-container { right: 0; } } @media only screen and (max-width: 992px) { #actu_single .single-container { position: relative; height: auto; width: 100%; } } @media only screen and (max-width: 767px) { #actu_single .single-container { overflow: visible !important; clear: both; } } #actu_single .single-container > article { padding: 60px 5%; padding-left: 10%; position: relative; color: #414141; } @media only screen and (max-width: 992px) { #actu_single .single-container > article { padding: 0px; margin-top: 40px; } } #actu_single .single-container > article header { margin-bottom: 60px; } @media only screen and (max-width: 992px) { #actu_single .single-container > article header { margin-bottom: 30px; } } #actu_single .single-container > article header .post-infos > * { text-transform: uppercase; font-size: 12px; font-size: 1.2rem; font-weight: 600; } @media only screen and (max-width: 1440px) { #actu_single .single-container > article header .post-infos > * { font-size: 14px; font-size: 1.4rem; } } @media only screen and (max-width: 767px) { #actu_single .single-container > article header .post-infos > * { font-size: 12px; font-size: 1.2rem; } } #actu_single .single-container > article header time { color: #929292; margin-right: 10px; } #actu_single .single-container > article header .cat { color: #0082C3; font-family: "futura-pt"; } #actu_single .single-container > article header h1 { width: 70%; margin: 0; margin-top: 10px; } @media only screen and (max-width: 992px) { #actu_single .single-container > article header h1 { width: 100%; font-size: 40px; font-size: 4rem; } } @media only screen and (max-width: 767px) { #actu_single .single-container > article header h1 { font-size: 30px; font-size: 3rem; } } #actu_single .single-container > article figure { width: 45%; } @media only screen and (max-width: 992px) { #actu_single .single-container > article figure { width: 100%; } } @media only screen and (max-width: 767px) { #actu_single .single-container > article figure { float: none; width: auto; margin-left: -40px; margin-right: -40px; } } #actu_single .single-container > article img, #actu_single .single-container > article figure img { max-width: 100%; display: block; height: auto; } #actu_single .single-container > article iframe { width: 100%; } #actu_single .single-container > article hr { margin: 0px; clear: both; border-color: #F8F8F8; } @media only screen and (max-width: 992px) { #actu_single .single-container > article p > img { float: none; max-width: 100%; height: auto; } } @media only screen and (max-width: 992px) { #actu_single .single-container > article p > iframe { float: none; width: 100%; } } #actu_single .single-container > article p { font-size: 14px; font-size: 1.4rem; margin: 40px 0px 40px; } @media only screen and (max-width: 767px) { #actu_single .single-container > article p { margin: 20px 0; } } #actu_single .single-container > article p a { color: #0082C3; } #actu_single .single-container > article p.intro { font-size: 18px; font-size: 1.8rem; color: #0082C3; } #actu_single .single-container > article h2 { font-size: 26px; font-size: 2.6rem; } @media only screen and (max-width: 767px) { #actu_single .single-container > article h2 { font-size: 20px; font-size: 2rem; } } #actu_single .single-container > article h3, #actu_single .single-container > article #marque .intro ul li a .visuel + span, #marque .intro ul li a #actu_single .single-container > article .visuel + span { font-size: 18px; font-size: 1.8rem; } @media only screen and (max-width: 767px) { #actu_single .single-container > article h3, #actu_single .single-container > article #marque .intro ul li a .visuel + span, #marque .intro ul li a #actu_single .single-container > article .visuel + span { font-size: 16px; font-size: 1.6rem; } } @media only screen and (max-width: 767px) { #actu_single .single-container > article .fluid-width-video-wrapper { padding-top: 90% !important; } } #actu_single .single-container > article ul { list-style: none; margin: 40px 0px 40px; } @media only screen and (max-width: 767px) { #actu_single .single-container > article ul { padding: 0px; margin: 20px 0; } } #actu_single .single-container > article ul li { padding-left: 25px; position: relative; font-weight: 400; font-size: 14px; font-size: 1.4rem; } @media only screen and (max-width: 1440px) { #actu_single .single-container > article ul li { font-size: 16px; font-size: 1.6rem; } } #actu_single .single-container > article ul li:before { content: ''; display: block; width: 6px; height: 6px; background: #0082C3; position: absolute; top: 8px; left: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ } #actu_single .more-content { background: white; position: absolute; right: 0; width: 20%; height: 100%; top: 0; } @media only screen and (max-width: 1170px) { #actu_single .more-content { position: relative; height: auto; width: 100%; display: none; } } #actu_single .more-content .scroll-container { padding: 0px 15%; top: 110px; } @media only screen and (max-width: 992px) { #actu_single .more-content .scroll-container { top: 0; padding: 0 30px; } } #actu_single .more-content .list-articles > * { margin-bottom: 60px; } #actu_single .more-content .post-infos { white-space: normal; } @media only screen and (max-width: 1600px) { #actu_single .more-content .post-infos { font-size: 10px; font-size: 1rem; } } @media only screen and (max-width: 1440px) { #actu_single .more-content .post-infos .cat { display: block; } } #actu_single .more-content > h3, #actu_single #marque .intro ul li a .more-content > .visuel + span, #marque .intro ul li a #actu_single .more-content > .visuel + span { position: relative; z-index: 10; font-size: 24px; font-size: 2.4rem; margin: 0; padding: 40px 15%; } @media only screen and (max-width: 992px) { #actu_single .more-content > h3, #actu_single #marque .intro ul li a .more-content > .visuel + span, #marque .intro ul li a #actu_single .more-content > .visuel + span { font-size: 18px; font-size: 1.8rem; padding: 20px 30px; } } #actu_single .more-content article header h3, #actu_single .more-content article header #marque .intro ul li a .visuel + span, #marque .intro ul li a #actu_single .more-content article header .visuel + span { height: auto; } .single-app_actu #loaderPage, .post-type-archive-app_actu #loaderPage { border-color: #e5e5e5; } .single-app_actu #loaderPage span, .post-type-archive-app_actu #loaderPage span { background: url("../img/loader/loader-g.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { .single-app_actu #loaderPage span, .post-type-archive-app_actu #loaderPage span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g2x.png"); background-size: 75px 525px; } } @media only screen and (max-width: 767px) { .single-app_actu #loaderPage span, .post-type-archive-app_actu #loaderPage span { background: url("../img/loader/loader-g-min.png") no-repeat center center; } } @media only screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 2.6 / 2), only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-device-pixel-ratio: 1.3), only screen and (max-width: 767px) and (min-resolution: 1.3dppx) { .single-app_actu #loaderPage span, .post-type-archive-app_actu #loaderPage span { /* on retina, use image that's scaled by 2 */ background-image: url("../img/loader/loader-g-min2x.png"); background-size: 30px 210px; } } .single-app_actu .curtain, .post-type-archive-app_actu .curtain { background: white; } #passionnes { background: url("../img/passionne/bg.png") no-repeat center top white; background-size: 100% auto; } #passionnes .passionnes-content > header { position: fixed; top: 154px; left: 130px; z-index: 20; pointer-events: none; } @media only screen and (max-width: 1460px) { #passionnes .passionnes-content > header { top: 145px; } } @media only screen and (max-width: 1200px) { #passionnes .passionnes-content > header { top: 124px; left: 100px; } } @media only screen and (max-width: 991px) { #passionnes .passionnes-content > header { position: relative; top: 0; left: 0; margin-bottom: 40px; } } @media only screen and (min-width: 992px) { .touch #passionnes .passionnes-content > header { position: absolute; top: 70px; } } #passionnes .passionnes-content > header h1 { font-size: 54px; font-size: 5.4rem; color: #0082C3; margin: 0px; line-height: 0.8; color: #2b72b4; } @media only screen and (max-width: 1200px) { #passionnes .passionnes-content > header h1 { font-size: 48px; font-size: 4.8rem; } } @media only screen and (max-width: 991px) { #passionnes .passionnes-content > header h1 { opacity: 1 !important; font-size: 46px; font-size: 4.6rem; } } @media only screen and (max-width: 767px) { #passionnes .passionnes-content > header h1 { opacity: 1 !important; font-size: 30px; font-size: 3rem; } } @media only screen and (max-width: 991px) { #passionnes .passionnes-content > header h1 br { display: none; } } #passionnes .scrollpane { width: 100% !important; z-index: 10; } #passionnes .passionnes-content { padding: 90px 100px 90px 250px; } @media only screen and (max-width: 1200px) { #passionnes .passionnes-content { padding: 70px 100px 70px 200px; } } @media only screen and (max-width: 991px) { #passionnes .passionnes-content { padding: 60px; } } @media only screen and (max-width: 767px) { #passionnes .passionnes-content { padding: 40px; } } #passionnes .passionnes-content .intro { width: 100%; padding: 0 20%; padding-left: 320px; margin-bottom: 120px; position: relative; } @media only screen and (max-width: 1200px) { #passionnes .passionnes-content .intro { padding-left: 290px; margin-bottom: 60px; padding-right: 0px; } } @media only screen and (max-width: 991px) { #passionnes .passionnes-content .intro { padding: 0px; } } .touch #passionnes .passionnes-content .intro { margin-bottom: 100px; } @media only screen and (max-width: 767px) { .touch #passionnes .passionnes-content .intro { margin-bottom: 40px; } } .ie9 #passionnes .passionnes-content .intro { margin-bottom: 200px; } @media only screen and (max-width: 1200px) { .ie9 #passionnes .passionnes-content .intro { margin-bottom: 100px; } } @media only screen and (max-width: 767px) { .ie9 #passionnes .passionnes-content .intro { margin-bottom: 40px; } } #passionnes .passionnes-content .intro h2 { font-size: 17px; font-size: 1.7rem; margin: 0px; margin-bottom: 30px; } #passionnes .passionnes-content .intro h3, #passionnes .passionnes-content #marque .intro ul li a .visuel + span, #marque #passionnes .passionnes-content .intro ul li a .visuel + span { font-size: 17px; font-size: 1.7rem; margin: 0px; margin-bottom: 30px; } #passionnes .passionnes-content .intro p { margin-bottom: 60px; font-size: 16px; font-size: 1.6rem; } @media only screen and (max-width: 1200px) { #passionnes .passionnes-content .intro p { margin-bottom: 40px; } } #passionnes .passionnes-content .intro .view-more { color: #0082C3; display: inline-block; text-transform: uppercase; font-family: "futura-pt-condensed"; font-weight: 600; pointer-events: none; position: relative; } @media only screen and (max-width: 767px) { #passionnes .passionnes-content .intro .view-more { display: none; } } #passionnes .passionnes-content .intro .view-more:after { content: ''; display: block; width: 17px; height: 10px; background: url("../img/shared/arrow-more-blue.png") no-repeat center bottom; position: absolute; bottom: -15px; left: 50%; margin-left: -8px; -webkit-animation: bounceNext 0.5s infinite alternate; -moz-animation: bounceNext 0.5s infinite alternate; -o-animation: bounceNext 0.5s infinite alternate; animation: bounceNext 0.5s infinite alternate; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { #passionnes .passionnes-content .intro .view-more:after { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/arrow-more-blue@2x.png"); background-size: 17px 10px; } } #passionnes .passionnes-content .intro .btn-video { position: absolute; top: 150px; left: -120px; width: 320px; } @media only screen and (max-width: 1200px) { #passionnes .passionnes-content .intro .btn-video { width: 290px; left: -95px; } } @media only screen and (max-width: 991px) { #passionnes .passionnes-content .intro .btn-video { position: relative; left: 0; top: 0; width: 100%; margin-top: 40px; } } #passionnes .list-portraits { margin-left: -10px; margin-right: -10px; padding-bottom: 150px; } @media only screen and (max-width: 1200px) { #passionnes .list-portraits { margin-bottom: 150px; } .touch #passionnes .list-portraits { margin-bottom: 0px; } } @media only screen and (max-width: 991px) { #passionnes .list-portraits { margin-bottom: 0px; } } #passionnes .portrait { width: 20%; float: left; padding: 0 10px; margin-bottom: 20px; position: relative; overflow: hidden; -moz-transform: translate(0, 250px); -o-transform: translate(0, 250px); -ms-transform: translate(0, 250px); -webkit-transform: translate(0, 250px); transform: translate(0, 250px); } #passionnes .portrait.visible { -moz-transform: translate(0, 0px); -o-transform: translate(0, 0px); -ms-transform: translate(0, 0px); -webkit-transform: translate(0, 0px); transform: translate(0, 0px); transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 100ms; } @media only screen and (max-width: 1460px) { #passionnes .portrait { width: 25%; } } @media only screen and (max-width: 1200px) { #passionnes .portrait { width: 33%; } } @media only screen and (max-width: 991px) { #passionnes .portrait { width: 50%; } } @media only screen and (max-width: 767px) { #passionnes .portrait { width: 100%; -moz-transform: translate(0, 0px); -o-transform: translate(0, 0px); -ms-transform: translate(0, 0px); -webkit-transform: translate(0, 0px); transform: translate(0, 0px); } } @media only screen and (min-width: 1461px) { #passionnes .portrait:nth-child(5n + 1) { top: 150px; } } @media only screen and (min-width: 1461px) { #passionnes .portrait:nth-child(5n + 3) { top: 150px; } } @media only screen and (min-width: 1461px) { #passionnes .portrait:nth-child(5n + 5) { top: 150px; } } @media only screen and (min-width: 1201px) and (max-width: 1460px) { #passionnes .portrait:nth-child(4n + 1) { top: 150px; } } @media only screen and (min-width: 1201px) and (max-width: 1460px) { #passionnes .portrait:nth-child(4n + 3) { top: 150px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { #passionnes .portrait:nth-child(3n + 1) { top: 150px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { #passionnes .portrait:nth-child(3n + 3) { top: 150px; } } #passionnes .portrait .visuel { overflow: hidden; } #passionnes .portrait .visuel img { position: relative; width: 110%; left: -5%; top: -4%; max-width: 110%; } #passionnes .portrait .infos { opacity: 0; filter: alpha(opacity=0); position: absolute; top: 0; left: 10px; right: 10px; z-index: 10; height: 100%; background: rgba(45, 114, 180, 0.9); text-align: center; color: white; font-family: "futura-pt"; transition: opacity 400ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } .no-touch #passionnes .portrait .infos:hover, .touch #passionnes .portrait .infos.hover { opacity: 1; filter: alpha(opacity=100); } .no-touch #passionnes .portrait .infos:hover .list-share, .no-touch #passionnes .portrait .infos:hover header, .touch #passionnes .portrait .infos.hover .list-share, .touch #passionnes .portrait .infos.hover header { -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } .no-touch #passionnes .portrait .infos:hover .links, .touch #passionnes .portrait .infos.hover .links { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } #passionnes .portrait .infos .vcenter { padding: 20px; } #passionnes .portrait .infos header { margin-bottom: 8%; -moz-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -webkit-transform: translate(0px, -100px); transform: translate(0px, -100px); transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } #passionnes .portrait .infos header h3, #passionnes .portrait .infos header #marque .intro ul li a .visuel + span, #marque .intro ul li a #passionnes .portrait .infos header .visuel + span { font-size: 32px; font-size: 3.2rem; line-height: 1; margin: 0; } #passionnes .portrait .infos header .job { font-size: 12px; font-size: 1.2rem; font-weight: 600; text-transform: uppercase; display: block; } #passionnes .portrait .infos .links { -moz-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9); transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } #passionnes .portrait .infos .links .btn { display: block; background: white; color: #0082C3; max-width: 180px; margin: 0 auto; padding: 12px 14px; font-size: 13px; font-size: 1.3rem; } #passionnes .portrait .infos .links .btn:hover { background: #292929; color: white; } #passionnes .portrait .infos .links .btn + .btn { margin-top: 10px; } #passionnes .portrait .infos .list-share { margin-top: 8%; -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px); transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } #passionnes .portrait .infos .list-share a { display: block; width: 25px; height: 25px; overflow: hidden; text-indent: -9999px; } #passionnes .portrait .infos .list-share .fb a { background: url("../img/shared/facebook_share.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { #passionnes .portrait .infos .list-share .fb a { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/facebook_share@2x.png"); background-size: 25px 25px; } } #passionnes .portrait .infos .list-share .tw a { background: url("../img/shared/twitter_share.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { #passionnes .portrait .infos .list-share .tw a { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/twitter_share@2x.png"); background-size: 25px 25px; } } #passionnes .portrait .infos .list-share .linkdn a { background: url("../img/shared/linkdn_share.png") no-repeat center center; } @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { #passionnes .portrait .infos .list-share .linkdn a { /* on retina, use image that's scaled by 2 */ background-image: url("../img/shared/linkdn_share@2x.png"); background-size: 25px 25px; } } .popup_passionne.mfp-wrap { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .popup_passionne .mfp-content { max-width: 800px; width: 70% !important; margin: 120px auto; } @media only screen and (max-width: 1200px) { .popup_passionne .mfp-content { width: 600px !important; } } @media only screen and (max-width: 767px) { .popup_passionne .mfp-content { width: 300px !important; } } .popup_passionne .mfp-content .mfp-close { background: url("../img/passionne/close.png") no-repeat center center; background-size: contain; width: 30px; height: 30px; content: ''; top: 0; right: -55px; } @media only screen and (max-width: 767px) { .popup_passionne .mfp-content .mfp-close { width: 20px; height: 20px; right: 50%; margin-right: -20px; top: -40px; } } .popup_passionne.mfp-bg { background: white; } .popup_passionne .front, .popup_passionne .back { -ms-perspective: 1000; -webkit-perspective: 1000; perspective: 1000; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .popup_passionne .front { position: relative; z-index: 2; -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .popup_passionne .back { -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .popup_passionne .scrollpath { position: absolute; top: 0; right: 0; width: 15%; height: 100%; } .popup_passionne .portrait-wrapper { position: relative; } .no-touch .popup_passionne .portrait-wrapper:hover #customCursor { opacity: 1; filter: alpha(opacity=100); } .no-touch .popup_passionne .portrait-wrapper:hover #customCursor > * { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .ie9 .popup_passionne .portrait-wrapper.flipback > .flip .portrait-parcours { z-index: 10; } .popup_passionne .portrait-wrapper.flipback > .flip > .back { -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .popup_passionne .portrait-wrapper.flipback > .flip > .front { -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .popup_passionne .portrait-wrapper.flipback #customCursor > .cursorphoto { opacity: 1; filter: alpha(opacity=100); } .popup_passionne .portrait-wrapper .flip { position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform: perspective(2000px); -o-transform: perspective(2000px); -ms-transform: perspective(2000px); -webkit-transform: perspective(2000px); transform: perspective(2000px); } .popup_passionne .flipPhoto, .popup_passionne .flipParc { position: absolute; width: 80px; height: 80px; top: 100px; right: 100px; cursor: pointer; overflow: hidden; } .popup_passionne #customCursor { pointer-events: none; position: fixed; width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; overflow: hidden; z-index: 24000; opacity: 0; filter: alpha(opacity=0); transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .popup_passionne #customCursor > * { -moz-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); -webkit-transform: scale(0.6); transform: scale(0.6); transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .popup_passionne #customCursor .cursorphoto { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .popup_passionne .portrait-photo { overflow: hidden; background-color: #fff; } .popup_passionne .portrait-photo:hover { /* cursor: url('../img/passionne/cursor-parcours.png'), auto; cursor: -webkit-image-set( url('../img/passionne/cursor-parcours.png') 1x, url('../img/passionne/cursor-parcours@2x.png') 2x ), auto;*/ } .popup_passionne .portrait-photo canvas { width: 800px; height: 1131px; } @media only screen and (max-width: 1200px) { .popup_passionne .portrait-photo canvas { width: 600px; height: 848px; } } @media only screen and (max-width: 767px) { .popup_passionne .portrait-photo canvas { width: 300px; height: 425px; } } .popup_passionne .portrait-parcours { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #2b72b4; overflow: hidden; color: white; z-index: 0; overflow-y: auto; } .popup_passionne .portrait-parcours:hover { /*cursor: url('../img/passionne/cursor-photo.png'), auto; cursor: -webkit-image-set( url('../img/passionne/cursor-photo.png') 1x, url('../img/passionne/cursor-photo@2x.png') 2x ), auto;*/ } .popup_passionne .portrait-parcours .content { padding: 100px; position: relative; z-index: 10; } @media only screen and (max-width: 1200px) { .popup_passionne .portrait-parcours .content { padding: 60px; } } @media only screen and (max-width: 767px) { .popup_passionne .portrait-parcours .content { padding: 40px; } } .popup_passionne .portrait-parcours:after { content: ''; position: absolute; top: 0; left: 0; background: url("../img/passionne/shadow.png") no-repeat top left; background-size: 100% auto; height: 300px; pointer-events: none; z-index: 0; width: 100%; } .popup_passionne .portrait-parcours .background { position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 0; } .popup_passionne .portrait-parcours .background > img { float: right; } .popup_passionne .portrait-parcours h1 { margin: 0; font-size: 64px; font-size: 6.4rem; } @media only screen and (max-width: 992px) { .popup_passionne .portrait-parcours h1 { font-size: 54px; font-size: 5.4rem; } } @media only screen and (max-width: 767px) { .popup_passionne .portrait-parcours h1 { font-size: 40px; font-size: 4rem; } } .popup_passionne .portrait-parcours .job { font-family: "futura-pt"; font-weight: 600; text-decoration: underline; text-transform: uppercase; display: block; font-size: 18px; font-size: 1.8rem; } @media only screen and (max-width: 992px) { .popup_passionne .portrait-parcours .job { font-size: 16px; font-size: 1.6rem; } } @media only screen and (max-width: 767px) { .popup_passionne .portrait-parcours .job { font-size: 14px; font-size: 1.4rem; } } .popup_passionne .portrait-parcours .parcours { padding: 60px 0px; margin: 30px 0px 0px; list-style: none; background: url("../img/passionne/background_list.png") repeat-y 0px 0px; position: relative; } @media only screen and (max-width: 767px) { .popup_passionne .portrait-parcours .parcours { padding: 0px; } } .popup_passionne .portrait-parcours .parcours .line { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: #EC6607; } .popup_passionne .portrait-parcours .parcours li { display: table; position: relative; width: 100%; margin-bottom: 20px; } .popup_passionne .portrait-parcours .parcours li:before { position: absolute; content: ''; display: block; width: 8px; height: 8px; background: #EC6607; top: 25px; left: -3px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ } .popup_passionne .portrait-parcours .parcours li > * { display: table-cell; padding: 20px; } @media only screen and (max-width: 767px) { .popup_passionne .portrait-parcours .parcours li > * { display: block; } } .popup_passionne .portrait-parcours .parcours .year { font-family: "futura-pt-condensed"; font-weight: 600; width: 80px; } .popup_passionne .portrait-parcours .parcours .description { background: #67a7e2; position: relative; } @media only screen and (max-width: 767px) { .popup_passionne .portrait-parcours .parcours .description { margin-left: 20px; } } .popup_passionne .portrait-parcours .parcours .description:before { position: absolute; content: ''; display: block; width: 20px; height: 20px; top: 20px; left: -5px; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #67a7e2; } @media only screen and (max-width: 767px) { .popup_passionne .portrait-parcours .parcours .description:before { top: -3px; left: 3px; width: 15px; height: 15px; } } .popup_passionne .portrait-parcours .parcours .description h2 { font-family: "proxima-nova"; text-transform: inherit; margin: 0; display: block; font-size: 16px; font-size: 1.6rem; font-weight: 400; line-height: 1.1; } @media only screen and (max-width: 767px) { .popup_passionne .portrait-parcours .parcours .description h2 { font-size: 14px; font-size: 1.4rem; } } .popup_passionne .portrait-parcours .parcours .description span { display: block; font-size: 16px; font-size: 1.6rem; font-weight: 400; line-height: 1.1; } @media only screen and (max-width: 767px) { .popup_passionne .portrait-parcours .parcours .description span { font-size: 14px; font-size: 1.4rem; } } .popup_passionne .list-share { position: absolute; top: 40px; right: -58px; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); z-index: 10; width: 35px; } @media only screen and (max-width: 767px) { .popup_passionne .list-share { position: relative; top: 0; left: 0; width: 100%; text-align: center; margin-top: 10px; } } @media only screen and (max-width: 767px) { .popup_passionne .list-share li { display: inline-block; padding: 0 4px; } } .popup_passionne .list-share li + li { margin: 8px 0px 0px !important; } .popup_passionne .list-share li a { display: block; width: 35px; height: 35px; } @media only screen and (max-width: 767px) { .popup_passionne .list-share li a { width: 30px; height: 30px; } } .popup_passionne .list-share li a object { display: block; height: auto; padding-top: 100%; position: relative; width: 100%; } .popup_passionne .list-share li a object svg { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .popup_passionne .list-share li a svg path { fill: #9f9f9f; transition: fill 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .popup_passionne .list-share .sharefb:hover svg path { fill: #3B5998; } .popup_passionne .list-share .sharetw:hover svg path { fill: #55ACEE; } .popup_passionne .list-share .sharepin:hover svg path { fill: #CD2024; } .popup_passionne .list-share .sharemail:hover svg path { fill: #0082C3; } .popup_passionne .list-share .sharelinkd:hover svg path { fill: #1380B9; } .mfp-no-margins img.mfp-img { padding: 0; } .mfp-no-margins .mfp-figure:after { top: 0; bottom: 0; } .mfp-no-margins .mfp-container { padding: 0; } .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg { opacity: 0.001; -webkit-backface-visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; } .mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; } .no-touch .popup_passionne .portrait-parcours .parcours .description h2 a:hover { text-decoration: underline; } body > header .navbar li.stories a { padding-top: 11px; padding-bottom: 11px; } @media only screen and (max-width: 1070px) { body > header .navbar li.stories a { padding-top: 14px; padding-bottom: 15px; } } body > header .navbar li.stories a img { display: inline-block; height: 28px; width: auto; } @media only screen and (max-width: 1070px) { body > header .navbar li.stories a img { height: 20px; } } @media only screen and (max-width: 870px) { body > header .navbar li.stories a img { height: 24px; } } body > header .navbar li.stories.active:before { height: 100%; } #stories { background: url("../img/stories/background.jpg") no-repeat top center white; overflow: hidden; background-size: cover; } #stories .scrollpane { width: 100%; } #stories .intro { margin-top: 6%; text-align: center; position: relative; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } @media only screen and (max-width: 1200px) { #stories .intro { margin-top: 80px; } } #stories .intro .inner { width: 100%; position: relative; z-index: 10; } #stories .intro .logo { width: 12%; display: block; margin: 0 auto; position: absolute; top: 28%; left: 50%; -moz-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } #stories .intro h1 { width: 50%; max-width: 1050px; margin: 0 auto; position: relative; } @media only screen and (max-width: 767px) { #stories .intro h1 { width: 250px; left: 20px; } } #stories .intro p { position: relative; max-width: 580px; margin: 0 auto; font-size: 1.6rem; margin-bottom: 40px; padding: 0 40px; } @media only screen and (max-width: 1440px) { #stories .intro p { margin-top: 20px; font-size: 1.4rem; } } @media only screen and (max-width: 767px) { #stories .intro p { margin-top: 40px; } } #stories .intro .btn { border: 2px solid #2a2a2a; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; padding: 10px 25px; } #stories .intro .btn > * { display: inline-block; vertical-align: middle; } #stories .intro .btn .arrow { margin-left: 15px; width: 14px; height: 8px; background: url("../img/shared/dropdown-arrow2x.png") no-repeat top center; background-size: 100% auto; } #stories .intro .stories-background { position: absolute; top: -10%; left: 0; width: 100%; height: 100%; background: url("../img/stories/Illustration.png") no-repeat center center; background-size: contain; pointer-events: none; } @media only screen and (max-width: 1440px) { #stories .intro .stories-background { top: -16%; } } @media only screen and (max-width: 767px) { #stories .intro .stories-background { top: -110px; width: 450px; margin-left: -225px; left: 50%; } } #stories .list-video-container { max-width: 1280px; padding: 0 20px; margin: 0 auto; } @media only screen and (min-width: 768px) { #stories .list-video-container { padding: 0 40px; } } #stories .list-videos { padding: 0px; list-style: none; margin: 80px -10px 80px; } @media only screen and (min-width: 992px) { #stories .list-videos { padding-bottom: 90px; } } #stories .list-videos .story-item { padding: 0 10px; text-align: center; margin-bottom: 20px; -moz-transform: translateY(150px); -o-transform: translateY(150px); -ms-transform: translateY(150px); -webkit-transform: translateY(150px); transform: translateY(150px); transition: transform 1200ms cubic-bezier(0.525, 0, 0.265, 1) 0ms; } #stories .list-videos .story-item.visible { -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } @media only screen and (min-width: 992px) { #stories .list-videos .story-item:nth-child(4n + 1), #stories .list-videos .story-item:nth-child(4n + 3) { top: 60px; } } @media only screen and (min-width: 992px) { #stories .list-videos .story-item:nth-child(4n + 4) { top: 90px; } } #stories .list-videos .story-item > a { background: #000; display: block; font-size: 1.1rem; text-transform: uppercase; font-weight: 500; color: white; position: relative; display: table; height: 220px; width: 100%; overflow: hidden; } #stories .list-videos .story-item > a:hover .story-preview { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } #stories .list-videos .story-item > a:hover .inner > span:not(.btn-play) { opacity: 0; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; transition-delay: 0ms; } #stories .list-videos .story-item > a:hover .btn-play { -moz-transform: translateY(-35px); -o-transform: translateY(-35px); -ms-transform: translateY(-35px); -webkit-transform: translateY(-35px); transform: translateY(-35px); } #stories .list-videos .story-item .inner { position: relative; z-index: 10; display: table-cell; vertical-align: middle; padding: 20px; } #stories .list-videos .story-item .inner > * { display: block; line-height: 1.2; font-weight: 500; } #stories .list-videos .story-item .inner > *:not(.btn-play) { transition: opacity 150ms linear 300ms; } #stories .list-videos .story-item .story-preview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; background-size: cover; background-repeat: no-repeat; background-position: center center; transition: transform 1200ms cubic-bezier(0.525, 0, 0.265, 1) 0ms; } #stories .list-videos .story-item .name { font-weight: 900; font-size: 2.4rem; text-transform: none; margin-bottom: 5px; font-family: "futura-pt"; } #stories .list-videos .story-item .enter { color: #9e9e9e; } .popupStory.mfp-bg { background: white; } .popupStory.mfp-ready.mfp-bg { opacity: 0.9 !important; } .popupStory.mfp-ready .stories-background { -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); -webkit-transform: translateY(0%); transform: translateY(0%); } .popupStory.mfp-ready .story-content > span { -moz-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .popupStory.mfp-ready .video-container { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .popupStory .mfp-container { overflow: hidden; } .popupStory .mfp-content { max-width: 1200px; position: initial; } @media only screen and (min-width: 768px) { .popupStory .mfp-content { width: 60% !important; } } @media only screen and (min-width: 1440px) { .popupStory .mfp-content { width: 70% !important; } } .popupStory .story-content { text-align: center; margin-bottom: 20px; } @media only screen and (min-width: 992px) { .popupStory .story-content { text-align: left; position: absolute; top: 50%; z-index: 10; -moz-transform: translate(-125px, -50%); -o-transform: translate(-125px, -50%); -ms-transform: translate(-125px, -50%); -webkit-transform: translate(-125px, -50%); transform: translate(-125px, -50%); margin-bottom: 0px; } } .popupStory .story-content > span { display: block; font-size: 1rem; text-transform: uppercase; font-weight: 700; line-height: 1; transition: transform 800ms cubic-bezier(0.525, 0, 0.265, 1) 0ms; -moz-transform: translate3d(0px, -50px, 0px); -o-transform: translate3d(0px, -50px, 0px); -ms-transform: translate3d(0px, -50px, 0px); -webkit-transform: translate3d(0px, -50px, 0px); transform: translate3d(0px, -50px, 0px); } @media only screen and (min-width: 768px) { .popupStory .story-content > span { font-size: 1.2rem; line-height: 1.2; -moz-transform: translate3d(-100px, 0px, 0px); -o-transform: translate3d(-100px, 0px, 0px); -ms-transform: translate3d(-100px, 0px, 0px); -webkit-transform: translate3d(-100px, 0px, 0px); transform: translate3d(-100px, 0px, 0px); } } .popupStory .story-content > span.name { font-weight: 900; font-size: 4rem; line-height: 0.8; text-transform: none; font-family: "futura-pt"; margin-bottom: 10px; } @media only screen and (min-width: 768px) { .popupStory .story-content > span.name { font-size: 5rem; } } @media only screen and (min-width: 1440px) { .popupStory .story-content > span.name { font-size: 7rem; } } .popupStory .story-content > span.name > span { display: block; } .popupStory .story-content > span.enter { color: #9e9e9e; } .popupStory .video-container { padding-top: 57%; position: relative; background: #000; -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); transition: transform 800ms cubic-bezier(0.525, 0, 0.265, 1) 0ms; z-index: 2; } .popupStory .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .popupStory .stories-background { pointer-events: none; position: absolute; bottom: -230px; left: -25%; width: 100%; height: 450px; background: url("../img/stories/Illustration.png") no-repeat center center; background-size: contain; pointer-events: none; transition: transform 1000ms cubic-bezier(0.525, 0, 0.265, 1) 0ms; -moz-transform: translateY(100%); -o-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); z-index: 0; } @media only screen and (min-width: 768px) { .popupStory .stories-background { bottom: -190px; width: 80%; } } #greatplacetowork { background: #e7f1fb; } #greatplacetowork abbr[title] { border-bottom: none; cursor: initial; } #greatplacetowork .scrollpane { width: 100%; } #greatplacetowork img { display: block; max-width: 100%; } #greatplacetowork h2 { font-size: 3.2rem; line-height: 1.1; } #greatplacetowork p { font-size: 17px; line-height: 1.4; color: #2a2a2a; } #greatplacetowork p.big { color: #1c7fc5; font-weight: 700; font-size: 1.8rem; line-height: 1.2; } @media (min-width: 660px) { #greatplacetowork p.big { font-size: 2.4rem; } } #greatplacetowork .row { margin-left: 0px; margin-right: 0px; } #greatplacetowork .row > * { padding: 0px; } #greatplacetowork .btn { color: #1c7fc5; font-family: "futura-pt-condensed"; border: 2px solid #1c7fc5; border-radius: 200px; font-size: 1.5rem; padding-left: 30px; padding-right: 30px; display: inline-block; line-height: 1.3; transition: all 0.3s ease-out; } #greatplacetowork .btn i.icon { width: 14px; margin-left: 22px; display: inline-block; } #greatplacetowork .btn i.icon svg polyline, #greatplacetowork .btn i.icon svg line { stroke: #1c7fc5 !important; } #greatplacetowork .btn:hover { background: #1c7fc5; color: #ffffff; } #greatplacetowork .btn:hover i.icon svg polyline, #greatplacetowork .btn:hover i.icon svg line { stroke: #ffffff !important; } #greatplacetowork blockquote { font-family: "futura-pt"; font-weight: 400; border: none; color: #1c7fc5; padding: 0; padding-left: 0; font-size: 3rem; line-height: 1.1; margin-bottom: 40px; } #greatplacetowork section#intro { position: relative; z-index: 2; background: url(../img/google.png); background-size: cover; background-repeat: no-repeat; padding-top: 160px; padding-bottom: 270px; background-position: center center; } @media (max-width: 1200px) { #greatplacetowork section#intro { padding-top: 120px; padding-bottom: 220px; } } @media (max-width: 600px) { #greatplacetowork section#intro { padding-bottom: 150px; } } #greatplacetowork section#intro div.logo-great-place-to-work-2017 { max-width: 280px; margin-left: auto; margin-right: auto; } #greatplacetowork section#intro div.logo-great-place-to-work-2017 svg { display: block; max-width: 100%; } @media (max-width: 600px) { #greatplacetowork section#intro div.logo-great-place-to-work-2017 { max-width: 200px; } } #greatplacetowork section#intro h1 { display: block; max-width: 704px; margin-left: auto; margin-right: auto; position: absolute; bottom: -224px; left: 50%; margin-left: -352px; } @media (max-width: 1400px) { #greatplacetowork section#intro h1 { max-width: 500px; margin-left: -250px; bottom: -164px; } } @media (max-width: 600px) { #greatplacetowork section#intro h1 { max-width: 300px; margin-left: -150px; bottom: -102px; } } #greatplacetowork section#bon_vivre { position: relative; z-index: 1; } #greatplacetowork section#bon_vivre .content { background: #002842; background-repeat: no-repeat; background-size: cover; background-position: center center; padding-top: 140px; height: 600px; padding-left: 18%; padding-right: 10%; } @media (max-width: 1200px) { #greatplacetowork section#bon_vivre .content { padding-left: 3%; padding-right: 3%; padding-top: 50px; } } @media (max-width: 992px) { #greatplacetowork section#bon_vivre .content { padding-left: 20%; padding-right: 20%; padding-top: 160px; padding-bottom: 160px; height: auto; float: none; text-align: center; } } @media (max-width: 660px) { #greatplacetowork section#bon_vivre .content { padding-left: 10%; padding-right: 10%; width: 100%; margin-left: auto; margin-right: auto; padding-top: 100px; padding-bottom: 50px; } } #greatplacetowork section#bon_vivre .content h2, #greatplacetowork section#bon_vivre .content p { color: #ffffff; } #greatplacetowork section#bon_vivre .content h2 { text-transform: none; position: relative; margin-bottom: 60px; } #greatplacetowork section#bon_vivre .content h2:after { content: ""; position: absolute; width: 146px; height: 1px; background: #1c7fc5; bottom: 50px; left: 0; } @media (max-width: 992px) { #greatplacetowork section#bon_vivre .content h2 { font-size: 3rem; } #greatplacetowork section#bon_vivre .content h2:after { left: 50%; margin-left: -73px; } } #greatplacetowork section#bon_vivre .visuel { background: #1a1a1a; height: 600px; position: relative; overflow: hidden; } #greatplacetowork section#bon_vivre .visuel:before { position: absolute; content: ""; height: 200px; width: 100%; background: -moz-linear-gradient(top, black 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(top, black 0%, rgba(255, 255, 255, 0) 100%); background: linear, to bottom, black 0%, rgba(255, 255, 255, 0) 100%; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00ffffff',GradientType=0 ); opacity: 0.8; top: -50px; } #greatplacetowork section#bon_vivre .visuel iframe { width: 100% !important; height: 600px; } @media (max-width: 992px) { #greatplacetowork section#bon_vivre .visuel { height: 400px; } #greatplacetowork section#bon_vivre .visuel iframe { height: 400px; } } @media (max-width: 660px) { #greatplacetowork section#bon_vivre .visuel { height: 300px; } #greatplacetowork section#bon_vivre .visuel iframe { height: 300px; } } #greatplacetowork section#explication { padding-top: 200px; padding-bottom: 200px; } #greatplacetowork section#explication > .content { text-align: center; } #greatplacetowork section#explication > .content > .container { width: 960px; } #greatplacetowork section#explication > .content > .container .col-md-6 { width: 420px; text-align: left; } #greatplacetowork section#explication > .content > .container .col-right { float: right; } #greatplacetowork section#explication > .content > .container .dl-btn { margin-top: 100px; } @media (max-width: 660px) { #greatplacetowork section#explication > .content > .container .dl-btn { margin-top: 50px; } } @media (max-width: 992px) { #greatplacetowork section#explication > .content > .container { width: 60%; } #greatplacetowork section#explication > .content > .container .col-md-6 { float: none; width: 100%; margin-left: auto; margin-right: auto; } } @media (max-width: 660px) { #greatplacetowork section#explication > .content > .container { width: 90%; } } @media (max-width: 992px) { #greatplacetowork section#explication { padding-top: 100px; padding-bottom: 100px; } } @media (max-width: 660px) { #greatplacetowork section#explication { padding-top: 70px; padding-bottom: 70px; } } section#infographie { background: #ffffff; padding-top: 100px; position: relative; overflow: hidden; z-index: 3; } section#infographie:after { z-index: 2; content: ""; position: absolute; height: 3020px; width: 300%; background: #1c7fc5; bottom: -1900px; transform: rotate(-10deg); left: -50%; } @media (max-width: 1100px) { section#infographie:after { bottom: -2380px; } } @media (max-width: 660px) { section#infographie:after { bottom: -2700px; } } section#infographie:before { z-index: 1; content: ""; position: absolute; height: 3020px; width: 300%; background: #ee7936; bottom: -1880px; transform: rotate(-10deg); left: -50%; } @media (max-width: 1100px) { section#infographie:before { bottom: -2365px; } } @media (max-width: 660px) { section#infographie:before { bottom: -2690px; } } section#infographie img { position: relative; z-index: 3; display: block; margin-left: auto; margin-right: auto; } @media (max-width: 1100px) { section#infographie img { max-width: 600px; } } @media (max-width: 660px) { section#infographie img { max-width: 300px; } } @-webkit-keyframes bounceOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes bounceOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes bounceOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes bounceOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } #main.loading .chargement { visibility: visible; } #main .chargement { z-index: 10; position: absolute; top: 50%; left: 50%; color: white; visibility: hidden; text-transform: uppercase; transform: translate(-50%, -50%); font-weight: 900; pointer-events: none; letter-spacing: 0.5em; -webkit-animation: bounceOpacity 600ms alternate infinite; -moz-animation: bounceOpacity 600ms alternate infinite; -o-animation: bounceOpacity 600ms alternate infinite; animation: bounceOpacity 600ms alternate infinite; } section#portraits { background: white; overflow: hidden; transition: all 800ms cubic-bezier(0.7, 0, 0.3, 1) 0s; } section#portraits .scrollpane { width: 100%; } @media screen and (min-width: 768px) { section#portraits .scrollpane { overflow: auto !important; height: 100% !important; } } .loading section#portraits { pointer-events: none; transform: scale(0.9); opacity: 0.3; } .loaded section#portraits { transform: translateX(-50%) scale(0.9); opacity: 0.3; pointer-events: none; } section#portraits .intro { background: url("../img/portraits/intro_visuel.jpg"); background-position: top center; background-repeat: no-repeat; background-size: cover; } @media screen and (min-width: 768px) { section#portraits .intro { background-size: contain; } } section#portraits .intro .inner { padding: 100px 40px 60px; text-align: center; max-width: 550px; margin: 0 auto; } @media screen and (min-width: 768px) { section#portraits .intro .inner { padding: 200px 40px 100px; } } section#portraits .intro .inner h1 { margin: 0px; margin-bottom: 30px; font-size: 5.4rem; line-height: 0.9; font-weight: 900; color: #0082C3; } @media screen and (min-width: 768px) { section#portraits .intro .inner h1 { font-size: 8rem; } } @media screen and (min-width: 1600px) { section#portraits .intro .inner h1 { font-size: 11rem; } } section#portraits .intro .inner h1 span { display: block; font-size: 2.4rem; font-weight: 400; } @media screen and (min-width: 768px) { section#portraits .intro .inner h1 span { font-size: 3rem; } } @media screen and (min-width: 1600px) { section#portraits .intro .inner h1 span { font-size: 5rem; } } section#portraits .intro .inner p { max-width: 550px; color: #4f4f4f; line-height: 1.6; margin: 0 auto; } @media screen and (min-width: 1600px) { section#portraits .intro .inner p { font-size: 1.7rem; } } section#portraits .portraits__list { list-style-type: none; margin: 0px auto; max-width: 80%; padding: 0px; margin-bottom: 60px; } @media screen and (min-width: 768px) { section#portraits .portraits__list { margin-bottom: 120px; } } section#portraits .portraits__list li { width: 100%; max-width: 900px; margin: 0 auto; background-size: contain; background-repeat: no-repeat; background-position: center center; } @media screen and (min-width: 768px) { section#portraits .portraits__list li { width: 90%; padding: 0px 40px; } } @media screen and (min-width: 992px) { section#portraits .portraits__list li { width: 70%; } } @media screen and (min-width: 1200px) { section#portraits .portraits__list li { width: 55%; margin-right: 0px; } } @media screen and (min-width: 1200px) { section#portraits .portraits__list li:nth-child(2n+1) { margin-right: 0px; margin-left: 0px; } } section#portraits .portraits__list li + li { margin-top: 0px; } section#portraits .portraits__link { display: block; width: 100%; position: relative; margin: 0px; } section#portraits .portraits__link.droite .inner { float: right; } section#portraits .portraits__link .visuel { position: relative; z-index: 1; } section#portraits .portraits__link .visuel:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; } section#portraits .portraits__link .visuel.form--00:after { background-image: url("../img/portraits/form_01.png"); } section#portraits .portraits__link .visuel.form--01:after { background-image: url("../img/portraits/form_02.png"); } section#portraits .portraits__link .visuel.form--02:after { background-image: url("../img/portraits/form_03.png"); } section#portraits .portraits__link .visuel.form--03:after { background-image: url("../img/portraits/form_04.png"); } section#portraits .portraits__link .visuel.form--04:after { background-image: url("../img/portraits/form_05.png"); } section#portraits .portraits__link .visuel.form--05:after { background-image: url("../img/portraits/form_06.png"); } section#portraits .portraits__link .inner { z-index: 2; position: relative; margin-top: -100px; max-width: 50%; } @media screen and (min-width: 768px) { section#portraits .portraits__link .inner { margin-top: -120px; } } section#portraits .portraits__link .index { font-weight: 300; color: #414141; margin-left: -10px; font-size: 10rem; line-height: 80px; } @media screen and (min-width: 768px) { section#portraits .portraits__link .index { font-size: 20rem; line-height: 180px; } } @media screen and (min-width: 1600px) { section#portraits .portraits__link .index { font-size: 26rem; } } section#portraits .portraits__link h3, section#portraits .portraits__link #marque .intro ul li a .visuel + span, #marque .intro ul li a section#portraits .portraits__link .visuel + span { font-weight: 400; line-height: 0.9; color: #0082C3; margin: 10px 0px; font-size: 2.6rem; } @media screen and (min-width: 768px) { section#portraits .portraits__link h3, section#portraits .portraits__link #marque .intro ul li a .visuel + span, #marque .intro ul li a section#portraits .portraits__link .visuel + span { font-size: 5rem; white-space: nowrap; } } @media screen and (min-width: 1600px) { section#portraits .portraits__link h3, section#portraits .portraits__link #marque .intro ul li a .visuel + span, #marque .intro ul li a section#portraits .portraits__link .visuel + span { font-size: 7rem; } } section#portraits .portraits__link h3 .surname, section#portraits .portraits__link #marque .intro ul li a .visuel + span .surname, #marque .intro ul li a section#portraits .portraits__link .visuel + span .surname { display: block; font-weight: 700; } section#portraits .portraits__link .job { margin: 0px; font-weight: 700; max-width: 300px; color: #414141; } @media screen and (min-width: 1600px) { section#portraits .portraits__link .job { font-size: 1.6rem; } } .single-portrait-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; background: white; transform: translateX(100%); transition: transform 1s cubic-bezier(0.61, 0.01, 0.35, 1) 0s; } .single-portrait-container#portrait { pointer-events: all; transform: translateX(0%); } .loaded .single-portrait-container { pointer-events: all; transform: translateX(0%); } article.portrait__single { background: white; color: #4f4f4f; } article.portrait__single a.back-to { position: absolute; top: 0px; left: 0px; } @media screen and (min-width: 768px) { article.portrait__single a.back-to { top: 40px; left: 40px; } } article.portrait__single blockquote, article.portrait__single h2, article.portrait__single h3, article.portrait__single #marque .intro ul li a .visuel + span, #marque .intro ul li a article.portrait__single .visuel + span { padding: 0px; border: none; margin: 0px; color: #0082C3; font-size: 2.2rem; line-height: 1; font-weight: 700; text-transform: uppercase; font-family: "futura-pt"; margin-bottom: 30px; } @media screen and (min-width: 768px) { article.portrait__single blockquote, article.portrait__single h2, article.portrait__single h3, article.portrait__single #marque .intro ul li a .visuel + span, #marque .intro ul li a article.portrait__single .visuel + span { font-size: 3.8rem; } } @media screen and (min-width: 1200px) { article.portrait__single blockquote, article.portrait__single h2, article.portrait__single h3, article.portrait__single #marque .intro ul li a .visuel + span, #marque .intro ul li a article.portrait__single .visuel + span { font-size: 4.5rem; } } @media screen and (min-width: 1600px) { article.portrait__single blockquote, article.portrait__single h2, article.portrait__single h3, article.portrait__single #marque .intro ul li a .visuel + span, #marque .intro ul li a article.portrait__single .visuel + span { font-size: 5.5rem; } } article.portrait__single .row { margin-left: 0px; margin-right: 0px; } @media screen and (min-width: 768px) { article.portrait__single .row { margin-left: -30px; margin-right: -30px; } } article.portrait__single .row > * { padding-left: 0px; padding-right: 0px; } @media screen and (min-width: 768px) { article.portrait__single .row > * { padding-left: 30px; padding-right: 30px; } } article.portrait__single h3, article.portrait__single #marque .intro ul li a .visuel + span, #marque .intro ul li a article.portrait__single .visuel + span { font-size: 2.4rem; font-weight: 300; } @media screen and (min-width: 768px) { article.portrait__single h3, article.portrait__single #marque .intro ul li a .visuel + span, #marque .intro ul li a article.portrait__single .visuel + span { font-size: 3.2rem; } } @media screen and (min-width: 992px) { article.portrait__single h3, article.portrait__single #marque .intro ul li a .visuel + span, #marque .intro ul li a article.portrait__single .visuel + span { font-size: 4rem; } } article.portrait__single h3 strong, article.portrait__single #marque .intro ul li a .visuel + span strong, #marque .intro ul li a article.portrait__single .visuel + span strong { display: block; font-weight: 700; } article.portrait__single p { margin-bottom: 0px; } @media screen and (min-width: 1600px) { article.portrait__single p { font-size: 1.5rem; } } article.portrait__single p + * { margin-top: 30px; } article.portrait__single p.big { font-size: 1.6rem; font-weight: 500; } @media screen and (min-width: 768px) { article.portrait__single p.big { font-size: 1.8rem; } } @media screen and (min-width: 1600px) { article.portrait__single p.big { font-size: 2.2rem; } } @media screen and (max-width: 767px) { article.portrait__single .container { padding: 0px; } } @media screen and (min-width: 992px) and (max-width: 1200px) { article.portrait__single .container { width: 940px; } } @media screen and (min-width: 768px) { article.portrait__single div[class^='block-'].animated > .wrapper { transform: translateY(200px); transition: transform 1.2s cubic-bezier(0.61, 0.01, 0.35, 1) 0s, opacity 1.2s cubic-bezier(0.61, 0.01, 0.35, 1) 0s; opacity: 0; } } article.portrait__single div[class^='block-'].animated.block-double .visuel-container:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1d272f; transform: translateX(0%); transition: transform 1200ms cubic-bezier(0.61, 0.01, 0.35, 1) 0s; } article.portrait__single div[class^='block-'].animated.block-double .inner > * { transform: translateY(150px); transition: transform 1200ms cubic-bezier(0.61, 0.01, 0.35, 1) 0s; } article.portrait__single div[class^='block-'].animated.block-double .inner > *:nth-child(1) { transition-duration: 1300ms; } article.portrait__single div[class^='block-'].animated.block-double .inner > *:nth-child(2) { transition-duration: 1400ms; } article.portrait__single div[class^='block-'].animated.block-double .inner > *:nth-child(3) { transition-duration: 1500ms; } article.portrait__single div[class^='block-'].animated.block-double .inner > *:nth-child(4) { transition-duration: 1600ms; } article.portrait__single div[class^='block-'].animated.block-double .inner > *:nth-child(5) { transition-duration: 1700ms; } article.portrait__single div[class^='block-'].animated.block-double .inner > *:nth-child(6) { transition-duration: 1800ms; } article.portrait__single div[class^='block-'].animated.block-double .inner > *:nth-child(7) { transition-duration: 1900ms; } article.portrait__single div[class^='block-'].animated.block-double .inner > *:nth-child(8) { transition-duration: 2000ms; } article.portrait__single div[class^='block-'].animated.block-double .inner > *:nth-child(9) { transition-duration: 2100ms; } article.portrait__single div[class^='block-'].animated.block-chiffres .col-md-5 { transform: translateY(250px); transition: transform 1200ms cubic-bezier(0.61, 0.01, 0.35, 1) 0s; } article.portrait__single div[class^='block-'].animated.block-chiffres .visuel-container { overflow: hidden; position: relative; } article.portrait__single div[class^='block-'].animated.block-chiffres .visuel-container img { position: relative; transform: translateX(-25%); transition: transform 1.2s cubic-bezier(0.61, 0.01, 0.35, 1) 0s; } article.portrait__single div[class^='block-'].animated.block-chiffres .visuel-container:after { content: ''; display: block; background: #f6f6f6; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 1.2s cubic-bezier(0.61, 0.01, 0.35, 1) 0s; } article.portrait__single div[class^='block-'].animated.block-quote blockquote { transform: translateY(200px); transition: transform 1.2s cubic-bezier(0.61, 0.01, 0.35, 1) 0s; } article.portrait__single div[class^='block-'].animated.block-quote .visuel-container { overflow: hidden; position: relative; } article.portrait__single div[class^='block-'].animated.block-quote .visuel-container img { position: relative; transform: translateY(-25%); transition: transform 1.2s cubic-bezier(0.61, 0.01, 0.35, 1) 0s; } article.portrait__single div[class^='block-'].animated.block-quote .visuel-container:after { content: ''; display: block; background: #f6f6f6; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 1.2s cubic-bezier(0.61, 0.01, 0.35, 1) 0s; } article.portrait__single div[class^='block-'].animated[class^='block-visuel'] .visuel-container { overflow: hidden; position: relative; } article.portrait__single div[class^='block-'].animated[class^='block-visuel'] .visuel-container img { position: relative; transform: translateY(-25%); transition: transform 1.2s cubic-bezier(0.61, 0.01, 0.35, 1) 0s; } article.portrait__single div[class^='block-'].animated[class^='block-visuel'] .visuel-container:after { content: ''; display: block; background: #f6f6f6; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 1.2s cubic-bezier(0.61, 0.01, 0.35, 1) 0s; } article.portrait__single div[class^='block-'].animated[class^='block-visuel'] .inner  { transform: translateY(200px); transition: transform 1.2s cubic-bezier(0.61, 0.01, 0.35, 1) 0s; } @media screen and (min-width: 768px) { article.portrait__single div[class^='block-'].animated.visible > .wrapper { opacity: 1; transform: translateY(0px); } } article.portrait__single div[class^='block-'].animated.visible.block-double .visuel-container:after { transform: translateX(100%); } article.portrait__single div[class^='block-'].animated.visible.block-double .inner > * { transform: translateY(0px); } article.portrait__single div[class^='block-'].animated.visible.block-chiffres .col-md-5 { transform: translateY(0px); } article.portrait__single div[class^='block-'].animated.visible.block-chiffres .visuel-container img { transform: translateX(0%); } article.portrait__single div[class^='block-'].animated.visible.block-chiffres .visuel-container:after { transform: translateX(100%); } article.portrait__single div[class^='block-'].animated.visible.block-quote blockquote { transform: translateY(0px); } article.portrait__single div[class^='block-'].animated.visible.block-quote .visuel-container img { transform: translateY(0%); } article.portrait__single div[class^='block-'].animated.visible.block-quote .visuel-container:after { transform: translateY(100%); } article.portrait__single div[class^='block-'].animated.visible[class^='block-visuel'] .inner { transform: translateY(0px); } article.portrait__single div[class^='block-'].animated.visible[class^='block-visuel'] .visuel-container img { transform: translateY(0%); } article.portrait__single div[class^='block-'].animated.visible[class^='block-visuel'] .visuel-container:after { transform: translateY(100%); } article.portrait__single div[class^='block-'] .container > .inner { margin: 0 auto; width: 75%; max-width: 900px; } article.portrait__single div[class^='block-'] + div[class^='block-'] { padding-top: 60px; } @media screen and (min-width: 768px) { article.portrait__single div[class^='block-'] + div[class^='block-'] { padding-top: 80px; } } @media screen and (min-width: 992px) { article.portrait__single div[class^='block-'] + div[class^='block-'] { padding-top: 120px; } } @media screen and (min-width: 1200px) { article.portrait__single div[class^='block-'] + div[class^='block-'] { padding-top: 160px; } } article.portrait__single .block-intro .wrapper { position: relative; padding: 60vh 0px 80px; text-align: center !important; } @media screen and (min-width: 768px) { article.portrait__single .block-intro .wrapper { padding: 40vh 0px 120px; } } @media screen and (min-width: 992px) { article.portrait__single .block-intro .wrapper { padding: 30vh 0px; text-align: left !important; } } article.portrait__single .block-intro .content { position: relative; z-index: 1; } article.portrait__single .block-intro .content .index { font-size: 1.7rem; font-weight: 400; display: block; overflow: hidden; } article.portrait__single .block-intro .content .mask { display: block; } article.portrait__single .block-intro .content h1 { margin: 20px 0px; font-size: 4rem; line-height: 1.2; font-weight: 300; color: #0082C3; } @media screen and (min-width: 768px) { article.portrait__single .block-intro .content h1 { font-size: 7rem; } } article.portrait__single .block-intro .content h1 > div { overflow: hidden; } article.portrait__single .block-intro .content h1 > div + div { margin-top: -10px; } @media screen and (min-width: 768px) { article.portrait__single .block-intro .content h1 > div + div { margin-top: -20px; } } article.portrait__single .block-intro .content h1 span { text-align: center !important; } @media screen and (min-width: 992px) { article.portrait__single .block-intro .content h1 span { text-align: left !important; } } article.portrait__single .block-intro .content h1 .surname { font-weight: 900; } article.portrait__single .block-intro .content p { font-size: 1.4rem; margin: 0px auto; max-width: 180px; font-weight: 700; } article.portrait__single .block-intro .content p > div { overflow: hidden; } article.portrait__single .block-intro .content p > div span { text-align: center !important; } @media screen and (min-width: 992px) { article.portrait__single .block-intro .content p > div span { text-align: left !important; } } @media screen and (min-width: 768px) { article.portrait__single .block-intro .content p { font-size: 1.7rem; max-width: 350px; } } @media screen and (min-width: 992px) { article.portrait__single .block-intro .content p { margin: 0px; } } article.portrait__single .block-intro .visuel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: auto 100%; background-repeat: no-repeat; background-position: top center; } @media screen and (min-width: 768px) { article.portrait__single .block-intro .visuel { background-size: auto 100%; } } article.portrait__single .block-double { padding-top: 0px !important; overflow: hidden; } article.portrait__single .block-double .wrapper { position: relative; background: #1d272f; opacity: 1 !important; transform: translateY(0px) !important; } article.portrait__single .block-double .visuel-container { height: 280px; margin: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: hidden; } @media screen and (min-width: 768px) { article.portrait__single .block-double .visuel-container { max-width: 550px; width: 100%; margin: 0 auto; margin-top: -40px; height: 360px; } } @media screen and (min-width: 992px) { article.portrait__single .block-double .visuel-container { position: absolute; margin-top: 0px; top: 0; left: 0; right: 50%; max-width: 100%; width: auto; height: 100%; } } article.portrait__single .block-double .inner { padding: 60px 0px; } @media screen and (min-width: 768px) { article.portrait__single .block-double .inner { padding: 60px; } } @media screen and (min-width: 992px) { article.portrait__single .block-double .inner { width: auto !important; margin: 0px 0px 0px 50% !important; padding-right: 0px !important; } } @media screen and (min-width: 1600px) { article.portrait__single .block-double .inner { padding: 60px 120px; } } article.portrait__single .block-double .inner blockquote { font-size: 3.2rem; } @media screen and (min-width: 1600px) { article.portrait__single .block-double .inner blockquote { font-size: 4.5rem; } } article.portrait__single .block-double .inner p { color: white; } article.portrait__single .block-chiffres .container { max-width: 550px; margin: 0 auto; } @media screen and (min-width: 992px) { article.portrait__single .block-chiffres .container { max-width: 100%; } } article.portrait__single .block-chiffres .row > * { margin-bottom: 60px; } @media screen and (min-width: 1200px) { article.portrait__single .block-chiffres .row > * { margin-bottom: 100px; } } @media screen and (max-width: 767px) { article.portrait__single .block-chiffres .col-md-5 { width: 75%; margin-left: auto; margin-right: auto; padding: 0px; } } @media screen and (min-width: 992px) { article.portrait__single .block-chiffres .col-md-5 { padding-right: 60px; } } @media screen and (min-width: 1200px) { article.portrait__single .block-chiffres .col-md-5 { padding-right: 100px; } } article.portrait__single .block-chiffres .col-md-7 + .col-md-7 { clear: left; } @media screen and (min-width: 992px) { article.portrait__single .block-chiffres .col-md-7 + .col-md-5 { float: right; padding-right: 30px; padding-left: 60px; } } @media screen and (min-width: 1200px) { article.portrait__single .block-chiffres .col-md-7 + .col-md-5 { padding-left: 100px; } } @media screen and (max-width: 767px) { article.portrait__single .block-quote { margin-top: 0px !important; } } article.portrait__single .block-quote .container { max-width: 550px; margin: 0 auto; } @media screen and (min-width: 992px) { article.portrait__single .block-quote .container { max-width: 100%; } } article.portrait__single .block-quote blockquote { position: relative; z-index: 2; text-align: center; padding: 0px 60px; margin-bottom: 0px; } @media screen and (min-width: 768px) { article.portrait__single .block-quote blockquote { padding: 0px; } } @media screen and (min-width: 992px) { article.portrait__single .block-quote blockquote { text-align: right; float: left; padding-right: 20px; width: 50%; } } article.portrait__single .block-quote .visuel-container { display: none; } @media screen and (min-width: 768px) { article.portrait__single .block-quote .visuel-container { display: block; margin: 0 auto; margin-top: -50px; width: 75%; } } @media screen and (min-width: 992px) { article.portrait__single .block-quote .visuel-container { margin-left: 55%; margin-top: 0px; width: auto; } } article.portrait__single div[class^='block-visuel'] .visuel-container { background: #f6f6f6; } article.portrait__single div[class^='block-visuel'].block-visuel-extend .inner { margin-top: 60px; } @media screen and (min-width: 768px) { article.portrait__single div[class^='block-visuel'].block-visuel-extend .inner { margin-top: -60px; } } @media screen and (min-width: 1600px) { article.portrait__single div[class^='block-visuel'].block-visuel-extend .inner { margin-top: -80px; } } article.portrait__single div[class^='block-visuel'].block-visuel-extend .inner blockquote { max-width: 90%; } @media screen and (min-width: 992px) { article.portrait__single div[class^='block-visuel'].block-visuel-extend .inner blockquote { max-width: 50%; } } @media screen and (min-width: 1200px) { article.portrait__single div[class^='block-visuel'].block-visuel-extend .inner blockquote { max-width: 65%; } } article.portrait__single div[class^='block-visuel'].block-visuel { text-align: center; } article.portrait__single div[class^='block-visuel'].block-visuel .visuel-container, article.portrait__single div[class^='block-visuel'].block-visuel blockquote { margin-bottom: 40px; } @media screen and (min-width: 1200px) { article.portrait__single div[class^='block-visuel'].block-visuel .visuel-container, article.portrait__single div[class^='block-visuel'].block-visuel blockquote { margin-bottom: 80px; } } article.portrait__single div[class^='block-visuel'].block-visuel blockquote { max-width: 550px; margin-left: auto; margin-right: auto; } article.portrait__single div[class^='block-visuel'].block-visuel p { text-align: left; max-width: 440px; margin: 0 auto; } article.portrait__single .block-tv.playVideo .video-container { height: calc(100vh - 55px - 30px); } article.portrait__single .block-tv.playVideo .video-container .play { pointer-events: none; opacity: 0; } article.portrait__single .block-tv.playVideo .video-container .video-embed { opacity: 1 !important; } article.portrait__single .block-tv.playVideo .video-container .close-video { -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); -webkit-transform: translateY(0%); transform: translateY(0%); } article.portrait__single .block-tv .video-container { position: relative; margin-bottom: 60px; overflow: hidden; background: #1d272f; transition-property: height 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s; transition-duration: 0.3s; transition-timing-function: ease-out; transition-delay: 0s; } @media screen and (min-width: 768px) { article.portrait__single .block-tv .video-container { height: 300px; } } @media screen and (min-width: 992px) { article.portrait__single .block-tv .video-container { height: 70vh; margin-bottom: 120px; } } article.portrait__single .block-tv .video-container:hover .play svg { -moz-transform: translate(-50%, -50%) scale(0.8); -o-transform: translate(-50%, -50%) scale(0.8); -ms-transform: translate(-50%, -50%) scale(0.8); -webkit-transform: translate(-50%, -50%) scale(0.8); transform: translate(-50%, -50%) scale(0.8); } @media screen and (min-width: 768px) { article.portrait__single .block-tv .video-container:hover .video-embed { opacity: 0.3; } } article.portrait__single .block-tv .video-container .close-video { display: none; position: absolute; top: 0; right: 0; z-index: 20; background: #0082C3; width: 60px; height: 60px; transition-property: transform 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s; transition-duration: 0.3s; transition-timing-function: ease-out; transition-delay: 0s; -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); } @media screen and (min-width: 768px) { article.portrait__single .block-tv .video-container .close-video { display: block; } } article.portrait__single .block-tv .video-container .close-video .icon { position: absolute; top: 50%; left: 50%; width: 15px; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } article.portrait__single .block-tv .video-container .play { display: none; z-index: 10; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s; } @media screen and (min-width: 768px) { article.portrait__single .block-tv .video-container .play { display: block; } } article.portrait__single .block-tv .video-container .play svg { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; moz-transform-origin: center center; -o-transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s; } article.portrait__single .block-tv .video-container .video-embed { padding-bottom: 56.25%; width: 100%; } @media screen and (min-width: 768px) { article.portrait__single .block-tv .video-container .video-embed { position: absolute; top: 50%; left: 0; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; transition: opacity 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s; } } article.portrait__single .block-tv .video-container .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } article.portrait__single .block-tv h2 { text-align: center; margin: 0 auto 60px; } @media screen and (min-width: 768px) { article.portrait__single .block-tv h2 { max-width: 50%; } } article.portrait__single .block-favorite > .wrapper { background: #e6f3fc; padding: 60px 0px; text-align: center; } @media screen and (min-width: 768px) { article.portrait__single .block-favorite > .wrapper { padding: 80px 0px; } } @media screen and (min-width: 992px) { article.portrait__single .block-favorite > .wrapper { padding: 150px 0px; text-align: left; } } article.portrait__single .block-favorite > .wrapper .wrapper { position: relative; } @media screen and (min-width: 992px) { article.portrait__single .block-favorite > .wrapper .wrapper { padding-right: 55%; } } article.portrait__single .block-favorite .visuel-container { position: relative; margin: 0px auto 40px; width: 180px; overflow: hidden; background: white; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; box-shadow: 0px 0px 60px rgba(98, 124, 180, 0.3); padding-bottom: 180px; } @media screen and (min-width: 768px) { article.portrait__single .block-favorite .visuel-container { width: 300px; padding-bottom: 300px; } } @media screen and (min-width: 992px) { article.portrait__single .block-favorite .visuel-container { position: absolute; top: 50%; right: 0; width: 45%; margin: 0px; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); padding-bottom: 45%; } } article.portrait__single .block-favorite .visuel-container img { position: absolute; top: 50%; left: 50%; max-width: 80%; max-height: 80%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } article.portrait__single .block-favorite .btn { background: #0082C3; color: white; } .page-template-page-parcours .main { text-align: center; color: white; background: #0e1113; } .page-template-page-parcours .main .page__background { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; } .page-template-page-parcours .main p { max-width: 400px; margin-left: auto; margin-right: auto; font-size: 1.6rem; line-height: 1.4em; } @media screen and (min-width: 768px) { .page-template-page-parcours .main p { font-size: 1.8rem; } } .page-template-page-parcours .main .intro { position: relative; z-index: 1; } .page-template-page-parcours .main .intro h1 { max-width: 750px; margin: 0 auto 0px; position: relative; z-index: 1; width: 75%; } .page-template-page-parcours .main .intro h1 img { max-width: 100%; width: 100%; } .page-template-page-parcours .main .intro .arrow { display: inline-block; max-width: 20px; margin-bottom: 80px; margin-top: -40px; -webkit-animation: arrowBounce 1200ms infinite alternate; -moz-animation: arrowBounce 1200ms infinite alternate; -o-animation: arrowBounce 1200ms infinite alternate; animation: arrowBounce 1200ms infinite alternate; } .page-template-page-parcours .main .intro p { position: relative; z-index: 2; } .page-template-page-parcours .main .intro .inner { position: relative; z-index: 10; padding: 20vh 40px 10vh; } .page-template-page-parcours .main .list__parcours { position: relative; z-index: 1; padding: 0 40px; } @media screen and (min-width: 768px) { .page-template-page-parcours .main .list__parcours { padding: 0px; } } .page-template-page-parcours .main .parcours__item { position: relative; margin-bottom: 120px; z-index: 10; } @media screen and (min-width: 768px) { .page-template-page-parcours .main .parcours__item { margin-bottom: 160px; } } .page-template-page-parcours .main .parcours__item .btn__close { position: absolute; top: 0px; right: 0px; background: white; width: 40px; height: 40px; border-radius: 40px; color: #2a2a2a; line-height: 40px; text-align: center; font-weight: 700; visibility: hidden; opacity: 0; z-index: 10; transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); } @media screen and (min-width: 768px) { .page-template-page-parcours .main .parcours__item .btn__close { top: 40px; right: 40px; } } .page-template-page-parcours .main .parcours__item .btn__close span { display: inline-block; font-size: 2.8rem; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .page-template-page-parcours .main .parcours__item .parcours__video { margin-left: auto; margin-right: auto; width: 100%; max-width: 900px; position: relative; overflow: hidden; z-index: 1; transition: max-width 600ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; cursor: pointer; } @media screen and (max-width: 767px) { .page-template-page-parcours .main .parcours__item .parcours__video { -moz-transform: translate(0%, 0%) !important; -o-transform: translate(0%, 0%) !important; -ms-transform: translate(0%, 0%) !important; -webkit-transform: translate(0%, 0%) !important; transform: translate(0%, 0%) !important; } } .page-template-page-parcours .main .parcours__item .parcours__video:before { content: ''; display: block; padding-top: 40%; } .page-template-page-parcours .main .parcours__item .parcours__video:hover .poster { -moz-transform: translate(-50%, -50%) scale(1.05); -o-transform: translate(-50%, -50%) scale(1.05); -ms-transform: translate(-50%, -50%) scale(1.05); -webkit-transform: translate(-50%, -50%) scale(1.05); transform: translate(-50%, -50%) scale(1.05); } .page-template-page-parcours .main .parcours__item .parcours__video .poster { position: absolute; top: 50%; left: 50%; width: 100%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; z-index: 2; } .page-template-page-parcours .main .parcours__item .parcours__video img { display: block; width: 100%; height: auto; } @media screen and (max-width: 767px) { .page-template-page-parcours .main .parcours__item .parcours__video img { -moz-transform: translate(0%, 0%) !important; -o-transform: translate(0%, 0%) !important; -ms-transform: translate(0%, 0%) !important; -webkit-transform: translate(0%, 0%) !important; transform: translate(0%, 0%) !important; } } .page-template-page-parcours .main .parcours__item .parcours__video .video__container { position: absolute; top: 50%; left: 50%; width: 100%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .page-template-page-parcours .main .parcours__item .parcours__video .video__container:before { content: ''; display: block; padding-top: 56.7%; } .page-template-page-parcours .main .parcours__item .parcours__video .video__container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .page-template-page-parcours .main .parcours__item .parcours__infos { position: relative; margin-top: -60px; z-index: 10; } @media screen and (max-width: 767px) { .page-template-page-parcours .main .parcours__item .parcours__infos { -moz-transform: translate(0%, 0%) !important; -o-transform: translate(0%, 0%) !important; -ms-transform: translate(0%, 0%) !important; -webkit-transform: translate(0%, 0%) !important; transform: translate(0%, 0%) !important; } } .page-template-page-parcours .main .parcours__item .parcours__infos .subtitle { color: #0082C3; font-size: 2.2rem; font-family: "bebas-neue"; position: absolute; bottom: 100%; left: 50%; -moz-transform: translate(-50%, -100%); -o-transform: translate(-50%, -100%); -ms-transform: translate(-50%, -100%); -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); margin-bottom: 10px; opacity: 0; transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; } .page-template-page-parcours .main .parcours__item .parcours__infos .name { font-size: 5rem; line-height: 0.8; letter-spacing: 0.02em; font-family: "bebas-neue"; margin: 0px; transition: font-size 600ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; } @media screen and (min-width: 768px) { .page-template-page-parcours .main .parcours__item .parcours__infos .name { font-size: 8rem; } } .page-template-page-parcours .main .parcours__item .parcours__infos .job { display: block; font-family: "Libre Baskerville", serif; font-size: 1.7rem; font-style: italic; margin-top: 20px; } .page-template-page-parcours .main .parcours__item .parcours__infos a { background: #0082C3; color: white !important; position: absolute; top: 100%; left: 50%; -moz-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); margin-top: 30px; transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; } .page-template-page-parcours .main .parcours__item .parcours__infos a span { transition: all 400ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; } .page-template-page-parcours .main .parcours__item .parcours__infos a span.over { position: absolute; top: 50%; left: 50%; opacity: 0; -moz-transform: translate(-50%, 40px); -o-transform: translate(-50%, 40px); -ms-transform: translate(-50%, 40px); -webkit-transform: translate(-50%, 40px); transform: translate(-50%, 40px); } .page-template-page-parcours .main .parcours__item .parcours__infos a:hover { background: #004876; } .page-template-page-parcours .main .parcours__item .parcours__infos a:hover span { opacity: 0; -moz-transform: translate(0%, -40px); -o-transform: translate(0%, -40px); -ms-transform: translate(0%, -40px); -webkit-transform: translate(0%, -40px); transform: translate(0%, -40px); } .page-template-page-parcours .main .parcours__item .parcours__infos a:hover span.over { opacity: 1; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .page-template-page-parcours .main .parcours__item .parcours__content { margin-top: 90px; height: 0px; overflow: hidden; transition: height 1200ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; } .page-template-page-parcours .main .parcours__item .parcours__content p { opacity: 0; -moz-transform: translate(0%, 30px); -o-transform: translate(0%, 30px); -ms-transform: translate(0%, 30px); -webkit-transform: translate(0%, 30px); transform: translate(0%, 30px); transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; } .page-template-page-parcours .main .parcours__item.open .btn__close { visibility: visible; opacity: 1; -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 400ms; } .page-template-page-parcours .main .parcours__item.open .parcours__video { max-width: 100%; } .page-template-page-parcours .main .parcours__item.open .parcours__video .poster { opacity: 0; } .page-template-page-parcours .main .parcours__item.open .parcours__infos .subtitle { opacity: 1; -moz-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); transition: all 1200ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; } .page-template-page-parcours .main .parcours__item.open .parcours__infos .name { font-size: 8rem; } @media screen and (min-width: 768px) { .page-template-page-parcours .main .parcours__item.open .parcours__infos .name { font-size: 12rem; } } .page-template-page-parcours .main .parcours__item.open .parcours__infos a { visibility: hidden; opacity: 0; -moz-transform: translate(-50%, 100%); -o-transform: translate(-50%, 100%); -ms-transform: translate(-50%, 100%); -webkit-transform: translate(-50%, 100%); transform: translate(-50%, 100%); } .page-template-page-parcours .main .parcours__item.open .parcours__content { overflow: visible; transition: height 600ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; } .page-template-page-parcours .main .parcours__item.open .parcours__content p { opacity: 1; -moz-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 600ms; } .page-template-page-parcours .main .forms { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } .page-template-page-parcours .main .forms .form { float: left; clear: left; } .page-template-page-parcours .main .forms .form svg path { display: none; fill: none; stroke: #1f252b; stroke-width: 18px; } @-webkit-keyframes arrowBounce { 0% { -moz-transform: translate(0px, -10px); -o-transform: translate(0px, -10px); -ms-transform: translate(0px, -10px); -webkit-transform: translate(0px, -10px); transform: translate(0px, -10px); } 100% { -moz-transform: translate(0px, 10px); -o-transform: translate(0px, 10px); -ms-transform: translate(0px, 10px); -webkit-transform: translate(0px, 10px); transform: translate(0px, 10px); } } @-moz-keyframes arrowBounce { 0% { -moz-transform: translate(0px, -10px); -o-transform: translate(0px, -10px); -ms-transform: translate(0px, -10px); -webkit-transform: translate(0px, -10px); transform: translate(0px, -10px); } 100% { -moz-transform: translate(0px, 10px); -o-transform: translate(0px, 10px); -ms-transform: translate(0px, 10px); -webkit-transform: translate(0px, 10px); transform: translate(0px, 10px); } } @-o-keyframes arrowBounce { 0% { -moz-transform: translate(0px, -10px); -o-transform: translate(0px, -10px); -ms-transform: translate(0px, -10px); -webkit-transform: translate(0px, -10px); transform: translate(0px, -10px); } 100% { -moz-transform: translate(0px, 10px); -o-transform: translate(0px, 10px); -ms-transform: translate(0px, 10px); -webkit-transform: translate(0px, 10px); transform: translate(0px, 10px); } } @keyframes arrowBounce { 0% { -moz-transform: translate(0px, -10px); -o-transform: translate(0px, -10px); -ms-transform: translate(0px, -10px); -webkit-transform: translate(0px, -10px); transform: translate(0px, -10px); } 100% { -moz-transform: translate(0px, 10px); -o-transform: translate(0px, 10px); -ms-transform: translate(0px, 10px); -webkit-transform: translate(0px, 10px); transform: translate(0px, 10px); } } #actus_wall .scrollpane > .inner { background: #eeeeee; background: url("../img/actus/bg.jpg") no-repeat center top #eeeeee; background-size: 800px auto; padding: 10vh 40px; text-align: center; } @media screen and (min-width: 768px) { #actus_wall .scrollpane > .inner { background-size: 100% auto; padding: 15vh 40px; } } #actus_wall h1 { color: #0082C3; font-size: 6rem; line-height: 0.9; font-weight: 700; margin-bottom: 80px; } @media screen and (min-width: 768px) { #actus_wall h1 { font-size: 10rem; margin-bottom: 15vh; } } #actus_wall h1 span { display: block; font-size: 4rem; font-weight: 300; } #actus_wall .actus__wall { max-width: 1500px; margin: 0 auto; } #actus_wall .actus__wall .row { margin-left: -30px; margin-right: -30px; } #actus_wall .actus__wall .row > * { padding: 0 30px; } #actus_wall article.wall__post { position: relative; padding-top: 30px; text-align: left; min-width: 280px; margin: 0 auto 30px; } #actus_wall article.wall__post .visuel-container { background: #2a2a2a; position: absolute; top: 30px; left: 0; bottom: 0px; width: 100%; z-index: 0; } #actus_wall article.wall__post .visuel-container:before { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 70%; z-index: 1; background: -moz-linear-gradient(bottom, #2a2a2a 30%, transparent 100%); /* FF3.6+ */ background: -webkit-linear-gradient(bottom, #2a2a2a 30%, transparent 100%); /* Chrome10+,Safari5.1+ */ background: -ms-linear-gradient(bottom, #2a2a2a 30%, transparent 100%); /* IE10+ */ background: linear, to bottom, #2a2a2a 30%, transparent 100%; /* W3C */ } #actus_wall article.wall__post .visuel-container .visuel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; } #actus_wall article.wall__post .inner { background: white; padding: 25px 30px; padding-top: 50px; position: relative; pointer-events: none; } #actus_wall article.wall__post .avatar { width: 60px; height: 60px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden; position: absolute; top: 0; left: 50%; background: white; transform: translate(-50%, -50%); } #actus_wall article.wall__post .author { display: block; font-size: 1.6rem; font-weight: bold; margin-bottom: 20px; text-align: center; } #actus_wall article.wall__post .post-content { font-size: 1.4rem; line-height: 1.2; color: #6b6b6b; pointer-events: all; } #actus_wall article.wall__post .post-content a { color: #0082C3; font-weight: 700; } #actus_wall article.wall__post .post-content a:hover { text-decoration: underline; } #actus_wall article.wall__post .post-infos { list-style-type: none; margin: 0px; padding: 0; margin-top: 10px; } #actus_wall article.wall__post .post-infos > * { display: inline-block; } #actus_wall article.wall__post .post-infos > * + * { margin-left: 5px; } #actus_wall article.wall__post .post-infos > * > * { display: inline-block; vertical-align: middle; } #actus_wall article.wall__post .post-infos .icon > svg { display: block; } #actus_wall article.wall__post .post-infos .icon > svg > * { fill: #b1b1b1; } #actus_wall article.wall__post .post-infos .count { font-size: 1rem; font-weight: bold; color: #b1b1b1; } #actus_wall article.wall__post .post-link { display: block; background: #2a2a2a; color: white; text-align: center; padding: 8px 20px; font-weight: bold; position: relative; z-index: 1; } #actus_wall article.wall__post .post-link > * { display: inline-block; vertical-align: middle; } #actus_wall article.wall__post .post-link .icon { margin-left: 2px; } #actus_wall article.wall__post .post-link .icon svg { height: 12px; width: auto; display: block; position: relative; top: -1px; } #actus_wall article.wall__post .post-link .icon svg > * { fill: white; } #actus_wall article.wall__post.with-image .author { text-align: left; margin-bottom: 0px; } #actus_wall article.wall__post.with-image .inner { background: transparent; padding-top: 250px; color: white; } #actus_wall article.wall__post.with-image .post-content { color: white; } #actus_wall article.wall__post.with-image .post-content a { color: white; } #actus_wall article.wall__post.with-image .post-infos .icon > svg > * { fill: white; } #actus_wall article.wall__post.with-image .post-infos .count { color: white; } #actus_wall article.wall__post.fb .post-link { background: #3b5998; } #actus_wall article.wall__post.fb .post-content a { color: #3b5998; } #actus_wall article.wall__post.tw .post-link { background: #1da1f2; } #actus_wall article.wall__post.tw .post-content a { color: #1da1f2; } #actus_wall article.wall__post.linkedin .post-content a { color: #0e87b5; } #actus_wall article.wall__post.linkedin .post-link { background: #0e87b5; } #actus_wall article.wall__post.insta .post-link { background: #2b3134; } #actus_wall article.wall__post.insta .post-link svg { height: 16px; top: -1px; } #actus_wall article.wall__post.cpt_socialwall .post-link { background: #0082C3; } #actus_wall article.wall__post.youtube .visuel-container { display: block; position: relative; padding-top: 56.7%; top: 0px; } #actus_wall article.wall__post.youtube .visuel-container:before { display: none; } #actus_wall article.wall__post.youtube .inner { padding-top: 40px; } #actus_wall article.wall__post.youtube .post-link { background: #de3434; } #actus_wall article.wall__post.youtube .post-link svg { height: 20px; top: -1px; } #actus_wall article.wall__post.youtube .post-content a { color: #de3434; } #actus_wall .paginate { margin-top: 40px; position: relative; z-index: 100; } #actus_wall .paginate a, #actus_wall .paginate span { line-height: 30px; padding: 0 10px; background: #0082C3; display: inline-block; vertical-align: middle; color: white; font-weight: bold; border-radius: 2px; overflow: hidden; cursor: pointer; } #actus_wall .paginate span { background: white; color: #000; cursor: default; } .les-ecoles-partenaires .page-content { background: #f6f6f6; } .les-ecoles-partenaires .school__intro { padding: 60px 40px; background: none; padding-bottom: 0px !important; } @media screen and (min-width: 768px) { .les-ecoles-partenaires .school__intro { padding: 80px 6vw; } } @media screen and (min-width: 992px) { .les-ecoles-partenaires .school__intro { padding: 10vh 6vw; } } .les-ecoles-partenaires .school__intro h2 { color: #0082C3; } @media screen and (min-width: 768px) { .les-ecoles-partenaires .school__intro h2 { float: left; } } .les-ecoles-partenaires .school__intro p { line-height: 1.4 !important; } @media screen and (min-width: 768px) { .les-ecoles-partenaires .school__intro p { margin-left: 50% !important; } } .les-ecoles-partenaires .filter-types, .les-ecoles-partenaires .filter-subtypes { padding: 0px 40px 0px; border-bottom: 1px solid #e1e1e1; text-align: left; margin-top: 40px; margin-bottom: 40px; } @media screen and (min-width: 768px) { .les-ecoles-partenaires .filter-types, .les-ecoles-partenaires .filter-subtypes { padding: 0px 6vw 0px; margin-top: 60px; margin-bottom: 60px; } } .les-ecoles-partenaires .filter-types li, .les-ecoles-partenaires .filter-subtypes li { display: inline-block; font-size: 1.6rem; margin-right: 20px; } @media screen and (min-width: 768px) { .les-ecoles-partenaires .filter-types li, .les-ecoles-partenaires .filter-subtypes li { font-size: 2rem; margin-right: 40px; } } @media screen and (min-width: 1200px) { .les-ecoles-partenaires .filter-types li, .les-ecoles-partenaires .filter-subtypes li { font-size: 3rem; margin-right: 60px; } } .les-ecoles-partenaires .filter-types li.active a, .les-ecoles-partenaires .filter-subtypes li.active a { opacity: 1; } .les-ecoles-partenaires .filter-types li.active a:before, .les-ecoles-partenaires .filter-subtypes li.active a:before { -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } .les-ecoles-partenaires .filter-types li a, .les-ecoles-partenaires .filter-subtypes li a { display: inline-block; position: relative; color: inherit; padding-bottom: 10px; opacity: 0.3; transition: opacity 250ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; } .les-ecoles-partenaires .filter-types li a:hover, .les-ecoles-partenaires .filter-subtypes li a:hover { opacity: 1; } .les-ecoles-partenaires .filter-types li a:before, .les-ecoles-partenaires .filter-subtypes li a:before { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #0082C3; -moz-transform: scaleY(0); -o-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); transition: transform 250ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; } .les-ecoles-partenaires .filter-subtypes { margin: 0px; padding: 0px; border: none; margin-bottom: 40px; opacity: 0; transition: opacity 600ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; } @media screen and (min-width: 768px) { .les-ecoles-partenaires .filter-subtypes { margin-bottom: 60px; } } .les-ecoles-partenaires .filter-subtypes li { font-size: 1.2rem; font-weight: 700; margin-right: 15px; text-transform: uppercase; } @media screen and (min-width: 768px) { .les-ecoles-partenaires .filter-subtypes li { font-size: 1.4rem; margin-right: 30px; } } .les-ecoles-partenaires .filter-subtypes li a { opacity: 1; padding-bottom: 5px; } .les-ecoles-partenaires .filter-subtypes li a:before { height: 2px; } .les-ecoles-partenaires .block-schools { background: none !important; height: 0px; overflow: hidden; visibility: hidden; padding: 0px !important; } .les-ecoles-partenaires .block-schools.active { visibility: visible; height: auto; padding: 0px 40px 40px !important; } @media screen and (min-width: 768px) { .les-ecoles-partenaires .block-schools.active { padding: 0px 6vw 60px !important; } } .les-ecoles-partenaires .block-schools.active .list-schools { -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } .les-ecoles-partenaires .block-schools.active .filter-subtypes { opacity: 1; } .les-ecoles-partenaires .list-schools { margin: 0px -10px; padding: 0px; list-style-type: none; -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); transition: transform 600ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; } .les-ecoles-partenaires .list-schools > * { padding: 0 10px; margin-bottom: 20px; } @media screen and (min-width: 1440px) { .les-ecoles-partenaires .list-schools > * { width: 25%; } } .les-ecoles-partenaires .school__item { background: white; max-width: 400px; margin: 0 auto; } .les-ecoles-partenaires .school__item .school__logo { display: block; padding-bottom: 80%; position: relative; } .les-ecoles-partenaires .school__item .school__logo img { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 50%; max-height: 50%; width: auto; height: auto; } .les-ecoles-partenaires .school__item .scool__ambassadeur { border-top: 1px solid #eaeaea; padding: 20px; position: relative; } .les-ecoles-partenaires .school__item .scool__ambassadeur .subtitle { display: block; text-transform: uppercase; font-weight: 700; font-size: 1rem; color: #bcbcbc; margin-bottom: 10px; white-space: nowrap; } .les-ecoles-partenaires .school__item .scool__ambassadeur .swiper-buttons { position: absolute; top: 18px; right: 20px; width: auto; white-space: nowrap; } .les-ecoles-partenaires .school__item .scool__ambassadeur .swiper-buttons > * { display: inline-block; vertical-align: top; width: 12px; height: 12px; background-size: contain; position: relative; top: 0; left: 0; right: 0; margin: 0px; } .les-ecoles-partenaires .school__item .scool__ambassadeur .swiper-buttons > * + * { margin-left: 0px; } .les-ecoles-partenaires .school__item .scool__ambassadeur .ambassadeur { padding-left: 70px; position: relative; min-height: 50px; display: flex; align-items: center; justify-content: flex-start; } .les-ecoles-partenaires .school__item .scool__ambassadeur .ambassadeur .ambassadeur__portrait { position: absolute; top: 0; left: 0; width: 50px; height: 50px; border-radius: 50px; background-color: #f6f6f6; background-image: url("../img/students/ambasssadeur_default.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; } .les-ecoles-partenaires .school__item .scool__ambassadeur .ambassadeur .ambassadeur__desc { font-size: 1.3rem; width: 100%; } .les-ecoles-partenaires .school__item .scool__ambassadeur .ambassadeur .ambassadeur__desc .ambassadeur__name { display: block; color: #0082C3; overflow: hidden; font-weight: 700; text-transform: uppercase; white-space: nowrap; max-width: 100%; text-overflow: ellipsis; } .les-ecoles-partenaires .school__item .scool__ambassadeur .ambassadeur .ambassadeur__desc a { display: block; overflow: hidden; white-space: nowrap; max-width: 100%; text-overflow: ellipsis; } .les-ecoles-partenaires .school__item .scool__ambassadeur .ambassadeur .ambassadeur__desc a:hover { text-decoration: underline; } .btn{ border-radius: 5px; border: none; text-transform: uppercase; position: relative; color: #fffc00; transition: all 0.3s ease 0s; font-family:Raleway-Bold; font-size:4.5vh } .btn-footer{ border-radius: 5px; border: none; text-transform: uppercase; position: relative; color: #fffc00; transition: all 0.3s ease 0s; font-family:Raleway-Bold; font-size:3.5vh; padding:5px } .btn-banner-right{ border-radius: 5px; border: none; text-transform: uppercase; position: relative; color: #fffc00; transition: all 0.3s ease 0s; font-family:Raleway-Bold; font-size:3.8vh; padding:5px } .btn:hover{ color: #fff; } .btn:before{ content: ""; width: 0; height: 0; position: absolute; bottom: 0; right: 0; box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); transition: all 0.3s ease 0s; } .btn-footer:hover{ color: #fff; } .btn-footer:before{ content: ""; width: 0; height: 0; position: absolute; bottom: 0; right: 0; box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); transition: all 0.3s ease 0s; } .btn-banner-right:hover{ color: #fff; } .btn-banner-right:before{ content: ""; width: 0; height: 0; position: absolute; bottom: 0; right: 0; box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); transition: all 0.3s ease 0s; } .btn:hover:before{ width: 25px; height: 25px; } .btn-footer:hover:before{ width: 25px; height: 25px; } .btn-banner-right:hover:before{ width: 25px; height: 25px; } .btn-footer.btn-sm:hover:before{ width: 17px; height: 17px; } .btn.btn-sm:hover:before{ width: 17px; height: 17px; } .btn.btn-xs:hover:before{ width: 12px; height: 12px; } .btn.blue{ background: #1069bd; } .btn.blue:before{ background: linear-gradient(315deg, #f3f3f3 45%, #5bc2d5 50%, #5bc2d5 56%, #fff 80%); } .btn-footer.blue{ background: #1069bd; } .btn-footer.blue:before{ background: linear-gradient(315deg, #07253d 45%, #5bc2d5 50%, #5bc2d5 56%, #fff 80%); } .btn-footer.gray{ background: #565656; } .btn-footer.gray:before{ background: linear-gradient(315deg, #181f27 45%, #181f27 50%, #181f27 56%, #181f27 80%); } .btn-banner-right.blue{ background: #1069bd; } .btn-banner-right:before{ background: linear-gradient(315deg, #96a8ff 45%, #5bc2d5 50%, #5bc2d5 56%, #fff 80%); } .btn.red{ background: #ff3939; } .btn.red:before{ background: linear-gradient(315deg, #f3f3f3 45%, #ff3939 50%, #ff3939 56%, #fff 80%); } .btn.green{ background: #35c568; } .btn.green:before{ background: linear-gradient(315deg, #f3f3f3 45%, #35c568 50%, #35c568 56%, #fff 80%); } .btn.orange{ background: #fffc00; } .btn.orange:before{ background: linear-gradient(315deg, #181f27 45%, #5bc2d5 50%, #5bc2d5 56%, #fff 80%); } .btn.orange1{ background: #fffc00; } .btn.orange1:before{ background: linear-gradient(315deg, #fff 45%, #5bc2d5 50%, #5bc2d5 56%, #fff 80%); } @media screen and (max-width: 767px){ .btn{ margin-bottom: 15px; } /*# sourceMappingURL=global.css.map */