@charset "UTF-8";
@charset "UTF-8";

 .animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
@-webkit-keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
} @-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
}
@keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.swing {
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-webkit-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
@keyframes tada {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-webkit-transform: scale(0.9) rotate(-3deg);
-ms-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform: scale(1.1) rotate(-3deg);
-ms-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
} @-webkit-keyframes wobble {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
15% {
-webkit-transform: translateX(-25%) rotate(-5deg);
transform: translateX(-25%) rotate(-5deg);
}
30% {
-webkit-transform: translateX(20%) rotate(3deg);
transform: translateX(20%) rotate(3deg);
}
45% {
-webkit-transform: translateX(-15%) rotate(-3deg);
transform: translateX(-15%) rotate(-3deg);
}
60% {
-webkit-transform: translateX(10%) rotate(2deg);
transform: translateX(10%) rotate(2deg);
}
75% {
-webkit-transform: translateX(-5%) rotate(-1deg);
transform: translateX(-5%) rotate(-1deg);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes wobble {
0% {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
15% {
-webkit-transform: translateX(-25%) rotate(-5deg);
-ms-transform: translateX(-25%) rotate(-5deg);
transform: translateX(-25%) rotate(-5deg);
}
30% {
-webkit-transform: translateX(20%) rotate(3deg);
-ms-transform: translateX(20%) rotate(3deg);
transform: translateX(20%) rotate(3deg);
}
45% {
-webkit-transform: translateX(-15%) rotate(-3deg);
-ms-transform: translateX(-15%) rotate(-3deg);
transform: translateX(-15%) rotate(-3deg);
}
60% {
-webkit-transform: translateX(10%) rotate(2deg);
-ms-transform: translateX(10%) rotate(2deg);
transform: translateX(10%) rotate(2deg);
}
75% {
-webkit-transform: translateX(-5%) rotate(-1deg);
-ms-transform: translateX(-5%) rotate(-1deg);
transform: translateX(-5%) rotate(-1deg);
}
100% {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
-ms-transform: scale(.3);
transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
-ms-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(.95);
transform: scale(.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(.3);
transform: scale(.3);
}
}
@keyframes bounceOut {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(.95);
-ms-transform: scale(.95);
transform: scale(.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(.3);
-ms-transform: scale(.3);
transform: scale(.3);
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
-ms-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
-ms-transform: perspective(400px) rotateY(-10deg);
transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
-ms-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
-ms-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: translateX(-20%) skewX(30deg);
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-webkit-transform: translateX(0%) skewX(-15deg);
transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
@keyframes lightSpeedIn {
0% {
-webkit-transform: translateX(100%) skewX(-30deg);
-ms-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: translateX(-20%) skewX(30deg);
-ms-transform: translateX(-20%) skewX(30deg);
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-webkit-transform: translateX(0%) skewX(-15deg);
-ms-transform: translateX(0%) skewX(-15deg);
transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(0%) skewX(0deg);
-ms-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
0% {
-webkit-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
0% {
-webkit-transform: translateX(0%) skewX(0deg);
-ms-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%) skewX(-30deg);
-ms-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-200deg);
transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-200deg);
-ms-transform: rotate(-200deg);
transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(200deg);
transform: rotate(200deg);
opacity: 0;
}
}
@keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(200deg);
-ms-transform: rotate(200deg);
transform: rotate(200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate(80deg);
transform: rotate(80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40% {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
80% {
-webkit-transform: rotate(60deg) translateY(0);
transform: rotate(60deg) translateY(0);
opacity: 1;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: translateY(700px);
transform: translateY(700px);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40% {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
80% {
-webkit-transform: rotate(60deg) translateY(0);
-ms-transform: rotate(60deg) translateY(0);
transform: rotate(60deg) translateY(0);
opacity: 1;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: translateY(700px);
-ms-transform: translateY(700px);
transform: translateY(700px);
opacity: 0;
}
}
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge;
} @-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
@keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
-ms-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
} @-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
transform: translateX(100%) rotate(120deg);
}
}
@keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
-ms-transform: translateX(100%) rotate(120deg);
transform: translateX(100%) rotate(120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:1;padding:20px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center}.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em}.blocker.behind{background-color:transparent}.modal{display:none;vertical-align:middle;position:relative;z-index:2;max-width:500px;box-sizing:border-box;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:left}.modal a.close-modal{position:absolute;top:-12.5px;right:-12.5px;display:block;width:30px;height:30px;text-indent:-9999px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==)}.modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
} :focus {
outline: 0;
} article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
-webkit-appearance: none;
-moz-appearance: none;
}
input[type=search] {
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
textarea {
overflow: auto;
vertical-align: top;
resize: vertical;
} audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
max-width: 100%;
} audio:not([controls]) {
display: none;
height: 0;
} [hidden] {
display: none;
} html {
font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a:focus {
outline: thin dotted;
} a:active,
a:hover {
outline: 0;
} img {
border: 0; -ms-interpolation-mode: bicubic; } figure {
margin: 0;
} form {
margin: 0;
} fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
} legend {
border: 0; padding: 0;
white-space: normal; *margin-left: -7px; } button,
input,
select,
textarea {
font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button,
input {
line-height: normal;
} button,
select {
text-transform: none;
} button,
html input[type=button],
input[type=reset],
input[type=submit] {
-webkit-appearance: button; cursor: pointer; *overflow: visible; } button[disabled],
html input[disabled] {
cursor: default;
} input[type=checkbox],
input[type=radio] {
box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; } input[type=search] {
-webkit-appearance: textfield; -moz-box-sizing: content-box;
-webkit-box-sizing: content-box; box-sizing: content-box;
} input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
} button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
} textarea {
overflow: auto; vertical-align: top; } table {
border-collapse: collapse;
border-spacing: 0;
}
html,
button,
input,
select,
textarea {
color: #222;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
img {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
@font-face {
font-family: "CodecPro";
src: url(//supplyweb.fr/wp-content/themes/supplyweb/css/fonts/CodecPro/CodecProRegular.woff2) format("woff2"), url(//supplyweb.fr/wp-content/themes/supplyweb/css/fonts/CodecPro/CodecProRegular.woff) format("woff");
font-weight: 400;
}
@font-face {
font-family: "CodecPro";
src: url(//supplyweb.fr/wp-content/themes/supplyweb/css/fonts/CodecPro/CodecProBold.woff2) format("woff2"), url(//supplyweb.fr/wp-content/themes/supplyweb/css/fonts/CodecPro/CodecProBold.woff) format("woff");
font-weight: 700;
}
@font-face {
font-family: "CodecPro";
src: url(//supplyweb.fr/wp-content/themes/supplyweb/css/fonts/CodecPro/CodecProExtraBold.woff2) format("woff2"), url(//supplyweb.fr/wp-content/themes/supplyweb/css/fonts/CodecPro/CodecProExtraBold.woff) format("woff");
font-weight: 800;
}
::selection {
background: #e72f81;
color: white;
}
::placeholder {
color: #ccc;
font-weight: 700;
}
img {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
a, a:hover, a:active, a:focus, object, embed, input, textarea, select, img {
outline: none !important;
-moz-outline-style: none !important;
outline-style: none !important;
}
a {
transition: all 450ms ease;
}
a:active {
background: none;
}
input::-moz-focus-inner {
border: 0 !important;
}
html {
background: white;
}
body {
background: white;
color: #2b4556;
font-size: 18px;
line-height: 25px;
font-family: "CodecPro", Arial, sans-serif;
}
body .cky-notice-des a {
color: #e72f81 !important;
}
body #tarteaucitronIcon {
left: 0;
right: initial;
}
body .grecaptcha-badge {
z-index: 400;
}
body .blocker {
z-index: 1000;
padding: min(100px, 5%);
}
body .modal {
max-width: 1400px;
border-radius: 35px;
padding: min(150px, 5%);
}
body .modal #modal-title {
text-align: center;
margin-bottom: 50px;
}
body .modal a.close-modal {
background: none;
color: white;
top: 60px;
right: 1%;
width: auto;
height: auto;
}
body .modal a.close-modal:before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "";
color: #abb1b7;
font-size: 3em;
text-indent: 9999px;
}
body .modal h4 {
margin-bottom: 20px;
font-size: 3em;
}
body .modal .poste-date {
font-weight: 700;
color: #2b4556;
margin-bottom: 20px;
}
body .modal .poste-date span {
font-weight: 800;
color: #e72f81;
}
body .modal input[type=submit] {
float: left;
}
body .modal .wpcf7-form-control-wrap {
display: block;
}
body .modal #label-acceptance .wpcf7-list-item-label {
width: 100%;
}
body .modal .col2form div {
width: 50%;
}
body .modal .col1form div {
width: 100%;
}
body .modal #formulaire {
margin-top: 50px;
}
body .modal .wpcf7-list-item-label {
transform: none;
}
body .modal input[type=text],
body .modal input[type=email],
body .modal input[type=tel],
body .modal input[type=number],
body .modal input[type=password],
body .modal input[type=url],
body .modal input[type=file],
body .modal select {
width: 100%;
}
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
font-weight: 800;
line-height: 1em;
font-family: "CodecPro", Arial, sans-serif;
}
body h1, body .h1 {
font-size: 3.5em;
}
body h2, body .h2 {
font-size: 3em;
}
body h3, body .h3 {
font-size: 2.5em;
}
body h4, body .h4 {
font-size: 2em;
}
body h5, body .h5 {
font-size: 1.5em;
}
body h6, body .h6 {
font-size: 1.25em;
}
body strong, body b {
font-weight: 800;
}
body em, body i {
font-style: italic;
}
body img {
max-width: 100%;
height: auto;
width: auto;
}
body video:focus {
outline: none;
}
body .site .button:focus,
body button:focus,
body input[type=submit]:focus,
body input[type=reset]:focus,
body .wp-block-search .wp-block-search__button:focus,
body .wp-block-button .wp-block-button__link:focus,
body .wp-block-file a.wp-block-file__button:focus {
outline: none;
}
body input[type=radio]:after,
body input[type=checkbox]:after {
transform: none;
border: none;
}
body #label-acceptance label {
display: flex;
}
body #label-acceptance .wpcf7-list-item-label {
width: 90%;
font-size: 0.9em;
}
body input[type=text],
body input[type=email],
body input[type=tel],
body input[type=number],
body input[type=password],
body input[type=url],
body input[type=file],
body select,
body textarea {
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 2px solid #2b4556;
color: #2b4556;
padding: 0 10px;
margin-bottom: 10px;
margin-top: 10px;
resize: none;
}
body input[type=text]:focus,
body input[type=email]:focus,
body input[type=tel]:focus,
body input[type=number]:focus,
body input[type=password]:focus,
body input[type=url]:focus,
body input[type=file]:focus,
body select:focus,
body textarea:focus {
border-bottom-color: #e72f81;
}
body input[type=submit] {
padding: 13px 30px 13px 30px;
float: right;
margin-top: 20px;
}
body input[type=submit]:hover {
background: #2b4556;
border: 0;
color: white;
border-radius: 10px;
font-family: "CodecPro", Arial, sans-serif;
font-weight: 700;
}
body .wpcf7-response-output {
margin-top: 60px !important;
}
body input[type=radio], body input[type=checkbox] {
border-width: 2px;
border-color: #ccc;
}
body input[type=radio]:after, body input[type=checkbox]:after {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #e72f81;
content: "";
color: white;
text-align: center;
font-weight: 700;
font-family: "Font Awesome 5 Free";
font-size: 0.8em;
padding-top: 3px;
}
body input[type=radio]:checked, body input[type=checkbox]:checked {
border-color: #e72f81;
}
body .wpcf7 input[type=file] {
width: 100%;
padding-bottom: 10px;
}
body .lineform {
margin-top: 30px;
}
body .lineform#firstlineform {
margin-top: 0;
}
body .marginform {
margin-bottom: 15px;
display: inline-block;
}
body .wpcf7-list-item:first-child {
margin-left: 0;
}
body .wpcf7-list-item-label {
transform: translateY(-6px);
display: inline-block;
margin-left: 10px;
font-weight: 700;
}
body label, body .label {
font-weight: 700;
text-align: left;
}
body .btn,
body .btn:not(:hover):not(:active):not(.has-background),
body input[type=submit]:not(:hover):not(:active):not(.has-background),
body input[type=reset]:not(:hover):not(:active):not(.has-background) {
display: inline-block;
background: #e72f81;
color: white;
border-radius: 10px;
border: 0;
transition: all 450ms ease;
padding: 13px 30px 13px 30px;
text-decoration: none;
font-weight: 700;
font-family: "CodecPro", Arial, sans-serif;
}
body .btn:hover,
body .btn:not(:hover):not(:active):not(.has-background):hover,
body input[type=submit]:not(:hover):not(:active):not(.has-background):hover,
body input[type=reset]:not(:hover):not(:active):not(.has-background):hover {
background: #2b4556;
border: 0;
}
body .btn i,
body .btn:not(:hover):not(:active):not(.has-background) i,
body input[type=submit]:not(:hover):not(:active):not(.has-background) i,
body input[type=reset]:not(:hover):not(:active):not(.has-background) i {
top: -2px;
margin-left: 10px;
position: relative;
}
body .btn i.arrow-left,
body .btn:not(:hover):not(:active):not(.has-background) i.arrow-left,
body input[type=submit]:not(:hover):not(:active):not(.has-background) i.arrow-left,
body input[type=reset]:not(:hover):not(:active):not(.has-background) i.arrow-left {
margin-left: 0;
margin-right: 10px;
}
body .btn i.arrow-right,
body .btn:not(:hover):not(:active):not(.has-background) i.arrow-right,
body input[type=submit]:not(:hover):not(:active):not(.has-background) i.arrow-right,
body input[type=reset]:not(:hover):not(:active):not(.has-background) i.arrow-right {
margin-left: 10px;
margin-right: 0;
}
body .btn.btn3,
body .btn:not(:hover):not(:active):not(.has-background).btn3,
body input[type=submit]:not(:hover):not(:active):not(.has-background).btn3,
body input[type=reset]:not(:hover):not(:active):not(.has-background).btn3 {
color: white;
background: #2b4556;
}
body .btn.btn3:hover,
body .btn:not(:hover):not(:active):not(.has-background).btn3:hover,
body input[type=submit]:not(:hover):not(:active):not(.has-background).btn3:hover,
body input[type=reset]:not(:hover):not(:active):not(.has-background).btn3:hover {
color: #2b4556;
background: white;
}
body .col2form {
display: flex;
justify-content: space-between;
gap: 5%;
}
body .col2form div {
width: 50%;
}
body .col1form {
display: flex;
justify-content: space-between;
}
body .col1form div {
width: 100%;
}
body .site {
overflow-x: hidden;
}
body .site #svg-blog {
max-width: 700px;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform: translateX(-110%);
z-index: 10;
}
body .site #blog {
position: relative;
}
body .site .sitesize {
max-width: 1440px;
margin: auto;
padding: 0 20px;
}
body .site #logowhite {
display: inline;
}
body .site #logoblue {
display: none;
}
body .site .headerwhitelogo #logowhite {
display: none;
}
body .site .headerwhitelogo #logoblue {
display: inline;
}
body .site .header-sw {
background-blend-mode: soft-light;
min-height: 600px;
padding-top: 90px;
width: 100%;
background-size: cover;
background-position: center;
text-align: center;
position: relative;
background-color: #2b4556;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-attachment: fixed;
}
body .site .header-sw h1 {
margin-bottom: 30px;
font-size: 3em;
}
body .site .header-sw .content-header-sw {
max-width: 640px;
margin: auto;
padding: 0 20px;
}
body .site .header-sw.header-sw2 div {
max-width: 1230px;
}
body .site .site-logo {
background: transparent !important;
}
body .site #header-home-img {
display: none;
}
body .site #header-menu {
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
padding: 50px 20px 20px 20px;
}
body .site #header-menu .sitesize {
border-radius: 50px;
transition: all 450ms ease;
}
body .site #header-menu.fixed {
position: fixed;
}
body .site #header-menu.fixed .sitesize {
background: white;
box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.15);
}
body .site #header-menu.fixed #logowhite {
display: none;
}
body .site #header-menu.fixed #logoblue {
display: inline;
}
body .site #header-menu.fixed #site-navigation li a {
color: #2b4556;
}
body .site #header-menu.fixed #site-navigation li.menu-item-object-poste a {
color: white;
background: #2b4556;
}
body .site #header-menu.fixed #site-navigation li.menu-item-object-poste a:hover {
background: #e72f81;
}
body .site #header-menu.fixed #site-navigation li.contact-btn a {
color: white;
}
body .site #header-menu.fixed #site-navigation li.contact-btn a:hover {
background: #2b4556;
}
body .site #header-menu #content-header-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
body .site #header-menu .current-menu-item a {
color: #e72f81;
}
body .site #header-menu #site-navigation {
display: flex;
align-items: center;
}
body .site #header-menu #site-navigation.headerwhite li a {
color: #2b4556;
}
body .site #header-menu #site-navigation.headerwhite li.menu-item-object-poste a {
color: white;
background: #2b4556;
}
body .site #header-menu #site-navigation.headerwhite li.menu-item-object-poste a:hover {
background: #e72f81;
}
body .site #header-menu #site-navigation.headerwhite li.contact-btn a {
color: #e72f81;
background: white;
}
body .site #header-menu #site-navigation.headerwhite li.contact-btn a:hover {
color: white;
background: #e72f81;
}
body .site #header-menu #site-navigation li {
margin: 0;
padding: 0;
display: block;
}
body .site #header-menu #site-navigation li a {
padding: 10px 17px;
color: white;
font-weight: bold;
text-decoration: none;
transition: all 450ms ease;
}
body .site #header-menu.fixed #site-navigation li a {
padding: 10px 12px;
}
body .site #header-menu #site-navigation li a:hover, body .site #header-menu #site-navigation li a:active, body .site #header-menu #site-navigation li a:focus {
color: #e72f81;
background: none;
}
body .site #header-menu #site-navigation li.menu-item-object-poste a, body .site #header-menu #site-navigation li.contact-btn a {
margin-right: 0;
margin-left: 20px;
background: #e72f81;
padding: 13px 20px;
border-radius: 12px;
}
body .site #header-menu #site-navigation li.menu-item-object-poste a:hover, body .site #header-menu #site-navigation li.menu-item-object-poste a:active, body .site #header-menu #site-navigation li.menu-item-object-poste a:focus, body .site #header-menu #site-navigation li.contact-btn a:hover, body .site #header-menu #site-navigation li.contact-btn a:active, body .site #header-menu #site-navigation li.contact-btn a:focus {
background: white;
}
body .site #header-menu #site-navigation li.wpml-ls-item a {
padding: 13px 0px 13px 20px !important;
}
body .site #header-menu #site-navigation li.wpml-ls-item a img {
width: 25px;
}
body .site #header-menu #site-navigation li.menu-item-object-poste a {
color: #e72f81;
background: white;
}
body .site #header-menu #site-navigation li.menu-item-object-poste a:hover {
background: #2b4556;
color: white;
}
body .site #header-menu #site-navigation li:first-child a {
margin-left: 0;
}
body .site #header-menu #site-navigation li.current-menu-item a {
color: #e72f81;
}
body .site #header-menu .site-logo {
max-width: 275px;
width: 100%;
}
body .site #intitules {
transform: translateY(-50%);
display: flex;
justify-content: center;
}
body .site #intitules .intitules {
padding: 25px 60px;
border-radius: 20px;
background-color: white;
color: #2b4556;
font-weight: 800;
text-decoration: none;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
font-size: 1.25em;
transition: all 450ms ease;
margin: 0 40px;
cursor: pointer;
}
body .site #intitules .intitules.selected, body .site #intitules .intitules:hover {
background-color: #e72f81;
color: white;
}
body .site .hidden {
display: none;
}
body .site .soluce {
background: white;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
border-radius: 20px;
padding: 5%;
padding-left: 0;
margin-left: 16.6667%;
position: relative;
margin-bottom: 140px;
}
body .site .soluce:first-child {
margin-top: 140px;
}
body .site .soluce h2 {
margin-bottom: 30px;
}
body .site .soluce .intro {
margin-bottom: 30px;
}
body .site .soluce .soluce-img img {
max-width: 30% !important;
max-height: 300px !important;
width: auto !important;
height: auto !important;
position: absolute;
left: 0;
transform: translateX(-50%);
}
body .site .soluce .content-soluce {
padding-left: 20%;
}
body .site .container-soluce .svg-solutions {
position: relative;
height: 0px;
}
body .site .container-soluce .svg-solutions div {
max-width: 250px;
position: absolute;
top: -165px;
right: -150px;
width: 100%;
z-index: 10;
}
body .site .container-soluce:nth-child(even) .svg-solutions div {
left: -150px;
transform: scaleX(-1);
}
body .site .container-soluce:nth-child(even) .soluce {
margin-right: 16.6667%;
margin-left: 0;
padding: 5%;
padding-right: 0;
}
body .site .container-soluce:nth-child(even) .soluce .content-soluce {
padding-right: 20%;
padding-left: 0;
}
body .site .container-soluce:nth-child(even) .soluce .soluce-img img {
left: auto;
right: 0;
transform: translateX(50%);
}
body .site .container-soluce:last-child .svg-solutions {
display: none;
}
body .site #ensavoirplus {
text-align: center;
max-width: 690px;
margin: auto;
margin-bottom: 200px;
margin-top: 300px;
position: relative;
}
body .site #ensavoirplus h2 {
margin-bottom: 30px;
}
body .site #ensavoirplus .btn {
margin-top: 30px;
}
body .site #ensavoirplus .svg-solutions-2 {
position: absolute;
top: -135px;
right: -100px;
width: 200px;
height: 200px;
}
body .site #n_attendez_plus {
overflow: hidden;
}
body .site #interfacez,
body .site #fulfilment .section-image,
body .site #externalisez .section-image,
body .site #suivez_vos_commandes .section-image,
body .site #section-etapes,
body .site #nos-solutions,
body .site .solutions,
body .site #convaincu,
body .site #rejoindre,
body .site .lieu,
body .site #blog,
body .site #img-contact,
body .site #header-contact,
body .site #content-coordonnees,
body .site #automatisez .section-image,
body .site #controlez .section-image,
body .site #aucun_minimum .sitesize,
body .site #beneficiez .section-texte,
body .site #service_client .section-image,
body .site #n_attendez_plus,
body .site #personnalisez .section-sw,
body .site #actus,
body .site #postes,
body .site #equipe .sitesize,
body .site #rejoindre,
body .site #valeurs,
body .site #content-equipe,
body .site .valeur {
position: relative;
}
body .site .section-image img {
position: relative;
z-index: 3;
}
body .site .anim-svg {
position: absolute;
top: 0;
left: 0;
width: 15%;
height: auto;
z-index: 2;
}
body .site #anim-home-1 {
min-width: 200px;
max-width: 250px;
}
body .site #anim-home-2 {
width: 100%;
left: -50%;
}
body .site #anim-home-3 {
width: 50%;
left: 50%;
top: 50%;
}
body .site #anim-home-4 {
right: 0;
left: auto;
width: 20%;
}
body .site #anim-home-5 {
top: -50%;
height: 100%;
width: 20%;
left: -9%;
}
body .site #anim-home-6 {
top: auto;
bottom: 0;
left: auto;
right: 0;
width: 17%;
}
body .site #anim-quisommesnous-1 {
left: 0;
top: 0;
transform: translateY(-92%) translateX(-80%);
width: 23%;
}
body .site #anim-quisommesnous-2 {
right: -13%;
bottom: 0;
transform: translateY(90%);
left: auto;
width: 13%;
top: auto;
}
body .site #anim-quisommesnous-3 {
right: 0;
top: -33%;
left: auto;
width: 10%;
transform: translateX(-10%);
}
body .site #anim-quisommesnous-4 {
right: 0;
left: auto;
width: 20%;
}
body .site #anim-quisommesnous-5 {
top: -50%;
height: 100%;
width: 20%;
left: -9%;
}
body .site #anim-quisommesnous-5bis {
right: 0;
left: auto;
top: 0;
transform: rotate(190deg) translateY(60%) translateX(-50%);
width: 120px;
}
body .site #anim-quisommesnous-6 {
right: 0;
top: auto;
bottom: 0;
transform: translateY(-50%);
left: auto;
width: 10%;
}
body .site #anim-blog-1 {
right: 95%;
width: 270px;
left: auto;
}
body .site #anim-contact-1 {
right: 0;
left: auto;
transform: translateX(85%) translateY(-45%);
padding: 0 !important;
width: 35%;
}
body .site #anim-contact-2 {
left: auto;
top: auto;
bottom: 0;
right: 0;
width: 30%;
}
body .site #anim-solutions-2 {
right: 0;
top: -50%;
left: auto;
width: 25%;
transform: translateX(50%);
}
body .site #anim-pourquoi-1 {
top: 12%;
width: 60%;
z-index: 5;
transform: translateX(-55%);
}
body .site #anim-pourquoi-2 {
top: -12%;
width: 50%;
transform: translateX(-40%);
}
body .site #anim-pourquoi-3 {
top: auto;
width: 10%;
transform: translateX(-60%);
bottom: 0;
}
body .site #anim-pourquoi-4 {
top: 0%;
width: 30%;
transform: translateX(-50%) translateY(-15%);
right: 0;
left: auto;
}
body .site #anim-pourquoi-5 {
top: 20%;
width: 50%;
z-index: 3;
transform: translateX(-60%);
}
body .site #anim-pourquoi-6 {
width: 20%;
}
body .site #anim-actu-1 {
right: -9%;
width: 25%;
left: auto;
}
body .site #img-pourquoi-1 {
border-radius: 40px;
margin: 30px;
overflow: hidden;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
}
body .site #img-pourquoi-1 img {
width: 100%;
object-fit: cover;
}
body .site .btn i.fa-long-arrow-alt-left,
body .site .btn i.fa-long-arrow-alt-right {
top: 1px !important;
}
body .site .btn2 {
color: #e72f81;
font-weight: 800;
text-decoration: none;
transition: all 450ms ease;
}
body .site .btn2 i {
margin-left: 10px;
}
body .site .btn2:hover {
color: #2b4556;
}
body .site .solutions .content-soluce button.btn.soluce-moins {
margin-top: 50px;
}
body .site .solutions .content-soluce button.btn.soluce-moins i {
top: 5px;
}
body .site .separateur {
width: 40px;
display: inline-block;
}
body .site #header-contact {
margin-top: 175px;
display: flex;
align-items: center;
max-width: 1170px;
}
body .site #header-contact h1 {
margin-bottom: 30px;
}
body .site #header-contact div {
padding-right: 10%;
}
body .site #header-contact div div {
padding-right: 0;
margin-top: 30px;
}
body .site #header-contact img {
position: relative;
z-index: 3;
}
body .site #img-contact {
padding-right: 0 !important;
}
body .site #content-contact {
display: flex;
margin-top: 50px;
margin-bottom: 200px;
}
body .site #content-contact #formulaire {
flex-grow: 4;
max-width: 840px;
margin: 0 auto;
overflow: hidden;
}
body .site #content-contact #formulaire input[type=text],
body .site #content-contact #formulaire input[type=email],
body .site #content-contact #formulaire input[type=tel],
body .site #content-contact #formulaire input[type=number],
body .site #content-contact #formulaire input[type=password],
body .site #content-contact #formulaire input[type=url],
body .site #content-contact #formulaire select,
body .site #content-contact #formulaire textarea {
width: 100%;
}
body .site #content-contact #formulaire .wpcf7 form .wpcf7-response-output {
margin-top: 5em;
}
body .site #content-contact #coordonnees {
margin-left: 40px;
}
body .site #content-contact #content-coordonnees {
background: #2b4556;
background-size: 40%;
color: white;
border-radius: 20px;
padding: 35px;
}
body .site #content-contact #content-coordonnees h4 {
margin-bottom: 35px;
}
body .site #content-contact #content-coordonnees ul li {
margin-bottom: 35px;
}
body .site #content-contact #content-coordonnees ul li a {
margin-top: 10px;
display: inline-block;
transition: all 450ms ease;
}
body .site #content-contact #content-coordonnees ul li a:hover {
color: #e72f81;
}
body .site #content-contact #content-coordonnees a {
color: white;
text-decoration: none;
}
body .site #content-contact #content-coordonnees #reseaux {
margin-top: 75px;
}
body .site #content-contact #content-coordonnees #reseaux a {
margin: 0 5px;
}
body .site #content-contact #content-coordonnees #reseaux a:hover {
color: #e72f81;
}
body .site #map-contact {
position: relative;
}
body .site #map-contact:after {
content: "";
background: #e72f81 url(//supplyweb.fr/wp-content/themes/supplyweb/css/images/pin.svg) 23px no-repeat;
background-size: 40px 35px;
width: 90px;
height: 90px;
border-radius: 90px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 500;
}
body .site #map-contact .leaflet-map {
height: 550px !important;
}
body .site #partenaires {
text-align: center;
padding: 50px 0 150px 0;
}
body .site #partenaires h2 {
margin-bottom: 50px;
}
body .site #partenaires #content-partenaires {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
body .site #partenaires #content-partenaires .partenaire {
margin: 25px 50px;
}
body .site #rejoindre {
background: #e72f81;
padding: 0;
color: white;
text-align: center;
}
body .site #rejoindre:after {
content: "";
width: 100%;
max-width: 1170px;
background: white;
height: 1px;
display: block;
margin: auto;
}
body .site #rejoindre .sitesize {
display: flex;
align-items: center;
max-width: 1170px;
padding-top: 150px;
padding-bottom: 150px;
}
body .site #rejoindre #img-rejoindre {
width: 25em;
height: 25em;
overflow: hidden;
border-radius: 50%;
}
body .site #rejoindre #img-rejoindre img {
object-fit: cover;
width: 100%;
height: 100%;
}
body .site #rejoindre #content-rejoindre {
width: 54.8716%;
text-align: left;
padding: 0 6.923%;
}
body .site #rejoindre #content-rejoindre h1, body .site #rejoindre #content-rejoindre h2, body .site #rejoindre #content-rejoindre h3, body .site #rejoindre #content-rejoindre h4, body .site #rejoindre #content-rejoindre h5, body .site #rejoindre #content-rejoindre h6 {
text-align: left;
margin-bottom: 35px;
}
body .site #rejoindre #content-rejoindre .btn {
margin-top: 35px;
padding-left: 40px;
padding-right: 40px;
}
body .site #chiffres {
margin-top: 100px;
}
body .site #chiffres #content-chiffres {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
body .site #chiffres #content-chiffres div {
width: 25%;
margin-bottom: 50px;
}
body .site #chiffres #content-chiffres div i {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border-radius: 50px;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
font-size: 2.25em;
}
body .site #chiffres #content-chiffres div .titre-chiffres {
color: #e72f81;
margin-top: 20px;
}
body .site #chiffres #content-chiffres div .texte-chiffres {
color: #2b4556;
margin-top: 10px;
font-size: 2.5em;
}
body .site #chiffres #content-chiffres div .titre-chiffres, body .site #chiffres #content-chiffres div .texte-chiffres {
font-weight: 800;
display: block;
}
body .site #introduction {
margin-top: 50px;
}
body .site #introduction #content-introduction {
display: flex;
align-items: center;
}
body .site #introduction #content-introduction h2 {
margin-bottom: 35px;
}
body .site #introduction #content-introduction div {
width: 50%;
padding: 120px 0 120px 8.5%;
}
body .site #introduction #content-introduction figure {
position: relative;
}
body .site #introduction #content-introduction figure:after {
content: "";
background: radial-gradient(circle, rgba(255, 255, 255, 0) 25%, white 70%);
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
body .site #lieux {
position: relative;
z-index: 1;
}
body .site #lieux #content-lieux {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body .site #lieux #content-lieux .lieu {
width: 30%;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
border-radius: 20px;
font-size: 0.9em;
padding: 50px;
margin-bottom: 150px;
}
body .site #lieux #content-lieux .lieu figure {
max-width: 200px;
border-radius: 100%;
width: calc(44.4444% + 100px);
height: auto;
overflow: hidden;
transform: translateY(-50%);
margin: auto;
margin-top: -50px;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
}
body .site #lieux #content-lieux .lieu .lieu-adresse {
color: #e72f81;
font-weight: 800;
display: inline-block;
}
body .site #lieux #content-lieux .lieu .lieu-texte {
line-height: 1.1em;
margin-top: 40px;
}
body .site #lieux #content-lieux .lieu .lieu-texte ul li {
margin-bottom: 10px;
}
body .site #lieux #content-lieux .lieu .content-lieu {
overflow: hidden;
}
body .site #securite {
margin-bottom: 150px;
}
body .site #securite figure {
width: 40.4255%;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
}
body .site #securite figure img {
object-fit: cover;
height: 100%;
width: 100%;
}
body .site #securite #securite-text {
width: 53.546%;
}
body .site #securite #content-securite {
display: flex;
justify-content: space-between;
}
body .site #securite #content-securite h2 {
margin: 25px 0 25px 45px;
}
body .site #securite #content-securite #points_securite .point_securite {
display: flex;
margin-bottom: 30px;
}
body .site #securite #content-securite #points_securite .point_securite h3 {
color: #e72f81;
font-size: 1.3em;
margin-bottom: 15px;
}
body .site #securite #content-securite #points_securite .point_securite i {
color: #e72f81;
font-size: 1.8em;
margin-right: 20px;
}
body .site #equipe {
text-align: center;
}
body .site #equipe h2 {
margin-bottom: 25px;
}
body .site #equipe #img-equipe {
overflow: hidden;
border-radius: 20px;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
margin-top: 50px;
}
body .site #equipe #img-equipe img {
object-fit: cover;
height: 100%;
width: 100%;
}
body .site #equipe #img-equipe-container {
background: linear-gradient(180deg, white 50%, #2b4556 50%);
padding-bottom: 50px;
}
body .site #equipe #content-equipe {
background-color: #2b4556;
color: white;
}
body .site #equipe #content-equipe .sitesize {
display: flex;
padding-top: 50px;
padding-bottom: 100px;
flex-wrap: wrap;
justify-content: center;
}
body .site #equipe #content-equipe .membre {
width: 23.4042%;
padding: 0 20px;
margin-bottom: 100px;
}
body .site #equipe #content-equipe .membre figure {
width: 10em;
height: 10em;
overflow: hidden;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
border-radius: 20px;
display: inline-block;
}
body .site #equipe #content-equipe .membre figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
body .site #equipe #content-equipe .membre h5 {
margin-top: 15px;
margin-bottom: 5px;
}
body .site #equipe #content-equipe .membre span {
color: #e72f81;
}
body .site #valeurs {
padding-top: 200px;
padding-bottom: 200px;
text-align: center;
}
body .site #valeurs #content-valeurs {
margin-top: 100px;
}
body .site #valeurs #content-valeurs .valeur {
display: flex;
justify-content: space-between;
align-items: center;
margin: 100px 0;
}
body .site #valeurs #content-valeurs .valeur .img-valeur {
width: 31.9148%;
}
body .site #valeurs #content-valeurs .valeur .img-valeur figure {
overflow: hidden;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
border-radius: 20px;
}
body .site #valeurs #content-valeurs .valeur .img-valeur figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
body .site #valeurs #content-valeurs .valeur .text-valeur {
width: 59.5744%;
text-align: left;
}
body .site #valeurs #content-valeurs .valeur:nth-child(even) .img-valeur {
order: 2;
}
body .site #valeurs #content-valeurs .valeur:nth-child(even) .text-valeur {
order: 1;
}
body .site .spacewhite {
height: 200px;
}
body .site .section {
padding: 60px 0;
}
body .site .section.section-blue {
background: #2b4556;
color: white;
}
body .site .section .section-sw {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8.5%;
}
body .site .section .section-sw h2 {
margin-bottom: 35px;
}
body .site .section .section-sw div:last-child {
margin-left: 8.5%;
}
body .site .section .section-image {
width: 48.7179%;
}
body .site .section .section-texte {
flex: 1;
}
body .site .section #video {
width: 34.0425%;
overflow: hidden;
}
body .site .section #video video {
margin-left: 1px;
}
body .site #fulfilment {
background-color: #e72f81;
padding: 80px 0;
color: #fff;
}
body .site #fulfilment.section .section-image {
width: 20%;
}
body .site #fulfilment.section .section-texte h2 {
font-size: 1.55em;
}
body .site #interfacez .section-sw, body .site #suivez_vos_commandes .section-sw {
padding-left: 0;
}
body .site #automatisez {
padding-top: 0;
}
body .site #externalisez {
padding: 0;
}
body .site #externalisez .section-image {
width: 38.718%;
}
body .site #controlez {
padding: 60px;
}
body .site #controlez .section-sw {
padding-left: 0;
}
body .site #controlez img {
transform: translateY(calc(-17% - 20px));
}
body .site #controlez .section-texte div,
body .site #expedition .section-texte div,
body .site #personnalisez .section-texte div,
body .site #aucun_minimum .section-texte div,
body .site #beneficiez .section-texte div,
body .site #service_client .section-texte div {
margin-left: 0!important;
margin-top: 40px;
}
body .site #expedition {
position: relative;
z-index: 2;
}
body .site #expedition .section-image {
width: 48.9361%;
}
body .site #expedition .section-sw {
padding-right: 0;
}
body .site #aucun_minimum .section-image {
padding: 20px 40px;
background: #fff;
border-radius: 30px;
overflow: hidden;
}
body .site #beneficiez .section-image {
width: 31.915%;
}
body .site .bottom-links {
padding: 100px 0;
text-align: center;
background: #2b4556;
color: white;
}
body .site .bottom-links .section-texte {
margin-bottom: 35px;
}
body .site .bottom-links .section-texte div {
font-size: 1.9em;
line-height: 1.2em;
}
body .site .bottom-links h2 {
margin-bottom: 35px;
}
body .site .blue-btn a {
color: white;
}
body .site .blue-btn a:hover {
color: #e72f81;
}
body .site .blue-btn .btn:hover {
background: white;
}
body .site .header-home-sw {
height: 100vh;
width: 100vw;
background-blend-mode: normal;
background-color: none;
background-size: cover;
padding: 0;
}
body .site .header-home-sw video, body .site .header-home-sw img {
object-fit: cover;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
body .site .header-home-sw #ytbg {
z-index: 2;
height: 100%;
width: 100%;
z-index: 2 !important;
position: absolute;
overflow: hidden;
inset: 0px;
pointer-events: none;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
body .site .header-home-sw img {
z-index: 1;
}
body .site .header-home-sw .bg-blue {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
display: flex;
text-align: left;
background: rgba(43, 69, 86, 0.5);
z-index: 3;
position: relative;
}
body .site .header-home-sw .sitesize {
display: flex;
width: 100%;
height: 100%;
align-items: flex-end;
padding-bottom: 200px;
}
body .site .header-home-sw .content-header-home-sw {
max-width: 780px;
}
body .site .header-home-sw .content-header-home-sw h1 span {
white-space: nowrap;
}
body .site .header-home-sw .content-header-home-sw h3 {
margin-bottom: 10px;
font-size: 1.1em;
font-weight: 400;
}
body .site #section-etapes .section-texte-etapes {
width: 48.7179%;
}
body .site #section-etapes .section-texte-etapes .section-texte {
margin-bottom: 35px;
}
body .site #section-etapes .section-texte-etapes .blue-btn {
margin-left: 0;
}
body .site #section-etapes #etapes {
flex: 1;
font-size: 1.2em;
margin-left: 8.5%;
}
body .site #section-etapes #etapes .etape {
font-weight: 800;
margin-left: 0;
display: flex;
align-items: center;
text-align: left;
}
body .site #section-etapes #etapes .etape span {
color: #2b4556;
background: white;
border-radius: 5px;
margin-right: 20px;
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
max-width: 50px;
max-height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding-top: 2px;
overflow: hidden;
}
body .site #section-etapes #etapes .separator-etape {
height: 20px;
width: 2px;
margin-left: 25px;
border-left-style: dashed;
border-color: #e72f81;
border-width: 2px;
}
body .site #section-etapes #etapes .separator-etape:last-child {
display: none;
}
body .site #nos-solutions {
padding: 150px 0 75px 0;
text-align: center;
}
body .site #nos-solutions h2 {
margin-bottom: 35px;
}
body .site #nos-solutions #onglets-solutions {
margin-bottom: 75px;
}
body .site #nos-solutions .content-solutions {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
body .site #nos-solutions .onglets {
padding: 13px 40px 10px 40px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: inline-block;
background: white;
color: #e72f81;
font-weight: 700;
transition: all 450ms ease;
cursor: pointer;
margin: 0 10px;
}
body .site #nos-solutions .onglets.selected, body .site #nos-solutions .onglets:hover {
background: #e72f81;
color: white;
}
body .site #nos-solutions .soluce {
margin: 75px 0;
width: 30%;
text-align: center;
padding-left: 5%;
width: 31.91%;
display: flex;
}
body .site #nos-solutions .soluce:nth-child(3n+2) {
margin-left: 2.125%;
margin-right: 2.125%;
}
body .site #nos-solutions .soluce .content-soluce {
margin-top: 50px;
}
body .site #nos-solutions .soluce .soluce-img img {
max-height: 190px !important;
max-width: none !important;
left: 50%;
top: 0;
right: 50%;
transform: translateY(-50%) translateX(-50%);
}
body .site #nos-solutions .soluce .content-soluce {
padding-left: 0;
display: flex;
flex-direction: column;
align-items: center;
}
body .site #nos-solutions .soluce .content-soluce h4 {
margin-bottom: 35px;
}
body .site #nos-solutions .soluce .content-soluce .intro {
flex: 1 1 auto;
}
body .site #content-default {
padding: 50px 0 100px 0;
}
body .site .post-navigation {
margin-top: 50px;
}
body .site #page-404 {
text-align: center;
}
body .site #blog {
padding-top: 100px;
padding-bottom: 150px;
}
body .site .all-filter {
font-weight: 800;
}
body .site #link-posts {
padding: 75px 0 100px 0;
}
body .site #actus-more {
margin-top: 50px;
}
body .site #actus-more h2 {
text-align: center;
}
body .site #image-actu {
max-width: 840px;
margin: auto;
background: #e72f81;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border-radius: 20px;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
body .site #image-actu.logo-actu {
padding: 50px;
height: 400px;
}
body .site #image-actu.logo-actu img {
max-height: 100%;
}
body .site #link-posts {
text-align: center;
}
body .site #content-actu {
padding: 75px 8.51% 0 8.51%;
}
body .site #content-actu div {
text-align: center;
}
body .site #content-actu h1 {
margin-bottom: 20px;
}
body .site #content-actu #formulaire {
text-align: left;
margin-bottom: 200px;
}
body .site #content-actu #formulaire div {
text-align: left;
}
body .site .wpcf7 form .wpcf7-response-output {
margin-top: 4em;
}
body .site #pink {
color: #e72f81;
}
body .site #btn-category {
display: inline-block;
background: #e72f81;
color: white;
border-radius: 10px;
border: 0;
transition: all 450ms ease;
padding: 13px 30px 13px 30px;
text-decoration: none;
font-weight: 700;
font-family: "CodecPro", Arial, sans-serif;
margin-bottom: 20px;
}
body .site #actus {
position: relative;
z-index: 3;
padding-top: 100px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
body .site #actus .actu {
margin: 1.6%;
width: 30%;
z-index: 3;
position: relative;
display: flex;
flex-direction: column;
height: auto !important;
}
body .site #actus .actu .actu-image {
background: #e72f81;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
height: 290px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
body .site #actus .actu .actu-image img {
object-fit: cover;
width: 100%;
height: 100%;
}
body .site #actus .actu .actu-image img.img-blank {
width: auto;
height: auto;
margin: 20px;
object-fit: none;
max-height: 150px;
}
body .site #actus .actu .actu-contenu {
margin-top: -30px;
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
padding: 9%;
align-items: flex-start;
flex: 1;
}
body .site #actus .actu .actu-contenu h4 {
margin-bottom: 20px;
}
body .site #actus .actu .actu-contenu .vues, body .site #actus .actu .actu-contenu .date {
display: none;
}
body .site #actus .actu .actu-contenu .actu-info {
flex: 1;
}
body .site #actus .actu .actu-contenu .actu-cat {
font-weight: 700;
color: #2b4556;
margin-bottom: 20px;
}
body .site #actus .actu .actu-contenu .actu-cat span {
font-weight: 800;
color: #e72f81;
}
body .site #actus .actu .actu-contenu .btn {
display: inline-block;
margin-top: 35px;
}
body .site #postes {
position: relative;
z-index: 3;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
body .site #postes .poste {
margin: 1.5%;
width: 47%;
z-index: 3;
position: relative;
display: flex;
flex-direction: column;
text-align: center;
height: auto !important;
}
body .site #postes .poste .poste-image {
background: #e72f81;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
height: 290px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
body .site #postes .poste .poste-image img {
object-fit: cover;
width: 100%;
height: 100%;
}
body .site #postes .poste .poste-image img.img-blank {
width: auto;
height: auto;
margin: 20px;
object-fit: none;
max-height: 150px;
}
body .site #postes .poste .poste-contenu {
margin-top: -30px;
background: white;
border-radius: 0 0 20px 20px;
overflow: hidden;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
padding: 9%;
align-items: center;
flex: 1;
}
body .site #postes .poste .poste-contenu h4 {
margin-bottom: 5px;
}
body .site #postes .poste .poste-contenu .poste-info {
flex: 1;
}
body .site #postes .poste .poste-contenu .poste-date {
font-weight: 700;
color: #2b4556;
margin-bottom: 20px;
}
body .site #postes .poste .poste-contenu .poste-date span {
font-weight: 800;
color: #e72f81;
}
body .site #postes .poste .poste-contenu .poste-contrat {
margin-top: 10px;
margin-bottom: 30px;
}
body .site #postes .poste .poste-contenu .poste-contrat span {
font-weight: 800;
margin: 0 10px;
}
body .site #postes .poste .poste-contenu .poste-contrat span i {
margin-right: 10px;
font-size: 1.2em;
}
body .site #postes .poste .poste-contenu .btn {
display: inline-block;
margin-top: 35px;
}
body .site #filtres {
display: flex;
justify-content: space-between;
}
body .site #filtres div:first-child {
width: 50%;
}
body .site #filtres span {
display: block;
font-weight: 800;
font-size: 1.4em;
margin-bottom: 35px;
}
body .site #filtres .btn {
background: rgba(43, 69, 86, 0.2);
margin-right: 10px;
margin-bottom: 15px;
}
body .site #filtres .btn:hover, body .site #filtres .btn.active {
background: #e72f81;
}
body .site #pagination {
margin-top: 100px;
}
body .site .post-navigation {
max-width: 1440px;
}
body .site a {
text-underline-offset: 0;
text-decoration-skip-ink: none;
}
body .site a:focus {
text-decoration: none;
text-decoration-style: none;
}
body .site .navigation {
color: #2b4556;
}
body .site .navigation a {
color: #2b4556;
}
body .site .navigation a:hover {
color: #e72f81;
text-decoration: none;
text-decoration-style: none;
}
body .site .navigation a:focus, body .site .navigation a:active {
color: #e72f81;
}
body .site .pagination {
border: 0;
}
body .site .pagination .page-numbers {
width: 50px;
height: 50px;
border-radius: 100%;
background: transparent;
color: #2b4556;
text-align: center;
text-decoration: none;
font-weight: 800;
font-family: "CodecPro", Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
padding-top: 3px;
margin-right: 2px;
margin-left: 2px;
}
body .site .pagination .page-numbers:hover {
color: #e72f81;
}
body .site .pagination .page-numbers.current {
background: #e72f81;
color: white;
}
body .site .pagination .page-numbers.prev {
margin-right: 0;
}
body .site .pagination .page-numbers.next {
margin-left: 0;
}
body .site .solutions {
display: none;
}
body .site #title-default {
text-align: center;
}
body .site #personnalisez {
position: relative;
z-index: 1;
}
body .site #personnalisez .section-sw {
padding: 0 !important;
}
body .site .surtitle {
color: #e72f81;
text-transform: uppercase;
font-size: 1.3em;
margin-bottom: 5px;
font-weight: 800;
}
body .site #annonce-recrutement {
padding: 100px 0;
position: relative;
}
body .site #annonce-recrutement .section-image {
position: relative;
}
body .site #annonce-recrutement .section-image #anim-home-2 {
top: -25px;
}
body .site #annonce-recrutement #img-annonce-recrutement {
border-radius: 20px;
margin: 30px;
overflow: hidden;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
}
body .site #annonce-recrutement #img-annonce-recrutement img {
width: 100%;
object-fit: cover;
}
body .site #formulaire-recrutement {
padding: 100px 0;
}
body .site #formulaire-recrutement h2 {
text-align: center;
}
body .site #formulaire-recrutement .section-sw {
flex-direction: column;
}
body .site #formulaire-recrutement input[type=text],
body .site #formulaire-recrutement input[type=email],
body .site #formulaire-recrutement input[type=tel],
body .site #formulaire-recrutement input[type=number] {
background: none;
border-bottom: 1px solid white;
color: white;
}
body .site #formulaire-recrutement input[type=text]:focus,
body .site #formulaire-recrutement input[type=email]:focus,
body .site #formulaire-recrutement input[type=tel]:focus,
body .site #formulaire-recrutement input[type=number]:focus {
border-bottom: 1px solid #e72f81;
}
body .site #formulaire-recrutement input[type=checkbox] {
height: 20px;
width: 20px;
border: 0;
}
body .site #formulaire-recrutement input[type=file] {
color: #516b77;
width: 100%;
border-bottom: 1px solid #fff;
}
body .site #formulaire-recrutement #submit {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
body .site #formulaire-recrutement #submit .wpcf7-spinner {
margin-top: 10px;
}
body .site #formulaire-recrutement #submit input[type=submit]:hover {
padding: 13px 40px 13px 40px;
background: white;
color: #e72f81;
transition: all 450ms ease;
}
body .site #formulaire-recrutement #content-contact {
margin-bottom: 0;
}
body .site #formulaire-recrutement #content-contact .wpcf7-response-output {
margin-top: 20px !important;
}
body .site #formulaire-recrutement #content-contact, body .site #formulaire-recrutement #content-contact .wpcf7, body .site #formulaire-recrutement #content-contact .col2form, body .site #formulaire-recrutement #content-contact .col1form, body .site #formulaire-recrutement #content-contact .wpcf7-response-output {
margin-left: 0;
}
body .site #formulaire-recrutement ::placeholder {
color: #516b77;
}
body .site #formulaire-recrutement .col1form, body .site #formulaire-recrutement .col2form {
text-align: left;
}
body .site #formulaire-recrutement .wpcf7-list-item {
margin-left: 0;
}
body .site #recrutement-onglets {
padding: 75px 0 50px 0;
}
body .site #recrutement-onglets .sitesize {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
body .site #recrutement-onglets .recrutement-onglet {
padding: 13px 40px 10px 40px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: inline-block;
background: white;
color: #e72f81;
font-weight: 700;
transition: all 450ms ease;
cursor: pointer;
}
body .site #recrutement-onglets .recrutement-onglet.selected, body .site #recrutement-onglets .recrutement-onglet:hover {
background: #e72f81;
color: white;
}
body .site .recrutement-contenu {
text-align: center;
padding: 25px 0 100px 0;
}
body .site .recrutement-contenu #blog {
padding: 0;
}
body .site .recrutement-contenu h2 {
margin-bottom: 20px;
}
body .site .recrutement-contenu #postes {
margin-top: 75px;
}
body .site .recrutement-contenu #postes h5 {
margin-bottom: 25px;
}
body .site .recrutement-contenu #postes .auteur-cat {
color: #2b4556;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 10px;
font-size: 0.9em;
}
body .site .recrutement-contenu #postes .auteur-cat span {
color: #e72f81;
padding: 0 5px;
}
body .site .recrutement-contenu #postes .poste-video {
height: auto;
}
body .site .recrutement-contenu .video-link-container {
overflow: hidden;
border-radius: 20px;
}
body .site .recrutement-contenu .video-link-container figure {
overflow: hidden;
width: 100%;
}
body .site .recrutement-contenu .video-link-container img {
object-fit: cover;
object-position: center center;
width: 100%;
transition: all 450ms ease;
}
body .site .recrutement-contenu .video-link-container:hover img {
transform: scale(1.1);
}
body .site .recrutement-contenu .video-link {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-weight: 800;
font-size: 2.5em;
line-height: 1em;
padding: 10%;
flex-direction: column;
z-index: 10;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 20px;
}
body .site .recrutement-contenu .video-link div {
background: #e72f81;
border-radius: 100%;
height: 100px;
width: 100px;
min-width: 100px;
min-height: 100px;
margin-bottom: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.8em;
}
body .site #content-recrutement .anim-svg {
left: 0;
top: 0;
transform: translateY(-20%) translateX(-120%);
width: 7%;
}
body .site #strates-entreprise {
text-align: left;
}
body .site #strates-entreprise .sitesize h3 {
margin-bottom: 35px;
}
body .site #strates-entreprise .sitesize h3 strong {
color: #e72f81;
}
body .site #strates-entreprise .sitesize .section-sw {
margin-bottom: 75px;
}
body .site #strates-entreprise .sitesize .section-sw:last-child {
margin-bottom: 0;
}
body .site #strates-entreprise .sitesize .section-sw .section-image {
width: 37%;
position: relative;
}
body .site #strates-entreprise .sitesize .section-sw .section-image #anim-recrutement-1 {
width: 35%;
transform: translateY(-45%) translateX(250%);
}
body .site #strates-entreprise .sitesize .section-sw .section-image figure {
border-radius: 35px;
overflow: hidden;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
}
body .site #strates-entreprise .sitesize .section-sw .section-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
body .site #strates-entreprise .sitesize .section-sw .section-texte {
width: 51%;
}
body .site #strates-entreprise .sitesize .section-sw .section-image {
margin-left: 12%;
margin-right: 0;
}
body .site #strates-entreprise .sitesize .section-sw:nth-child(odd) .section-image {
order: 1;
margin-right: 12%;
margin-left: 0;
}
body .site #strates-entreprise .sitesize .section-sw:nth-child(odd) .section-texte {
order: 2;
}
body .site footer {
background: #e72f81;
padding: 80px 20px;
color: white;
font-size: 0.8em;
}
body .site footer .site-logo {
max-width: 210px;
display: block;
margin: 0;
}
body .site footer .site-logo:before, body .site footer .site-logo:after {
content: "";
display: none;
}
body .site footer .site-logo:hover::before, body .site footer .site-logo:hover::after {
display: none;
}
body .site footer a {
color: white;
font-weight: 800;
text-decoration: none;
text-decoration: none;
position: relative;
color: white;
transition: all 450ms ease;
}
body .site footer a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -5px;
left: 0;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 450ms ease;
}
body .site footer a:hover::before {
visibility: visible;
transform: scaleX(1);
}
body .site footer li, body .site footer span {
margin-bottom: 10px;
display: block;
}
body .site footer li i, body .site footer span i {
margin-right: 5px;
}
body .site footer #footer {
display: flex;
justify-content: space-between;
}
body .site footer #footer .column-footer {
margin-right: 8.33333%;
flex: 1 1 0px;
}
body .site footer #footer .column-footer:last-child {
margin-right: 0;
}
body .site footer #footer #copyright {
font-size: 0.8em;
margin-top: 30px;
font-weight: 700;
}
body .site #header-menu .site-logo {
display: block;
}
body .site #hamburger {
width: 40px;
height: 35px;
position: absolute;
transform: rotate(0deg);
transition: 0.5s ease-in-out;
cursor: pointer;
display: none;
right: 40px;
top: 36px;
z-index: 100;
}
body .site #hamburger:hover span {
background: #e72f81;
}
body .site #hamburger span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #e72f81;
border-radius: 2px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
body .site #hamburger span:nth-child(1) {
top: 0px;
}
body .site #hamburger span:nth-child(2), body .site #hamburger span:nth-child(3) {
top: 12px;
}
body .site #hamburger span:nth-child(4) {
top: 24px;
}
body .site #hamburger.open span:nth-child(1) {
top: 12px;
width: 0%;
left: 50%;
}
body .site #hamburger.open span:nth-child(2) {
transform: rotate(45deg);
}
body .site #hamburger.open span:nth-child(3) {
transform: rotate(-45deg);
}
body .site #hamburger.open span:nth-child(4) {
top: 12px;
width: 0%;
left: 50%;
}
body #vidhome {
display: none;
}
body.page-template-page-solutions-niveau2 h1 {
color: #e72f81;
margin-bottom: 35px;
}
body.page-template-page-solutions-niveau2 #introduction {
padding-bottom: 120px;
}
body.page-template-page-solutions-niveau2 #introduction .section-texte p {
font-size: 20px;
}
body.page-template-page-solutions-niveau2 .site .section {
padding: 120px 0;
position: relative;
}
body.page-template-page-solutions-niveau2 h3 {
color: #e72f81;
font-size: 1.25em;
text-transform: uppercase;
margin-top: 1em;
}
body.page-template-page-solutions-niveau2 .section-sw .order-1 {
order: 1;
}
body.page-template-page-solutions-niveau2 .section-sw .order-2 {
order: 2;
}
body.page-template-page-solutions-niveau2 .section-sw.with-image .section-image {
width: 45%;
}
body.page-template-page-solutions-niveau2 .section-sw.with-image .section-texte {
width: 52%;
}
body.page-template-page-solutions-niveau2 figure.cadre-image {
position: relative;
border-radius: 40px;
margin: 30px;
overflow: hidden;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
height: 600px;
}
body.page-template-page-solutions-niveau2 figure.cadre-image img {
mix-blend-mode: normal;
object-fit: cover;
object-position: center center;
height: 100%;
width: 100%;
}
body.page-template-page-solutions-niveau2 #les-avantages-de-l-optimisation-de-transport figure.cadre-image {
background-color: #fff;
padding: 0 15px;
}
body.page-template-page-solutions-niveau2 #les-avantages-de-l-optimisation-de-transport figure.cadre-image img {
object-fit: contain;
}
body.page-template-page-solutions-niveau2 #service-client-logistique-b2c-un-soutien-selon-votre-choix img {
max-height: 400px;
}
body .site .section .section-sw.with-image div.section-texte.order-1 {
margin-left: 0!important;
margin-right: 3%;
}
body .site .section .section-sw.with-image div.section-texte.order-2 {
margin-right: 0!important;
margin-left: 3%;
}
body.page-template-page-solutions-niveau2 .section-sw.without-image .section-texte {
text-align: center;
margin-left: 0!important;
}
body.page-template-page-solutions-niveau2 .section-sw.without-image .section-texte .btn {
margin-top: 40px;
}
body .site .section .section-sw div.blue-btn:last-child {
margin-left: 0;
}
body .site .anim-svg.anim-pourquoi-2 {
top: -20px;
left: 5%;
width: 13%;
transform: rotate(25deg);
}
body .site .anim-svg.anim-pourquoi-3 {
right: 10%;
left: auto;
width: 3%;
top: -20px;
transform: rotate(25deg);
}
body .spacer {
display: block;
height: 200px;
}
@media screen and (min-width: 640px) {
body #vidhome {
display: block;
}
}
@media screen and (min-width: 1200px) {
body.page-template-page-solutions-niveau2 .site .section#quels-sont-les-meilleurs-canaux-de-ventes-en-2024 .section-sw,
body.page-template-page-solutions-niveau2 .site .section#rvolutionnez-votre-stratgie-de-vente-avec-la-logistique-omnicanale .section-sw,
body.page-template-page-solutions-niveau2 .site .section#un-atelier-au-coeur-br-des-flux .section-sw,
body.page-template-page-solutions-niveau2 .site .section#nos-services .section-sw {
flex-direction: column;
}
body.page-template-page-solutions-niveau2 .site .section#quels-sont-les-meilleurs-canaux-de-ventes-en-2024 .section-image,
body.page-template-page-solutions-niveau2 .site .section#rvolutionnez-votre-stratgie-de-vente-avec-la-logistique-omnicanale .section-image,
body.page-template-page-solutions-niveau2 .site .section#un-atelier-au-coeur-br-des-flux .section-image,
body.page-template-page-solutions-niveau2 .site .section#nos-services .section-image {
margin-bottom: 35px;
}
body.page-template-page-solutions-niveau2 .site .section#quels-sont-les-meilleurs-canaux-de-ventes-en-2024,
body.page-template-page-solutions-niveau2 .site .section#rvolutionnez-votre-stratgie-de-vente-avec-la-logistique-omnicanale,
body.page-template-page-solutions-niveau2 .site .section#un-atelier-au-coeur-br-des-flux,
body.page-template-page-solutions-niveau2 .site .section#nos-services {
text-align: center;
}
body .site .section#quels-sont-les-meilleurs-canaux-de-ventes-en-2024 .section-sw.with-image div.section-texte.order-2,
body .site .section#quels-sont-les-meilleurs-canaux-de-ventes-en-2024 .section-sw.with-image div.section-texte.order-1,
body .site .section#rvolutionnez-votre-stratgie-de-vente-avec-la-logistique-omnicanale .section-sw.with-image div.section-texte.order-2,
body .site .section#rvolutionnez-votre-stratgie-de-vente-avec-la-logistique-omnicanale .section-sw.with-image div.section-texte.order-1,
body .site .section#un-atelier-au-coeur-br-des-flux .section-sw.with-image div.section-texte.order-2,
body .site .section#un-atelier-au-coeur-br-des-flux .section-sw.with-image div.section-texte.order-1,
body .site .section#nos-services .section-sw.with-image div.section-texte.order-2,
body .site .section#nos-services .section-sw.with-image div.section-texte.order-1 {
margin-left: 0;
margin-right: 0;
}
body.page-template-page-solutions-niveau2 .section#quels-sont-les-meilleurs-canaux-de-ventes-en-2024 .section-sw.with-image .section-image,
body.page-template-page-solutions-niveau2 .section#rvolutionnez-votre-stratgie-de-vente-avec-la-logistique-omnicanale .section-sw.with-image .section-image,
body.page-template-page-solutions-niveau2 .section#un-atelier-au-coeur-br-des-flux .section-sw.with-image .section-image,
body.page-template-page-solutions-niveau2 .section#nos-services .section-sw.with-image .section-image {
width: 70%;
margin-left: auto;
margin-right: auto;
}
body.page-template-page-solutions-niveau2 .section#quels-sont-les-meilleurs-canaux-de-ventes-en-2024 .section-sw.with-image .section-texte,
body.page-template-page-solutions-niveau2 .section#rvolutionnez-votre-stratgie-de-vente-avec-la-logistique-omnicanale .section-sw.with-image .section-texte,
body.page-template-page-solutions-niveau2 .section#un-atelier-au-coeur-br-des-flux .section-sw.with-image .section-texte,
body.page-template-page-solutions-niveau2 .section#nos-services .section-sw.with-image .section-texte {
width: 100%;
text-align: left;
}
body.page-template-page-solutions-niveau2 .site .section#quels-sont-les-meilleurs-canaux-de-ventes-en-2024 .section-image,
body.page-template-page-solutions-niveau2 .site .section#rvolutionnez-votre-stratgie-de-vente-avec-la-logistique-omnicanale .section-image,
body.page-template-page-solutions-niveau2 .site .section#un-atelier-au-coeur-br-des-flux .section-image,
body.page-template-page-solutions-niveau2 .site .section#nos-services .section-image {
order: 0;
}
body.page-template-page-solutions-niveau2 .site .section#quels-sont-les-meilleurs-canaux-de-ventes-en-2024 .section-sw div:last-child,
body.page-template-page-solutions-niveau2 .site .section#rvolutionnez-votre-stratgie-de-vente-avec-la-logistique-omnicanale .section-sw div:last-child,
body.page-template-page-solutions-niveau2 .site .section#un-atelier-au-coeur-br-des-flux .section-sw div:last-child,
body.page-template-page-solutions-niveau2 .site .section#nos-services .section-sw div:last-child {
margin-left: 0;
}
}
@media screen and (max-width: 1460px) {
body .site #logowhite {
display: none;
}
body .site #logoblue {
display: inline;
}
body .site #hamburger {
display: block;
}
body .site #header-menu.fixed .sitesize {
padding: 0 20px !important;
}
body .site #menu-supplyweb {
display: none;
padding-bottom: 35px;
}
body .site #menu-supplyweb.open {
display: block;
}
body .site #header-menu {
padding: 5px 0;
background-color: white;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
}
body .site #header-menu.fixed .sitesize {
background: none;
box-shadow: none;
border-radius: 0;
}
body .site #header-menu #site-navigation {
flex-direction: column;
}
body .site #header-menu #site-navigation li {
padding: 10px;
margin-top: 5px;
}
body .site #header-menu #site-navigation li a {
color: #2b4556;
}
body .site #header-menu #site-navigation li.menu-item-object-poste a {
margin-left: 0;
color: white;
background: #2b4556;
}
body .site #header-menu #site-navigation li.menu-item-object-poste a:hover {
background: #e72f81;
}
body .site #header-menu #site-navigation li.contact-btn {
margin-top: 20px;
}
body .site #header-menu #site-navigation li.contact-btn a {
color: white;
margin-left: 0;
}
body .site #header-menu #site-navigation li.contact-btn a:hover {
background: #2b4556;
}
body .site #header-menu #menu-supplyweb.open li.wpml-ls-item a {
padding: 13px 13px 13px 13px !important;
}
body .site #header-menu #content-header-menu {
display: block;
text-align: center;
}
}
@media screen and (max-width: 1290px) {
body .modal #modal-title {
margin-top: 50px;
}
body .modal h4 {
font-size: 2.5em;
}
body .modal .col2form {
flex-wrap: wrap;
}
body .modal .col1form div, body .modal .col2form div {
margin-top: 20px;
}
body .modal .lineform {
margin-top: 0;
}
body .modal .col1form div,
body .modal .col2form div,
body .modal input[type=text],
body .modal input[type=email],
body .modal input[type=tel],
body .modal input[type=number],
body .modal input[type=password],
body .modal input[type=url],
body .modal input[type=file],
body .modal select {
width: 100%;
}
body .modal #label-acceptance {
margin-top: 30px;
display: block;
}
body .site #chiffres #content-chiffres div {
width: 50%;
text-align: center;
}
body .site #chiffres #content-chiffres div i {
margin: auto;
}
}
@media screen and (max-width: 1199px) {
body .site #fulfilment.section .section-image {
width: 25%;
}
body.page-template-page-solutions-niveau2 .site .section .section-sw {
flex-direction: column;
}
body.page-template-page-solutions-niveau2 .site .section .section-image {
margin-bottom: 35px;
}
body.page-template-page-solutions-niveau2 .site .section {
text-align: center;
}
body .site .section .section-sw.with-image div.section-texte.order-2,
body .site .section .section-sw.with-image div.section-texte.order-1 {
margin-left: 0;
margin-right: 0;
}
body.page-template-page-solutions-niveau2 .section-sw.with-image .section-texte,
body.page-template-page-solutions-niveau2 .section-sw.with-image .section-image {
width: 70%;
}
body.page-template-page-solutions-niveau2 .site .section .section-image {
order: 0;
}
body.page-template-page-solutions-niveau2 .site .section .section-sw div:last-child {
margin-left: 0;
}
body.page-template-page-solutions-niveau2 .section .section-sw .section-texte {
width: 100%;
text-align: left;
}
}
@media screen and (max-width: 970px) {
body h1, body .h1 {
font-size: 3em;
}
body h2, body .h2 {
font-size: 2.25em;
}
body .site #strates-entreprise .sitesize .section-sw .section-image,
body .site #strates-entreprise .sitesize .section-sw .section-texte {
margin-left: 0 !important;
margin-right: 0 !important;
}
body .site #strates-entreprise .sitesize .section-sw .section-texte {
width: 80%;
}
body .site #equipe #content-equipe .membre {
width: 30%;
}
body .site #rejoindre .sitesize {
flex-wrap: wrap;
justify-content: center;
}
body .site #rejoindre .sitesize #img-rejoindre {
width: 15em;
height: 15em;
}
body .site #rejoindre .sitesize #content-rejoindre {
margin-top: 50px;
text-align: center;
width: 100%;
}
body .site #rejoindre .sitesize #content-rejoindre h1, body .site #rejoindre .sitesize #content-rejoindre h2, body .site #rejoindre .sitesize #content-rejoindre h3, body .site #rejoindre .sitesize #content-rejoindre h4, body .site #rejoindre .sitesize #content-rejoindre h5, body .site #rejoindre .sitesize #content-rejoindre h6, body .site #rejoindre .sitesize #content-rejoindre p {
text-align: center !important;
}
body .site .anim-svg {
display: none;
}
body .site .section .section-sw div:last-child {
margin-left: 0;
}
body .site #actus .actu, body .site #postes .poste {
width: 100%;
margin-right: 0;
margin-left: 0;
}
body .site #nos-solutions {
padding-top: 75px;
}
body .site #nos-solutions .soluce {
padding: 15px;
}
body .site #nos-solutions .soluce:nth-child(2n) .content-soluce {
padding: 0;
}
body .site #nos-solutions .soluce .soluce-img img {
top: -20px;
max-height: 150px !important;
}
body .site #section-etapes .section-texte-etapes {
width: 100%;
margin-bottom: 50px;
}
body .site #section-etapes .section-texte-etapes .separateur {
display: inline-block;
}
body .site #introduction #content-introduction {
flex-wrap: wrap;
}
body .site #introduction #content-introduction div {
width: 100%;
padding: 0;
}
body .site #lieux #content-lieux .lieu {
width: 100%;
margin-bottom: 150px;
}
body .site #lieux #content-lieux .lieu:last-child {
margin-bottom: 0;
}
body .site #intitules {
transform: none;
margin-top: 35px;
flex-direction: column;
text-align: center;
}
body .site #intitules .intitules {
padding: 20px 30px;
margin-bottom: 30px;
}
body .site #intitules .intitules:last-child {
margin-bottom: 0;
}
body .site #header-contact {
flex-direction: column;
}
body .site #header-contact div {
padding-right: 0;
}
body .site .separateur {
display: block;
margin-top: 25px;
}
body .site .header-sw {
padding: 20px;
padding-top: 110px;
}
body .site .header-sw h1 {
font-size: 2.25em;
}
body .site .header-sw.header-home-sw {
padding: 0;
}
body .site .header-sw.header-home-sw .bg-blue {
padding: 90px 20px 20px 20px;
}
body .site .section {
text-align: center;
}
body .site .section div:last-child {
margin-left: 0;
padding: 0;
}
body .site .section .section-sw {
flex-direction: column;
padding: 0 20px !important;
}
body .site .section .section-image, body .site .section #video {
order: 0;
margin-bottom: 35px;
width: 100% !important;
}
body .site #fulfilment.section .section-image {
width: 40%!important;
}
body .site .section .section-texte {
order: 1;
}
body .site #personnalisez, body .site #service_client {
padding-top: 0;
}
body .site #automatisez {
margin-bottom: 30px;
}
body .site #controlez {
padding-bottom: 60px;
}
body .site #controlez .section-image {
margin-bottom: 0;
}
body .site #n_attendez_plus {
font-size: 0.9em;
}
body .site .bottom-links .section-texte div {
font-size: 1.4em;
}
body .site #lieux {
margin-bottom: 150px;
}
body .site #content-securite {
flex-wrap: wrap;
}
body .site #content-securite figure {
width: 100%;
order: 2;
margin-top: 50px;
}
body .site #content-securite #securite-text {
width: 100%;
}
body.page-template-page-solutions-niveau2 .section-sw.with-image .section-texte, 
body.page-template-page-solutions-niveau2 .section-sw.with-image .section-image {
width: 100%;
}
body.page-template-page-solutions-niveau2 figure.cadre-image {
margin: 30px 0;
}
body .site footer #footer {
flex-wrap: wrap;
text-align: center;
}
body .site footer #footer .column-footer {
margin-right: 0;
flex: 0 0 auto;
width: 100%;
text-align: center;
margin-bottom: 30px;
}
body .site footer #footer .column-footer:last-child {
margin-bottom: 0;
}
body .site footer .site-logo {
margin: auto;
}
}
@media screen and (max-width: 760px) {
body .modal #modal-title {
margin-top: 50px;
}
body .modal h4 {
font-size: 2em;
}
body .modal a.close-modal {
right: 0;
}
body .modal a.close-modal:before {
font-size: 2em;
}
body .site .recrutement-contenu .video-link {
font-size: 2em;
padding: 5%;
}
body .site .recrutement-contenu .video-link div {
height: 75px;
width: 75px;
min-width: 75px;
min-height: 75px;
}
body .site #equipe #content-equipe .membre {
width: 50%;
}
body .site #equipe #content-equipe .membre figure {
width: 9em;
height: 9em;
}
body .site #valeurs #content-valeurs .valeur {
flex-wrap: wrap;
}
body .site #valeurs #content-valeurs .valeur .img-valeur {
width: 100%;
margin-top: 50px;
}
body .site #valeurs #content-valeurs .valeur .text-valeur {
width: 100%;
}
body .site #valeurs #content-valeurs .valeur:nth-child(odd) .img-valeur {
order: 2;
}
body .site #valeurs #content-valeurs .valeur:nth-child(odd) .text-valeur {
order: 1;
}
body .site .container-soluce .soluce {
margin-left: 0;
margin-right: 0;
padding: 20px;
text-align: center;
}
body .site .container-soluce .soluce h2 {
font-size: 2em;
}
body .site .container-soluce .soluce .soluce-img img {
max-width: none !important;
max-height: 150px !important;
left: 50%;
transform: translateX(-50%) translateY(-50%);
top: -20px;
}
body .site .container-soluce .soluce .content-soluce {
padding-left: 0;
padding-right: 0;
margin-top: 50px;
}
body .site .container-soluce:nth-child(2n) .soluce .soluce-img img {
max-width: none !important;
max-height: 150px !important;
left: 50%;
transform: translateX(-50%) translateY(-50%);
top: -20px;
}
body .site .container-soluce:nth-child(2n) .soluce {
margin-right: 0;
padding-right: 20px;
}
body .site .container-soluce:nth-child(2n) .soluce .content-soluce {
padding-left: 0;
padding-right: 0;
}
body .site #nos-solutions .soluce {
width: 100%;
}
body .site #nos-solutions .onglets {
margin-bottom: 30px;
}
body .site #fulfilment.section .section-image {
width: 60%!important;
}
body.page-template-page-solutions-niveau2 figure.cadre-image {
height: 500px;
}
}
@media screen and (max-width: 680px) {
body .modal a.close-modal {
top: 30px;
}
body .site .wpcf7-form-control-wrap {
display: block;
}
body .site #header-home-img {
display: block;
}
body .site .site #header-contact {
margin-top: 100px !important;
}
body .site #section-etapes .section-texte-etapes .separateur {
display: block !important;
}
body .site #equipe #content-equipe .membre {
width: 100%;
}
body .site #equipe #content-equipe .membre figure {
width: 9em;
height: 9em;
}
body .site #chiffres #content-chiffres div {
width: 100%;
}
body .site #filtres {
flex-wrap: wrap;
}
body .site #filtres div:first-child {
width: 100%;
margin-bottom: 30px;
}
body .site #content-contact {
flex-direction: column;
}
body .site #content-contact #formulaire {
margin-bottom: 50px;
}
body .site #content-contact #coordonnees {
margin-left: 0;
}
body .wpcf7-list-item:first-child {
margin-left: 1em;
}
body .col1form,
body .col2form {
flex-direction: column;
}
body .col1form div,
body .col2form div {
width: 100%;
margin-top: 20px;
}
body .site #fulfilment.section .section-image {
width: 80%!important;
}
body.page-template-page-solutions-niveau2 #introduction {
padding-top: 60px;
}
body.page-template-page-solutions-niveau2 .site #introduction .section-sw div:last-child {
width: 100%!important;
}
body.page-template-page-solutions-niveau2 figure.cadre-image {
height: 400px;
}
}
@media screen and (max-width: 450px) {
body.page-template-page-solutions-niveau2 #introduction {
padding-top: 0px;
margin-top: 0;
}  
body.page-template-page-solutions-niveau2 h1 {
word-break: break-word;
hyphens: auto;
}
body.page-template-page-solutions-niveau2 figure.cadre-image {
height: 340px;
margin: 30px 0;
}
}