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,
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
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
body {
line-height: 1;
font-family: "Roboto", sans-serif;
font-weight: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto", sans-serif;
font-weight: 400;
}
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
}
sup {
font-size: .8em;
line-height: 100%
}
.container {
margin: 0 auto;
width: 1270px;
max-width: 100%;
}
/*
.row {
margin: 0 -1.5625%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12,
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding: 0 1.5625%
}
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-15 {
float: left
}
.col-xs-12 {
width: 100%
}
.col-xs-11 {
width: 91.66666667%
}
.col-xs-10 {
width: 83.33333333%
}
.col-xs-9 {
width: 75%
}
.col-xs-8 {
width: 66.66666667%
}
.col-xs-7 {
width: 58.33333333%
}
.col-xs-6 {
width: 50%
}
.col-xs-5 {
width: 41.66666667%
}
.col-xs-4 {
width: 33.33333333%
}
.col-xs-3 {
width: 25%
}
.col-xs-2 {
width: 16.66666667%
}
.col-xs-1 {
width: 8.33333333%
}
.col-xs-pull-12 {
right: 100%
}
.col-xs-pull-11 {
right: 91.66666667%
}
.col-xs-pull-10 {
right: 83.33333333%
}
.col-xs-pull-9 {
right: 75%
}
.col-xs-pull-8 {
right: 66.66666667%
}
.col-xs-pull-7 {
right: 58.33333333%
}
.col-xs-pull-6 {
right: 50%
}
.col-xs-pull-5 {
right: 41.66666667%
}
.col-xs-pull-4 {
right: 33.33333333%
}
.col-xs-pull-3 {
right: 25%
}
.col-xs-pull-2 {
right: 16.66666667%
}
.col-xs-pull-1 {
right: 8.33333333%
}
.col-xs-pull-0 {
right: auto
}
.col-xs-push-12 {
left: 100%
}
.col-xs-push-11 {
left: 91.66666667%
}
.col-xs-push-10 {
left: 83.33333333%
}
.col-xs-push-9 {
left: 75%
}
.col-xs-push-8 {
left: 66.66666667%
}
.col-xs-push-7 {
left: 58.33333333%
}
.col-xs-push-6 {
left: 50%
}
.col-xs-push-5 {
left: 41.66666667%
}
.col-xs-push-4 {
left: 33.33333333%
}
.col-xs-push-3 {
left: 25%
}
.col-xs-push-2 {
left: 16.66666667%
}
.col-xs-push-1 {
left: 8.33333333%
}
.col-xs-push-0 {
left: auto
}
.col-xs-offset-12 {
margin-left: 100%
}
.col-xs-offset-11 {
margin-left: 91.66666667%
}
.col-xs-offset-10 {
margin-left: 83.33333333%
}
.col-xs-offset-9 {
margin-left: 75%
}
.col-xs-offset-8 {
margin-left: 66.66666667%
}
.col-xs-offset-7 {
margin-left: 58.33333333%
}
.col-xs-offset-6 {
margin-left: 50%
}
.col-xs-offset-5 {
margin-left: 41.66666667%
}
.col-xs-offset-4 {
margin-left: 33.33333333%
}
.col-xs-offset-3 {
margin-left: 25%
}
.col-xs-offset-2 {
margin-left: 16.66666667%
}
.col-xs-offset-1 {
margin-left: 8.33333333%
}
.col-xs-offset-0 {
margin-left: 0%
}
@media(min-width:768px) {
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
float: left
}
.col-sm-12 {
width: 100%
}
.col-sm-11 {
width: 91.66666667%
}
.col-sm-10 {
width: 83.33333333%
}
.col-sm-9 {
width: 75%
}
.col-sm-8 {
width: 66.66666667%
}
.col-sm-7 {
width: 58.33333333%
}
.col-sm-6 {
width: 50%
}
.col-sm-5 {
width: 41.66666667%
}
.col-sm-4 {
width: 33.33333333%
}
.col-sm-3 {
width: 25%
}
.col-sm-2 {
width: 16.66666667%
}
.col-sm-1 {
width: 8.33333333%
}
.col-sm-pull-12 {
right: 100%
}
.col-sm-pull-11 {
right: 91.66666667%
}
.col-sm-pull-10 {
right: 83.33333333%
}
.col-sm-pull-9 {
right: 75%
}
.col-sm-pull-8 {
right: 66.66666667%
}
.col-sm-pull-7 {
right: 58.33333333%
}
.col-sm-pull-6 {
right: 50%
}
.col-sm-pull-5 {
right: 41.66666667%
}
.col-sm-pull-4 {
right: 33.33333333%
}
.col-sm-pull-3 {
right: 25%
}
.col-sm-pull-2 {
right: 16.66666667%
}
.col-sm-pull-1 {
right: 8.33333333%
}
.col-sm-pull-0 {
right: auto
}
.col-sm-push-12 {
left: 100%
}
.col-sm-push-11 {
left: 91.66666667%
}
.col-sm-push-10 {
left: 83.33333333%
}
.col-sm-push-9 {
left: 75%
}
.col-sm-push-8 {
left: 66.66666667%
}
.col-sm-push-7 {
left: 58.33333333%
}
.col-sm-push-6 {
left: 50%
}
.col-sm-push-5 {
left: 41.66666667%
}
.col-sm-push-4 {
left: 33.33333333%
}
.col-sm-push-3 {
left: 25%
}
.col-sm-push-2 {
left: 16.66666667%
}
.col-sm-push-1 {
left: 8.33333333%
}
.col-sm-push-0 {
left: auto
}
.col-sm-offset-12 {
margin-left: 100%
}
.col-sm-offset-11 {
margin-left: 91.66666667%
}
.col-sm-offset-10 {
margin-left: 83.33333333%
}
.col-sm-offset-9 {
margin-left: 75%
}
.col-sm-offset-8 {
margin-left: 66.66666667%
}
.col-sm-offset-7 {
margin-left: 58.33333333%
}
.col-sm-offset-6 {
margin-left: 50%
}
.col-sm-offset-5 {
margin-left: 41.66666667%
}
.col-sm-offset-4 {
margin-left: 33.33333333%
}
.col-sm-offset-3 {
margin-left: 25%
}
.col-sm-offset-2 {
margin-left: 16.66666667%
}
.col-sm-offset-1 {
margin-left: 8.33333333%
}
.col-sm-offset-0 {
margin-left: 0%
}
}
@media(min-width:992px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
float: left
}
.col-md-12 {
width: 100%
}
.col-md-11 {
width: 91.66666667%
}
.col-md-10 {
width: 83.33333333%
}
.col-md-9 {
width: 75%
}
.col-md-8 {
width: 66.66666667%
}
.col-md-7 {
width: 58.33333333%
}
.col-md-6 {
width: 50%
}
.col-md-5 {
width: 41.66666667%
}
.col-md-4 {
width: 33.33333333%
}
.col-md-3 {
width: 25%
}
.col-md-2 {
width: 16.66666667%
}
.col-md-1 {
width: 8.33333333%
}
.col-md-pull-12 {
right: 100%
}
.col-md-pull-11 {
right: 91.66666667%
}
.col-md-pull-10 {
right: 83.33333333%
}
.col-md-pull-9 {
right: 75%
}
.col-md-pull-8 {
right: 66.66666667%
}
.col-md-pull-7 {
right: 58.33333333%
}
.col-md-pull-6 {
right: 50%
}
.col-md-pull-5 {
right: 41.66666667%
}
.col-md-pull-4 {
right: 33.33333333%
}
.col-md-pull-3 {
right: 25%
}
.col-md-pull-2 {
right: 16.66666667%
}
.col-md-pull-1 {
right: 8.33333333%
}
.col-md-pull-0 {
right: auto
}
.col-md-push-12 {
left: 100%
}
.col-md-push-11 {
left: 91.66666667%
}
.col-md-push-10 {
left: 83.33333333%
}
.col-md-push-9 {
left: 75%
}
.col-md-push-8 {
left: 66.66666667%
}
.col-md-push-7 {
left: 58.33333333%
}
.col-md-push-6 {
left: 50%
}
.col-md-push-5 {
left: 41.66666667%
}
.col-md-push-4 {
left: 33.33333333%
}
.col-md-push-3 {
left: 25%
}
.col-md-push-2 {
left: 16.66666667%
}
.col-md-push-1 {
left: 8.33333333%
}
.col-md-push-0 {
left: auto
}
.col-md-offset-12 {
margin-left: 100%
}
.col-md-offset-11 {
margin-left: 91.66666667%
}
.col-md-offset-10 {
margin-left: 83.33333333%
}
.col-md-offset-9 {
margin-left: 75%
}
.col-md-offset-8 {
margin-left: 66.66666667%
}
.col-md-offset-7 {
margin-left: 58.33333333%
}
.col-md-offset-6 {
margin-left: 50%
}
.col-md-offset-5 {
margin-left: 41.66666667%
}
.col-md-offset-4 {
margin-left: 33.33333333%
}
.col-md-offset-3 {
margin-left: 25%
}
.col-md-offset-2 {
margin-left: 16.66666667%
}
.col-md-offset-1 {
margin-left: 8.33333333%
}
.col-md-offset-0 {
margin-left: 0%
}
}
@media(min-width:1200px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left
}
.col-lg-12 {
width: 100%
}
.col-lg-11 {
width: 91.66666667%
}
.col-lg-10 {
width: 83.33333333%
}
.col-lg-9 {
width: 75%
}
.col-lg-8 {
width: 66.66666667%
}
.col-lg-7 {
width: 58.33333333%
}
.col-lg-6 {
width: 50%
}
.col-lg-5 {
width: 41.66666667%
}
.col-lg-4 {
width: 33.33333333%
}
.col-lg-3 {
width: 25%
}
.col-lg-2 {
width: 16.66666667%
}
.col-lg-1 {
width: 8.33333333%
}
.col-lg-pull-12 {
right: 100%
}
.col-lg-pull-11 {
right: 91.66666667%
}
.col-lg-pull-10 {
right: 83.33333333%
}
.col-lg-pull-9 {
right: 75%
}
.col-lg-pull-8 {
right: 66.66666667%
}
.col-lg-pull-7 {
right: 58.33333333%
}
.col-lg-pull-6 {
right: 50%
}
.col-lg-pull-5 {
right: 41.66666667%
}
.col-lg-pull-4 {
right: 33.33333333%
}
.col-lg-pull-3 {
right: 25%
}
.col-lg-pull-2 {
right: 16.66666667%
}
.col-lg-pull-1 {
right: 8.33333333%
}
.col-lg-pull-0 {
right: auto
}
.col-lg-push-12 {
left: 100%
}
.col-lg-push-11 {
left: 91.66666667%
}
.col-lg-push-10 {
left: 83.33333333%
}
.col-lg-push-9 {
left: 75%
}
.col-lg-push-8 {
left: 66.66666667%
}
.col-lg-push-7 {
left: 58.33333333%
}
.col-lg-push-6 {
left: 50%
}
.col-lg-push-5 {
left: 41.66666667%
}
.col-lg-push-4 {
left: 33.33333333%
}
.col-lg-push-3 {
left: 25%
}
.col-lg-push-2 {
left: 16.66666667%
}
.col-lg-push-1 {
left: 8.33333333%
}
.col-lg-push-0 {
left: auto
}
.col-lg-offset-12 {
margin-left: 100%
}
.col-lg-offset-11 {
margin-left: 91.66666667%
}
.col-lg-offset-10 {
margin-left: 83.33333333%
}
.col-lg-offset-9 {
margin-left: 75%
}
.col-lg-offset-8 {
margin-left: 66.66666667%
}
.col-lg-offset-7 {
margin-left: 58.33333333%
}
.col-lg-offset-6 {
margin-left: 50%
}
.col-lg-offset-5 {
margin-left: 41.66666667%
}
.col-lg-offset-4 {
margin-left: 33.33333333%
}
.col-lg-offset-3 {
margin-left: 25%
}
.col-lg-offset-2 {
margin-left: 16.66666667%
}
.col-lg-offset-1 {
margin-left: 8.33333333%
}
.col-lg-offset-0 {
margin-left: 0%
}
}
.col-xs-15 {
width: 20%;
float: left
}
@media(min-width:768px) {
.col-sm-15 {
width: 20%;
float: left
}
}
@media(min-width:992px) {
.col-md-15 {
width: 20%;
float: left
}
}
@media(min-width:1200px) {
.col-lg-15 {
width: 20%;
float: left
}
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical>.btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
clear: both
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical>.btn-group:before,
.btn-group-vertical>.btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
display: table;
content: " "
}*/
@charset "UTF-8";
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s
}
.animated.bounceIn,
.animated.bounceOut,
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s
}
@-webkit-keyframes bounce {
0%,
20%,
53%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1);
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
40%,
43% {
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0)
}
40%,
43%,
70% {
-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
animation-timing-function: cubic-bezier(.755, .05, .855, .06)
}
70% {
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0)
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0)
}
}
@keyframes bounce {
0%,
20%,
53%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1);
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
40%,
43% {
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0)
}
40%,
43%,
70% {
-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
animation-timing-function: cubic-bezier(.755, .05, .855, .06)
}
70% {
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0)
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0)
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom
}
@-webkit-keyframes flash {
0%,
50%,
to {
opacity: 1
}
25%,
75% {
opacity: 0
}
}
@keyframes flash {
0%,
50%,
to {
opacity: 1
}
25%,
75% {
opacity: 0
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
@-webkit-keyframes rubberBand {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
30% {
-webkit-transform: scale3d(1.25, .75, 1);
transform: scale3d(1.25, .75, 1)
}
40% {
-webkit-transform: scale3d(.75, 1.25, 1);
transform: scale3d(.75, 1.25, 1)
}
50% {
-webkit-transform: scale3d(1.15, .85, 1);
transform: scale3d(1.15, .85, 1)
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1)
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@keyframes rubberBand {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
30% {
-webkit-transform: scale3d(1.25, .75, 1);
transform: scale3d(1.25, .75, 1)
}
40% {
-webkit-transform: scale3d(.75, 1.25, 1);
transform: scale3d(.75, 1.25, 1)
}
50% {
-webkit-transform: scale3d(1.15, .85, 1);
transform: scale3d(1.15, .85, 1)
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1)
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand
}
@-webkit-keyframes shake {
0%,
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
@keyframes shake {
0%,
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake
}
@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg)
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg)
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg)
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg)
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg)
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg)
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg)
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg)
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
.headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake
}
@-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)
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
}
@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)
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
}
.swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
10%,
20% {
-webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
transform: scale3d(.9, .9, .9) rotate(-3deg)
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@keyframes tada {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
10%,
20% {
-webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
transform: scale3d(.9, .9, .9) rotate(-3deg)
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada
}
@-webkit-keyframes wobble {
0% {
-webkit-transform: none;
transform: none
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
transform: translate3d(-25%, 0, 0) rotate(-5deg)
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
transform: translate3d(20%, 0, 0) rotate(3deg)
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
transform: translate3d(-15%, 0, 0) rotate(-3deg)
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
transform: translate3d(10%, 0, 0) rotate(2deg)
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
transform: translate3d(-5%, 0, 0) rotate(-1deg)
}
to {
-webkit-transform: none;
transform: none
}
}
@keyframes wobble {
0% {
-webkit-transform: none;
transform: none
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
transform: translate3d(-25%, 0, 0) rotate(-5deg)
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
transform: translate3d(20%, 0, 0) rotate(3deg)
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
transform: translate3d(-15%, 0, 0) rotate(-3deg)
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
transform: translate3d(10%, 0, 0) rotate(2deg)
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
transform: translate3d(-5%, 0, 0) rotate(-1deg)
}
to {
-webkit-transform: none;
transform: none
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble
}
@-webkit-keyframes jello {
0%,
11.1%,
to {
-webkit-transform: none;
transform: none
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg)
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg)
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg)
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg)
}
66.6% {
-webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
transform: skewX(-.78125deg) skewY(-.78125deg)
}
77.7% {
-webkit-transform: skewX(.390625deg) skewY(.390625deg);
transform: skewX(.390625deg) skewY(.390625deg)
}
88.8% {
-webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
transform: skewX(-.1953125deg) skewY(-.1953125deg)
}
}
@keyframes jello {
0%,
11.1%,
to {
-webkit-transform: none;
transform: none
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg)
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg)
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg)
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg)
}
66.6% {
-webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
transform: skewX(-.78125deg) skewY(-.78125deg)
}
77.7% {
-webkit-transform: skewX(.390625deg) skewY(.390625deg);
transform: skewX(.390625deg) skewY(.390625deg)
}
88.8% {
-webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
transform: skewX(-.1953125deg) skewY(-.1953125deg)
}
}
.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center
}
@-webkit-keyframes bounceIn {
0%,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9)
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03)
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97)
}
to {
opacity: 1;
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@keyframes bounceIn {
0%,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9)
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03)
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97)
}
to {
opacity: 1;
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn
}
@-webkit-keyframes bounceInDown {
0%,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0)
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0)
}
to {
-webkit-transform: none;
transform: none
}
}
@keyframes bounceInDown {
0%,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0)
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0)
}
to {
-webkit-transform: none;
transform: none
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown
}
@-webkit-keyframes bounceInLeft {
0%,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0)
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0)
}
to {
-webkit-transform: none;
transform: none
}
}
@keyframes bounceInLeft {
0%,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0)
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0)
}
to {
-webkit-transform: none;
transform: none
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft
}
@-webkit-keyframes bounceInRight {
0%,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0)
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0)
}
to {
-webkit-transform: none;
transform: none
}
}
@keyframes bounceInRight {
0%,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0)
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0)
}
to {
-webkit-transform: none;
transform: none
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight
}
@-webkit-keyframes bounceInUp {
0%,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes bounceInUp {
0%,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9)
}
50%,
55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
}
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9)
}
50%,
55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut
}
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
}
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown
}
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0)
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0)
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft
}
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0)
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
}
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0)
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight
}
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0)
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
}
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0)
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes fadeOut {
0% {
opacity: 1
}
to {
opacity: 0
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
}
@keyframes fadeOutDown {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown
}
@-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
}
@keyframes fadeOutDownBig {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
@keyframes fadeOutRight {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
}
@keyframes fadeOutRightBig {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
@keyframes fadeOutUp {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
}
@keyframes fadeOutUpBig {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) rotateY(-1turn);
transform: perspective(400px) rotateY(-1turn)
}
0%,
40% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg);
transform: perspective(400px) translateZ(150px) rotateY(-190deg)
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg);
transform: perspective(400px) translateZ(150px) rotateY(-170deg)
}
50%,
80% {
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95)
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
}
@keyframes flip {
0% {
-webkit-transform: perspective(400px) rotateY(-1turn);
transform: perspective(400px) rotateY(-1turn)
}
0%,
40% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg);
transform: perspective(400px) translateZ(150px) rotateY(-190deg)
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg);
transform: perspective(400px) translateZ(150px) rotateY(-170deg)
}
50%,
80% {
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95)
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
}
.animated.flip {
-webkit-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
}
0%,
40% {
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
40% {
-webkit-transform: perspective(400px) rotateX(-20deg);
transform: perspective(400px) rotateX(-20deg)
}
60% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotateX(-5deg);
transform: perspective(400px) rotateX(-5deg)
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0
}
0%,
40% {
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
40% {
-webkit-transform: perspective(400px) rotateX(-20deg);
transform: perspective(400px) rotateX(-20deg)
}
60% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotateX(-5deg);
transform: perspective(400px) rotateX(-5deg)
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
.flipInX {
-webkit-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
}
0%,
40% {
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
40% {
-webkit-transform: perspective(400px) rotateY(-20deg);
transform: perspective(400px) rotateY(-20deg)
}
60% {
-webkit-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotateY(-5deg);
transform: perspective(400px) rotateY(-5deg)
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
@keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0
}
0%,
40% {
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
40% {
-webkit-transform: perspective(400px) rotateY(-20deg);
transform: perspective(400px) rotateY(-20deg)
}
60% {
-webkit-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotateY(-5deg);
transform: perspective(400px) rotateY(-5deg)
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY
}
@-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
30% {
-webkit-transform: perspective(400px) rotateX(-20deg);
transform: perspective(400px) rotateX(-20deg);
opacity: 1
}
to {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0
}
}
@keyframes flipOutX {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
30% {
-webkit-transform: perspective(400px) rotateX(-20deg);
transform: perspective(400px) rotateX(-20deg);
opacity: 1
}
to {
-webkit-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;
backface-visibility: visible !important
}
@-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
30% {
-webkit-transform: perspective(400px) rotateY(-15deg);
transform: perspective(400px) rotateY(-15deg);
opacity: 1
}
to {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0
}
}
@keyframes flipOutY {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
30% {
-webkit-transform: perspective(400px) rotateY(-15deg);
transform: perspective(400px) rotateY(-15deg);
opacity: 1
}
to {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY
}
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg)
}
60%,
80% {
opacity: 1
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg)
}
to {
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg)
}
60%,
80% {
opacity: 1
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg)
}
to {
-webkit-transform: none;
transform: none;
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% {
opacity: 1
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0
}
}
@keyframes lightSpeedOut {
0% {
opacity: 1
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) 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% {
transform-origin: center;
-webkit-transform: rotate(-200deg);
transform: rotate(-200deg);
opacity: 0
}
0%,
to {
-webkit-transform-origin: center
}
to {
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateIn {
0% {
transform-origin: center;
-webkit-transform: rotate(-200deg);
transform: rotate(-200deg);
opacity: 0
}
0%,
to {
-webkit-transform-origin: center
}
to {
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn
}
@-webkit-keyframes rotateInDownLeft {
0% {
transform-origin: left bottom;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0
}
0%,
to {
-webkit-transform-origin: left bottom
}
to {
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateInDownLeft {
0% {
transform-origin: left bottom;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0
}
0%,
to {
-webkit-transform-origin: left bottom
}
to {
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft
}
@-webkit-keyframes rotateInDownRight {
0% {
transform-origin: right bottom;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0
}
0%,
to {
-webkit-transform-origin: right bottom
}
to {
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateInDownRight {
0% {
transform-origin: right bottom;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0
}
0%,
to {
-webkit-transform-origin: right bottom
}
to {
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight
}
@-webkit-keyframes rotateInUpLeft {
0% {
transform-origin: left bottom;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0
}
0%,
to {
-webkit-transform-origin: left bottom
}
to {
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateInUpLeft {
0% {
transform-origin: left bottom;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0
}
0%,
to {
-webkit-transform-origin: left bottom
}
to {
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft
}
@-webkit-keyframes rotateInUpRight {
0% {
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0
}
0%,
to {
-webkit-transform-origin: right bottom
}
to {
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateInUpRight {
0% {
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0
}
0%,
to {
-webkit-transform-origin: right bottom
}
to {
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight
}
@-webkit-keyframes rotateOut {
0% {
transform-origin: center;
opacity: 1
}
0%,
to {
-webkit-transform-origin: center
}
to {
transform-origin: center;
-webkit-transform: rotate(200deg);
transform: rotate(200deg);
opacity: 0
}
}
@keyframes rotateOut {
0% {
transform-origin: center;
opacity: 1
}
0%,
to {
-webkit-transform-origin: center
}
to {
transform-origin: center;
-webkit-transform: rotate(200deg);
transform: rotate(200deg);
opacity: 0
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut
}
@-webkit-keyframes rotateOutDownLeft {
0% {
transform-origin: left bottom;
opacity: 1
}
0%,
to {
-webkit-transform-origin: left bottom
}
to {
transform-origin: left bottom;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0
}
}
@keyframes rotateOutDownLeft {
0% {
transform-origin: left bottom;
opacity: 1
}
0%,
to {
-webkit-transform-origin: left bottom
}
to {
transform-origin: left bottom;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft
}
@-webkit-keyframes rotateOutDownRight {
0% {
transform-origin: right bottom;
opacity: 1
}
0%,
to {
-webkit-transform-origin: right bottom
}
to {
transform-origin: right bottom;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0
}
}
@keyframes rotateOutDownRight {
0% {
transform-origin: right bottom;
opacity: 1
}
0%,
to {
-webkit-transform-origin: right bottom
}
to {
transform-origin: right bottom;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight
}
@-webkit-keyframes rotateOutUpLeft {
0% {
transform-origin: left bottom;
opacity: 1
}
0%,
to {
-webkit-transform-origin: left bottom
}
to {
transform-origin: left bottom;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0
}
}
@keyframes rotateOutUpLeft {
0% {
transform-origin: left bottom;
opacity: 1
}
0%,
to {
-webkit-transform-origin: left bottom
}
to {
transform-origin: left bottom;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft
}
@-webkit-keyframes rotateOutUpRight {
0% {
transform-origin: right bottom;
opacity: 1
}
0%,
to {
-webkit-transform-origin: right bottom
}
to {
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0
}
}
@keyframes rotateOutUpRight {
0% {
transform-origin: right bottom;
opacity: 1
}
0%,
to {
-webkit-transform-origin: right bottom
}
to {
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight
}
@-webkit-keyframes hinge {
0% {
transform-origin: top left
}
0%,
20%,
60% {
-webkit-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);
transform-origin: top left
}
40%,
80% {
-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;
opacity: 1
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0
}
}
@keyframes hinge {
0% {
transform-origin: top left
}
0%,
20%,
60% {
-webkit-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);
transform-origin: top left
}
40%,
80% {
-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;
opacity: 1
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0
}
}
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge
}
@-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
transform: translate3d(-100%, 0, 0) rotate(-120deg)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
transform: translate3d(-100%, 0, 0) rotate(-120deg)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn
}
@-webkit-keyframes rollOut {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
transform: translate3d(100%, 0, 0) rotate(120deg)
}
}
@keyframes rollOut {
0% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
transform: translate3d(100%, 0, 0) rotate(120deg)
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut
}
@-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
50% {
opacity: 1
}
}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
50% {
opacity: 1
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn
}
@-webkit-keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
@keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown
}
@-webkit-keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
@keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft
}
@-webkit-keyframes zoomInRight {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
@keyframes zoomInRight {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight
}
@-webkit-keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
@keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp
}
@-webkit-keyframes zoomOut {
0% {
opacity: 1
}
50% {
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
50%,
to {
opacity: 0
}
}
@keyframes zoomOut {
0% {
opacity: 1
}
50% {
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
50%,
to {
opacity: 0
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
transform: scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
transform: scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center
}
}
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft
}
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
transform: scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
transform: scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center
}
}
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight
}
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp
}
@-webkit-keyframes slideInDown {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes slideInDown {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown
}
@-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes slideInLeft {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft
}
@-webkit-keyframes slideInRight {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes slideInRight {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight
}
@-webkit-keyframes slideInUp {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes slideInUp {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp
}
@-webkit-keyframes slideOutDown {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
}
@keyframes slideOutDown {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown
}
@-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
@keyframes slideOutLeft {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft
}
@-webkit-keyframes slideOutRight {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
@keyframes slideOutRight {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight
}
@-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
@keyframes slideOutUp {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp
}
.slick-list,
.slick-slider,
.slick-track {
position: relative;
display: block
}
.slick-loading .slick-slide,
.slick-loading .slick-track {
visibility: hidden
}
.slick-slider {
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent
}
.slick-list {
overflow: hidden;
margin: 0;
padding: 0
}
.slick-list:focus {
outline: 0
}
.slick-list.dragging {
cursor: pointer;
cursor: hand
}
.slick-slider .slick-list,
.slick-slider .slick-track {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.slick-track {
top: 0;
left: 0
}
.slick-track:after,
.slick-track:before {
display: table;
content: ''
}
.slick-track:after {
clear: both
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px
}
[dir=rtl] .slick-slide {
float: right
}
.slick-slide img {
display: block
}
.slick-slide.slick-loading img {
display: none
}
.slick-slide.dragging img {
pointer-events: none
}
.slick-initialized .slick-slide {
display: block
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent
}
.slick-arrow.slick-hidden {
display: none
}
.fp-enabled body,
html.fp-enabled {
margin: 0;
padding: 0;
overflow: hidden;
-webkit-tap-highlight-color: transparent
}
#superContainer {
height: 100%;
position: relative;
-ms-touch-action: none;
touch-action: none
}
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.fp-slide {
float: left
}
.fp-slide,
.fp-slidesContainer {
height: 100%;
display: block
}
.fp-slides {
z-index: 1;
height: 100%;
overflow: hidden;
position: relative;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out
}
.fp-section.fp-table,
.fp-slide.fp-table {
display: table;
table-layout: fixed;
width: 100%
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%
}
.fp-slidesContainer {
float: left;
position: relative
}
.fp-controlArrow {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
position: absolute;
z-index: 4;
top: 50%;
cursor: pointer;
width: 0;
height: 0;
border-style: solid;
margin-top: -38px;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.fp-controlArrow.fp-prev {
left: 15px;
width: 0;
border-width: 38.5px 34px 38.5px 0;
border-color: transparent #fff transparent transparent
}
.fp-controlArrow.fp-next {
right: 15px;
border-width: 38.5px 0 38.5px 34px;
border-color: transparent transparent transparent #fff
}
.fp-scrollable {
overflow: scroll
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important
}
#fp-nav {
position: fixed;
z-index: 100;
margin-top: -32px;
top: 50%;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0)
}
#fp-nav.right {
right: 17px
}
#fp-nav.left {
left: 17px
}
.fp-slidesNav {
position: absolute;
z-index: 4;
left: 50%;
opacity: 1
}
.fp-slidesNav.bottom {
bottom: 17px
}
.fp-slidesNav.top {
top: 17px
}
#fp-nav ul,
.fp-slidesNav ul {
margin: 0;
padding: 0
}
#fp-nav ul li,
.fp-slidesNav ul li {
display: block;
width: 14px;
height: 13px;
margin: 7px;
position: relative
}
.fp-slidesNav ul li {
display: inline-block
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
text-decoration: none
}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li a.active span,
.fp-slidesNav ul li:hover a.active span {
height: 12px;
width: 12px;
margin: -6px 0 0 -6px;
border-radius: 100%
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
border-radius: 50%;
position: absolute;
z-index: 1;
height: 4px;
width: 4px;
border: 0;
background: #333;
left: 50%;
top: 50%;
margin: -2px 0 0 -2px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
width: 10px;
height: 10px;
margin: -5px 0 0 -5px
}
#fp-nav ul li .fp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
display: block;
opacity: 0;
width: 0;
cursor: pointer
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active+.fp-tooltip {
-webkit-transition: opacity .2s ease-in;
transition: opacity .2s ease-in;
width: auto;
opacity: 1
}
#fp-nav ul li .fp-tooltip.right {
right: 20px
}
#fp-nav ul li .fp-tooltip.left {
left: 20px
}
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell,
.fp-auto-height.fp-section {
height: auto !important
}
.tipso_bubble,
.tipso_bubble>.tipso_arrow {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.tipso_bubble {
position: absolute;
text-align: center;
border-radius: 6px;
z-index: 9999
}
.tipso_style {
cursor: pointer
}
.tipso_content {
-ms-word-wrap: break-word;
word-wrap: break-word;
padding: .5em
}
.tipso_bubble {
font-size: .6rem
}
.tipso_bubble.small {
font-size: .8rem
}
.tipso_bubble.default {
font-size: 1rem
}
.tipso_bubble.large {
font-size: 1.2rem;
width: 100%
}
.tipso_bubble>.tipso_arrow {
position: absolute;
width: 0;
height: 0;
border: 8px solid;
pointer-events: none
}
.tipso_bubble.top>.tipso_arrow {
border-top-color: #000;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
top: 100%;
left: 50%;
margin-left: -8px
}
.tipso_bubble.bottom>.tipso_arrow {
border-bottom-color: #000;
border-right-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
bottom: 100%;
left: 50%;
margin-left: -8px
}
.tipso_bubble.left>.tipso_arrow {
border-left-color: #000;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
top: 50%;
left: 100%;
margin-top: -8px
}
.tipso_bubble.right>.tipso_arrow {
border-right-color: #000;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
top: 50%;
right: 100%;
margin-top: -8px
}
.tipso_bubble .top_right_corner,
.tipso_bubble.top_right_corner {
border-bottom-left-radius: 0
}
.tipso_bubble .bottom_right_corner,
.tipso_bubble.bottom_right_corner {
border-top-left-radius: 0
}
.tipso_bubble .top_left_corner,
.tipso_bubble.top_left_corner {
border-bottom-right-radius: 0
}
.tipso_bubble .bottom_left_corner,
.tipso_bubble.bottom_left_corner {
border-top-right-radius: 0
}
div.fancy-select {
position: relative;
font-weight: 400;
font-size: 14px;
color: #46565d
}
div.fancy-select.disabled {
opacity: .5
}
div.fancy-select select:focus+div.trigger.open {
box-shadow: none
}
div.fancy-select div.trigger {
cursor: pointer;
padding: 14px 24px 14px 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
background: #fff;
color: #1e1e1e;
width: 240px;
font-size: 14px
}
div.fancy-select div.trigger:after {
content: url(../images/arrow-down-black.svg);
display: inline-block;
position: absolute;
top: 13px;
right: 14px
}
@media(max-width:768px) {
div.fancy-select div.trigger {
padding: 14px 34px 14px 15px
}
div.fancy-select div.trigger:after {
top: 12px;
right: 7px
}
}
div.fancy-select div.trigger.open {
box-shadow: none
}
div.fancy-select div.trigger.open:after {
border-top-color: #7a8498
}
div.fancy-select ul.options {
list-style: none;
margin: 0;
position: absolute;
top: 48px;
left: 0;
visibility: hidden;
opacity: 0;
z-index: 50;
overflow: auto;
background: #efefef;
min-width: 240px;
padding: 10px 0;
max-height: 460px
}
div.fancy-select ul.options.open {
visibility: visible;
top: 48px;
opacity: 1
}
div.fancy-select ul.options li {
padding: 6px 24px 6px 20px;
color: #1e1e1e;
cursor: pointer;
line-height: 1.4
}
div.fancy-select ul.options li.selected {
font-weight: 600
}
/*
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
outline: 0;
vertical-align: top
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px
}
.fancybox-opened {
z-index: 8030
}
.fancybox-outer,
.fancybox-inner {
position: relative
}
.fancybox-inner {
overflow: hidden
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap
}
.fancybox-image,
.fancybox-iframe {
display: block;
width: 100%;
height: 100%
}
.fancybox-image {
max-width: 100%;
max-height: 100%
}
#fancybox-loading,
.fancybox-close,
.fancybox-prev span,
.fancybox-next span {
background-image: url('../fancybox/fancybox_sprite.png')
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: .8;
cursor: pointer;
z-index: 8060
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('../fancybox/fancybox_loading.gif') center center no-repeat
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
display: none !important
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('../fancybox/blank.gif');
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
z-index: 8040;
display: none !important
}
.fancybox-prev {
left: 0
}
.fancybox-next {
right: 0
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px
}
.fancybox-nav:hover span {
visibility: visible
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important
}
.fancybox-lock {
overflow: hidden !important;
width: auto
}
.fancybox-lock body {
overflow: hidden !important
}
.fancybox-lock-test {
overflow-y: hidden !important
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background-color: #1e1e1e
}
.fancybox-overlay.white {
background-color: #fff
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll
}
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
text-shadow: none;
z-index: 8050
}
.fancybox-opened .fancybox-title {
visibility: visible
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent;
font-size: 12px;
font-weight: 300;
letter-spacing: 4px;
color: #ccc;
color: #fff;
line-height: 24px;
white-space: nowrap
}
.fancybox-overlay.white .fancybox-title-float-wrap .child {
color: #1e1e1e;
font-weight: 500
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff
}
.fancybox-title-inside-wrap {
padding-top: 10px
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8)
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min--moz-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
#fancybox-loading,
.fancybox-close,
.fancybox-prev span,
.fancybox-next span {
background-image: url('../fancybox/fancybox_sprite@2x.png');
background-size: 44px 152px
}
#fancybox-loading div {
background-image: url('../fancybox/fancybox_loading@2x.gif');
background-size: 24px 24px
}
}
*/
body {
background: #fff;
color: #1e1e1e;
font-size: 15px;
font-weight: 300;
line-height: 27px;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important
}
.homebody {
background: #0c0c0c;
}
.wrapper {
margin: 0 auto;
width: 100%;
position: relative;
z-index: 0;
}
.fullpage .wrapper {
}
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.flex-row {
display: flex;
align-items: flex-start
}
.flex-row [class*='col'] {
float: none
}
.flex-row .text {
position: relative;
bottom: 120px
}
.clearfix:before,
.clearfix:after,
.cf:before,
.cf:after {
content: "";
display: table
}
.clearfix:after,
.cf:after {
clear: both
}
.clearfix,
.cf {
*zoom: 1
}
.clear {
clear: both
}
p {
margin-bottom: 15px;
}
i,
em {
font-style: italic;
font-weight: 400
}
ul {
margin: 0;
padding: 0
}
ul.inline li {
display: inline-block;
vertical-align: middle;
margin-left: 14px
}
ul.inline li:first-child {
margin-left: 0
}
ul.inline li img {
width: auto;
display: inline-block;
fill: #1e1e1e;
bottom: -3px;
position: relative;
margin-right: 5px
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
color: #989898
}
a.black {
color: #1e1e1e
}
img {
display: block;
max-width: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.hide {
display: none
}
.visible-xs {
display: none
}
.text-center {
text-align: center
}
:focus {
outline: 0
}
.cta {
clear: both
}
.btn {
min-width: 235px;
text-align: center;
display: inline-block;
padding: 10px 10px;
text-transform: uppercase;
font-size: 14px;
border: 4px solid #1e1e1e;
color: #1e1e1e;
font-weight: 400;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
.btn:hover {
background-color: #1e1e1e;
color: #fff;
cursor: pointer
}
.btn.white {
border: 4px solid #fff;
color: #fff
}
.btn.white:hover {
background-color: #fff;
color: #1e1e1e
}
strong {
font-weight: 0
}
.centrale {
text-align: center
}
.w100 {
width: 100%
}
.fw-500 {
font-weight: 500
}
.reverse-topmargin {
height: 0;
padding-bottom: 5%;
margin-top: -140px
}
.m-l-negative {
margin-left: -4.5%
}
.m-l-neg-58 {
margin-left: -58px
}
.m-l-neg-60 {
margin-left: -60px
}
.p-b-100 {
padding-bottom: 100px
}
.p-b-50 {
padding-bottom: 50px
}
.p-t-100 {
padding-top: 100px
}
.p-t-50 {
padding-top: 50px
}
.m-b-0 {
margin-bottom: 0 !important
}
.m-b-20 {
margin-bottom: 20px
}
.m-b-100 {
margin-bottom: 100px
}
.m-b-150 {
margin-bottom: 150px
}
.m-t-50 {
margin-top: 50px
}
.m-t--150 {
margin-top: -150px
}
#preload {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
background-color: transparent;
opacity: .5;
filter: alpha(opacity=50)
}
#preload img {
position: absolute;
bottom: 25%;
left: 44%
}
input.error {
border: 1px solid #c10202
}
@media(max-width:1400px) {
.reverse-topmargin {
height: 0;
padding-bottom: 5%;
margin-top: -130px
}
}
@media(max-width:991px) {
.p-b-100 {
padding-bottom: 70px
}
.m-b-60-sm {
margin-bottom: 60px
}
}
@media(max-width:767px) {
.visible-xs {
display: inline-block
}
.p-t-100 {
padding-top: 50px
}
.p-b-100 {
padding-bottom: 50px
}
.m-b-100 {
margin-bottom: 50px
}
.m-b-150 {
margin-bottom: 80px
}
.p-b-50 {
padding-bottom: 20px
}
.p-t-50 {
padding-top: 20px
}
.hide-xs {
display: none
}
.m-b-20-xs {
margin-bottom: 20px
}
.m-l-negative {
margin-left: 0
}
.m-l-neg-58 {
margin-left: -9.5%
}
.m-l-neg-60 {
margin-left: -10.5%
}
}
ul.inline li.share {
position: relative
}
ul.inline li.share .contenuto {
position: absolute;
border: 4px solid #1e1e1e;
top: 40px;
background-color: #fff;
display: inline-block;
width: 140px;
text-align: center;
display: none
}
ul.inline li.share .contenuto:before {
content: "";
position: absolute;
width: 1px;
height: 18px;
left: 50%;
margin-left: -1px;
top: -18px;
background-color: #1e1e1e
}
ul.inline li.share .contenuto ul {
padding: 10px;
white-space: nowrap
}
ul.inline li.share .contenuto ul li {
margin-left: 8px;
margin-right: 8px;
display: inline-block !important
}
ul.inline li.share .contenuto ul li a {
display: inline-block;
float: left
}
@media(max-width:767px) {
ul.inline li.share .contenuto {
left: 50%;
margin-left: -37px
}
ul.inline li.share .contenuto:before {
left: 25%
}
}
@-webkit-keyframes amenu {
0% {
-webkit-transform: translate3d(0, -30px, 0);
opacity: 0
}
33% {
opacity: 1
}
66% {
opacity: 1
}
100% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1
}
}
.preheader {
position: relative;
z-index: 1;
height: 40px;
width: 100%;
background: #1e1e1e
}
.preheader .left,
.preheader .right {/*
width: 20%;
position: absolute;
top: 0;
left: 0;*/
height: 40px
}
.preheader .right {
text-align: right;
}
.preheader .left ul {
overflow: hidden;
}
.preheader .left ul li {
list-style-type: none;
display: inline-block;
float: left
}
.preheader .left ul li a {
height: 40px;
display: inline-block;
vertical-align: top;
line-height: 41px !important;
text-align: center;
padding-right: 15px;
opacity: .5
}
.preheader .left ul li.active a,
.preheader .left ul li a:hover {
opacity: 1
}
.flags {
width: 13px;
display: inline-block;
vertical-align: text-top;
margin-right: 9px
}
.serviceMenu {
height: 40px;
line-height: 40px;
display: inline-block;
vertical-align: middle
}
.serviceMenu.inline li {
margin-left: 34px;
height: 40px;
line-height: 40px;
vertical-align: top;
float: left
}
.serviceMenu img {
width: 13px;
display: inline-block;
vertical-align: text-bottom;
margin-left: 9px
}
.myArchiveBtn {
display: inline-block;
margin-left: 35px;
vertical-align: middle;
height: 40px;
line-height: 40px
}
.preheader a {
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
color: #bcbcbc;
height: 40px;
line-height: 40px;
display: inline-block;
vertical-align: middle;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-webkit-transition: opacity .5s;
transition: opacity .5s
}
.preheader a:hover {
opacity: .7
}
.myArchiveIcon {
display: inline-block;
width: 40px;
height: 40px;
vertical-align: middle;
background: #4f4f4f;
line-height: 38px;
text-align: center;
margin-left: 15px;
margin-top: -2px
}
.myArchiveIcon img {
width: 16px;
display: inline-block;
vertical-align: middle
}
.menu {
text-align: center;
padding: 40px 0 54px;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 2;
font-size: 14px;
letter-spacing: .05em;
background: rgba(79, 79, 79, 0);
-moz-transition: top .4s ease;
-o-transition: top .4s ease;
-webkit-transition: top .4s ease;
transition: top .4s ease
}
.serviceMenu.inline li.siteSearch form {
position: relative;
overflow: hidden
}
.serviceMenu.inline li.siteSearch #txtSiteSearch {
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
color: #bcbcbc;
height: 40px;
line-height: 40px;
display: inherit;
border: 0;
background-color: #1e1e1e;
width: 55px;
margin-right: 30px
}
.serviceMenu.inline li.siteSearch #txtSiteSearch:focus {
width: 70px
}
.serviceMenu.inline li.siteSearch #search_sub {
position: absolute;
height: 40px;
width: 20px;
background-color: transparent;
right: 0;
top: 0;
border: 0;
z-index: 3;
cursor: pointer
}
.serviceMenu.inline li.siteSearch img {
z-index: 2;
position: absolute;
right: 0;
top: 50%;
margin-top: -7px
}
#listing-project .menu,
#listing-news .menu,
#listing-cat .menu,
#news .menu,
#form-nohero .menu,
#single-store .menu,
.header-solid .menu {
background: rgba(30, 30, 30, .8);
padding: 32px 0 34px
}
.header-solid .menu {
background: rgb(30, 30, 30);
}
.menu .container {
position: relative
}
.menuWrap {
-moz-transition: top .4s ease;
-o-transition: top .4s ease;
-webkit-transition: top .4s ease;
transition: top .4s ease;
position: relative;
z-index: 101
}
.menuWrap.fixed {
top: 0;
position: fixed;
width: 100%;
z-index: 999
}
.menuWrap.fixed .menu {
background: rgba(30, 30, 30, .8);
padding: 32px 0 34px;
margin-top: 0
}
.menuWrap.fixed .menu.sub-hover,
.menuWrap .menu.sub-hover {
background: rgba(30, 30, 30, .8);
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.prova .menuWrap.fixed .menu.sub-hover,
.prova .menuWrap .menu.sub-hover {
background: rgba(79, 79, 79, 1)
}
.menuWrap.fixed .preheader {
top: -40px;
-moz-transition: top .4s ease;
-o-transition: top .4s ease;
-webkit-transition: top .4s ease;
transition: top .4s ease
}
.menuWrap.fixed:hover .menu,
.menuWrap.fixed.scrolltotop .menu {
top: 0
}
/*
.menuWrap.fixed:hover .preheader,
.menuWrap.fixed.scrolltotop .preheader {
top: 0
}*/
.menu img {
margin: 0 auto
}
.menu .left ul {
text-align: left
}
.menu .right ul {
text-align: right
}
.menu .logo {
position: absolute;
top: 50%;
left: 50%;
width: 210px;
margin-left: -130px;
margin-top: -43px;
}
.menu .logo img {
max-height: 100%
}
.menu .left ul li {
margin-left: 30px
}
.menu ul li {
color: #fff
}
.menu ul li a {
font-weight: 500;
font-size: 14px;
text-transform: capitalize;
}
.menu ul li a:hover {
color: #f0f0f0
}
.menu ul li.over a {
color: #f0f0f0
}
.menu ul li .subnav {
display: none
}
.menu .left ul li:first-child {
margin-left: 0
}
.menu .right ul li {
margin-right: 30px;
margin-left: 0
}
.menu .right ul li:last-child {
margin-right: 0
}
@media(max-width:1279px) {
.menu .logo {
width: 260px;
margin-left: -130px
}
.menu ul li a {
font-size: 13px
}
.serviceMenu.inline li {
margin-left: 22px
}
.myArchiveBtn {
margin-left: 10px
}
}
@media(max-width:1140px) {
.menuWrap .menu {
display: none
}
}
@media(min-width:768px) and (max-width:991px) {
.serviceMenu.inline li.siteSearch {
display: none
}
.preheader .left ul li a {
padding: 0 3px
}
}
@media(max-width:767px) {
.menuWrap .preheader {
display: none
}
}
#subnav {
position: relative;
z-index: 1;
text-align: left;
height: 0;
text-transform: capitalize;
}
#subnav #subnav-content {
position: absolute;
top: 0;
left: 0;
background: rgba(30, 30, 30, .8);
width: 100%;
overflow: hidden;
height: 0;
margin-top: 54px
}
#subnav #subnav-content.loading {
height: 0 !important
}
.prova #subnav #subnav-content {
background: #4f4f4f
}
#subnav .tit-cat {
padding: 0 0 10px;
font-weight: bold;
}
#subnav .tit-cat a {
font-weight: bold !important;
}
#subnav .tit-cat span {
color: #fff;
font-weight: bold
}
#subnav .tit-cat .text-cta {
font-size: 12px
}
#subnav .tit-cat .text-cta:before {
content: "";
width: 25px;
height: 1px;
background: #fff;
display: inline-block;
margin-right: 10px;
margin-left: 10px;
vertical-align: middle
}
.menuWrap.fixed #subnav #subnav-content,
#news #subnav-content,
#listing-news #subnav-content,
#listing-cat #subnav-content,
#listing-project #subnav-content,
#form-nohero #subnav-content,
#single-store #subnav-content,
.header-solid #subnav-content {
margin-top: 34px !important
}
/*
#subnav #subnav-content .container {
border-top: 1px solid #fff
}
*/
#subnav .subnav {
padding: 50px 0;
margin: 0;
list-style: none
}
#subnav .subnav .sub-tit {
color: #fff;
padding-bottom: 30px;
font-size: 20px;
font-weight: 400
}
#subnav .subnav a {
color: #fff;
font-size: 14px;
font-weight: 400
}
#subnav .subnav a:hover {
color: #989898
}
#subnav .subnav ul li {
margin-bottom: 10px
}
#subnav .subnav ul.image li img {
width: 100%;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-webkit-transition: opacity .5s;
transition: opacity .5s;
height: 150px;
object-fit: cover;
}
#subnav .subnav ul.image li .wrap {
position: relative;
background-color: #4f4f4f
}
#subnav .subnav ul.image li .wrap i {
height: 150px;
background: #111;
text-align: center;
display: grid;
align-items: center;
font-size: 30px;
}
.with-social-lnk .text {
text-align: center;
}
#subnav .subnav ul.image li a {
font-size: 18px;
position: relative;
display: block;
line-height: 1.4
}
#subnav .subnav ul.image li a .intro-text {
margin-top: 0;
display: block;
text-transform: uppercase;
font-size: 14px;
padding-bottom: 15px;
font-weight: bold
}
#subnav .subnav ul.image li a .text {
margin-top: 15px;
display: block;
font-size: 14px
}
#subnav .subnav ul.image li a:hover img {
opacity: .5
}
#subnav .subnav ul li a .play {
display: inline-block;
position: absolute;
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
border: 2px solid #fff;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
opacity: 1 !important;
z-index: 2
}
#subnav .subnav ul li a .play:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 15.5px 0 14.5px 22px;
border-color: transparent transparent transparent #fff;
margin-top: -14px;
margin-left: -9px
}
.menu-overlay {
background-color: rgba(0, 0, 0, .6);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
display: none
}
.menu-overlay.loading {
display: none !important
}
#subnav .subnav .disclaimer {
font-size: 11px;
color: #fff !important;
color: #848181
}
@media(min-width:992px) and (max-width:1199px) {
#subnav .subnav ul li {
margin-bottom: 4px
}
#subnav .subnav a {
font-size: 13px
}
#subnav .subnav ul.image li a {
font-size: 14px
}
}
@media(min-width:768px) and (max-width:991px) {
#subnav .subnav ul li {
margin-bottom: 4px
}
#subnav .subnav a {
font-size: 13px
}
#subnav .subnav ul.image li a {
font-size: 14px
}
}
.mob-open {
position: fixed;
overflow-y: scroll !important;
width: 100%
}
.menu-mobile {
display: none;
position: absolute;
width: 100%;
left: 0;
top: 40px;
z-index: 10
}
.menuWrap.fixed .menu-mobile,
#listing-project .menu-mobile,
#listing-news .menu-mobile,
#listing-cat .menu-mobile,
#news .menu-mobile,
#form-nohero .menu-mobile,
#single-store .menu-mobile,
.header-solid .menu-mobile {
background: rgba(30, 30, 30, .8)
}
.header-solid .menu-mobile,
.open-nav-mobile .menuWrap .menu-mobile {
background: rgba(30, 30, 30, 1);
position: fixed !important
}
.menu-mobile .logo {
width: 200px;
padding: 5px 0;
}
.menu-mobile .left,
.menu-mobile .right {
width: 50%;
float: left
}
.menu-mobile .right .search-btn {
background: none;
border: 0;
margin-top: 25px;
float: right;
margin-right: 20px;
display: none
}
.open-nav-mobile .menu-mobile .right .search-btn {
display: inline-block
}
.menu-mobile .right .navbar-toggle {
display: block;
float: right;
margin: 27px 0 0 0;
text-align: right;
height: 40px;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
padding: 0;
position: relative;
background: none;
border: 0;
outline: 0 !important;
z-index: 100
}
.menu-mobile .right .navbar-toggle:before,
.menu-mobile .right .navbar-toggle:after,
.menu-mobile .right .navbar-toggle span:before {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: #fff;
top: 0;
right: 0;
width: 14px;
}
.menu-mobile .right .navbar-toggle:after {
top: 8px;
width: 23px;
}
.menu-mobile .right .navbar-toggle span {
display: block;
font-size: 8px;
letter-spacing: 1px;
margin-top: 17px;
line-height: 1;
color: #fff;
text-align: center;
width: 30px
}
.menu-mobile .right .navbar-toggle span:before {
top: 16px;
width: 30px;
}
.menu-mobile .right .navbar-toggle.active:before {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(225deg);
top: 8px;
width: 30px;
}
.menu-mobile .right .navbar-toggle.active:after {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-225deg);
top: 8px;
width: 30px;
}
.menu-mobile .right .navbar-toggle.active span:before {
width: 0;
left: 50%;
top: 5px
}
.mobile-wrap {
position: fixed;
background: rgb(30, 30, 30);
left: 0;
top: 70px;
width: 100%;
display: none;
overflow-y: auto
}
.mobile-wrap .mobile-nav ul {
padding: 0 0
}
.mobile-wrap .mobile-nav ul li {
clear: both
}
.mobile-wrap .mobile-nav ul li a {
padding: 13px 5%;
font-size: 18px;
text-transform: uppercase;
display: block;
text-align: center;
justify-content: center;
}
.mobile-wrap .mobile-nav ul li a i {
margin-left: 6px;
}
.mobile-wrap .mobile-nav ul li li a {
font-size: 16px;
text-transform: capitalize;
}
.mobile-wrap .mobile-nav ul li a:active,
.mobile-wrap .mobile-nav ul li a.active {
color: #fff
}
.mobile-wrap .mobile-nav ul li a.active i {
transform: rotate(-180deg);
transition: all ease-in-out 0.3s;
}
.mobile-wrap .mobile-nav ul li ul {
background-color: #191919;
display: none;
padding: 0
}
.mobile-wrap .mobile-nav ul li ul li {
}
.mobile-wrap .mobile-nav ul li ul li:last-child {
border-bottom: 0
}
.mobile-wrap .mobile-nav ul li.lancio {
overflow: hidden
}
.mobile-wrap .mobile-nav ul li.lancio .item {
width: 33.33333333%;
float: left;
clear: none;
line-height: 1.2
}
.mobile-wrap .mobile-nav ul li.lancio a {
font-size: 12px;
padding: 20px 15%;
letter-spacing: normal
}
.mobile-wrap .mobile-nav ul li.lancio a img {
margin-bottom: 10px
}
.mobile-wrap .mobile-nav ul li ul li .disclaimer {
font-size: 11px;
color: #fff !important;
padding: 15px 5%
}
.mobile-wrap .mobile-nav ul li.siteSearch {
padding: 2px 5%;
background-color: #1e1e1e
}
.clss-tablet-device.mob-open .open-nav-mobile .mobile-wrap .mobile-nav ul li.siteSearch {
margin-bottom: 25px
}
.mobile-wrap .mobile-nav ul li.siteSearch form {
position: relative;
overflow: hidden
}
.mobile-wrap .mobile-nav ul li.siteSearch .txtSiteSearchMobile {
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
color: #bcbcbc;
height: 40px;
line-height: 40px;
display: inherit;
border: 0;
background-color: #1e1e1e;
width: 100%;
margin-right: 30px
}
.mobile-wrap .mobile-nav ul li.siteSearch .search_sub_mobile {
position: absolute;
height: 40px;
width: 20px;
background-color: transparent;
right: 0;
top: 0;
border: 0;
z-index: 3;
cursor: pointer
}
.mobile-wrap .mobile-nav ul li.siteSearch img {
z-index: 2;
position: absolute;
right: 2px;
top: 50%;
margin-top: -11px
}
.mobile-wrap .mobile-nav ul.secondary {
padding: 15px 5%;
text-align: center;
display: none
}
.clss-phone-device.mob-open .open-nav-mobile .mobile-wrap .mobile-nav ul.secondary {
margin-bottom: 25px
}
.mobile-wrap .mobile-nav ul.secondary li {
border: 0;
font-size: 14px;
display: inline-block;
margin: 5px 5px
}
.mobile-wrap .mobile-nav ul.secondary li a {
font-size: 14px;
padding: 0;
text-transform: none
}
.mobile-wrap .mobile-nav ul.lista-lingue {
overflow: hidden;
padding: 0 5%;
background-color: #777
}
.mobile-wrap .mobile-nav ul.lista-lingue li {
clear: none;
float: none;
display: inline-block;
border-bottom: 0 solid #1e1e1e;
margin-right: 10px
}
.mobile-wrap .mobile-nav ul.lista-lingue li a {
padding: 10px 14%;
font-size: 16px;
text-transform: none;
display: inline-block;
float: none;
color: #ababab
}
.mobile-wrap .mobile-nav ul.lista-lingue li.active a {
color: #fff
}
.mobile-wrap .sub-level a {
display: flex !important;
align-items: center;
justify-content: space-between
}
.mobile-wrap .sub-level a .plus {
display: block
}
.mobile-wrap .sub-level a .minus {
display: none
}
.mobile-wrap .sub-level a.active .minus {
display: block
}
.mobile-wrap .sub-level a.active .plus {
display: none
}
@media(max-width:1140px) {
.menu-mobile {
display: block
}
}
@media(min-width:992px) and (max-width:1199px) {
.menuWrap.fixed .preheader {
top: 0
}
}
@media(min-width:768px) and (max-width:991px) {
.menuWrap.fixed .preheader {
top: 0
}
.serviceMenu.inline li {
margin-left: 7px
}
}
@media(max-width:767px) {
.menu-mobile {
top: 0
}
.mobile-wrap .mobile-nav ul.secondary {
display: block
}
}
.overlay-login {
background-color: #fff;
position: fixed;
overflow-y: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 18020;
display: none
}
.overlay-login .overlay-navigation {
position: fixed;
z-index: 50;
height: 24px;
left: 0;
top: 20px;
width: 100%
}
.overlay-login .overlay-navigation a {
display: inline-block;
position: absolute;
right: 2%
}
.overlay-login .wrap-login {
height: 100vh;
position: relative
}
.overlay-login h5 {
font-size: 34px;
margin-bottom: 10px;
line-height: 1.2
}
.overlay-login h6 {
font-size: 22px;
margin-bottom: 21px;
line-height: 1.2;
border-bottom: 1px solid #1e1e1e;
padding-bottom: 6px
}
.overlay-login ul {
padding-top: 20px
}
.overlay-login .text {
margin-bottom: 25px;
line-height: 1.4
}
.overlay-login .text ul {
margin: 0;
padding-top: 10px;
padding-bottom: 10px
}
.overlay-login .text ul li {
text-transform: capitalize;
font-size: 14px;
margin-bottom: 2px;
position: relative
}
.overlay-login .vert-align {
width: 100%;/*
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute*/
}
.overlay-login .vert-align > div {
padding: 30px 0;
}
.overlay-login .wrap-input input {
width: 100%;
background-color: #fff;
border: 1px solid #1e1e1e;
color: #1e1e1e
}
.overlay-login .wrap-input label {
color: #1e1e1e
}
.overlay-login .remember input[type="checkbox"]:not(:checked),
.overlay-login .remember input[type="checkbox"]:checked {
position: absolute;
left: -9999px
}
.overlay-login .remember input[type="checkbox"]:not(:checked)+label,
.overlay-login .remember input[type="checkbox"]:checked+label {
position: relative;
padding-left: 25px;
cursor: pointer;
font-size: 12px;
text-transform: uppercase
}
.overlay-login .remember input[type="checkbox"]:not(:checked)+label:before,
.overlay-login .remember input[type="checkbox"]:checked+label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 14px;
height: 14px;
border: 1px solid #1e1e1e;
background: #fff
}
.overlay-login .remember input[type="checkbox"]:checked+label:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 14px;
height: 14px;
background-color: #1e1e1e
}
.overlay-login input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset
}
.overlay-new-psw {
position: fixed;
z-index: 40;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, .2)
}
.overlay-new-psw .message {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
width: 50vw
}
.overlay-new-psw .message .cta {
margin-bottom: 0
}
@media(max-width:991px) {
.overlay-login {
overflow: auto !important
}
.overlay-login .vert-align {
top: auto;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none;
position: static;
margin-top: 77px;
margin-bottom: 40px
}
.overlay-login .wrap-login {
height: auto
}
.overlay-login .wrap-input input {
width: 90%
}
.overlay-new-psw .message {
max-width: 90vw
}
}
@media(max-width:767px) {
.overlay-login .overlay-navigation a {
right: 5%
}
}
.footer {
width: 100%;
font-size: 12px;
line-height: 16px;
color: #fff
}
.footer .col-2 {
text-align: right
}
.footer .newsletter {
max-width: 540px;
padding-left: 27px;
border-left: 4px solid #fff;
color: #fff;
position: relative;
z-index: 0;
padding-bottom: 20px
}
.footer .newsletter label {
font-size: 30px;
line-height: 40px;
padding-top: 90px;
display: block;
margin-bottom: -2px
}
.footer .newsletter input[type*=email] {
width: 100%;
background: none;
outline: 0;
border: 0;
border-bottom: 1px solid #fff;
font-size: 12px;
font-weight: 400;
height: auto;
padding: 20px 100px 20px 10px;
color: #fff
}
.footer .newsletter input[type*=submit] {
width: 100px;
background: none;
border: 0;
padding: 0;
font-size: 12px;
font-weight: 400;
color: #fff;
position: absolute;
bottom: 30px;
right: 0
}
.footer .copyright {
font-size: 12px;
margin-top: 31px
}
.footer .social {
margin-top: 98px;
margin-bottom: 39px
}
.footer .social img {
opacity: 1;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease
}
.footer .social img:hover {
opacity: .5
}
.footer .linkService {
margin-bottom: 39px
}
.footer .linkService ul li {
margin-bottom: 5px
}
.footer .col-2 ul.inline li {
margin-left: 40px
}
.footer .credits img {
display: inline-block;
vertical-align: middle;
width: 14px;
margin: 0 10px
}
@media(max-width:767px) {
.homebody .footer {
height: auto;
padding-bottom: 80px
}
.footer .newsletter {
padding-left: 0;
border-left: 0;
text-align: center
}
.footer .newsletter label {
line-height: 35px;
text-align: center;
padding-top: 60px;
padding-bottom: 20px
}
.footer .newsletter input[type*=email] {
text-align: center;
padding: 20px 40px 15px 40px;
width: auto;
margin: 0 20px
}
.footer .newsletter input[type*=submit] {
width: auto;
background: none;
border: 0;
font-size: 22px;
padding: 0;
font-weight: 300;
position: relative;
border-bottom: 1px solid #fff;
padding-bottom: 0;
margin-top: 30px;
bottom: auto;
right: auto
}
.footer .left .copyright {
display: none
}
.footer .social {
margin-top: 70px;
margin-bottom: 70px;
text-align: center
}
.footer .social a {
margin: 0 2px;
display: inline-block
}
.footer .social a img {
width: 20px
}
.footer .social li {
margin-left: 2px
}
.footer .linkService {
text-align: center;
font-size: 16px
}
.footer .right .copyright {
text-align: center
}
.footer .credits {
text-align: center;
margin-top: 20px;
font-size: 10px
}
.footer .copyright {
text-align: center;
display: none
}
}
body.manage-cookie-css {
padding-bottom: 41px
}
#acceptcookie {
position: fixed;
text-align: center;
padding: 4px 30px;
background: #000;
border-top: 1px solid #000;
color: #fff;
font-size: 12px;
line-height: 1;
bottom: 0;
left: 50%;
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 100%;
z-index: 100;
opacity: 1;
transition: all 750ms ease-in-out
}
#acceptcookie.hide-modal {
-moz-transform: translate(-50%, calc(100% - 20px));
-ms-transform: translate(-50%, calc(100% - 20px));
-o-transform: translate(-50%, calc(100% - 20px));
-webkit-transform: translate(-50%, calc(100% - 20px));
transform: translate(-50%, calc(100% - 20px))
}
.clss-tablet-device.mob-open .open-nav-mobile #acceptcookie,
.clss-phone-device.mob-open .open-nav-mobile #acceptcookie {
-moz-transform: translate(-50%, calc(100% - 20px));
-ms-transform: translate(-50%, calc(100% - 20px));
-o-transform: translate(-50%, calc(100% - 20px));
-webkit-transform: translate(-50%, calc(100% - 20px));
transform: translate(-50%, calc(100% - 20px));
pointer-events: none
}
#acceptcookie a {
color: #fff;
text-decoration: underline
}
#acceptcookie button {
margin-left: 10px;
padding: 2px 10px;
background-color: #444;
color: #fff;
border: 0;
font-size: 12px
}
@media(max-width:767px) {
#acceptcookie {
line-height: 1.4;
padding-top: 8px;
padding-bottom: 7px
}
#acceptcookie button {
padding: 8px 14px;
margin: 6px 0 3px 0
}
#acceptcookie.hide-modal {
-moz-transform: translate(-50%, calc(100% - 26px));
-ms-transform: translate(-50%, calc(100% - 26px));
-o-transform: translate(-50%, calc(100% - 26px));
-webkit-transform: translate(-50%, calc(100% - 26px));
transform: translate(-50%, calc(100% - 26px))
}
}
.hero .shadow {
background: url(../img/listing-shadow.png) repeat-x left bottom;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 2
}
.hero .shadow-full {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 2;
background-color: rgba(0, 0, 0, .3);
background-color: rgba(0, 0, 0, 0.33);
}
.hero .shadow.top {
background: url(../img/listing-shadow-top.png) repeat-x left top
}
.hero .shadow.left {
background: -moz-linear-gradient(left, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 100%);
background: -webkit-linear-gradient(left, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=1);
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
width: 200px;
height: 100%
}
.hero .shadow.bottom,
.shadow.bottom {
background: url(../img/listing-shadow.png) repeat-x left bottom;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 2
}
.hero .shadow.right {
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 100%);
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=1);
position: absolute;
left: auto;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
width: 200px;
height: 100%
}
h1 {
font-size: 42px;
font-weight: 300;
line-height: 1;
}
.hero .small h1 {
font-size: 160px;
margin-left: .25em
}
.hero .xsmall h1 {
font-size: 120px;
margin-left: .12em
}
.hero .xxsmall h1 {
font-size: 2.8vw !important;
line-height: 200px;
letter-spacing: .2em;
margin-left: .12em;
text-transform: uppercase;
}
.hreo-team .xxsmall h1 {
line-height: 50px;
letter-spacing: 0.05em;
}
.hreo-team .xxsmall h1,
.hreo-team .tipologia {
position: inherit;
}
.hreo-team .xxsmall h1 {
position: absolute;
bottom: 110px;
top: auto;
}
.hero .tipologia {
display: block;
position: absolute;
top: 50px;
width: 100%;
text-align: center;
color: #fff;
font-size: 16px;
text-transform: none;
font-weight: 400
}
.hero .small h1.title_32 {
font-size: 3vw !important;
line-height: 140px
}
.hero .small h1.title_28 {
font-size: 3vw !important
}
.hero .small h1.title_27 {
font-size: 3vw !important
}
.hero .small h1.title_26 {
font-size: 3vw !important
}
.hero .small h1.title_25 {
font-size: 3.4vw !important
}
.hero .small h1.title_24 {
font-size: 3.4vw !important
}
.hero .small h1.title_23 {
font-size: 3.4vw !important
}
.hero .small h1.title_22 {
font-size: 3.4vw !important
}
.hero .small h1.title_21 {
font-size: 3.4vw !important
}
.hero .small h1.title_20 {
font-size: 3.4vw !important
}
.hero .small h1.title_19 {
font-size: 3.4vw !important
}
.hero .small h1.title_18 {
font-size: 3.4vw !important
}
.hero .small h1.title_17 {
font-size: 4.8vw !important
}
.hero .small h1.title_16 {
font-size: 5vw !important
}
.hero .small h1.title_15 {
font-size: 5vw !important
}
.hero .small h1.title_14 {
font-size: 5vw !important
}
.hero .small h1.title_13 {
font-size: 6vw !important
}
.hero .small h1.title_12 {
font-size: 6.5vw !important
}
.hero .small h1.title_11 {
font-size: 6.5vw !important
}
.hero .small h1.title_10 {
font-size: 6.5vw !important
}
.hero .small h1.title_9 {
font-size: 7vw !important
}
.hero .small h1.title_8 {
font-size: 7vw !important
}
.hero .small h1.title_7 {
font-size: 8.3vw !important
}
.hero .small h1.title_6 {
font-size: 8.3vw !important
}
.hero .small h1.title_5 {
font-size: 8.3vw !important
}
.hero .small h1.title_4 {
font-size: 8.3vw !important
}
.hero .small h1.title_3 {
font-size: 8.3vw !important
}
.hero .small h1.title_2 {
font-size: 8.3vw !important
}
h2 {
font-size: 60px;
line-height: 1;
letter-spacing: 0;
font-weight: 300;
margin-bottom: 12px
}
h2.light {
font-weight: 300;
line-height: 1
}
h2.xl {
font-size: 70px;
font-weight: 300;
line-height: 1;
margin-bottom: 20px
}
h3 {
font-size: 60px;
font-weight: 300;
line-height: 1;
margin-bottom: 10px
}
h4 {
font-size: 30px;
line-height: 1;
letter-spacing: 0;
font-weight: 400;
margin-bottom: 10px
}
.desc {
padding: 0 15px
}
.desc.medium {
font-size: 20px;
padding: 0 10%;
line-height: 1.6
}
.social-ico {
font-size: 16px;
margin-bottom: 35px;
display: inline-block
}
.social-ico img {
margin-right: 8px;
display: inline-block;
bottom: -2px;
position: relative
}
.collection .desc {
max-width: 600px;
margin-left: auto;
margin-right: auto
}
.text.text-center p:last-child {
margin-bottom: 0
}
.text-cta {
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
color: #1e1e1e
}
.fancy-yt-video .text-cta {
text-transform: none;
font-size: 14px
}
.text-cta:before {
content: "";
width: 25px;
height: 1px;
background: #1e1e1e;
display: inline-block;
margin-right: 20px;
vertical-align: middle
}
ul li:first-child .text-cta:before {
display: none
}
ul.firstbefore-visible li:first-child .text-cta:before {
display: inline-block
}
.text-center>.categorie>ul.firstbefore-visible li:first-child .text-cta:before {
display: none
}
.section .text .text-cta:before {
background: #fff
}
.text-hover .text-cta:before {
display: none
}
.text .text-cta {
position: relative;
top: -18px
}
.backTop {
position: fixed;
bottom: 30px;
color: #fff !important;
background: #989898;
padding: 0 20px;
height: 48px;
font-size: 12px;
right: 30px;
opacity: 1;
z-index: 9999;
display: inline-block;
line-height: 48px;
font-weight: 400;
text-transform: uppercase;
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
opacity: 0;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-webkit-transition: opacity .5s;
transition: opacity .5s
}
.backTop.on {
opacity: .6
}
.no-touch .backTop:hover {
opacity: 1
}
@-webkit-keyframes a1460898080641 {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 0
}
33% {
opacity: 1
}
66% {
opacity: 1
}
100% {
-webkit-transform: translate3d(0, 15px, 0);
-moz-transform: translate3d(0, 15px, 0);
-ms-transform: translate3d(0, 15px, 0);
-o-transform: translate3d(0, 15px, 0);
transform: translate3d(0, 15px, 0);
opacity: 0
}
}
@keyframes a1460898080641 {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 0
}
33% {
opacity: 1
}
66% {
opacity: 1
}
100% {
-webkit-transform: translate3d(0, 15px, 0);
-moz-transform: translate3d(0, 15px, 0);
-ms-transform: translate3d(0, 15px, 0);
-o-transform: translate3d(0, 15px, 0);
transform: translate3d(0, 15px, 0);
opacity: 0
}
}
.backTop img {
height: 20px;
display: inline-block;
vertical-align: middle;
margin-top: -20px;
z-index: 2;
-moz-animation-name: a1460898080641;
-o-animation-name: a1460898080641;
-webkit-animation-name: a1460898080641;
animation-name: a1460898080641;
-moz-animation-duration: 1500ms;
-o-animation-duration: 1500ms;
-webkit-animation-duration: 1500ms;
animation-duration: 1500ms;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-play-state: running;
-o-animation-play-state: running;
-webkit-animation-play-state: running;
animation-play-state: running;
-moz-animation-delay: 1000ms;
-o-animation-delay: 1000ms;
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms
}
.open-nav-mobile .backTop.on {
display: none !important
}
@media(max-width:1500px) {
.hero h1 {
font-size: 180px
}
.hero .small h1 {
font-size: 140px
}
.hero .xsmall h1 {
font-size: 100px
}
.hero .xxsmall h1 {
font-size: 60px
}
.hero .tipologia {
top: 45px
}
}
@media(max-width:1400px) {
.hero h1 {
font-size: 160px
}
.hero .small h1 {
font-size: 120px
}
.hero .xsmall h1 {
font-size: 80px
}
.hero .xxsmall h1 {
font-size: 50px
}
h2.xl {
font-size: 60px
}
}
@media(max-width:1279px) {
.hero h1 {
font-size: 140px
}
.hero .small h1 {
font-size: 100px
}
.hero .xsmall h1 {
font-size: 60px
}
.hero .xxsmall h1 {
font-size: 40px
}
}
@media(max-width:1140px) {
.menu-mobile {
display: block
}
.hero h1 {
font-size: 120px
}
.hero .small h1 {
font-size: 70px
}
.hero .xsmall h1 {
font-size: 40px
}
.hero .xxsmall h1 {
font-size: 30px
}
.hero .tipologia {
top: 30px
}
}
@media(min-width:992px) and (max-width:1199px) {
h2.xl {
font-size: 52px
}
h2 {
font-size: 52px
}
h3 {
font-size: 42px
}
}
@media(min-width:768px) and (max-width:991px) {
h2 {
font-size: 42px
}
h3 {
font-size: 32px
}
}
@media(max-width:767px) {
.hero h1 {
font-size: 44px;
line-height: 5
}
.hero .small h1 {
font-size: 36px;
line-height: 6
}
.hero .xsmall h1 {
font-size: 26px;
line-height: 9
}
.hero .xxsmall h1 {
font-size: 26px;
line-height: 9
}
.hero.prod-sheet .small h1 {
display: none
}
h2,
h2.xl {
font-size: 40px;
}
h3 {
font-size: 30px;
line-height: 30px
}
h4 {
font-size: 26px;
line-height: 36px
}
.categorie .text-cta:before,
.categorie ul.firstbefore-visible li:first-child .text-cta:before {
display: none
}
#homepage .text-cta:before {
display: inline-block
}
#homepage ul li:first-child .text-cta:before {
display: none
}
.categorie ul.inline li {
display: inline-block
}
.desc {
font-size: 14px
}
.desc.medium {
font-size: 14px;
line-height: 1.4
}
.social-ico {
margin-bottom: 20px
}
.project-singolo .hero h1,
.project-singolo .hero .tipologia {
display: none
}
.backTop {
bottom: 6px;
right: 6px;
padding: 0;
width: 40px;
height: 40px
}
.backTop.on {
opacity: .9
}
.backTop img {
margin: 0;
position: absolute;
top: 1px;
left: 15px;
transform: none
}
}
img+.text {
margin-top: 60px
}
img+h4 {
margin-top: 30px;
margin-left: 30px
}
img+h4+.desc {
margin-left: 30px
}
.col-1 .text {
margin-top: 400px
}
.col-2 .text-cta {
margin-top: 450px
}
.hero {
position: relative;
z-index: 0;
overflow: hidden;
height: 100vh;
background: #1e1e1e;
z-index: 1;
}
.hero:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient( to top , #023047 ,#023047e5, #0000);
background: linear-gradient( to top , #000000f0 ,#000000b0, #0000);
background: linear-gradient( to right , #0000008f ,#00000052, #0000);
}
.hero.adjustHeight {
height: 100vh
}
@-webkit-keyframes imagehero {
0% {
opacity: 0;
-webkit-transform: scale(1.2)
}
50% {
opacity: 1;
-webkit-transform: scale(1)
}
100% {
opacity: 1;
-webkit-transform: scale(1)
}
}
@-moz-keyframes imagehero {
0% {
opacity: 0;
-moz-transform: scale(1.2)
}
50% {
opacity: 1;
-moz-transform: scale(1)
}
100% {
opacity: 1;
-moz-transform: scale(1)
}
}
@-ms-keyframes imagehero {
0% {
opacity: 0;
-ms-transform: scale(1.2)
}
50% {
opacity: 1;
-ms-transform: scale(1)
}
100% {
opacity: 1;
-ms-transform: scale(1)
}
}
@keyframes imagehero {
0% {
opacity: 0;
transform: scale(1.2)
}
50% {
opacity: 1;
transform: scale(1)
}
100% {
opacity: 1;
transform: scale(1)
}
}
.slick-arrow {
position: absolute;
top: 50%;
margin-top: -25px;
width: 48px;
height: 48px;
background-color: rgba(152, 152, 152, .8);
z-index: 5;
border: 0;
font-size: 0;
cursor: pointer
}
.slick-prev {
left: 10px
}
.slick-prev:after {
content: "";
background: url(/icone/prev-arrow-white.svg);
background-size: 24px 24px;
width: 24px;
height: 24px;
display: inline-block;
background-size: contain;
position: absolute;
left: 50%;
margin-left: -12px;
margin-top: -12px;
top: 50%
}
.slick-next {
right: 10px
}
.slick-next:after {
content: "";
background: url(/icone/next-arrow-white.svg);
background-size: 24px 24px;
width: 24px;
height: 24px;
display: inline-block;
background-size: contain;
position: absolute;
left: 50%;
margin-left: -12px;
margin-top: -12px;
top: 50%
}
.exibSlide {
overflow: hidden
}
html.explorer .exibSlide .item {
width: 100%
}
html.explorer .exibSlide .item img.frame {
width: 100%
}
html:not(.explorer) .exibSlide .slider-track,
html:not(.explorer) .focus-slider-prod .slider-track {
-webkit-transition: all 1s cubic-bezier(.7, 0, .3, 1);
-moz-transition: all 1s cubic-bezier(.7, 0, .3, 1);
-o-transition: all 1s cubic-bezier(.7, 0, .3, 1);
transition: all 1s cubic-bezier(.7, 0, .3, 1)
}
html:not(.explorer) .exibSlide .item .wrap-archive,
.exibSlide .item .wrap-archive {
display: block;
width: 100%
}
html:not(.explorer) .exibSlide .item img.frame,
html:not(.explorer) .focus-slider-prod .item img.frame {
width: 100%;
-webkit-transition: all 1s cubic-bezier(.7, 0, .3, 1);
-moz-transition: all 1s cubic-bezier(.7, 0, .3, 1);
-o-transition: all 1s cubic-bezier(.7, 0, .3, 1);
transition: all 1s cubic-bezier(.7, 0, .3, 1);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2)
}
html:not(.explorer) .exibSlide .item.slick-active img.frame,
html:not(.explorer) .focus-slider-prod .item.slick-active img.frame {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
@media(max-width:1450px) {
.exibSlide .gallery-nav {
display: none !important
}
}
.hero .custom-hero-swiper {
position: absolute;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-attachment: fixed;
opacity: 0;
-moz-animation-name: imagehero;
-o-animation-name: imagehero;
-webkit-animation-name: imagehero;
animation-name: imagehero;
-moz-animation-duration: 4000ms;
-o-animation-duration: 4000ms;
-webkit-animation-duration: 4000ms;
animation-duration: 4000ms;
-moz-animation-timing-function: cubic-bezier(0, .33, .2, 1);
-o-animation-timing-function: cubic-bezier(0, .33, .2, 1);
-webkit-animation-timing-function: cubic-bezier(0, .33, .2, 1);
animation-timing-function: cubic-bezier(0, .33, .2, 1);
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-moz-animation-play-state: initial;
-o-animation-play-state: initial;
-webkit-animation-play-state: initial;
animation-play-state: initial;
-moz-animation-delay: 1000ms;
-o-animation-delay: 1000ms;
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
z-index: -1;
}
.hero .custom-hero-swiper .slide,
.hero .custom-hero-swiper .slide > div img,
.hero .custom-hero-swiper .slide > div {
position: absolute;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-attachment: fixed;
opacity: 0;
-moz-animation-name: imagehero;
-o-animation-name: imagehero;
-webkit-animation-name: imagehero;
animation-name: imagehero;
-moz-animation-duration: 4000ms;
-o-animation-duration: 4000ms;
-webkit-animation-duration: 4000ms;
animation-duration: 4000ms;
-moz-animation-timing-function: cubic-bezier(0, .33, .2, 1);
-o-animation-timing-function: cubic-bezier(0, .33, .2, 1);
-webkit-animation-timing-function: cubic-bezier(0, .33, .2, 1);
animation-timing-function: cubic-bezier(0, .33, .2, 1);
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-moz-animation-play-state: initial;
-o-animation-play-state: initial;
-webkit-animation-play-state: initial;
animation-play-state: initial;
-moz-animation-delay: 1000ms;
-o-animation-delay: 1000ms;
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.hero .slider .slide>div {
visibility: hidden
}
.hero .slider.slick-initialized .slide>div {
visibility: visible
}
.touch .hero .slide>div {
background-attachment: initial
}
.hero .slide video {
position: relative;
display: block;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.hero h1 {
position: absolute;
z-index: 2;
width: 100%;
color: #fff;
top: 50%;
margin-top: -100px;
text-align: center;
margin-left: .45em;
text-transform: uppercase
}
.hero .slide:hover {
cursor: pointer
}
.hero .slick-list,
.hero .slick-slider,
.hero .slick-track {
height: 100%
}
.clss-phone-device.mob-open .open-nav-mobile .slick-list.draggable {
z-index: unset
}
@-webkit-keyframes a1460898080640 {
0% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 0
}
33% {
opacity: 1
}
66% {
opacity: 1
}
100% {
-webkit-transform: translate3d(0, 30px, 0);
opacity: 0
}
}
.arrow {
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -7px;
z-index: 2;
opacity: 0;
animation-name: a1460898080640;
animation-duration: 2000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
animation-delay: 1000ms
}
.categorie {
margin-bottom: 75px;
margin-top: 15px
}
.categorie.tar {
text-align: right
}
.sectionCategories {
padding: 150px 0 80px
}
.sectionCategories .categorie {
display: flex;
align-items: center;
justify-content: center
}
@media(max-width:991px) {
.sectionCategories._be-social .categorie,
.sectionCategories._be-inspired .categorie {
justify-content: unset;
overflow-x: auto
}
}
@media(max-width:767px) {
.sectionCategories._be-social .categorie,
.sectionCategories._be-inspired .categorie {
flex-wrap: wrap
}
.sectionCategories._be-social ul.inline li,
.sectionCategories._be-inspired ul.inline li {
min-width: 90%
}
.sectionCategories._be-social ul.inline li:first-child,
.sectionCategories._be-inspired ul.inline li:first-child {
margin-left: 14px
}
.sectionCategories._be-social ul.inline li .text-cta:before,
.sectionCategories._be-inspired ul.inline li .text-cta:before {
content: "";
width: 25px;
height: 1px;
background: #1e1e1e;
display: inline-block !important;
margin-right: 20px;
vertical-align: middle
}
.sectionCategories._be-social ul.inline li {
margin-bottom: 2px
}
}
.sectionCategories .categorie li a {
display: flex;
align-items: center
}
.sectionCategories .categorie li a .icon-besocial {
max-height: 20px
}
.text-hover {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
text-align: center;
color: #fff
}
.text-hover .text-cta {
color: #fff
}
.box-hover video {
width: 100%;
position: relative;
z-index: 0;
display: block;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.overlay {
max-width: 100%;
overflow: hidden;
position: relative;
top: 0;
height: 100%
}
.overlay:before {
content: "";
width: 100%;
height: 100%;
background: rgba(30, 30, 30, .5);
position: absolute;
top: 0;
left: 0;
z-index: 1
}
.box-hover {
position: relative;
z-index: 0;
overflow: hidden
}
.box-hover img {
position: relative;
z-index: 0
}
.play {
margin: 0 auto 20px;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-webkit-transition: opacity .5s;
transition: opacity .5s
}
a:hover .play {
opacity: .5
}
.play+h2+.text-cta:before {
display: none
}
.news {
padding-top: 100px
}
.news a {
color: #1e1e1e;
-moz-transition: color .5s;
-o-transition: color .5s;
-webkit-transition: color .5s;
transition: color .5s
}
.news a img {
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-webkit-transition: opacity .5s;
transition: opacity .5s
}
.news a:hover {
color: #989898
}
.news a:hover img {
opacity: .5
}
.news .title {
margin-bottom: 80px
}
.news .news-box {
margin-bottom: 80px
}
.news .date {
text-transform: uppercase;
font-weight: 400
}
.news .desc {
padding: 0
}
@media(min-width:1550px) {
.hero .slide video {
min-width: 127%
}
}
@media(min-width:992px) and (max-width:1199px) {
.sectionCategories {
padding: 100px 0 30px
}
}
@media(max-width:1024px) {
.news .date {
font-size: 14px
}
.news .date h4 {
font-size: 20px;
line-height: 27px
}
.news h4.titolo {
font-size: 24px;
line-height: 32px
}
}
@media screen and (orientation:portrait) {
.clss-tablet-device .hero {
height: 44vh
}
}
@media(max-width:768px) {
.sectionCategories {
padding: 50px 0 0
}
.categorie {
margin-bottom: 55px
}
.news {
padding-top: 50px
}
.news .title {
margin-bottom: 40px
}
.news .date {
font-size: 12px
}
.news .date h4 {
font-size: 20px;
line-height: 32px
}
.news a img {
margin-top: 20px
}
.arrow {
display: none
}
.hero .slide video {
width: 120%
}
}
@media(max-width:767px) {
.clss-phone-device .hero {
height: 34vh
}
}
.prod-slide,
.no-slider {
padding: 120px 0 40px 0;
padding-bottom: 50px;
overflow-x: hidden
}
.prod-slide {
background: url(/img/preloader.gif) no-repeat center 140px;
overflow: hidden
}
.prod-slide .slider-prod:not(.slick-initialized) {
display: flex;
width: 9000px
}
.prod-slide .slider-prod:not(.slick-initialized) .item {
width: 815px
}
.prod-slide .slider-prod {
/*opacity: 0;*/
transition: all .4s ease
}
.prod-slide .slider-prod.visibile {
opacity: 1
}
.prod-slide .slider-prod .item {
cursor: pointer;
overflow: hidden
}
.prod-slide .slider-prod .item .wrap {
margin: 0 2%;
width: 900px;
max-width: 100%;
}
.prod-slide .slider-prod .item .wrap .bg-black {
background-color: #1e1e1e;
position: relative
}
.prod-slide .slider-prod .item.item--video {
position: relative
}
.prod-slide .slider-prod .item.item--video::after {
background-image: url('/icone/play.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: '';
display: block;
height: 40px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 40px
}
.prod-slide .slider-prod.slider-listing .item .wrap .bg-black,
#loadtarget {
height: 100%
}
.prod-slide .slider-prod.w-shadow .item .bg-black:before {
content: "";
background: url(../img/listing-shadow.png) repeat-x left bottom;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 2
}
.prod-slide .slider-prod .item .wrap .bg-black img.frame {
opacity: .3;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
height: 480px;
width: 100%;
object-fit: cover;
}
.slider-prod.lazyload img.frame {
opacity: .3 !important
}
.prod-slide .slider-prod .item.slick-current .bg-black img.frame {
opacity: 1;
cursor: default
}
.slider-prod.lazyload .item.slick-current .bg-black img.frame {
opacity: 1 !important;
cursor: default
}
.slider-prod.lazyload .item.slick-current.no-points .bg-black img.frame {
cursor: pointer
}
@media(min-width:800px) {
.slider-prod.lazyload .item.slick-current.no-points .bg-black img.frame {
width: 100% !important
}
}
.prod-slide .slider-prod .item .wrap .bg-black div.archivio,
.wrap-archive>.archivio,
.wrap-archive>.print,
.wrap-archive>.download,
.wrap-archive>a>.download {
position: absolute;
background-color: rgba(152, 152, 152, .8);
height: 47px;
width: 47px;
bottom: 10px;
right: 10px;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
opacity: 0;
z-index: 1
}
.models-2d .wrap-archive>.download,
.sezione.disegni .wrap-archive>.download {
background: none;
height: auto;
position: static;
opacity: 1;
width: auto
}
.prod-slide .slider-prod .item.slick-current .wrap .bg-black:hover div.archivio,
.wrap-archive:hover div {
opacity: 1;
cursor: pointer
}
.prod-slide .slider-prod .item .wrap .bg-black div.archivio img,
.wrap-archive div img:not(.fancybox-image) {
margin: 0 auto;
margin-top: 12px;
width: auto !important
}
.prod-slide .slider-prod .item .wrap .bg-black .archivio.download,
.wrap-archive .download {
right: 127px !important
}
.prod-slide .slider-prod .item .wrap .bg-black .archivio.archive,
.wrap-archive .archive {
right: 67px !important
}
.fancybox-type-iframe .wrap-archive .print {
display: none
}
.wrap-archive.no-print .archive,
.fancybox-type-iframe .wrap-archive .archive {
right: 10px !important
}
.wrap-archive.no-print .download,
.fancybox-type-iframe .wrap-archive .download {
right: 67px !important
}
.prod-slide .slider-prod .item .wrap .bg-black .archivio.print,
.wrap-archive .print {
right: 10px !important
}
.wrap-archive.no-archive .download {
right: 10px !important
}
.gallery-nav {
white-space: nowrap;
position: absolute;
z-index: 8;
left: 50%;
bottom: 10px;
display: inline-block;
background-color: #fff;
text-transform: uppercase;
padding: 12px 20px 12px 20px;
color: #1e1e1e;
font-size: 12px;
font-weight: 500;
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
opacity: 0;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
.prod-slide .slider-prod .item.slick-current .wrap .bg-black:hover .gallery-nav,
.exibSlide .wrap-archive:hover .gallery-nav {
opacity: 1
}
.gallery-nav.mobile {
display: none
}
.gallery-nav img {
display: inline;
margin-right: 15px;
position: relative;
bottom: -4px
}
.prod-slide .slider-prod .item .wrap .bg-black .text {
position: absolute;
bottom: 50px;
width: 90%;
left: 5%;
text-align: center;
color: #fff;
z-index: 2;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease;
opacity: 0
}
.prod-slide .slider-prod .item.slick-current .wrap .bg-black .text {
opacity: 1
}
.prod-slide .slider-prod.w-shadow .item.slick-current {
cursor: default
}
.prod-slide .slider-prod .item .wrap .bg-black .text h4 {
font-weight: 300;
line-height: 1.2
}
.prod-slide .slider-prod .item .wrap .bg-black .text a {
color: #fff;
}
.prod-slide .slider-prod .item .wrap .bg-black .text .btn {
margin-top: 30px
}
.prod-slide .slider-prod .item .wrap .bg-black .text.center {
top: 50%;
left: 0;
bottom: auto;
-moz-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
-o-transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.prod-slide .numerazione {
position: absolute;
left: 60px;
top: 50%;
margin-top: -10px;
color: #fff;
font-size: 15px;
z-index: 9;
display: inline-block;
cursor: pointer
}
.prod-slide .numerazione.next-num {
right: 60px;
left: auto
}
.prod-slide .numerazione.next-num:after {
content: "\f178";
font-weight: 300;font-family: 'Font Awesome 5 Pro';
width: 40px;
height: 1px;
display: inline-block;
margin-left: 15px;
font-size: 24px;
top: 5px;
position: relative;
animation-name: move-rr-eight;
animation-duration: 2000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}
.prod-slide .numerazione.prev-num:before {
content: "\f177";
font-weight: 300;font-family: 'Font Awesome 5 Pro';
width: 40px;
height: 1px;
display: inline-block;
font-size: 24px;
top: 5px;
position: relative;
animation-name: move-ll-left;
animation-duration: 2000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}
@-webkit-keyframes move-rr-eight {
0% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 0;
}
33% {
opacity: 1;
}
66% {
opacity: 1;
}
100% {
-webkit-transform: translate3d(30px, 0, 0);
opacity: 0;
}
}
@-webkit-keyframes move-ll-left {
0% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 0;
}
33% {
opacity: 1;
}
66% {
opacity: 1;
}
100% {
-webkit-transform: translate3d(-30px, 0, 0);
opacity: 0;
}
}
.prod-slide .points,
.fancybox-outer .points {
position: absolute;
margin-left: -8px;
margin-top: -8px;
width: 17px;
height: 17px;
opacity: 0;
background-color: rgba(0, 0, 0, .3);
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
border-radius: 17px
}
.prod-slide .points:after,
.fancybox-outer .points:after {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 17px;
height: 1px;
background-color: #fff
}
.prod-slide .points:before,
.fancybox-outer .points:before {
content: "";
position: absolute;
left: 8px;
top: 0;
width: 1px;
height: 17px;
background-color: #fff
}
.prod-slide .slick-current .wrap-archive:hover .points,
.fancybox-outer.wrap-archive:hover .points {
opacity: 0;
opacity: 1 \9;
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
-o-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1.2s;
-moz-animation-duration: 1.2s;
-o-animation-duration: 1.2s;
animation-duration: 1.2s;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
-o-animation-delay: .4s;
animation-delay: .4s
}
.prod-slide .points.point-01,
.fancybox-outer .points.point-01 {
left: 41.3%;
top: 58.5%
}
.prod-slide .points.point-02,
.fancybox-outer .points.point-02 {
left: 37.3%;
top: 69.5%
}
.prod-slide .points.point-03,
.fancybox-outer .points.point-03 {
left: 14.3%;
top: 69.5%
}
.prod-slide .points.point-04,
.fancybox-outer .points.point-04 {
left: 84.3%;
top: 63.5%
}
.prod-slide .points.point-05,
.fancybox-outer .points.point-05 {
left: 50.3%;
top: 76.5%
}
.prod-slide .points.point-06,
.fancybox-outer .points.point-06 {
left: 41.3%;
top: 64.5%
}
.prod-slide .points.point-07,
.fancybox-outer .points.point-07 {
left: 13.3%;
top: 69.5%
}
.prod-slide .points.point-08,
.fancybox-outer .points.point-08 {
left: 74.3%;
top: 69.5%
}
.prod-slide .points.point-09,
.fancybox-outer .points.point-09 {
left: 50.3%;
top: 53.5%
}
.prod-slide .points.point-10,
.fancybox-outer .points.point-10 {
left: 22.3%;
top: 38.5%
}
.prod-slide .points.point-11,
.fancybox-outer .points.point-11 {
left: 22.3%;
top: 50.5%
}
.prod-slide .points.point-12,
.fancybox-outer .points.point-12 {
left: 79.3%;
top: 61.5%
}
.single-slider-prod .item {
text-align: center
}
.single-slider-prod .item img {
max-height: 600px;
margin: 0 auto
}
.single-slider-prod .item .wrap-archive {
position: relative;
display: inline-block
}
.prod-slide.listing-slider {
position: relative;
height: calc(85vh - 40px);
padding-top: 0;
padding-bottom: 0;
margin-bottom: 60px
}
.prod-slide.listing-slider .numerazione {
left: 30px
}
.prod-slide.listing-slider .numerazione.next-num {
right: 30px;
left: auto
}
.listing-slider.prod-slide .slider-listing .item .wrap {
margin: 0;
height: 100%;
position: relative
}
.listing-slider.prod-slide .slider-listing .item .image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background-size: cover;
background-position: center center
}
@media(max-width:767px) {
.wrap-archive.no-print .download {
right: 10px !important
}
}
.no-slider .immagine img.frame {
width: 100%
}
@media(max-width:1450px) {
.prod-slide .slider-prod .item .wrap .bg-black img.frame {
height: 480px
}
.gallery-nav {
bottom: -50px
}
.gallery-nav.mobile {
display: inline-block !important;
opacity: 1;
z-index: 1
}
}
@media(min-width:992px) and (max-width:1199px) {
.sectionCategories {
padding: 100px 0 30px
}
}
@media(min-width:768px) and (max-width:991px) {
.prod-slide .slider-prod .item .wrap .bg-black img.frame {
height: 300px;
width: 340px;
object-fit: cover;
object-position: center;
max-height: 250px;
max-width: 100%
}
.prod-slide .numerazione.next-num {
right: 40px
}
.prod-slide .numerazione.prev-num {
left: 40px
}
}
@media(max-width:767px) {
.prod-slide,
.no-slider,
.exib-slide {
padding: 50px 0 80px 0
}
.prod-slide .slider-prod .item .wrap .bg-black img.frame {
height: 230px;
width: 100%;
object-fit: cover;
object-position: center;
max-height: 230px;
max-width: 100%
}
.prod-slide .slider-prod .item.slick-current .wrap .bg-black:hover .gallery-nav,
.exibSlide .item.slick-current .wrap-archive:hover .gallery-nav {
display: none
}
.prod-slide .numerazione.next-num:after,
.prod-slide .numerazione.prev-num:before {
display: none
}
.prod-slide .numerazione.next-num {
right: 20px
}
.prod-slide .numerazione.prev-num {
left: 20px
}
.no-slider .immagine img.frame {
margin-bottom: 40px
}
.no-slider .item:last-child .immagine img.frame {
margin-bottom: 0
}
div.archivio {
display: none !important
}
.prod-slide .slider-prod .item.item--video::after {
height: 25px;
transform: translate(-50%, -70%);
width: 25px
}
}
.inspiration .points {
opacity: 0;
opacity: 1 \9;
margin-left: -8px;
margin-top: -8px;
position: absolute;
width: 17px;
height: 17px;
background-color: rgba(0, 0, 0, .3);
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
border-radius: 17px
}
.inspiration .points:after {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 17px;
height: 1px;
background-color: #fff
}
.inspiration .points:before {
content: "";
position: absolute;
left: 8px;
top: 0;
width: 1px;
height: 17px;
background-color: #fff
}
.inspiration .wrap-archive .frame {
width: 100%
}
.wrap-archive {
position: relative;
display: inline-block
}
.lined {
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 30px
}
.lined a {
color: #1e1e1e
}
.lined:before {
content: "";
width: 40px;
height: 1px;
background: #1e1e1e;
display: inline-block;
margin-right: 15px;
vertical-align: middle
}
.text-by {
font-size: 16px;
margin-bottom: 100px
}
.text-by a {
color: #1e1e1e;
text-decoration: underline;
padding-bottom: 6px;
display: block
}
.descrizione {
padding-right: 50px;
}
.descrizione h2 {
margin-bottom: 35px;
line-height: 1.1
}
.col-lg-8.descrizione.text-center {
max-width: 900px
}
.descrizione .text {
font-weight: 300;
line-height: 1.5
}
.descrizione .text.first-letter::first-letter,
.descrizione .text.first-letter>p:first-child::first-letter {
font-size: 80px;
line-height: .6;
margin-right: 5px
}
.descrizione .text a:not(.load-more) {
text-decoration: underline;
color: #1e1e1e
}
.descrizione .categorie {
margin-bottom: 0
}
.descrizione .categorie.m-t-50 {
margin-top: 50px
}
.descrizione .hidden-text {
display: none;
margin-bottom: 25px
}
.versioni h4 {
font-weight: 300;
margin-bottom: 40px
}
.versioni .titolo {
text-align: center
}
.versioni ul.slick-dots {
text-align: center;
margin-top: 20px
}
.versioni ul.slick-dots li {
display: inline;
margin: 0 5px 0 14px
}
.versioni ul.slick-dots li:after {
content: "";
width: 0;
height: 1px;
background: #1e1e1e;
display: inline-block;
margin-left: 0;
vertical-align: middle;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
.versioni ul.slick-dots li.slick-active:after {
width: 40px;
margin-left: 15px
}
.versioni ul.slick-dots li button {
font-size: 14px;
background: none;
border: 0;
cursor: pointer;
padding: 5px;
letter-spacing: 2px
}
.aligner {
display: flex;
align-items: center;
justify-content: center
}
.aligner-item--bottom {
align-self: flex-end;
padding-bottom: 80px
}
.aligner-item--center {
align-self: center
}
.aligner-item--top {
align-self: flex-start;
padding-top: 60px
}
@media(min-width:992px) {
.p-b-100 .container .row.aligner .p {
text-align: right
}
}
.focus-slider-prod .item a {
display: inline-block
}
@media(max-width:991px) {
.aligner {
display: block
}
.margin-image-xs img {
margin-bottom: 40px
}
.aligner-item--bottom {
padding-bottom: 40px
}
.aligner-item--top {
padding-top: 40px
}
}
@media(max-width:767px) {
.text-by {
margin-bottom: 50px
}
.aligner-item--bottom {
padding-bottom: 40px
}
.introduzione.hide {
display: block
}
.focus-slider-prod {
margin-bottom: 60px
}
.descrizione .text.first-letter::first-letter {
font-size: 60px;
line-height: .6
}
}
.cta.dropdown {
position: relative;
display: inline-block;
clear: both;
margin-bottom: 20px;
margin-top: 30px
}
.cta.dropdown .btn {
min-width: 265px
}
.cta.dropdown.hide {
display: none
}
.cta.dropdown .contenuto {
position: absolute;
left: 0;
top: 20px;
border: 4px solid #1e1e1e;
border-top: 0;
background-color: #fff;
width: 100%;
display: none;
z-index: 1
}
.cta.dropdown .contenuto ul {
text-align: left
}
.cta.dropdown .contenuto ul li a:not(.azioni),
.cta.dropdown .contenuto ul li .link {
color: #1e1e1e;
font-weight: 400;
font-size: 14px;
padding: 9px 15px 9px 15px;
display: block;
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none
}
.cta.dropdown .contenuto ul li .link {
padding-top: 16px;
overflow: hidden;
color: #1e1e1e
}
.cta.dropdown .contenuto ul li .link .actions {
float: right;
display: inline-block;
overflow: hidden;
margin-top: -4px
}
.cta.dropdown .contenuto ul li .link .actions a {
float: left;
margin-left: 5px
}
.cta.dropdown .contenuto ul li .link .actions a:hover {
background-color: transparent !important
}
.cta.dropdown .contenuto ul li:last-child a {
padding-bottom: 16px
}
.cta.dropdown .contenuto ul li a:hover {
background-color: #1e1e1e;
color: #fff
}
.cta.dropdown .download:hover {
background-color: #fff;
color: #1e1e1e
}
.compositions h2 {
font-size: 40px;
line-height: 1.2
}
.compositions .item {
text-transform: uppercase;
font-weight: 500;
text-align: center;
margin-bottom: 100px
}
.compositions .item a {
color: #1e1e1e
}
.compositions .item a div {
height: 40px
}
.compositions .item .wrap-archive {
margin-bottom: 40px
}
.compositions .item img {
margin-bottom: 10px;
width: 100%;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-webkit-transition: opacity .5s;
transition: opacity .5s;
opacity: 1
}
.compositions.technical .item {
margin-bottom: 140px
}
.compositions.technical .item a {
position: relative;
display: block
}
.compositions.technical .item a img {
margin-bottom: 0
}
.compositions.technical .item a .wrap-archive {
margin-bottom: 0
}
.compositions.technical .item span {
position: absolute;
display: block;
left: 14%;
bottom: 110%;
text-align: left;
width: 88%
}
.compositions .item a:hover img {
opacity: .6
}
.compositions.related .item img {
margin-bottom: 40px
}
.compositions .item .small {
font-size: 12px
}
.compositions.custom-comp .item img {
margin-bottom: 30px
}
.compositions.custom-comp .item a {
display: block;
padding: 0 20px
}
.compositions.inspirations .item .wrap {
height: 0;
padding-bottom: 69.5%;
overflow: hidden;
margin-bottom: 40px;
position: relative;
background-color: #1e1e1e
}
.compositions.inspirations .item .wrap .wrap-img {
height: 0;
padding-bottom: 69.5%;
overflow: hidden;
position: absolute;
left: 0
}
.compositions.inspirations .item .wrap .wrap-img img {
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
margin-bottom: 0;
max-width: 100%;
width: auto
}
.compositions.inspirations .item a:hover img {
opacity: 1
}
.compositions.inspirations .item a {
display: block
}
.compositions.inspirations .item a .image2 {
-moz-transform: translateX(+100%);
-ms-transform: translateX(+100%);
-o-transform: translateX(+100%);
-webkit-transform: translateX(+100%);
transform: translateX(+100%);
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-webkit-transition: all .4s ease;
transition: all .4s ease;
opacity: 0
}
.compositions.inspirations .item a:hover .image2 {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
.compositions.inspirations .item a .image1 {
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-webkit-transition: all .4s ease;
transition: all .4s ease;
opacity: 1
}
.compositions.inspirations .item a:hover .image1 {
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0
}
.compositions.listing h4 {
font-size: 40px;
margin-bottom: 40px;
margin-top: 60px
}
.compositions.listing h4:before {
content: "";
width: 40px;
height: 1px;
background: #1e1e1e;
display: inline-block;
margin-right: 15px;
vertical-align: middle
}
.compositions.listing h4:after {
content: "";
width: 40px;
height: 1px;
background: #1e1e1e;
display: inline-block;
margin-left: 15px;
vertical-align: middle
}
.compositions.listing h4:first-child {
margin-top: 0
}
.compositions.listing .row {
position: relative
}
.compositions.listing a:not(.load-more) {
display: block;
overflow: hidden;
color: #1e1e1e
}
.compositions.listing a:hover .item.col-md-5 img {
opacity: .7
}
.compositions.listing .item {
margin-bottom: 120px
}
.compositions.listing .item.adapter {
position: relative;
margin-bottom: 0;
height: 0;
padding-bottom: 33%
}
.compositions.listing .item.adapter img {
margin-bottom: 10px
}
.compositions.listing .item.col-md-6 img {
margin-bottom: 0
}
.compositions.listing .item .vert-align {
width: 72%;
left: 4%;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute
}
.compositions .load-more {
font-size: 14px;
background-color: #989898;
color: #fff;
text-transform: uppercase;
font-weight: 400;
padding: 8px 16px
}
.specifiche .wrap-mason {
position: relative;
overflow: hidden
}
.specifiche .item {
border-bottom: 1px solid #1e1e1e;
padding-bottom: 40px;
margin-bottom: 40px;
font-weight: 400;
line-height: 1.5
}
.specifiche .item .tit {
font-weight: 600
}
.prod-news h2 {
font-size: 40px;
margin-bottom: 0;
line-height: 1.2
}
.prod-news h2.m-b-20 {
margin-bottom: 20px !important
}
.prod-news h3 {
margin-bottom: 60px
}
.prod-news.exihbit .item {
margin-bottom: 100px
}
.prod-news .item a {
color: #1e1e1e
}
.prod-news .item a span {
font-size: 14px;
text-transform: uppercase;
font-weight: 400
}
.prod-news .item a img {
margin-bottom: 55px;
width: 100%;
-moz-transition: opacity .7s;
-o-transition: opacity .7s;
-webkit-transition: opacity .7s;
transition: opacity .7s;
opacity: 1
}
.prod-news .item a:hover img {
opacity: .85
}
.prod-news .more-designers {
min-height: 400px
}
@media(max-width:1199px) {
.center-cta {
text-align: center
}
.cta.dropdown {
display: none
}
.cta.dropdown.hide {
display: inline-block;
text-align: center;
margin-top: 40px
}
.cta.dropdown.hide .btn {
margin: 0 auto
}
}
@media(max-width:991px) {
.compositions .item,
.compositions.related .item {
margin-bottom: 100px
}
.specifiche .wrap-mason .col-md-4 {
width: 100% !important
}
.compositions .item img,
.compositions.related .item img {
margin-bottom: 20px
}
.prod-news .item {
margin-bottom: 60px
}
.prod-news .item a img {
margin-bottom: 30px
}
.prod-news.exihbit .item {
margin-bottom: 50px
}
}
@media(max-width:767px) {
.compositions h2 {
font-size: 30px
}
.compositions .item,
.compositions.related .item {
font-size: 13px;
margin-bottom: 80px
}
.prod-news h2 {
font-size: 30px;
line-height: 34px;
margin-bottom: 10px
}
.prod-news .item {
margin-bottom: 40px
}
.compositions.listing .item.adapter {
margin-bottom: 40px;
height: auto;
padding-bottom: 0%
}
.prod-news .item a img {
margin-bottom: 30px
}
.compositions.listing .row {
margin-bottom: 40px;
display: block
}
.compositions.listing .item .vert-align {
width: 100%;
left: 0%;
top: auto;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none;
position: static
}
.compositions.listing #divani .item {
margin-bottom: 40px;
height: auto;
padding-bottom: 0
}
}
@media(min-width:991px) {
.prod-news .flex-display {
display: flex;
flex-wrap: wrap
}
}
body.gallery-open {
overflow: hidden !important
}
body.gallery-open .backTop {
display: none !important
}
.overlay-gallery {
background-color: #1e1e1e;
position: fixed;
overflow: hidden;
overflow-y: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: none
}
.overlay-gallery .container {
width: 86%
}
.overlay-gallery .overlay-navigation,
.fancybox-overlay .overlay-navigation {
position: fixed;
z-index: 50;
height: 24px;
left: 0;
top: 20px;
width: 100%
}
.overlay-gallery .overlay-navigation a,
.fancybox-overlay .overlay-navigation a {
display: inline-block;
position: absolute;
right: 2%
}
.overlay-gallery .grid {
margin-top: 30px;
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align-items: center
}
.overlay-gallery .grid .col-md-4 {
padding: 18px 1.5625% 60px 1.5625%;
text-align: center
}
.overlay-gallery .grid .col-md-4 a {
display: inline-block
}
.overlay-gallery .grid .col-md-4 a img.frame {
width: auto;
height: 200px;
display: inline-block
}
.overlay-gallery .grid .col-md-4 a span.tit {
display: block;
position: absolute;
left: 50%;
font-size: 16px;
height: 16px;
bottom: -25px;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.next-fancy,
.prev-fancy {
position: absolute;
top: 50%;
margin-top: -12px;
padding: 20px;
display: none
}
.video-fancy .next-fancy,
.video-fancy .prev-fancy {
display: none
}
.galleria .next-fancy,
.galleria .prev-fancy {
display: block
}
.next-fancy {
right: 1.5625%;
margin-right: -10px
}
.prev-fancy {
left: 1.5625%;
margin-left: -10px
}
.overlay-gallery .grid .col-md-4 .player {
top: 50%;
left: 0;
width: 100%;
text-align: center;
z-index: 2;
opacity: 1;
background-color: transparent;
font-size: 12px;
text-transform: uppercase;
height: auto;
right: auto;
bottom: auto;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
@media(max-width:1280px) {
.overlay-gallery .grid .col-md-4 a img.frame {
height: 160px
}
}
@media(max-width:991px) {
.overlay-gallery .grid {
-ms-flex: none;
-webkit-flex: none;
flex: none;
display: block
}
.overlay-gallery .grid .col-md-4 a img.frame {
height: auto;
max-height: 36vh
}
}
@media(max-width:767px) {
.overlay-gallery .container {
width: 70%
}
.overlay-gallery .overlay-navigation a,
.fancybox-overlay .overlay-navigation a {
right: 5%
}
}
.overlay-cataloghi {
background-color: #fff;
position: fixed;
overflow: hidden;
overflow-y: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: none
}
.overlay-cataloghi h4 {
margin-bottom: 50px;
font-size: 40px
}
.overlay-cataloghi .container {
width: 86%;
margin-top: 60px
}
.overlay-cataloghi .overlay-navigation,
.fancybox-overlay .overlay-navigation {
position: fixed;
z-index: 50;
height: 24px;
left: 0;
top: 20px;
width: 100%
}
.overlay-cataloghi .overlay-navigation a,
.fancybox-overlay .overlay-navigation a {
display: inline-block;
position: absolute;
right: 2%
}
.overlay-cataloghi .grid {
margin-top: 30px;
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align-items: center
}
.overlay-cataloghi .grid .col-md-4 {
padding: 1.5625% 1.5625% 2% 1.5625%;
text-align: center
}
.overlay-cataloghi .grid .col-md-4 .item {
display: inline-block
}
.overlay-cataloghi .grid .col-md-4 .item .tit {
margin-top: 20px
}
.overlay-cataloghi .grid .col-md-4 .item img.frame {
width: auto;
height: 200px;
display: inline-block
}
.overlay-cataloghi .grid .col-md-4 .item .archive {
right: 10px
}
.overlay-cataloghi .grid .col-md-4 .item .download {
right: 67px
}
@media(max-width:1280px) {
.overlay-cataloghi .grid .col-md-4 .item img.frame {
height: 160px
}
}
@media(min-width:992px) and (max-width:1199px) {
.overlay-cataloghi .wrap-archive div {
opacity: 1;
cursor: pointer
}
}
@media(max-width:991px) {
.overlay-cataloghi .grid {
-ms-flex: none;
-webkit-flex: none;
flex: none;
display: block
}
.overlay-cataloghi .grid .col-md-4 .item img.frame {
height: auto;
max-height: 36vh
}
.overlay-cataloghi .wrap-archive div {
display: inline-block !important;
opacity: 1;
cursor: pointer
}
}
@media(max-width:767px) {
.overlay-cataloghi h4 {
font-size: 36px
}
.overlay-cataloghi .container {
width: 70%
}
.overlay-cataloghi .grid .col-md-4 {
padding: 4% 4% 10% 4%
}
.overlay-cataloghi .overlay-navigation .item {
right: 4%
}
.overlay-cataloghi .overlay-navigation a,
.fancybox-overlay .overlay-navigation a {
right: 5%
}
}
.griglia-variabile .grid {
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align-items: center
}
.griglia-variabile .grid .col-md-4 {
padding: 1.5625% 0 120px 0;
text-align: center;
position: relative
}
.griglia-variabile .grid .col-md-4 .ex-link {
display: inline-block;
color: #1e1e1e
}
.griglia-variabile .grid .col-md-4 .ex-link img.frame,
.griglia-variabile .grid .col-md-4 img.frame {
width: auto;
height: 305px;
display: inline-block;
-moz-transition: opacity .7s;
-o-transition: opacity .7s;
-webkit-transition: opacity .7s;
transition: opacity .7s;
opacity: 1
}
.griglia-variabile .grid .col-md-4 .ex-link:hover img.frame {
opacity: .8
}
.griglia-variabile .grid .col-md-4 .ex-link span.tit,
.griglia-variabile .grid .col-md-4 span.tit {
display: block;
position: absolute;
left: 0;
width: 100%;
height: 16px;
bottom: 85px;
text-align: center
}
@media(max-width:1500px) {
.griglia-variabile .grid .col-md-4 .ex-link img.frame,
.griglia-variabile .grid .col-md-4 img.frame {
height: 260px
}
}
@media(max-width:1280px) {
.griglia-variabile .grid .col-md-4 .ex-link img.frame,
.griglia-variabile .grid .col-md-4 img.frame {
height: 205px
}
}
@media(max-width:991px) {
.griglia-variabile .grid {
-ms-flex: none;
-webkit-flex: none;
flex: none;
display: block
}
.griglia-variabile .grid .col-md-4 a img.frame {
height: auto;
max-height: 36vh
}
}
@media(max-width:767px) {
.griglia-variabile .container {
width: 70%
}
.griglia-variabile .grid .col-md-4 {
padding: 4% 0 100px 0
}
}
.overlay-download {
background-color: #fff;
position: fixed;
overflow: hidden;
overflow-y: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 8100;
display: none;
color: initial
}
.overlay-download .overlay-navigation {
position: fixed;
z-index: 50;
height: 24px;
left: 0;
top: 20px;
width: 100%
}
.overlay-download .overlay-navigation a {
display: inline-block;
position: absolute;
right: 2%
}
.overlay-download .wrap-login {
height: 100vh;
position: relative
}
.overlay-download h5 {
font-size: 34px;
margin-bottom: 35px;
line-height: 1.2
}
.overlay-download .vert-align {
width: 100%;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute
}
.overlay-download .text {
margin-bottom: 25px;
line-height: 1.4
}
.overlay-download .text ul {
margin: 0;
padding-top: 10px;
padding-bottom: 10px
}
.overlay-download .text ul li {
text-transform: uppercase;
font-size: 14px;
margin-bottom: 2px;
position: relative
}
@media(max-width:767px) {
.overlay-download .vert-align {
top: auto;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none;
position: static;
margin-top: 77px;
margin-bottom: 40px
}
.overlay-download .overlay-navigation a {
right: 5%
}
}
.overlay-tag {
background-color: #efefef;
position: fixed;
overflow: hidden;
overflow-y: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1001;
display: none
}
.overlay-tag .overlay-navigation {
position: fixed;
z-index: 50;
height: 24px;
left: 0;
top: 20px;
width: 100%
}
.overlay-tag .overlay-navigation a {
display: inline-block;
position: absolute;
right: 2%
}
.overlay-tag .wrap-login {
height: 100vh;
position: relative
}
.overlay-tag .text-cta:before {
background: #fff
}
.overlay-tag h5 {
font-size: 24px;
margin-bottom: 35px;
line-height: 1.2
}
.overlay-tag .vert-align {
width: 100%;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute
}
@media(max-width:767px) {
.overlay-tag .vert-align {
top: auto;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none;
position: static;
margin-top: 77px;
margin-bottom: 40px
}
.overlay-tag .overlay-navigation a {
right: 5%
}
}
.overlay-modelli2d3d {
background-color: #fff;
position: fixed;
overflow: hidden;
overflow-y: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: none;
color: #fff
}
.overlay-modelli2d3d .overlay-navigation {
position: fixed;
z-index: 50;
height: 24px;
left: 0;
top: 20px;
width: 100%
}
.overlay-modelli2d3d .overlay-navigation a {
display: inline-block;
position: absolute;
right: 2%
}
.overlay-modelli2d3d .container {
margin-top: 60px
}
.overlay-modelli2d3d p {
color: #1e1e1e
}
.overlay-modelli2d3d h4 {
color: #1e1e1e;
font-size: 40px
}
.overlay-modelli2d3d .wrap-item-list {
margin-bottom: 100px
}
.overlay-modelli2d3d .col-md-12:first-child .item-list {
border-top: 1px solid #c1c1c1
}
.overlay-modelli2d3d .item-list {
border-bottom: 1px solid #c1c1c1;
padding-top: 20px;
padding-bottom: 20px;
font-size: 12px;
color: #1e1e1e;
overflow: hidden
}
.overlay-modelli2d3d .item-list .titolo {
text-transform: uppercase;
float: left;
margin-top: 2px;
width: 50%
}
.overlay-modelli2d3d .item-list .actions {
color: #1e1e1e;
float: left;
width: 50%;
text-align: right
}
.overlay-modelli2d3d .item-list .actions img {
display: inline-block;
margin-right: 5px;
position: relative;
margin-bottom: -5px
}
.overlay-modelli2d3d .item-list .actions a {
color: #1e1e1e;
margin-left: 30px
}
.overlay-modelli2d3d .item {
text-transform: uppercase;
font-weight: 500;
text-align: center;
margin-bottom: 140px;
font-size: 12px
}
.overlay-modelli2d3d .item:nth-child(3n+1) {
clear: both
}
.overlay-modelli2d3d .item .wrap-archive {
margin-bottom: 40px
}
.overlay-modelli2d3d .item .fake-link {
color: #1e1e1e
}
.overlay-modelli2d3d .item .fake-link .small {
position: absolute;
display: block;
left: 14%;
bottom: 110%;
text-align: left;
width: 88%
}
.overlay-modelli2d3d .item .fake-link:hover .wrap-archive div {
opacity: 1
}
.overlay-modelli2d3d .item img.frame {
width: 100%;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-webkit-transition: opacity .5s;
transition: opacity .5s;
opacity: 1
}
.overlay-modelli2d3d .item a:hover img {
opacity: .6
}
@media(max-width:767px) {
.overlay-modelli2d3d .item {
margin-bottom: 100px
}
.overlay-modelli2d3d .wrap-item-list {
margin-bottom: 80px
}
.overlay-modelli2d3d .item-list .titolo {
width: 70%
}
.overlay-modelli2d3d .item-list .actions {
width: 30%
}
.overlay-modelli2d3d .item-list .actions a {
margin-left: 10px
}
.overlay-modelli2d3d .item-list .actions a span {
display: none
}
.overlay-modelli2d3d h4 {
font-size: 36px
}
}
.overlay-email {
background-color: #fff;
position: fixed;
overflow: hidden;
overflow-y: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1001;
display: none;
color: #1e1e1e
}
.overlay-email .overlay-navigation {
position: fixed;
z-index: 50;
height: 24px;
left: 0;
top: 20px;
width: 100%
}
.overlay-email .overlay-navigation a {
display: inline-block;
position: absolute;
right: 2%
}
.overlay-email a {
color: #1e1e1e
}
.overlay-email .wrap-login {
height: 100vh;
position: relative
}
.overlay-email h5 {
font-size: 34px;
line-height: 1.2;
margin-bottom: 50px
}
.overlay-email .vert-align {
width: 100%;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute
}
.overlay-email .remember input[type="checkbox"]:checked+label:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 14px;
height: 14px;
background-color: #fff
}
@media(max-width:767px) {
.overlay-email .vert-align {
top: auto;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none;
position: static;
margin-top: 77px;
margin-bottom: 40px
}
.overlay-email .wrap-login {
height: auto
}
.overlay-email .overlay-navigation a {
right: 5%
}
}
#watermark-overlay .container {
margin-top: 60px;
margin-bottom: 60px
}
#watermark-overlay .container a:not(.btn) {
color: #000;
text-decoration: underline
}
.wrap-input {
margin-bottom: 20px
}
.wrap-input label {
display: block;
color: #fff;
font-size: 12px;
margin-bottom: 2px
}
.wrap-input input,
.wrap-input select,
.wrap-input textarea {
background-color: #1e1e1e;
border: 1px solid #fff;
height: 48px;
line-height: 48px;
font-size: 14px;
padding: 0 10px;
color: #fff;
width: 100%
}
.wrap-input textarea {
resize: none;
overflow: hidden;
height: 106px;
line-height: 1.4;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px
}
.wrap-input input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset
}
.wrap-legal {
margin-bottom: 20px
}
.wrap-legal label {
font-size: 14px
}
.wrap-legal a {
color: #1e1e1e;
text-decoration: underline
}
.wrap-input .cta {
margin-top: 20px
}
.error-msg,
.sent-msg {
font-weight: 600;
margin-top: -20px;
display: none
}
#frmLogin .error-msg {
margin-top: 10px;
font-size: 15px;
line-height: 1.1
}
.error-msg {
color: #c10202
}
.beautyinput {
border: 1px solid #fff;
background: #fff;
display: block;
width: 100%
}
.beautyinput .NFI-button {
height: 48px;
line-height: 48px;
font-size: 13px;
background: #1e1e1e;
color: #fff;
width: 30%
}
.beautyinput .NFI-filename {
display: block;
width: 70%;
height: 48px;
line-height: 48px;
margin: 0;
padding: 0;
border: 0
}
.test {
border: solid #cd465a 1px
}
.test .NFI-button {
background: #cd465a
}
.test .NFI-button:hover {
background: #9d162a
}
.custom-check input[type="checkbox"]:not(:checked),
.custom-check input[type="checkbox"]:checked {
position: absolute;
left: -9999px
}
.custom-check input[type="checkbox"]:not(:checked)+label,
.custom-check input[type="checkbox"]:checked+label {
position: relative;
padding-left: 25px;
cursor: pointer;
font-size: 14px
}
.custom-check input[type="checkbox"]:not(:checked)+label:before,
.custom-check input[type="checkbox"]:checked+label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 14px;
height: 14px;
border: 1px solid #1e1e1e;
background: #fff
}
.custom-check input[type="checkbox"]:checked+label:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 14px;
height: 14px;
background-color: #1e1e1e
}
.custom-check input[type="checkbox"].error+label:before {
border: 1px solid #c10202;
background-color: #c10202
}
.black .wrap-input label {
color: #1e1e1e
}
.black .wrap-input input,
.black .wrap-input select,
.black .wrap-input textarea {
background-color: #fff;
border: 1px solid #1e1e1e;
color: #1e1e1e
}
.black .wrap-input input.error,
.black .wrap-input select.error,
.black .wrap-input textarea.error,
input.error {
border: 1px solid #c10202 !important
}
input[type="radio"].error:checked+label,
input[type="radio"].error+label {
color: #c10202
}
.overlay-composizioni {
background-color: #fff;
position: fixed;
overflow: hidden;
overflow-y: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: none
}
.overlay-composizioni .overlay-navigation {
position: fixed;
z-index: 1001;
height: 24px;
left: 0;
top: 20px;
width: 100%
}
.overlay-composizioni .overlay-navigation a {
display: inline-block;
position: absolute;
right: 2%
}
.overlay-composizioni .slider-comp {
width: 100%;
height: 100%
}
.overlay-composizioni .item {
height: 100vh;
position: relative
}
.overlay-composizioni .item .vertical-center {
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
opacity: 0
}
.overlay-composizioni .container-comp .item .vertical-center {
opacity: 1
}
.overlay-composizioni .comp-arrow {
position: absolute;
top: 50%;
margin-top: -12px;
padding: 20px;
z-index: 1
}
.overlay-composizioni .prev-comp {
left: 1.5625%;
margin-left: -10px
}
.overlay-composizioni .next-comp {
right: 1.5625%;
margin-right: -10px
}
.zoom-comp .immagine .wrap-archive img {
width: 100%;
position: relative;
z-index: 9
}
@-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
@-moz-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
.zoom-comp .immagine .wrap-archive .points {
position: absolute;
width: 19px;
height: 19px;
margin-left: -8px;
margin-top: -8px;
background-color: #fff;
-moz-border-radius: 30px;
-webkit-border-radius: 15px;
border-radius: 30px;
border: 2px solid #1e1e1e;
z-index: 10;
left: 0%;
top: 0%;
display: block;
-moz-box-shadow: 0 0 12px 0 rgba(50, 50, 50, .75);
-webkit-box-shadow: 0 0 12px 0 rgba(50, 50, 50, .75);
box-shadow: 0 0 12px 0 rgba(50, 50, 50, .75);
color: #1e1e1e;
font-weight: bold;
font-size: 12px;
text-align: center;
line-height: 19px;
letter-spacing: 0
}
.overlay-composizioni .slick-current .points {
opacity: 0;
opacity: 1 \9;
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
-o-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
-o-animation-delay: .6s;
animation-delay: .6s;
overflow: hidden;
text-indent: -999px
}
.zoom-comp .immagine .wrap-archive .points.point-01 {
left: 64.3%;
top: 20.5%
}
.zoom-comp .immagine .wrap-archive .points.point-02 {
left: 72.6%;
top: 29.1%
}
.zoom-comp .immagine .wrap-archive .points.point-03 {
left: 51.3%;
top: 33.1%
}
.zoom-comp .immagine .wrap-archive .points.point-04 {
left: 24.6%;
top: 25%
}
.zoom-comp .immagine .wrap-archive .points.point-05 {
left: 16.6%;
top: 42%
}
.zoom-comp .immagine .wrap-archive .points.point-06 {
left: 6.6%;
top: 46%
}
.zoom-comp .immagine .wrap-archive .points.point-07 {
left: 17%;
top: 65%
}
.zoom-comp .immagine .wrap-archive .points.point-08 {
left: 10%;
top: 85%
}
.zoom-comp .immagine .wrap-archive .points.point-09 {
left: 46%;
top: 78%
}
.zoom-comp .immagine .wrap-archive .points.point-10 {
left: 50.5%;
top: 67%
}
.zoom-comp .immagine .wrap-archive .points.point-11 {
left: 54%;
top: 79.4%
}
.zoom-comp .immagine .wrap-archive .points.point-12 {
left: 66%;
top: 81.4%
}
.zoom-comp .immagine .wrap-archive .points.point-13 {
left: 66%;
top: 62.4%
}
.zoom-comp .immagine .wrap-archive .points.point-14 {
left: 88%;
top: 53.4%
}
.zoom-comp .immagine .wrap-archive .points.point-15 {
left: 88%;
top: 70.4%
}
.zoom-comp .immagine .wrap-archive .points.point-16 {
left: 92%;
top: 84.4%
}
.zoom-comp .text {
text-transform: uppercase;
max-height: 90vh;
overflow: hidden;
overflow-y: auto
}
.zoom-comp .text h3 {
font-size: 36px;
margin-bottom: 30px;
text-transform: none;
font-weight: 400
}
.zoom-comp .text ul {
margin-bottom: 40px
}
.zoom-comp .text .wrap-archive {
height: 47px;
display: block
}
.zoom-comp .text .wrap-archive div {
opacity: 1
}
.zoom-comp .text ul li {
margin-bottom: 14px;
line-height: 1.6;
font-size: 14px
}
.zoom-comp .text ul li.tit {
font-size: 24px
}
.tipso_bubble {
font-size: 16px;
text-align: left;
-moz-box-shadow: 0 0 12px 0 rgba(50, 50, 50, .75);
-webkit-box-shadow: 0 0 12px 0 rgba(50, 50, 50, .75);
box-shadow: 0 0 12px 0 rgba(50, 50, 50, .75);
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0
}
.tipso_bubble .desc {
padding: 0
}
.tipso_bubble .cta {
text-align: center;
margin-bottom: 0
}
.tipso_bubble .cta a {
color: #1e1e1e;
text-align: center;
font-size: 14px;
font-weight: 400;
text-decoration: underline
}
.tipso_bubble>.tipso_arrow {
display: none !important
}
.tipso_content {
padding: 20px;
font-weight: 400
}
.tipso_content .immagine {
margin: 20px 0;
text-align: center
}
.tipso_content .immagine img {
width: 100%
}
@media(max-width:1400px) {
.zoom-comp .text h3 {
font-size: 34px;
margin-bottom: 10px
}
.zoom-comp .text ul {
margin-bottom: 25px
}
.zoom-comp .text ul li.tit {
font-size: 22px
}
.zoom-comp .text ul li {
line-height: 1.5
}
}
@media(max-width:1140px) {
.zoom-comp .text ul li {
line-height: 1.4
}
}
@media(max-width:991px) {
.overlay-composizioni .container {
width: 80%;
padding-top: 50px;
padding-bottom: 50px
}
.overlay-composizioni .slider-comp .item .vertical-center {
position: relative;
top: auto;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none
}
.overlay-composizioni .slider-comp .item {
overflow-y: auto
}
.zoom-comp .text {
max-height: none;
overflow: unset;
overflow-y: unset
}
}
@media(max-width:767px) {
.overlay-composizioni .container {
width: 70%
}
.zoom-comp .text h3 {
font-size: 26px
}
.zoom-comp .text ul {
font-size: 14px
}
.zoom-comp .text ul li.tit {
font-size: 20px
}
.zoom-comp .text ul li {
line-height: 1.3
}
.overlay-composizioni .overlay-navigation a {
right: 4%
}
.tipso_bubble {
width: 200px !important;
margin-left: -100px !important;
left: 50% !important
}
.tipso_content,
.tipso_bubble .cta a {
font-size: 14px
}
.tipso_content {
padding: 30px 20px 20px 20px
}
.tipso_bubble .close {
position: absolute;
right: 10px;
top: 10px
}
.tipso_bubble .close img {
width: 15px
}
.overlay-composizioni .comp-arrow {
top: 30%
}
.zoom-comp .immagine .wrap-archive .points {
width: 12px;
height: 12px;
margin-top: -11px
}
}
.overlay-video {
background-color: #fff;
position: fixed;
overflow: hidden;
overflow-y: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: none
}
.overlay-video .container {
height: 100vh;
position: relative
}
.overlay-video .container .flagship-item {
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%
}
.overlay-video .overlay-navigation {
position: fixed;
z-index: 50;
height: 24px;
left: 0;
top: 20px;
width: 100%
}
.overlay-video .overlay-navigation a {
display: inline-block;
position: absolute;
right: 2%
}
.overlay-video .row {
margin: 0
}
.overlay-video .row .no-padding {
padding: 0
}
.overlay-video .flagship-dati {
position: relative;
height: 0;
padding-bottom: 38%
}
.overlay-video .flagship-dati .wrap {
padding: 0 8%
}
.overlay-video .flagship-dati .vertical-center {
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%
}
.overlay-video .flagship-dati .titolo {
font-size: 36px;
font-weight: 500;
margin-bottom: 5px;
line-height: 1.1
}
.overlay-video .flagship-dati .by-class {
height: 22px;
font-size: 14px
}
.overlay-video .flagship-dati .flagship-store {
font-size: 24px;
text-transform: uppercase;
margin-bottom: 30px
}
.overlay-video .flagship-dati .address {
margin-bottom: 30px
}
.overlay-video .flagship-dati .contatti {
margin-bottom: 60px
}
.overlay-video .flagship-dati .btn .gallery {
display: none
}
.overlay-video .flagship-dati .wrap-archive {
height: 47px;
display: block
}
.overlay-video .flagship-dati .wrap-archive div {
position: relative;
bottom: auto;
left: auto;
right: auto !important;
float: left;
margin-right: 10px;
opacity: 1
}
.overlay-video .video-embed {
position: relative;
padding-bottom: 54%;
padding-top: 25px;
height: 0
}
.overlay-video .video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.overlay-video .vimeo-embed {
position: relative;
padding-bottom: 54%;
padding-top: 25px;
height: 0
}
.overlay-video .vimeo-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
@media(max-width:1199px) {
.overlay-video .flagship-dati .contatti {
margin-bottom: 30px
}
}
@media(max-width:991px) {
.overlay-video .container {
height: auto;
margin-top: 60px
}
.overlay-video .container .flagship-item {
position: static;
top: auto;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none;
width: 100%
}
.overlay-video .flagship-dati {
height: auto
}
.overlay-video .flagship-dati .vertical-center {
position: static;
top: 50%;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none;
width: auto
}
.overlay-video .flagship-dati .wrap {
padding: 4% 0%
}
}
@media(max-width:768px) {
.overlay-video .slider-flag .item {
height: 35vh
}
.overlay-video .flagship-dati .wrap {
padding: 6% 0%
}
.overlay-video .flagship-dati .titolo {
font-size: 26px
}
.overlay-video .flagship-dati .flagship-store {
font-size: 16px;
text-transform: uppercase;
margin-bottom: 20px
}
.overlay-video .flagship-dati .address {
margin-bottom: 20px
}
.overlay-video .cta {
margin-bottom: 30px
}
}
.overlay-flagship {
background-color: #fff;
position: fixed;
overflow: hidden;
overflow-y: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: none
}
.overlay-flagship .container {
height: 100vh;
position: relative
}
.overlay-flagship .container .flagship-item {
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
opacity: 0
}
.overlay-flagship .container .flagship-item a {
color: #1e1e1e
}
.overlay-flagship .container .flagship-item a:hover {
color: #fff
}
.overlay-flagship .overlay-navigation {
position: fixed;
z-index: 50;
height: 24px;
left: 0;
top: 20px;
width: 100%
}
.overlay-flagship .overlay-navigation a {
display: inline-block;
position: absolute;
right: 2%
}
.overlay-flagship .row {
margin: 0
}
.overlay-flagship .row .no-padding {
padding: 0
}
.flagship-dati {
position: relative;
height: 0;
padding-bottom: 46%
}
.flagship-dati .wrap {
padding: 0 8%
}
.flagship-dati .vertical-center {
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%
}
.flagship-dati .titolo {
font-size: 36px;
font-weight: 500;
margin-bottom: 5px;
line-height: 1.1
}
.flagship-dati .by-class {
height: 22px;
font-size: 14px
}
.flagship-dati .flagship-store {
font-size: 24px;
text-transform: uppercase;
margin-bottom: 30px
}
.flagship-dati .address {
margin-bottom: 30px
}
.flagship-dati .contatti {
margin-bottom: 60px
}
.flagship-dati .contatti a {
color: inherit
}
.flagship-dati .btn .gallery {
display: none
}
.flagship-dati .wrap-archive {
height: 47px;
display: block
}
.flagship-dati .wrap-archive div {
position: relative;
bottom: auto;
left: auto;
right: auto !important;
float: left;
margin-right: 10px;
opacity: 1
}
.flagship-dati .share {
position: relative;
display: inline-block
}
.flagship-dati .share .contenuto {
position: absolute;
border: 4px solid #1e1e1e;
right: 0;
top: -14px;
background-color: #fff;
display: inline-block;
width: 140px;
text-align: center;
display: none;
-moz-transform: translateX(105%);
-ms-transform: translateX(105%);
-o-transform: translateX(105%);
-webkit-transform: translateX(105%);
transform: translateX(105%)
}
.flagship-dati .share .contenuto ul {
padding: 10px;
white-space: nowrap
}
.flagship-dati .share .contenuto ul li {
margin-left: 8px;
margin-right: 8px;
display: inline-block !important
}
.flagship-dati .share .contenuto ul li.pinterest-share,
.network-listing .item .tools .share .contenuto ul li.visible-xs,
.flagship-dati .share .contenuto ul li.visible-xs {
display: none !important
}
.flagship-dati .share .contenuto ul li a {
display: inline-block;
float: left
}
.slider-flag {
width: 100%;
height: 100%;
opacity: 0
}
.slider-flag .item {
position: relative;
height: 0;
padding-bottom: 18%;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
float: left
}
#mappa-flagship {
position: relative;
height: 0;
padding-bottom: 70.6%
}
@media(max-width:1199px) {
.overlay-flagship .flagship-dati .contatti {
margin-bottom: 30px
}
}
@media(max-width:991px) {
.overlay-flagship .container {
height: auto;
margin-top: 60px
}
.overlay-flagship .container .flagship-item {
position: static;
top: auto;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none;
width: 100%
}
.overlay-flagship #mappa-flagship,
.overlay-flagship .slider-flag .item {
height: 70vh
}
.overlay-flagship .flagship-dati {
height: auto
}
.overlay-flagship .flagship-dati .vertical-center {
position: static;
top: 50%;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none;
width: auto
}
.overlay-flagship .flagship-dati .wrap {
padding: 4% 0%
}
}
@media(max-width:768px) {
.overlay-flagship #mappa-flagship,
.overlay-flagship .slider-flag .item {
height: 35vh
}
.overlay-flagship .flagship-dati .wrap {
padding: 6% 0%
}
.overlay-flagship .flagship-dati .titolo {
font-size: 26px
}
.overlay-flagship .flagship-dati .flagship-store {
font-size: 16px;
text-transform: uppercase;
margin-bottom: 20px
}
.overlay-flagship .flagship-dati .address {
margin-bottom: 20px
}
.overlay-flagship .cta {
margin-bottom: 30px
}
.flagship-dati .share .contenuto ul li.visible-xs {
display: inline-block !important
}
}
.single-store {
padding: 180px 0 0 0
}
#single-store .flagship-dati {
color: #1e1e1e;
position: relative;
height: 0;
padding-bottom: 46%
}
#single-store .flagship-dati .wrap {
padding: 0 8%
}
#single-store .flagship-dati .vertical-center {
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%
}
#single-store .flagship-dati .titolo {
font-size: 36px;
font-weight: 500;
margin-bottom: 5px;
line-height: 1.1
}
#single-store .flagship-dati .by-class {
height: 22px;
font-size: 14px
}
#single-store .flagship-dati .flagship-store {
font-size: 24px;
text-transform: uppercase;
margin-bottom: 30px
}
#single-store .flagship-dati .address {
margin-bottom: 30px
}
#single-store .flagship-dati .contatti {
margin-bottom: 60px
}
#single-store .flagship-dati .btn .gallery {
display: none
}
#single-store .flagship-dati .wrap-archive {
height: 47px;
display: block
}
#single-store .flagship-dati .wrap-archive div {
position: relative;
bottom: auto;
left: auto;
right: auto !important;
float: left;
margin-right: 10px;
opacity: 1
}
#single-store .slider-flag {
width: 100%;
height: 100%
}
#single-store .slider-flag .item {
position: relative;
height: 0;
padding-bottom: 18%;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat
}
#single-store #mappa-flagship {
position: relative;
height: 0;
padding-bottom: 72%
}
.video-embed-thron>div:nth-child(2) {
position: relative;
padding-bottom: 54%;
padding-top: 25px;
height: 0;
background-size: cover;
background-position: center center;
cursor: pointer;
overflow: hidden;
background-color: #eee
}
.video-embed {
position: relative;
padding-bottom: 54%;
padding-top: 25px;
height: 0;
background-size: cover;
background-position: center center;
cursor: pointer;
overflow: hidden;
background-color: #eee
}
.video-embed.fired {
cursor: default
}
.video-embed .player {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
z-index: 2;
background-color: transparent;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
.video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-moz-transform: scale(1.02);
-ms-transform: scale(1.02);
-o-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02)
}
.vimeo-embed-thron>div:nth-child(2) {
position: relative;
padding-bottom: 54%;
padding-top: 25px;
height: 0;
background-size: cover;
background-position: center center;
cursor: pointer;
overflow: hidden;
background-color: #eee
}
.vimeo-embed {
position: relative;
padding-bottom: 54%;
padding-top: 25px;
height: 0;
background-size: cover;
background-position: center center;
cursor: pointer;
overflow: hidden;
background-color: #eee
}
.vimeo-embed.fired {
cursor: default
}
.vimeo-embed .player {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
z-index: 2;
background-color: transparent;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
.vimeo-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-moz-transform: scale(1.02);
-ms-transform: scale(1.02);
-o-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02)
}
#single-store .dettagli ul li.feat {
margin-top: 60px
}
#single-store .dettagli ul li div {
width: 100%;
float: left;
margin-bottom: 10px
}
#single-store.video-gal .flagship-dati {
color: #1e1e1e;
position: relative;
height: 0;
padding-bottom: 36%
}
.wrap-archive.youtube-link {
width: 100%
}
.p-b-100 .d .wrap-archive.youtube-link {
max-width: 1140px
}
.wrap-archive.youtube-link .archivio {
z-index: 10
}
.wrap-archive.youtube-link .video-embed {
position: relative;
opacity: 1;
width: 100%;
max-width: 1140px;
float: right;
bottom: 0;
right: 0;
z-index: 1
}
.wrap-archive.youtube-link .video-embed .player {
position: absolute;
opacity: 1;
width: 100%;
background-color: transparent;
z-index: 10
}
@media(max-width:1199px) {
.single-store {
padding: 100px 0 40px 0
}
#single-store .flagship-dati .contatti {
margin-bottom: 30px
}
}
@media(max-width:991px) {
.flagship-dati,
.video-gal .flagship-dati {
height: auto;
padding-bottom: 0
}
.flagship-dati .vertical-center {
position: static;
top: auto;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none;
width: auto
}
.flagship-dati .wrap {
padding: 4% 0%
}
}
@media(max-width:768px) {
.flagship-dati .wrap {
padding: 6% 0%
}
.flagship-dati .titolo {
font-size: 26px
}
.flagship-dati .flagship-store {
font-size: 16px;
text-transform: uppercase;
margin-bottom: 20px
}
#flagship-dati .address {
margin-bottom: 20px
}
#single-store .cta {
margin-bottom: 30px
}
#single-store .dettagli ul li.feat {
margin-top: 0;
margin-bottom: 0
}
#single-store .flagship-dati {
height: auto;
padding-top: 10px;
margin-bottom: -50px
}
#single-store .flagship-dati .wrap {
padding: 0 0
}
#single-store .flagship-dati .vertical-center {
position: static;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none
}
#single-store .flagship-dati .titolo {
font-size: 25px
}
#single-store .flagship-item {
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap
}
#single-store .flagship-item .no-padding {
order: -1;
width: 100%
}
}
.down-listing .item-list {
border-bottom: 1px solid #c1c1c1;
padding-top: 20px;
padding-bottom: 20px;
font-size: 12px;
color: #1e1e1e;
overflow: hidden
}
.down-listing .subitem {
margin-bottom: 14px;
overflow: hidden
}
.down-listing .subitem strong {
text-transform: uppercase
}
.down-listing .cataloghi .item-list,
.down-listing .files3d .item-list,
.down-listing .composizioni .item-list,
.with-image.item-list {
padding-top: 54px
}
.down-listing .cataloghi.title-cat .item-list {
padding-top: 20px
}
.down-listing .item-list .titolo {
text-transform: uppercase;
float: left;
margin-top: 2px;
width: 50%
}
.down-listing .item-list .titolo .item-txt .descrizione {
margin-top: 10px;
text-transform: none
}
.down-listing .item-list img.frame {
height: 100px;
float: left;
margin-right: 20px;
margin-top: -36px
}
.down-listing .item-list img.frame.treddi {
height: auto;
margin-top: 0
}
.down-listing .title-cat .item-list .titolo {
text-transform: none;
font-weight: 500;
font-size: 20px
}
.down-listing .item-list .actions {
color: #1e1e1e;
float: left;
width: 50%;
text-align: right
}
.down-listing .item-list .actions img {
display: inline-block;
margin-right: 5px;
position: relative;
margin-bottom: -5px
}
.down-listing .item-list .actions a {
color: #1e1e1e;
margin-left: 30px
}
.down-listing .item-list .actions a .size {
text-transform: uppercase
}
.down-listing .item-list.list-image {
display: flex;
justify-content: space-between
}
.down-listing .item-list.list-image .titolo {
text-transform: uppercase;
margin-top: 2px;
width: 50%;
display: flex
}
.down-listing .item-list.list-image .titolo .item-img {
flex: 0 0 100px;
max-width: 100px;
margin-right: 20px
}
.down-listing .item-list.list-image img.frame {
height: auto;
float: none;
margin-right: 0;
margin-top: 0
}
.down-listing .item-list.list-image img.frame.treddi {
height: auto;
margin-top: 0
}
.down-listing .item-list.list-image .actions {
color: #1e1e1e;
float: none;
width: 50%;
text-align: right
}
.down-listing .item-list.list-image .actions img {
display: inline-block;
margin-right: 5px;
position: relative;
margin-bottom: -5px
}
.down-listing .item-list.list-image .actions a {
color: #1e1e1e;
margin-left: 30px
}
.down-listing #results h2 {
font-size: 28px;
line-height: 1;
margin-bottom: 20px
}
.down-listing #results .item-list {
padding: 0 0 30px 0;
margin-bottom: 30px
}
#results .listing {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: 80px
}
#results .listing .box {
flex: 0 0 30%;
max-width: 30%;
margin-right: 3%;
margin-bottom: 60px;
padding-top: 0;
display: block
}
#results .listing .box:nth-child(3n) {
margin-right: 0
}
#results .listing .box.video {
overflow: visible
}
#results .listing .box.video .titolo {
margin-bottom: 10px
}
#results .listing .box.video .descrizione {
margin-bottom: 20px
}
#results .listing .box.video .link-description {
margin-top: 20px;
margin-bottom: -15px;
font-weight: bold
}
#results .listing .box.video .select-wrapper .fancy-select .trigger {
border: 1px solid #1e1e1e
}
#results .listing .box.video .select-wrapper .fancy-select .options {
border: 1px solid #1e1e1e
}
#results .listing .box.video .actions a {
margin-top: 20px
}
#results .listing .box .show-video {
display: block;
position: relative;
z-index: 1;
overflow: hidden
}
#results .listing .box .show-video img {
transition: all .3s ease-in-out;
width: 100%
}
#results .listing .box .show-video:hover img {
transform: scale(1.2)
}
#results .listing .box .show-video:before {
content: '';
background: rgba(0, 0, 0, .5);
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all .3s ease-in-out
}
#results .listing .box .show-video:after {
content: url(/icone/play.svg);
position: absolute;
z-index: 3;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
#results .listing .box .show-video:hover:before {
content: '';
background: rgba(0, 0, 0, .1)
}
#results .listing .box .data {
margin-bottom: 5px
}
#results .listing .box .titolo {
float: none;
width: 100%;
margin: 20px 0
}
#results .listing .box .desc {
margin-bottom: 20px;
padding: 0
}
#results .listing .box .actions {
float: none;
width: 100%;
display: flex;
justify-content: space-between
}
#results .listing .box .actions a {
margin: 0
}
#results .listing .box.social:nth-child(3n) {
margin-right: 3% !important
}
#results .listing .box.social .titolo {
margin-bottom: 0
}
#results .listing .box.social figure {
overflow: hidden;
position: relative
}
#results .listing .box.social figure img {
transition: all .3s ease-in-out
}
#results .listing .box.social figure:hover img {
transform: scale(1.2)
}
#results .listing .box.social.special {
flex: 0 0 100%;
max-width: 100%;
margin-right: 0;
display: flex
}
#results .listing .box.social.special .data {
display: none
}
#results .listing .box.social.special figure {
flex: 0 0 30%;
max-width: 30%;
margin-right: 5%
}
#results .listing .box.social.special .titolo {
font-weight: 800;
font-size: 18px;
line-height: 1.5;
margin: 0
}
#results .listing .box.social.special .actions {
justify-content: flex-start
}
#results .listing .box.social.special .actions a {
margin-right: 30px
}
#results .listing .box.social.new {
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
padding: 10px !important;
border: 0;
background: #e0dddb
}
#results .listing .box.social.new figure:after {
content: 'new';
position: absolute;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, .8);
padding: 10px 30px;
text-transform: uppercase;
color: #4b4b4b;
line-height: 1
}
.dett-video {
position: fixed;
z-index: 9999;
background: rgba(0, 0, 0, .7);
width: 100vw;
height: 100vh;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
transition: all .3s ease-in-out
}
.dett-video.active {
pointer-events: all;
opacity: 1
}
.dett-video .finestra-video {
position: absolute;
left: 50%;
top: -50%;
transform: translate(-50%, -50%);
height: 80vh;
overflow-y: auto;
background: #fff;
transition: all .5s ease-in-out
}
.dett-video .close {
opacity: 0;
pointer-events: none;
transition: all .5s ease-in-out;
background: #1e1e1e;
display: block;
text-align: center;
padding: 15px 0
}
.dett-video .close img {
display: inline-block
}
.dett-video.active .close {
opacity: 1;
pointer-events: all
}
.dett-video.active .finestra-video {
top: 50%
}
.dett-video .finestra-video .embed-video {
line-height: 1
}
.dett-video .finestra-video .embed-video iframe {
width: 100%;
height: calc((360*50vw)/640)
}
.dett-video .finestra-video .desc-video>div {
padding: 10px 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: 14px;
background: #f4f4f5
}
.dett-video .finestra-video .desc-video .tit-desc {
width: 50vw;
background: #fff;
padding: 20px
}
.dett-video .finestra-video .desc-video .tit-desc .titolo {
font-weight: 600;
font-size: 20px;
margin-bottom: 10px
}
.dett-video .finestra-video .desc-video .tit-desc .desc {
padding: 0;
font-size: 12px;
line-height: 1.5
}
.dett-video .finestra-video .desc-video div:nth-child(odd) {
background: #fff
}
.dett-video .finestra-video .desc-video .actions {
padding: 20px
}
.dett-video .finestra-video .desc-video .actions a {
vertical-align: baseline
}
.dett-video .finestra-video .desc-video .actions a img {
display: inline-block;
margin-right: 5px;
position: relative;
margin-bottom: -5px
}
.dett-video .finestra-video .desc-video .actions a span {
color: #1e1e1e;
font-size: 12px;
display: inline-block
}
@media(max-width:1199px) {
.dett-video .finestra-video .embed-video iframe {
height: calc((360*70vw)/640)
}
.dett-video .finestra-video .desc-video .tit-desc {
width: 70vw
}
}
@media(max-width:991px) {
.dett-video .finestra-video .embed-video iframe {
height: calc((360*90vw)/640)
}
.dett-video .finestra-video .desc-video .tit-desc {
width: 90vw
}
}
@media(max-width:767px) {
.down-listing .item-list .actions span {
display: none
}
.down-listing .item-list .actions a {
margin-left: 10px
}
.down-listing .item-list img.frame {
height: auto !important;
width: 100%
}
.down-listing .item-list.list-image {
display: block
}
.down-listing .item-list.list-image .titolo {
width: 100%;
display: block
}
.down-listing .item-list.list-image .titolo .item-img {
max-width: 100%;
text-align: center;
margin: 0
}
.down-listing .item-list.list-image .titolo .item-img img {
max-width: 100px;
display: inline-block
}
.down-listing .item-list.list-image .titolo .item-txt {
text-align: center;
margin-top: 5px;
font-weight: 600
}
.down-listing .item-list.list-image .titolo .item-txt .descrizione {
font-weight: 300
}
.down-listing .item-list.list-image .actions {
width: 100%;
display: flex;
justify-content: space-between;
padding-top: 20px
}
.down-listing .item-list.list-image .actions span {
display: inline-block
}
.down-listing .item-list.list-image .actions a {
display: inline-block;
margin: 0
}
.down-listing #results h2 {
text-align: center
}
#results .listing.video {
margin-top: 0;
display: block
}
#results .listing.video .box.video {
max-width: 100%;
margin: 0
}
#results .listing .box .show-video img {
width: 100%
}
#results .listing.video .actions span {
display: inline-block
}
.dett-video .close {
top: 25px
}
#results .listing.social {
display: block
}
#results .listing .box.social {
max-width: 100%;
margin: 0
}
#results .listing .box.social:nth-child(3n) {
margin-right: 0 !important
}
#results .listing .box.social.special {
display: block
}
#results .listing .box.social.special figure {
max-width: 100%;
margin: 0 0 10px 0
}
#results .listing .box.social .actions span {
display: inline-block
}
}
.fancy-consenso .fancybox-skin {
padding: 0 !important;
border-radius: 0 !important;
box-shadow: 0 0 10px rgba(0, 0, 0, .4)
}
form#consenso-materiali-speciali {
width: 50vw;
padding: 50px
}
form#consenso-materiali-speciali .consenso-text {
padding-bottom: 25px
}
form#consenso-materiali-speciali .checkbox {
padding-bottom: 50px
}
form#consenso-materiali-speciali .checkbox input {
margin-right: 10px
}
form#consenso-materiali-speciali .checkbox input.error+* {
color: #c10202
}
@media(max-width:1199px) {
form#consenso-materiali-speciali {
width: 70vw
}
}
@media(max-width:991px) {
form#consenso-materiali-speciali {
width: 90vw
}
}
@media(max-width:767px) {
form#consenso-materiali-speciali {
padding: 20px
}
}
.hero.listing {
height: calc(85vh - 40px);
overflow: visible;
z-index: 1;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.hero.listing.newcollection {
height: calc(85vh - 40px)
}
.hero.listing .slide>div,
.hero.prod-sheet .slide>div {
background-attachment: unset;
-moz-animation: none;
-o-animation: none;
-webkit-animation: none;
animation: none;
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
opacity: 1
}
.hero.listing .slide div {
-moz-transition: all 1s cubic-bezier(.7, 0, .3, 1);
-o-transition: all 1s cubic-bezier(.7, 0, .3, 1);
-webkit-transition: all 1s cubic-bezier(.7, 0, .3, 1);
transition: all 1s cubic-bezier(.7, 0, .3, 1)
}
.hero.listing .slide.slick-active div {
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
-moz-transition: all 1.2s cubic-bezier(.7, 0, .3, 1);
-o-transition: all 1.2s cubic-bezier(.7, 0, .3, 1);
-webkit-transition: all 1.2s cubic-bezier(.7, 0, .3, 1);
transition: all 1.2s cubic-bezier(.7, 0, .3, 1)
}
.hero.listing #loadtarget {
height: 100%
}
.hero.listing #loadtarget .slider-lisitng {
opacity: 0
}
.hero.listing #loadtarget .slider-lisitng .slide {
position: relative;
cursor: default
}
.hero.listing #loadtarget .slider-lisitng .slide .text {
position: absolute;
bottom: 30px;
width: 90%;
left: 5%;
text-align: center;
color: #fff;
z-index: 2;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease
}
.hero.listing #loadtarget .slider-lisitng .slide .text h4 {
font-weight: 300;
line-height: 1.2;
font-size: 40px
}
.filtri-wrap .wraph2 {
opacity: 0
}
.filtri-wrap h2 {
text-align: center;
font-weight: 300;
margin-bottom: 20px
}
.filtri-wrap .filtri {
margin: 0 auto;
display: inline-block;
text-align: left
}
.filtri-wrap .filtri .select,
.filtri-wrap .filtri .input {
float: left;
width: 242px;
margin: 0 5px;
border: 1px solid #1e1e1e
}
.filtri-wrap .filtri .input {
position: relative
}
.filtri-wrap .filtri .input .search-in {
height: 48px;
line-height: 48px;
padding: 0 20px;
background-color: #fff;
border: 0;
width: 100%;
font-size: 14px;
font-weight: 400;
color: #1e1e1e
}
.filtri-wrap .filtri .input .search-in::-webkit-input-placeholder {
color: #1e1e1e
}
.filtri-wrap .filtri .input .search-in:-moz-placeholder {
color: #1e1e1e
}
.filtri-wrap .filtri .input .search-in::-moz-placeholder {
color: #1e1e1e
}
.filtri-wrap .filtri .input .search-in:-ms-input-placeholder {
color: #1e1e1e
}
.filtri-wrap .filtri .input .search-btn {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 48px;
line-height: 48px;
background-color: #fff;
border: 0;
text-align: left;
cursor: pointer
}
.filtri-wrap .filtri .input .search-btn img {
margin-left: 5px
}
.filtri-wrap .filtri div.fancy-select ul.options.open {
border: 1px solid #1e1e1e;
margin-left: -1px;
width: calc(100% + 2px)
}
@media(max-width:991px) {
.hero.listing {
height: calc(50vh - 40px)
}
}
@media(max-width:950px) {
.filtri-wrap .filtri {
margin: 0 5%;
width: auto
}
.filtri-wrap .filtri .select,
.filtri-wrap .filtri .input {
float: left;
width: 100%;
margin: 0 0 10px 0
}
div.fancy-select div.trigger {
width: 100%
}
div.fancy-select ul.options {
max-width: none;
width: 100%
}
}
@media(max-width:767px) {
.hero.listing .slide>div,
.hero.prod-sheet .slide>div {
position: relative;
height: 0;
padding-bottom: 50%
}
.hero.listing .shadow,
.hero.prod-sheet .shadow {
display: none
}
.hero.listing,
.hero.prod-sheet {
height: auto
}
.compositions.listing h4 {
font-size: 32px;
margin-bottom: 50px;
margin-top: 80px
}
.compositions.listing .item {
margin-bottom: 40px
}
.compositions.listing .item img {
margin-bottom: 10px
}
}
.projects h2 {
font-size: 40px;
line-height: 1.2
}
.projects .item {
font-weight: 300;
text-align: center;
margin-bottom: 30px
}
.projects .item:nth-child(3n+1) {
clear: left
}
.projects .item a {
color: #1e1e1e
}
.projects .item a .titolo {
font-size: 18px;
margin-bottom: 10px;
line-height: 1.1
}
.projects .item a .desc {
font-size: 14px;
font-weight: 400;
color: #777;
}
.projects .item img {
margin-bottom: 22px;
width: 100%;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-webkit-transition: opacity .5s;
transition: opacity .5s;
opacity: 1;
height: 266px;
object-fit: cover;
}
.projects .item a:hover img {
opacity: .6
}
.projects.related .item img {
margin-bottom: 100px
}
.projects .item .small {
font-size: 12px
}
.projects .load-more {/*
font-size: 14px;
background-color: #989898;
color: #fff;
text-transform: uppercase;
font-weight: 400;
padding: 8px 16px*/
}
.project-slider {
padding: 160px 0 0 0;
background-image: none
}
.project-slider--component {
padding: 120px 0;
background-image: none
}
.project-slider--component-video {
padding: 60px 0 120px;
background-image: none;
overflow: hidden
}
.filtri h2 {
}
.filtri-projects .filtri {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: end;
}
.filtri-projects .filtri .select,
.filtri-projects .filtri .input {
float: left;
width: 242px;
margin: 0 5px;
border: 1px solid #1e1e1e
}
.filtri-projects .filtri .select select {
padding: 15px;
background: none;
border: 0;
width: 98%;
height: 48px;
}
.filtri-projects .filtri .input {
position: relative;
width: 400px
}
.filtri-projects .filtri .input .search-in {
height: 48px;
line-height: 48px;
padding: 0 20px;
background-color: #fff;
border: 0;
width: 100%;
font-size: 14px;
font-weight: 400;
color: #1e1e1e;
}
.filtri-projects .filtri .input .search-in::-webkit-input-placeholder {
color: #1e1e1e
}
.filtri-projects .filtri .input .search-in:-moz-placeholder {
color: #1e1e1e
}
.filtri-projects .filtri .input .search-in::-moz-placeholder {
color: #1e1e1e
}
.filtri-projects .filtri .input .search-in:-ms-input-placeholder {
color: #1e1e1e
}
.filtri-projects .filtri .input .search-btn {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 48px;
line-height: 48px;
background-color: #fff;
border: 0;
text-align: left;
cursor: pointer
}
.filtri-projects .filtri .input .search-btn img {
margin-left: 5px
}
.filtri-projects div.fancy-select ul.options.open {
border: 1px solid #1e1e1e;
margin-left: -1px;
width: calc(100% + 2px)
}
.filtri-projects .filtri {
margin: 0 auto;
}
.filtri-projects .filtri .select,
.filtri-projects .filtri .input {
float: left;
width: 242px;
margin: 0 5px;
border: 1px solid #1e1e1e
}
.filtri-projects .filtri .input {
position: relative;
width: 400px
}
.filtri-projects .filtri .input .search-in {
height: 48px;
line-height: 48px;
padding: 0 20px;
background-color: #fff;
border: 0;
width: 100%;
font-size: 14px;
font-weight: 400;
color: #1e1e1e;
}
.filtri-projects .filtri .input .search-in::-webkit-input-placeholder {
color: #1e1e1e
}
.filtri-projects .filtri .input .search-in:-moz-placeholder {
color: #1e1e1e
}
.filtri-projects .filtri .input .search-in::-moz-placeholder {
color: #1e1e1e
}
.filtri-projects .filtri .input .search-in:-ms-input-placeholder {
color: #1e1e1e
}
.filtri-projects .filtri .input .search-btn {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 48px;
line-height: 48px;
background-color: #fff;
border: 0;
text-align: left;
cursor: pointer
}
.filtri-projects .filtri .input .search-btn img {
margin-left: 5px
}
.filtri-projects div.fancy-select ul.options.open {
border: 1px solid #1e1e1e;
margin-left: -1px;
width: calc(100% + 2px)
}
.filtri-video .filtri {
margin: 0 auto;
width: 662px
}
.filtri-video .filtri .select,
.filtri-projects .filtri .input {
float: left;
width: 242px;
margin: 0 5px;
border: 1px solid #1e1e1e
}
.filtri-video .filtri .input {
position: relative;
width: 400px
}
.filtri-video .filtri .input .search-in {
height: 48px;
line-height: 48px;
padding: 0 20px;
background-color: #fff;
border: 0;
width: 100%;
font-size: 14px;
font-weight: 400;
color: #1e1e1e;
letter-spacing: .1em
}
.filtri-video .filtri .input .search-in::-webkit-input-placeholder {
color: #1e1e1e
}
.filtri-video .filtri .input .search-in:-moz-placeholder {
color: #1e1e1e
}
.filtri-video .filtri .input .search-in::-moz-placeholder {
color: #1e1e1e
}
.filtri-video .filtri .input .search-in:-ms-input-placeholder {
color: #1e1e1e
}
.filtri-video .filtri .input .search-btn {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 48px;
line-height: 48px;
background-color: #fff;
border: 0;
text-align: left;
cursor: pointer
}
.filtri-video .filtri .input .search-btn img {
margin-left: 5px
}
.filtri-video div.fancy-select ul.options.open {
border: 1px solid #1e1e1e;
margin-left: -1px;
width: calc(100% + 2px)
}
@media(min-width:768px) and (max-width:991px) {
.prod-slide .slider-prod .item .wrap .bg-black .text {
bottom: 30px
}
.prod-slide .slider-prod .item .wrap .bg-black .text h4 {
font-size: 24px
}
.projects #results .item {
min-height: 390px
}
}
@media(max-width:991px) {
.project-slider {
z-index: 1;
position: relative
}
.projects .item:nth-child(3n+1) {
clear: none
}
}
@media(max-width:767px) {
.projects .item {
margin-bottom: 20px
}
.projects .item a .titolo {
font-size: 18px
}
.projects h2 {
font-size: 30px
}
.prod-slide .slider-prod .item .wrap .bg-black .text {
bottom: 10px
}
.prod-slide .slider-prod .item .wrap .bg-black .text .desc {
display: none
}
.prod-slide .slider-prod .item .wrap .bg-black .text h4 {
font-size: 14px;
line-height: 1.3
}
.project-slider {
padding: 86px 0 0 0
}
.project-slider--component {
padding: 60px 0
}
.filtri-projects .filtri {
margin: 0;
width: auto;
gap: 10px;
}
.filtri-projects .filtri .select,
.filtri-projects .filtri .input {
float: left !important;
width: 100% !important;
margin: 0 0 10px 0 !important
}
}
.job-title {
font-size: 22px;
line-height: 40px;
letter-spacing: 0;
font-weight: 400;
position: relative;
z-index: 1;
padding-left: 25px;
cursor: pointer
}
.job-title::after {
content: url(../images/arrow-down-black.svg);
display: inline-block;
position: absolute;
top: 0;
left: 0;
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
.job-title.open::after {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
top: 3px
}
.job-desc {
display: none;
padding-left: 25px
}
.job-desc ul {
margin: 20px 0
}
.job-desc li {
position: relative;
padding-left: 25px
}
.job-desc li::before {
content: '';
width: 3px;
height: 3px;
position: absolute;
top: 9px;
left: 8px;
background: #999
}
.upload-format-text {
font-size: 12px
}
#form-job {
display: none;
margin-bottom: 50px;
margin-top: 50px
}
.free-application {
margin-top: 50px
}
.only-for-free-application {
display: none
}
.free-application .only-for-free-application {
display: block
}
.my-archive {
position: relative
}
.my-archive .container {
min-height: 96vh
}
.my-archive .sidebar,
.my-archive .contents {
padding-top: 180px
}
.my-archive .sidebar {
background-color: #eaeaea;
position: fixed;
left: 0;
padding-left: 5%;
top: 0;
height: 100vh;
width: 33%;
overflow-y: auto
}
.my-archive .sidebar.absolute {
position: absolute;
top: auto;
bottom: 0
}
.clss-tablet-device .my-archive .sidebar {
overflow-y: auto
}
.my-archive .sidebar .sezione {
padding-right: 5%
}
.my-archive .sidebar h4 {
font-size: 24px;
margin-bottom: 10px
}
.my-archive .sidebar .testo {
margin-bottom: 10px
}
.my-archive .sidebar ul li {
text-transform: uppercase;
color: #989898;
margin-bottom: 15px
}
.my-archive .sidebar ul li strong {
color: #1e1e1e
}
.my-archive .sidebar .categorie {
margin-top: 40px
}
.usertags {
overflow: hidden
}
.usertags .item {
float: left;
margin: 0 5px 5px 0;
background-color: #d8d8d8;
cursor: pointer;
position: relative
}
.usertags .item .delete {
float: right;
right: 0;
top: 0;
width: 32px;
height: 32px;
display: block;
background: url(/icone/close-sprite.png) no-repeat 9px 10px
}
.usertags .item .add-remove {
float: right;
right: 0;
top: 0;
width: 32px;
height: 32px;
display: block;
position: relative
}
.usertags .item .add-remove:after {
content: "";
position: absolute;
background-color: #1e1e1e;
width: 2px;
height: 12px;
left: 14px;
top: 9px
}
.usertags .item .add-remove:before {
content: "";
position: absolute;
background-color: #1e1e1e;
width: 12px;
height: 2px;
left: 9px;
top: 14px
}
.usertags .item .tagname {
float: left;
padding: 6px 0 6px 10px;
text-transform: uppercase;
font-size: 14px
}
.usertags .item .tagname:hover {
background-color: #bebebe
}
.usertags .item.on .tagname {
background-color: #1e1e1e;
color: #fff
}
.usertags .item .tagname:hover+.delete,
.usertags .item .tagname:hover+.add-remove {
background-color: #bebebe
}
.usertags .item.on .tagname+.delete {
background-color: #1e1e1e;
background-position: 9px -51px
}
.usertags .item.on .tagname+.add-remove {
background-color: #1e1e1e
}
.usertags .item.on .add-remove:after {
display: none
}
.usertags .item.on .add-remove:before {
background-color: #fff
}
.usertags .item .delete:hover {
opacity: 1
}
.my-archive .sidebar .advert {
margin-top: 15px;
margin-bottom: 5px;
font-size: 12px
}
.my-archive .sidebar .tagsmenage .wrap {
position: relative
}
.my-archive .sidebar .tagsmenage .wrap input {
color: #989898;
font-size: 16px;
height: 18px;
line-height: 18px;
font-weight: 400;
border: 0;
background-color: transparent;
width: 90%;
padding-left: 28px;
text-transform: uppercase
}
.my-archive .sidebar .tagsmenage .wrap button {
height: 18px;
width: 18px;
position: absolute;
background-color: transparent;
left: 0;
top: 0;
border: 0;
cursor: pointer
}
.my-archive .sidebar .tagsmenage .wrap button:after {
content: "";
position: absolute;
display: block;
height: 2px;
width: 18px;
background-color: #989898;
left: 0;
top: 8px
}
.my-archive .sidebar .tagsmenage .wrap button:before {
content: "";
position: absolute;
display: block;
height: 18px;
width: 2px;
background-color: #989898;
left: 8px;
top: 0
}
.my-archive .grid {
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align-items: center;
margin-top: 40px
}
.my-archive .grid .col-lg-3 {
padding: 1.5625% 0 120px 0;
text-align: center;
position: relative
}
.my-archive .grid .col-lg-3 .wrap-archives {
position: relative;
line-height: 0
}
.my-archive .grid .col-lg-3 .wrap-archives .archives {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 5
}
.my-archive .grid .col-lg-3 .wrap-archives .archives .actions {
margin: 0 auto;
display: inline-block;
opacity: 0;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
.my-archive .grid .col-lg-3 .wrap-archives:hover .actions {
opacity: 1
}
.my-archive .grid .col-lg-3 .wrap-archives .archives .actions div {
background-color: rgba(152, 152, 152, 1);
height: 47px;
width: 47px;
z-index: 1;
margin: 0 3px;
float: left;
cursor: pointer;
margin-bottom: 5px
}
.my-archive .grid .col-lg-3 .wrap-archives .archives .actions div:nth-child(4) {
clear: both
}
.my-archive .grid .col-lg-3 .wrap-archives .archives .actions div img {
margin: 0 auto;
margin-top: 12px;
width: auto !important
}
.my-archive .grid .col-lg-3 img.frame {
width: auto;
height: 140px;
display: inline-block;
-moz-transition: opacity .7s;
-o-transition: opacity .7s;
-webkit-transition: opacity .7s;
transition: opacity .7s;
opacity: 1;
cursor: pointer
}
.my-archive .grid .col-lg-3 .wrap-archives:hover img.frame {
opacity: .3
}
.my-archive .grid .col-lg-3 span.tit {
display: block;
position: absolute;
left: 0;
width: 100%;
height: 16px;
bottom: 85px;
text-align: center
}
.my-archive .disegni .grid {
display: block
}
.my-archive .list:last-child {
margin-bottom: 80px
}
.my-archive .item-list {
border-bottom: 1px solid #c1c1c1;
padding-top: 20px;
padding-bottom: 20px;
font-size: 12px;
color: #1e1e1e;
overflow: hidden
}
.my-archive .thumbnail .item-list {
padding-top: 54px
}
.my-archive .item-list .titolo {
text-transform: uppercase;
float: left;
margin-top: 2px;
width: 50%
}
.my-archive .item-list .titolo img {
height: 70px;
float: left;
margin-right: 20px;
margin-top: -26px
}
.my-archive .thumbnail .item-list .titolo a {
display: block
}
.my-archive .thumbnail .item-list .titolo img {
height: auto;
margin-top: 20px;
margin-left: 0
}
.my-archive .item-list .actions {
color: #1e1e1e;
float: left;
width: 50%;
text-align: right
}
.my-archive .item-list .actions img {
display: inline-block;
margin-right: 5px;
position: relative;
margin-bottom: -5px
}
.my-archive .item-list .actions a {
color: #1e1e1e;
margin-left: 30px
}
.my-archive .title-cat .item-list .titolo {
text-transform: none;
font-weight: 500;
font-size: 18px
}
.my-archive .contents .sezione {
position: relative
}
.my-archive .contents .sezione .tool {
position: absolute;
right: 0;
top: 0
}
.my-archive .contents .sezione .tool .buttons {
float: right;
overflow: hidden;
display: none
}
.my-archive .contents .sezione .tool .buttons a {
display: inline-block;
background-color: rgba(152, 152, 152, 1);
height: 47px;
width: 47px;
z-index: 1;
margin: 0 3px;
float: left;
cursor: pointer
}
.my-archive .contents .sezione .tool .buttons a img {
margin: 0 auto;
margin-top: 12px;
width: auto !important
}
.my-archive .contents .sezione .tool .azioni,
.my-archive .contents .sezione .tool .control {
float: right;
margin-top: 16px
}
.my-archive .contents .sezione .tool .azioni {
display: none
}
.my-archive .contents .sezione .tool .azioni a,
.my-archive .contents .sezione .tool .control a {
float: left;
text-transform: uppercase;
color: #1e1e1e;
text-decoration: none;
font-size: 12px;
margin-right: 25px
}
.my-archive .contents .sezione .tool .control a {
margin-right: 0
}
.my-archive .contents .sezione.disegni .selezionato .item-list {
position: relative
}
.my-archive .contents .sezione.disegni .selezionato .item-list:after {
width: 100%;
height: 100%;
position: absolute;
left: 0;
background-color: #989898;
z-index: 9;
content: '';
opacity: .2;
border-top: 0;
border-bottom: 0
}
.my-archive .sel-attiva .grid .col-lg-3 .wrap-archives {
cursor: pointer
}
.my-archive .sel-attiva .grid .col-lg-3.selezionato .wrap-archives:after {
width: 100%;
height: 110%;
position: absolute;
top: -5%;
left: 0;
background-color: #989898;
border: 10px solid #fff;
z-index: 9;
content: '';
opacity: .2;
border-top: 0;
border-bottom: 0
}
.my-archive .sel-attiva .grid .col-lg-3.selezionato .wrap-archives img {
opacity: .6 !important
}
.my-archive .sel-attiva .grid .col-lg-3 .wrap-archives:hover .actions {
opacity: 0 !important;
display: none
}
@media(max-width:1660px) {
.my-archive .grid .col-lg-3 img.frame {
height: 120px
}
.my-archive .grid .col-lg-3 .wrap-archives .archives {
margin-top: 2px
}
}
@media(max-width:1460px) {
.my-archive .grid .col-lg-3 img.frame {
height: 100px
}
}
@media(max-width:1260px) {
.my-archive .grid .col-lg-3 img.frame {
height: 80px
}
}
@media(max-width:1199px) {
.my-archive .grid .col-lg-3 img.frame {
height: 120px
}
}
@media(max-width:991px) {
.my-archive .container {
min-height: inherit
}
.my-archive .sidebar {
position: relative;
left: auto;
padding: 100px 0 40px 0;
top: auto;
height: auto;
width: 100%;
-moz-box-shadow: 400px 0 0 #eaeaea, -400px 0 0 #eaeaea;
-webkit-box-shadow: 400px 0 0 #eaeaea, -400px 0 0 #eaeaea;
box-shadow: 400px 0 0 #eaeaea, -400px 0 0 #eaeaea
}
.my-archive .sidebar .sezione {
padding-left: 5%
}
.my-archive .contents {
padding-top: 60px
}
.my-archive .sel-attiva .grid .col-lg-3 .wrap-archives {
display: inline-block
}
}
@media(max-width:767px) {
.my-archive .item-list .titolo {
margin-bottom: 20px;
width: 100%
}
.my-archive .item-list .actions {
width: 100%
}
.my-archive .contents .sezione .tool {
position: absolute;
right: auto;
left: 0;
top: 30px
}
.my-archive .contents .sezione h4 {
margin-bottom: 80px
}
}
.filtri-downloads {
text-align: center
}
.filtri-downloads .filtri {
margin: 0 auto;
display: inline-block;
display: flex;
flex-wrap: wrap;
justify-content: center
}
.filtri-downloads .filtri .select,
.filtri-projects .filtri .input {
width: 242px;
margin: 0 5px;
border: 1px solid #1e1e1e;
text-align: left
}
.filtri-downloads .filtri .input {
position: relative;
width: 400px
}
.filtri-downloads .filtri .input .search-in {
height: 48px;
line-height: 48px;
padding: 0 20px;
background-color: #fff;
border: 0;
width: 100%;
font-size: 14px;
font-weight: 400;
color: #1e1e1e;
letter-spacing: .1em
}
.filtri-downloads .filtri .input .search-in::-webkit-input-placeholder {
color: #1e1e1e
}
.filtri-downloads .filtri .input .search-in:-moz-placeholder {
color: #1e1e1e
}
.filtri-downloads .filtri .input .search-in::-moz-placeholder {
color: #1e1e1e
}
.filtri-downloads .filtri .input .search-in:-ms-input-placeholder {
color: #1e1e1e
}
.filtri-downloads .filtri .input .search-btn {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 48px;
line-height: 48px;
background-color: transparent;
border: 0;
text-align: left;
cursor: pointer
}
.filtri-downloads .filtri .input .search-btn img {
margin-left: 5px
}
.filtri-downloads div.fancy-select ul.options.open {
border: 1px solid #1e1e1e;
margin-left: -1px;
width: calc(100% + 2px)
}
.ui-widget.ui-widget-content {
padding: 10px 0;
border: 1px solid #1e1e1e;
background: #efefef;
color: #1e1e1e;
font-size: 14px;
margin-top: -1px;
margin-left: -1px;
cursor: pointer;
max-width: 350px
}
.ui-menu .ui-menu-item-wrapper {
padding: 6px 24px 6px 20px;
font-weight: 300
}
@media(max-width:870px) {
.filtri-downloads div.fancy-select div.trigger {
width: 100%
}
.filtri-downloads .filtri {
margin: 0 1.5625%;
width: auto
}
.filtri-downloads .filtri .select,
.filtri-downloads .filtri .input {
float: left !important;
width: 100% !important;
margin: 0 0 10px 0 !important
}
}
@media(max-width:767px) {
.filtri-downloads .filtri .input .search-btn {
width: 34px
}
}
.filtri-press {
text-align: center
}
.filtri-press .filtri {
margin: 0 auto;
display: inline-block
}
.filtri-press .filtri .select,
.filtri-projects .filtri .input {
float: left;
width: 242px;
margin: 0 5px;
border: 1px solid #1e1e1e;
text-align: left
}
.filtri-press .filtri .disabled {
opacity: .4
}
.filtri-press .filtri .select.filled {
opacity: .3
}
.filtri-press .filtri .select.filled:hover {
opacity: 1
}
.filtri-press .filtri .input {
position: relative;
width: 400px
}
.filtri-press .filtri .input .search-in {
height: 48px;
line-height: 48px;
padding: 0 20px;
background-color: #fff;
border: 0;
width: 100%;
font-size: 14px;
font-weight: 400;
color: #1e1e1e;
letter-spacing: .1em
}
.filtri-press .filtri .input .search-in::-webkit-input-placeholder {
color: #1e1e1e
}
.filtri-press .filtri .input .search-in:-moz-placeholder {
color: #1e1e1e
}
.filtri-press .filtri .input .search-in::-moz-placeholder {
color: #1e1e1e
}
.filtri-press .filtri .input .search-in:-ms-input-placeholder {
color: #1e1e1e
}
.filtri-press .filtri .input .search-btn {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 48px;
line-height: 48px;
background-color: transparent;
border: 0;
text-align: left;
cursor: pointer
}
.filtri-press .filtri .input .search-btn img {
margin-left: 5px
}
.filtri-press div.fancy-select ul.options.open {
border: 1px solid #1e1e1e;
margin-left: -1px;
width: calc(100% + 2px)
}
@media(max-width:767px) {
.filtri-press .filtri {
margin: 0 1.5625%;
width: auto
}
.filtri-press .filtri .select,
.filtri-press .filtri .input {
float: left !important;
width: 100% !important;
margin: 0 0 10px 0 !important
}
}
.filtri-maintenance {
text-align: center
}
.filtri-maintenance .filtri {
margin: 0 auto;
display: inline-block
}
.filtri-maintenance .filtri .select,
.filtri-projects .filtri .input {
float: left;
width: 242px;
margin: 0 5px;
border: 1px solid #1e1e1e;
text-align: left
}
.filtri-maintenance div.fancy-select ul.options.open {
border: 1px solid #1e1e1e;
margin-left: -1px;
width: calc(100% + 2px)
}
@media(max-width:767px) {
.filtri-maintenance .filtri {
margin: 0 1.5625%;
width: auto
}
.filtri-maintenance .filtri .select {
float: left !important;
width: 100% !important;
margin: 0 0 10px 0 !important
}
}
.from-to {
flex: 0 0 100%;
max-width: 100%;
margin-top: 50px
}
.from-to .tit {
margin-bottom: 10px;
font-weight: 600
}
.from-to input {
height: 50px;
line-height: 50px;
padding: 0 20px;
background-color: #fff;
max-width: 180px;
font-size: 14px;
font-weight: 400;
color: #1e1e1e;
border: 1px solid #1e1e1e
}
@media(max-width:767px) {
.from-to label {
display: block;
margin: 10px 0
}
}
.filtri-news .filtri {
margin: 0 auto;
width: 662px
}
.filtri-news .filtri .select,
.filtri-projects .filtri .input,
.filtri-downloads .filtri .input,
.filtri-press .filtri .input,
.filtri-video .filtri .input {
float: left;
width: 242px;
margin: 0 5px;
border: 1px solid #1e1e1e
}
.filtri-news .filtri .input {
position: relative;
width: 400px
}
.filtri-news .filtri .input .search-in {
height: 48px;
line-height: 48px;
padding: 0 20px;
background-color: #fff;
border: 0;
width: 100%;
font-size: 14px;
font-weight: 400;
color: #1e1e1e;
letter-spacing: .1em
}
.filtri-news .filtri .input .search-in::-webkit-input-placeholder {
color: #1e1e1e
}
.filtri-news .filtri .input .search-in:-moz-placeholder {
color: #1e1e1e
}
.filtri-news .filtri .input .search-in::-moz-placeholder {
color: #1e1e1e
}
.filtri-news .filtri .input .search-in:-ms-input-placeholder {
color: #1e1e1e
}
.filtri-news .filtri .input .search-btn {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 48px;
line-height: 48px;
background-color: #fff;
border: 0;
text-align: left;
cursor: pointer
}
.filtri-news .filtri .input .search-btn img {
margin-left: 5px
}
.filtri-news div.fancy-select ul.options.open {
border: 1px solid #1e1e1e;
margin-left: -1px;
width: calc(100% + 2px)
}
.filtri-news .filtri div.fancy-select div.trigger {
width: 100%
}
.listing-news .item {
margin-bottom: 130px
}
.listing-news.videogallery .item {
margin-bottom: 150px
}
.listing-news .item:nth-child(2n+1) {
clear: both
}
.listing-news .item a {
color: #1e1e1e
}
.listing-news .item .extra {
width: 20%;
margin-left: 5%;
float: left;
text-transform: uppercase;
font-size: 14px
}
.listing-news .item.right .extra {
float: right;
margin-left: 0;
margin-right: 5%;
text-align: right
}
.listing-news .item .extra span {
font-size: 26px;
font-weight: 400;
display: block;
margin-top: 8px
}
.listing-news .item .wrap {
width: 60%;
float: left
}
.listing-news .item.right .wrap {
float: right
}
.listing-news .item .wrap img.frame {
width: 100%;
margin-bottom: 40px;
-moz-transition: opacity .7s;
-o-transition: opacity .7s;
-webkit-transition: opacity .7s;
transition: opacity .7s;
opacity: 1
}
.listing-news .item .wrap a {
display: block;
position: relative
}
.listing-news .item .wrap a .player {
top: 50%;
left: 0;
width: 100%;
text-align: center;
z-index: 2;
opacity: 1;
background-color: transparent;
font-size: 12px;
text-transform: uppercase;
height: auto;
right: auto;
bottom: auto;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute
}
.listing-news .item .wrap a .player img {
display: inline-block
}
.listing-news .item:hover img.frame {
opacity: .8
}
.listing-news .item .wrap .titolo {
font-size: 28px;
margin-bottom: 20px;
line-height: 1.4
}
.listing-news .item .wrap .desc {
padding: 0;
font-weight: 400;
line-height: 1.4
}
.listing-news .item .wrap .categorie {
margin: 30px 0 0 0
}
.listing-news .load-more {
font-size: 14px;
background-color: #989898;
color: #fff;
text-transform: uppercase;
font-weight: 400;
padding: 8px 16px
}
.listing-news .advSlider img.frame {
max-height: 100%;
max-width: 100%
}
.chrome .listing-news .advSlider img.frame {
width: auto
}
.listing-news .advSlider .elem {
text-align: center
}
.listing-news .advSlider .elem .wrap-archive {
display: inline-block;
text-align: center
}
.listing-news .advSlider .elem .wrap-archive img {
display: inline-block
}
.advSlider ul.slick-dots .slick-active button {
color: #999
}
.listing-news .item:hover .advSlider img.frame {
opacity: 1 !important
}
@media(min-width:992px) and (max-width:1199px) {
.listing-news.videogallery .item {
margin-bottom: 120px
}
}
@media(min-width:991px) and (max-width:1400px) {
.listing-news .item .extra span {
font-size: 22px
}
}
@media(max-width:767px) {
.filtri-news .filtri {
margin: 0 1.5625%;
width: auto
}
.filtri-news .filtri .select {
float: left;
width: 100%;
margin: 0 0 10px 0
}
.listing-news .item {
margin-bottom: 80px;
position: relative;
padding-top: 40px
}
.listing-news.videogallery .item {
margin-bottom: 80px
}
.listing-news .item .extra {
position: absolute;
left: 2%;
top: 0;
text-align: left !important;
width: 100%;
font-size: 10px
}
.listing-news .item .wrap {
width: 100%
}
.listing-news .item .wrap .titolo {
font-size: 22px
}
}
.corpo-news {
padding: 180px 0 70px 0
}
.fancybox-iframe.corpo-news {
padding: 80px 0 80px 0
}
.galleria-news .item {
margin-bottom: 40px;
display: block
}
.galleria-news .item img.frame {
width: 100%
}
.galleria-news .item .player {
top: 50%;
left: 0;
width: 100%;
text-align: center;
z-index: 2;
opacity: 1;
background-color: transparent;
font-size: 12px;
text-transform: uppercase;
height: auto;
right: auto;
bottom: auto;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute
}
.corpo-news .testo a {
color: #1e1e1e;
text-decoration: underline
}
.corpo-news .testo strong {
font-weight: 600
}
#default h1 {
font-size: 42px;
line-height: 1.2;
letter-spacing: normal;
font-weight: 300;
margin-bottom: 20px
}
#default h2 {
font-size: 34px;
line-height: 1.2;
letter-spacing: normal
}
#default h3 {
font-size: 28px;
line-height: 1.2;
letter-spacing: normal
}
#default h4 {
font-size: 28px;
line-height: 1.2;
letter-spacing: normal
}
@media(max-width:991px) {
.corpo-news .reorder {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical
}
.left-desk {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2
}
.right-desk {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1
}
.corpo-news .cta {
text-align: center;
margin-top: 40px
}
}
@media(max-width:767px) {
.corpo-news {
padding: 100px 0 40px 0
}
.fancybox-iframe.corpo-news {
padding: 80px 0 80px 0
}
#default h1 {
font-size: 36px;
line-height: 1.1
}
#default h2 {
font-size: 28px;
line-height: 1.2;
letter-spacing: normal
}
#default h3 {
font-size: 20px;
line-height: 1.2;
letter-spacing: normal
}
#default h4 {
font-size: 20px;
line-height: 1.2;
letter-spacing: normal
}
}
#homepage .section {
height: 100vh
}
#homepage .section [style*='background'] {
opacity: .2;
-moz-transition: .5s opacity .5s ease-in-out;
-o-transition: .5s opacity .5s ease-in-out;
-webkit-transition: .5s opacity .5s ease-in-out;
transition: .5s opacity .5s ease-in-out
}
#homepage .active .section [style*='background'] {
opacity: 1
}
#homepage .magnetic:not(#news):not(.fp-auto-height) {
background: #1e1e1e
}
#homepage .listCategories {
text-align: center;
padding: 150px 0 75px
}
#homepage .listCategories h2 {
font-size: 60px;
line-height: 70px
}
#homepage .section .row {
position: relative;
height: 100%;
margin-right: 0
}
#homepage .section.h-50 .row {
position: relative;
height: 50%
}
#homepage .section [class*='col'] {
height: 100%;
position: relative;
background-position: center;
background-size: cover;
z-index: 0
}
#homepage .section [class*='col']::before {
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: 1;
background: -moz-linear-gradient(top, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 0) 30%, rgba(30, 30, 30, .8) 100%);
background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 0) 30%, rgba(30, 30, 30, .8) 100%);
background: linear-gradient(to bottom, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 0) 30%, rgba(30, 30, 30, .8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#001e1e1e', endColorstr='#cc1e1e1e', GradientType=0)
}
#homepage .section .text,
#homepage .hero .text {
position: absolute;
bottom: 60px;
width: 100%;
left: 0;
text-align: center;
color: #fff;
z-index: 2;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease
}
#homepage .section .text.center,
#homepage .hero .text.center {
top: 50%;
left: 0;
bottom: auto;
-moz-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
-o-transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
@media(min-width:992px) and (max-width:1280px) {
.touch #homepage .section [style*='background'] {
opacity: 1 !important
}
}
@media(max-width:991px) {
#homepage .section [style*='background'] {
opacity: 1 !important
}
#homepage .section .sub-section {
height: 44vh
}
.clss-tablet-device #homepage .section {
height: 44vh
}
#homepage .section .sub-section-4 {
height: 36vh
}
}
@media screen and (orientation:portrait) {
.clss-tablet-device #homepage .section {
height: 50vh
}
}
@media(max-width:767px) {
#homepage .section .desc {
display: none
}
#homepage .section .desc.medium {
display: block
}
#homepage .section .text,
#homepage .hero .text {
bottom: 40px
}
#homepage .section [style*='background'] {
opacity: 1 !important
}
#homepage .section .sub-section {
height: 34vh
}
.clss-phone-device #homepage .section {
height: 34vh
}
}
@media(max-width:991px) {
#homepage .section.cols {
height: auto
}
}
.fascia-slider .slick-slide {
height: 100vh;
background-size: cover;
background-position: center
}
.fascia-slider .slick-slide img.hide {
display: none !important
}
.fascia-slider .slick-slide video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover
}
#about_us .section {
height: 100vh
}
#about_us .magnetic:first-child .section {
height: calc(100vh - 40px)
}
#about_us .shadow {
background: url(../img/listing-shadow.png) repeat-x left bottom;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 2
}
#about_us .shadow.top {
background: url(../img/listing-shadow-top.png) repeat-x left top
}
#about_us .magnetic:not(#news):not(.fp-auto-height) {
background: #1e1e1e
}
#about_us .listCategories {
text-align: center;
padding: 150px 0 75px
}
#about_us .listCategories h2 {
font-size: 60px;
line-height: 70px
}
#about_us .section .row {
position: relative;
height: 100%
}
#about_us .section.h-50 .row {
position: relative;
height: 50%
}
#about_us .section [class*='col'] {
height: 100%;
position: relative;
background-position: center center;
background-size: cover;
z-index: 0
}
#about_us .section [class*='col']::before {
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: 1;
background: -moz-linear-gradient(top, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 0) 30%, rgba(30, 30, 30, .8) 100%);
background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 0) 30%, rgba(30, 30, 30, .8) 100%);
background: linear-gradient(to bottom, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 0) 30%, rgba(30, 30, 30, .8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#001e1e1e', endColorstr='#cc1e1e1e', GradientType=0)
}
#about_us .section .text {
position: absolute;
bottom: 60px;
width: 100%;
left: 0;
text-align: center;
color: #fff;
z-index: 2;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease
}
#about_us .section .text.center {
top: 50%;
left: 0;
bottom: auto;
-moz-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
-o-transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
@media(max-width:991px) {
#about_us .section [style*='background'] {
opacity: 1 !important
}
#about_us .section,
#homepage .section .sub-section {
height: 44vh
}
#about_us .section .sub-section-4 {
height: 45vh
}
#about_us .section.cols {
height: auto
}
}
@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
#about_us .magnetic:first-child .section {
height: 50vh
}
}
@media(max-width:767px) {
#about_us .magnetic:first-child .section {
height: 50vh
}
#about_us .section,
#homepage .section .sub-section {
height: 44vh
}
}
@media(max-width:767px) {
#about_us .section .text {
bottom: 40px;
left: 5%;
width: 90%
}
#about_us .section [style*='background'] {
opacity: 1 !important
}
#about_us .section,
#homepage .section .sub-section {
height: 32vh
}
#about_us .magnetic:first-child .section {
height: 32vh
}
#about_us .section {
height: auto !important
}
#about_us .section img.hide {
display: block
}
#about_us .section .text {
bottom: 20px
}
}
.listing-exhib {
overflow: hidden
}
.listing-exhib .section {
height: 100vh
}
.listing-exhib.fix-video .section {
height: 100vh
}
.listing-exhib video,
.listing-exhib .video-fallback {
position: absolute;
display: block;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
html.video .listing-exhib .video-fallback {
display: none
}
.listing-exhib .section:not(.video) {
background-color: #1e1e1e
}
.listing-exhib .section [style*='background'] {
opacity: 1;
-moz-transition: .5s opacity .5s ease-in-out;
-o-transition: .5s opacity .5s ease-in-out;
-webkit-transition: .5s opacity .5s ease-in-out;
transition: .5s opacity .5s ease-in-out
}
.listing-exhib .magnetic:not(#news):not(.fp-auto-height) {
background: #1e1e1e
}
.listing-exhib .listCategories {
text-align: center;
padding: 150px 0 75px
}
.listing-exhib .listCategories h2 {
font-size: 60px;
line-height: 70px
}
.listing-exhib .section .row {
position: relative;
height: 100%
}
.listing-exhib .section.h-50 .row {
position: relative;
height: 50%
}
.listing-exhib .section [class*='col'] {
height: 100%;
position: relative;
background-position: center;
background-size: cover;
z-index: 0
}
.listing-exhib .section [class*='col']::after {
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: 1;
background-color: #1e1e1e;
opacity: .5
}
.listing-exhib.aboutus .section [class*='col']::after {
opacity: .4
}
.listing-exhib .section.video [class*='col']::after {
display: none
}
.wrap-yt-video {
height: 0;
overflow: hidden;
padding-bottom: 52.95%;
padding-top: 30px;
position: relative
}
.wrap-yt-video iframe,
.wrap-yt-video object,
.wrap-yt-video embed {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-moz-transform: scale(1.02);
-ms-transform: scale(1.02);
-o-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02)
}
.listing-exhib .section .no-before:before {
display: none
}
.listing-exhib .section .text {
position: absolute;
bottom: 60px;
width: 80%;
left: 10%;
text-align: center;
color: #fff;
z-index: 3;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease
}
.listing-exhib .section .text.vertical-center {
bottom: auto;
top: 60%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
.listing-exhib .section .text.vertical-center a {
text-transform: uppercase;
font-size: 14px;
font-weight: 400;
margin-top: 20px;
display: inline-block
}
.listing-exhib .section .text .btn {
margin-top: 30px
}
.listing-exhib .section .text.center {
top: 50%;
left: 0;
bottom: auto;
-moz-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
-o-transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.listing-exhib .load-more {
font-size: 14px;
background-color: #989898;
color: #fff;
text-transform: uppercase;
font-weight: 400;
padding: 8px 16px
}
.listing-exhib .desc {
max-width: 800px;
margin-left: auto;
margin-right: auto
}
@media(max-width:991px) {
.listing-exhib .section [style*='background'] {
opacity: 1 !important
}
.listing-exhib .section,
.listing-exhib .section .sub-section {
height: 100vh
}
.listing-exhib .section .sub-section-4 {
height: 45vh
}
.listing-exhib .section.cols {
height: auto
}
.listing-exhib video {
width: 100%;
height: 100%;
object-fit: cover
}
}
@media(max-width:768px) {
.listing-exhib video {
width: 100%;
height: 100%;
object-fit: cover
}
}
@media(max-width:666px) {
#listing-exhib .section .text {
bottom: 40px
}
#listing-exhib .section [style*='background'] {
opacity: 1 !important
}
.listing-exhib .section {
height: 70vh
}
.listing-exhib .section .text {
width: 100%;
left: 0;
bottom: 0;
top: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: end;
position: relative;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
-webkit-transform: none;
transform: none !important;
padding: 100px 0 40px 0
}
}
@media(max-width:430px) {
.listing-exhib .section {
height: auto;
margin: 0
}
.listing-exhib video {
position: static;
transform: none
}
.listing-exhib .text {
margin: 0;
padding: 0 !important;
bottom: 20px !important;
top: auto !important
}
.listing-exhib img.hide {
display: block
}
.listing-exhib .mobile-exhibitions {
position: relative
}
.listing-exhib .mobile-exhibitions .text {
position: absolute !important
}
}
@media(max-width:767px) and (orientation:landscape) {
.listing-exhib.fix-video .section {
height: 90vh;
padding-bottom: 0
}
.listing-exhib.fix-video .section video {
transform: translateX(-50%) translateY(-50%)
}
}
.newsletter-landing-video header {
background: rgba(30, 30, 30, .8);
padding: 10px;
position: absolute;
left: 0;
right: 0;
z-index: 1
}
.newsletter-landing-video .logo img {
margin: 0 auto;
max-height: 40px
}
.newsletter-landing-video section#default>.container {
display: flex;
align-items: center;
height: 100vh;
max-width: 1600px
}
.newsletter-landing-video .video-wrapper {
padding-bottom: 56.25%;
position: relative
}
.newsletter-landing-video .video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23)
}
.dettagli ul li {
overflow: hidden;
margin-bottom: 20px
}
.dettagli ul li.feat {
margin-top: 100px
}
.overlay-video .dettagli ul li.feat {
margin-top: 60px
}
.dettagli ul li div {
width: 50%;
float: left
}
.overlay-video .dettagli ul li div {
width: 100%;
float: left;
margin-bottom: 10px
}
.dettagli ul li div a {
text-decoration: underline;
color: #1e1e1e;
font-weight: 400
}
.dettagli ul li .left {
font-weight: 500
}
.dettagli ul li .left .extra {
font-weight: 300;
text-transform: uppercase
}
.dettagli ul li .left .extra span {
font-size: 26px;
font-weight: 400;
display: block;
margin-top: 10px
}
.dettagli ul li .right {
font-weight: 300
}
.dettagli ul li .right a {
font-weight: 300
}
@media(max-width:991px) {
.dettagli {
padding: 20px 0
}
}
@media(max-width:768px) {
.dettagli ul li {
margin-bottom: 30px
}
.dettagli ul li div {
width: 100%
}
.dettagli ul li .left {
margin-bottom: 5px
}
.categorie {
text-align: center
}
.dettagli ul li.feat {
margin-top: 60px
}
}
.introduzione.margn-first-letter {
margin-top: 45px
}
.introduzione .text {
font-size: 16px
}
.introduzione .text.small-text {
font-size: 15px;
margin-top: -45px
}
.flagship-listing .lista .item:nth-child(3n+1) {
clear: left
}
.lista.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
clear: both;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap
}
.flagship-listing .item {
margin-bottom: 80px;
position: relative;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row
}
.flagship-listing .item .wrap {
font-weight: 400;
position: relative;
z-index: 1;
padding-bottom: 40px;
width: 100%
}
.flagship-listing .item .wrap img {
width: 100%;
margin-bottom: 30px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
position: relative;
z-index: 10
}
.flagship-listing .item .wrap img.transition {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
z-index: 50
}
.flagship-listing .item .wrap .titolo {
font-size: 24px;
font-weight: 500;
margin-bottom: 5px;
line-height: 1.2
}
.flagship-listing .item .wrap .by-class {
height: 22px;
font-size: 14px
}
.flagship-listing .item .wrap .flagship-store {
font-size: 16px;
text-transform: uppercase;
margin-bottom: 30px
}
.flagship-listing .item .wrap .address {
font-size: 14px;
margin-bottom: 30px
}
.flagship-listing .item .wrap .contatti {
font-size: 14px;
margin-bottom: 30px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
.flagship-listing .item .wrap .contatti a {
color: #1e1e1e
}
.flagship-listing .item .wrap .btn {
width: 100%;
min-width: unset;
position: absolute;
left: 0;
bottom: 0;
z-index: 1
}
.filtri-flagship .filtri .select,
.filtri-flagship .filtri .input {
width: 242px;
margin: 0 auto;
border: 1px solid #1e1e1e
}
.filtri-flagship div.fancy-select ul.options.open {
border: 1px solid #1e1e1e;
margin-left: -1px;
width: calc(100% + 2px)
}
.filtri-adv .filtri .select,
.filtri-adv .filtri .input {
width: 242px;
margin: 0 auto;
border: 1px solid #1e1e1e
}
.filtri-adv div.fancy-select ul.options.open {
border: 1px solid #1e1e1e;
margin-left: -1px;
width: calc(100% + 2px)
}
.filtri-cat .filtri .select,
.filtri-adv .filtri .input {
width: 242px;
margin: 0 auto;
border: 1px solid #1e1e1e
}
.filtri-cat div.fancy-select ul.options.open {
border: 1px solid #1e1e1e;
margin-left: -1px;
width: calc(100% + 2px)
}
@media(max-width:767px) {
.introduzione .text {
font-size: 18px
}
.introduzione .text.small-text {
font-size: 16px;
margin-top: 0
}
}
.filtri-mappa {
padding: 180px 0 80px 0
}
.filtri-mappa .container {
background-color: #4f4f4f
}
.filtri-mappa .filtri {
width: 31%;
float: left;
color: #fff;
height: 0;
position: relative;
padding-bottom: 43%
}
.filtri-mappa .filtri .wrap {
width: 100%;
padding: 0 15%;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute
}
.filtri-mappa .filtri .wrap .text {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.3
}
.filtri-mappa .filtri .wrap .titolo {
font-size: 24px;
margin-bottom: 20px
}
.filtri-mappa .filtri .wrap input,
.filtri-mappa .filtri .wrap .select {
margin-bottom: 10px
}
.filtri-mappa .filtri .wrap label {
font-size: 12px;
margin-bottom: 2px;
display: block
}
.filtri-mappa .filtri .wrap #noCountry {
margin-bottom: 4px;
margin-top: 4px;
color: #eb4b4b;
font-weight: 900
}
.filtri-mappa .filtri .wrap .search-in {
height: 48px;
line-height: 48px;
padding: 0 20px;
background-color: #4f4f4f;
border: 0;
width: 100%;
font-size: 14px;
font-weight: 400;
color: #fff;
border: 1px solid #fff
}
.filtri-mappa .filtri .wrap div.fancy-select div.trigger {
width: 100%;
background-color: #4f4f4f;
border: 1px solid #fff;
color: #fff
}
.filtri-mappa .filtri .wrap div.fancy-select ul.options.open {
border: 1px solid #1e1e1e;
margin-left: -1px;
width: calc(100% + 2px)
}
.filtri-mappa .filtri .wrap div.fancy-select div.trigger:after {
content: url(../icone/arrow-down-white.svg)
}
.filtri-mappa .filtri .btn {
background-color: transparent;
cursor: pointer;
width: 100%;
margin-top: 20px;
height: 48px
}
.filtri-mappa .filtri .btn:hover {
background-color: #fff;
color: #1e1e1e
}
.filtri-mappa .filtri-mappa {
width: 50%;
float: left
}
.filtri-mappa #net-map {
height: 0;
position: relative;
padding-bottom: 43%;
background-color: #f2f2f2;
width: 69%;
float: left;
background-size: cover !important;
background-position: center center
}
.text-right.distance {
float: right
}
.network-listing .item {
color: #fff;
padding: 0;
margin: 0 1.5625% 60px 1.5625%;
background-color: #292929;
width: 30.2%
}
.network-listing .item .wrap {
padding: 40px 30px
}
.network-listing .item .titolo {
font-size: 22px;
margin-bottom: 5px
}
.network-listing .item .tipologia {
margin-bottom: 30px;
text-transform: uppercase
}
.network-listing .item .tipologia span {
background-color: #292929;
display: inline-block;
padding: 1px 3px;
color: #fff;
font-size: 12px;
text-transform: none
}
.network-listing .item .address {
margin-bottom: 30px
}
.network-listing .item .contatti {
margin-bottom: 30px
}
#concept-retail .item .contatti a {
color: #1e1e1e
}
#concept-retail .item.concept .contatti a {
color: #fff
}
#concept-retail .network-listing .item .contatti a,
#agenti .network-listing .item .contatti a {
color: #1e1e1e
}
#agenti .item .contatti a {
color: #1e1e1e
}
.network-listing .item .cta {
margin-bottom: 60px
}
.network-listing .item .cta .btn {
border-color: #fff;
color: #fff;
background-color: #292929
}
.network-listing .item .cta .btn:hover {
background-color: #fff;
color: #1e1e1e
}
.network-listing .item .tools .archivio,
.network-listing .item .tools .share {
float: left;
margin-right: 20px;
cursor: pointer
}
.network-listing .item .tools .share {
position: relative
}
.network-listing .item .tools .share .contenuto {
position: absolute;
border: 4px solid #1e1e1e;
left: -55px;
top: 30px;
background-color: #fff;
display: inline-block;
width: 140px;
text-align: center;
display: none
}
.network-listing .item .tools .share .contenuto ul {
padding: 10px;
white-space: nowrap
}
.network-listing .item .tools .share .contenuto ul li {
margin-left: 8px;
margin-right: 8px;
display: inline-block !important
}
.network-listing .item .tools .share .contenuto ul li.pinterest-share,
.network-listing .item .tools .share .contenuto ul li.visible-xs {
display: none !important
}
.network-listing .item .tools .share .contenuto ul li a {
display: inline-block;
float: left
}
.network-listing .item .tools .pin {
float: right
}
.network-listing .item .tools .pin.dealer-popup {
cursor: pointer
}
.network-listing #concept-retail .item.concept {
background-color: #989898
}
.network-listing #concept-retail .item .tools .share .contenuto {
border: 4px solid #989898
}
.network-listing #concept-retail .item.retail {
background-color: #fff;
border: 1px solid #292929;
color: #1e1e1e
}
.network-listing #agenti .item {
background-color: #fff;
color: #1e1e1e;
font-weight: 400
}
#mapWrapper a {
color: #292929
}
.result-list hr {
border: 0;
height: 1px;
background-color: #ccc
}
.result-list .prod-name p {
padding-top: 20px;
margin-bottom: 8px;
text-transform: uppercase
}
.footer .social img {
max-width: 32px;
max-height: 18px
}
@media(min-width:992px) and (max-width:1199px) {
.network-listing .item {
width: 46.8% !important
}
}
@media(max-width:1199px) {
.filtri-mappa {
padding: 100px 0 40px 0
}
.filtri-mappa .filtri,
.filtri-mappa .mappa {
width: 100%;
clear: both
}
.filtri-mappa .filtri {
height: auto;
position: relative;
padding-bottom: 0
}
.filtri-mappa .filtri .wrap {
padding: 60px 15%;
top: auto;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none;
position: relative
}
.filtri-mappa #net-map {
padding-bottom: 90%;
width: 100%
}
.network-listing .item {
width: 100%
}
}
@media(max-width:991px) {
.network-listing .item {
width: 100%
}
.network-listing .item .tools .share .contenuto ul li.visible-xs {
display: inline-block !important
}
}
#archive-notification {
position: fixed;
right: 0;
bottom: 30px;
background-color: #1e1e1e;
color: #fff;
z-index: 9999;
-moz-transform: translateX(100%), scale(.5, .5);
-ms-transform: translateX(100%), scale(.5, .5);
-o-transform: translateX(100%), scale(.5, .5);
-webkit-transform: translateX(100%) scale(.3, .3);
transform: translateX(100%), scale(.5, .5);
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
-webkit-transition: all .6s ease;
transition: all .6s ease;
opacity: 0
}
#archive-notification.open {
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
-webkit-transform: translateX(0%);
transform: translateX(0%);
opacity: 1
}
#archive-notification .wrap {
padding: 30px 50px 30px 40px;
white-space: nowrap
}
#archive-notification .wrap img {
display: inline-block;
margin-bottom: -4px;
margin-right: 5px
}
@media(max-width:991px) {
#archive-notification {
bottom: 120px
}
}
@media(max-width:991px) {
#archive-notification .wrap {
padding: 20px 40px 20px 30px
}
}
#userNav {
height: 60px;
line-height: 60px;
font-size: 20px;
width: 100%;
position: fixed;
bottom: 0;
left: auto;
right: auto;
z-index: 999;
background: #f0f2f2;
-moz-transition: bottom .4s ease-in-out;
-o-transition: bottom .4s ease-in-out;
-webkit-transition: bottom .4s ease-in-out;
transition: bottom .4s ease-in-out;
max-width: 1600px
}
#userNav.off {
bottom: -60px;
-moz-transition: bottom .4s ease-in-out;
-o-transition: bottom .4s ease-in-out;
-webkit-transition: bottom .4s ease-in-out;
transition: bottom .4s ease-in-out
}
@media(width:1024px) and (height:1366px) {
#about_us .section,
#homepage .section,
.hero.listing,
.listing-exhib .section,
.listing-exhib .section,
.listing-exhib .section .sub-section {
height: 50vh
}
#homepage .section [style*='background'] {
opacity: 1
}
.hero,
.hero.listing {
height: calc(50vh - 40px)
}
}
@media(max-width:767px) {
.touch .video-flagship .mobile-gif {
position: relative;
z-index: -1
}
.touch .video-flagship .section .text {
width: 90%;
left: 5%;
bottom: auto;
position: absolute;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
-webkit-transform: none;
transform: none !important;
padding: 100px 0 40px 0;
top: -30px;
z-index: 10;
padding-top: 0
}
}
@media(max-width:767px) {
.cta.dropdown .contenuto ul li .link .actions a.open-login,
.cta.dropdown .contenuto ul li .link .actions .archive {
display: none
}
.overlay-cataloghi .wrap-archive.no-print .archive {
display: none !important
}
.overlay-modelli2d3d .item-list .actions .archive {
display: none
}
.down-listing .item-list .actions .archive {
display: none
}
}
@media(min-width:800px) and (max-width:1280px) {
.touch #geolocator .filtri .wrap .text {
margin-bottom: 10px
}
.touch #geolocator .filtri .wrap .titolo {
margin-bottom: 10px
}
.touch #geolocator .filtri .wrap .text p {
margin-bottom: 10px !important
}
.touch #geolocator #mapGeoLocalize p {
margin-bottom: 10px !important
}
}
.table.table-bordered {
width: 100%
}
.table.table-bordered tr:first-child {
background: #eee
}
.table.table-bordered td {
border: 1px solid #777
}
.table.table-bordered p {
margin-bottom: 0;
padding: 10px
}
@media(max-width:576px) {
.table.table-responsive {
display: block;
overflow-x: scroll
}
}
.thronPlayerCN {
width: 100%;
height: 0;
padding-bottom: 56.3%
}
@media screen and (orientation:landscape) and (max-device-width:1024px) {
.thronPlayerCN {
height: 460px;
padding-bottom: 0
}
}
@media screen and (orientation:landscape) and (max-device-width:768px) {
.thronPlayerCN {
height: 400px;
padding-bottom: 0
}
}
:root {
--vh: 1vh
}
.vodiapicker {
display: none
}
#a {
padding-left: 0
}
#a img,
.btn-select img {
width: 12px
}
#a li {
list-style: none;
padding: 10px;
background-color: #fff;
display: flex;
align-items: center;
cursor: pointer
}
#a li:hover {
background-color: #f4f3f3
}
#a li img {
width: 40px;
height: 40px
}
#a li span {
margin-left: 15px
}
.btn-select li span {
margin-left: 15px
}
.b {
display: none;
width: 100%;
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 5px;
position: absolute
}
.open {
display: block !important
}
.btn-select {
margin-top: 10px;
width: 100%;
height: auto;
padding: 10px;
border-radius: 0;
background-color: #fff;
border: 1px solid #b2b2b2
}
.btn-select img {
width: 40px;
height: 40px
}
.btn-select li {
list-style: none;
float: left;
padding-bottom: 0;
display: flex;
align-items: center
}
.btn-select:hover li {
margin-left: 0
}
.btn-select:hover {
background-color: #f4f3f3;
border: 1px solid transparent;
box-shadow: inset 0 0 0 1px #ccc
}
.btn-select:focus {
outline: 0
}
.lang-select {
margin-left: 0;
position: relative;
z-index: 2
}
.lang-select .arrow-select {
position: absolute;
top: 25px;
right: 20px
}
@media screen and (max-width:768px) {
.fake-select {
position: relative
}
.lang-select {
pointer-events: none;
position: relative;
z-index: 1
}
.vodiapicker {
display: block;
position: absolute;
z-index: 12;
width: 100%;
height: 100%;
opacity: 0
}
}
.video-gallery-componet-inpage .grid.chiudifancy {
background-image: url('/icone/close.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: block;
height: 20px;
width: 20px
}
.video-gallery-componet-inpage .next-fancy {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: block
}
.video-gallery-componet-inpage .prev-fancy {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: block
}
.video-gallery-componet-inpage .fancybox-inner {
overflow: hidden !important
}
#homepage .img-for-mobile {
display: none
}
@media(max-width:768px) {
#homepage .section {
height: auto !important
}
#homepage .section .text {
bottom: 20px
}
#homepage .img-for-mobile,
#homepage img.hide {
display: block
}
.hero {
height: 370px !important
}
.hero .slider {
visibility: visible
}
.hero .slider .slick-track {
visibility: visible
}
.hero .slider .slick-track .slide {
visibility: visible
}
.hero .slider .slick-track .slide>div {
position: static;
}
.hero .slider .slick-track .slide>div .text {
bottom: 5px !important
}
.slick-slide img {
height: 100%;
}
.fascia-slider .slick-slide {
height: auto
}
.fascia-slider .slick-slide video {
position: static;
height: auto
}
.box-hover {
padding: 0
}
.box-hover video {
position: static;
height: auto;
width: 100%;
-webkit-transform: none;
transform: none;
min-width: auto;
min-height: auto
}
}
/****************/
.our-blog {
padding: 0 0 20px;
}
.owl-item .post-item {
margin-bottom: 0;
}
.post-item {
height: calc(100% - 30px);
margin-bottom: 30px;
}
.owl-carousel .post-item {
margin-bottom: 0;
}
.post-featured-image {
margin-bottom: 22px;
overflow: hidden;
border-radius: 5px;
}
.post-featured-image a {
}
.post-featured-image figure,
.post-featured-image a {
display: block;
}
.post-featured-image img {
width: 100%;
height: 260px;
object-fit: cover;
transition: all 0.6s ease-in-out;
}
.post-item:hover .post-featured-image img {
transform: scale(1.02);
}
.post-item-content {
margin-bottom: 15px;
}
.post-item-content h3 {
color: #000;
font-size: 17px;
line-height: 1.4em;
line-height: 27px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
height: 54px;
margin-bottom: 11px; font-weight: 400;
}
.post-item-content h3 a {
color: inherit;
}
.post-item-btn a {
position: relative;
color: #000;
text-transform: capitalize;
padding-right: 25px;
font-size: 14px;
letter-spacing: 0.5px;
}/*
.post-item-btn a::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
width: 17px;
height: 16px;
background: url(../images/arrow-dark.svg) no-repeat;
background-position: right center;
background-size: cover;
transition: all 0.4s ease-in-out;
}*/
.post-item-btn a:hover::after {
transform: translate(2px, -50%);
}
.our-blog-footer {
margin-top: 20px;
text-align: center;
}
.small-description {
line-height: 25px;
overflow: hidden;
line-height: 25px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
height: 50px; color: #505050;
}
/***************/
/*=====================================
16. Home1 Footer Section
========================================*/
.footer-section {
overflow: hidden;
}
@media (max-width: 1199px) {
.footer-section .footer-wrapper {
padding: 90px 80px;
}
}
@media (max-width: 991px) {
.footer-section .footer-wrapper {
padding: 70px 40px;
}
}
@media (max-width: 767px) {
.footer-section .footer-wrapper {
padding: 70px 20px;
}
}
@media (max-width: 576px) {
.footer-section .footer-wrapper {
padding: 60px 20px;
}
}
.footer-section .footer-wrapper .footer-logo-and-contact-area {
padding: 50px 110px;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area {
max-width: 360px;
width: 100%;
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-logo img {
width: 150px;
}
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content {
margin-top: 15px;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content p {
color: #fff;
margin-bottom: 15px;
}
.social-list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 7px;
margin: 0;
/*
justify-content: center;*/
}
.social-list li a {
color: #fff;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #97979726;
border-radius: 50%;
}
.social-list li a i {
transition: 0.5s;
}
.social-list li a span {
font-size: 12px;
font-weight: 400;
line-height: 1;
display: block;
padding-top: 5px;
transition: 0.5s;
}
.social-list li a:hover i {
color: #fff;
}
.social-list li a:hover span {
color: #fff;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area {
padding: 0;
margin: 0;
list-style: none;
position: relative;
width: 75%;
margin-right: auto;
border-right:1px solid rgba(255, 255, 255, 0.1);
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li {
margin-bottom: 12px;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li:last-child {
margin-bottom: 0;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact {
display: flex;
align-items: center;
gap: 12px;/*justify-content: end;
text-align: right;*/
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .icon svg {
fill: #000000;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content {
position: relative;
line-height: 1;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content span {
font-weight: 500;
font-size: 12px;
line-height: 1;
color: #FFFFFF87;
margin-bottom: 6px;
display: inline-block; text-transform: uppercase;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content h6 {
margin-bottom: 0;
line-height: 1;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content h6 a {
color: #c1c1c1;
font-weight: 300;
font-size: 13px;
line-height: 1.5;
transition: 0.5s;
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content h6 a {
font-size: 13px;
}
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content h6 a:hover {
color: #fff;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .arrow {
margin-top: 20px;
fill: rgba(249, 72, 52, 0.3);
margin-left: 70px;
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .arrow {
display: none;
}
}
.footer-section .footer-wrapper .address-area {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: space-between;
gap: 20px;
padding: 60px;
width: 100%;
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 1799px) {
.footer-section .footer-wrapper .address-area {
padding: 60px 50px;
}
}
@media (max-width: 1699px) {
.footer-section .footer-wrapper .address-area {
padding: 60px 45px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .address-area {
padding: 50px 25px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section .footer-wrapper .address-area {
padding: 45px 20px;
gap: 15px;
}
}
@media (max-width: 1199px) {
.footer-section .footer-wrapper .address-area {
border: unset;
padding: 0;
}
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .address-area {
flex-wrap: wrap;
gap: 25px;
}
}
.footer-section .footer-wrapper .address-area .single-address {
max-width: 230px;
width: 100%;
padding-left: 35px;
position: relative;
}
@media (max-width: 1799px) {
.footer-section .footer-wrapper .address-area .single-address {
padding-left: 25px;
}
}
@media (max-width: 1699px) {
.footer-section .footer-wrapper .address-area .single-address {
padding-left: 20px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .address-area .single-address {
padding-left: 15px;
}
}
@media (max-width: 1399px) {
.footer-section .footer-wrapper .address-area .single-address {
padding-left: 15px;
}
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .address-area .single-address {
padding-left: 0;
}
}
.footer-section .footer-wrapper .address-area .single-address::before {
content: "";
position: absolute;
bottom: 5px;
left: 0;
width: 1px;
height: 42px;
background-color: #F94834;
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .address-area .single-address::before {
display: none;
}
}
.footer-section .footer-wrapper .address-area .single-address:first-child {
padding-left: 0;
}
.footer-section .footer-wrapper .address-area .single-address:first-child::before {
display: none;
}
.footer-section .footer-wrapper .address-area .single-address span {
color: #000000;
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.06em;
text-decoration: underline;
display: block;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .address-area .single-address span {
margin-bottom: 15px;
}
}
.footer-section .footer-wrapper .address-area .single-address a {
color: rgba(0, 0, 0, 0.6);
font-size: 17px;
font-weight: 400;
line-height: 28px;
margin-bottom: 0;
transition: 0.5s;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .address-area .single-address a {
font-size: 16px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section .footer-wrapper .address-area .single-address a {
font-size: 14px;
}
}
.footer-section .footer-wrapper .address-area .single-address a:hover {
color: #000000;
}
.footer-section .footer-wrapper .contact-banner-area {
background-image: linear-gradient(90deg, #000000 5.18%, rgba(0, 0, 0, 0.4) 100%), url(../img/home3/footer-contact-bg.jpg);
background-size: cover;
background-repeat: no-repeat;
padding: 64px 60px;
display: flex;
align-items: center;
justify-content: space-between;
}
@media (max-width: 1699px) {
.footer-section .footer-wrapper .contact-banner-area {
padding: 64px 40px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .contact-banner-area {
padding: 64px 30px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section .footer-wrapper .contact-banner-area {
padding: 55px 20px;
}
}
@media (max-width: 991px) {
.footer-section .footer-wrapper .contact-banner-area {
padding: 64px 25px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.footer-section .footer-wrapper .contact-banner-area {
padding: 50px 20px;
gap: 15px;
}
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .contact-banner-area {
flex-wrap: wrap;
padding: 55px 20px;
gap: 20px;
}
}
.footer-section .footer-wrapper .contact-banner-area h4 {
color: #fff;
font-size: 25px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.05em;
margin-bottom: 0;
max-width: 290px;
width: 100%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section .footer-wrapper .contact-banner-area h4 {
font-size: 23px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.footer-section .footer-wrapper .contact-banner-area h4 {
font-size: 21px;
}
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .contact-banner-area h4 {
font-size: 23px;
}
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .contact-banner-area form {
width: 100%;
}
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 10px 4px 24px;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 5px;
min-width: 380px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .contact-banner-area form .form-inner {
min-width: 320px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section .footer-wrapper .contact-banner-area form .form-inner {
min-width: 270px;
}
}
@media (max-width: 991px) {
.footer-section .footer-wrapper .contact-banner-area form .form-inner {
min-width: 310px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.footer-section .footer-wrapper .contact-banner-area form .form-inner {
min-width: 245px;
padding: 4px 10px 4px 15px;
}
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .contact-banner-area form .form-inner {
min-width: unset;
padding: 4px 10px 4px 15px;
}
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner input {
background: transparent;
height: unset;
border: unset;
padding: 0;
color: #fff;
padding-right: 10px;
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner input::-moz-placeholder {
color: rgba(255, 255, 255, 0.75);
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner input::placeholder {
color: rgba(255, 255, 255, 0.75);
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner button {
min-width: 36px;
max-width: 36px;
height: 36px;
border-radius: 50%;
background-color: #F94834;
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner button svg {
fill: #fff;
transition: 0.5s;
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner button:hover {
background-color: #000000;
}
.footer-section .footer-wrapper .footer-menu {
padding: 75px 110px;
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 1799px) {
.footer-section .footer-wrapper .footer-menu {
padding: 75px 85px;
}
}
@media (max-width: 1699px) {
.footer-section .footer-wrapper .footer-menu {
padding: 75px 70px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .footer-menu {
padding: 65px 55px;
}
}
@media (max-width: 1399px) {
.footer-section .footer-wrapper .footer-menu {
padding: 65px 45px;
}
}
@media (max-width: 1199px) {
.footer-section .footer-wrapper .footer-menu {
border: unset;
padding: 0;
}
}
.footer-section .footer-wrapper .footer-menu .footer-widget .widget-title {
margin-bottom: 25px;
}
.footer-section .footer-wrapper .footer-menu .footer-widget .widget-title h5 {
color: #000000;
font-size: 20px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.9px;
margin-bottom: 0;
position: relative;
padding-bottom: 10px;
}
.footer-section .footer-wrapper .footer-menu .footer-widget .widget-title h5::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 107px;
height: 2px;
border-radius: 10px;
background: linear-gradient(90.01deg, #000000 0.01%, rgba(0, 0, 0, 0) 102.8%);
}
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container {
display: flex;
gap: 80px;
}
@media (max-width: 1699px) {
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container {
gap: 60px;
}
}
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list {
padding: 0;
margin: 0;
list-style: none;
}
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li {
margin-bottom: 20px;
line-height: 1;
transition: 0.5s;
position: relative;
}
@media (max-width: 1199px) {
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li {
margin-bottom: 15px;
}
}
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li:last-child {
margin-bottom: 0;
}
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li a {
color: #00000099;
font-size: 13px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.34px;
text-transform: uppercase;
display: inline-block;
background: linear-gradient(to bottom, #000000 0%, #000000 100%);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0% 100%;
transition: background-size 0.75s;
}
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li a:hover {
color: #fff;
background-size: 100% 1px;
background-position: left 100%;
}
.footer-section .footer-bottom-wrap {
}
.footer-section .footer-bottom-wrap .footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 991px) {
.footer-section .footer-bottom-wrap .footer-bottom {
flex-wrap: wrap;
gap: 20px;
}
}
@media (max-width: 767px) {
.footer-section .footer-bottom-wrap .footer-bottom {
justify-content: center;
gap: 15px;
}
}
.copyright-area p {
color: #fff;
text-align: center;
font-size: 14px;
font-weight: 300;
line-height: normal;
letter-spacing: 0.02em;
margin-bottom: 0;
margin-top: 25px;
}
.footer-section .footer-bottom-wrap .footer-bottom .copyright-area p {
color: #fff;
color: #FFFFFF87;
font-size: 13px;
font-weight: 300;
line-height: normal;
letter-spacing: 0.02em;
margin: 0;
}
.footer-section .footer-bottom-wrap .footer-bottom .copyright-area p a {
color: #000000;
font-weight: 500;
line-height: 1;
display: inline-block;
background: linear-gradient(to bottom, #000000 0%, #000000 100%);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0% 100%;
transition: background-size 0.75s;
}
.footer-section .footer-bottom-wrap .footer-bottom .copyright-area p a:hover {
color: #fff;
background-size: 100% 1px;
background-position: left 100%;
}
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
line-height: 1;
}
@media (max-width: 991px) {
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul {
gap: 20px;
}
}
@media (max-width: 576px) {
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul {
gap: 15px;
justify-content: center;
}
}
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a {
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.3px;
text-transform: capitalize;
display: inline-block;
background: linear-gradient(to bottom, #000000 0%, #000000 100%);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0% 100%;
transition: background-size 0.75s;
}
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a:hover {
color: #fff;
}
.footer-section.style-2 {
/*
background-color: #111;
background: url(../images/BG2.jpg);*/
background: #0c0c0c;
}
.footer-section.style-2 .footer-wrapper {
padding: 40px 0 30px; /*background: #000c;*/
}
.footer-section.style-2 .footer-wrapper .footer-logo-and-contact-area {
align-items: center;
padding: 0;
}
.footer-section.style-2 .footer-wrapper .address-area {
padding: 0;
display: block;
border: unset;
}
.footer-section.style-2 .footer-wrapper .address-area .single-address {
padding-left: 0;
margin-bottom: 45px;
}
@media (max-width: 1399px) {
.footer-section.style-2 .footer-wrapper .address-area .single-address {
margin-bottom: 40px;
}
}
@media (max-width: 1199px) {
.footer-section.style-2 .footer-wrapper .address-area .single-address {
margin-bottom: 35px;
}
}
@media (max-width: 767px) {
.footer-section.style-2 .footer-wrapper .address-area .single-address {
margin-bottom: 30px;
}
}
.footer-section.style-2 .footer-wrapper .address-area .single-address:last-child {
margin-bottom: 0;
}
.footer-section.style-2 .footer-wrapper .address-area .single-address::before {
display: none;
}
.footer-section.style-2 .footer-wrapper .address-area .single-address span {
margin-bottom: 15px;
}
.footer-section.style-2 .footer-wrapper .footer-menu {
border: unset;
padding: 0;
padding-left: 110px;
}
@media (max-width: 1799px) {
.footer-section.style-2 .footer-wrapper .footer-menu {
padding-left: 85px;
}
}
@media (max-width: 1699px) {
.footer-section.style-2 .footer-wrapper .footer-menu {
padding-left: 70px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section.style-2 .footer-wrapper .footer-menu {
padding-left: 55px;
}
}
@media (max-width: 1399px) {
.footer-section.style-2 .footer-wrapper .footer-menu {
padding-left: 45px;
}
}
@media (max-width: 1199px) {
.footer-section.style-2 .footer-wrapper .footer-menu {
border: unset;
padding: 0;
}
}
.footer-section.style-2 .footer-bottom-wrap {
border: unset;
}
.footer-section.style-3 .footer-wrapper .address-area {
padding: 0;
display: block;
border: unset;
}
.footer-section.style-3 .footer-wrapper .address-area .single-address {
padding-left: 0;
margin-bottom: 45px;
}
@media (max-width: 1399px) {
.footer-section.style-3 .footer-wrapper .address-area .single-address {
margin-bottom: 40px;
}
}
@media (max-width: 1199px) {
.footer-section.style-3 .footer-wrapper .address-area .single-address {
margin-bottom: 35px;
}
}
@media (max-width: 767px) {
.footer-section.style-3 .footer-wrapper .address-area .single-address {
margin-bottom: 30px;
}
}
.footer-section.style-3 .footer-wrapper .address-area .single-address:last-child {
margin-bottom: 0;
}
.footer-section.style-3 .footer-wrapper .address-area .single-address::before {
display: none;
}
.footer-section.style-3 .footer-wrapper .address-area .single-address span {
margin-bottom: 15px;
}
.footer-section.style-3 .footer-wrapper .footer-menu {
padding: 75px 60px;
}
@media (max-width: 1199px) {
.footer-section.style-3 .footer-wrapper .footer-menu {
padding: 0;
}
}
.footer-section.style-4 {
background-color: #000000;
border-top: 3px solid #F94834;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area {
padding: 50px 35px;
}
}
@media (max-width: 1399px) {
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area {
padding: 50px 25px;
}
}
@media (max-width: 1199px) {
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area {
padding: 0;
}
}
@media (max-width: 767px) {
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area {
flex-wrap: wrap;
}
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content p {
color: rgba(255, 255, 255, 0.7);
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list li a i {
color: rgba(255, 255, 255, 0.6);
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list li a span {
color: rgba(255, 255, 255, 0.6);
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list li a:hover i {
color: #fff;
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list li a:hover span {
color: #fff;
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .icon svg {
fill: #fff;
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content span {
color: #fff;
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content h6 a {
color: rgba(255, 255, 255, 0.6);
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content h6 a:hover {
color: #F94834;
}
.footer-section.style-4 .footer-wrapper .contact-banner-area {
background-image: linear-gradient(90deg, #101010 20.1%, rgba(16, 16, 16, 0.5) 100%), url(../img/home3/footer-contact-bg.jpg);
}
@media (max-width: 1699px) {
.footer-section.style-4 .footer-wrapper .contact-banner-area {
padding: 64px 25px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section.style-4 .footer-wrapper .contact-banner-area {
padding: 64px 20px;
}
}
@media (max-width: 1399px) {
.footer-section.style-4 .footer-wrapper .contact-banner-area {
padding: 64px 15px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section.style-4 .footer-wrapper .contact-banner-area h4 {
font-size: 23px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section.style-4 .footer-wrapper .contact-banner-area h4 {
font-size: 21px;
}
}
.footer-section.style-4 .footer-wrapper .address-area {
padding: 0;
display: block;
border: unset;
}
.footer-section.style-4 .footer-wrapper .address-area .single-address {
padding-left: 0;
margin-bottom: 45px;
}
@media (max-width: 1699px) {
.footer-section.style-4 .footer-wrapper .address-area .single-address {
max-width: 200px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section.style-4 .footer-wrapper .address-area .single-address {
max-width: 170px;
}
}
@media (max-width: 1399px) {
.footer-section.style-4 .footer-wrapper .address-area .single-address {
margin-bottom: 40px;
}
}
@media (max-width: 1199px) {
.footer-section.style-4 .footer-wrapper .address-area .single-address {
margin-bottom: 35px;
}
}
@media (max-width: 767px) {
.footer-section.style-4 .footer-wrapper .address-area .single-address {
margin-bottom: 30px;
}
}
.footer-section.style-4 .footer-wrapper .address-area .single-address:last-child {
margin-bottom: 0;
}
.footer-section.style-4 .footer-wrapper .address-area .single-address::before {
display: none;
}
.footer-section.style-4 .footer-wrapper .address-area .single-address span {
margin-bottom: 15px;
color: #fff;
}
.footer-section.style-4 .footer-wrapper .address-area .single-address a {
color: rgba(255, 255, 255, 0.6);
}
.footer-section.style-4 .footer-wrapper .address-area .single-address a:hover {
color: #fff;
}
.footer-section.style-4 .footer-wrapper .footer-menu {
border-left: 1px solid rgba(255, 255, 255, 0.08);
padding: 75px 60px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section.style-4 .footer-wrapper .footer-menu {
padding: 75px 25px;
}
}
@media (max-width: 1399px) {
.footer-section.style-4 .footer-wrapper .footer-menu {
padding: 75px 20px;
}
}
@media (max-width: 1199px) {
.footer-section.style-4 .footer-wrapper .footer-menu {
border-left: unset;
padding: 0;
}
}
.footer-section.style-4 .footer-wrapper .footer-menu .footer-widget .widget-title h5 {
color: #fff;
}
.footer-section.style-4 .footer-wrapper .footer-menu .footer-widget .widget-title h5::after {
opacity: 0.4;
background: linear-gradient(90.01deg, #FFFFFF 0.01%, rgba(255, 255, 255, 0) 102.8%);
}
.footer-section.style-4 .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li a {
color: rgba(255, 255, 255, 0.6);
background: linear-gradient(to bottom, #fff 0%, #fff 100%);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0% 100%;
transition: background-size 0.75s;
}
.footer-section.style-4 .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li a:hover {
color: #fff;
background-size: 100% 1px;
background-position: left 100%;
}
.footer-section.style-4 .footer-bottom-wrap {
padding: 20px 0;
border-top: unset;
background-color: #101010;
}
.footer-section.style-4 .footer-bottom-wrap .footer-bottom .copyright-area p {
color: rgba(255, 255, 255, 0.6);
}
.footer-section.style-4 .footer-bottom-wrap .footer-bottom .copyright-area p a {
color: #fff;
background: linear-gradient(to bottom, #fff 0%, #fff 100%);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0% 100%;
transition: background-size 0.75s;
}
.footer-section.style-4 .footer-bottom-wrap .footer-bottom .copyright-area p a:hover {
background-size: 100% 1px;
background-position: left 100%;
}
.footer-section.style-4 .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a {
color: #fff;
background: linear-gradient(to bottom, #fff 0%, #fff 100%);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0% 100%;
transition: background-size 0.75s;
}
.footer-section.style-4 .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a:hover {
background-size: 100% 1px;
background-position: left 100%;
}
.section-title { position: relative;
margin-bottom: 25px;
}
.section-title p {
line-height: 1.7;
margin-top: 0;
margin-bottom: .5em;
vertical-align: middle;
transition: color .3s;
color: #000000BA;
font-size: 16px;
white-space: normal;
}
.section-title .text-anime-style-2 {
color: #000;
font-size: 30px;
line-height: 44px;
text-transform: capitalize;
}
.contact-info-box .section-title .text-anime-style-2,
.contact-us-form .section-title .text-anime-style-2 {
font-size: 23px;
font-weight: 400;
line-height: 1.5;
margin-top: 8px;
margin-bottom: 0;
}
.section-title h3 {
color: #444;
font-size: 18px;
font-weight: 300;
text-transform: capitalize;
line-height: 1;
}
.custom-nav.owl-carousel .owl-nav {
position: absolute;
right: 0;
top: -70px;
display: flex;
margin: 0;direction: ltr;
gap: 5px;
left: auto;
}
.custom-nav.owl-carousel .owl-nav button {
width: 50px;
height: 50px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 20px;
color: #000;
transition: all 400ms ease;
box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
border: 0;
position: initial;
}
.custom-nav.owl-carousel .owl-nav button:hover {
background-color: #000;
color: #fff;
}
.no-desk {
display: none !important;
}
.footer-logo {
width: 300px;
display: block;
margin: 0 auto;
}
.form-control {
font-size: 16px;
font-weight: 500;
line-height: 1.2em;
color: #000;
border-radius: 0;
outline: none;
background-color: #fff;
height: 50px;
width: 100%;
padding: 10px 20px;
margin-bottom: 20px;
box-shadow: none !important;
border: 1px solid #333;
border-radius: 0;
}
.form-control::focus {
border: 1px solid #333;
}
.footer-links h3 {
font-size: 30px;
text-transform: capitalize;
color: #ffffff;
margin-bottom: 0;
font-weight: 400;
line-height: 1.5;
}
.footer-newsletter-form p {
font-size: 14px;
color: #FFFFFF87;
font-weight: 300;
}
.footer-newsletter-form .form-group {
display: flex;
background: none;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-newsletter-form .form-group .form-control::placeholder {
color: #fff; font-size: 14px;
text-transform: capitalize;
opacity: 1;
}
.footer-newsletter-form .form-group .form-control {
width: 85%;
border: none;
border-radius: 0;
color: #fff;
background: #fff0;
padding: 0;
box-shadow: none;
margin: 0; width: 100%;
}
.footer-newsletter-form button {
background: none; font-weight: 300;
color: #fff;
border: none;
padding: 0; cursor: pointer;
padding: 0 12px
}
.footer-newsletter-form button i {
color: #fff;
font-size: 24px;
transition: all 0.3s ease-in-out;
}
.process-section {
padding: 80px 0 0;
}
.process-con {
width: 90%;
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
}
/* Left */
.line-dashed-img {
display: inline-block;
width: 163px;
height: 15px;
margin-bottom: 40px;
background: url(../images/dashed.png);
}
.process-intro h2 {
color: #000000;
font-family: "Roboto", sans-serif;
font-size: 42px;
font-weight: 400;
line-height: 44px;
}
.process-intro p {
line-height: 1.7;
max-width: 350px;
margin-top: 0;
margin-bottom: .5em;
vertical-align: middle;
transition: color .3s;
color: #000000BA;
font-size: 17px;
white-space: normal;
}
/* Right */
.process-steps {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
}
.step {
margin-bottom: 35px;
position: relative;
}
.step-number {
position: absolute;
top: 25px;
left: -15px;
font-size: 160px;
font-weight: bold;
color: #f0f0f0;
z-index: 0;
}
.step h3 {
position: relative;
z-index: 1;
font-size: 30px;
margin-bottom: 50px;
font-weight: 400;
text-transform: capitalize;
line-height: 2;
width: 60%;
line-height: 35px;
font-size: 31px;
line-height: 35px;
color: #000;
}
.step p {
position: relative;
z-index: 1;
color: #777;
line-height: 1.6;
max-width: 320px;
font-size: 16px;
line-height: 23px;
color: #0000007A;
}
/* Responsive */
@media (max-width: 991px) {
.process-con {
grid-template-columns: 1fr;
}
.process-steps {
grid-template-columns: 1fr;
}
}
/*
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content h6 a.spec-address {
font-size: 20px;
font-weight: 400;
width: 60%;
display: block;
margin-left: auto;
}
*/
.res-gallery {
padding: 40px 0;
}
.gallery-filters {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
list-style: none;
padding: 0;
}
.filter-btn {
cursor: pointer;
padding: 8px 20px;
border-radius: 30px;
background: #f2f2f2;
font-weight: 500;
transition: 0.3s;
}
.filter-btn.active,
.filter-btn:hover {
background: #000;
color: #fff;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.gallery-item {
/*
overflow: hidden;
border-radius: 12px;
transform: scale(1);
transition: 0.4s ease;
transition: all ease-in-out 0.4s;*/
opacity: 1;
transform: scale(1);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.gallery-item.hide-card {
/*
transform: scale(0);
opacity: 0;
pointer-events: none;*/
opacity: 0;
transform: scale(0.7);
pointer-events: none;
}
/* final state (after animation) */
.gallery-item.hidden {
display: none;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.4s;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.filter-card:hover {
transform: translatey(-8px);
}
.filter-card {
width: 100%;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: transform 0.6s;
min-height: 380px;z-index: 1;
}
.filter-card-image {
position: relative;
overflow: hidden;
border-radius: 8px;
}
.filter-card-image img {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform 0.5s ease;
}
.element-item:nth-child(even) .filter-card-image img {
height: 440px;
}
.filter-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffffb2;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.5s ease;
transition: opacity .65s,transform .65s;
z-index: 1;
}
.filter-arrow {
font-size: 20px;
color: #0009;
transform: translateX(-20px);
transition: transform 0.5s ease;
}
.filter-card:hover .filter-overlay {
opacity: 1;
}
.filter-card:hover .filter-arrow {
transform: translateX(0);
}
.filter-card:hover img {
transform: scale(1.03);
}
.filter-card-content {
padding: 15px 0;
}
.filter-card-title {
margin: 5px 0 0;
font-size: 17px;
font-weight: 400;
color: #000;
line-height: 1;
}
.filter-card-subtitle {
margin: 10px 0 0 0;
color: #000;
opacity: .5;
font-size: 15px;
font-weight: 400;
}
.filter-controls {
display: flex;
justify-content: center;
gap: 15px;
list-style: none;
margin-bottom: 30px;
padding: 0;
}
.filter-controls li {
padding: 8px 20px;
border-radius: 30px;
background: #eee;
cursor: pointer;
transition: 0.3s;
}
.filter-controls li.active,
.filter-controls li:hover {
background: #000;
color: #fff;
}
.filter-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
.filter-item {
transition: transform 0.4s ease, opacity 0.4s ease;
}
.filter-item.hide-card {
opacity: 0;
transform: scale(0.6);
pointer-events: none;
}
.card {
height: 180px;
border-radius: 12px;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.button-bo {
display: inline-block;
padding: 0;
margin: 0;
background: #EEE;
border: none;
border-radius: 0;
background: none;
color: #00000040;
font-size: 15px;
position: relative;
text-shadow: 0;
cursor: pointer;
margin-left: 15px;
}
.button-bo:after {
content: "";
height: .0909090909em;
min-height: 1px;
position: absolute;
background-color: #16171e;
transform-origin: right center;
transition: transform .3s;
transform: scaleX(0);
bottom: -.5833333333em;
left: 0;
width: 100%;
height: 2px;
min-height: 2px;
}
.button-bo:hover:after,
.button-bo.is-checked:after {
transform: scaleX(1);
transform-origin: left center;
}
.button-bo:hover {
}
.button-bo:active,
.button-bo.is-checked {
color: #000;
}
.button-bo.is-checked {
color: #000;
}
.button-bo:active {
}
/* ---- button-group ---- */
.button-group-bo {
text-align: right;
margin-bottom: 45px;
}
.button-group-bo span {
text-transform: capitalize;
font-size: 15px;
color: #000;
}
.button-group-bo:after {
content: '';
display: block;
clear: both;
}
.button-group-bo .button-bo {
}
.button-group-bo .button-bo:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group-bo .button-bo:last-child { border-radius: 0 0.5em 0.5em 0; }
/* ---- grid ---- */
.grid-bo {
min-height: 400px;
width: 100%;
}
.element-item {
margin: 0;
margin-bottom: 20px;
position: relative;
}
.urban-cov {
padding: 0;
margin-left: 15px
}
.element-item > * {
margin: 0;
padding: 0;
}
/*
.element-item .name {
position: absolute;
left: 10px;
top: 60px;
text-transform: none;
letter-spacing: 0;
font-size: 12px;
font-weight: normal;
}
.element-item .symbol {
position: absolute;
left: 10px;
top: 0px;
font-size: 42px;
font-weight: bold;
color: white;
}
.element-item .number {
position: absolute;
right: 8px;
top: 5px;
}
.element-item .weight {
position: absolute;
left: 10px;
top: 76px;
font-size: 12px;
}*/
/*
.element-item.alkali { background: #F00; background: hsl( 0, 100%, 50%); }
.element-item.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); }
.element-item.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); }
.element-item.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); }
.element-item.transition { background: #0F8; background: hsl( 144, 100%, 50%); }
.element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element-item.metalloid { background: #08F; background: hsl( 216, 100%, 50%); }
.element-item.diatomic { background: #00F; background: hsl( 252, 100%, 50%); }
.element-item.halogen { background: #F0F; background: hsl( 288, 100%, 50%); }
.element-item.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); }*/
.section-padding {
padding: 50px 0;
}
.corea-padding {
padding: 150px 0 50px;
}
/* Bottom Bar */
.bottom-bar {
position: fixed;
background: #fff;
padding: 13px 8px;
z-index: 999;
left: 50%;
bottom: -80px;
transform: translate(-50%);
border-radius: 50px;
box-shadow: 0 10px 35px -3px rgba(0,0,0,.1);
background-color: #f6f6f6;
transition: all ease-in-out 0.35s;
opacity: 0;
}
.bottom-bar ul {
display: flex;
justify-content: space-around;
padding: 0;
margin:0;
gap: 15px;
}
.bottom-bar.show {
opacity: 1;
bottom: 20px;
}
/* Nav Items */
.nav-item-bar {
color: #000;
text-decoration: none;
font-size: 14px;
transition: 0.3s;
padding: 10px 14px;
border-radius: 50px;
}
.nav-item-bar:hover,
.nav-item-bar.active {
color: #FFFFFF;
background: #000000;
}
.accordion-box .accordion {
position: relative;
border-radius: 0;
display: block;/*
-webkit-box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.1);
box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.1);
box-shadow: 0 1px 15px rgba(108, 118, 134, 0.08);
border: 1px solid #eee;
background: #ffffff;
margin-bottom: 10px;
border-radius: 12px;*/
overflow: hidden;
}
.accordion-box .accordion .accord-btn {
position: relative;
display: block;
cursor: pointer;
transition: all 0.5s ease;
/*border-bottom: 1px solid transparent;
padding: 5px;*/
}
.accordion-box .accordion .accord-btn h4 {
margin-bottom: 0;
font-size: 17px;
line-height: 27px;
letter-spacing: -0.18px;
color: #232A3B;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #E2E2E2;
padding-top: .65em;
padding-bottom: .65em;
display: flex;
align-items: center;
width: 100%;
border-top-right-radius: inherit;
border-top-left-radius: inherit;
box-shadow: none;
text-decoration: none;
text-transform: capitalize;
}
.accordion-box .accordion .accord-btn::after {
font-family: 'Font Awesome 5 Pro';
position: absolute;
content: "\f067";
top: 12px;
right: 9px;
color: #000;
font-size: 12px;
line-height: 20px;
text-align: center;
transition: all 0.5s ease 0s;
line-height: 31px;
border-radius: 50%;
color: #232A3B;
font-weight: 300;
}
/*
.accordion-box .accordion .accord-btn::before {
font-family: 'Font Awesome 5 Pro';
position: absolute;
content: "\f06e";
top: 0;
left: 0;
font-size: 16px;
text-align: center;
transition: all 0.5s ease 0s;
line-height: 55px;
width: 40px;
}*/
.accordion-box .accordion .accord-btn.active {
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;border-bottom-color: #eeeeee;
}
.accordion-box .accordion .accord-btn.active h4 {
color: #212529;
}
.accordion-box .accordion .accord-btn.active:after {
content: "\f068";
}
.accordion-box .accordion .accord-content {
display: none;
position: relative;
padding: 15px 0; font-size: 14px; color: #4B4B4B;
}
.accordion-box .accordion .accord-content.collapsed {
display: block;
}
.accordion-box .accordion .accord-content p {
margin: 0;
font-size: 14px;
line-height: 23px;
color: #4B4B4B;
}
.services-section {
background: url(../images/ArchImage2.png);
background-repeat: no-repeat;
}
/*
.arch-shape {
position: absolute;
z-index: -1;
top: 0;
right: 0;
}*/
.btn-theme {
border: 1px solid #1a1a1a;
padding: 0 30px;
line-height: 44px;
display: inline-block;
height: 44px;
background: #1a1a1a;
color:#fff;
}
.btn-theme:hover {
border: 1px solid #fafafa;
background: #fafafa;
color:#1a1a1a;
}
.btn-theme.btn-outer {
color: #000;
border: 1px solid #1a1a1a;
padding: 0 30px;
line-height: 44px;
display: inline-block;
height: 44px;
background: #fff;
}
.btn-theme.btn-outer:hover {
border: 1px solid #fafafa;
background: #1a1a1a;
color:#fff;
}
.project-gallery-img {
overflow: hidden;
}
.project-gallery-images {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.project-gallery-images .project-gallery-img:nth-child(7),
.project-gallery-images .project-gallery-img:nth-child(1) {
width: calc(75% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(8),
.project-gallery-images .project-gallery-img:nth-child(2) {
width: calc(25% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(9),
.project-gallery-images .project-gallery-img:nth-child(3) {
width: calc(55% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(10),
.project-gallery-images .project-gallery-img:nth-child(4) {
width: calc(45% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(11),
.project-gallery-images .project-gallery-img:nth-child(5) {
width: calc(35% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(12),
.project-gallery-images .project-gallery-img:nth-child(6) {
width: calc(65% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(18),
.project-gallery-images .project-gallery-img:nth-child(14) {
width: calc(35% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(17),
.project-gallery-images .project-gallery-img:nth-child(13) {
width: calc(65% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(19),
.project-gallery-images .project-gallery-img:nth-child(15) {
width: calc(35% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(20),
.project-gallery-images .project-gallery-img:nth-child(16) {
width: calc(65% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(21),
.project-gallery-images .project-gallery-img:nth-child(23) {
width: calc(65% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(22),
.project-gallery-images .project-gallery-img:nth-child(24) {
width: calc(35% - 8px);
}
/*
.project-gallery-images .project-gallery-img:nth-child(16) {
width: calc(65% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(17) {
width: calc(35% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(11),
.project-gallery-images .project-gallery-img:nth-child(12),
.project-gallery-images .project-gallery-img:nth-child(12) {
width: calc(32.5% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(14),
.project-gallery-images .project-gallery-img:nth-child(15) {
width: calc(50% - 8px);
}
*/
/*
.project-gallery-img {
width: calc(25% - 8px);
}*/
.project-gallery-img a,
.project-gallery-img figure {
display: block;
}
.project-gallery-img figure img {
width: 100%;
height: 300px; transition: all 0.4s ease-in-out;
object-fit: cover;
transition: all ease-in-out 0.3s;
}
.project-gallery-img:hover figure img {
transform: scale(1.05);
}
.pq-client-grid {
position: relative;
display: block;
overflow: hidden;
border-right: 1px solid #0000001a;
border-bottom: 1px solid #0000001a;
}
.pq-client-grid a {
position: relative;
display: block;
color: #808080;
width: 100%;
text-align: center;
align-items: center;
height: 110px;
display: grid;
align-items: center;
background: #fff;
}
.pq-client-grid a:hover {
color: #000;
}
.our-client .colfive:nth-child(7n) .pq-client-grid,
.our-client .colfive:nth-child(7) .pq-client-grid,
.our-client .colfive:last-child .pq-client-grid {
border-right: 0;
}
/*
.our-client .colfive:last-child .pq-client-grid {
border-top: 1px solid #0000001a;
}
*/
.our-client .colfive:nth-child(+n+7) .pq-client-grid {
border-bottom: 0;
}
.pq-client-box.pq-client-style-2 .pq-client-img {
position: relative;
display: block;
width: auto;
margin: 0 auto;
-webkit-transition: -webkit-transform .3s ease;
-moz-transition: -moz-transform .3s ease;
transition: transform .3s ease;
max-height: 100px;
filter: grayscale(100);
}
.pq-client-box.pq-client-style-2 a:hover .pq-client-img {
filter: grayscale(0);
}
.pq-client-title {
color: #b7a497;
text-align: center;
text-decoration: underline;
}
.colfive {
width: 14.28%
}
/*
.page-header {
position: relative;
background: url(../images/page-header-bg.jpg);
background: url(../images/ku2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: calc(100vh - 40px);
display: flex;
justify-content: center;
align-items: end;
padding-bottom: 25px;
}
.page-header::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, #fff0 0%, rgb(25 35 36 / 0.4) 80.94%);
background: linear-gradient(0deg, rgba(25, 35, 36, 0.4) 0%, rgba(25, 35, 36, 0.76) 80.94%);
background: linear-gradient(0deg, rgba(25, 35, 36, 0.4) 0%, rgba(0, 0, 0, 0.59) 80.94%);
width: 100%;
height: 100%;
z-index: 0;
}*/
.page-header-box {
position: relative;
text-align: center;
z-index: 1;
margin-top: 140px;
}
.page-header-box p {
margin: 0;
font-size: 22px;
letter-spacing: 1px;
font-weight: 200;
text-transform: capitalize;
}
.page-header-box nav {
display: none;
}
.page-header-box h1 {
display: inline-block;
font-size: 40px;
font-weight: 300;
color: #000;
margin-bottom: 10px;
text-transform: capitalize;
}
.page-header-box ol {
margin: 0;
padding: 0;
justify-content: center;
}
.page-header-box ol li.breadcrumb-item {
font-size: 17px;
text-transform: capitalize;
color: #ffffff;
}
.page-header-box ol li.breadcrumb-item a {
color: inherit;
}
.page-header-box ol .breadcrumb-item + .breadcrumb-item::before {
font-size: 20px;
color: #ffffff;
}
.about-us.page-about-us {
background: #fff0;
}
.about-facility-list {
margin-top: 100px;
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.about-facility-item {
width: calc(33.33% - 20px);
display: flex;
}
.about-facility-item .icon-box {
position: relative;
height: 60px;
width: 60px;
background-color: #eaf0ec;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.about-facility-item .icon-box:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background: #191919;
border-radius: 50%;
width: 100%;
height: 100%;
transform: scale(0);
transition: all 0.4s ease-in-out;
z-index: 0;
}
.about-facility-item:hover .icon-box:before {
transform: scale(1);
}
.about-facility-item .icon-box img {
max-width: 24px;
z-index: 1;
transition: all 0.4s ease-in-out;
}
.about-facility-item:hover .icon-box img {
filter: brightness(0) invert(1);
}
.about-facility-content {
width: calc(100% - 80px);
}
.about-facility-content h3 {
font-size: 20px;
text-transform: capitalize;
margin-bottom: 10px;
}
.about-facility-content p {
margin-bottom: 0;
}
.dwt-box {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 16px;
justify-content: center;
}
.dwt-box h3 {
color: #000;
line-height: 1;
text-transform: uppercase;
font-size: 24px;
margin: 0;
}
.page-contact-us {
padding: 100px 0 50px;
}
.contact-us-image {
height: 100%;
}
.contact-us-image figure {
height: 100%;
display: block;
}
.contact-us-image img {
height: 100%;
width: 100%;
object-fit: cover;
aspect-ratio: 1 / 0.962;
}
/*
.contact-us-form {
padding-left: 30px;
border-left: 1px solid #ddd;
}*/
.contact-form .form-control {
font-size: 16px;
font-weight: 500;
line-height: 1.2em;
color: #000;
border-radius: 0;
outline: none;
background-color: #fff;
height: 50px;
width: 100%;
padding: 10px 20px;
margin-bottom: 20px;
box-shadow: none !important;
border: 1px solid #333;
border-radius: 0;
}
textarea.form-control {
height: auto !important;
}
.form-control::placeholder {
font-size: 14px;
}
.contact-form .form-control::placeholder {
font-weight: 400;
}
.google-map {
padding: 50px 0 100px;
}
.google-map .section-title {
width: 100%;
max-width: 560px;
margin: 0 auto 30px;
text-align: center;
}
.google-map-iframe,
.google-map-iframe iframe {
width: 100%;
height: 500px;
}
.contact-info-box {
display: flex;
gap: 12px;
margin-bottom: 40px;
padding-right: 25px
}
.contact-info-item {/*
width: calc(33.33% - 20px);*/
width: 100%;
display: flex;
}
.contact-info-item .icon-box {
position: relative;
margin-right: 15px;
}
/*
.contact-info-item .icon-box:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background: #191919;
border-radius: 8px;
width: 100%;
height: 100%;
transform: scale(0);
transition: all 0.4s ease-in-out;
z-index: 0;
}
.contact-info-item:hover .icon-box:before {
transform: scale(1);
}*/
.contact-info-item .icon-box i {
position: relative;
font-size: 20px;
color: #191919;
transition: all 0.3s ease-in-out;
z-index: 1;
}
/*
.contact-info-item:hover .icon-box i {
color: #ffffff;
}*/
.contact-info-content {
width: calc(100% - 80px);
}
.contact-info-content h3 {
font-size: 17px;
text-transform: capitalize;
margin-bottom: 0; font-weight: 500;
}
.contact-info-content p {
margin-bottom: 0;
}
.error-page {
background-image: url(../images/error-page-bg.svg);
background-repeat: no-repeat;
background-position: top -100px center;
background-size: auto;
padding: 100px 0;
}
.error-page-image {
text-align: center;
margin-bottom: 30px;
}
.error-page-image img {
width: 100%;
max-width: 50%;
}
.error-page-content {
width: 100%;
max-width: 500px;
margin: 0 auto;
text-align: center;
}
.error-page-content .section-title {
margin-bottom: 20px;
}
.error-page-content-body p {
font-weight: 500;
margin-bottom: 20px;
}
@media only screen and (max-width: 1366px) {
.our-testimonial-content {
padding: 100px 50px;
}
}
@media only screen and (max-width: 1024px) {
.main-menu ul li {
margin: 0;
}
.our-testimonial-content {
padding: 50px 20px;
}
}
.mins-lft {
margin-left: -60px;
}
.countt-cards {
padding: 40px 0;
background: #fafafa;
}
.countt-cards-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0;
}
.countt-cards-wrapper > * {
padding: 0 10px;
}
.countt-back-inner {
display: flex;
gap: 0 18px;
}
.countt-content h3 {
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin: 0 0 3px;
display: block ruby;
}
.countt-icon {
margin-top: 1px;
}
.countt-content h3 .countt {
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: 1;
}
.countt-content p {
font-size: 17px;
text-transform: capitalize;
margin: 0;
display: block ruby;
letter-spacing: .5px;
}
.countt-card-inner {
max-width: 368px;
}
@media (min-width: 1527px) {
span.countt {
display: inline-block;
margin-right: -6px;
}
span.cn-prefix {
display: inline-block;
margin-right: -7px;
}
}
@media (max-width: 1526px) {
.countt-content h3 {
font-size: 25px;
}
.countt-content h3 .countt {
font-size: 40px;
}
.countt-icon img {
max-width: 36px;
}
}
.countt-card-inner {
max-width: 100%;
width: 100%;
}
}
@media (max-width: 1000px) {
.countt-cards-wrapper > * {
width: 50%;
}
.countt-card-inner {
width: auto;
}
}
@media (max-width: 767px) {
.countt-cards-wrapper > * {
width: 50%;
}
.countt-card-inner {
white-space: nowrap;
width: auto;
}
.countt-cards-wrapper,
.countt-cards-wrapper > * {
justify-content: flex-start;
}
.countt-cards-wrapper {
gap: 20px 0;
}
.countt-card-inner {
white-space: unset;
}
.countt-content p {
font-size: 14px;
display: block; letter-spacing: 0;
}
.countt-back-inner {
flex-direction: column;
gap: 10px 0;
}
.countt-content {
width: 100%;
}
.countt-icon {
min-height: 54px;
}
}
.cntrd .countt-content {
width: auto;
}
.cntrd .countt-back-inner,
.cntrd .countt-cards-wrapper {
justify-content: center;
}
@media (max-width: 1526px) {
.cntrd .countt-icon img {
max-width: 50px;
}
}
@media (max-width: 1000px) {
.cntrd .countt-back-inner,
.cntrd .countt-cards-wrapper {
justify-content: unset;
}
}
.js-marquee {
display: flex;
align-items: center;
gap: 12px;
}
.marque-wrap {
overflow: hidden;
padding: 0 50px;
}
.our-team {
padding: 50px 0;
}
.team-member-item {
height: calc(100% - 30px);
margin-bottom: 30px;
}
.team-image {
position: relative;
margin-bottom: 20px;
overflow: hidden;
}
.team-image a {
display: block;
}
.team-image figure {
display: block;
}
.team-image figure img {
width: 100%;
transition: all 0.4s ease-in-out;
object-fit: cover;
object-position: top;
height: 400px;
}
.team-member-item:hover .team-image figure img {
filter: grayscale(100);
}
.team-readmore-btn {
position: absolute;
top: 30px;
right: 30px;
z-index: 1;
}
.team-readmore-btn a {
width: 60px;
height: 60px;
background-color: #191919;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.4s ease-in-out;
}
.team-readmore-btn a:hover {
background-color: #191919;
}
.team-readmore-btn img {
max-width: 20px;
transform: rotate(-45deg);
transition: all 0.4s ease-in-out;
}
.team-readmore-btn a:hover img {
transform: rotate(0deg);
}
.team-content {
text-align: center;
margin-bottom: 20px;
}
.team-content h3 {
font-size: 20px;
text-transform: capitalize;
margin-bottom: 5px;
}
.team-content p {
font-weight: 300;
text-transform: capitalize;
margin: 0;
color: #555;
}
/** Style 2 **/
.pbmit-blogbox-style-2 {
position: relative;
padding-bottom: 30px;
border-bottom: 1px solid #ededed;
margin-bottom: 30px;
}/*
.pbmit-blogbox-style-2:after {
content: "";
position: absolute;
border: 1px solid #ededed;
width: calc(100% - 20px);
left: 0;
height: calc(100% - 20px);
top: 0;border-radius: 6px;
z-index: 0;
}*/
.pbmit-blogbox-style-2 .post-item {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
gap: 350px;
align-items: center;
margin: 0;
}
.pbmit-blogbox-style-2 .post-item .primary-btn1 {
min-width: 150px;
}
.pbmit-blogbox-style-2 .pbmit-meta-date {
color: #aaa9a8;
text-align: center;
text-transform: uppercase;
font-size: 13px;
font-weight: normal;
line-height: 14px;
letter-spacing: 2px;
display: inline-block;
margin: 15px 0 0;
}
.pbmit-blogbox-style-2 .pbmit-meta-category a {
color: #fff;
}
.pbmit-blogbox-style-2 .pbminfotech-box-content .pbmit-post-title {
font-size: 20px;
line-height: 28px;
margin-bottom: 0;
}
.pbmit-blogbox-style-2 .pbminfotech-box-content .pbmit-post-title a {
color: #0c121d;
}
.pbmit-blogbox-style-2 .pbmit-meta-container {
padding-top: 10px;
margin-top: 30px;
border-top: 1px solid #ededed;
}
.pbmit-blogbox-style-2 .pbminfotech-box-desc {
margin-top: 8px;
}
.pbmit-blogbox-style-2 .pbminfotech-box-desc-text {
margin-bottom: 0;
}
.pbmit-blogbox-style-2 .pbmit-meta-container .pbmit-meta-line {
display: inline-block;
margin-left: 10px;
position: relative;
font-size: 13px;
letter-spacing: 0.5px;
color: #201846;
}
.pbmit-blogbox-style-2 .pbmit-meta-container .pbmit-meta-line {
color: #484746;text-transform: capitalize;
}
.pbmit-blogbox-style-2 .pbmit-meta-container .pbmit-meta-line i {
color: #000;
}
.pbmit-blogbox-style-2 .pbmit-meta-container .pbmit-meta-line:last-child:after {
display: none;
}
.pbmit-blogbox-style-2 .pbmit-meta-container .pbmit-meta-line:first-child {
margin-left: 0;
}
.pbmit-blogbox-style-2 .pbmit-meta-container .pbmit-meta-line:first-child i:before {
margin-left: 0;
}
.pbmit-blogbox-style-2 .post-item .pbmit-read-more-link a {
color: #232323;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
font-weight: 700;
display: inline-block;
position: relative;
}
.pbmit-blogbox-style-2 .post-item .pbmit-read-more-link a:after {
content: "\e839";
font-family: "pbminfotech-base-icons";
font-size: 16px;
padding-left: 10px;
background: none !important;
line-height: 16px;
vertical-align: middle;
top: -2px;
position: relative;
}
.pbmit-blogbox-style-2 .pbmit-meta-container .pbmit-meta-line i {
color: #aaa9a8;
}
.pbmit-blogbox-style-2 .post-item .pbmit-read-more-link a:hover:after {
color: #aaa9a8;
}
.pbmit-blogbox-style-2 .post-item .pbmit-read-more-link a:hover {
color: #aaa9a8;
}
.btn-default {
position: relative;
display: inline-block;
background: #191919;
color: #ffffff;
font-size: 16px;
line-height: 1em;
text-transform: capitalize;
border: none;
padding: 17px 46px 17px 20px;
transition: all 0.5s ease-in-out;
overflow: hidden;
z-index: 0;
border: 1px solid transparent
}
.btn-default:hover {
background: #fff;
color: #000;
}
.hover-white:hover {
border: 1px solid #000;
}
.btn-default::before {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 16px;
height: 16px;
/*
background-image: url(../images/arrow-right.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;*/
content: "\f178";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
font-size: 23px;
margin-left: 8px;
transform: translate(-20px, -50%);
transition: all 0.4s ease-in-out;
filter: brightness(100);
}
.btn-default:hover::before {
transform: translate(-18px, -50%);
filter: brightness(0);
}/*
.btn-default::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: -15%;
right: 0;
width: 0;
height: 106%;
background: #191919;
transform: skew(45deg);
transition: all 0.4s ease-in-out;
z-index: -1;
}
.btn-default:hover {
width: 100%;
transform: skew(0deg);
left: 0;
}*/
.btn-default.btn-highlighted {
background-color: #ffffff;
color: #191919;
}
.btn-default.btn-highlighted:hover {
color: #ffffff;
background: #191919;
}
.btn-default.btn-highlighted::before {
filter: brightness(0);
}
.btn-default.btn-highlighted:hover::before {
filter: brightness(100);
}
.btn-default.btn-highlighted::after {
}
.project-entry strong,
.mry-text strong {
color: #000;
font-weight: 400;
}
/*
.project-entry h2 {
font-size: 24px;
font-weight: 400; line-height: 1.3;
margin-bottom: 20px;
text-transform: capitalize;
}
.project-entry p {
margin-bottom: 20px;
}
.project-entry p:last-child {
margin-bottom: 0;
}
.project-entry ul {
list-style: none;
margin-bottom: 20px;
clear: both;
padding: 0;
}
.project-entry ul li {
position: relative;
padding-left: 23px;
margin-bottom: 15px;
}
.project-entry ul li:last-child {
margin-bottom: 0;
}
.project-entry ul li::before {
content: "\f111";
position: absolute;
font-family: "Font Awesome 5 Pro";
font-size: 11px;
font-weight: 400;
line-height: normal;
color: #191919;
display: inline-block;
top: 6px;
left: 0;
}*/
.page-project {
padding: 50px 0;
}
.page-project-single {
padding: 50px 0;
}
.project-single-sidebar {
position: sticky;
top: 30px;
}
.project-detail-list {
display: flex;
justify-content: space-between;
align-items: center;
margin: 25px auto;
width: 100%;
gap: 20px;
}
.project-detail-item {
display: flex;
align-items: center;
padding: 20px;
background: #fafafa;
width: 25%;
border-radius: 16px;
box-shadow: 1px 1px 1px #00000021;
}
.project-detail-item:last-child {
margin-bottom: 0;
}
/*
.project-detail-item .icon-box {
position: relative;
background-color: #eaf0ec;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
transition: all 0.3s ease-in-out;
}
.project-detail-item .icon-box::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #191919;
border-radius: 50%;
height: 100%;
width: 100%;
transform: scale(0);
transition: all 0.3s ease-in-out;
}
.project-detail-item:hover .icon-box::before {
transform: scale(1);
}
.project-detail-item:hover .icon-box i {
color: #ffffff;
}
*/
.project-detail-item .icon-box i {
font-size: 22px;
color: #191919;
transition: all 0.3s ease-in-out;
z-index: 1;
}
.project-detail-content {
width: calc(100% - 70px);
margin-left: 20px;
}
.project-detail-content h3 {
font-size: 16px;
font-weight: 500;
text-transform: capitalize;
margin-bottom: 5px;
}
.project-detail-content p {
color: #191919;
text-transform: capitalize;
margin-bottom: 0;
}
.project-single-image {
margin-bottom: 20px;
}
.project-single-image figure {
display: block;
height: 400px;
border-radius: 20px;
overflow: hidden;
}
.project-single-image img {
width: 100%; height: 100%;
object-fit: cover;
}
.project-info,
.project-design-info {
margin-bottom: 30px;
}
.som-project-info {
text-align: center;
max-width: 900px;
margin: 0 auto 30px;
}
.project-entry h2 {
font-size: 24px;
font-weight: 400; line-height: 1.3;
margin-bottom: 10px;
text-transform: capitalize;
}
.project-entry p {
margin-bottom: 20px;
}
.project-entry p:last-child {
margin-bottom: 0;
}
.project-entry ul {
list-style: none;
margin-bottom: 20px;
padding: 0;
}
.project-entry ul li {
position: relative;
padding-left: 30px;
margin-bottom: 15px;
}
.project-entry ul li:last-child {
margin-bottom: 0;
}
.project-entry ul li::before {
content: "\f058";
position: absolute;
font-family: "Font Awesome 5 Pro";
font-size: 20px;
font-weight: 900;
line-height: normal;
color: #191919;
display: inline-block;
top: 2px;
left: 0;
}
.project-gallery-images {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.project-gallery-images .project-gallery-img:nth-child(7),
.project-gallery-images .project-gallery-img:nth-child(1) {
width: calc(75% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(8),
.project-gallery-images .project-gallery-img:nth-child(2) {
width: calc(25% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(9),
.project-gallery-images .project-gallery-img:nth-child(3) {
width: calc(55% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(10),
.project-gallery-images .project-gallery-img:nth-child(4) {
width: calc(45% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(11),
.project-gallery-images .project-gallery-img:nth-child(5) {
width: calc(35% - 8px);
}
.project-gallery-images .project-gallery-img:nth-child(12),
.project-gallery-images .project-gallery-img:nth-child(6) {
width: calc(65% - 8px);
}
/*
.project-gallery-img {
width: calc(25% - 8px);
}*/
.project-gallery-img a,
.project-gallery-img figure {
display: block;
}
.project-gallery-img figure img {
width: 100%;
height: 300px; transition: all 0.4s ease-in-out;
object-fit: cover;
}
.project-gallery-img:hover figure img {
transform: scale(1.05);
}
.sidebar .widget {
border: 1px solid #ddd;
padding: 30px;
margin-bottom: 25px;
border-radius: 30px;
}
.widget.pbmit-service-ad{
padding: 0;
background-image: url(../images/service-sidebar-bg.jpg);
background-size: cover;
background-position: center center;
border: 0;
}
.widget.pbmit-service-ad .textwidget:before,
.widget.pbmit-service-ad .textwidget:after{
content: "";
display: table;
}
.widget.pbmit-service-ad .textwidget:after{
clear: both;
}
.widget.pbmit-service-ad .pbmit-service-ads{
position: relative;
overflow: hidden;
text-align: center;
padding: 60px 25px 55px 25px;
border-radius: 20px;
height: 400px;
}
.pbmit-service-ads .pbmit-ads-subheding{
font-size: 12px;
line-height: 28px;
letter-spacing: 1px;
font-weight: 300;
display: inline-block;
margin-bottom: 0;
text-transform: uppercase;
border-radius: 30px;
padding: 0 13px 0 20px;
margin-bottom: 25px;
color: #ffffff;
border: 1px solid #ffffff;
}
.pbmit-service-ads .pbmit-ads-subtitle {
font-size: 23px;
line-height: 34px;
margin-bottom: 5px;
font-weight: 600;
color: #ffffff;
text-transform: uppercase;
}
.pbmit-service-ads .pbmit-ads-title {
font-size: 15px;
line-height: 24px;
margin-bottom: 0;
color: #ffffff;
}
.pbmit-service-ads .pbmit-ads-desc a {
font-size: 15px;
line-height: 21px;
padding-top: 25px;
color: #ffffff;
}
.pbmit-service-ads .pbmit-ads-desc {
font-size: 18px;
line-height: 21px;
padding: 20px 0;
color: #ffffff;
}
.pbmit-service-ads .pbmit-ads-desc i {
font-size: 18px;
padding-right: 5px;
color: #bb9a65;
}
.pbmit-service-ads .pbmit-btn{
margin-top: 30px;
}
.pbmit-service-ads .pbmit-btn:after{
display: none;
}
.sidebar .widget-categories ul {
padding: 0;
list-style: none;
margin: 0;
}
.widget-title {
font-size: 22px; margin-bottom: 20px;
text-transform: capitalize;
}
.sidebar .widget-categories li{
position: relative;
line-height: 26px;
}
.sidebar .widget-categories .pbmit-cat-li{
display: flex;
align-items: center;
justify-content: space-between;
color: rgba(64, 50, 38,.5);
border-bottom: 1px solid rgba(64, 50, 38,.05);
transition: all .25s ease-in-out;
}
.sidebar .widget-categories ul li:last-child .pbmit-cat-li{
border-bottom: none;
}
.sidebar .widget-categories .pbmit-cat-li a{
font-size: 13px;
line-height: 23px;
position: relative;
padding-left: 20px;
margin: 15px 0;
color: rgba(64, 50, 38,.7);
text-transform: uppercase;
letter-spacing: 1px;
}
.sidebar .widget-categories .pbmit-cat-li a:before{
position: absolute;
content: "+";
left: 0;
font-size: 15px;
top: 50%;
z-index: 1;
-webkit-transform: translateY(-55%);
-moz-transform: translateY(-55%);
-o-transform: translateY(-55%);
transform: translateY(-55%);
color: rgba(64, 50, 38, .7);
transition: all 0.4s ease;
font-weight: 600;
}
.sidebar .widget-categories .pbmit-brackets{
font-size: 14px;
transition: all .25s ease-in-out;
}
.sidebar .widget-categories .pbmit-cat-li:hover{
color: #bb9a65;
}
.sidebar .widget-categories .pbmit-cat-li:hover>a{
color: #bb9a65;
}
.sidebar .widget-categories .pbmit-cat-li>a:hover:before{
color: #bb9a65;
}
.mry-label {
font-size: 14px;
margin-bottom: 4px;
}
.tag-links {
font-size: 20px;
font-weight: 400;
color: #191919;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.post-social-sharing span,
.post-tags span {
display: block;
margin-bottom: 5px;
}
.post-tags .tag-links a {
display: inline-block;
font-size: 15px;
text-transform: capitalize;
background: #fbfbfb;
color: #000;
border-radius: 0;
padding: 5px 15px;
transition: all 0.3s ease-in-out;
}
.post-tags .tag-links a:hover {
background: #191919;
color: #fff;
}
.post-social-sharing {
margin-top: 25px;
}
.post-social-sharing ul {
list-style: none;
padding: 0;
margin: 0;
}
.post-social-sharing ul li {
display: inline-block;
margin-right: 10px;
}
.post-social-sharing ul li:last-child {
margin-right: 0;
}
.post-social-sharing ul li a {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: #fbfbfb;
color: #000;
border-radius: 0;
width: 36px;
height: 36px;
transition: all 0.3s ease-in-out;
}
.post-social-sharing ul li:hover a {
background: #191919;
color: #fff;
}
.post-social-sharing ul li a i {
}
/**********************/
/* =========================================================
CAMPAIGNS PAGE
========================================================= */
.campaigns-page {
background: #f5f4f1;
color: #171717;
overflow: hidden;
}
/* =========================================================
HERO
========================================================= */
.campaigns-hero {
position: relative;
min-height: 680px;
display: flex;
align-items: flex-end;
background-image: url("../images/campaigns/campaign-hero.jpg");
background-size: cover;
background-position: center;
}
.campaigns-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.10) 0%,
rgba(0, 0, 0, 0.25) 40%,
rgba(0, 0, 0, 0.88) 100%
);
}
.campaigns-hero-content {
position: relative;
z-index: 2;
max-width: 850px;
padding: 100px 0 90px;
color: #fff;
}
.campaigns-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.campaigns-eyebrow::before {
content: "";
width: 45px;
height: 1px;
background: #fff;
}
.campaigns-hero-content h1 {
margin: 0 0 25px;
font-size: clamp(50px, 6vw, 88px);
line-height: 0.98;
font-weight: 500;
letter-spacing: -3px;
}
.campaigns-hero-content p {
max-width: 650px;
margin: 0;
font-size: 17px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.82);
}
/* =========================================================
INTRO
========================================================= */
.campaigns-intro {
padding: 50px 0;
}
.campaigns-section-label {
display: inline-block;
margin-bottom: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #777;
}
.campaigns-section-title {
max-width: 850px;
margin: 0;
font-size: clamp(38px, 4vw, 64px);
line-height: 1.05;
font-weight: 500;
}
.campaigns-section-title span {
color: #888;
}
.campaigns-intro-text {
margin: 0;
max-width: 500px;
font-size: 16px;
color: #666;
}
/* =========================================================
FILTER
========================================================= */
.campaigns-filter-section {
padding-bottom: 55px;
}
.campaigns-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
border-bottom: 1px solid #d9d7d2;
padding-bottom: 20px;
}
.campaigns-filter-btn {
border: 1px solid transparent;
background: transparent;
padding: 12px 22px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
color: #666;
transition: all 0.3s ease;
}
.campaigns-filter-btn:hover,
.campaigns-filter-btn.active {
background: #171717;
color: #fff;
}
/* =========================================================
GRID
========================================================= */
.campaigns-grid-section {
padding: 20px 0 130px;
}
.campaign-card {
height: 100%;
}
.campaign-card-image {
position: relative;
display: block;
height: 430px;
overflow: hidden;
background: #ddd;
}
.campaign-card-large .campaign-card-image {
height: 560px;
}
.campaign-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.campaign-card:hover .campaign-card-image img {
transform: scale(1.06);
}
.campaign-card-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.10),
transparent 45%,
rgba(0, 0, 0, 0.35)
);
pointer-events: none;
}
.campaign-card-number {
position: absolute;
top: 25px;
left: 25px;
z-index: 2;
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
}
.campaign-card-arrow {
position: absolute;
right: 25px;
bottom: 25px;
z-index: 3;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
color: #171717;
transform: translateY(15px);
opacity: 0;
transition: all 0.4s ease;
}
.campaign-card:hover .campaign-card-arrow {
opacity: 1;
transform: translateY(0);
}
.campaign-card-content {
padding: 20px 0;
}
.campaign-card-meta {
margin-bottom: 15px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #888;
}
.campaign-card-meta span {
font-weight: 300;
}
.campaign-card-meta span:last-child {
padding-left: 10px;
margin-left: 7px;
border-left: 1px solid;
}
.campaign-card-content h3 {
margin: 0 0 14px;
font-size: 30px;
line-height: 1;
font-weight: 500;
}
.campaign-card-content p {
max-width: 600px;
margin: 0 0 22px;
font-size: 14px;
line-height: 1.8;
color: #707070;
}
.campaign-card-link {
display: inline-flex;
align-items: center;
gap: 12px;
color: #555;
font-size: 13px;
font-weight: 300;
text-decoration: none;
transition: gap 0.3s ease;
}
.campaign-card-link i {
font-size: 11px;
}
.campaign-card-link:hover {
color: #171717;
gap: 18px;
}
/* =========================================================
CTA
========================================================= */
.campaigns-cta {
position: relative;
min-height: 560px;
display: flex;
align-items: center;
overflow: hidden;
background: #171717;
color: #fff;
}
.campaigns-cta-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(
90deg,
rgba(0, 0, 0, 0.95),
rgba(0, 0, 0, 0.55),
rgba(0, 0, 0, 0.20)
),
url("../images/campaigns/campaign-cta.jpg");
background-size: cover;
background-position: center;
}
.campaigns-cta-content {
position: relative;
z-index: 2;
max-width: 700px;
padding: 100px 0;
}
.campaigns-cta-content .campaigns-section-label {
color: rgba(255, 255, 255, 0.6);
}
.campaigns-cta-content h2 {
margin: 0 0 20px;
font-size: clamp(45px, 5vw, 75px);
line-height: 1;
font-weight: 500;
letter-spacing: -2px;
}
.campaigns-cta-content p {
max-width: 520px;
margin: 0 0 35px;
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
line-height: 1.8;
}
.campaigns-cta-btn {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 17px 25px;
background: #fff;
color: #171717;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
}
.campaigns-cta-btn i {
transition: transform 0.3s ease;
}
.campaigns-cta-btn:hover {
background: #e8e6e1;
color: #171717;
}
.campaigns-cta-btn:hover i {
transform: translate(3px, -3px);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991.98px) {
.campaigns-hero {
min-height: 600px;
}
.campaigns-intro {
padding: 90px 0 60px;
}
.campaigns-grid-section {
padding-bottom: 90px;
}
.campaigns-cta {
min-height: 500px;
}
}
@media (max-width: 767.98px) {
.campaigns-hero {
min-height: 570px;
}
.campaigns-hero-content {
padding: 70px 0;
}
.campaigns-hero-content h1 {
font-size: 48px;
letter-spacing: -2px;
}
.campaigns-hero-content p {
font-size: 15px;
}
.campaigns-intro {
padding: 70px 0 45px;
}
.campaigns-section-title {
font-size: 40px;
}
.campaigns-intro-text {
margin-top: 15px;
}
.campaigns-filter {
gap: 5px;
}
.campaigns-filter-btn {
padding: 10px 16px;
}
.campaigns-grid-section {
padding-top: 10px;
padding-bottom: 70px;
}
.campaign-card-image,
.campaign-card-large .campaign-card-image {
height: 390px;
}
.campaign-card-content {
padding-bottom: 35px;
}
.campaign-card-content h3 {
font-size: 26px;
}
.campaign-card-arrow {
width: 45px;
height: 45px;
opacity: 1;
transform: none;
}
.campaigns-cta {
min-height: 500px;
}
.campaigns-cta-content {
padding: 70px 0;
}
.campaigns-cta-content h2 {
font-size: 46px;
}
}
@media (max-width: 575.98px) {
.campaigns-hero-content h1 {
font-size: 42px;
}
.campaigns-section-title {
font-size: 36px;
}
}
.sol-cards-wrapper {
display: flex;
flex-wrap: wrap;
margin: 0 -0.5px;
}
.sol-card-inner {
height: 100%;
height: 380px;
position: relative;
}
.sol-card-img {
object-fit: cover;
}
.sol-card-img,
.sol-card-overlay {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%; transition: all .4s ease;
}
.sol-content {
color: #fff;
display: flex;
flex-direction: column;
height: 100%;
justify-content: flex-end;
padding: 25px;
position: relative;
z-index: 2;
transition: all .4s ease;
width: 100%;
bottom: 0;
top: 0;
}
.sol-cards-wrapper * {
color: #fff !important;
cursor: pointer;
transition: all 0.4s ease;
}
.sol-cards-wrapper a:hover {
color: #fff !important;
}
.sol-content-back {
opacity: 0;
position: relative;
transform: translateY(60%);
transition: all .4s ease;
}
.sol-line {
display: none;
background: #fff;
height: calc(100% - 43px);
left: 0;
position: absolute;
width: 1px;
}
.text-description {
line-height: 20px;
overflow: hidden;
line-height: 22px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 10px;
}
.sol-cards:focus .sol-card-overlay,
.sol-cards:hover .sol-card-overlay {
backdrop-filter: blur(17px);
}
.sol-back-inner h4,
.sol-content-front h4 {
color: #fff;
text-transform: capitalize;
font-size: 21px;
}
.sol-back-inner h4 {
margin-bottom: 5px;
}
.sol-content-front {
position: absolute;
transition: all .4s ease;
}
.sol-cards:focus .sol-content-front,
.sol-cards:hover .sol-content-front {
opacity: 0;
}
.sol-cards:focus .sol-content-back,
.sol-cards:hover .sol-content-back {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 767px) {
.sol-content {
padding: 15px;
}
}
@media (max-width: 550px) {
.sol-card-inner {
height: 330px;
}
}
.sol-card-overlay { background:linear-gradient(0deg,rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.20) 100%); }
.sol-cards:hover .sol-card-overlay { background:rgba(0,0,0,0.21); }
.sol-card-overlay { background:linear-gradient(0deg,rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.20) 100%); }
.sol-cards:hover .sol-card-overlay { background:rgba(0,0,0,0.21); }
.sol-cards .sol-card-overlay { background:linear-gradient(0deg,rgba(0,0,0,0.34) 0%,rgba(0,0,0,0.20) 100%); }
.sol-cards:hover .sol-card-overlay { background:rgba(0,0,0,0.21); }
/************************************/
/*** 06. Our Services css ***/
/************************************/
.our-services{
background-image: url('../images/service-bg-image.png');
background-repeat: no-repeat;
background-position: bottom center;
background-size: auto;
padding: 50px 0;
}
.service-item{
position: relative;
background-color: #F3F6FC;
border-radius: 20px;
min-height: 370px;
height: calc(100% - 30px);
margin-bottom: 30px;
padding: 18px 25px;
overflow: hidden;
}
.service-item:before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #F3F6FC;
border-radius: 10px;
width: 100%;
height: 100%;
transition: all 0.1s ease-in-out;
z-index: 1;
}
.service-item.active::before,
.service-item:hover::before{
opacity: 0;
}
.service-item-image{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
transition: all 0.4s ease-in-out;
}
.service-item.active .service-item-image,
.service-item:hover .service-item-image{
opacity: 1;
}
.service-item-image::after{
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient( to top , #023047 ,#023047e5, #0000);
background: linear-gradient( to top , #000000f0 ,#000000b0, #0000);
}
.svc-models .service-item-image:after {
background: linear-gradient( to top , #000c , #0001);
}
.service-item-image figure{
display: block;
height: 100%;
}
.service-item-image figure img{
width: 100%;
height: 100%;
object-fit: cover;
}
.service-item-content-box{
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: end;
gap: 30px;
z-index: 2;
}
.service-item-header{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
transition: all 0.4s ease-in-out;
}
.service-item.active .service-item-header{
border-color: #FFFFFF1A;
}
.service-item:hover .service-item-header{
border-color: #FFFFFF1A;
}
.service-item-title h2{
font-size: 20px;
line-height: 1.3em;
transition: all 0.4s ease-in-out;
text-transform: capitalize;
max-width: 310px;
text-align: center;
margin: 0 auto 10px;
}
.service-item.active .service-item-title h2{
color: #FFFFFF;
}
.service-item:hover .service-item-title h2{
color: #FFFFFF;
}
.service-item-title h2 a{
color: inherit;
}
.service-item-no{
font-size: 14px;
margin-bottom: 10px;
background: #fff3;
padding: 4px 15px;
border-radius: 25px;
}
.service-item-no h3{
font-size: 20px;
transition: all 0.4s ease-in-out;
}
.service-item.active .service-item-no h3{
color: #FFFFFF;
}
.service-item:hover .service-item-no h3{
color: #FFFFFF;
}
.service-item-content p{
transition: all 0.4s ease-in-out;
}
.service-item-content p:last-child{
margin-bottom: 0;
}
.service-item.active .service-item-no{
color: #FFFFFF;
}
.service-item.active .service-item-content p{
color: #FFFFFF;
}
.service-item:hover .service-item-content p{
color: #FFFFFF;
}
.service-item .icon-box{
position: relative;
height: 80px;
width: 80px;
background: #219EBC;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.service-item.active .icon-box {
background: #FFFFFF;
}
.service-item:hover .icon-box {
background: #FFFFFF;
}
/*
.service-item .icon-box::before{
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: var(--white-color);
border-radius: 10px;
width: 100%;
height: 100%;
transform: scale(0);
transition: all 0.4s ease-in-out;
z-index: 0;
}
.service-item:hover .icon-box::before,
.service-item.active .icon-box::before{
transform: scale(1);
}*/
.service-item .icon-box img{
position: relative;
width: 100%;
max-width: 50px;
transition: all 0.4s ease-in-out;
z-index: 1;
filter: brightness(100) invert(1);
}
.service-item:hover .icon-box img,
.service-item.active .icon-box img{
filter: brightness(100) invert(0);
}
.image-pro img {
border-radius: 8px;
width: 100%;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
background:#fff;
margin-bottom: 25px;
aspect-ratio: 1 / 1;
}
.gallery-block img {
height: 200px;
width: 100%;
object-fit: cover;
border-radius: 12px;
}
/*======================
List Style One
======================*/
.inner-column {
position: relative;
margin-bottom: 30px;
}
.inner-column li {
position: relative;
padding-left: 21px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 8px;}
.inner-column li strong {
font-weight: 600;
color: #000;
margin-bottom: 2px;
}
.inner-column li:hover .icon {
-webkit-transform: scale(-1) rotate(-180deg);
transform: scale(-1) rotate(-180deg);
}
.inner-column li:after {
position: absolute;
left: 0;
top: 0;
color: #000;
font-size: 11px;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
content:"\f111"; font-family: "Font Awesome 5 Pro";
}
/*
.inner-column li:nth-child(4n+2):after {
background-color: #ef5c72;
}
.inner-column li:nth-child(4n+3):after {
background-color: #7054e6;
}
.inner-column li:nth-child(4n+4):after {
background-color: #f89321;
}*/
.inner-column ul {
margin: 10px 0;
display: inline-block;
width: 100%;
}
/*
.about-section .sec-title h2:after {
left: 0;
bottom: -5px;
right: auto;
}
.about-section .sec-title h2:before {
left: 0;
right: auto;
}*/
.about-section .sec-title p {
}
.inner-column strong {
color: #000;
}
.head-form {
margin-bottom:10px;
font-size:28px;
font-weight: normal;
position: relative;
text-transform: capitalize;
}
.part-box .img-box {
display: flex;
justify-content: center;
width: 100%;
height: 250px;
align-items: center;
background: #fff;
margin: 8px 0;
border: 1px solid #eee;
}
.part-box {
overflow: hidden;
background: #fff;
}
.part-box .img-box img {
width: auto;
max-width: 90%;
max-height: 250px;
margin: 0 auto;
display: block;
}
.part-box h5 a {
color: #000;
text-transform: capitalize;
}
.part-box h5 {
font-size: 15px;
text-align: center;
margin: 0;
padding: 14px 5px;
text-transform: capitalize;
}
/***************************/
.section-team {
padding: 50px 0 0;
}
.team-member-slid .team-body-slid {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
background: linear-gradient(to top , #000c, #0000);
background: linear-gradient(to bottom,rgba(30,30,30,0) 0%,rgba(30,30,30,0) 30%,rgba(30,30,30,.8) 100%);
top: 0;
display: grid;
align-items: end;
}
.section-title-bottom {
margin-bottom: 50px;
}
.pt-8.projects {
margin-top: 60px;
}
.team-member-slid {
position: relative;
}
.team-image-slid img {
width: 100%;
height: 100vh;
object-fit: cover;}
.team-content-slid h3 {
font-size: 40px;
letter-spacing: 1px;
color: #fff;
font-weight: 200;
text-transform: capitalize;}
.team-content-slid p {
color: #fff;
text-transform: capitalize;
font-size: 18px;
letter-spacing: 1px;}
.pets-nutrition {
line-height: 1.8;
font-size: 16px;
}
.pets-nutrition p {
margin: 0 0 20px;
}
.pets-nutrition strong {
font-weight: 700;
}
.pets-nutrition ul {
margin: 0 0 25px;
padding-left: 20px;
}
.pets-nutrition li {
margin-bottom: 10px;
line-height: 1.7;
}
.pets-nutrition li strong {
font-weight: 700;
}
.dettagli ul li {
overflow: hidden;
margin-bottom: 20px;
}
.dettagli ul li .left {
font-weight: 500;
}
.dettagli ul li div {
width: 50%;
float: left;
}
.dettagli ul li div {
width: 50%;
float: left;
}
.dettagli ul li .left .extra {
font-weight: 300;
text-transform: uppercase;
}
.dettagli ul li .right {
font-weight: 300;
}
.descrizione {
padding-left: 50px;
}
.descrizione h2 {
margin-bottom: 35px;
line-height: 1.1;
font-size: 60px;
line-height: 70px;
letter-spacing: 0;
font-weight: 300;
}
.btn.show-all {
width: 100%;
margin-bottom: 23px;
border: 1px solid;
border-radius: 0;}
.content-sli {
position: absolute;
top: 0;
left: 0;
z-index: 9;
width: 100%;
display: flex;
align-items: center;
height: 100%;
padding-top:50px;
}
.content-sli h3 {
color: #fff;
font-weight: 400;
font-size: 16px;
text-transform: capitalize;
text-transform: uppercase;
color: #d4d4d4;
}
/*
.content-sli h2 {
margin: 35px 0;
color: #fff;
font-weight: 400;
font-size: 98px;
text-transform: capitalize;
letter-spacing: 1px;
line-height: 90px;
}
*/
.content-sli .text p,
.content-sli .text {
color: #fff;
font-weight: normal;
text-transform: capitalize;
line-height: 20px;
color: #d4d4d4;
font-size: 13px;
margin-bottom: 30px;
}
.content-sli .text {
}
.sli-tex {
max-width: 700px;
}
.sli-readmore {
padding-bottom: 0px;
display: inline-flex;
align-items: center;
gap: 70px;
justify-content: space-between;
font-weight: 500;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
color: #d4d4d4;
min-width: 180px;
}
.sli-readmore i {
font-size: 11px;}
.sli-readmore.slidark {
color: #000;
border-color: #999;
}
.sli-readmore.slidark:after {
background-color: #999;
}
.sli-readmore.slidark i {
color: #6a6a6a;
}
/* Rest Styles for the section */
.custom-about-section {
width: 100%;
padding: 0 0 40px;
display: flex;
justify-content: center;
align-items: center;
}
.custom-about-container {
/* max-width: 1400px;*/
width: 100%;
display: flex;
min-height: 480px;
overflow: hidden;
}
/* الجانب الأيسر - الكارت الأبيض */
.custom-about-content {
flex: 0 0 38%;
background-color: #e5e4e0;
padding: 40px 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 2;
}
.custom-about-subtitle {
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: #2b2b2b;
font-weight: 500;
margin-bottom: 0;
display: block;
}
.custom-about-title p,
.custom-about-title {
font-size: 40px;
color: #111;
font-weight: 400;
overflow: hidden;
line-height: 45px;
text-transform: capitalize;
}
.custom-about-title p {
margin: 0;
}
.custom-about-description {
font-size: 14px;
line-height: 1.4;
color: #000;
max-width: 80%;
font-weight: 400;
}
.custom-about-btn {
display: inline-flex;
align-items: center;
gap: 15px;
text-decoration: none;
color: #111;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
border-bottom: 1px solid #111;
padding-bottom: 8px;
width: fit-content;
transition: opacity 0.3s ease;
}
.custom-about-btn:hover {
opacity: 0.7;
}
.custom-about-arrow {
width: 18px;
height: 18px;
transition: transform 0.3s ease;
}
.custom-about-btn:hover .custom-about-arrow {
transform: translateX(5px);
}
/* الجانب الأيمن - السلايدر */
.custom-about-slider-wrapper {
flex: 0 0 62%;
position: relative;
overflow: hidden;
}
.custom-about-swiper {
width: 100%;
height: 100%;
}
.custom-about-swiper .swiper-slide {
width: 100%;
height: 100%;
}
.custom-about-swiper .swiper-slide img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}
/* Responsive Styles */
@media (max-width: 992px) {
.custom-about-container {
flex-direction: column;
}
.custom-about-content {
flex: 0 0 100%;
gap: 8px;
padding: 20px 15px;
}
.custom-about-slider-wrapper {
flex: 0 0 100%;
height: 400px;
}
.custom-about-title p,
.custom-about-title {
font-size: 20px;
line-height: 29px;
}
.custom-about-title br {
display: none;
}
.custom-about-swiper .swiper-slide img {
height: 300px;
}
}
.custom-projects-section {
width: 100%;
padding-bottom: 40px;
color: #fff;
}
.custom-projects-container {
max-width: 1500px;
margin: 0 auto;
}
/* Header Styling */
.custom-projects-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
}
.custom-projects-subtitle {
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: #a0a0a0;
font-weight: 400;
}
.custom-projects-all-btn {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #ffffff;
font-size: 12px;
font-weight: 500;
letter-spacing: 1.5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
padding-bottom: 4px;
transition: opacity 0.3s ease;
}
.custom-projects-all-btn:hover {
opacity: 0.7;
}
.custom-projects-arrow {
width: 16px;
height: 16px;
}
/* Swiper Container */
.custom-projects-main-swiper {
width: 100%;
overflow: hidden;
}
.custom-project-card {
display: flex;
flex-direction: column;
}
/* Inner Image Slider */
.custom-project-img-wrapper {
width: 100%;
height: 320px;
border-radius: 2px;
overflow: hidden;
margin-bottom: 20px;
background-color: #1a1a1a;
}
.custom-project-inner-swiper {
width: 100%;
height: 100%;
}
.custom-project-inner-swiper .swiper-slide {
width: 100%;
height: 100%;
}
.custom-project-inner-swiper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.custom-project-info {
display: flex;
justify-content: space-between;
}
/* Project Info Styling */
.custom-project-title {
font-size: 20px;
font-weight: 400;
color: #ffffff;
margin-bottom: 0;
text-transform: capitalize;
}
.custom-project-meta {
display: flex;
justify-content: space-between;
gap: 5px;
align-items: center;
}
.custom-project-meta-item {
font-size: 13px;
color: #777777;
font-weight: 400;
text-transform: capitalize;
}
/* Responsive Grid Adjustments */
@media (max-width: 768px) {
.custom-projects-section {
padding-bottom:20px;
}
.custom-project-img-wrapper {
height: 250px;
margin-bottom: 10px;
}
}
/*
.custom-process-section {
width: 100%;
background-color: #e6e5e1;
padding: 50px 0;
color: #111111;
}
.custom-process-container {
max-width: 1400px;
margin: 0 auto;
}
.custom-process-subtitle {
display: block;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: #666666;
font-weight: 500;
margin-bottom: 50px;
}
.custom-process-steps {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: 20px;
gap: 30px;
}
.custom-process-step {
flex: 1;
max-width: 220px;
}
.custom-process-number {
display: block;
font-size: 14px;
font-weight: 500;
color: #222222;
margin-bottom: 6px;
}
.custom-process-title {
font-size: 16px;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #111111;
margin-bottom: 13px;
}
.custom-process-desc {
font-size: 17px;
color: #333;
font-weight: 400;
margin: 0;
line-height: 1.4;
}
.custom-process-line {
height: 1px;
background-color: #888888;
flex: 0 0 100px;
margin-top: 25px;
align-self: flex-start;
}
*/
.custom-process-section {
width: 100%;
background-color: #e6e5e1;
padding: 50px 0;
color: #111111;
}
.custom-process-container {
max-width: 1400px;
margin: 0 auto;
}
.custom-process-subtitle {
display: block;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: #666666;
font-weight: 500;
margin-bottom: 50px;
}
.custom-process-steps {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: 20px;
gap: 30px;
}
.custom-process-step {
flex: 1;
width: 190px;
min-width: 190px;
max-width: 190px;
}
/* =========================================
NUMBER + TITLE
========================================= */
.custom-process-heading {
display: block;
opacity: 0;
transform: translateY(35px);
}
/* =========================================
NUMBER
========================================= */
.custom-process-number {
display: block;
font-size: 14px;
font-weight: 500;
color: #222222;
margin-bottom: 6px;
}
/* =========================================
TITLE
========================================= */
.custom-process-title {
font-size: 16px;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #111111;
margin-bottom: 13px;
}
/* =========================================
DESCRIPTION
========================================= */
.custom-process-desc {
font-size: 17px;
color: #333;
font-weight: 400;
margin: 0;
line-height: 1.4;
opacity: 0;
transform: translateY(35px);
}
/* =========================================
ACTIVE STEP
========================================= */
.custom-process-step.is-active .custom-process-heading {
animation: processContentReveal 0.8s cubic-bezier(.22, 1, .36, 1) forwards;
}
.custom-process-step.is-active .custom-process-desc {
animation: processContentReveal 0.8s cubic-bezier(.22, 1, .36, 1) 0.35s forwards;
}
/* =========================================
CONTENT REVEAL
========================================= */
@keyframes processContentReveal {
0% {
opacity: 0;
transform: translateY(35px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================
LINE REVEAL
========================================= */
.custom-process-line {
height: 1px;
background-color: #888888;
width: 0;
flex: 0 0 0;
margin-top: 25px;
align-self: flex-start;
opacity: 1;
}
.custom-process-line.is-active {
animation: processLineReveal 0.8s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes processLineReveal {
from {
width: 0;
flex-basis: 0;
}
to {
width: 100px;
flex-basis: 100px;
}
}
.custom-philosophy-section {
width: 100%;
background-color: #0b0b0b;
background-image: linear-gradient(to right, #0b0b0b 45%, transparent 100%),
url('../images/image_7f206b62.jpg');
background-size: cover;
background-position: center right;
display: flex;
align-items: center;
padding: 50px 0;
color: #ffffff;
}
.custom-philosophy-container {
max-width: 1400px;
width: 100%;
margin: 0 auto;
}
.custom-philosophy-content {
max-width: 500px;
}
.custom-philosophy-subtitle {
display: block;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: #888888;
font-weight: 500;
margin-bottom: 10px;
}
.custom-philosophy-title {
font-size: 38px;
font-weight: 400;
color: #ffffff;
margin-bottom: 0;
line-height: 1.2;
}
@media (max-width: 992px) {
.custom-process-steps {
flex-direction: column;
gap: 30px;
}
.custom-process-step {
max-width: 100%;
width: 100%;
}
.custom-process-title {
font-size: 15px;
line-height: 1;
margin-bottom: 9px;
}
.custom-process-line {
display: none;
}
.custom-process-desc {
font-size: 14px;}
.custom-philosophy-title {
font-size: 22px;
margin-top: 10px;
}
.custom-philosophy-section {
padding: 20px 0;
}
}
/**************/
/*
.custom-nav-link {
position: relative;
opacity: 0;
transform: translateY(-50px);
animation: customNavSlideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: var(--delay);
}
.custom-nav-logo {
opacity: 0;
transform: translateY(-60px);
animation: customNavSlideDown 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: var(--delay);
}
@keyframes customNavSlideDown {
from {
opacity: 0;
transform: translateY(-60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
*/
/************/
.sli-tex h3 {
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #aaaaaa;
font-weight: 500;
margin-bottom: 20px;
opacity: 0;
transform: translateY(15px);
animation: fadeUpStep 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: 0.2s;
}
@keyframes fadeUpStep {
to {
opacity: 1;
transform: translateY(0);
}
}
/*
.sli-tex h2 span {
display: block;
opacity: 0;
clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
animation: revealFromCenter 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.sli-tex h2 span:nth-child(1) { animation-delay: 0.4s; }
.sli-tex h2 span:nth-child(2) { animation-delay: 0.55s; }
@keyframes revealFromCenter {
to {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}*/
/*
.sli-tex h2 {
}
.sli-tex h2 span {
display: block;
overflow: hidden;
vertical-align: bottom;
}
.sli-tex h2 span {
opacity: 0;
transform: translateY(100%);
animation: revealFromBottom 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.sli-tex h2 span:nth-child(1) { animation-delay: 0.4s; }
.sli-tex h2 span:nth-child(2) { animation-delay: 0.55s; }
@keyframes revealFromBottom {
0% {
opacity: 0;
transform: translateY(100%);
}
20% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
*/
.sli-tex .text p span {
display: block;
overflow: hidden;
opacity: 0;
transform: translateY(100%);
font-size: 14px;
line-height: 1.6;
color: #cccccc;
animation: lineByLine 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.sli-tex .text p span:nth-child(1) { animation-delay: 0.75s; }
.sli-tex .text p span:nth-child(2) { animation-delay: 0.9s; }
@keyframes lineByLine {
to {
opacity: 1;
transform: translateY(0);
}
}
.sli-readmore {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #ffffff;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
position: relative;
padding-bottom: 8px;
overflow: hidden;
}
/* البوردر يكبر من المنتصف لـ 100% */
.sli-readmore::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 100%;
height: 1px;
background-color: #ffffff;
transform: translateX(-50%) scaleX(0);
animation: borderExpandCenter 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: 1.1s;
}
@keyframes borderExpandCenter {
to {
transform: translateX(-50%) scaleX(1);
}
}
/* التكست يظهر لفوق البوردر */
.sli-readmore .btn-text {
display: inline-block;
opacity: 0;
transform: translateY(15px);
animation: textSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: 1.3s;
}
@keyframes textSlideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* الأرو أيكون يظهر من الشمال لليمين */
.sli-readmore .btn-icon {
display: inline-block;
opacity: 0;
transform: translateX(-20px);
animation: arrowSlideRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: 1.45s;
}
@keyframes arrowSlideRight {
to {
opacity: 1;
transform: translateX(0);
}
}
.reveal-title {
overflow: hidden;
margin: 35px 0;
color: #fff;
font-weight: 400;
font-size: 98px;
text-transform: capitalize;
letter-spacing: 1px;
line-height: 90px;
}
.reveal-title span {
display: block;
transform: translateY(110%);
opacity: 0;
animation: revealTitle 1s cubic-bezier(.77, 0, .175, 1) forwards;
}
.reveal-title span:nth-child(2) {
animation-delay: 0.15s;
}
@keyframes revealTitle {
from {
transform: translateY(110%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.atl-about{
padding:110px 0;
}
.atl-strip{
position:relative;
padding:70px 0;
}
.atl-strip + .atl-strip{
border-top:1px solid #e6e6e6;
}
.atl-ghost-num{
font-family:'Anton', sans-serif;
font-size:clamp(120px, 16vw, 260px);
line-height:1;
color:#f2f2f0;
position:absolute;
top:-30px;
z-index:0;
user-select:none;
pointer-events:none;
}
.atl-strip--left .atl-ghost-num{ right:0; }
.atl-strip--right .atl-ghost-num{ left:0; }
.atl-strip-inner{
position:relative;
z-index:1;
}
.atl-strip-photo{
width:100%;
aspect-ratio:4/5;
overflow:hidden;
}
.atl-strip-photo img{
width:100%; height:100%;
object-fit:cover;
filter:grayscale(100%);
display:block;
}
.atl-strip-label{
font-size:14px;
font-weight:600;
color:#000;
margin-bottom:14px;
}
.atl-strip-title{
font-family:'Anton', sans-serif;
font-weight:400;
font-size:clamp(26px, 3vw, 40px);
text-transform:uppercase;
line-height:1.08;
margin-bottom:20px;
max-width:520px;
}
.atl-strip-text{
font-size:15.5px;
line-height:1.75;
color:#4c4c4c;
max-width:480px;
}
/* ===================== VISION / MISSION ===================== */
.atl-vm{
padding-bottom:110px;
}
.atl-vm-panel{
position:relative;
min-height:380px;
display:flex;
align-items:flex-end;
overflow:hidden;
}
.atl-vm-panel--photo img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
filter:grayscale(100%);
z-index:0;
}
.atl-vm-panel--photo::after{
content:"";
position:absolute; inset:0;
background:rgba(0,0,0,0.68);
z-index:1;
}
.atl-vm-panel--paper{
background:#ffffff;
border:1px solid #000000;
}
.atl-vm-body{
position:relative;
z-index:2;
padding:40px;
}
.atl-vm-panel--photo .atl-vm-body{ color:#ffffff; }
.atl-vm-panel--paper .atl-vm-body{ color:#0a0a0a; }
.atl-vm-tag{
font-size:13px;
font-weight:600;
opacity:0.7;
margin-bottom:12px;
display:block;
}
.atl-vm-heading{
font-family:'Anton', sans-serif;
font-weight:400;
font-size:26px;
text-transform:uppercase;
margin-bottom:14px;
}
.atl-vm-text{
color: #eee;
}
.atl-vm-panel--photo .atl-vm-text{ color:#dcdcdc; }
.atl-vm-panel--paper .atl-vm-text{ color:#525252; }
/* ===================== STATS — badge row ===================== */
.atl-stats{
padding:0 0 110px;
}
.atl-stat-badge{
text-align:center;
}
.atl-stat-circle{
width:128px;
height:128px;
border:1px solid #000;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 16px;
}
.atl-stat-num{
font-family:'Anton', sans-serif;
font-weight:400;
font-size:30px;
}
.atl-stat-lbl{
font-size:13px;
color:#6a6a6a;
}
/* ===================== WHY WE'RE DIFFERENT ===================== */
.atl-why-head{
margin-bottom:60px;
}
.atl-why-eyebrow{
font-size:14px;
color:#9a9a9a;
display:block;
margin-bottom:10px;
}
.atl-why-title{
font-family:'Anton', sans-serif;
font-weight:400;
font-size:clamp(30px, 3.6vw, 50px);
text-transform:uppercase;
max-width:720px;
line-height:1.05;
}
.atl-why-card{
border:1px solid #2b2b2b;
padding:36px 30px;
height:100%;
transition:background 0.25s ease, border-color 0.25s ease;
}
.atl-why-card:hover{
background:#ffffff;
border-color:#ffffff;
}
.atl-why-card:hover .atl-why-card-title,
.atl-why-card:hover .atl-why-card-text{ color:#0a0a0a; }
.atl-why-card:hover .atl-why-icon{ background:#0a0a0a; }
.atl-why-card:hover .atl-why-icon svg *{ fill:#ffffff !important; stroke:#ffffff !important; }
.atl-why-icon{
width:56px;
height:56px;
border-radius:50%;
background:#ffffff;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:26px;
}
.atl-why-icon svg{ width:26px; height:26px; }
.atl-why-card-title{
font-size:18px;
font-weight:700;
margin-bottom:8px;
color:#ffffff;
}
.atl-why-card-text{
font-size:14px;
line-height:1.65;
color:#a8a8a8;
margin:0;
}
@media (max-width: 767.98px){
.atl-ghost-num{ display:none; }
}
.about-us{
padding: 60px 0;
position: relative;
z-index: 1;
}
.about-image-box{
background: url('../images/about-image-box-bg-image1.png') no-repeat;
background-position: top 50px right 60px;
background-size: auto;
display: flex;
flex-wrap: wrap;
align-items: end;
margin-right: 15px;
}
.about-us-image-box-1{
width: 30%;
}
.about-us-image-box-1 .about-us-image{
margin-right: -260px;
}
.about-us-image figure{
display: block;
border-radius: 20px;
}
.about-us-image figure img{
width: 100%;
object-fit: cover;
border-radius: 20px;
}
.about-us-image-box-1 .about-us-image figure img{
}
.about-us-image-box-2{
position: relative;
width: 55%;
z-index: 1;
margin-left: auto;
margin-bottom: -90px;
}
.about-us-image-box-2 .about-us-image figure{
border: 6px solid #fff;
}
.about-us-image-box-2 .about-us-image figure img{
border-radius: 20px;
}
.about-experience-item{
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
background: #999;
padding: 25px;
border-radius: 20px;
margin: 45px -110px 45px 30px;
animation: boxmove 3s infinite linear alternate;
z-index: 2;
}
@keyframes boxmove{
50%{
transform: translateX(20px);
}
}
.about-experience-item .icon-box{
position: relative;
height: 60px;
width: 60px;
background: #111;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
overflow: hidden;
}
/*
.about-experience-item .icon-box:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: var(--primary-color);
border-radius: 10px;
width: 100%;
height: 100%;
transform: rotate(180deg) scale(0);
transition: all 0.4s ease-in-out;
z-index: 0;
}
.about-experience-item:hover .icon-box:before{
transform: rotate(0) scale(1);
}*/
.about-experience-item .icon-box img{
position: relative;
width: 100%;
max-width: 30px;
z-index: 1;
}
.about-experience-item-content{
width: calc(100% - 80px);
}
.about-experience-item-content h2{
font-size: 20px;
line-height: 1.4em;
}
.about-us-body{
display: flex;
flex-wrap: wrap;
gap: 10px;
border: 1px solid #000;
border-radius: 20px;
padding: 10px;
}
.about-us-body-image{
width: calc(50% - 5px);
}
.about-us-body-image figure{
height: 100%;
display: block;
border-radius: 10px;
}
.about-us-body-image figure img{
width: 100%;
height: 100%;
aspect-ratio: 1 / 0.52;
object-fit: cover;
border-radius: 10px;
}
.about-us-body-list{
width: calc(50% - 5px);
align-content: center;
padding: 20px;
}
.about-us-body-list ul{
margin: 0;
padding: 0;
list-style: none;
}
.about-us-body-list ul li{
position: relative;
line-height: 1.5em;
margin-bottom: 15px;
padding-left: 25px;
}
.about-us-body-list ul li:last-child{
margin-bottom: 0;
}
.about-us-body-list ul li::before{
content: '\f058';
position: absolute;
font-family: 'Font Awesome 5 Pro';
font-size: 18px;
font-weight: 900;
color: #333;
top: 0;
left: 0;
}
.about-us-footer{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px 40px;
margin-top: 40px;
}
.about-us-author-box{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
}
.about-us-author-image figure{
display: block;
border-radius: 50%;
}
.about-us-author-image figure img{
width: 100%;
max-width: 50px;
}
.about-us-author-content h3{
font-size: 20px;
}
.about-us-author-content p{
line-height: normal;
margin: 5px 0 0;
}
.how-we-work{
padding: 30px 0 50px;
}
.how-we-work-list{
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.how-we-work-item{
width: calc(33.3333% - 25px);
background: #f9f9f9;
padding: 30px;
}
.how-we-work-item .icon-box{
margin-bottom: 30px;
}
.how-we-work-item .icon-box img{
max-width: 60px;
}
.how-we-work-content h3{
font-size: 20px;
text-transform: capitalize;
color: #000;
margin-bottom: 10px;
font-weight: 300;
letter-spacing: 1px;
}
.how-we-work-content p{
color: #444;
margin: 0;
}
.how-work-company-slider{
border-top: 1px solid #FFFFFF1A;
margin-top: 60px;
padding-top: 60px;
}
.how-work-company-slider .company-logo{
text-align: center;
}
.how-work-company-slider .company-logo img{
width: 100%;
max-height: 40px;
}
/*************/
.bottom-content {
margin-left: 15px;
margin-top: 15px;
}
.bottom-content .circle-container-two {
position: relative;
width: 140px;
height: 140px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 1);
background-color: #f9f9f9;
}
.bottom-content .circle-container-two > svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-content .circle-container-two > svg text {
fill: rgba(2, 17, 24, 1);
font-size: 16px;
font-weight: 400;
animation: rotateClockwise 10s linear infinite;
letter-spacing: 1px;
}
.bottom-content .circle-container-two .play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #121211;
display: flex;
align-items: center;
justify-content: center;
}
.bottom-content .circle-container-two .play-icon svg {
fill: rgba(2, 17, 24, 1);
margin-left: 2px;
transition: 0.5s;
}
@keyframes rotateClockwise {
from {
transform: rotate(0deg);
transform-origin: 62.5px 62.5px;
}
to {
transform: rotate(360deg);
transform-origin: 62.5px 62.5px;
}
}
.vision-mission{
padding: 50px 0;
background: #1b1b1b;
}
.vision-mission-box{
display: flex;
flex-wrap: wrap;
gap: 30px 150px;
}
.vision-mission-item{
position: relative;
width: calc(50% - 75px);
}
.vision-mission-item::before{
content: '';
position: absolute;
height: 100%;
width: 1px;
top: 0;
right: -75px;
bottom: 0;
background-color: #EAF0EC;
z-index: 1;
}
.vision-mission-item:nth-child(2n + 2)::before,
.vision-mission-item:last-child::before{
display: none;
}
.vision-mission-item .icon-box{
position: relative;
width: 95px;
height: 95px;
background: #EAF0EC;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.vision-mission-item:hover .icon-box{
background: #333;
}
.vision-mission-item:hover .icon-box:before{
transform: scale(1);
}
.vision-mission-item .icon-box img{
position: relative;
max-width: 36px;
z-index: 1;
transition: all 0.4s ease-in-out;
}
.vision-mission-item:hover .icon-box img{
filter: brightness(0) invert(1);
}
.vision-mission-content h3{
font-size: 27px;
text-transform: capitalize;
margin-bottom: 20px;
color: #fff;
font-weight: 300;
letter-spacing: 2px;
}
.vision-mission-content p{
margin: 0;
}
.partner-logos .logo-box {
display: grid;
align-items: center;
justify-content: center;
height: 110px;
background: #fff;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
box-shadow: 1px 1px 9px #dddddd85;
border-radius: 16px;
overflow: hidden;
}
.partner-logos .logo-box img {
width: auto;
max-width: 95%;
max-height: 90px;
margin: 0 auto;
filter: grayscale(100);
}
.partner-logos .logo-box:hover img {
filter: grayscale(0);
}
.solution-content .text {
overflow: hidden;
line-height: 25px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
height: 75px;
margin-bottom: 14px;
}
.home5-services-section .section-title-5 h2:after {
border: 3px solid #fbfbfb;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home5-services-section {
padding-left: 70px;
padding-right: 70px;
}
}
@media (max-width: 991px) {
.home5-services-section {
padding: 80px 0px;
}
}
.home5-services-section.two {
background-image: unset;
padding: 0;
}
.home5-services-section .solution-card {
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 18px;
padding: 20px;
transition: 0.5s;
box-shadow: 1px 1px 12px #0003;
box-shadow: 1px 1px 12px #00000008;
border: 1px solid #eee; margin-bottom: 15px;
}
@media (max-width: 576px) {
.home5-services-section .solution-card {
padding: 25px 20px;
}
}
.home5-services-section .solution-card .icon svg {
fill: #000;
}
.home5-services-section .solution-card .icon {
margin-bottom: 15px;
position: relative;
}
.home5-services-section .solution-card .icon .icon-bg {
width: 50px;
}
.home5-services-section .solution-card .icon svg {
fill: #000;
}
.home5-services-section .solution-card .solution-content h4 {
margin-bottom: 10px;
display: grid;
align-items: center;
}
.home5-services-section .solution-card .solution-content h4 a {
font-size: 20px;
letter-spacing: 0.02em;
text-transform: capitalize;
color: #000;
transition: 0.5s;
}
@media (max-width: 767px) {
.home5-services-section .solution-card .solution-content h4 a {
font-size: 20px;
}
}
.home5-services-section .solution-card .solution-content h4 a:hover {
color: #000;
}
.home5-services-section .solution-card .solution-content p {
font-weight: 300;
font-size: 14px;
line-height: 30px;
letter-spacing: 0.03em;
margin-bottom: 40px;
}
/*
.home5-services-section .solution-card:hover {
box-shadow: none;
background: #212121;
border-color: #212121;
}
.home5-services-section .solution-card:hover .icon img {
filter: brightness(0) invert(1);
}
.home5-services-section .solution-card:hover .solution-content h4 a {
color: #fff;
}
.home5-services-section .solution-card:hover .solution-content .text {
color: #eee;
}
.home5-services-section .solution-card:hover .primary-btn8 {
color: #eee;
}
*/
.primary-btn8 {
font-size: 14px;
color: #444;}
.btn-lang {
color: #fff;
font-size: 15px;
position: absolute;
right: 55px;
top: 25px;
}
/*****************/
.ek-story-page {
background: #fff;
color: #111111;
overflow: hidden;
}
.ek-story-page * {
box-sizing: border-box;
}
.ek-story-page img {
max-width: 100%;
}
.ek-story-container {
width: min(1320px, calc(100% - 80px));
margin: 0 auto;
}
.ek-story-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
font-size: 13px;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.ek-story-eyebrow:before {
content: "";
width: 34px;
height: 1px;
background: #6a4131;
}
.ek-story-title {
margin: 0;
font-size: clamp(42px, 6vw, 92px);
line-height: .95;
letter-spacing: -4px;
font-weight: 600;
}
.ek-story-text {
margin: 0;
color: #000;
font-size: 16px;
line-height: 1.9;
}
/* ================= HERO ================= */
.ek-story-hero {
position: relative;
min-height: 760px;
display: flex;
align-items: flex-end;
background:
linear-gradient(
90deg,
rgba(0,0,0,.72) 0%,
rgba(0,0,0,.35) 48%,
rgba(0,0,0,.08) 100%
),
url("https://ekelenza-me.com/newdemo3/images/blueprint.png") center/cover no-repeat;
color: #fff;
}
.ek-story-hero:after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to bottom,
transparent 65%,
rgba(0,0,0,.4)
);
pointer-events: none;
}
.ek-story-hero-inner {
position: relative;
z-index: 2;
width: min(1320px, calc(100% - 80px));
margin: 0 auto;
padding: 0 0 90px;
}
.ek-story-hero .ek-story-eyebrow {
color: #fff;
}
.ek-story-hero .ek-story-eyebrow:before {
background: #6a4131;
}
.ek-story-hero-title {
max-width: 950px;
margin: 0;
font-size: clamp(55px, 8vw, 125px);
line-height: .88;
letter-spacing: -6px;
font-weight: 500;
}
.ek-story-hero-title span {
display: block;
}
.ek-story-hero-title .outline {
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,.7);
}
.ek-story-hero-bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-top: 60px;
}
.ek-story-hero-intro {
max-width: 570px;
color: rgba(255,255,255,.78);
font-size: 15px;
line-height: 1.9;
}
.ek-story-scroll {
display: flex;
align-items: center;
gap: 14px;
color: #fff;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
white-space: nowrap;
}
.ek-story-scroll-line {
position: relative;
width: 65px;
height: 1px;
background: rgba(255,255,255,.4);
overflow: hidden;
}
.ek-story-scroll-line:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 25px;
height: 1px;
background: #fff;
animation: ekStoryScroll 2s ease-in-out infinite;
}
@keyframes ekStoryScroll {
0% {
transform: translateX(-30px);
}
50% {
transform: translateX(45px);
}
100% {
transform: translateX(70px);
}
}
/* ================= INTRO ================= */
.ek-story-intro-section {
padding: 150px 0;
}
.ek-story-intro-grid {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 100px;
align-items: start;
}
.ek-story-big-copy {
max-width: 900px;
}
.ek-story-big-copy p {
margin: 0;
font-size: clamp(28px, 3.3vw, 52px);
line-height: 1.25;
letter-spacing: -1.5px;
font-weight: 400;
}
.ek-story-big-copy strong {
font-weight: 600;
}
.ek-story-side-copy {
max-width: 390px;
padding-top: 10px;
}
.ek-story-side-copy p + p {
margin-top: 25px;
}
/* ================= WHAT WE DO ================= */
.ek-story-what {
background: #212121;
padding: 140px 0;
}
.ek-story-section-head {
display: grid;
grid-template-columns: .7fr 1.3fr;
gap: 80px;
margin-bottom: 90px;
}
.ek-story-section-head .ek-story-title {
max-width: 750px;
}
.ek-story-what-content {
max-width: 760px;
}
.ek-story-what-content p {
font-size: 19px;
line-height: 1.9;
color: #5d5d5d;
}
/* ================= VISION / MISSION ================= */
.bef-story-container {
padding: 140px 0 40px;
}
.boor-story-container {
padding-top: 94px;
}
.ek-story-vm {
padding: 0;
}
.ek-story-vm-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.ek-story-vm-card {
position: relative;
padding: 35px;
}
.ek-story-vm-card:first-child {
border-right: 1px solid #eee;
}
.ek-story-vm-icon {
width: 70px;
height: 70px;
margin-bottom: 55px;
object-fit: contain;
}
.ek-story-vm-number {
display: block;
margin-bottom: 18px;
color: #333;
font-size: 11px;
letter-spacing: 2px;
font-weight: 700;
text-transform: uppercase;
position: absolute;
font-size: 60px;
font-weight: bold;
opacity: 0.1;
right: 0;
}
.ek-story-vm-title {
margin: 0 0 15px;
font-size: 38px;
line-height: 1;
font-weight: 400;
}
.ek-story-vm-card p {
max-width: 530px;
color: #333;
font-size: 15px;
line-height: 1.9;
}
/* ================= DIFFERENT ================= */
.ek-story-different {
padding: 40px 0;
background: #111;
color: #fff;
}
.ek-story-different-head {
display: flex;
justify-content: space-between;
gap: 50px;
align-items: flex-end;
margin-bottom: 30px;
}
/*
.ek-story-different-head .ek-story-eyebrow {
color: rgba(255,255,255,.7);
}
*/
.ek-story-different-title {
margin: 0;
letter-spacing: 3px;
font-weight: 300;
text-transform: uppercase;
font-size: 46px;
}
.ek-story-different-title span {
color: #6e6e6e;
}
.ek-story-numbers .ek-story-different-title span {
}
.ek-story-different-intro {
max-width: 500px;
color: rgba(255,255,255,.85);
line-height: 1.8;
}
.ek-story-different-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid rgba(255,255,255,.18);
border-left: 1px solid rgba(255,255,255,.18);
}
.ek-story-different-card {
min-height: 270px;
padding: 45px 40px;
border-right: 1px solid rgba(255,255,255,.18);
border-bottom: 1px solid rgba(255,255,255,.18);
transition: background .5s ease, transform .5s ease;
position: relative;
}
.ek-story-different-card:hover {
background: rgba(255,255,255,.04);
}
.ek-story-different-icon {
width: 48px;
height: 48px;
object-fit: contain;
margin-bottom: 20px;
filter: brightness(0) invert(1);
opacity: .85;
}
.ek-story-different-number {
display: block;
margin-bottom: 14px;
color: #ffffff17;
font-size: 21px;
letter-spacing: 2px;
font-weight: 700;
position: absolute;
right: 12px;
top: 10px;
}
.ek-story-different-card h3 {
margin: 0 0 18px;
font-size: 25px;
font-weight: 400;
}
.ek-story-different-card p {
margin: 0;
max-width: 330px;
color: rgba(255,255,255,.77);
font-size: 14px;
line-height: 1.8;
}
/* ================= NUMBERS ================= */
.ek-story-numbers {
padding: 40px 0;
}
.ek-story-numbers-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 50px;
margin-bottom: 90px;
}
.ek-story-numbers-head h2 {
max-width: 600px;
margin: 0;
font-size: clamp(42px, 5vw, 75px);
line-height: .95;
letter-spacing: -4px;
font-weight: 500;
}
.ek-story-numbers-head p {
max-width: 330px;
margin: 0;
color: #444;
line-height: 1.8;
font-size: 14px;
}
.ek-story-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
.ek-story-stat {
padding: 30px 20px;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
text-align: center;
}
.ek-story-stat-icon {
width: 42px;
height: 42px;
object-fit: contain;
margin-bottom: 40px;
margin: 0 auto 30px;
}
.ek-story-stat-number {
display: flex;
align-items: baseline;
gap: 5px;
margin-bottom: 8px;
font-size:48px;
font-weight: 500;
line-height: 40px;
height: 40px;
justify-content: center;
}
.ek-story-stat-number small {
font-size: 20px;
letter-spacing: 0;
color: #444;
}
.ek-story-stat-label {
color: #333;
font-size: 17px;
text-transform: capitalize;
letter-spacing: 1px;
}
/* ================= CLOSING ================= */
.ek-story-closing {
position: relative;
padding: 70px 0;
display: flex;
align-items: center;
background:
url("../images/br.jpg") center/cover no-repeat;
color: #fff;
z-index: 1;
}
.ek-story-closing:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
background: #000c;
left: 0;
z-index: -1;
}
.ek-story-closing-inner {
position: relative;
z-index: 2;
}
.ek-story-closing h2 {
font-size: 50px;
font-weight: 500;
text-transform: capitalize;
}
.ek-story-closing h2 span {
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,.75);
}
.ek-story-closing p {
max-width: 536px;
margin: 0;
}
/* ================= MOBILE ================= */
@media (max-width: 991px) {
.ek-story-container,
.ek-story-hero-inner {
width: min(100% - 40px, 700px);
}
.ek-story-hero {
min-height: 680px;
}
.ek-story-intro-grid {
grid-template-columns: 1fr;
gap: 45px;
}
.ek-story-section-head {
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 55px;
}
.ek-story-vm-grid {
display: flex;
flex-direction: column;
border: 0;
}
.ek-story-vm-card:first-child {
border-right: 0;
border-bottom: 1px solid #eee;
}
.ek-story-different-grid {
grid-template-columns: repeat(2, 1fr);
}
.ek-story-different-head {
flex-direction: column;
align-items: flex-start;
}
.ek-story-stats {
grid-template-columns: repeat(2, 1fr);
}
.ek-story-numbers-head {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 600px) {
.ek-story-container,
.ek-story-hero-inner {
width: calc(100% - 30px);
}
.ek-story-hero {
min-height: 650px;
}
.ek-story-hero-inner {
padding-bottom: 55px;
}
.ek-story-hero-title {
font-size: 58px;
letter-spacing: -3px;
}
.ek-story-hero-bottom {
flex-direction: column;
align-items: flex-start;
margin-top: 40px;
gap: 25px;
}
.ek-story-intro-section,
.ek-story-what,
.ek-story-different,
.ek-story-numbers {
padding: 20px 0;
}
.ek-story-title {
font-size: 48px;
letter-spacing: -2.5px;
}
.ek-story-different-title {
font-size: 20px;
letter-spacing: 1px;
line-height: 30px;
}
.ek-story-different-card h3 {
font-size: 22px;
}
.ek-story-big-copy p {
font-size: 29px;
letter-spacing: -.8px;
}
.ek-story-vm-card {
padding: 20px 0;
}
.ek-story-vm-icon {
margin-bottom: 40px;
}
.ek-story-different-grid {
grid-template-columns: 1fr;
}
.ek-story-different-card {
min-height: auto;
padding: 18px;
}
.ek-story-different-icon {
margin-bottom: 45px;
}
.ek-story-stats {
grid-template-columns: 1fr 1fr;
}
.ek-story-stat {
min-height: 220px;
padding: 35px 25px;
padding: 12px;
}
.ek-story-closing {
min-height: auto;
padding: 25px 0;
}
.ek-story-closing h2 {
font-size: 32px;
letter-spacing: 0;
}
.ek-story-stat-label {
font-size: 15px;
}
}
root {
background: #fff;
color: #111111;
overflow: visible;
}
.ek-sto-scroll *,
.ek-sto-scroll *:before,
.ek-sto-scroll *:after {
box-sizing: border-box;
}
.ek-sto-scroll img {
display: block;
width: 100%;
}
.story-container {
margin: auto;
}
/* =========================================================
INTRO HEADER
========================================================= */
.ek-sto-scroll-head {
padding: 40px 0;
}
.ek-sto-scroll-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 25px;
font-size: 10px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
}
.ek-sto-scroll-eyebrow:before {
content: "";
width: 35px;
height: 1px;
background: #9c9c9c;
}
.ek-sto-scroll-title {
max-width: 1050px;
margin: 0;
font-size: clamp(55px, 7vw, 105px);
line-height: .9;
letter-spacing: -5px;
font-weight: 400;
}
.ek-sto-scroll-title span {
color: transparent;
-webkit-text-stroke: 1px #000;
}
/* =========================================================
STORY LAYOUT
========================================================= */
/*
.ek-sto-scroll-layout {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
gap: 110px;
align-items: start;
}
.ek-sto-scroll-visual {
position: sticky;
top: 90px;
height: calc(100vh - 140px);
min-height: 600px;
overflow: hidden;
background: #ddd;
}
*/
.ek-sto-scroll-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 110px;
align-items: start;
}
.ek-sto-scroll-visual {
position: sticky;
position: -webkit-sticky;
top: 0;
width: 100%;
min-height: 450px;
overflow: hidden;
align-self: start;
background: #ddd;
height: 100vh;
}
.ek-sto-scroll-steps {
min-width: 0;
padding-bottom: 100px;
}
.ek-story-step {
position: relative;
min-height: 85vh;
display: flex;
align-items: center;
padding: 100px 0;
border-bottom: 1px solid #eee;
}
/* images */
.ek-sto-scroll-image {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transform: scale(1.08);
transition:
opacity .7s ease,
transform 1.2s cubic-bezier(.16,1,.3,1),
visibility .7s ease;
}
.ek-sto-scroll-image.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.ek-sto-scroll-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* image overlay */
.ek-sto-scroll-visual:after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(0,0,0,.02),
rgba(0,0,0,.38)
);
}
/* image caption */
.ek-story-image-caption {
position: absolute;
z-index: 5;
left: 35px;
bottom: 32px;
color: #fff;
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
}
/* counter */
.ek-sto-scroll-counter {
position: absolute;
z-index: 5;
right: 35px;
bottom: 30px;
display: flex;
align-items: center;
gap: 12px;
color: #fff;
font-size: 10px;
letter-spacing: 2px;
}
.ek-sto-scroll-counter-line {
width: 45px;
height: 1px;
background: rgba(255,255,255,.6);
}
/* =========================================================
STORY STEPS
========================================================= */
.ek-story-step:last-child {
border-bottom: 0;
}
/* active marker */
.ek-story-step-content:before {
content: "";
position: absolute;
left: -30px;
top: 50%;
width: 3px;
height: 0;
background: #6a4131;
transform: translateY(-50%);
transition: height .7s cubic-bezier(.16,1,.3,1);
}
.ek-story-step.active .ek-story-step-content:before {
height: 120px;
}
/* content */
.ek-story-step-content {
max-width: 560px;
position: relative;
}
.ek-story-step-number {
display: block;
margin-bottom: 15px;
color: #6a4131;
font-size: 12px;
letter-spacing: 2px;
}
.ek-story-step-title {
margin-bottom: 10px;
font-weight: 400;
font-size: 29px;
text-transform: capitalize;
}
.ek-story-step-title span {
color: #9c9c9c;
}
.ek-story-step-text {
max-width: 500px;
margin: 0;
font-size: 15px;
line-height: 2;
}
.ek-story-step-label {
display: flex;
align-items: center;
gap: 12px;
margin-top: 40px;
letter-spacing: 2px;
text-transform: uppercase;
}
.ek-story-step-label:before {
content: "";
width: 25px;
height: 1px;
background: #6a4131;
}
/* =========================================================
FINAL SECTION
========================================================= */
.ek-sto-scroll-end {
padding: 170px 0;
background: #6a4131;
color: #fff;
}
.ek-sto-scroll-end-inner {
max-width: 1000px;
}
.ek-sto-scroll-end .ek-sto-scroll-eyebrow {
color: rgba(255,255,255,.65);
}
.ek-sto-scroll-end-title {
margin: 0;
font-size: clamp(55px, 7vw, 105px);
line-height: .9;
letter-spacing: -5px;
font-weight: 400;
}
.ek-sto-scroll-end-title span {
display: block;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,.7);
}
.ek-sto-scroll-end-text {
max-width: 540px;
margin: 45px 0 0;
color: rgba(255,255,255,.55);
font-size: 15px;
line-height: 1.9;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width: 991px) {
.ek-sto-scroll-layout {
grid-template-columns:
minmax(0, .9fr)
minmax(0, 1.1fr);
gap: 50px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width: 767px) {
.ek-sto-scroll-head {
padding: 90px 0 60px;
}
.ek-sto-scroll-title {
font-size: 55px;
letter-spacing: -3px;
}
.ek-sto-scroll-layout {
display: block;
}
.ek-sto-scroll-visual {
position: sticky;
top: 0;
z-index: 20;
height: 55vh;
min-height: 390px;
}
.ek-sto-scroll-steps {
position: relative;
z-index: 10;
background: #fff;
}
.ek-story-step {
min-height: auto;
padding: 0 0 30px;
display: block;
}
.ek-story-step:before {
left: 0;
}
.ek-story-step-content {
margin-top: 15px;
padding-left: 25px;
}
.ek-story-step-title {
font-size: 22px;
letter-spacing: 0px;
}
.ek-story-step-label {
margin-top: 15px;
}
.ek-story-step-text {
font-size: 14px;
}
.ek-sto-scroll-end {
padding: 100px 0;
}
.ek-sto-scroll-end-title {
font-size: 55px;
letter-spacing: -3px;
}
}
.solution-item-image img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 18px;
filter: grayscale(100);
transition: all ease-in-out 0.4s;
}
.solution-item-image {
margin-bottom: 20px;}
.solution-card:hover .solution-item-image img {
filter: grayscale(0);
}
.spa-blog {
float: left;
margin: 0 20px 20px 0;
max-width: 450px;}
.spa-blog img {
aspect-ratio: 1 / 1;}
.blog-detailss h2 {
font-size: 34px;
line-height: 41px;
text-transform: capitalize;
}
@media(max-width:991px) {
.custom-process-section,
.campaigns-intro,
.our-team,
.page-project-single,
.process-section,
.section-padding {
padding: 20px 0;
}
.no-desk {
display: block !important;
}
.line-dashed-img {
margin-bottom: 5px;
}
.button-bo {
margin-left: 13px;
font-size: 14px;
margin-bottom: 12px;
}
.button-group-bo {
text-align: left;
margin-bottom: 25px;
}
.process-intro h2,
.section-title .text-anime-style-2 {
font-size: 22px;
line-height: 30px;
}
.post-item-content h3 {
font-size: 17px;
}
.post-featured-image {
margin-bottom: 16px;}
.filter-card {
min-height: auto;
}
.small-description {
-webkit-line-clamp: 3;
height: 63px;}
.step p,
body,
p,
.section-title p {
line-height: 1.5;
font-size: 14px;
font-weight: 300;
}
.accordion-box .accordion .accord-btn h4 {
margin-bottom: 0;
font-size: 16px;
font-weight: 400;}
.filter-card-image img {
height: 270px !important;
}
.step p {
margin-bottom: 10px;
}
.step-number {
top: -55px;
font-size: 106px;
}
.step h3 {
font-size: 23px;
line-height: 35px;
width: 100%;
margin-bottom: 30px;
}
.step {
margin-bottom: 0;}
.urban-cov {
padding-right: 5px;
}
.our-blog {
padding: 0;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area {
width: 100%;
gap: 18px;
border: 0;
margin-bottom: 20px
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact {
justify-content: start;
text-align: left;
}
.footer-links h3 {
font-size: 18px;
}
.footer-section .footer-bottom-wrap .footer-bottom {
justify-content: center;
gap: 15px;
padding-bottom: 0;
}
.colfive {
width: 33.333%
}
.pq-client-grid {
border-bottom: 1px solid #0000001a !important;
border-right: 1px solid #0000001a !important;
}
.our-client .colfive:nth-child(3n) .pq-client-grid,
.our-client .colfive:nth-child(3) .pq-client-grid,
.our-client .colfive:last-child .pq-client-grid {
border-right: 0 !important;
}
.our-client .colfive:last-child .pq-client-grid {
border-top: 1px solid #0000001a !important;
}
.project-detail-list {
flex-direction: column;
gap: 8px;
}
.project-detail-item {
width: 100%;
padding: 15px;
}
.project-detail-content h3 {
line-height: 20px;
}
.som-project-info {
margin: 0 auto 12px;
}
.project-entry h2 {
font-size: 18px;
margin-bottom: 5px;}
.page-header-box {
margin-top: 110px;
}
.head-form,
.page-header-box h1 {
font-size: 20px;
}
.page-header-box p {
font-size: 15px;
display: none;
}
.button-bo::after {
bottom: 0;
}
.vision-mission-box {
gap: 30px;
flex-direction: column;
}
.custom-about-description {
max-width: 100%;
}
.vision-mission-item {
width: 100%;
}
.team-content h3 {
font-size: 17px;}
.team-content p {
font-size: 13px;
}
.team-image figure img {
height: 248px;
}
.campaigns-section-title {
font-size: 20px;
line-height: 1.3;
font-weight: 400;
}
.campaigns-filter-section {
padding-bottom: 5px;
}
.campaigns-filter-btn {
padding: 7px 16px 5px;}
.campaign-card-image,
.campaign-card-large .campaign-card-image {
height: 250px;
}
.campaign-card-content {
padding: 13px 0;
padding-bottom: 0;
}
.campaign-card-content h3 {
font-size: 18px;
font-weight: 400;
margin-bottom: 5px;
}
.sli-tex h3 {
line-height: 1;
}
.content-sli {
padding-top: 120px;
}
.content-sli .text p, .content-sli .text {
margin-bottom: 15px;
}
.reveal-title {
margin: 10px 0;
font-size: 30px;
line-height: 32px;
}
.custom-about-section {
padding: 0 0 30px;
}
.sli-readmore {
min-width: auto;
font-size: 11px;
letter-spacing: 1px;
gap: 5px;
}
.custom-projects-subtitle {
font-size: 14px;
letter-spacing: 1px;}
.no-mob,
.our-client .colfive:nth-child(13),
.our-client .colfive:nth-child(14) {
display: none !important;
}
.custom-projects-header {
margin-bottom: 25px;
}
.custom-project-title {
font-size: 18px;
margin-bottom: 0;
}
.bottom-bar ul {
gap: 5px;
}
.nav-item-bar {
font-size: 11px;
padding: 8px;
}
.bottom-bar {
left: 15px;
right: 15px;
transform: none;
}
.homebody .footer {
height: auto;
padding-bottom: 80px
}
.footer {
height: auto;
padding-bottom: 10px;
}
.how-we-work-list {
gap: 15px;
}
.about-us {
padding: 20px 0;
}
.how-we-work-item {
width: 100%;
padding: 18px;
}
.ek-story-stat-number {
font-size: 38px;
}
.bef-story-container {
padding: 105px 0 20px;
}
.boor-story-container {
padding-top: 86px;
}
.ek-story-step-content::before {
left: 0;
}
.ek-sto-scroll-steps {
padding-bottom: 0;
}
.ek-story-vm-title {
margin: 0 0 10px;
font-size: 22px;}
.ek-story-vm-card {
border: 0;
order: 1;
}
.ek-story-vm-number {
top: 0;
font-size: 40px;
}
.imag-cardd {
padding: 0;
order: 0;
}
.projects .item img {
margin-bottom: 15px;}
.prod-slide .slider-prod .item .wrap {
margin: 0;
}
.corea-padding {
padding: 110px 0 20px;
}
.spa-blog {
float: none;
margin: 0 0 20px 0;
}
.section-title-bottom {
margin-bottom: 20px;
}
.contact-info-box {
flex-direction: column;
}
.section-title h3,
.contact-info-box .section-title .text-anime-style-2, .contact-us-form .section-title .text-anime-style-2 {
font-size: 17px;
}
.custom-process-number {
display: block;
font-size: 14px;
font-weight: 500;
color: #222222;
margin-bottom: 6px;
position: absolute;
left: -40px;
background: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.custom-process-step {
padding-left: 40px;
}
.menu-mobile .logo {
width: 150px;}
}