/*libs*/ body { margin: 0; moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } ul { list-style: circle; } ul ul, ol ul { list-style: disc inside; margin-bottom: 0; overflow: hidden; } ol { list-style: decimal; } ol ol, ul ol { list-style: lower-roman inside; margin-bottom: 0; overflow: hidden; } a { background-color: transparent; } a:active, a:hover, a:focus { outline: 0; } /***************************************** Inline-grid system import ******************************************/ * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } /** ROW *****************************************************/ /** WARNING : the gutter must be the same as the column /** @gutter : column spacing (px) /*************************************************************/ /** COLUMN ***************************************************/ /** @int : desired columns, like bootstrap (int). /** @gutter : column spacing (px) /*************************************************************/ /** RESPONSIVE COLUMN *********************************************/ /** @int : desired columns, like bootstrap (int). /** @responsive : screen width where the column will be 100% (px) /** @gutter : column spacing (px) /******************************************************************/ /** BECOME COL************************************************/ /** Use only if a col is already init /** @int : desired columns, like bootstrap (int). /** @responsive : breakpoint (px) /*************************************************************/ /***************************************** Animations import ******************************************/ @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); } 40% { -moz-transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); } } @-o-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); } 40% { -o-transform: translateY(-30px); } 60% { -o-transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(0.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(0.9); } 100% { -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(0.3); } 50% { opacity: 1; -o-transform: scale(1.05); } 70% { -o-transform: scale(0.9); } 100% { -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { opacity: 1; -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { opacity: 1; -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(30px); } 80% { -o-transform: translateX(-10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { opacity: 1; -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { opacity: 1; -o-transform: translateX(-30px); } 80% { -o-transform: translateX(10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); } 60% { opacity: 1; -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: translateY(2000px); } 60% { opacity: 1; -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -ms-transform: translateY(-20px); } 100% { opacity: 1; -ms-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -o-transform: translateY(-2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -o-transform: translateX(-2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -o-transform: translateY(2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(20px); } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -moz-animation-name: fadeOutDownBig; -o-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-20px); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -moz-animation-name: fadeOutLeftBig; -o-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(20px); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -moz-animation-name: fadeOutRightBig; -o-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-20px); } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -moz-animation-name: fadeOutUpBig; -o-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out; } 40% { -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out; } 50% { -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in; } 80% { -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-animation-timing-function: ease-in; } 100% { -moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -o-transform: perspective(400px) rotateY(0); -o-animation-timing-function: ease-out; } 40% { -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-animation-timing-function: ease-out; } 50% { -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in; } 80% { -o-transform: perspective(400px) rotateY(360deg) scale(0.95); -o-animation-timing-function: ease-in; } 100% { -o-transform: perspective(400px) scale(1); -o-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } .flip { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible !important; -webkit-animation-name: flip; -moz-backface-visibility: visible !important; -moz-animation-name: flip; -o-backface-visibility: visible !important; -o-animation-name: flip; backface-visibility: visible !important; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateY(-10deg); } 70% { -moz-transform: perspective(400px) rotateY(10deg); } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateY(-10deg); } 70% { -o-transform: perspective(400px) rotateY(10deg); } 100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInY; -moz-backface-visibility: visible !important; -moz-animation-name: flipInY; -o-backface-visibility: visible !important; -o-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-animation-name: flipOutX; -moz-backface-visibility: visible !important; -o-animation-name: flipOutX; -o-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-moz-keyframes flipOutY { 0% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-o-keyframes flipOutY { 0% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipOutY; -moz-backface-visibility: visible !important; -moz-animation-name: flipOutY; -o-backface-visibility: visible !important; -o-animation-name: flipOutY; backface-visibility: visible !important; animation-name: flipOutY; } /*****************************************/ /** Mixins import ******************************************/ /*variable*/ /*** Fichier destiné aux styles des titres ***/ /*color*/ /* autre (transitions, hover etc..) */ /* Header */ /*gestion typo*/ /*!** Fichier destiné à l'import de font d'icones et aux mixins associés ***/ @font-face { font-family: 'icomoon'; src: url('/public/fonts/iconfont//icomoon.eot'); src: url('/public/fonts/iconfont//icomoon.eot?#iefix') format('embedded-opentype'), url('/public/fonts/iconfont//icomoon.woff') format('woff'), url('/public/fonts/iconfont//icomoon.ttf') format('truetype'), url('/public/fonts/iconfont//icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } /*** Fichier destiné à l'import de font et aux mixins associés ***/ @font-face { font-family: 'worksans-bold'; src: url('/public/fonts/worksans-bold.eot'); src: url('/public/fonts/worksans-bold.eot?#iefix') format('embedded-opentype'), url('/public/fonts/worksans-bold.woff') format('woff'), url('/public/fonts/worksans-bold.ttf') format('truetype'), url('/public/fonts/worksans-bold.svg#worksans-bold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'worksans-light'; src: url('/public/fonts/worksans-light.eot'); src: url('/public/fonts/worksans-light.eot?#iefix') format('embedded-opentype'), url('/public/fonts/worksans-light.woff') format('woff'), url('/public/fonts/worksans-light.ttf') format('truetype'), url('/public/fonts/worksans-light.svg#worksans-light') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'worksans-medium'; src: url('/public/fonts/worksans-medium.eot'); src: url('/public/fonts/worksans-medium.eot?#iefix') format('embedded-opentype'), url('/public/fonts/worksans-medium.woff') format('woff'), url('/public/fonts/worksans-medium.ttf') format('truetype'), url('/public/fonts/worksans-medium.svg#worksans-medium') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'worksans-regular'; src: url('/public/fonts/worksans-regular.eot'); src: url('/public/fonts/worksans-regular.eot?#iefix') format('embedded-opentype'), url('/public/fonts/worksans-regular.woff') format('woff'), url('/public/fonts/worksans-regular.ttf') format('truetype'), url('/public/fonts/worksans-regular.svg#worksans-regular') format('svg'); font-weight: normal; font-style: normal; } /* .fontface(@font-path-icomoon, @font-name5); .icomoon(){ font-family : @font-name5; position: absolute; } */ /*** Fichier destiné aux styles des titres ***/ h1, .h1 { font-family: 'worksans-bold'; font-weight: 500; font-size: 47px; font-size: 4.7rem; line-height: 51px; line-height: 5.1rem; margin: 30px 0; text-transform: uppercase; } h2, .h2 { font-family: 'worksans-medium'; font-weight: 300; font-size: 25px; font-size: 2.5rem; line-height: 30px; line-height: 3rem; padding: 30px 0 0; margin: 0 0 30px; } @media (max-width: 992px) { h2, .h2 { font-size: 21px; font-size: 2.1rem; line-height: 25px; line-height: 2.5rem; } } h3, .h3 { font-family: 'worksans-medium'; font-weight: 300; font-size: 22px; font-size: 2.2rem; line-height: 27px; line-height: 2.7rem; padding: 20px 0 0; margin: 0 0 20px; } @media (max-width: 992px) { h3, .h3 { font-size: 18px; font-size: 1.8rem; line-height: 24px; line-height: 2.4rem; } } h4, .h4 { font-family: 'worksans-medium'; font-weight: 300; font-size: 20px; font-size: 2rem; line-height: 24px; line-height: 2.4rem; } @media (max-width: 768px) { h4, .h4 { font-size: 15px; font-size: 1.5rem; line-height: 19px; line-height: 1.9rem; } } h5, .h5 { font-family: 'worksans-medium'; font-weight: 300; font-size: 18px; font-size: 1.8rem; line-height: 22px; line-height: 2.2rem; } @media (max-width: 768px) { h5, .h5 { font-size: 14px; font-size: 1.4rem; line-height: 18px; line-height: 1.8rem; } } h6, .h6 { font-family: 'worksans-medium'; font-weight: 300; font-size: 16px; font-size: 1.6rem; line-height: 20px; line-height: 2rem; } @media (max-width: 768px) { h6, .h6 { font-size: 13px; font-size: 1.3rem; line-height: 17px; line-height: 1.7rem; } } h2, h4 { position: relative; } h2:after, h4:after, h2:before, h4:before { content: ""; position: absolute; background: #282d32; } h2:after, h4:after { width: 80px; height: 1px; bottom: -5px; left: 0; } h2:before, h4:before { width: 30px; height: 3px; bottom: -7px; left: 15px; } .child-of-technology h3, .child-of-technology h4, .child-of-technology h5, .child-of-technology h6, #technology h3, #technology h4, #technology h5, #technology h6 { color: #436faa; } .child-of-about h3, .child-of-about h4, .child-of-about h5, .child-of-about h6, #about h3, #about h4, #about h5, #about h6 { color: #9ab84c; } .cild-of-offer h3, .cild-of-offer h4, .cild-of-offer h5, .cild-of-offer h6, #offer h3, #offer h4, #offer h5, #offer h6 { color: #d2900e; } /*tronc commun*/ /*!** common ***/ #in-progress { height: 520px; padding: 250px 0 0; font-size: 20px; font-size: 2rem; text-align: center; } .overflow-text { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .test-test { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .test-test { width: 750px; } } @media (min-width: 992px) { .test-test { width: 970px; } } @media (min-width: 1200px) { .test-test { width: 1170px; } } .atm-edit-content textarea { background: white !important; color: black !important; line-height: 30px; } .atm-edit p { color: black !important; } /************** COMMUN ********/ html { font-size: 62.5%; line-height: 21px; line-height: 2.1rem; } @media (max-width: 770px) { html { width: 100%; } html body #main, html body #footer { width: 100%; overflow-x: hidden; } html body #main #chiffre-bg, html body #footer #chiffre-bg { overflow-x: hidden; width: 100% !important; } } @media (max-width: 770px) and (max-width: 992px) { html body pre { display: none; } } body { margin: 0; padding-top: 117px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; font-family: sans-serif; font-family: 'worksans-regular'; font-weight: 500; } body.header-resized { padding-top: 81px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } @media (max-width: 992px) { body { padding-top: 61px !important; } } a { background-color: transparent; color: #282d32; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } a:active, a:hover, a:focus { cursor: pointer; outline: 0; color: #4b545d; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } p, ul, ol, li, thead, td, th, input, strong, span { font-size: 17px; font-size: 1.7rem; line-height: 25px; line-height: 2.5rem; letter-spacing: -0.25px; } @media (max-width: 992px) { p, ul, ol, li, thead, td, th, input, strong, span { font-size: 15px; font-size: 1.5rem; line-height: 21px; line-height: 2.1rem; } } ul { margin: 0; padding: 0; } .text ul, .text-media ul, #links ul, #news-detail ul { list-style: none ; padding: 0; } .text ul li, .text-media ul li, #links ul li, #news-detail ul li { position: relative; padding-left: 20px; margin-bottom: 10px; } .text ul li:before, .text-media ul li:before, #links ul li:before, #news-detail ul li:before { content: ""; position: absolute; left: 0; top: 7px; border-style: solid; border-width: 5px 0 5px 8.7px; border-color: transparent transparent transparent #002033; } .child-of-technology .text ul li:before, .child-of-technology .text-media ul li:before, .child-of-technology #links ul li:before, .child-of-technology #news-detail ul li:before, #technology .text ul li:before, #technology .text-media ul li:before, #technology #links ul li:before, #technology #news-detail ul li:before { border-left-color: #436faa; } .child-of-about .text ul li:before, .child-of-about .text-media ul li:before, .child-of-about #links ul li:before, .child-of-about #news-detail ul li:before, #about .text ul li:before, #about .text-media ul li:before, #about #links ul li:before, #about #news-detail ul li:before { border-left-color: #7ba203; } .cild-of-offer .text ul li:before, .cild-of-offer .text-media ul li:before, .cild-of-offer #links ul li:before, .cild-of-offer #news-detail ul li:before, #offer .text ul li:before, #offer .text-media ul li:before, #offer #links ul li:before, #offer #news-detail ul li:before { border-left-color: #d2900e; } .text a, .text-media a, #links a, #news-detail a { font-family: 'worksans-medium'; font-weight: 300; text-decoration: underline; } .text div, .text-media div, #links div, #news-detail div { font-size: 17px; font-size: 1.7rem; line-height: 25px; line-height: 2.5rem; letter-spacing: -0.25px; } @media (max-width: 992px) { .text div, .text-media div, #links div, #news-detail div { font-size: 15px; font-size: 1.5rem; line-height: 21px; line-height: 2.1rem; } } #news-detail > p:not(:nth-last-child(2)) > strong { /* Author */ color: #002033; } p { margin: 0 0 20px; } img { outline: none; border: none; } .t-center { text-align: center; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } #last-news .section-title { margin: 50px 0 20px 0; } .section-title { font-family: 'worksans-bold'; font-weight: 500; font-size: 22px; font-size: 2.2rem; text-transform: uppercase; text-align: center; margin: 30px 0; /* All except on Homepage */ } .section-title span:not(#last-news .section-title > span) { position: relative; display: inline-block; padding: 20px 0; } .section-title span:not(#last-news .section-title > span):before { position: absolute; bottom: -3px; left: 50%; width: 40px; margin-left: -20px; height: 3px; content: ""; background: #0d0d0d; } .section-title span:not(#last-news .section-title > span):after { content: ""; width: 100px; height: 1px; background-color: #0d0d0d; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; } #main { padding-bottom: 30px; } #animarrow { display: none; } .svg-img { margin: 0 auto; padding: 40px; } .svg-bg { position: absolute; top: 20px; } .chapeau-wrapper { overflow: hidden; min-height: 800px; } .simple-chapeau-wrapper { overflow: hidden; min-height: 300px; } body#contact-press .simple-chapeau-wrapper { min-height: 420px; } body#find-distributor .simple-chapeau-wrapper { min-height: 540px; } #chapeau { width: 100%; margin: 0 0 100px; padding: 0 0 10px; background: #002033; position: relative; } #chapeau.with-image-bg { margin: 0 0 310px; } #chapeau:before { border-top-color: #002033 !important; } .child-of-technology #chapeau, #technology #chapeau { background: #002033; } .child-of-technology #chapeau:before, #technology #chapeau:before { border-top-color: #002033 !important; } .child-of-offer #chapeau, #offer #chapeau { background: #edaa28; } .child-of-offer #chapeau:before, #offer #chapeau:before { border-top-color: #edaa28 !important; } .child-of-about #chapeau, #testimonies #chapeau, #testimony #chapeau { background: #9ab84c; } .child-of-about #chapeau:before, #testimonies #chapeau:before, #testimony #chapeau:before { border-top-color: #9ab84c !important; } #chapeau #chapeau-inner { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { #chapeau #chapeau-inner { width: 750px; } } @media (min-width: 992px) { #chapeau #chapeau-inner { width: 970px; } } @media (min-width: 1200px) { #chapeau #chapeau-inner { width: 1170px; } } #chapeau #chapeau-inner #chapeau-row { font-size: 0; } #chapeau #chapeau-inner #chapeau-row:after { display: inline-block; width: 100%; } @media (min-width: 768px) { #chapeau #chapeau-inner #chapeau-row { margin: 0 -0px; } } #chapeau #chapeau-inner #chapeau-left { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 66.66666666666667%; padding: 0 15px; } @media (max-width: 1400px) { #chapeau #chapeau-inner #chapeau-left { width: 54.166666666666664%; } } @media (max-width: 992px) { #chapeau #chapeau-inner #chapeau-left { width: 100%; } } @media (min-width: 992px) { #chapeau #chapeau-inner #chapeau-left { padding-right: 50px; padding-left: 0; } } #chapeau #chapeau-inner #chapeau-right { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 33.333333333333336%; padding: 0 15px; } @media (max-width: 1400px) { #chapeau #chapeau-inner #chapeau-right { width: 45.833333333333336%; } } @media (max-width: 992px) { #chapeau #chapeau-inner #chapeau-right { width: 100%; } } @media (min-width: 992px) { #chapeau #chapeau-inner #chapeau-right { padding: 0; margin: 0; } } @media (max-width: 350px) { #chapeau #chapeau-inner #chapeau-right { margin-left: -15px; } } #chapeau #chapeau-inner #chapeau-right #chiffreslider, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider { padding-top: 30px; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner { position: relative; width: 290px; height: 290px; margin: 0 auto; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner ul, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner ul, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner ul, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner ul { margin: 0; padding: 0; list-style: none; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner .bx-wrapper, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner .bx-wrapper, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner .bx-wrapper, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner .bx-wrapper { z-index: 3; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner .bx-wrapper .bx-viewport, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner .bx-wrapper .bx-viewport, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner .bx-wrapper .bx-viewport, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner .bx-wrapper .bx-viewport { background: transparent; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner .bx-wrapper .bx-viewport ul, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner .bx-wrapper .bx-viewport ul, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner .bx-wrapper .bx-viewport ul, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner .bx-wrapper .bx-viewport ul { margin: 0; padding: 0; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner:before, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner:before, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner:before, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner:before { content: ""; position: absolute; top: 0; left: 0; width: 290px; height: 290px; -webkit-border-radius: 290px; -moz-border-radius: 290px; border-radius: 290px; background: #FFFFFF; -webkit-opacity: 0.51; -moz-opacity: 0.51; opacity: 0.51; filter: alpha(opacity=51); z-index: 2; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner:after, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner:after, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner:after, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner:after { content: ""; position: absolute; top: 15px; left: 15px; width: 260px; height: 260px; -webkit-border-radius: 260px; -moz-border-radius: 260px; border-radius: 260px; background: #FFFFFF; z-index: 2; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner #chiffres-prev, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner #chiffres-prev, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner #chiffres-prev, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner #chiffres-prev, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner #chiffres-next, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner #chiffres-next, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner #chiffres-next, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner #chiffres-next { position: absolute; top: 125px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner #chiffres-prev:hover, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner #chiffres-prev:hover, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner #chiffres-prev:hover, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner #chiffres-prev:hover, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner #chiffres-next:hover, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner #chiffres-next:hover, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner #chiffres-next:hover, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner #chiffres-next:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner #chiffres-prev a:before, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner #chiffres-prev a:before, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner #chiffres-prev a:before, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner #chiffres-prev a:before, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner #chiffres-next a:before, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner #chiffres-next a:before, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner #chiffres-next a:before, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner #chiffres-next a:before { display: block; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner #chiffres-prev, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner #chiffres-prev, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner #chiffres-prev, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner #chiffres-prev { left: -40px; z-index: 10; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner #chiffres-prev a:before, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner #chiffres-prev a:before, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner #chiffres-prev a:before, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner #chiffres-prev a:before { color: #0d0d0d; -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; filter: alpha(opacity=80); font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e90d"; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); font-size: 34px; font-size: 3.4rem; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner #chiffres-next, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner #chiffres-next, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner #chiffres-next, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner #chiffres-next { right: -40px; z-index: 10; } #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreslider-inner #chiffres-next a:before, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreslider-inner #chiffres-next a:before, #chapeau #chapeau-inner #chapeau-right #chiffreslider #chiffreNoslider-inner #chiffres-next a:before, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider #chiffreNoslider-inner #chiffres-next a:before { color: #0d0d0d; -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; filter: alpha(opacity=80); font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e90d"; font-size: 34px; font-size: 3.4rem; } #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider { position: relative; height: 290px; line-height: 290px; padding: 0; text-align: center; z-index: 5; } #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner { font-size: 32px; font-size: 3.2rem; line-height: 28px; line-height: 2.8rem; color: #0e305e; font-family: arial, sans-serif; font-weight: 600; display: inline-block; vertical-align: middle; padding: 20px 40px; } body#values #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner, body#values #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner, body#customers #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner, body#customers #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner, body#who-we-are #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner, body#who-we-are #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner { color: #9ab84c; } body#offer #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner, body#offer #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner, body#offer-advices #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner, body#offer-advices #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner, body#offer-modulation #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner, body#offer-modulation #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner { color: #d2900e; } body#offer-options #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner, body#offer-options #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner { color: #d2900e; } #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner p, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner p { font-size: 30px; font-size: 3rem; font-family: 'worksans-bold'; font-weight: 500; padding: 0 0 15px; margin: 0; text-transform: uppercase; color: #002033; } #technology #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner p, #technology #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner p, .child-of-technology #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner p, .child-of-technology #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner p { color: #0e305e; } #offer #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner p, #offer #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner p, .child-of-offer #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner p, .child-of-offer #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner p { color: #d2900e; } #about #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner p, #about #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner p, .child-of-about #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner p, .child-of-about #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner p { color: #9ab84c; } #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner .chiffreslider-content p, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner .chiffreslider-content p { font-family: 'worksans-regular'; font-weight: 500; text-transform: uppercase; font-size: 15px; font-size: 1.5rem; line-height: 20px; line-height: 2rem; margin: 0; padding: 0px 0px 0px 0px; } #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner .chiffreslider-content p:nth-child(2), #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner .chiffreslider-content p:nth-child(2) { padding: 0; } #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider .chiffreslider-inner .chiffreslider-content p strong, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider .chiffreslider-inner .chiffreslider-content p strong { font-family: 'worksans-regular'; font-weight: 500; } #chapeau #chapeau-inner #chapeau-right #chiffreslider .chiffreslider a.chiffreslider-inner:hover p, #chapeau #chapeau-inner #chapeau-right #chiffreNoslider .chiffreslider a.chiffreslider-inner:hover p { text-decoration: underline; } #chapeau #chapeau-inner #chapeau-title, #chapeau #chapeau-inner #on-news-title { padding: 0 0 12px; font-family: 'worksans-bold'; font-weight: 500; font-size: 37px; font-size: 3.7rem; line-height: 45px; line-height: 4.5rem; text-transform: uppercase; } @media (min-width: 990px) { #chapeau #chapeau-inner #chapeau-title, #chapeau #chapeau-inner #on-news-title { padding: 0 0 10px; } } @media (max-width: 440px) { #chapeau #chapeau-inner #chapeau-title, #chapeau #chapeau-inner #on-news-title { font-size: 25px; font-size: 2.5rem; line-height: 35px; line-height: 3.5rem; } } .child-of-technology #chapeau #chapeau-inner #chapeau-title, .child-of-technology #chapeau #chapeau-inner #on-news-title, #technology #chapeau #chapeau-inner #chapeau-title, #technology #chapeau #chapeau-inner #on-news-title { color: #ffffff; } #chapeau #chapeau-inner #on-news-title { padding: 0; margin-bottom: 20px; color: #0d0d0d; border: none; } #chapeau #chapeau-inner #on-news-title:before { display: none; } #chapeau #chapeau-inner h1, #chapeau #chapeau-inner #on-news-intro { position: relative; padding-bottom: 25px; border-bottom: solid 1px #ffffff; color: #ffffff; margin: 0 0 26px; font-size: 22px; font-size: 2.2rem; line-height: 25px; line-height: 2.5rem; font-family: 'worksans-regular'; font-weight: 500; text-transform: none; } @media (min-width: 990px) { body:not(#who-we-are):not(#customers):not(#values) #chapeau #chapeau-inner h1, body:not(#who-we-are):not(#customers):not(#values) #chapeau #chapeau-inner #on-news-intro { width: 100%; } } #chapeau #chapeau-inner h1:before, #chapeau #chapeau-inner #on-news-intro:before { position: absolute; bottom: -5px; left: 115px; width: 80px; height: 5px; content: ""; background: #ffffff; } @media (max-width: 992px) { #chapeau #chapeau-inner h1, #chapeau #chapeau-inner #on-news-intro { font-size: 20px; font-size: 2rem; line-height: 22px; line-height: 2.2rem; } } #chapeau #chapeau-inner #on-news-intro { border: none; line-height: 25px; line-height: 2.5rem; } #chapeau #chapeau-inner #on-news-intro:before { display: none; } #chapeau #chapeau-inner h2 { margin: 0 0 30px; padding-top: 0; font-family: 'worksans-regular'; font-weight: 500; font-size: 17px !important; font-size: 1.7rem !important; line-height: 26px; line-height: 2.6rem; } .child-of-technology #chapeau #chapeau-inner h2, #technology #chapeau #chapeau-inner h2 { color: #ffffff; padding-top: 20px; } #chapeau #chapeau-inner h2:before, #chapeau #chapeau-inner h2:after { background: none; } @media (max-width: 768px) { #chapeau #chapeau-inner h2 { font-size: 15px; font-size: 1.5rem; line-height: 19px; line-height: 1.9rem; } } #chapeau #chapeau-inner #chapeau-blocs { font-size: 0; } #chapeau #chapeau-inner #chapeau-blocs:after { display: inline-block; width: 100%; } @media (min-width: 768px) { #chapeau #chapeau-inner #chapeau-blocs { margin: 0 -0px; } } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 25%; padding: 0 15px; /* Container checked */ padding: 5px !important; } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc:first-child:nth-last-child(1) { /* one item */ margin-left: 37.5%; } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc:first-child:nth-last-child(2), #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc:first-child:nth-last-child(2) ~ #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc { /* two items */ margin-left: 25%; } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc:first-child:nth-last-child(3), #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc:first-child:nth-last-child(3) ~ #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc { /* three items */ margin-left: 12.5%; } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc:first-child:nth-last-child(4), #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc:first-child:nth-last-child(4) ~ #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc { /* four items */ margin-left: 0; } @media (max-width: 768px) { #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc { width: 100%; margin: 0 !important; } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc:first-child { margin-top: 40px !important; } } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc a { display: inline-block; background: #ffffff; } @media (max-width: 768px) { #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc a { width: 100%; } } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc .inner { background: #ffffff; padding: 10px 10px 80px; text-align: center; } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc .inner .bloc-picto { margin-bottom: 10px; } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc .inner .bloc-picto img { max-height: 80px; } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc .inner h3 { font-size: 16px; font-size: 1.6rem; font-family: 'worksans-bold'; font-weight: 500; color: #0d0d0d; text-transform: uppercase; padding: 0; margin: 0; } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc .inner p { font-size: 16px; font-size: 1.6rem; margin: 0; } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc .inner:before { position: absolute; bottom: 40px; left: 50%; font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; color: #d2900e; font-size: 16px; font-size: 1.6rem; margin-left: -8px; } #chapeau #chapeau-inner #chapeau-blocs .chapeau-bloc:hover .inner:before { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #chapeau #chapeau-inner #chapeau-blocs.edition .chapeau-bloc .inner { padding: 10px; } #chapeau #chapeau-inner #chapeau-blocs.edition .chapeau-bloc .inner h3, #chapeau #chapeau-inner #chapeau-blocs.edition .chapeau-bloc .inner p { line-height: 15px; line-height: 1.5rem; } #chapeau #chapeau-inner #chapeau-blocs.edition .chapeau-bloc .inner:before { content: ""; } #chapeau #chapeau-inner #chapeau-arrow { position: absolute; bottom: -60px; left: 50%; margin-left: -30px; z-index: 2; } #chapeau #chapeau-inner #chapeau-arrow.animated { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #chapeau #chapeau-inner #chapeau-arrow:hover a { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #chapeau:before { position: absolute; bottom: -100px; left: 0; border-width: 100px 831px 0; border-style: solid; border-color: #0d0d0d transparent transparent; border-top-color: #000; content: ""; z-index: 2; } #chapeau.no-arrow-bottom { margin-bottom: 50px; } #chapeau.no-arrow-bottom:before { border: none; } #chapeau #chapeau-image { height: 800px; position: absolute; bottom: -310px; left: 0; width: 100%; overflow: hidden; z-index: -1; } #chapeau #chapeau-image img { min-width: 100%; width: 100%; position: absolute; bottom: 0; } @media (max-width: 1200px) { #chapeau #chapeau-image img { min-width: auto; width: auto; height: 100%; } } #chiffre-bg { position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; margin: -250px 0 0 -250px; z-index: 2; } #chiffre-bg #inner { /*&-customers { #picto-bg { position: absolute; top: 119px; left: 28px; height: 293px; .animation(bounceIn,1s,1s); fill: rgba(255,255,255,0.46); } }*/ } #chiffre-bg #inner-technology #picto-bg { position: absolute; top: 23px; left: 88px; width: 305px; } #chiffre-bg #inner-technology #picto-bg.animated { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #chiffre-bg #inner-technology #picto-bg .bg-1 { fill: rgba(255, 255, 255, 0.46); } #chiffre-bg #inner-offer-advices #picto-bg { position: absolute; top: 154px; left: -60px; width: 600px; fill: rgba(255, 255, 255, 0.46); } #chiffre-bg #inner-offer-advices #picto-bg.animated { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #chiffre-bg #inner-offer-modulation #picto-bg { opacity: 0.7; position: absolute; top: 97px; left: 37px; width: 440px; fill: rgba(255, 255, 255, 0.46); } #chiffre-bg #inner-offer-modulation #picto-bg.animated { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #chiffre-bg #inner-offer-modulation #picto-bg .bg-1 { fill: rgba(255, 255, 255, 0.8); } #chiffre-bg #inner-offer-modulation #picto-bg .bg-2 { fill: rgba(255, 255, 255, 0.6); } #chiffre-bg #inner-offer-modulation #picto-bg .bg-3 { fill: rgba(255, 255, 255, 0.46); } #chiffre-bg #inner-offer-modulation-partenaires #picto-bg { opacity: 0.7; position: absolute; top: 170px; left: 0px; width: 470px; fill: rgba(255, 255, 255, 0.46); } #chiffre-bg #inner-offer-modulation-partenaires #picto-bg.animated { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #chiffre-bg #inner-offer-modulation-partenaires #picto-bg .bg-1 { fill: rgba(255, 255, 255, 0.8); } #chiffre-bg #inner-offer-modulation-partenaires #picto-bg .bg-2 { fill: rgba(255, 255, 255, 0.6); } #chiffre-bg #inner-offer-modulation-partenaires #picto-bg .bg-3 { fill: rgba(255, 255, 255, 0.46); } #chiffre-bg #inner-offer #picto-bg { position: absolute; top: 154px; left: -60px; width: 600px; fill: rgba(255, 255, 255, 0.46); } #chiffre-bg #inner-offer #picto-bg.animated { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #chiffre-bg #inner-offer-options { -webkit-transform: rotate(-17deg); -moz-transform: rotate(-17deg); -ms-transform: rotate(-17deg); -o-transform: rotate(-17deg); transform: rotate(-17deg); } #chiffre-bg #inner-offer-options #picto-bg { position: absolute; top: 64px; left: -55px; width: 500px; fill: rgba(255, 255, 255, 0.46); } #chiffre-bg #inner-offer-options #picto-bg.animated { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #chiffre-bg #inner-offer-international #picto-bg { position: absolute; top: 119px; left: 28px; height: 293px; fill: rgba(255, 255, 255, 0.46); } #chiffre-bg #inner-offer-international #picto-bg.animated { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #chiffre-bg #inner-who-we-are, #chiffre-bg #inner-values, #chiffre-bg #inner-customers, #chiffre-bg #inner-become-distributor { -webkit-transform: rotate(11deg); -moz-transform: rotate(11deg); -ms-transform: rotate(11deg); -o-transform: rotate(11deg); transform: rotate(11deg); } #chiffre-bg #inner-who-we-are #picto-bg, #chiffre-bg #inner-values #picto-bg, #chiffre-bg #inner-customers #picto-bg, #chiffre-bg #inner-become-distributor #picto-bg { position: absolute; top: 70px; left: 80px; width: 450px; fill: rgba(255, 255, 255, 0.46); } #chiffre-bg #inner-who-we-are #picto-bg.animated, #chiffre-bg #inner-values #picto-bg.animated, #chiffre-bg #inner-customers #picto-bg.animated, #chiffre-bg #inner-become-distributor #picto-bg.animated { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } /* Dernier élément (Horizon 2020) */ body#who-we-are #main > div:last-child .timeline-annee .annee { font-size: 20px; font-size: 2rem; line-height: 20px; line-height: 2rem; margin-top: 32px; } body#who-we-are #main > div:last-child .timeline-annee > .annee::last-word { font-size: 24px; font-size: 2.4rem; } /*body#who-we-are, body#customers, body#values{ #chapeau #chapeau-inner h1{ .fs(28); .lh(36); @media(max-width:1200px){ .fs(28); .lh(36); } @media(max-width:992px){ .fs(22); .lh(30); } } }*/ body#offer-modulation #main .container:nth-child(5) p { font-size: 24px; font-size: 2.4rem; margin: 0 0 10px; } /* Logo Homepage */ body#home #header #header-main a#logo { opacity: 0; transition: opacity 0.6s ease-in; } body#home.header-resized #header #header-main a#logo { opacity: 1; } #btn-scroll-cible { height: 0; visibility: hidden; } .mea { padding: 22px 20px 22px 70px; background-color: rgba(95, 123, 165, 0.1); max-width: 75%; position: relative; } .mea:before { content: ""; width: 32px; height: 32px; border-radius: 16px; border: 1px solid #002033; position: absolute; left: 20px; top: 50%; margin-top: -16px; } .mea:after { font-family: 'icomoon'; content: "\e90e"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size: 16px; font-size: 1.6rem; line-height: 16px; line-height: 1.6rem; color: #002033; position: absolute; top: 50%; margin-top: -7px; left: 28px; } .mea p { font-family: 'worksans-medium'; font-weight: 300; font-size: 20px; font-size: 2rem; line-height: 25px; line-height: 2.5rem; margin: 0; color: #002033; } .mea p a { text-decoration: underline; } body#technology .container > .text > h2, body.child-of-technology .container > .text > h2 { text-transform: uppercase; font-family: 'worksans-bold'; font-weight: 500; font-size: 23px; font-size: 2.3rem; } body#technology .mea, body.child-of-technology .mea { background-color: rgba(35, 69, 115, 0.1); } body#technology .mea:before, body.child-of-technology .mea:before { border: 1px solid #002033; } body#technology .mea:after, body.child-of-technology .mea:after { color: #002033; } body#technology .mea p, body.child-of-technology .mea p { color: #002033; } body#about .mea, body.child-of-about .mea { background-color: rgba(154, 184, 76, 0.1); } body#about .mea:before, body.child-of-about .mea:before { border: 1px solid #9ab84c; } body#about .mea:after, body.child-of-about .mea:after { color: #9ab84c; } body#about .mea p, body.child-of-about .mea p { color: #9ab84c; } body#offer .h3, body.child-of-offer .h3 { color: #d2900e; } body#offer .text h3, body.child-of-offer .text h3, body#offer .text-media h3, body.child-of-offer .text-media h3 { color: #d2900e; } body#offer .text h4, body.child-of-offer .text h4, body#offer .text-media h4, body.child-of-offer .text-media h4 { color: #d2900e; } body#offer .text h4:after, body.child-of-offer .text h4:after, body#offer .text-media h4:after, body.child-of-offer .text-media h4:after, body#offer .text h4:before, body.child-of-offer .text h4:before, body#offer .text-media h4:before, body.child-of-offer .text-media h4:before { background: #d2900e; } body#offer .text ul li:before, body.child-of-offer .text ul li:before, body#offer .text-media ul li:before, body.child-of-offer .text-media ul li:before { border-color: transparent transparent transparent #d2900e; } body#offer .mea, body.child-of-offer .mea { background-color: rgba(210, 144, 14, 0.1); } body#offer .mea:before, body.child-of-offer .mea:before { border: 1px solid #e3a234; } body#offer .mea:after, body.child-of-offer .mea:after { color: #e3a234; } body#offer .mea p, body.child-of-offer .mea p { color: #e3a234; } #btn-scroll-bot { display: inline-block; padding: 1px; /* Chrome small crop debug */ } #btn-scroll-bot:before { font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; content: "\e908"; font-size: 61px; font-size: 6.1rem; line-height: 1; vertical-align: top; color: #ffffff; -webkit-opacity: 0.6; -moz-opacity: 0.6; opacity: 0.6; filter: alpha(opacity=60); } .news { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 33.333333333333336%; padding: 0 15px; } @media (max-width: 768px) { .news { width: 100%; } } .news:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .news .news-inner { position: relative; font-size: 10px; font-size: 1rem; padding-bottom: 70px; cursor: pointer; } body:not(#home):not(#news):not(#news-innovations):not(#news-farmstar):not(#news-agenda):not(#news-agronomy) .news .news-inner .img-zoom { /* Resize image except for homepage & newspage */ max-height: 85px; display: block; overflow: hidden; } body:not(#home):not(#news):not(#news-innovations):not(#news-farmstar):not(#news-agenda):not(#news-agronomy) .news .news-inner .img-zoom img { bottom: 20px; position: relative; display: block; } body#home .news .news-inner .img-zoom, body#news .news .news-inner .img-zoom, body#news-innovations .news .news-inner .img-zoom, body#news-farmstar .news .news-inner .img-zoom, body#news-agenda .news .news-inner .img-zoom, body#news-agronomy .news .news-inner .img-zoom { max-height: 127px; display: block; overflow: hidden; } @media (min-width: 768px) { body#home .news .news-inner .img-zoom, body#news .news .news-inner .img-zoom, body#news-innovations .news .news-inner .img-zoom, body#news-farmstar .news .news-inner .img-zoom, body#news-agenda .news .news-inner .img-zoom, body#news-agronomy .news .news-inner .img-zoom { max-height: 95px; } } @media (min-width: 990px) { body#home .news .news-inner .img-zoom, body#news .news .news-inner .img-zoom, body#news-innovations .news .news-inner .img-zoom, body#news-farmstar .news .news-inner .img-zoom, body#news-agenda .news .news-inner .img-zoom, body#news-agronomy .news .news-inner .img-zoom { max-height: 127px; } } @media (min-width: 1200px) { body#home .news .news-inner .img-zoom, body#news .news .news-inner .img-zoom, body#news-innovations .news .news-inner .img-zoom, body#news-farmstar .news .news-inner .img-zoom, body#news-agenda .news .news-inner .img-zoom, body#news-agronomy .news .news-inner .img-zoom { max-height: 160px; } } .news .news-inner img { width: 100%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .news .news-inner:hover h3 { color: #002033; } .news .news-inner h3 { font-family: 'worksans-bold'; font-weight: 500; font-size: 16px; font-size: 1.6rem; line-height: 20px; line-height: 2rem; color: #0d0d0d; margin: 0 0 7px; text-transform: uppercase; border-bottom: solid 1px #0d0d0d; position: relative; padding-bottom: 6px; cursor: pointer; padding-top: 10px; } @media (min-width: 1400px) { .news .news-inner h3 { font-size: 18px; font-size: 1.8rem; line-height: 22px; line-height: 2.2rem; } } @media (max-width: 768px) { .news .news-inner h3 { font-size: 18px; font-size: 1.8rem; line-height: 22px; line-height: 2.2rem; } } .news .news-inner h3:before { position: absolute; bottom: -3px; left: 0; background: #282d32; height: 3px; width: 30px; content: ""; } .news .news-inner .publication { font-size: 11px; font-size: 1.1rem; cursor: pointer; } .news .news-inner .categorie { display: inline; font-size: 11px; font-size: 1.1rem; font-family: 'worksans-bold'; font-weight: 500; color: #002033; text-transform: uppercase; } @media (max-width: 1200px) { .news .news-inner .categorie { display: block; line-height: 20px; line-height: 2rem; } } .news .news-inner .categorie:hover { color: #4b545d; } .news .news-inner p { font-size: 16px; font-size: 1.6rem; margin: 2px 0 0; cursor: pointer; } @media (min-width: 1400px) { .news .news-inner p { font-size: 17px; font-size: 1.7rem; } } .news .news-inner .news-arrow { position: absolute; bottom: 0; right: 0; width: 100%; height: 70px; text-align: right; cursor: pointer; } .news .news-inner .news-arrow.animated { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } .news .news-inner .news-arrow:before { font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; font-size: 16px; font-size: 1.6rem; position: absolute; top: 15px; right: 0; } .news .news-inner:hover .news-arrow:before { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #breadcrumb { background: #002033; } #breadcrumb a:hover, #breadcrumb a:focus { text-decoration: underline; } #breadcrumb #breadcrumb-inner { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; padding: 40px 15px 30px; font-family: 'worksans-regular'; font-weight: 500; font-size: 11px; font-size: 1.1rem; line-height: 20px; line-height: 2rem; /* Hide last breadcrumb separator */ } @media (min-width: 768px) { #breadcrumb #breadcrumb-inner { width: 750px; } } @media (min-width: 992px) { #breadcrumb #breadcrumb-inner { width: 970px; } } @media (min-width: 1200px) { #breadcrumb #breadcrumb-inner { width: 1170px; } } @media (max-width: 1200px) { #breadcrumb #breadcrumb-inner { width: 100%; padding-left: 30px; padding-right: 30px; } } @media (max-width: 440px) { #breadcrumb #breadcrumb-inner { padding-left: 16px; } } #breadcrumb #breadcrumb-inner span:last-of-type { display: none; } .child-of-technology #breadcrumb, #technology #breadcrumb { background: #002033; color: #ffffff; } .child-of-technology #breadcrumb a, #technology #breadcrumb a { color: #ffffff; } .child-of-offer #breadcrumb, #offer #breadcrumb { background: #edaa28; } .child-of-about #breadcrumb, #testimonies #breadcrumb, #testimony #breadcrumb { background: #9ab84c; } .breadcrumb-pipe:before { -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; filter: alpha(opacity=80); font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; font-size: 11px; font-size: 1.1rem; padding: 0 10px; } #sub-breadcrumb { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; padding-top: 15px; padding-bottom: 15px; } @media (min-width: 768px) { #sub-breadcrumb { width: 750px; } } @media (min-width: 992px) { #sub-breadcrumb { width: 970px; } } @media (min-width: 1200px) { #sub-breadcrumb { width: 1170px; } } #sub-breadcrumb #sub-breadcrumb-inner { padding: 26px 0; border-top: solid 1px #0d0d0d; border-bottom: solid 1px #0d0d0d; font-family: 'worksans-medium'; font-weight: 300; font-size: 15px; font-size: 1.5rem; line-height: 15px; line-height: 1.5rem; } #sub-breadcrumb #sub-breadcrumb-inner ul { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { #sub-breadcrumb #sub-breadcrumb-inner ul { width: 750px; } } @media (min-width: 992px) { #sub-breadcrumb #sub-breadcrumb-inner ul { width: 970px; } } @media (min-width: 1200px) { #sub-breadcrumb #sub-breadcrumb-inner ul { width: 1170px; } } #sub-breadcrumb #sub-breadcrumb-inner ul li { display: inline-block; } #sub-breadcrumb #sub-breadcrumb-inner ul li a { display: block; padding: 0 12px; border-right: solid 1px #0d0d0d; line-height: 1; } #sub-breadcrumb #sub-breadcrumb-inner ul li a.CMS_current { color: #002033; cursor: default; } .offer #sub-breadcrumb #sub-breadcrumb-inner ul li a.CMS_current, .child-of-offer #sub-breadcrumb #sub-breadcrumb-inner ul li a.CMS_current { color: #d2900e; } .about #sub-breadcrumb #sub-breadcrumb-inner ul li a.CMS_current, .child-of-about #sub-breadcrumb #sub-breadcrumb-inner ul li a.CMS_current { color: #9ab84c; } #sub-breadcrumb #sub-breadcrumb-inner ul li.home a { display: inline-block; border: none; padding: 0 ; } #sub-breadcrumb #sub-breadcrumb-inner ul li .breadcrumb-pipe:before { padding: 0 5px 0 20px; } #sub-breadcrumb #sub-breadcrumb-inner ul li.home { text-transform: uppercase; } #sub-breadcrumb #sub-breadcrumb-inner ul li:last-child a { border-right: none; } #pagination { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 100%; padding: 0 15px; padding-top: 15px; padding-bottom: 15px; border-top: solid 1px #0d0d0d; text-align: center; } #pagination .pagination { margin: 0; padding: 0; list-style: none; } #pagination .pagination li { display: inline-block; padding: 0; font-family: 'worksans-medium'; font-weight: 300; font-size: 20px; font-size: 2rem; color: #002033; } #pagination .pagination li a, #pagination .pagination li span { display: block; width: 32px; height: 32px; line-height: 32px; line-height: 3.2rem; color: #002033; } #pagination .pagination li.left { padding-right: 20px; position: relative; } #pagination .pagination li.right { padding-left: 20px; position: relative; } #cookies { background: #282d32; color: #f2f2f2; font-family: 'worksans-light'; font-weight: 100; } #cookies a:first-child { color: #f2f2f2; text-decoration: underline; } #cookies a:last-child { background: #f2f2f2; color: #282d32; font-weight: 700; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; transition: all ease 0.5s; } #cookies a:last-child:hover { background: #d9d9d9; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; transition: all ease 0.5s; } em { font-family: 'worksans-regular'; font-weight: 500; font-size: 10px; font-size: 1rem; line-height: 14px; line-height: 1.4rem; display: block; margin: 10px 0 0; font-style: normal; } .img-row-left .img-cont { margin: 0 20px 20px 0; float: left; } .img-row-left img { max-height: 82px; } .img-row-right .img-cont { margin: 0 0 20px 20px; float: right; } .img-row-right img { max-height: 82px; } #header { position: fixed; top: 0; z-index: 9989; width: 100%; background: #ffffff; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #header #header-top { position: relative; z-index: 9989; font-family: 'worksans-medium'; font-weight: 300; background: #f2f2f2; color: #282d32; line-height: 18px; height: 36px; padding-top: 8px; text-align: right; } @media (max-width: 992px) { #header #header-top { display: none; } } #header #header-top #header-langues { display: inline-block; position: relative; } #header #header-top #header-langues form.active span { color: #002033; } #header #header-top #header-langues form.active span:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #header #header-top #header-langues form.active a { display: block; -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #header #header-top #header-langues form.active a:hover { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #header #header-top #header-langues form span { font-size: 13px; font-size: 1.3rem; display: block; position: relative; margin: 0; padding: 0 30px 0 20px; cursor: pointer; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #header #header-top #header-langues form span:hover { color: #002033; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #header #header-top #header-langues form span:before { font-size: 16px; font-size: 1.6rem; font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e906"; position: absolute; left: -5px; top: 3px; } #header #header-top #header-langues form span:after { font-size: 15px; font-size: 1.5rem; font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e905"; font-size: 12px; font-size: 1.2rem; position: absolute; right: 10px; top: 6px; } #header #header-top #header-langues form a { display: none; position: absolute; top: 28px; right: 1px; width: 100%; background: #f2f2f2; text-align: center; padding: 6px 15px; font-size: 13px; font-size: 1.3rem; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #header #header-top #header-news, #header #header-top #header-my-space { display: inline-block; padding: 0 15px; border-left: solid 1px #0d0d0d; } #header #header-top #header-news:hover, #header #header-top #header-my-space:hover { color: #002033; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #header #header-top #header-news { font-size: 13px; font-size: 1.3rem; } #header #header-top #header-my-space { position: relative; text-transform: uppercase; color: #282d32; font-family: 'worksans-bold'; font-weight: 500; font-size: 11px; font-size: 1.1rem; padding-left: 40px; } #header #header-top #header-my-space:before { font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e90b"; font-size: 16px; font-size: 1.6rem; position: absolute; left: 15px; } #header #header-main { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { #header #header-main { width: 750px; } } @media (min-width: 992px) { #header #header-main { width: 970px; } } @media (min-width: 1200px) { #header #header-main { width: 1170px; } } #header #header-main:before, #header #header-main:after { content: " "; display: table; } #header #header-main:after { clear: both; } #header #header-main:before, #header #header-main:after { content: " "; display: table; } #header #header-main:after { clear: both; } @media (max-width: 1400px) { #header #header-main { width: 100%; } } #header #header-main #logo { display: block; line-height: 0; } #header #header-main #logo img { height: 50px; margin: 15px 0 16px 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } @media (max-width: 1050px) { #header #header-main #logo img { height: 51px; margin: 15px 0 15px 0; } } @media (max-width: 990px) { #header #header-main #logo img { height: 51px; margin: 5px 0; } } @media (max-width: 770px) { #header #header-main #logo img { height: 40px; margin: 10px 0 11px 0; } } @media (max-width: 440px) { #header #header-main #logo img { height: 30px; margin: 15px 0 16px 0; } } #header #header-main #header-nav { position: absolute; z-index: 1000; top: 36px; right: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #header #header-main #header-nav #find-distributor { font-size: 14px; font-size: 1.4rem; font-family: 'worksans-bold'; font-weight: 500; } @media (max-width: 992px) { #header #header-main #header-nav { display: none; } } #header #header-main #header-nav nav { display: inline-block; } #header #header-main #header-nav nav ul { margin: 0; padding: 0 2rem 0 0; } @media (max-width: 992px) { #header #header-main #header-nav nav ul { padding: 0 1rem 0 0; } } #header #header-main #header-nav nav ul li { display: inline-block; position: relative; } @media (min-width: 1200px) { #header #header-main #header-nav nav ul li:last-child ul { width: 190%; left: -45%; } } @media (min-width: 1400px) { #header #header-main #header-nav nav ul li:last-child ul { width: 150%; left: -20%; } } #header #header-main #header-nav nav ul li a { display: block; height: 81px; line-height: 37px; margin: 0; padding: 22px 3.5rem; font-family: 'worksans-bold'; font-weight: 500; font-size: 16px; font-size: 1.6rem; text-transform: uppercase; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 1400px) { #header #header-main #header-nav nav ul li a { padding: 22px 1.8rem; } } @media (max-width: 1200px) { #header #header-main #header-nav nav ul li a { padding: 22px 1.5rem; font-size: 14px; font-size: 1.4rem; } } #header #header-main #header-nav nav ul li.CMS_lvl2:hover a.CMS_lvl2 { color: #282d32; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #header #header-main #header-nav nav ul li.CMS_current.CMS_lvl2 a.CMS_lvl2 { color: #282d32; } #header #header-main #header-nav nav ul li.CMS_current.CMS_lvl3 a { color: #9ab84c; } #header #header-main #header-nav nav ul li.CMS_current.CMS_lvl3 a:hover { color: #9ab84c; } #header #header-main #header-nav nav ul li ul { display: none; background: #282d32; position: absolute; top: 61px; left: -55%; margin: 0; padding: 0; width: 210%; } @media (min-width: 1200px) { #header #header-main #header-nav nav ul li ul { width: 180%; left: -40%; } } @media (min-width: 1400px) { #header #header-main #header-nav nav ul li ul { width: 140%; left: -20%; } } #header #header-main #header-nav nav ul li ul.CMS_lvl3 { padding-top: 20px; padding-bottom: 20px; } #header #header-main #header-nav nav ul li ul.CMS_lvl3:before { position: absolute; content: ""; top: 0; left: 50%; border: solid 10px transparent; margin-left: -10px; border-top-color: #ffffff; } #header #header-main #header-nav nav ul li ul li { display: block; } #header #header-main #header-nav nav ul li ul li a { display: block; padding: 10px; margin: 0 20px; line-height: inherit; height: auto; font-family: 'worksans-medium'; font-weight: 300; line-height: 15px; line-height: 1.5rem; font-size: 13px; font-size: 1.3rem; color: #ffffff; border-bottom: solid 1px #53575b; } #header #header-main #header-nav nav ul li ul li a:hover { color: #9ab84c; } #header #header-main #header-nav nav ul li ul li:last-child a { border-bottom: none; } #header #header-main #header-nav nav ul li:hover ul { display: block; -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #header #header-main #header-nav nav ul li#nav-offer ul li a:hover { color: #edaa28; } #header #header-main #header-nav nav ul li#nav-offer ul.CMS_lvl3 li.CMS_current.CMS_lvl3 a.CMS_lvl3 { color: #edaa28; } #header #header-main #header-nav #find-distributor { display: inline-block; float: right; background: #282d32; height: 81px; line-height: 18.5px; position: relative; padding: 25px 75px 22px 3.5rem; margin-left: 0; text-transform: uppercase; color: #f2f2f2; text-align: center; } @media (min-width: 1000px) { #header #header-main #header-nav #find-distributor { margin-left: 20px; } } @media (min-width: 1200px) { #header #header-main #header-nav #find-distributor { margin-left: 40px; } } @media (min-width: 1400px) { #header #header-main #header-nav #find-distributor { margin-left: 60px; } } @media (min-width: 1600px) { #header #header-main #header-nav #find-distributor { margin-left: 80px; } } #header #header-main #header-nav #find-distributor p { font-family: 'worksans-bold'; font-weight: 500; font-size: 15px; font-size: 1.5rem; line-height: 20px; line-height: 2rem; margin: 0; } #header #header-main #header-nav #find-distributor span { display: block; } #header #header-main #header-nav #find-distributor:before { content: ""; width: 32px; height: 32px; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; border: solid 1px #b6b7b9; position: absolute; top: 25px; right: 20px; } #header #header-main #header-nav #find-distributor:after { font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e903"; font-size: 18px; position: absolute; top: 32px; right: 31px; color: #b6b7b9; } #header #header-main #header-nav #find-distributor:hover { background: #4b545d; } #header #header-main #header-nav #find-distributor:hover:after { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } @media (max-width: 1200px) { #header #header-main #header-nav #find-distributor { padding: 25px 65px 22px 3rem; } } @media (min-width: 1400px) { #header #header-main #header-nav #find-distributor { padding-left: 5.5rem; } } #header #header-main #header-nav-mobile { display: inline-block; position: absolute; top: 0; right: 0; height: 61px ; width: 61px; text-align: center; } @media (min-width: 992px) { #header #header-main #header-nav-mobile { display: none; } } #header #header-main #header-nav-mobile #nav-mobile { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; padding: 65px 0 30px 0; background: #4b545d; -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #header #header-main #header-nav-mobile #nav-mobile.active { display: block; -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; overflow-y: auto; } #header #header-main #header-nav-mobile #nav-mobile nav ul { margin: 0; padding: 0; list-style: none; } #header #header-main #header-nav-mobile #nav-mobile nav ul li { position: relative; text-align: center; } #header #header-main #header-nav-mobile #nav-mobile nav ul li.CMS_lvl2 { margin: 0 30px 30px ; background: #7994bc; } #header #header-main #header-nav-mobile #nav-mobile nav ul li.CMS_lvl2 a { color: #ffffff; } #header #header-main #header-nav-mobile #nav-mobile nav ul li.CMS_sub a.CMS_lvl2 { position: relative; } #header #header-main #header-nav-mobile #nav-mobile nav ul li.CMS_sub a.CMS_lvl2:before { position: absolute; top: 22px; right: 16px; content: ""; font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; font-size: 16px; font-size: 1.6rem; } #header #header-main #header-nav-mobile #nav-mobile nav ul li a { display: inline-block; padding: 5px 0; text-transform: uppercase; font-size: 14px; font-size: 1.4rem; } #header #header-main #header-nav-mobile #nav-mobile nav ul li a.CMS_lvl2 { position: relative; z-index: 99999; display: block; font-family: 'worksans-bold'; font-weight: 500; padding: 20px 15px; font-size: 18px; font-size: 1.8rem; } #header #header-main #header-nav-mobile #nav-mobile nav ul li a.CMS_lvl3 { padding: 10px 0; margin: 0 15px; border-top: dotted 1px #ffffff; } #header #header-main #header-nav-mobile #nav-mobile #nav-mobile-more { margin: 0 30px ; text-align: center; font-size: 18px; font-size: 1.8rem; text-transform: uppercase; font-family: 'worksans-bold'; font-weight: 500; } #header #header-main #header-nav-mobile #nav-mobile #nav-mobile-more #nav-find-distributor { display: block; position: relative; text-align: center; margin: 0 0 30px; padding: 20px 15px 20px 15px; background: #7994bc; color: #ffffff; } #header #header-main #header-nav-mobile #nav-mobile #nav-mobile-more #nav-langues { font-size: 0; } #header #header-main #header-nav-mobile #nav-mobile #nav-mobile-more #nav-langues:after { display: inline-block; width: 100%; } @media (min-width: 768px) { #header #header-main #header-nav-mobile #nav-mobile #nav-mobile-more #nav-langues { margin: 0 -0px; } } #header #header-main #header-nav-mobile #nav-mobile #nav-mobile-more #nav-langues span, #header #header-main #header-nav-mobile #nav-mobile #nav-mobile-more #nav-langues a { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 50%; padding: 0 0px; background: #7994bc; color: #ffffff; padding: 20px 15px; } #header #header-main #header-nav-mobile #nav-mobile #nav-mobile-more #nav-langues span { background: #425775; border-right: solid 15px #002033; } #header #header-main #header-nav-mobile #nav-mobile #nav-mobile-more #nav-langues a { border-right: solid 15px #002033; } #header.resized { /*@media (min-width: 992px) { //transform: translateY(0 - @header-top-height); } .box-shadow(0 1px 1px rgba(0,0,0,0.25)); .transition(@reduce-resized-transition );*/ } #header.resized #header-main #logo img { height: 47px; margin: 5px 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } @media (max-width: 440px) { #header.resized #header-main #logo img { height: 30px; margin: 13px 0; } } #header.resized #header-main #header-nav nav ul li a.CMS_lvl2, #header.resized #header-main #header-nav #find-distributor { font-size: 14px; font-size: 1.4rem; padding-top: 12px; padding-bottom: 12px; height: 57px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #header.resized #header-main #header-nav nav ul li ul.CMS_lvl3 { top: 57px; } #header.resized #header-main #header-nav #find-distributor:before { top: 13px; } #header.resized #header-main #header-nav #find-distributor:after { top: 20px; } #footer { font-size: 10px; font-size: 1rem; background: #f2f2f2; position: relative; } @media (min-width: 768px) { #footer #footer-main { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } } @media (min-width: 768px) and (min-width: 768px) { #footer #footer-main { width: 750px; } } @media (min-width: 768px) and (min-width: 992px) { #footer #footer-main { width: 970px; } } @media (min-width: 768px) and (min-width: 1200px) { #footer #footer-main { width: 1170px; } } #footer #footer-main #footer-nav { height: 75px; } @media (max-width: 768px) { #footer #footer-main #footer-nav { text-align: center; } } #footer #footer-main #footer-nav ul { list-style: none; margin: 0; padding: 0; } #footer #footer-main #footer-nav ul li { display: inline-block; margin-top: 25px; color: #0d0d0d; } #footer #footer-main #footer-nav ul li a { font-size: 11px; font-size: 1.1rem; font-family: 'worksans-medium'; font-weight: 300; padding: 0 10px; border-right: solid 1px #0d0d0d; color: #0d0d0d; } #footer #footer-main #footer-nav ul li a:hover, #footer #footer-main #footer-nav ul li a:focus { color: #002033; } #footer #footer-main #footer-nav ul li:last-child a { border-right: none; } #footer #footer-main #footer-nav ul li:not(:first-child) a { padding-left: 5px; } #footer #footer-main #become-distributor { display: inline-block; position: absolute; top: 0; right: 0; background: #4b545d; height: 75px; padding: 18px 95px 22px 80px; color: #f2f2f2; font-family: 'worksans-bold'; font-weight: 500; font-size: 15px; font-size: 1.5rem; line-height: 21px; line-height: 2.1rem; text-transform: uppercase; text-align: center; } @media (max-width: 768px) { #footer #footer-main #become-distributor { position: relative; width: 100%; } } @media (max-width: 320px) { #footer #footer-main #become-distributor { line-height: 18px; line-height: 1.8rem; } } #footer #footer-main #become-distributor span { display: block; } #footer #footer-main #become-distributor:before { content: ""; width: 32px; height: 32px; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; border: solid 1px #ffffff; position: absolute; top: 22px; right: 20px; opacity: 0.4; } #footer #footer-main #become-distributor:after { font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; font-size: 12px; position: absolute; top: 34px; right: 28px; opacity: 0.3; } #footer #footer-main #become-distributor:hover { background: #002033; } #footer #footer-main #become-distributor:hover:after { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #footer #footer-bottom { width: 100%; padding: 40px 0 30px; background: #ffffff; } @media (max-width: 768px) { #footer #footer-bottom { padding: 0; } } #footer #footer-bottom ul { margin: 0; padding: 0; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { #footer #footer-bottom ul { width: 750px; } } @media (min-width: 992px) { #footer #footer-bottom ul { width: 970px; } } @media (min-width: 1200px) { #footer #footer-bottom ul { width: 1170px; } } #footer #footer-bottom ul li { display: inline-block; padding: 0 20px; } @media (max-width: 768px) { #footer #footer-bottom ul li { width: 100%; text-align: center; padding: 0 0 10px 0; } } #footer #footer-bottom ul li img { max-height: 55px; } #footer #footer-bottom ul li a { min-width: 135px; display: block; text-align: center; } /*navigation*/ .hamburger { position: relative; width: 61px; height: 61px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; padding: 0; display: inline-block; cursor: pointer; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; background: #282d32; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #header.resized .hamburger { height: 57px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .hamburger:hover { background: #4b545d; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .hamburger.active { background: #002033; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .hamburger:focus { border: none; outline: none; } .hamburger.active { z-index: 1000; } .hamburger.active .hamburger-inner, .hamburger.active .hamburger-inner:before, .hamburger.active .hamburger-inner:after { background-color: #ffffff; } .hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 15px; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #ffffff; border-radius: 4px; position: absolute; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { transition: top 0.1s 0.14s ease, opacity 0.1s ease; } .hamburger--squeeze .hamburger-inner::after { transition: bottom 0.1s 0.14s ease, -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.active .hamburger-inner { -webkit-transform: rotate(45deg); transform: rotate(45deg); transition-delay: 0.14s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease, opacity 0.1s 0.14s ease; } .hamburger--squeeze.active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transition: bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); } /* elements isolés */ /*!** Fichier destiné aux styles des liens ***/ a { text-decoration: none; } /*!** Fichier destiné aux styles des boutons ***/ .btn { display: inline-block; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px; padding: 18px 24px; border: solid 1px #282d32; background: #282d32; font-family: 'worksans-bold'; font-weight: 500; font-size: 12px; font-size: 1.2rem; line-height: 11px; line-height: 1.1rem; text-transform: uppercase; color: #ffffff; } .btn:hover { background: #002033; border: solid 1px #002033; color: #ffffff; } #slidistributeurs .btn, #last-3-news .btn, .btn.btn-back { background: transparent; border-color: #d4d5d6; color: #0d0d0d; } #slidistributeurs .btn:hover, #last-3-news .btn:hover, .btn.btn-back:hover { background: #002033; border: solid 1px #d4d5d6; color: #ffffff; } body#customers #slidistributeurs .btn:hover, body#customers #last-3-news .btn:hover, body#customers .btn.btn-back:hover { background: #9ab84c; border: solid 1px #9ab84c; } .btn.btn-back { position: relative; padding-left: 50px; } .btn.btn-back:before { font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; font-size: 16px; font-size: 1.6rem; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); position: absolute; top: 50%; margin-top: -8px; left: 12px; } .btn#btn-all-distributeurs:hover, .btn#btn-all-news:hover { background: #4b545d !important; color: #ffffff; } /*!** Fichier destiné aux styles des formulaires ***/ /************** FORMULAIRES AUTOMNE ***************/ .cms_forms { padding: 15px 25%; background-color: #f2f2f2; } @media (max-width: 992px) { .cms_forms { padding: 15px 15%; } } @media (max-width: 768px) { .cms_forms { padding: 15px 5%; } } .cms_forms table { width: 100%; border: 0; } .cms_forms table tr, .cms_forms table td { border: 0; } .cms_forms label { font-family: 'worksans-bold'; font-weight: 500; font-size: 13px; font-size: 1.3rem; line-height: 14px; line-height: 1.4rem; text-transform: uppercase; text-align: left; display: block; } .cms_forms input[type="text"] { background-color: #ffffff; box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.35) inset; width: 90%; border: 0; height: 36px; margin: 0 0 15px; padding-left: 5px; } .cms_forms textarea { background-color: #ffffff; box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.35) inset; border: none; width: 90%; padding: 5px; margin: 0 0 15px; } .cms_forms input[type="submit"] { display: inline-block; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px; padding: 18px 24px; border: solid 1px #282d32; background: #282d32; font-family: 'worksans-bold'; font-weight: 500; font-size: 12px; font-size: 1.2rem; line-height: 11px; line-height: 1.1rem; text-transform: uppercase; color: #ffffff; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; margin-left: 26%; } .cms_forms input[type="submit"]:hover { background: #002033; border: solid 1px #002033; color: #ffffff; } #slidistributeurs .cms_forms input[type="submit"], #last-3-news .cms_forms input[type="submit"], .cms_forms input[type="submit"].btn-back { background: transparent; border-color: #d4d5d6; color: #0d0d0d; } #slidistributeurs .cms_forms input[type="submit"]:hover, #last-3-news .cms_forms input[type="submit"]:hover, .cms_forms input[type="submit"].btn-back:hover { background: #002033; border: solid 1px #d4d5d6; color: #ffffff; } body#customers #slidistributeurs .cms_forms input[type="submit"]:hover, body#customers #last-3-news .cms_forms input[type="submit"]:hover, body#customers .cms_forms input[type="submit"].btn-back:hover { background: #9ab84c; border: solid 1px #9ab84c; } .cms_forms input[type="submit"].btn-back { position: relative; padding-left: 50px; } .cms_forms input[type="submit"].btn-back:before { font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; font-size: 16px; font-size: 1.6rem; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); position: absolute; top: 50%; margin-top: -8px; left: 12px; } .cms_forms input[type="submit"]#btn-all-distributeurs:hover, .cms_forms input[type="submit"]#btn-all-news:hover { background: #4b545d !important; color: #ffffff; } .cms_forms input[type="submit"]:hover { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; cursor: pointer; } @media (max-width: 480px) { .cms_forms input[type="submit"] { margin-left: 0; } } /************** MESSAGES D'ERREUR ***************/ .cms_forms_error_msg, .cms_forms_msg { text-align: left; font-family: 'worksans-regular'; font-weight: 500; font-size: 15px; font-size: 1.5rem; line-height: 20px; line-height: 2rem; color: #002033; border: 1px solid #002033; margin: 0 0 15px; padding: 10px; text-align: center; } .cms_forms_error_msg ul, .cms_forms_msg ul { padding: 0 40px; } .cms_forms_error_msg li, .cms_forms_msg li { text-align: left; font-family: 'worksans-regular'; font-weight: 500; font-size: 15px; font-size: 1.5rem; line-height: 20px; line-height: 2rem; } /*!** Fichier destiné aux styles des tableaux ***/ table { border: 2px solid #b6b7b9; margin: 20px auto; overflow-y: scroll; border-collapse: collapse; } tr { border: 1px solid #b6b7b9; } td, th { border: 1px solid #b6b7b9; outline: none; padding: 5px; } /*rows*/ /* medias */ .pmedia-item { max-width: 100%; /* prevent responsive width */ margin: 20px 0; padding-top: 20px; text-align: center; } .pmedia-item.pmedia-center img { max-width: 100%; } .pmedia-item.pmedia-right { float: right; margin-left: 20px; } .pmedia-item.pmedia-left { float: left; margin-right: 20px; } .pmedia-item .pmedia-oembed, .pmedia-item .pmedia-oembed-legend { margin: 0 auto; max-width: 320px; /* a coordonner avec la largeur de la video dans la rangee */ } .pmedia-item .file-legend { display: block; margin: 0 auto; max-width: 200px; /* a coordonner avec la largeur de la vignette du fichier dans la rangee */ } .pmedia-item .file-name { display: inline-block; margin-top: 3px; vertical-align: middle; } .pmedia-item .file-name img { display: inline-block; vertical-align: middle; } .pmedia-item object { /* center oembed in his container */ float: none !important; margin: 0 auto; display: block; } .pmedia-item > img { /* center alone images in his container like sound thumbs */ display: block; margin: 0 auto; } .text-media { margin: 10px 0 20px; padding-top: 20px; } .pmedia-item .pmedia-video { position: relative; display: block; height: 0; padding: 0; overflow: hidden; } .pmedia-item .pmedia-video .video { position: absolute; top: 0; left: 0; bottom: 0; height: 100%; width: 100%; border: 0; } .pmedia-item .pmedia-16-9 { padding-bottom: 56.25%; } .pmedia-item .pmedia-4-3 { padding-bottom: 75%; } .pmedia-item.pmedia-left, .pmedia-item.pmedia-right { width: 485px; } .pmedia-item.pmedia-center { width: 900px; margin: 20px auto; } #last-3-news { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; padding-top: 30px; } @media (min-width: 768px) { #last-3-news { width: 750px; } } @media (min-width: 992px) { #last-3-news { width: 970px; } } @media (min-width: 1200px) { #last-3-news { width: 1170px; } } #last-3-news .inner { font-size: 0; } #last-3-news .inner:after { display: inline-block; width: 100%; } @media (min-width: 768px) { #last-3-news .inner { margin: 0 -0px; } } #last-3-news .inner h3 { font-family: 'worksans-bold'; font-weight: 500; line-height: 20px; line-height: 2rem; color: #0d0d0d; margin: 0 0 10px; } #all-news, #last-news { font-size: 0; margin-bottom: 40px !important; } #all-news:after, #last-news:after { display: inline-block; width: 100%; } @media (min-width: 768px) { #all-news, #last-news { margin: 0 -0px; } } #last-news { padding-top: 20px; } #last-news #btn-all-news { text-align: center; letter-spacing: 0.25px; } #news-main { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; padding: 45px 0 30px; } @media (min-width: 768px) { #news-main { width: 750px; } } @media (min-width: 992px) { #news-main { width: 970px; } } @media (min-width: 1200px) { #news-main { width: 1170px; } } .news .news-inner .img-zoom { position: relative; } .news .news-inner .img-zoom img { margin-top: -10%; /* Recentrer les images */ } #chapeau #news-categories { font-size: 0; margin-bottom: 30px !important; } #chapeau #news-categories:after { display: inline-block; width: 100%; } @media (min-width: 768px) { #chapeau #news-categories { margin: 0 -0px; } } #chapeau #news-categories > a .news-categories-inner:after { /*background:url("/public/images/airbus.jpg") no-repeat; width:50px; height:50px; display: block; content:""; position: absolute; top: 0; left: 50%; margin-left: -30px;*/ } #chapeau #news-categories .news-categories { display: inline-block; font-size: initial; position: relative; vertical-align: top; padding: 5px; width: 25%; } @media (max-width: 992px) { #chapeau #news-categories .news-categories { width: 50% ; margin-bottom: 20px ; } } @media (max-width: 768px) { #chapeau #news-categories .news-categories { width: 100% ; height: auto !important ; } } #chapeau #news-categories .news-categories .news-categories-inner { display: block; height: 100%; padding: 30px 30px 45px; background: #ffffff; text-align: center; } #chapeau #news-categories .news-categories .news-categories-inner:before { font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; font-size: 16px; font-size: 1.6rem; position: absolute; bottom: 25px; left: 50%; margin-left: -8px; } @media (min-width: 1200px) { #chapeau #news-categories .news-categories .news-categories-inner:before { bottom: 45px; } } #chapeau #news-categories .news-categories .news-categories-inner:hover:before { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #chapeau #news-categories .news-categories h2 { font-family: 'worksans-bold'; font-weight: 500; font-size: 16px; font-size: 1.6rem; line-height: 20px; line-height: 2rem; text-transform: uppercase; margin: 0 0 20px; } @media (min-width: 1200px) { #chapeau #news-categories .news-categories h2 { margin: 20px 0 20px 0; } } #chapeau #news-categories .news-categories p { font-family: 'worksans-regular'; font-weight: 500; font-size: 16px; font-size: 1.6rem; line-height: 22px; line-height: 2.2rem; margin: 0 0 30px; } @media (min-width: 1200px) { #pagination .pagination li.right { padding-left: 80px; } } #pagination .pagination li.right a { color: #fff; } #pagination .pagination li.right a:before { position: absolute; color: #0d0d0d; -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; filter: alpha(opacity=80); font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e90d"; font-size: 34px; font-size: 3.4rem; } @media (min-width: 1200px) { #pagination .pagination li.left { padding-right: 80px; } } #pagination .pagination li.left a { color: #fff; } #pagination .pagination li.left a:before { position: absolute; color: #0d0d0d; -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; filter: alpha(opacity=80); font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e90d"; display: block; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); font-size: 34px; font-size: 3.4rem; } #news-detail { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { #news-detail { width: 750px; } } @media (min-width: 992px) { #news-detail { width: 970px; } } @media (min-width: 1200px) { #news-detail { width: 1170px; } } #news-detail:before, #news-detail:after { content: " "; display: table; } #news-detail:after { clear: both; } #news-detail:before, #news-detail:after { content: " "; display: table; } #news-detail:after { clear: both; } #news-detail #news-detail-image { float: right; margin: 100px 0 20px 20px; } @media (max-width: 1200px) { #news-detail #news-detail-image { margin: 120px 0 20px 20px; } } @media (max-width: 990px) { #news-detail #news-detail-image { margin: 137px 0 20px 20px; } } @media (max-width: 768px) { #news-detail #news-detail-image { clear: both; float: none; width: 100%; margin: 0 auto; } } #news-detail #news-detail-image img { width: 430px; max-width: 100%; } #news-detail h3 { position: relative; } #news-detail h3:before, #news-detail h3:after { position: absolute; bottom: -5px; left: 0; background: #282d32; content: ""; } #news-detail h3:before { width: 80px; height: 1px; } #news-detail h3:after { bottom: -8px; left: 15px; width: 30px; height: 3px; } #news-back { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; padding: 20px 0; } @media (min-width: 768px) { #news-back { width: 750px; } } @media (min-width: 992px) { #news-back { width: 970px; } } @media (min-width: 1200px) { #news-back { width: 1170px; } } @media (min-width: 1200px) { #news #news-main { padding-top: 60px; } } .media-news-details-container { text-align: center; } .media-news-details-container .media-news-details { margin: 0 auto; display: inline-block; } .media-news-details-container .media-news-details img { max-width: 450px; } @media (max-width: 480px) { .media-news-details-container .media-news-details img { width: 100%; height: auto; display: block; } } .partenaire { padding-bottom: 20px; } .partenaire .partenaire-logo img { max-height: 82px; } .partenaire h3 { padding: 15px 0 10px; margin: 0; } .partenaire p { margin-bottom: 15px; } #slidistributeurs { text-align: center; padding-bottom: 40px; } #slidistributeurs .section-title { position: relative; } #slidistributeurs .section-title:before, #slidistributeurs .section-title:after { content: ""; position: absolute; background: #282d32; } #slidistributeurs .section-title:before { width: 30px; height: 3px; bottom: -7px; right: 50%; margin-right: -15px; } #slidistributeurs .section-title:after { width: 90px; height: 1px; bottom: -5px; right: 50%; margin-right: -45px; } #slidistributeurs #slidistributeurs-inner { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; padding: 0 50px 40px; position: relative; } @media (max-width: 1200px) { #slidistributeurs #slidistributeurs-inner .bx-viewport ul li { max-width: 150px; } } @media (max-width: 440px) { #slidistributeurs #slidistributeurs-inner .bx-viewport ul li { min-width: 100px; } } @media (max-width: 390px) { #slidistributeurs #slidistributeurs-inner .bx-viewport ul li { min-width: 80px; } } @media (min-width: 768px) { #slidistributeurs #slidistributeurs-inner { width: 750px; } } @media (min-width: 992px) { #slidistributeurs #slidistributeurs-inner { width: 970px; } } @media (min-width: 1200px) { #slidistributeurs #slidistributeurs-inner { width: 1170px; } } @media (max-width: 1200px) { #slidistributeurs #slidistributeurs-inner { padding: 0 80px 40px; } } #slidistributeurs #slidistributeurs-inner ul { margin: 0; padding: 0; } #slidistributeurs #slidistributeurs-inner ul li { display: inline-block; height: 180px; line-height: 180px; } #slidistributeurs #slidistributeurs-inner ul li a { display: inline-block; line-height: 1; vertical-align: middle; } #slidistributeurs .bx-wrapper { display: inline-block; } #slidistributeurs .bx-wrapper a img { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ } #slidistributeurs .bx-wrapper a:hover img { filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(0%); } #slidistributeurs #slidistributeur-prev, #slidistributeurs #slidistributeur-next { display: inline-block; position: absolute; top: 40%; margin-top: -21px; } #slidistributeurs .bx-prev, #slidistributeurs .bx-next { display: block; width: 60px; height: 60px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border: solid 1px rgba(48, 53, 58, 0.2); } #slidistributeurs .bx-prev:before, #slidistributeurs .bx-next:before { position: absolute; top: 50%; margin-top: -9px; left: 15px; color: #282d32; -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; filter: alpha(opacity=80); font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; font-size: 18px; font-size: 1.8rem; } #slidistributeurs .bx-prev:hover:before, #slidistributeurs .bx-next:hover:before { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #slidistributeurs #slidistributeur-prev { left: 0; } #slidistributeurs #slidistributeur-prev .bx-prev { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #slidistributeurs #slidistributeur-next { right: 0; } /* Rend une image en noir et blanc */ .banner-push-container .banner-push-ico-inner { position: relative; } .banner-push-container #push-picto-options { position: absolute; left: 0; } .banner-push-container:after { display: none !important; } .banner-push-container #push-picto-conseils path, .banner-push-container #push-picto-modulation path, .banner-push-container #ico-bg-options path, .banner-push-container #push-picto-conseils polygon, .banner-push-container #push-picto-modulation polygon, .banner-push-container #ico-bg-options polygon, .banner-push-container #push-picto-conseils rect, .banner-push-container #push-picto-modulation rect, .banner-push-container #ico-bg-options rect, .banner-push-container #push-picto-conseils circle, .banner-push-container #push-picto-modulation circle, .banner-push-container #ico-bg-options circle { fill: #edaa28; } .banner-push-container #ico-bg-options { width: 60px; left: 68px; position: absolute; top: 62px; z-index: 999; margin-left: 1px; } .banner-push-container .banner-push-ico-inner:before { transition: all ease 0.2s; background: #edaa28 !important; } .banner-push-container:hover .banner-push-ico-inner:before { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); opacity: 0.2 !important; transition: all ease 0.5s; background: #edaa28 !important; } .banner-push-container:first-child:after, .banner-push-container:last-child:after { content: ""; width: 2px; background: rgba(0, 0, 0, 0.3); display: block; position: absolute; right: 0; top: 40%; height: 45%; } @media (max-width: 768px) { .banner-push-container:first-child:after, .banner-push-container:last-child:after { background: transparent; } } .banner-push-container:last-child:after { left: 0; } .banner-push-container:first-child .banner-push-ico.animated { -webkit-animation-name: fadeInLeft !important; -moz-animation-name: fadeInLeft !important; -o-animation-name: fadeInLeft !important; animation-name: fadeInLeft !important; -webkit-animation-duration: 4s !important; -moz-animation-duration: 4s !important; -o-animation-duration: 4s !important; animation-duration: 4s !important; -webkit-animation-fill-mode: both !important; -moz-animation-fill-mode: both !important; -o-animation-fill-mode: both !important; animation-fill-mode: both !important; -webkit-animation-delay: 1 !important; -moz-animation-delay: 1 !important; -ms-animation-delay: 1 !important; -o-animation-delay: 1 !important; animation-delay: 1 !important; -webkit-animation-iteration-count: 0.5s !important; -moz-animation-iteration-count: 0.5s !important; -ms-animation-iteration-count: 0.5s !important; -o-animation-iteration-count: 0.5s !important; animation-iteration-count: 0.5s !important; } .banner-push-container:last-child .banner-push-ico.animated { -webkit-animation-name: fadeInRight !important; -moz-animation-name: fadeInRight !important; -o-animation-name: fadeInRight !important; animation-name: fadeInRight !important; -webkit-animation-duration: 7s !important; -moz-animation-duration: 7s !important; -o-animation-duration: 7s !important; animation-duration: 7s !important; -webkit-animation-fill-mode: both !important; -moz-animation-fill-mode: both !important; -o-animation-fill-mode: both !important; animation-fill-mode: both !important; -webkit-animation-delay: 1 !important; -moz-animation-delay: 1 !important; -ms-animation-delay: 1 !important; -o-animation-delay: 1 !important; animation-delay: 1 !important; -webkit-animation-iteration-count: 0.5s !important; -moz-animation-iteration-count: 0.5s !important; -ms-animation-iteration-count: 0.5s !important; -o-animation-iteration-count: 0.5s !important; animation-iteration-count: 0.5s !important; } @media (max-width: 768px) { .banner-push-container { padding-top: 20px ; padding-bottom: 40px; } } .banner-push-container .banner-push-ico { display: inline-block; position: relative; /*&.banner-push-box:first-child { .animation(fadeIn,2s,1,5s); } &:last-child { .animation(fadeIn,2s,1,5s); }*/ } .banner-push-container .banner-push-ico.animated { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 5.5s; -moz-animation-duration: 5.5s; -o-animation-duration: 5.5s; animation-duration: 5.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1; -moz-animation-delay: 1; -ms-animation-delay: 1; -o-animation-delay: 1; animation-delay: 1; -webkit-animation-iteration-count: 0.5s; -moz-animation-iteration-count: 0.5s; -ms-animation-iteration-count: 0.5s; -o-animation-iteration-count: 0.5s; animation-iteration-count: 0.5s; } .banner-push-container .banner-push-ico svg.banner-push-ico-bg polygon, .banner-push-container .banner-push-ico #push-picto-options polygon, .banner-push-container .banner-push-ico svg.banner-push-ico-bg rect, .banner-push-container .banner-push-ico #push-picto-options rect, .banner-push-container .banner-push-ico svg.banner-push-ico-bg path, .banner-push-container .banner-push-ico #push-picto-options path { fill: rgba(230, 163, 33, 0.6) !important; } .banner-push-container .banner-push-ico .banner-push-ico-bg { position: absolute; } .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-valeurs { width: 210px; top: 5px; left: -10px; } .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-valeurs path, .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-valeurs polygon, .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-valeurs rect, .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-valeurs circle { fill: #edaa28; } .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-conseils { width: 220px; top: 40px; left: -10px; } .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-conseils path, .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-conseils polygon, .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-conseils rect, .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-conseils circle { fill: #edaa28; } .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-modulation { width: 190px; top: 21px; left: 5px; } .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-modulation path, .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-modulation polygon, .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-modulation rect, .banner-push-container .banner-push-ico .banner-push-ico-bg#ico-bg-modulation circle { fill: #edaa28; } .banner-push-container .banner-push-ico .banner-push-ico-inner { height: 160px; width: 200px; margin: 0 auto; } .banner-push-container .banner-push-ico .banner-push-ico-inner:before, .banner-push-container .banner-push-ico .banner-push-ico-inner:after { position: absolute; content: ""; display: block; } .banner-push-container .banner-push-ico .banner-push-ico-inner:before { width: 110px; left: 45px; height: 110px; top: 25px; -webkit-border-radius: 110px; -moz-border-radius: 110px; border-radius: 110px; background: #ffffff; -webkit-opacity: 0.51; -moz-opacity: 0.51; opacity: 0.51; filter: alpha(opacity=51); } .banner-push-container .banner-push-ico .banner-push-ico-inner:after { width: 80px; left: 60px; height: 80px; top: 40px; -webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; background: #ffffff; } .banner-push-container .banner-push-ico .banner-push-ico-inner .push-ico { position: absolute; z-index: 1; } .banner-push-container .banner-push-ico .banner-push-ico-inner .push-ico#push-picto-valeurs { width: 60px; height: 60px; top: 50px; left: 70px; } .banner-push-container .banner-push-ico .banner-push-ico-inner .push-ico#push-picto-conseils { width: 60px; top: 52px; left: 68px; } .banner-push-container .banner-push-ico .banner-push-ico-inner .push-ico#push-picto-modulation { width: 60px; top: 51px; left: 68px; } .banner-push-container .banner-push-ico .banner-push-ico-inner .push-ico#push-picto-options { width: 60px; top: 51px; left: 68px; } #banner-push { background: #002033; } .child-of-technology #banner-push, #technology #banner-push { background: #002033; } #offer #banner-push, .child-of-offer #banner-push { background: #e3a234; } #about #banner-push, .child-of-about #banner-push { background: #9ab84c; } #banner-push #banner-push-inner { font-size: 0; } #banner-push #banner-push-inner:after { display: inline-block; width: 100%; } @media (min-width: 768px) { #banner-push #banner-push-inner { margin: 0 -15px; } } #banner-push #banner-push-inner .banner-push-box { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 33.333333333333336%; padding: 0 15px; text-align: center; color: #ffffff; padding-top: 20px; padding-bottom: 50px; margin-bottom: 20px; } @media (max-width: 768px) { #banner-push #banner-push-inner .banner-push-box { width: 100%; } } #banner-push #banner-push-inner .banner-push-box .banner-push-ico-inner:before { transition: all ease 0.2s; } #banner-push #banner-push-inner .banner-push-box:hover .banner-push-ico-inner:before { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); opacity: 0.2 !important; transition: all ease 0.5s; } #banner-push #banner-push-inner .banner-push-box:first-child:after, #banner-push #banner-push-inner .banner-push-box:last-child:after { content: ""; width: 2px; background: rgba(255, 255, 255, 0.3); display: block; position: absolute; right: 0; top: 40%; height: 45%; } @media (max-width: 768px) { #banner-push #banner-push-inner .banner-push-box:first-child:after, #banner-push #banner-push-inner .banner-push-box:last-child:after { background: transparent; } } #banner-push #banner-push-inner .banner-push-box:last-child:after { left: 0; } #banner-push #banner-push-inner .banner-push-box:first-child .banner-push-ico.animated { -webkit-animation-name: fadeInLeft !important; -moz-animation-name: fadeInLeft !important; -o-animation-name: fadeInLeft !important; animation-name: fadeInLeft !important; -webkit-animation-duration: 4s !important; -moz-animation-duration: 4s !important; -o-animation-duration: 4s !important; animation-duration: 4s !important; -webkit-animation-fill-mode: both !important; -moz-animation-fill-mode: both !important; -o-animation-fill-mode: both !important; animation-fill-mode: both !important; -webkit-animation-delay: 1 !important; -moz-animation-delay: 1 !important; -ms-animation-delay: 1 !important; -o-animation-delay: 1 !important; animation-delay: 1 !important; -webkit-animation-iteration-count: 0.5s !important; -moz-animation-iteration-count: 0.5s !important; -ms-animation-iteration-count: 0.5s !important; -o-animation-iteration-count: 0.5s !important; animation-iteration-count: 0.5s !important; } #banner-push #banner-push-inner .banner-push-box:last-child .banner-push-ico.animated { -webkit-animation-name: fadeInRight !important; -moz-animation-name: fadeInRight !important; -o-animation-name: fadeInRight !important; animation-name: fadeInRight !important; -webkit-animation-duration: 7s !important; -moz-animation-duration: 7s !important; -o-animation-duration: 7s !important; animation-duration: 7s !important; -webkit-animation-fill-mode: both !important; -moz-animation-fill-mode: both !important; -o-animation-fill-mode: both !important; animation-fill-mode: both !important; -webkit-animation-delay: 1 !important; -moz-animation-delay: 1 !important; -ms-animation-delay: 1 !important; -o-animation-delay: 1 !important; animation-delay: 1 !important; -webkit-animation-iteration-count: 0.5s !important; -moz-animation-iteration-count: 0.5s !important; -ms-animation-iteration-count: 0.5s !important; -o-animation-iteration-count: 0.5s !important; animation-iteration-count: 0.5s !important; } @media (max-width: 768px) { #banner-push #banner-push-inner .banner-push-box { padding-top: 20px ; padding-bottom: 40px; } } #banner-push #banner-push-inner .banner-push-box:before { position: absolute; bottom: 10px; left: 50%; font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; font-size: 16px; font-size: 1.6rem; margin-left: -8px; } @media (max-width: 768px) { #banner-push #banner-push-inner .banner-push-box:before { bottom: 10px; } } #banner-push #banner-push-inner .banner-push-box .banner-push-ico { display: inline-block; position: relative; /*&.banner-push-box:first-child { .animation(fadeIn,2s,1,5s); } &:last-child { .animation(fadeIn,2s,1,5s); }*/ } #banner-push #banner-push-inner .banner-push-box .banner-push-ico.animated { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 5.5s; -moz-animation-duration: 5.5s; -o-animation-duration: 5.5s; animation-duration: 5.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1; -moz-animation-delay: 1; -ms-animation-delay: 1; -o-animation-delay: 1; animation-delay: 1; -webkit-animation-iteration-count: 0.5s; -moz-animation-iteration-count: 0.5s; -ms-animation-iteration-count: 0.5s; -o-animation-iteration-count: 0.5s; animation-iteration-count: 0.5s; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico svg.banner-push-ico-bg polygon, #banner-push #banner-push-inner .banner-push-box .banner-push-ico svg.banner-push-ico-bg rect, #banner-push #banner-push-inner .banner-push-box .banner-push-ico svg.banner-push-ico-bg path { fill: rgba(255, 255, 255, 0.6) !important; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg { position: absolute; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-valeurs { width: 210px; top: 5px; left: -10px; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-valeurs path, #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-valeurs polygon, #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-valeurs rect, #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-valeurs circle { fill: #fff; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-conseils { width: 220px; top: 40px; left: -10px; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-conseils path, #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-conseils polygon, #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-conseils rect, #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-conseils circle { fill: #fff; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-modulation { width: 190px; top: 21px; left: 5px; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-modulation path, #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-modulation polygon, #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-modulation rect, #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-bg#ico-bg-modulation circle { fill: #fff; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-inner { height: 160px; width: 200px; margin: 0 auto; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-inner:before, #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-inner:after { position: absolute; content: ""; display: block; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-inner:before { width: 110px; left: 45px; height: 110px; top: 25px; -webkit-border-radius: 110px; -moz-border-radius: 110px; border-radius: 110px; background: #ffffff; -webkit-opacity: 0.51; -moz-opacity: 0.51; opacity: 0.51; filter: alpha(opacity=51); } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-inner:after { width: 80px; left: 60px; height: 80px; top: 40px; -webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; background: #ffffff; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-inner .push-ico { position: absolute; z-index: 1; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-inner .push-ico#push-picto-valeurs { width: 60px; height: 60px; top: 50px; left: 70px; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-inner .push-ico#push-picto-conseils { width: 60px; top: 52px; left: 68px; } #banner-push #banner-push-inner .banner-push-box .banner-push-ico .banner-push-ico-inner .push-ico#push-picto-modulation { width: 60px; top: 51px; left: 68px; } #banner-push #banner-push-inner .banner-push-box h2 { font-family: 'worksans-bold'; font-weight: 500; font-size: 16px; font-size: 1.6rem; line-height: 16px; line-height: 1.6rem; text-transform: uppercase; margin: 0 0 15px; padding: 0; } #banner-push #banner-push-inner .banner-push-box h2:before, #banner-push #banner-push-inner .banner-push-box h2:after { background: none; } #banner-push #banner-push-inner .banner-push-box p { letter-spacing: 0; font-size: 14px; font-size: 1.4rem; line-height: 17.5px; line-height: 1.75rem; font-family: 'worksans-light'; font-weight: 100; margin: 0 15px; } #banner-push #banner-push-inner .banner-push-box:hover:before { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #banner-push #banner-push-bottom { display: block; position: relative; width: 100%; background: #ffffff; margin-bottom: -20px; } @media (max-width: 768px) { #banner-push #banner-push-bottom { display: none ; } } #banner-push #banner-push-bottom svg { position: relative; top: -1px; } body#home #banner-push { position: relative; margin-bottom: 70px; } body#home #banner-push:before { position: absolute; bottom: -100px; left: 0; border-width: 100px 831px 0; border-style: solid; border-color: #002033 transparent transparent !important; border-top-color: #000; content: ""; z-index: 2; } #last-testimony { font-size: 0; font-size: 10px; font-size: 1rem; overflow-y: hidden; } #last-testimony:after { display: inline-block; width: 100%; } @media (min-width: 768px) { #last-testimony { margin: 0 -0px; } } #last-testimony .testimony, #last-testimony .client { height: 480px; } #last-testimony .client img { min-height: 480px; } #last-testimony .client { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 50%; padding: 0 15px; line-height: 0px; line-height: 0rem; overflow: hidden; } @media (max-width: 992px) { #last-testimony .client { width: 100%; } } #last-testimony .client img { z-index: 1; position: absolute; top: 0; left: 0; min-height: 100%; min-width: 100%; } #last-testimony .client .client-box { position: relative; z-index: 2; text-align: center; padding: 110px 20px 0 20px; color: #ffffff; } @media (min-width: 992px) { #last-testimony .client .client-box { padding-right: 7%; } } @media (min-width: 1200px) { #last-testimony .client .client-box { padding-right: 16%; } } @media (min-width: 1400px) { #last-testimony .client .client-box { padding-right: 23%; } } @media (min-width: 1600px) { #last-testimony .client .client-box { padding-right: 33%; } } #last-testimony .client .client-box .client-picto:before { font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e907"; font-size: 80px; font-size: 8rem; line-height: 80px; line-height: 8rem; display: block; } #last-testimony .client .client-box .client-picto { margin-bottom: 5px; min-height: 40px; } #last-testimony .client .client-box .client-title { display: inline-block; position: relative; padding-bottom: 5px; margin-bottom: 10px; font-family: 'worksans-regular'; font-weight: 500; font-size: 50px; font-size: 5rem; line-height: 50px; line-height: 5rem; font-weight: 700; letter-spacing: -3px; } #last-testimony .client .client-box .client-title:before { content: ""; position: absolute; bottom: -3px; left: 50%; height: 3px; width: 30px; margin-left: -15px; background: #ffffff; } #last-testimony .client .client-box .client-title:after { content: ""; position: absolute; bottom: -1px; left: 50%; height: 1px; width: 80px; margin-left: -40px; background: #ffffff; } #last-testimony .client .client-box .client-teaser { font-family: 'worksans-light'; font-weight: 100; font-size: 25px; font-size: 2.5rem; line-height: 25px; line-height: 2.5rem; margin: 10px 0 40px; } #last-testimony .client .client-box a.btn { min-width: 158px; background: #ffffff; border-color: #ffffff; color: #0d0d0d; margin-top: 10px; } #last-testimony .client .client-box a.btn:hover { background: transparent; color: #ffffff; } .testimony, .one-testimmony { font-size: initial; word-break: break-word; display: inline-block; vertical-align: top; width: 50%; padding: 0 15px; background: #9ab84c; padding: 110px 20px 0 20px; text-align: center; position: relative; } @media (max-width: 992px) { .testimony, .one-testimmony { width: 100%; } } @media (min-width: 992px) { .testimony, .one-testimmony { padding-left: 30px; } } @media (min-width: 1200px) { .testimony, .one-testimmony { padding-left: 5%; } } @media (min-width: 1400px) { .testimony, .one-testimmony { padding-left: 13%; } } @media (min-width: 1600px) { .testimony, .one-testimmony { padding-left: 17%; } } .testimony > a > p:not(.testimony-teaser), .one-testimmony > a > p:not(.testimony-teaser) { line-height: 20px; line-height: 2rem; } @media (min-width: 990px) { .testimony > a > p:not(.testimony-teaser), .one-testimmony > a > p:not(.testimony-teaser) { margin: 0 0 30px; } } .testimony:before, .one-testimmony:before { background: url("/public/images/fond-temoignage-mais.jpg") no-repeat 0 0; width: 100%; height: 100%; right: 0; } .testimony a, .one-testimmony a { display: inline-block; } .testimony span, .one-testimmony span { font-size: 14px; font-size: 1.4rem; } .testimony a.btn, .one-testimmony a.btn { background: #ffffff; border-color: #ffffff; color: #0d0d0d; margin-top: 30px; } .testimony a.btn:hover, .one-testimmony a.btn:hover { background: transparent; color: #ffffff; } .testimony .section-title span, .one-testimmony .section-title span { font-size: 22px; font-size: 2.2rem; padding: 10px 0; } .one-testimmony { width: 100%; padding: 50px 25% 30px 25%; background: none; } @media (max-width: 992px) { .one-testimmony { padding: 50px 15%; } } @media (max-width: 768px) { .one-testimmony { padding: 50px 5%; } } .one-testimmony .section-title { position: relative; } .one-testimmony .section-title:before, .one-testimmony .section-title:after { content: ""; position: absolute; background: #282d32; } .one-testimmony .section-title:before { width: 30px; height: 3px; bottom: -7px; right: 50%; margin-right: -15px; } .one-testimmony .section-title:after { width: 90px; height: 1px; bottom: -5px; right: 50%; margin-right: -45px; } .testimony-title { font-family: 'worksans-bold'; font-weight: 500; font-size: 22px; font-size: 2.2rem; text-transform: uppercase; color: #ffffff; padding-bottom: 5px; margin-bottom: 30px; position: relative; } .testimony-title:before { position: absolute; bottom: 0; left: 50%; width: 30px; height: 2px; margin-left: -15px; background: #ffffff; content: ""; } .testimony-title:after { position: absolute; bottom: 1px; left: 50%; width: 80px; height: 1px; margin-left: -39px; background: #ffffff; content: ""; } .one-testimony .testimony-title { color: #0d0d0d; } .testimony-teaser { font-family: 'worksans-light'; font-weight: 100; font-size: 27px; font-size: 2.7rem; line-height: 32px; line-height: 3.2rem; color: #0d0d0d; } @media (min-width: 990px) { body:not(#home) .testimony-teaser { margin: 0 0 30px; } } body#home .testimony-teaser { color: #ffffff; } .testimony-author { font-family: 'worksans-bold'; font-weight: 500; } .all-testimonies-btn { display: inline-block; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px; padding: 18px 24px; border: solid 1px #282d32; background: #282d32; font-family: 'worksans-bold'; font-weight: 500; font-size: 12px; font-size: 1.2rem; line-height: 11px; line-height: 1.1rem; text-transform: uppercase; color: #ffffff; } .all-testimonies-btn:hover { background: #002033; border: solid 1px #002033; color: #ffffff; } #slidistributeurs .all-testimonies-btn, #last-3-news .all-testimonies-btn, .all-testimonies-btn.btn-back { background: transparent; border-color: #d4d5d6; color: #0d0d0d; } #slidistributeurs .all-testimonies-btn:hover, #last-3-news .all-testimonies-btn:hover, .all-testimonies-btn.btn-back:hover { background: #002033; border: solid 1px #d4d5d6; color: #ffffff; } body#customers #slidistributeurs .all-testimonies-btn:hover, body#customers #last-3-news .all-testimonies-btn:hover, body#customers .all-testimonies-btn.btn-back:hover { background: #9ab84c; border: solid 1px #9ab84c; } .all-testimonies-btn.btn-back { position: relative; padding-left: 50px; } .all-testimonies-btn.btn-back:before { font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; font-size: 16px; font-size: 1.6rem; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); position: absolute; top: 50%; margin-top: -8px; left: 12px; } .all-testimonies-btn#btn-all-distributeurs:hover, .all-testimonies-btn#btn-all-news:hover { background: #4b545d !important; color: #ffffff; } /*---- Rangée desitributeurs ----*/ .distributeurs { margin-top: -125px; } .distributeurs-filters { background-color: #e9eaea; padding: 120px 0 20px; } .distributeurs-row { font-size: 0; padding: 0; } .distributeurs-row:after { display: inline-block; width: 100%; } @media (min-width: 768px) { .distributeurs-row { margin: 0 -0px; } } .distributeurs-filters-select { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 41.66666666666667%; padding: 0 0px; padding-top: 150px; } @media (max-width: 768px) { .distributeurs-filters-select { width: 100%; } } @media (max-width: 768px) { .distributeurs-filters-select { padding-top: 0px; margin-bottom: 35px; } } .distributeurs-filters-map { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 58.333333333333336%; padding: 0 0px; height: 525px; } @media (max-width: 768px) { .distributeurs-filters-map { width: 100%; } } .distributeurs #map { height: 100%; width: 100%; } .distributeurs #map .jvectormap-container { height: 100%; width: 100%; } @media (max-width: 992px) { .distributeurs #map { height: 100%; width: 100%; padding: 0 0 0 30px; } } .distributeurs-select-title { color: #0d0d0d; text-align: center; } .distributeurs-select-block { background-color: #282d32; border-radius: 10px; text-align: center; padding: 20px; } .distributeurs-select-block span { font-family: 'worksans-bold'; font-weight: 500; font-size: 11px; font-size: 1.1rem; line-height: 12px; line-height: 1.2rem; text-transform: uppercase; color: #ffffff; display: block; margin: 0 0 10px; } .distributeurs-select-block form { text-align: center; } .distributeurs-select { background-color: #282d32; border: 1px solid #ffffff; width: 50%; border-radius: 25px; padding: 12px 42px 11px 20px; font-family: 'worksans-bold'; font-weight: 500; font-size: 11px; font-size: 1.1rem; line-height: 12px; line-height: 1.2rem; text-transform: uppercase; color: #ffffff; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(/public/images/select-arrow.png) no-repeat right 4px; } .distributeurs-select:hover { cursor: pointer; } .distributeurs-select option { text-align: left; background-color: #282d32; } @media (max-width: 992px) { .distributeurs-select { width: 90%; } } @media (max-width: 768px) { .distributeurs-select { width: 50%; } } .distributeurs-list-title { font-family: 'worksans-bold'; font-weight: 500; text-transform: uppercase; font-size: 22px; font-size: 2.2rem; color: #0d0d0d; } .distributeurs-ul { list-style: none; padding: 0; } .distributeurs-li { border-bottom: 1px solid #282d32; padding: 20px 5px; } .distributeurs-img-container { display: inline-block; vertical-align: middle; margin: 0 0 0 -4px; text-align: center; width: 12%; } @media (max-width: 480px) { .distributeurs-img-container { display: block; width: 100%; text-align: center; margin: 0 0 15px; } } .distributeurs-img { max-width: 100%; height: auto; display: block; margin: 0 auto; } @media (max-width: 480px) { .distributeurs-img { margin: 0 auto; } } .distributeurs-li-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 0 0 -4px; width: 88%; padding: 0 200px 0 35px; } .distributeurs-li-content.full { width: 100%; padding: 0 200px 0 0px; } @media (max-width: 768px) { .distributeurs-li-content { padding: 0 15px; } .distributeurs-li-content.full { padding: 0 15px; } } @media (max-width: 480px) { .distributeurs-li-content { display: block; width: 100%; text-align: center; } .distributeurs-li-content.full { display: block; width: 100%; text-align: center; } } .distributeurs-name { font-family: 'worksans-bold'; font-weight: 500; text-transform: uppercase; font-size: 22px; font-size: 2.2rem; line-height: 22px; line-height: 2.2rem; color: #0d0d0d; margin: 0 0 6px; } .distributeurs-dept span { display: inline; font-family: 'worksans-regular'; font-weight: 500; font-size: 11px; font-size: 1.1rem; line-height: 12px; line-height: 1.2rem; color: #0d0d0d; } .distributeurs-dept ul { list-style: none; padding: 0; display: inline; } .distributeurs-dept li { display: inline-block; font-family: 'worksans-regular'; font-weight: 500; font-size: 17px; font-size: 1.7rem; line-height: 20px; line-height: 2rem; color: #0d0d0d; padding: 0 6px 0 0; margin: 0 4px 0 0; position: relative; } .distributeurs-dept li:before { content: ","; font-family: 'worksans-regular'; font-weight: 500; font-size: 17px; font-size: 1.7rem; line-height: 20px; line-height: 2rem; color: #0d0d0d; position: absolute; right: 0; bottom: 0; } .distributeurs-dept li:last-child:before { content: "."; } .distributeurs-address { font-style: normal; } .distributeurs-address span { font-family: 'worksans-regular'; font-weight: 500; font-size: 17px; font-size: 1.7rem; line-height: 20px; line-height: 2rem; color: #0d0d0d; } .distributeurs-phone:hover { color: #002033; text-decoration: underline; } .distributeurs-url-wrapper { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; width: 90%; } .distributeurs-website { font-family: 'worksans-regular'; font-weight: 500; font-weight: 600; font-size: 17px; font-size: 1.7rem; line-height: 20px; line-height: 2rem; color: #0d0d0d; } .distributeurs-website:hover { color: #002033; text-decoration: underline; } .distributeurs-contact-container { position: absolute; bottom: 0; right: 0; } @media (max-width: 480px) { .distributeurs-contact-container { display: block; position: relative; margin: 15px 0 10px; text-align: center; } } .distributeurs-contact { display: inline-block; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px; padding: 18px 24px; border: solid 1px #282d32; background: #282d32; font-family: 'worksans-bold'; font-weight: 500; font-size: 12px; font-size: 1.2rem; line-height: 11px; line-height: 1.1rem; text-transform: uppercase; color: #ffffff; padding: 18px 20px 18px 50px; position: relative; } .distributeurs-contact:hover { background: #002033; border: solid 1px #002033; color: #ffffff; } #slidistributeurs .distributeurs-contact, #last-3-news .distributeurs-contact, .distributeurs-contact.btn-back { background: transparent; border-color: #d4d5d6; color: #0d0d0d; } #slidistributeurs .distributeurs-contact:hover, #last-3-news .distributeurs-contact:hover, .distributeurs-contact.btn-back:hover { background: #002033; border: solid 1px #d4d5d6; color: #ffffff; } body#customers #slidistributeurs .distributeurs-contact:hover, body#customers #last-3-news .distributeurs-contact:hover, body#customers .distributeurs-contact.btn-back:hover { background: #9ab84c; border: solid 1px #9ab84c; } .distributeurs-contact.btn-back { position: relative; padding-left: 50px; } .distributeurs-contact.btn-back:before { font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; font-size: 16px; font-size: 1.6rem; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); position: absolute; top: 50%; margin-top: -8px; left: 12px; } .distributeurs-contact#btn-all-distributeurs:hover, .distributeurs-contact#btn-all-news:hover { background: #4b545d !important; color: #ffffff; } .distributeurs-contact p { margin: 0; font-size: 12px; font-size: 1.2rem; line-height: 12px; line-height: 1.2rem; } .distributeurs-contact:before { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; font-family: 'icomoon'; content: "\e90c"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size: 12px; font-size: 1.2rem; line-height: 12px; line-height: 1.2rem; color: #ffffff; position: absolute; left: 18px; top: 17px; } .distributeurs-pages { display: block; text-align: center; margin: 35px 0 20px; } .distributeurs-pages-a { vertical-align: middle; display: inline-block; font-family: 'worksans-regular'; font-weight: 500; font-size: 20px; font-size: 2rem; line-height: 20px; line-height: 2rem; margin: 0 5px; color: #002033; } .distributeurs-pages-span { vertical-align: middle; display: inline-block; font-family: 'worksans-regular'; font-weight: 500; font-size: 20px; font-size: 2rem; line-height: 20px; line-height: 2rem; margin: 0 5px; color: #282d32; } .distributeurs-pages-next { margin: 0 0 0 35px; height: 30px; vertical-align: middle; display: inline-block; position: relative; } .distributeurs-pages-next:before { font-family: 'icomoon'; content: "\e90d"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size: 30px; font-size: 3rem; line-height: 30px; line-height: 3rem; color: #282d32; position: absolute; top: 0; left: 0; } .distributeurs-pages-prev { margin: 0 35px 0 0; height: 30px; vertical-align: middle; display: inline-block; position: relative; } .distributeurs-pages-prev:before { font-family: 'icomoon'; content: "\e90d"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size: 30px; font-size: 3rem; line-height: 30px; line-height: 3rem; color: #282d32; position: absolute; top: 0; left: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .distributeurs-noresult { padding: 20px 0; font-family: 'worksans-medium'; font-weight: 300; font-size: 20px; font-size: 2rem; line-height: 22px; line-height: 2.2rem; } .distributeur { background-color: #ffffff; } .distributeur h2 { text-align: center; } .distributeur h2:before { left: 0; right: 0; margin: 0 auto; } .distributeur h2:after { left: 0; right: 0; margin: 0 auto; } .distributeur-text { text-align: center; font-family: 'worksans-regular'; font-weight: 500; font-size: 15px; font-size: 1.5rem; line-height: 20px; line-height: 2rem; margin: 0 0 20px; } .distributeur .cms_forms { padding: 15px 25%; background-color: #f2f2f2; } @media (max-width: 992px) { .distributeur .cms_forms { padding: 15px 15%; } } @media (max-width: 768px) { .distributeur .cms_forms { padding: 15px 5%; } } .distributeur .cms_forms_error_msg, .distributeur .cms_forms_msg { text-align: left; font-family: 'worksans-regular'; font-weight: 500; font-size: 15px; font-size: 1.5rem; line-height: 20px; line-height: 2rem; color: #002033; border: 1px solid #002033; margin: 0 0 15px; padding: 10px; text-align: center; } .distributeur .cms_forms_error_msg ul, .distributeur .cms_forms_msg ul { padding: 0 40px; } .distributeur .cms_forms_error_msg li, .distributeur .cms_forms_msg li { text-align: left; font-family: 'worksans-regular'; font-weight: 500; font-size: 15px; font-size: 1.5rem; line-height: 20px; line-height: 2rem; } .distributeur table { width: 100%; } .distributeur label { font-family: 'worksans-bold'; font-weight: 500; font-size: 13px; font-size: 1.3rem; line-height: 14px; line-height: 1.4rem; text-transform: uppercase; text-align: left; display: block; } .distributeur input[type="text"] { background-color: #ffffff; box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.35) inset; width: 90%; border: 0; height: 36px; margin: 0 0 15px; padding-left: 5px; } .distributeur textarea { background-color: #ffffff; box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.35) inset; border: none; width: 90%; padding: 5px; margin: 0 0 15px; } .distributeur input[type="submit"] { display: inline-block; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px; padding: 18px 24px; border: solid 1px #282d32; background: #282d32; font-family: 'worksans-bold'; font-weight: 500; font-size: 12px; font-size: 1.2rem; line-height: 11px; line-height: 1.1rem; text-transform: uppercase; color: #ffffff; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; margin-left: 26%; } .distributeur input[type="submit"]:hover { background: #002033; border: solid 1px #002033; color: #ffffff; } #slidistributeurs .distributeur input[type="submit"], #last-3-news .distributeur input[type="submit"], .distributeur input[type="submit"].btn-back { background: transparent; border-color: #d4d5d6; color: #0d0d0d; } #slidistributeurs .distributeur input[type="submit"]:hover, #last-3-news .distributeur input[type="submit"]:hover, .distributeur input[type="submit"].btn-back:hover { background: #002033; border: solid 1px #d4d5d6; color: #ffffff; } body#customers #slidistributeurs .distributeur input[type="submit"]:hover, body#customers #last-3-news .distributeur input[type="submit"]:hover, body#customers .distributeur input[type="submit"].btn-back:hover { background: #9ab84c; border: solid 1px #9ab84c; } .distributeur input[type="submit"].btn-back { position: relative; padding-left: 50px; } .distributeur input[type="submit"].btn-back:before { font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; font-size: 16px; font-size: 1.6rem; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); position: absolute; top: 50%; margin-top: -8px; left: 12px; } .distributeur input[type="submit"]#btn-all-distributeurs:hover, .distributeur input[type="submit"]#btn-all-news:hover { background: #4b545d !important; color: #ffffff; } .distributeur input[type="submit"]:hover { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; cursor: pointer; } @media (max-width: 480px) { .distributeur input[type="submit"] { margin-left: 0; } } /*---- rangée contenant le tableau des cultures ----*/ .tableau-conseils-h3 { font-family: 'worksans-medium'; font-weight: 300; font-size: 22px; font-size: 2.2rem; line-height: 28px; line-height: 2.8rem; color: #d2900e; padding: 0 15% 0 0; } .tableau-conseils-legends { padding: 0; list-style: none; } .tableau-conseils-legend { display: inline-block; width: 80px; height: 80px; border-radius: 40px; color: #ffffff; text-transform: uppercase; font-family: 'worksans-medium'; font-weight: 300; font-size: 15px; font-size: 1.5rem; line-height: 80px; line-height: 8rem; text-align: center; } .tableau-conseils-legend.ble { background-color: #6ba900; } .tableau-conseils-legend.orge { background-color: #ea8315; } .tableau-conseils-legend.colza { background-color: #eaba15; } .tableau-conseils-legend.triticale { background-color: #002033; } .tableau-conseils table { border-collapse: collapse; margin: 0 0 30px; border: 0; } .tableau-conseils thead { border: 0; } .tableau-conseils tbody { border: 0; } .tableau-conseils tr { border: 0; } .tableau-conseils th { border: 0; text-align: center; font-family: 'worksans-medium'; font-weight: 300; font-size: 16px; font-size: 1.6rem; text-transform: uppercase; padding: 10px 0; width: 4%; } .tableau-conseils th.empty-th { width: 23%; } @media (max-width: 480px) { .tableau-conseils th { font-size: 10px; font-size: 1rem; } .tableau-conseils th.empty-th { width: 15%; } } .tableau-conseils td { border: 1px solid #d6d6d6; text-align: center; height: 50px; } .tableau-conseils td.td-titles { border-left: none; position: relative; } .tableau-conseils td span { display: inline-block; width: 20px; height: 20px; border-radius: 10px; margin: 6px 2px 0; } .tableau-conseils td span.culture-29 { background-color: #6ba900; } .tableau-conseils td span.culture-30 { background-color: #ea8315; } .tableau-conseils td span.culture-31 { background-color: #eaba15; } .tableau-conseils td span.culture-180 { background-color: #002033; } @media (max-width: 480px) { .tableau-conseils td span { margin: 2px 2px 0; } } .tableau-conseils td .title-description { position: absolute; } .tableau-conseils .title-link { position: relative; text-align: left; display: block; padding: 0 60px 0 5px; font-family: 'worksans-medium'; font-weight: 300; font-size: 17px; font-size: 1.7rem; } @media (max-width: 480px) { .tableau-conseils .title-link { font-size: 13px; font-size: 1.3rem; } } .tableau-conseils .icon-cont-hover { position: absolute; right: 0px; top: 50%; margin-top: -13px; display: block; width: 26px; height: 26px; border-radius: 13px; background-color: #ffffff; text-align: center; border: 2px solid #ffffff; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .tableau-conseils .icon-cont-hover:hover { cursor: pointer; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; border: 2px solid #282d32; width: 26px; height: 26px; border-radius: 13px; } .tableau-conseils .icon-cont-hover:hover .icon-cont { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 1; } @media (max-width: 480px) { .tableau-conseils .icon-cont-hover { top: 50%; margin-top: -13px; } } .tableau-conseils .icon-cont { display: block; width: 18px; height: 18px; border-radius: 9px; background-color: #282d32; color: #ffffff; text-align: center; font-family: 'worksans-bold'; font-weight: 500; font-size: 18px; font-size: 1.8rem; line-height: 20px; line-height: 2rem; opacity: 0.3; margin: 2px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .tableau-conseils .modulated { position: absolute; right: 28px; top: 50%; margin-top: -15px; display: block; width: 30px; height: 30px; border-radius: 15px; background-color: #ffffff; text-align: center; border: 2px solid #ffffff; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .tableau-conseils .modulated:hover { cursor: pointer; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; border: 2px solid #282d32; width: 30px; height: 30px; border-radius: 15px; } .tableau-conseils .modulated:hover .module-btn { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 1; } @media (max-width: 480px) { .tableau-conseils .modulated { top: 50%; margin-top: -13px; } } .tableau-conseils .module-btn { display: block; width: 22px; height: 22px; border-radius: 11px; background-color: #282d32; color: #ffffff; text-align: center; padding: 0; font-family: 'worksans-bold'; font-weight: 500; font-size: 16px; font-size: 1.6rem; line-height: 24px; line-height: 2.4rem; opacity: 0.3; margin: 2px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .tableau-conseils-txt a { font-family: 'worksans-medium'; font-weight: 300; } .tableau-conseils-txt ol { list-style: none; padding: 20px 0 0; } .tableau-conseils-txt ol li { margin: 0 0 25px; padding: 8px 0 8px 100px; position: relative; } .tableau-conseils-txt ol li:before { color: #ffffff; font-size: 20px; line-height: 40px; display: block; text-align: center; width: 40px; height: 40px; border-radius: 20px; background-color: #e5a322; position: absolute; top: 50%; margin-top: -20px; left: 15px; } .tableau-conseils-txt ol li:last-child { margin: 0; } .tableau-conseils-txt ol li:nth-child(1):before { content: "1"; } .tableau-conseils-txt ol li:nth-child(2):before { content: "2"; } .tableau-conseils-txt ol li:nth-child(3):before { content: "3"; } .tableau-conseils-txt ol li:nth-child(4):before { content: "4"; } .tableau-conseils-txt ol li:nth-child(5):before { content: "5"; } .tableau-popup-modulated { display: block; position: absolute; bottom: 42px; left: -112px; } .tableau-popup-modulated .tableau-popup-content { width: 250px; } .tableau-popup { display: block; position: absolute; bottom: 40px; left: -165px; } .tableau-popup-content { display: block; background-color: #282d32; padding: 20px; position: relative; width: 350px; text-align: center; border-radius: 10px; } .tableau-popup-content p { color: #ffffff; font-family: 'worksans-regular'; font-weight: 500; font-size: 14px; font-size: 1.4rem; line-height: 19px; line-height: 1.9rem; margin: 0; } .tableau-popup-content:after { font-family: 'icomoon'; content: "\e905"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; color: #282d32; font-size: 30px; font-size: 3rem; line-height: 30px; line-height: 3rem; position: absolute; bottom: -20px; left: 0; right: 0; margin: 0 auto; } @media (max-width: 768px) { .tableau-popup-content { width: 250px; left: 50px; } } .tableau-popup-txt { text-align: left; } .tableau-popup-close { position: absolute; top: 8px; right: 8px; display: block; width: 12px; height: 12px; } .tableau-popup-close:hover { cursor: pointer; } .tableau-popup-close-icon { display: block; position: relative; } .tableau-popup-close-icon:before { font-family: 'icomoon'; content: "\e900"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; position: absolute; top: 0; left: 0; color: #ffffff; font-size: 12px; font-size: 1.2rem; line-height: 12px; line-height: 1.2rem; } /*--- TEMOIGNAGES ----*/ .temoignages { background-color: #ffffff; padding: 30px 0; } .temoignages-row { font-size: 0; padding: 0; } .temoignages-row:after { display: inline-block; width: 100%; } @media (min-width: 768px) { .temoignages-row { margin: 0 -10px; } } .temoignages-li { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 50%; padding: 0 10px; } .temoignages-link { height: 100%; display: block; padding: 30px 15px 50px; background-color: #ffffff; border: 1px solid rgba(40, 45, 50, 0.5); position: relative; text-align: center; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .temoignages-link:before { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; font-family: 'icomoon'; content: "\e901"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; color: #282d32; font-size: 20px; font-size: 2rem; line-height: 20px; line-height: 2rem; position: absolute; left: 50%; bottom: 10px; margin-left: -20px; opacity: 0.5; } .temoignages-link:hover { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; border: 1px solid #282d32; } .temoignages-link:hover:before { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; margin-left: 0; opacity: 1; } .temoignages-h2 { color: #282d32; font-family: 'worksans-light'; font-weight: 100; margin: 0 0 20px; padding: 0; text-align: center; } .temoignages-h2:before { display: none; } .temoignages-h2:after { display: none; } .temoignages-author { color: #282d32; font-family: 'worksans-medium'; font-weight: 300; font-size: 17px; font-size: 1.7rem; line-height: 20px; line-height: 2rem; display: block; text-align: center; margin: 0 0 10px; } .temoignages-txt { color: #282d32; text-align: left; font-family: 'worksans-regular'; font-weight: 500; font-size: 15px; font-size: 1.5rem; line-height: 20px; line-height: 2rem; } @media (max-width: 480px) { .temoignage { padding: 20px 0 0; } } .temoignage-right { float: right; margin: 50px 0 30px 30px; max-width: 60%; } @media (max-width: 480px) { .temoignage-right { float: none; text-align: center; margin: 0; max-width: 100%; } } .temoignage-img { display: block; height: auto; max-width: 100%; } @media (max-width: 480px) { .temoignage-img { margin: 0 auto; } } .temoignage-left h3 { color: #9ab84c; } /*---- Rangée clients - nos distributeurs ----*/ .clients { padding: 40px 0 20px; } .clients-row { font-size: 0; padding: 0; list-style: none; } .clients-row:after { display: inline-block; width: 100%; } @media (min-width: 768px) { .clients-row { margin: 0 -10px; } } .clients-li { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 25%; padding: 0 10px; vertical-align: bottom; margin-bottom: 20px; text-align: center; vertical-align: middle; line-height: 150px; } @media (max-width: 992px) { .clients-li { width: 33.333333333333336%; } } @media (max-width: 768px) { .clients-li { width: 50%; } } @media (max-width: 480px) { .clients-li { width: 100%; } } .clients-li-border { display: block; border: 1px solid rgba(40, 45, 50, 0.1); padding: 15px 0; } .clients-a:hover { border: 1px solid #282d32; } .clients-logo-cont { display: inline-block; vertical-align: middle; max-width: 200px; } .clients-logo { display: block; max-width: 100%; max-height: 150px; margin: 0 auto; } #links { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; padding: 45px 0 20px; } @media (min-width: 768px) { #links { width: 750px; } } @media (min-width: 992px) { #links { width: 970px; } } @media (min-width: 1200px) { #links { width: 1170px; } } #links .inner { font-size: 0; } #links .inner:after { display: inline-block; width: 100%; } @media (min-width: 768px) { #links .inner { margin: 0 -15px; } } #links .inner #links-left { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 41.66666666666667%; padding: 0 15px; } @media (max-width: 992px) { #links .inner #links-left { width: 100%; } } #links .inner #links-left .links-title { font-family: 'worksans-bold'; font-weight: 500; font-size: 14px; font-size: 1.4rem; text-transform: uppercase; border-bottom: solid 5px #0d0d0d; padding-bottom: 2px; margin: -15px 0 20px; color: #0d0d0d; } #links .inner #links-left ul li { font-size: 16px; font-size: 1.6rem; } #links .inner #links-left ul li:before { border-left-color: #282d32; top: 7px; } #links .inner #links-right { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 58.333333333333336%; padding: 0 15px; background: #f2f2f2; color: #4b545d; text-align: center; padding: 35px 20px; } @media (max-width: 992px) { #links .inner #links-right { width: 100%; } } #links .inner #links-right p { font-family: 'worksans-light'; font-weight: 100; font-size: 23px; font-size: 2.3rem; line-height: 25px; line-height: 2.5rem; margin: 0; } #links .inner #links-right p .farmstar { font-size: 22px; font-size: 2.2rem; line-height: 25px; line-height: 2.5rem; font-family: 'worksans-regular'; font-weight: 500; } #links .inner #links-right p .farmstar .strong { font-size: 22px; font-size: 2.2rem; font-family: 'worksans-regular'; font-weight: 500; } #links .inner #links-right p span { font-family: 'worksans-medium'; font-weight: 300; font-size: 15px; font-size: 1.5rem; line-height: 25px; line-height: 2.5rem; } #links .inner #links-right .btn { margin-top: 20px; background: #0d0d0d; border-color: #0d0d0d; color: #ffffff; text-decoration: none; } #links .inner #links-right .btn p { font-family: 'worksans-regular'; font-weight: 500; font-weight: 600; font-size: 13px; font-size: 1.3rem; line-height: 18px; line-height: 1.8rem; } #links .inner #links-right .btn:hover { background: #4b545d; border-color: #4b545d; } #links .inner #links-right.links-middle { display: block; margin: 0 auto; } .timeline { position: relative; } .timeline .timeline-feuille-1, .timeline .timeline-feuille-2, .timeline .timeline-feuille-3, .timeline .timeline-feuille-4 { position: absolute; left: 50%; } .timeline .timeline-feuille-1.pos-0, .timeline .timeline-feuille-2.pos-0, .timeline .timeline-feuille-3.pos-0, .timeline .timeline-feuille-4.pos-0 { display: none; } .timeline .timeline-feuille-1.pos-1 { top: -11px; margin-left: 5px; -webkit-transform: rotate(74deg); -moz-transform: rotate(74deg); -ms-transform: rotate(74deg); -o-transform: rotate(74deg); transform: rotate(74deg); fill: #9ab84c; } .timeline .timeline-feuille-1.pos-1 svg { height: 45px; } .timeline .timeline-feuille-1.pos-2 { top: 65px; margin-left: 56px; -webkit-transform: rotate(144deg); -moz-transform: rotate(144deg); -ms-transform: rotate(144deg); -o-transform: rotate(144deg); transform: rotate(144deg); fill: #9ab84c; } .timeline .timeline-feuille-1.pos-2 svg { width: 47px; } .timeline .timeline-feuille-1.pos-3 { top: 86px; margin-left: -100px; -webkit-transform: rotate(284deg); -moz-transform: rotate(284deg); -ms-transform: rotate(284deg); -o-transform: rotate(284deg); transform: rotate(284deg); fill: #9ab84c; } .timeline .timeline-feuille-1.pos-3 svg { width: 50px; } .timeline .timeline-feuille-1.pos-4 { top: -1px; margin-left: -103px; -webkit-transform: rotate(361deg); -moz-transform: rotate(361deg); -ms-transform: rotate(361deg); -o-transform: rotate(361deg); transform: rotate(361deg); fill: #9ab84c; } .timeline .timeline-feuille-1.pos-4 svg { width: 60px; } .timeline .timeline-feuille-2.pos-1 { top: -8px; margin-left: 5px; -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); -ms-transform: rotate(-12deg); -o-transform: rotate(-12deg); transform: rotate(-12deg); fill: #9ab84c; } .timeline .timeline-feuille-2.pos-1 svg { height: 45px; } .timeline .timeline-feuille-2.pos-2 { top: 71px; margin-left: 55px; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); fill: #9ab84c; } .timeline .timeline-feuille-2.pos-2 svg { width: 52px; } .timeline .timeline-feuille-2.pos-3 { top: 86px; margin-left: -110px; -webkit-transform: rotate(205deg); -moz-transform: rotate(205deg); -ms-transform: rotate(205deg); -o-transform: rotate(205deg); transform: rotate(205deg); fill: #9ab84c; } .timeline .timeline-feuille-2.pos-3 svg { width: 60px; } .timeline .timeline-feuille-2.pos-4 { width: 60px; top: 20px; margin-left: -105px; -webkit-transform: rotate(254deg); -moz-transform: rotate(254deg); -ms-transform: rotate(254deg); -o-transform: rotate(254deg); transform: rotate(254deg); fill: #9ab84c; } .timeline .timeline-feuille-2.pos-4 svg { width: 60px; } .timeline .timeline-feuille-3.pos-1 { top: -4px; margin-left: 5px; -webkit-transform: rotate(-59deg); -moz-transform: rotate(-59deg); -ms-transform: rotate(-59deg); -o-transform: rotate(-59deg); transform: rotate(-59deg); fill: #9ab84c; } .timeline .timeline-feuille-3.pos-1 svg { height: 45px; } .timeline .timeline-feuille-3.pos-2 { top: 73px; margin-left: 48px; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); fill: #9ab84c; } .timeline .timeline-feuille-3.pos-2 svg { width: 47px; } .timeline .timeline-feuille-3.pos-3 { top: 86px; margin-left: -102px; -webkit-transform: rotate(156deg); -moz-transform: rotate(156deg); -ms-transform: rotate(156deg); -o-transform: rotate(156deg); transform: rotate(156deg); fill: #9ab84c; } .timeline .timeline-feuille-3.pos-3 svg { width: 60px; } .timeline .timeline-feuille-3.pos-4 { top: 20px; margin-left: -98px; -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); -ms-transform: rotate(210deg); -o-transform: rotate(210deg); transform: rotate(210deg); fill: #9ab84c; } .timeline .timeline-feuille-3.pos-4 svg { width: 60px; } .timeline .timeline-feuille-4.pos-1 { top: -14px; margin-left: 19px; -webkit-transform: rotate(-103deg); -moz-transform: rotate(-103deg); -ms-transform: rotate(-103deg); -o-transform: rotate(-103deg); transform: rotate(-103deg); fill: #9ab84c; } .timeline .timeline-feuille-4.pos-1 svg { height: 30px; } .timeline .timeline-feuille-4.pos-2 { top: 88px; margin-left: 69px; -webkit-transform: rotate(-28deg); -moz-transform: rotate(-28deg); -ms-transform: rotate(-28deg); -o-transform: rotate(-28deg); transform: rotate(-28deg); fill: #9ab84c; } .timeline .timeline-feuille-4.pos-2 svg { width: 36px; } .timeline .timeline-feuille-4.pos-3 { top: 96px; margin-left: -100px; -webkit-transform: rotate(117deg); -moz-transform: rotate(117deg); -ms-transform: rotate(117deg); -o-transform: rotate(117deg); transform: rotate(117deg); fill: #9ab84c; } .timeline .timeline-feuille-4.pos-3 svg { width: 34px; } .timeline .timeline-feuille-4.pos-4 { top: 16px; margin-left: -90px; -webkit-transform: rotate(170deg); -moz-transform: rotate(170deg); -ms-transform: rotate(170deg); -o-transform: rotate(170deg); transform: rotate(170deg); fill: #9ab84c; } .timeline .timeline-feuille-4.pos-4 svg { width: 34px; } .timeline-inner { position: relative; padding-bottom: 15px; text-align: center; } .timeline-inner:before { position: absolute; content: ""; top: 0 ; left: 50%; height: 100%; width: 1px; border-left: dotted 2px #9ab84c; } .timeline-inner .timeline-annee { position: relative; height: 170px; line-height: 100px; text-align: center; font-family: 'worksans-medium'; font-weight: 300; padding-top: 35px; padding-bottom: 20px; font-size: 24px; font-size: 2.4rem; } .timeline-inner .timeline-annee .annee { position: relative; display: inline-block; width: 80px; z-index: 5; color: #ffffff; } .timeline-inner .timeline-annee:before, .timeline-inner .timeline-annee:after { position: absolute; content: ""; } .timeline-inner .timeline-annee:before { width: 130px; height: 130px; -webkit-border-radius: 130px; -moz-border-radius: 130px; border-radius: 130px; margin-left: -65px; background: rgba(154, 184, 76, 0.2); top: 20px; left: 50%; z-index: 3; } .timeline-inner .timeline-annee:after { width: 100px; height: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; margin-left: -50px; background: #9ab84c; top: 35px; left: 50%; z-index: 4; } .timeline-inner .timeline-texte { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 66.66666666666667%; padding: 0 15px; background: #EAF1CE; padding: 20px; line-height: 20px; line-height: 2rem; } .timeline-inner .timeline-texte p { margin: 0; line-height: 20px; line-height: 2rem; } .timeline-first .timeline-inner:before { top: 50%; height: 50%; } /*-- Rangée sitemap --*/ .sitemap { padding-top: 40px; } .sitemap ul { list-style: none; padding: 0; } .sitemap ul.CMS_lvl2 { font-size: 0; } .sitemap ul.CMS_lvl2:after { display: inline-block; width: 100%; } @media (min-width: 768px) { .sitemap ul.CMS_lvl2 { margin: 0 -10px; } } .sitemap ul.CMS_lvl3 { margin: 0 0 5px; } .sitemap li.CMS_lvl2 { font-size: initial; position: relative; word-break: break-word; display: inline-block; vertical-align: top; width: 25%; padding: 0 10px; margin-bottom: 25px; border-right: 1px dotted #282d32; border-bottom: 1px dotted #282d32; min-height: 200px; } @media (max-width: 768px) { .sitemap li.CMS_lvl2 { width: 50%; } } @media (max-width: 480px) { .sitemap li.CMS_lvl2 { width: 100%; } } .sitemap li.CMS_lvl2:nth-child(4), .sitemap li.CMS_lvl2:nth-child(8), .sitemap li.CMS_lvl2:nth-child(12) { border-right: 0; } @media (max-width: 992px) { .sitemap li.CMS_lvl2 { min-height: 250px; } } @media (max-width: 768px) { .sitemap li.CMS_lvl2 { min-height: 250px; } .sitemap li.CMS_lvl2:nth-child(2), .sitemap li.CMS_lvl2:nth-child(4), .sitemap li.CMS_lvl2:nth-child(6), .sitemap li.CMS_lvl2:nth-child(8), .sitemap li.CMS_lvl2:nth-child(10), .sitemap li.CMS_lvl2:nth-child(12), .sitemap li.CMS_lvl2:nth-child(14) { border-right: 0; } } @media (max-width: 480px) { .sitemap li.CMS_lvl2 { min-height: 0; border-right: 0; } } .sitemap li.CMS_lvl3 { margin: 0 0 10px; } .sitemap li.CMS_lvl4 { padding: 0 0 0 10px; } .sitemap li.testimonies, .sitemap li.erreur-404 { display: none; } .sitemap a { padding: 0 10px; } .sitemap a.CMS_lvl2 { padding: 0 10px 10px; margin: 0 0 10px; font-family: 'worksans-medium'; font-weight: 300; font-size: 20px; font-size: 2rem; line-height: 24px; line-height: 2.4rem; text-transform: uppercase; display: block; position: relative; } .sitemap a.CMS_lvl2:before { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; content: ""; width: 80px; height: 2px; background-color: #282d32; position: absolute; left: 10px; bottom: 0; } .sitemap a.CMS_lvl2:hover:before { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; width: 140px; } .sitemap a.CMS_lvl3 { display: block; font-size: 16px; font-size: 1.6rem; line-height: 20px; line-height: 2rem; } .sitemap a.CMS_lvl3:hover { text-decoration: underline; } .sitemap a.CMS_lvl4 { font-size: 13px; font-size: 1.3rem; } /*libs externes*/ /** * BxSlider v4.1.2 - Fully loaded, responsive content slider * http://bxslider.com * * Written by: Steven Wanderski, 2014 * http://stevenwanderski.com * (while drinking Belgian ales and listening to jazz) * * CEO and founder of bxCreative, LTD * http://bxcreative.com */ /** RESET AND LAYOUT ===================================*/ .bx-wrapper { position: relative; margin: 0; padding: 0; *zoom: 1; } .bx-wrapper img { width: 100%; display: block; } /** THEME ===================================*/ .bx-wrapper .bx-viewport { background: #fff; /*fix other elements on the page moving (on Chrome)*/ -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0); } /* .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; } */ /* LOADER */ .bx-wrapper .bx-loading { min-height: 50px; background: url(../images/loader.svg) center center no-repeat #ffffff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } /* PAGER */ /* .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px; } .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager.bx-default-pager a { background: #666; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; } */ /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 20px; } .bx-wrapper .bx-next { right: 20px; } .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; outline: 0; width: 42px; height: 42px; line-height: 42px; margin-top: -21px; text-align: center; color: #FFFFFF; z-index: 9999; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(images/controls.png) -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(images/controls.png) -86px -44px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } /* IMAGE CAPTIONS */ .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666\9; background: rgba(80, 80, 80, 0.75); width: 100%; } .bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; } /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -16px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; font-size: 14px; font-size: 1.4rem; color: #F2F2F2; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } /*homepage*/ #homeslider { position: relative; overflow: hidden; } @media (min-width: 992px) { #homeslider { max-height: 630px; } } @media (max-width: 992px) { #homeslider { height: 700px; } } #homeslider ul { margin: 0; padding: 0; } #homeslider ul li img { min-width: 100%; width: auto; } #homeslider .bx-controls { z-index: 999; } #homeslider .bx-controls-direction a { z-index: 999; visibility: hidden; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; filter: alpha(opacity=0); display: block; top: 315px; margin-top: -40px; width: 80px; height: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; background: rgba(255, 255, 255, 0.15); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 992px) { #homeslider .bx-controls-direction a { top: 55px ; visibility: visible ; -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; filter: alpha(opacity=100); } } #homeslider .bx-controls-direction a:before { color: #ffffff; font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e901"; font-size: 28px; font-size: 2.8rem; position: absolute; } #homeslider .bx-controls-direction a.bx-prev, #homeslider .bx-controls-direction a.bx-next { cursor: pointer; } #homeslider .bx-controls-direction a.bx-prev:before, #homeslider .bx-controls-direction a.bx-next:before { top: 26px; left: 19px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } #homeslider .bx-controls-direction a.bx-prev:hover:before, #homeslider .bx-controls-direction a.bx-next:hover:before { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); transform: scale(1.08); } #homeslider .bx-controls-direction a.bx-prev { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); left: 15%; } #homeslider .bx-controls-direction a.bx-prev:before { top: 24px; } @media (max-width: 1400px) { #homeslider .bx-controls-direction a.bx-prev { left: 10%; } } @media (max-width: 1200px) { #homeslider .bx-controls-direction a.bx-prev { left: 90px; } } @media (max-width: 992px) { #homeslider .bx-controls-direction a.bx-prev { left: 10px; } } #homeslider .bx-controls-direction a.bx-next { right: 15%; } @media (max-width: 1400px) { #homeslider .bx-controls-direction a.bx-next { right: 10%; } } @media (max-width: 1200px) { #homeslider .bx-controls-direction a.bx-next { right: 90px; } } @media (max-width: 992px) { #homeslider .bx-controls-direction a.bx-next { right: 10px; } } #homeslider:hover .bx-controls-direction a { visibility: visible; -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #homeslider #hs-box { z-index: 999; position: absolute; width: 60%; margin: 0 20%; left: 0; top: 120px; text-align: center; } @media (max-width: 992px) { #homeslider #hs-box { width: 80% ; margin: 0 10% ; top: 140px ; } } #homeslider #hs-box #hs-logo { height: 160px; margin-bottom: 1em; } #homeslider #hs-box #hs-logo.animated { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } @media (max-width: 992px) { #homeslider #hs-box #hs-logo { width: 100%; } } @media (max-width: 480px) { #homeslider #hs-box #hs-logo { height: auto; margin-bottom: 10px; } } #homeslider #hs-box h1 { color: #ffffff; line-height: 47px; line-height: 4.7rem; margin: 0; } @media (min-width: 992px) { #homeslider #hs-box h1 { font-size: 43px; font-size: 4.3rem; } } @media (max-width: 992px) { #homeslider #hs-box h1 { font-size: 26px; font-size: 2.6rem; } } @media (max-width: 480px) { #homeslider #hs-box h1 { margin-bottom: 20px ; } } #homeslider #hs-box h1.animated { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -ms-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #homeslider #hs-box h2 { margin: 0; padding: 0; color: #ffffff; } @media (min-width: 1200px) { #homeslider #hs-box h2 { font-size: 22px; font-size: 2.2rem; } } @media (max-width: 992px) { #homeslider #hs-box h2 { font-size: 20px; font-size: 2rem; } } #homeslider #hs-box h2.animated { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #homeslider #hs-box h2:before, #homeslider #hs-box h2:after { background: none; } #homeslider #hs-box #hs-scroll-bot { display: inline-block; width: 80px; height: 80px; margin-top: 61px; position: relative; opacity: 0.6; } #homeslider #hs-box #hs-scroll-bot:before, #homeslider #hs-box #hs-scroll-bot:after { position: absolute; content: ""; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #homeslider #hs-box #hs-scroll-bot:before { top: 0; left: 0; border: solid 7px rgba(255, 255, 255, 0); width: 66px; height: 66px; -webkit-border-radius: 66px; -moz-border-radius: 66px; border-radius: 66px; } #homeslider #hs-box #hs-scroll-bot:after { top: 8px; left: 8px; border: solid 1px #ffffff; width: 62px; height: 62px; -webkit-border-radius: 62px; -moz-border-radius: 62px; border-radius: 62px; } #homeslider #hs-box #hs-scroll-bot .inner { width: 80px; height: 80px; -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 2.5s; -moz-animation-duration: 2.5s; -o-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } #homeslider #hs-box #hs-scroll-bot .inner:before { font-family: 'icomoon'; content: "icomoon"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e902"; font-size: 26px; font-size: 2.6rem; color: #ffffff; position: absolute; top: 27px; left: 32px; } #homeslider #hs-box #hs-scroll-bot.animated { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -ms-animation-delay: 2s; -o-animation-delay: 2s; animation-delay: 2s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } #homeslider #hs-box #hs-scroll-bot:hover { opacity: 1; } #homeslider #hs-box #hs-scroll-bot:hover:after, #homeslider #hs-box #hs-scroll-bot:hover:before { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #homeslider #hs-box #hs-scroll-bot:hover:before { border: solid 7px #ffffff; } #homeslider #hs-box #hs-scroll-bot:hover .inner { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } body.mobile .bx-controls-direction { display: none; } /*# sourceMappingURL=farmstar.css.map*/