/* HERO */
.hero {
position: relative;
height: 695px;
max-height: 100vh;
overflow: hidden;
}
.hero .bx-viewport,
.hero .bx-wrapper {
height: 100%!important
}
.hero .heroin {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.hero.aos-animate ul .buttonout,
.hero.aos-animate ul h2,
.hero.aos-animate ul h3 {
opacity: 1
}
.hero .bx-wrapper ul li h3 {
opacity: 0;
-webkit-transform: translateX(0) translateY(100px);
-ms-transform: translateX(0) translateY(100px);
transform: translateX(0) translateY(100px);
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.hero .bx-wrapper ul li h2 {
opacity: 0;
-webkit-transform: translateX(0) translateY(100px);
-ms-transform: translateX(0) translateY(100px);
transform: translateX(0) translateY(100px);
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.hero .bx-wrapper ul li .buttonout {
opacity: 0;
-webkit-transform: translateX(0) translateY(100px);
-ms-transform: translateX(0) translateY(100px);
transform: translateX(0) translateY(100px);
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.hero .bx-wrapper ul li.active-slide .buttonout,
.hero .bx-wrapper ul li.active-slide h2,
.hero .bx-wrapper ul li.active-slide h3 {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px)
}
.hero .bx-wrapper ul li h2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s
}
.hero .bx-wrapper ul li .buttonout {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s
}
.hero ul {
margin: 0;
padding: 0;
height: 100%
}
.hero ul li {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.hero ul li {
height: 100%;
position: relative
}
.hero ul .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat
}
.hero ul .bg:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content:'';
background: rgba(0,0,0,.3);
}
.hero ul .text {
float:left;
width: 100%;
text-align: center
}
.hero ul .texth {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center
}
.hero ul h3 {
font-family: 'HanleyScript';
text-transform: none;
font-weight: normal;
color: #fff;
font-size: 28px;
opacity: 0;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
margin-bottom: 13px;
margin-top:0;
}
.hero ul h3:after,
.hero ul h3:before {
width: 65px;
height: 2px;
content: '';
background: #efa56a;
display: inline-block;
vertical-align: top;
margin: 20px 20px 0 0
}
.hero ul h3:after {
margin-right: 0;
margin-left: 20px
}
.hero ul h2 {
font-size: 61px;
letter-spacing: 1.83px;
color: #fff;
line-height: 1.05;
margin-bottom: 30px;
opacity: 0;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
max-width: 900px;
margin: 0 auto 30px
}
.hero ul .button {
color: #fff;
margin-bottom:0;
}
.hero ul .buttonout {
opacity: 0;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear
}
.hero .bx-pager {
width: 195px;
height: 195px;
background: #fff;
position: absolute;
border-radius: 100%;
top: 100%;
margin-top: -53px;
left: 50%;
transform: translateX(-50%);
-webkit-box-shadow: 0 0 0px 11px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 0px 11px rgba(255, 255, 255, 0.5);
font-size: 0;
text-align: center
}
.hero .bx-pager .bx-pager-item {
display: inline-block;
width: 20px;
padding-top: 25px
}
.hero .bx-pager .bx-pager-item a {
width: 20px;
height: 20px;
position: relative;
display: block;
text-indent: -3000px;
font-size: 0;
overflow: hidden;
overflow: visible
}
.hero .bx-pager .bx-pager-item a:before {
width: 8px;
height: 8px;
background-color: #494949;
position: absolute;
top: 50%;
left: 50%;
margin: -4px 0 0 -4px;
content: '';
display: block;
border-radius: 100%;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear
}
.hero .bx-pager .bx-pager-item a:after {
border: 1px solid #efa56a;
width: 24px;
height: 24px;
position: absolute;
top: 50%;
left: 50%;
margin: -12px 0 0 -12px;
border-radius: 100%;
content: '';
display: block;
border-color: #494949;
-webkit-transform: scale3d(0.1,0.1,0.1);
-ms-transform: scale3d(0.1,0.1,0.1);
transform: scale3d(0.1,0.1,0.1);
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear
}
.hero .bx-pager .bx-pager-item a:hover:before {
background: #efa56a
}
.hero .bx-pager .bx-pager-item a.active:after {
border-color: #efa56a;
-webkit-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
/* VALUES */
h2.sectiontitle {
font-size: 47px;
color: #494949;
letter-spacing: 0.47px;
text-align: center
}
h2.sectiontitle:after {
width: 55px;
height: 4px;
background: #efa56a;
margin: 10px auto 8px;
content: '';
display: block
}
h2.sectiontitle+h4 {
font-family: 'HanleyScript';
text-transform: none;
font-weight: normal;
color: #efa56a;
text-align: center;
font-size: 27px
}
.values > .row {
padding: 30px 0 50px;
overflow: hidden;
max-width: 1000px;
margin: 0 auto
}
.values .bx-viewport {
overflow: visible!important
}
.values .slider {
max-width: 342px;
margin: 0 auto;
position: relative;
margin-top: 30px
}
.values ul {
margin: 0;
padding: 0
}
.values ul li {
list-style: none;
margin: 0;
padding: 0;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.values figure {
width: 322px;
height: 322px;
border-radius: 100%;
margin: 10px auto 20px;
background-position: center;
background-size: cover;
-webkit-box-shadow: 0 0 0 10px #e0e0e0;
box-shadow: 0 0 0 10px #e0e0e0;
background: #e0e0e0;
opacity: 0.5;
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transform: scale3d(0.7,0.7,0.7);
-ms-transform: scale3d(0.7,0.7,0.7);
transform: scale3d(0.7,0.7,0.7);
border-radius: 50%;
overflow: hidden;
}
.values .figurein {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.values .figurein2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-transform: scale3d(2,2,2);
transform: scale3d(2,2,2);
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
border-radius: 50%;
overflow: hidden;
}
.values .i {
display: block;
}
.values li.active-slide .figurein {
-webkit-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
.values li.active-slide .figurein2 {
-webkit-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
.values li.active-slide figure {
opacity: 1;
overflow: hidden;
position: relative;
-webkit-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
.values li {
text-align: center
}
.values li .text {
margin: 0 -70px
}
.values li h3 {
color: #efa56a;
font-size: 34px;
letter-spacing: 1.02px;
-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
opacity:0;
transform: translateX(0) translateY(50px);
transition-delay: 0s;
}
.values li p {
color: #686868;
font-size: 17px;
line-height: 1.5;
-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
margin-bottom: 10px;
opacity:0;
transform: translateX(0) translateY(50px);
transition-delay: 0s;
}
.values li .btnout {
-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
opacity:0;
transform: translateX(0) translateY(50px);
transition-delay: 0s;
}
.values li.inactive h3,
.values li.inactive p,
.values li.inactive .btnout {
transform: translateX(0) translateY(0px);
}
.values .btn {
font-size: 17px;
color: #efa56a;
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2.89px;
}
.values .btn i {
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear
}
.values .btn:hover i {
-webkit-transform: translateX(5px);
-ms-transform: translateX(5px);
transform: translateX(5px);
}
.values ul.texts li.active-slide h3,
.values ul.texts li.active-slide p,
.values ul.texts li.active-slide .btnout {
opacity: 1;
transition-delay: 0s;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px)
}
.values ul.texts li.active-slide p {transition-delay: 0.2s;}
.values ul.texts li.active-slide .btnout {transition-delay: 0.4s;}
.values .bx-next,
.values .bx-prev {
width: 59px;
height: 59px;
display: block;
text-indent: -3000px;
font-size: 0;
overflow: hidden;
position: absolute;
top: 150px;
right: -80px;
border: 2px solid #efa56a;
border-radius: 100%;
}
.values .bx-prev {left:-80px;}
.values .bx-next div,
.values .bx-prev div,
.intheknow .navs .slider-arrow {
width: 59px;
height: 59px;
display: block;
overflow: hidden;
transition: all 0.5s ease;
float:left;
}
.slider-arrow {position: absolute; margin-left:0px; width: 12px; height: 12px; background-size: contain; top:-3px; left:-1px;}
.slider-arrow:nth-child(2){margin-left: 12px;display: none!important}
.values .bx-prev,
.roundtheclock .sliderout .bx-prev,
.intheknow .prev {transform: rotate(180deg);}
@keyframes bounceAlpha {
0% {opacity: 1; transform: translateX(0px) scale3d(1,1,1);}
25%{opacity: 0; transform:translateX(10px) scale3d(0.9,0.9,0.9);}
26%{opacity: 0; transform:translateX(-10px) scale3d(0.9,0.9,0.9);}
55% {opacity: 1; transform: translateX(0px) scale3d(1,1,1);}
}
@keyframes bounceAlpha-r {
0% {opacity: 1; transform: translateX(0px) scale3d(1,1,1);}
25%{opacity: 0; transform:translateX(-10px) scale3d(0.9,0.9,0.9);}
26%{opacity: 0; transform:translateX(10px) scale3d(0.9,0.9,0.9);}
55% {opacity: 1; transform: translateX(0px) scale3d(1,1,1);}
}
.bx-next:hover .slider-arrow,
.bx-prev:hover .slider-arrow,
.intheknow .next:hover .slider-arrow,
.intheknow .prev:hover .slider-arrow{
animation-name: bounceAlpha;
animation-duration:1.2s;
animation-iteration-count:1;
animation-timing-function:linear;
}
.values .bx-next.disabled,
.values .bx-prev.disabled {
opacity: 0.3;
pointer-events: none
}
.values .bx-next div:after,
.values .bx-prev div:after,
.intheknow .navs .slider-arrow:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
background: url(../img/arrow.svg) no-repeat center
}
/*.values .bx-next:hover div:before,
.values .bx-prev:hover div:before {
left: 0;
width: 100%
}
.values .bx-next:hover div:after,
.values .bx-prev:hover div:after {
background: url(../img/arroww.svg) no-repeat center
}*/
/*
.values .bx-next div:nth-child(2),
.values .bx-prev div:nth-child(2) {transform: translateX(-60px);
position: absolute;
top: 0;
left: -60px;}
.values .bx-next:hover div {transform: translateX(60px);}
.values .bx-prev:hover div {transform: translateX(60px);}
.values .bx-prev {
left: -80px;
right: auto;
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1)
}
*/
/* COMPARISON SECTION */
.fromnatureout {
height: 100vh;
padding-top: 100px;
margin-top: -100px;
min-height: 750px
}
.fromnature {
min-height: 650px;
height: 100%;
position: relative;
overflow: hidden
}
.fromnature .fromout {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
width: 50%;
z-index: 1
}
.fromnature.aos-animate .from .bg {
-webkit-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
.fromnature.aos-animate .from:after {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px)
}
.fromnature.aos-animate .to .bg {
-webkit-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
.fromnature.aos-animate .to:after {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px)
}
.fromnature.aos-animate .line .handler {
opacity: 1
}
.fromnature .from {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 100vw
}
.fromnature .from .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
transform: scale3d(1.2,1.2,1.2);
transform-origin: 50% 0;
transition: all 2.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/*
.fromnature .from:after {
background: url(../img/milk_glass.png) no-repeat center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
-webkit-transform: translateY(150px);
-ms-transform: translateY(150px);
transform: translateY(150px);
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
}*/
.fromnature h2 {
position: absolute;
top: 310px;
right: 50%;
margin-right: 220px;
font-size: 47px;
color: #fff;
text-align: right;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);;
white-space: nowrap;
}
.fromnature .from h2 {
margin-right: 270px;
}
.fromnature .from h2.top {
opacity: 0; top: 50px;
}
.fromnature .from.active h2:not(.top) {
opacity: 0;
}
.fromnature .from.active h2.top {
opacity: 1;
}
.fromnature h2 .s {
width: 45px;
height: 4px;
background: #fff;
display: block;
vertical-align: top;
font-size: 10px;
float: right;
margin-bottom: 10px
}
.fromnature h2 span {
display: block;
clear: both;
font-family: 'HanleyScript';
text-transform: none;
font-weight: normal;
font-size: 27px
}
.fromnature .i {
position: absolute;
top: 250px;
right: 50%;
margin-right: 180px;
/*width: 450px;*/
width: 480px;
text-align: right;
padding-right: 100px
}
.fromnature .i .ico {
position: absolute;
top: 0;
right: 0;
width: 77px;
height: 77px;
border: 3px solid #92e2ee;
border-radius: 100%;
text-align: center;
opacity: 0;
transform: translateX(50px) translateY(0);
transition: all .8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.fromnature .i h3 {
font-size: 30px;
color: #fff;
opacity: 0;
transform: translateX(50px) translateY(0);
transition: all .8s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.fromnature .i p {
color: #fff;
font-size: 16px;
opacity: 0;
transform: translateX(50px) translateY(0);
transition: all .8s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.fromnature .i p a {
color:#92e2ee
}
.fromnature .active .i {
opacity: 1
}
.fromnature .active .i .ico,
.fromnature .active .i h3,
.fromnature .active .i p {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px)
}
.fromnature .active .i h3 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s
}
.fromnature .active .i p {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s
}
.fromnature .i3 {
top: 450px
}
.fromnature .i2,
.fromnature .i4 {
right: auto;
left: 50%;
margin-right: auto;
margin-left: 140px;
text-align: left;
padding-right: 0;
padding-left: 100px
}
.fromnature .i2 .ico,
.fromnature .i2 h3,
.fromnature .i2 p,
.fromnature .i4 .ico,
.fromnature .i4 h3,
.fromnature .i4 p {
opacity: 0;
-webkit-transform: translateX(-50px) translateY(0);
-ms-transform: translateX(-50px) translateY(0);
transform: translateX(-50px) translateY(0)
}
.fromnature .i2 .ico,
.fromnature .i4 .ico {
right: auto;
left: 0
}
.fromnature .i4 {
top: 450px
}
.fromnature .to {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #60bdcb;
width: 100vw
}
.fromnature:after {
background: url(../img/milk_glass.png) no-repeat center;
position: absolute;
top: 0;
left: 50%;
width: 300px;
height: 100%;
content: '';
display: block;
transform: translate(-50%,0);
z-index: 2;
}
.fromnature .to h2 {
right: auto;
left: 50%;
text-align: left;
transition: all 0.2s linear;
margin-left: 240px;
white-space: nowrap;
}
.fromnature .to h2 .s {
float: left
}
.fromnature .to h2.top {
opacity: 0; top: 50px;
}
.fromnature .to.active h2:not(.top) {
opacity: 0;
}
.fromnature .to.active h2.top {
opacity: 1;
}
/*
.fromnature .to.active h2 {
opacity: 1;
margin-left: 240px;
top: 50px
}
*/
.fromnature .line {
position: absolute;
top: 0%;
left: 50%;
width: 3px;
height: 100%;
background: #fff;
z-index: 3
}
.fromnature .line .handler {
width: 124px;
height: 55px;
background: url(../img/drag.png) no-repeat;
background-size: contain;
position: absolute;
top: 50%;
left: 50%;
/*margin: -16px 0 0 -43px;*/
transform: translate(-50%,-50%);
opacity: 0;
-webkit-transition: 1s opacity linear;
-o-transition: 1s opacity linear;
transition: 1s opacity linear;
}
.site-2 .fromnature .line .handler {background-image: url(../img/drag-es.png); }
/* DO MORE BLOCK */
.domore {
overflow: hidden;
padding: 35px 0 130px
}
.domore h2.sectiontitle:after {
background: #64bfc9
}
.domore h2.sectiontitle+h4 {
color: #64bfc9
}
.domore .cleanser {
position: relative;
height: 710px;
max-width: 1188px;
margin: 0 auto;
margin-top: 30px
}
.domore .cleanser .i1 {
width: 432px;
height: 456px;
position: absolute;
left: 0;
background: #d6f0f1;
top: 130px;
height: 350px;
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transform: translateY(150px);
-ms-transform: translateY(150px);
transform: translateY(150px)
}
.domore .cleanser .i1 .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s
}
.domore .cleanser .badge {
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transform: translateY(-150px);
-ms-transform: translateY(-150px);
transform: translateY(-150px);
border: 3px solid #494949;
width: 254px;
height: 254px;
position: absolute;
top: 0;
margin: -127px 0 0 -127px;
left: 50%;
border-radius: 100%;
text-align: center;
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2.07px;
font-size: 23px;
line-height: 28px;
padding-top: 40px;
color:#494949;
}
.domore .cleanser .badge span,
.domore .cleanser .badge strong {
width: 183px;
height: 80px;
background: url(../img/milk.png) no-repeat;
margin: 10px auto 10px;
display: block;
text-indent: -3000px;
font-size: 0;
overflow: hidden
}
.site-2 .domore .cleanser .badge span,
.site-2 .domore .cleanser .badge strong {background: url(../img/leche.png) no-repeat;}
.domore .cleanser .text {
position: absolute;
width: 100%;
left: 0;
top: 100%;
margin-top: -25px;
text-align: center;
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
opacity: 0;
-webkit-transform: translateX(0) translateY(100px);
-ms-transform: translateX(0) translateY(100px);
transform: translateX(0) translateY(100px);
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s
}
.domore .cleanser .text .title {
color: #64bfc9;
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold;
font-size: 37px
}
.domore .cleanser .text p {
font-size: 19px;
line-height: 1.3;
color: #686868
}
.domore .cleanser .i2 {
height: 710px;
position: relative;
width: 657px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
.domore .cleanser .i2 .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.domore .cleanser .i2 .bg .img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 2.5s cubic-bezier(0.165, 0.84, 0.44, 1);
background-position: top;
background-repeat:no-repeat;
background-size: cover;
transform: scale3d(1.6,1.6,1.6);
}
.domore .cleanser .watch {
width: 132px;
height: 132px;
border-radius: 100%;
background: #64bfc9;
position: absolute;
top: 50%;
right: 100%;
margin: -56px -66px 0 0;
text-align: center;
color: #fff;
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold;
padding-top: 45px;
-webkit-box-shadow: 0 0 0 10px rgba(100, 191, 201, 0.3);
box-shadow: 0 0 0 10px rgba(100, 191, 201, 0.3)
}
.domore .cleanser .watch span {
position: relative;
z-index: 1
}
.domore .cleanser .watch:after {
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
background: #429da7;
border-radius: 100%;
content: '';
display: block;
-webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
position: absolute
}
.domore .cleanser .watch:hover:after {
top: 0%;
right: 0%;
bottom: 0%;
left: 0%
}
.domore .cleanser .watch:before {
display: block;
height: 17px;
background: url(../img/play.svg) no-repeat center;
content: '';
margin-bottom: 5px;
z-index: 1;
position: relative
}
.domore.aos-animate .cleanser .i1 {
height: 456px;
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px)
}
.domore.aos-animate .cleanser .i1 .bg {
opacity: 1;
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px)
}
.domore.aos-animate .cleanser .i1 .badge {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px)
}
.domore.aos-animate .cleanser .i1 .text {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px)
}
.domore.aos-animate .cleanser .i2 .bg .img {
transform: scale3d(1,1,1);
}
.domore.aos-animate .cleanser .i2 .bg .img.out {
transition: none;
}
/* INSTAGRAM */
.tweets {
padding-bottom: 120px
}
.tweets .tweet {
-webkit-box-shadow: 0 0 9px rgba(0, 0, 0, 0.13);
box-shadow: 0 0 9px rgba(0, 0, 0, 0.13);
background: #fff;
position: relative;
padding: 30px 30px 0px 346px;
height: 324px
}
.tweets .tweet figure {
position: absolute;
top: 0;
left: 0;
width: 325px;
height: 324px;
overflow: hidden;
}
.tweets .tweet figure iframe {margin-top:-55px!important;}
.tweets .tweet figure a {
display: block;
background: #64bfc9;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden
}
.tweets .tweet figure a img {
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear
}
.tweets .tweet figure a:hover img {
opacity: 0.7;
-webkit-transform: scale3d(1.1,1.1,1.1);
-ms-transform: scale3d(1.1,1.1,1.1);
transform: scale3d(1.1,1.1,1.1)
}
.tweets .tweet p {
color: #686868;
font-size: 19px;
line-height: 1.3;
margin-bottom: 20px
}
.tweets .tweet p strong {
color: #64bfc9
}
.tweets .tweet .reply {
position: relative;
padding-left: 80px;
padding-top: 10px;
font-size: 15px;
margin-bottom: 10px
}
.tweets .tweet .reply .name {
color: #64bfc9;
font-weight: bold
}
.tweets .tweet .reply p {
font-size: 15px
}
.tweets .tweet .reply .avatar {
position: absolute;
width: 62px;
height: 62px;
top: 0;
left: 0;
border: 2px solid #64bfc9;
background-position: center;
background-size: cover;
border-radius: 100%
}
.tweets .row {display: flex;}
.tweets .row .columns.medium-5 {display: flex;align-items: center;}
.tweets .hashtag {
width:100%;
text-align: center;
color: #494949;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
opacity: 0;
-webkit-transform: translateX(0) translateY(100px);
-ms-transform: translateX(0) translateY(100px);
transform: translateX(0) translateY(100px)
}
.tweets .hashtag i {
font-size: 32px
}
.tweets .hashtag h2 {
font-size: 47px;
color:#494949;
letter-spacing: 0.47px
}
.tweets .hashtag p {
font-size: 19px;
letter-spacing: 0.19px;
line-height: 140%
}
.tweets .hashtag .button {margin-bottom:0}
.tweets.aos-animate .hashtag {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px)
}
/* IQ SECTION */
.iqout {
height: 100vh;
padding-top: 100px;
margin-top: -100px;
min-height: 750px
}
.iq {
height: 100%;
min-height: 650px
}
.iq .row {
max-width: 100%;
height: 100%
}
.iq .row .columns {
height: 100%
}
.iq .i {
display: block;
position: relative;
height: 50%;
overflow: hidden
}
.iq .i .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
transform: scale3d(1.2,1.2,1.2);
transition: all .8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.iq.aos-animate .i.not-hovered .bg {
transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.iq.aos-animate .i .bg {
transform: scale3d(1,1,1);
}
.iq .i .text {
position: absolute;
bottom: 40px;
left: 45px;
color: #fff;
padding-right:20px;
max-width:60%;
z-index: 1;
}
.iq .i .bg:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content:'';
background: rgba(0,0,0,.4);
z-index: 0;
}
.iq .i .button {
color: #fff; margin-bottom:0;
}
.iq .i h3 {
font-size: 33px;
color: #fff;
line-height: 1.2;
margin: 0 0 3px;
letter-spacing: 1px
}
.iq .i p {
font-size: 16px;
margin-bottom:1rem;
}
.iq .i.hover .bg {
transition-delay:0s;
-webkit-transform: scale3d(1.2,1.2,1.2);
-ms-transform: scale3d(1.2,1.2,1.2);
transform: scale3d(1.2,1.2,1.2)
}
.iq .iqin {
height: 100%;
background: #e5776a;
text-align: center;
position: relative;
display: flex;
align-items: center;
}
.iq .iqin .iqin2 {
width: 100%;
padding: 0 70px 0
}
.iq .iqin .iqin2.nopad {
padding-top: 0
}
.iq .iqin h2 {
color: #fff;
font-size: 60px
}
.iq:not(.iq--calculator) .iqin h2 {margin-bottom:20px;}
.iq--calculator .iqin h2 {font-size: 54px;letter-spacing: 0.47px;
text-align: center;}
.iq .iqin h2:after {
width: 55px;
height: 4px;
background-color: #ffd2cd;
display: block;
margin: 10px auto 8px;
content: ''
}
.iq .iqin h4 {
color: #fff
}
.iq--calculator .iqin h4 {font-family: 'HanleyScript';
text-transform: none;
font-weight: normal;
font-size: 30px;
line-height: 1.2}
.iq .q {
font-size: 28px;
color: #fff;
line-height: 1.4;
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold;
margin-bottom: 30px;
max-width: 520px;
margin-left: auto;
margin-right: auto;
letter-spacing: 1px
}
.iq .q strong {
font-family: 'HanleyScript';
text-transform: none;
font-weight: normal;
font-size: 55px;
color:#fcc7c5;
display: block;
line-height: 1;
margin-bottom:15px;
}
.iq .q br {display: none;}
.iq .q p {
display: inline;
font-size: 28px;
color: #fff;
line-height: 1.4;
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px
}
.iq .q span, .iq .q a {
color: #ffd2cd
}
.iq .choices .choice,
.close-incorrect {
width: 231px;
height: 54px;
border: 3px solid #ffffff;
display: block;
margin-bottom: 15px;
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold;
font-size: 23px;
color: #fff;
letter-spacing: 2.07px;
padding-top: 7px;
margin: 0 auto 15px;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
.iq .choices .choice.blocked {cursor: default}
.iq .choices.finished .choice:not(.active) {opacity: .5}
.iq .choices .choice:not(.blocked):hover,
.iq .choices .choice.active,
.close-incorrect:hover {
background-color: #ffb3aa;
color: #c1655a
}
.iq .choices .choice.active {background: #fff;}
.iq .iqsteps {
background: #d06d61;
width: 440px;
height: 440px;
border-radius: 100%;
text-align: center;
margin: 30px auto;
position: relative;
overflow: hidden
}
.iq .iqsteps ul {
margin: 0;
padding: 0
}
.iq .iqsteps ul li {
list-style: none;
margin: 0;
padding: 0
}
.iq .iqsteps ul li {
padding-top: 80px
}
.iq .iqsteps .i {
padding: 0 50px
}
.iq .iqsteps h3 {
font-size: 24px;
font-family: 'GothamBook';
color: #fff;
text-transform: none;
margin-bottom: 25px
}
.iq .iqsteps .tag {
margin-bottom: 20px
}
.iq .iqsteps select {
width: 180px;
height: 50px;
border: 3px solid #fdab9c;
color: #fdab9c;
font-family: 'futuramc';
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background: url(img/dd.png) no-repeat right 10px center;
font-size: 18px
}
.iq .iqsteps select:focus {
outline: none
}
.iq .iqsteps .bx-pager {
position: absolute;
width: 100%;
right: 0;
left: 0;
bottom: 65px;
text-align: center
}
.iq .iqsteps .bx-pager-item {
display: inline-block;
width: 20px;
padding-top: 20px
}
.iq .iqsteps .bx-pager-item a {
width: 20px;
height: 20px;
position: relative;
display: block;
text-indent: -3000px;
font-size: 0;
overflow: hidden;
overflow: visible
}
.iq .iqsteps .bx-pager-item a:before {
width: 8px;
height: 8px;
background-color: #fdab9c;
position: absolute;
top: 50%;
left: 50%;
margin: -4px 0 0 -4px;
content: '';
display: block;
border-radius: 100%;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear
}
.iq .iqsteps .bx-pager-item a:after {
border: 2px solid #fff;
width: 24px;
height: 24px;
position: absolute;
top: 50%;
left: 50%;
margin: -12px 0 0 -12px;
border-radius: 100%;
content: '';
display: block;
-webkit-transform: scale3d(0,0,0);
-ms-transform: scale3d(0,0,0);
transform: scale3d(0,0,0);
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear
}
.iq .iqsteps .bx-pager-item a:hover:before {
background: #fff
}
.iq .iqsteps .bx-pager-item a.active:after {
border-color: #fff;
-webkit-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
/* IN THE KNOW */
.intheknow {
padding-bottom: 40px;
}
.intheknow.section .columns {
padding-top: 50px;
}
.intheknow .slider {
margin: 50px auto 0;
max-width: 1195px;
position: relative
}
/*
.intheknow .slider .bx-viewport {
height: 100% !important;
}
*/
.intheknow .sliderout {
position: relative;
overflow: hidden
}
.intheknow ul {
margin: 0;
padding: 0
}
.intheknow ul li {
list-style: none;
margin: 0;
padding: 0
}
.intheknow ul a {
display: block;
margin: 0 auto;
max-width: 359px;
text-align: center
}
.intheknow ul a h3 {
font-size: 24px;
/*padding: 0 50px;*/
line-height: 1.1;
color: #494949
}
.intheknow ul a figure {
position: relative;
float:left;width: 100%;
}
.intheknow ul a figure .img {float:left;width: 100%; overflow: hidden;padding-top: 70%; position: relative;}
.intheknow ul a figure .img div {
width: 100%; height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
position: absolute;
left:0;
top:0;
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
/*-webkit-backface-visibility: hidden;
backface-visibility: hidden;*/
}
.tag {
transform: translate(0,-55%);
}
.intheknow ul a figure .tag {
transform: translate(0,-55%);
}
.iq .i .tag,
.news .tag {transform:none;}
.intheknow ul a figure .tag span {
/*width: 126px;*/
height: 30px;
padding-top: 8px;
text-align: center
}
.intheknow ul a:hover figure .img div {
transform: scale3d(1.2,1.2,1.2);
}
.intheknow .navs {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none
}
.intheknow .navs * {
pointer-events: all
}
.intheknow .next,
.intheknow .prev {
width: 90px;
height: 90px;
top: 135px;
right: -45px;
border: 3px solid #efa56a;
border-radius: 100%;
position: absolute;
display: block;
text-indent: -3000px;
font-size: 0;
overflow: hidden;
transform:scaleX(1);
}
.intheknow .navs .slider-arrow {
width: 55px;
height: 90px;
}
.intheknow .navs .slider-arrow:after {
}
/*
.intheknow .next:after,
.intheknow .prev:after {
width: 12px;
height: 13px;
background: url(../img/arrow.svg) no-repeat;
position: absolute;
top: 35px;
left: 18px;
content: '';
display: block
}
.intheknow .next:before,
.intheknow .prev:before {
position: absolute;
content: '';
display: block;
right: 0;
top: 0%;
bottom: 0%;
left: auto;
width: 0;
background: #efa56a;
-webkit-transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.intheknow .next:hover:before,
.intheknow .prev:hover:before {
left: 0;
width: 100%
}
.intheknow .next:hover:after,
.intheknow .prev:hover:after {
background: url(../img/arroww.svg) no-repeat center
}
*/
.intheknow .prev {
right: auto;
left: -45px;
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1)
}
/* STEPS */
.steps {
padding-bottom: 110px;
overflow: hidden;
padding-top:10px;
}
.steps.aos-animate .imgs li .bg {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px)
}
.steps ul {
margin: 0;
padding: 0
}
.steps ul li {
list-style: none;
margin: 0;
padding: 0
}
.steps .imgs {
width: 558px;
height: 424px;
position: absolute;
top: 0;
left: 0;
background: #fff7ea
}
.steps .imgs ul {
margin: 0;
padding: 0
}
.steps .imgs ul li {
list-style: none;
margin: 0;
padding: 0
}
.steps .imgs li {
position: relative;
height: 424px;
overflow: hidden
}
.steps .imgs li .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateY(100px);
background-repeat:no-repeat;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.steps .stepsin {
-webkit-box-shadow: 0 0 9px rgba(0, 0, 0, 0.13);
box-shadow: 0 0 9px rgba(0, 0, 0, 0.13);
height: 424px;
padding-left: 558px;
position: relative
}
.steps .text {
text-align: center
}
.steps .text .title {
font-family: 'HanleyScript';
text-transform: none;
font-weight: normal;
color: #efa56a;
font-size: 27px;
margin-bottom: 20px
}
.steps .text li {
height: 424px;
padding-top: 70px
}
.steps .text .i {
max-width: 500px;
margin: 0 auto;
padding: 0 50px
}
.steps .text .tag span {
font-size: 18px;
padding-top: 6px
}
.steps .text .tag {
margin-bottom: 20px;
transform:none;
}
.steps .text p {
color: #494949;
font-size: 19px
}
.steps .bx-pager {
position: absolute;
left: 0;
width: auto;
right: 0;
left: 558px;
bottom: 30px;
text-align: center
}
.steps .bx-pager-item {
display: inline-block;
width: 20px;
padding-top: 20px
}
.steps .bx-pager-item a {
width: 20px;
height: 20px;
position: relative;
display: block;
text-indent: -3000px;
font-size: 0;
overflow: hidden;
overflow: visible
}
.steps .bx-pager-item a:before {
width: 8px;
height: 8px;
background-color: #494949;
position: absolute;
top: 50%;
left: 50%;
margin: -4px 0 0 -4px;
content: '';
display: block;
border-radius: 100%;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear
}
.steps .bx-pager-item a:after {
border: 1px solid #efa56a;
width: 24px;
height: 24px;
position: absolute;
top: 50%;
left: 50%;
margin: -12px 0 0 -12px;
border-radius: 100%;
content: '';
display: block;
border-color: #494949;
-webkit-transform: scale3d(0.1,0.1,0.1);
-ms-transform: scale3d(0.1,0.1,0.1);
transform: scale3d(0.1,0.1,0.1);
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear
}
.steps .bx-pager-item a:hover:before {
background: #efa56a
}
.steps .bx-pager-item a.active:after {
border-color: #efa56a;
-webkit-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
.steps.myths {
padding-top: 50px;
padding-bottom: 70px
}
.steps .mythsslider {
padding-top: 40px;
margin-top: 40px;
}
.steps .mythsslider ul li {
list-style: none;
margin: 0;
padding: 0
}
.steps .mythsslider ul li li {
padding-top: 70px
}
.steps .mythsslider .stepsin {
margin: 0 25px
}
.steps .mythsslider h3 {
font-size: 33px;
color: #494949;
line-height: 1.1
}
.steps .mythsslider .options {
margin-top: 15px
}
.steps .mythsslider .options .option,
.steps .mythsslider .button--back {
width: 120px;
height: 54px;
padding: 0;
border: 3px solid #efa56a;
display: inline-block;
text-align: center;
font-family: 'futuramc';
font-weight: bold;
text-transform: uppercase;
font-size: 31px;
color: #333;
line-height: 1;
padding-top: 7px;
position: relative;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
.site-2 .steps .mythsslider .options .option,
.site-2 .steps .mythsslider .button--back {
width: 170px;
}
.steps .mythsslider .options .option:before,
.steps .mythsslider .button--back:before {
content: '';
display: block;
position: absolute;
height: 100%;
background: #efa56a;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
right: 0;
top: 0;
left: auto;
width: 0
}
.steps .mythsslider .button--back {color: #efa56a;}
.steps .mythsslider .options .option:hover,
.steps .mythsslider .button--back:hover {
background: none;
color: #fff
}
.steps .mythsslider .options .option:hover:before,
.steps .mythsslider .button--back:hover:before {
width: 100%;
left: 0;
right: auto
}
.steps .mythsslider .options .option span,
.steps .mythsslider .button--back span {
position: relative;
font-size: 31px
}
.steps .mythsslider .options span.or {
display: inline-block;
font-size: 21px;
color: #333;
padding: 5px 5px;
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold
}
.steps .mythsslider .answer-wrapper {
display: none;
}
.steps .mythsslider .answer {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
max-height: 350px;
padding: 0 25px;
background: #fff;
display: flex;
align-items: center;
z-index: 22;
}
.steps .mythsslider .answer .contents {
float:left;
width: 100%;
}
.steps .mythsslider .answer h3 {font-family: 'HanleyScript';
text-transform: none;
font-weight: normal;
color: #efa56a;
text-align: center;
font-size: 42px;
margin: 0 0 20px;}
.steps .mythsslider .card {
/*-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 600ms;
transition: all 600ms;*/
z-index: 20;
float:left;
width:100%;
min-height: 300px;
display: flex;
align-items: center;
}
.steps .mythsslider .card .i {
/* -webkit-backface-visibility: hidden;
backface-visibility: hidden;*/
width:100%; height: 100%;
max-width: none;
background: #fff;
z-index: 21;
}
/*
.steps .mythsslider .answer {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.steps .mythsslider .answered .card {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
*/
/* VS */
.vs {
padding: 50px 0
}
.vs h2 {
text-align: center;
font-size: 61px;
letter-spacing: 0.02em;
padding-left: 90px;
margin-bottom: 10px;
color: #494949
}
.vs h2 span {
color: #efa56a;
font-size: 91px;
display: inline-block;
vertical-align: top;
line-height: 1;
margin-top: -5px;
letter-spacing: 0.05em
}
.vs .vsin {
position: relative;
padding: 120px 0
}
.vs .vsin .figure {
width: 423px;
height: 423px;
background-position: center;
background-size: cover;
margin: 0px auto;
position: relative
}
.vs .vsin .figure:after,
.vs .vsin .figure:before {
height: 100px;
width: 4px;
left: 50%;
margin-left: -2px;
margin-left: 1px;
bottom: 100%;
background: url(img/dotted.png);
position: absolute;
content: '';
display: block
}
.vs .vsin .figure:after {
bottom: 0;
top: 100%
}
.vs .i {
position: absolute
}
.vs .i h3 {
font-size: 30px;
opacity: 0;
-webkit-transform: translateX(0) translateY(50px);
-ms-transform: translateX(0) translateY(50px);
transform: translateX(0) translateY(50px);
-webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.vs .i p {
font-size: 16px;
color: #686868;
opacity: 0;
-webkit-transform: translateX(0) translateY(50px);
-ms-transform: translateX(0) translateY(50px);
transform: translateX(0) translateY(50px);
-webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition-delay:.5s
}
.vs .i.dairy p a {color:#60bdcb;}
.vs .i .f {
width: 77px;
height: 77px;
text-align: center;
position: absolute;
border-radius: 100%;
opacity: 0;
transition: all 0.5s ease;
}
.vs .i .f:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
-webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
border-radius: 100%;
-webkit-transform: scale3d(0,0,0);
-ms-transform: scale3d(0,0,0);
transform: scale3d(0,0,0)
}
.vs .i .f img {
opacity: 0;
-webkit-transform: translateX(0) translateY(50px);
-ms-transform: translateX(0) translateY(50px);
transform: translateX(0) translateY(50px);
-webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition-delay: ..5s
}
.vs .dairy {
padding-right: 100px;
right: 50%;
margin-right: 250px;
text-align: right;
max-width: 380px
}
.vs .dairy .f {
right: 0;
top: 0
}
.vs .dairy .f:after {
border: 3px solid #60bdcb
}
.vs .dairy h3 {
color: #60bdcb
}
.vs .almond {
padding-left: 100px;
left: 50%;
margin-left: 250px;
max-width: 380px
}
.vs .almond .f {
left: 0;
top: 0
}
.vs .almond .f:after {
border: 3px solid #efa56a
}
.vs .almond h3 {
color: #efa56a
}
.vs .a1,
.vs .d1 {
top: 100px
}
.vs .a2,
.vs .d2 {
top: 290px
}
.vs .a3,
.vs .d3 {
top: 480px
}
.vs .i.aos-animate .f,
.vs .i.aos-animate h3,
.vs .i.aos-animate p {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px)
}
.vs .i.aos-animate .f:after {
-webkit-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
.vs .i.aos-animate .f img {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px)
}
/* DID YOU KNOW */
.didyouknow {
background: #fff7e8;
padding: 40px 0 70px
}
.didyouknow__columns {
display: flex;
width:100%;
flex-wrap: wrap;
}
.didyouknow__columns .columns:nth-child(2) {
display: flex;
align-items: center;
}
.didyouknow .sectiontitle+h4 {
margin-bottom: 50px
}
.didyouknow .aos-animate .i figure svg path[stroke="#f0a766"] {
stroke-dashoffset: 0
}
.didyouknow .aos-animate .i figure img {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px)
}
.didyouknow .aos-animate .i .buttonout,
.didyouknow .aos-animate .i p {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px)
}
.didyouknow .i {
text-align: center;
padding: 0 30px;
padding-bottom: 20px
}
.didyouknow .i figure {
width: 156px;
height: 156px;
position: relative;
border-radius: 100%;
text-align: center;
margin: 0 auto 30px
}
.didyouknow .i figure:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.didyouknow .i figure svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.didyouknow .i figure svg path[stroke="#f0a766"] {
stroke-dasharray: 480;
stroke-dashoffset: 480;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s
}
.didyouknow .i figure img {
opacity: 0;
-webkit-transform: translateX(0) translateY(50px);
-ms-transform: translateX(0) translateY(50px);
transform: translateX(0) translateY(50px);
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s
}
.didyouknow .i p {
text-align: center;
font-size: 28px;
color: #4d4c45;
line-height: 1.1;
opacity: 0;
-webkit-transform: translateX(0) translateY(50px);
-ms-transform: translateX(0) translateY(50px);
transform: translateX(0) translateY(50px);
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition-delay: 0.9s;
-o-transition-delay: 0.9s;
transition-delay: 0.9s;
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold;
}
.didyouknow .i p strong, .didyouknow .i p a {
color: #efa56a
}
.didyouknow .i .buttonout {
opacity: 0;
-webkit-transform: translateX(0) translateY(50px);
-ms-transform: translateX(0) translateY(50px);
transform: translateX(0) translateY(50px);
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition-delay: 1.1s;
-o-transition-delay: 1.1s;
transition-delay: 1.1s
}
.didyouknow .i.large {
padding: 0 20px 0
}
.didyouknow .i.large p {
font-size: 47px;
line-height: 1.1
}
.didyouknow .i.large .button {
margin-top: 40px
}
.didyouknow .columns.sep:after {
width: 3px;
height: 100%;
background: #efa56a;
content: '';
position: absolute;
left: 100%;
margin-left: 8px;
display: block;
top: 0;
opacity: 0;
transition: all 1s ease;
transition-delay: 1s;
}
.didyouknow hr {
height: 3px;
background: #efa56a;
margin: 50px 0;
border: none;
opacity: 0;
transition: all 1s ease;
transition-delay: 1s;
}
.didyouknow .columns.sep:after {height: 0;}
.didyouknow .medium-offset-1 hr {width:0;}
.didyouknow .medium-offset-1.aos-animate hr {width:100%;opacity: 1;}
.didyouknow .columns.sep.aos-animate:after {
opacity: 1; height: 100%;
}
/* CLOCK */
.roundtheclock {
padding: 30px 0 5px
}
.roundtheclock .mobileslider {
display: none
}
.roundtheclock .round {
width: 637px;
margin: 110px auto 150px;
height: 637px;
position: relative
}
.roundtheclock .aos-animate .sliderout li .text {
transition-delay: 1.5s;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px)
}
.roundtheclock .aos-animate .sliderout li.active .text {
opacity: 1;
}
.roundtheclock .times a {
position: absolute;
width: 78px;
height: 78px;
display: block;
text-align: center;
padding-top: 17px;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear
}
.roundtheclock .times a:after {
width: 15px;
height: 2px;
background: #efa56a;
content: '';
display: block;
position: absolute;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear
}
.roundtheclock .times a.active:before {
-webkit-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
.roundtheclock .times a:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
border: 3px solid #efa56a;
content: '';
display: block;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-transform: scale3d(0,0,0);
-ms-transform: scale3d(0,0,0);
transform: scale3d(0,0,0)
}
.roundtheclock .times a:first-child {
top: 50%;
left: -80px;
margin-top: -39px
}
.roundtheclock .times a:first-child:after {
top: 50%;
left: 100%;
margin-top: -1px;
width: 0
}
.roundtheclock .times a:first-child.active {
left: -90px
}
.roundtheclock .times a:first-child.active:after {
width: 15px
}
.roundtheclock .times a:nth-child(2) {
top: -80px;
left: 50%;
margin-left: -39px;
padding-top: 20px
}
.roundtheclock .times a:nth-child(2):after {
height: 15px;
width: 2px;
top: 100%;
left: 50%;
margin-left: -1px;
height: 0
}
.roundtheclock .times a:nth-child(2).active {
top: -90px
}
.roundtheclock .times a:nth-child(2).active:after {
height: 15px
}
.roundtheclock .times a:nth-child(3) {
top: 50%;
right: -80px;
margin-top: -39px;
padding-top: 20px
}
.roundtheclock .times a:nth-child(3):after {
top: 50%;
right: 100%;
margin-top: -1px;
width: 0
}
.roundtheclock .times a:nth-child(3).active {
right: -90px
}
.roundtheclock .times a:nth-child(3).active:after {
width: 15px
}
.roundtheclock .times a:nth-child(4) {
bottom: -80px;
left: 50%;
margin-left: -39px;
padding-top: 22px
}
.roundtheclock .times a:nth-child(4):after {
height: 15px;
width: 2px;
bottom: 100%;
left: 50%;
margin-left: -1px;
height: 0
}
.roundtheclock .times a:nth-child(4).active {
bottom: -90px
}
.roundtheclock .times a:nth-child(4).active:after {
height: 15px
}
.roundtheclock .slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.roundtheclock .circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.roundtheclock .circle span {
width: 18px;
height: 18px;
background: #fff;
border: 3px solid #efa56a;
border-radius: 100%;
position: absolute;
cursor: pointer;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear
}
.roundtheclock .circle span:hover {
background: #efa56a
}
.roundtheclock .circle span:nth-child(2) {
top: -7px;
left: 50%;
margin-left: -9px
}
.roundtheclock .circle span:nth-child(3) {
top: 50%;
right: -7px;
margin-top: -9px
}
.roundtheclock .circle span:nth-child(4) {
bottom: -7px;
left: 50%;
margin-left: -9px
}
.roundtheclock .circle span:first-child {
top: 50%;
left: -7px;
margin-top: -9px
}
.roundtheclock .sliderout {
width: 556px;
height: 556px;
border-radius: 100%;
overflow: hidden;
margin: 42px auto 0;
background: #fff7e8
}
.roundtheclock .sliderout .bx-viewport,
.roundtheclock .sliderout .bx-wrapper {
height: 100%!important
}
.roundtheclock .sliderout ul {
margin: 0;
padding: 0;
height: 100%
}
.roundtheclock .sliderout ul li {
list-style: none;
margin: 0;
padding: 0;
opacity: 1!important;
/*-o-clip-path: circle(0.0% at 50% 50%);
-ms-clip-path: circle(0.0% at 50% 50%);
clip-path: circle(0.0% at 50% 50%);
-webkit-clip-path: circle(0.0% at 50% 50%);*/
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/*
.roundtheclock .sliderout ul li.active {
-o-clip-path: circle(50.0% at 50% 50%);
-ms-clip-path: circle(50.0% at 50% 50%);
clip-path: circle(50.0% at 50% 50%);
-webkit-clip-path: circle(50.0% at 50% 50%);
transition-delay: 1s;
}
*/
.circ-img-mask-shell {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 50%;
}
.circ-img {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
opacity: 1;
}
.roundtheclock .sliderout li {
height: 100%;
position: relative
}
/*
@keyframes sliderImg {
0% {opacity: 1; transform: translateX(0px) scale3d(1,1,1);}
25%{opacity: 0; transform:translateX(10px) scale3d(0.9,0.9,0.9);}
26%{opacity: 0; transform:translateX(-10px) scale3d(0.9,0.9,0.9);}
55% {opacity: 1; transform: translateX(0px) scale3d(1,1,1);}
}
*/
.roundtheclock .sliderout li .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
background-position: center;
background-size: auto 200%;
overflow: hidden;
}
.roundtheclock .sliderout li .bg img {
position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%;
transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition-delay: .5s;
transform: translate3d(-50%,-50%,0) scale3d(2,2,2);
}
.roundtheclock .sliderout li .bg::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; content: ''; background: rgba(0,0,0,0.3);}
/*
.roundtheclock .sliderout li.active .bg {
background-size: auto 100%;
}
*/
.roundtheclock .sliderout li.active .bg img {
transform: translate3d(-50%,-50%,0) scale3d(1,1,1);
}
.roundtheclock .sliderout li.active .text .time {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px)
}
.roundtheclock .sliderout li.active .text h2 {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px);
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s
}
.roundtheclock .sliderout li.active .text p {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px);
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s
}
.roundtheclock .sliderout .text {
position: absolute;
top: 50%;
text-align: center;
color: #fff;
width: 360px;
left: 50%;
margin-left: -180px;
margin-top: 5px;
opacity: 0;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear
}
.roundtheclock .sliderout .text .time {
font-family: 'HanleyScript';
text-transform: none;
font-weight: normal;
font-size: 23px;
opacity: 0;
-webkit-transform: translateX(0) translateY(0px);
-ms-transform: translateX(0) translateY(0px);
transform: translateX(0) translateY(0px);
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.roundtheclock .sliderout .text h2 {
font-size: 33px;
line-height: 1.1;
color: #fff;
opacity: 0;
-webkit-transform: translateX(0) translateY(0px);
-ms-transform: translateX(0) translateY(0px);
transform: translateX(0) translateY(0px);
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.roundtheclock .sliderout .text p {
font-size: 16px;
opacity: 0;
-webkit-transform: translateX(0) translateY(0px);
-ms-transform: translateX(0) translateY(0px);
transform: translateX(0) translateY(0px);
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
line-height: 1.5
}
.roundtheclock .sliderout .bx-next,
.roundtheclock .sliderout .bx-prev{
width: 37px;
height: 37px;
position: absolute;
top: 50%;
left: 50%;
margin: 5px 0 0 80px;
display: block;
text-indent: -3000px;
font-size: 0;
overflow: hidden;
z-index: 100;
border: 3px solid #efa56a;
border-radius: 100%;
opacity: 0;
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.roundtheclock .round.aos-animate:not(.working) .sliderout .bx-next,
.roundtheclock .round.aos-animate:not(.working) .sliderout .bx-prev { transition-delay: 1.5s; opacity: 1;
}
.roundtheclock .round.aos-animate.working .sliderout .bx-next,
.roundtheclock .round.aos-animate.working .sliderout .bx-prev { transition-delay: 0s; opacity: 1;
}
.roundtheclock .round.aos-animate .sliderout.hidden-nav .bx-next,
.roundtheclock .round.aos-animate .sliderout.hidden-nav .bx-prev {transition-delay: 0s; opacity: 0;}
.roundtheclock .sliderout .slider-arrow,
.roundtheclock .mobileslider .slider-arrow{
width: 37px;
height: 37px;
display: block;
overflow: hidden;
left:-4px;
}
/*.roundtheclock .sliderout .bx-next div:after,
.roundtheclock .sliderout .bx-prev div:after,
.roundtheclock .mobileslider .bx-next div:after,
.roundtheclock .mobileslider .bx-prev div:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background: url(../img/arrow2.svg) no-repeat center
}*/
.slider-arrow:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
-webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
background: url(../img/arrow2.svg) no-repeat center
}
.roundtheclock .mobileslider .slider-arrow:after {
margin-top:1px;
background: url(../img/arrow.svg) no-repeat center
}
/*
.roundtheclock .sliderout .bx-next:hover div:before,
.roundtheclock .sliderout .bx-prev:hover div:before {
left: 0;
width: 100%
}
*/
.roundtheclock .sliderout .bx-prev {
margin-left: auto;
margin-right: 80px;
right: 50%;
left: auto;
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1)
}
/*
.roundtheclock .sliderout .bx-next div:nth-child(2),
.roundtheclock .sliderout .bx-prev div:nth-child(2) {transform: translateX(0px);
position: absolute;
top: 0;
left: -60px;}
.roundtheclock .sliderout .bx-next:hover div {transform: translateX(60px);}
.roundtheclock .sliderout .bx-prev:hover div {transform: translateX(60px);}
*/
.roundtheclock #Ellipse2 {
stroke-dasharray: 1990;
stroke-dashoffset: 1990;
transition: all 0.6s linear
}
.roundtheclock .filling #Ellipse2 {
-webkit-transition: all 4s linear;
-o-transition: all 4s linear;
transition: all 4s linear
}
.roundtheclock .notr #Ellipse2 {
-webkit-transition: all 0s linear;
-o-transition: all 0s linear;
transition: all 0s linear
}
/* ABOUT */
.about {
padding: 70px 0
}
.about h4 {
margin-bottom: 25px
}
.about ul {
max-width: 1160px;
margin: 35px auto 0;
padding: 0;
display: flex;
width: 100%;
}
.about ul li {
padding: 0;
position: relative;
padding-bottom: 55%;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
text-align: center;
}
.about ul li.active {
width: 38%;
z-index: 1;
}
.about ul li.inactive {
width: 31%;
z-index: 0;
}
.about ul li > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 1
}
.about ul li .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-filter: grayscale(0);
filter: grayscale(0);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
background-repeat: no-repeat
}
.about ul li .bgcolor {
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #c7966e;
content: '';
display: block;
opacity: 0
}
.about ul li .text {
position: absolute;
top: 45%;
bottom:0;
padding: 0 20px;
color: #fff;
left: 0;
width: 100%;
background: -webkit-gradient(cubic-bezier(0.165, 0.84, 0.44, 1), left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.65)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
text-align: center;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.about ul li .text div {margin:0 auto; max-width: 300px;font-size: 16px;}
.about ul li h3 {
color: #fff;
font-size: 34px
}
.about ul li h3:after {
background: #efa56a;
content: '';
display: block;
margin: 10px auto 15px;
height: 3px;
width: 50px
}
.about ul li p {
opacity: 0;
-webkit-transform: translateX(0) translateY(100px);
-ms-transform: translateX(0) translateY(100px);
transform: translateX(0) translateY(100px);
-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
width: 340px;
margin: 0 auto 20px
}
.about ul li p a {color:#fff;}
.about ul li .btn {
opacity: 0;
-webkit-transform: translateX(0) translateY(100px);
-ms-transform: translateX(0) translateY(100px);
transform: translateX(0) translateY(100px);
-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
color: #efa56a;
font-size: 17px;
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold;
display: inline-block
}
.about ul li .btn:after {
margin-left: 10px;
vertical-align: top;
margin-top: 1px;
display: inline-block;
content: url('data:image/svg+xml; utf8,')
}
.about ul li.active .bg {
-webkit-filter: grayscale3d(1,1,1);
filter: grayscale3d(1,1,1)
}
.about ul li.active .text {
top:20%;
}
.about ul li.active .bgcolor {
opacity: 0.8
}
.about ul li.active .btn,
.about ul li.active p {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px);
-ms-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px)
}
.about ul li.active .btn {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s
}
/* NEWS BULLETIN */
.news {
background-color: #fff7e9;
padding: 50px 0
}
.didyouknow + .news {background: #fff;}
.news.nobg {
background: none;
padding: 80px 0
}
.news h2 {
font-size: 33px;
line-height: 1.3;
margin: 10px 0;
max-width: 430px;
color:#494949;
}
.news p {
font-size: 19px;
max-width: 430px;
line-height: 1.4;
}
.news .button {
margin-top: -52px;
float: left;
margin-bottom: 0
}
.news a.video {
display: block;
overflow: hidden
}
.news a.video img {
-webkit-transform: scale3d(1.3,1.3,1.3);
-ms-transform: scale3d(1.3,1.3,1.3);
transform: scale3d(1.3,1.3,1.3);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition: all 2.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 2.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 2.5s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.news.aos-animate a.video img {
-webkit-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
/* ARTICLE */
.article {
padding: 70px 0
}
.article__row { float: left; width: 100%; padding: 70px;}
.article__row .article { padding: 0;}
.article__row .article--eight { margin-bottom: 50px; }
.article.altbg {
background: #fff7e9
}
.article p {
font-size: 18px;
line-height: 30px;
color: #494949
}
.article:nth-child(1) p:nth-child(1):first-letter {
color: #efa56a;
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold;
font-size: 104px;
float: left;
vertical-align: top;
display: inline-block;
line-height: 0.85;
margin-right: 10px
}
.article:nth-child(1) blockquote p:nth-child(1):first-letter { font-size: 18px; line-height: 30px; color: #494949; font-family: inherit; font-weight: normal; margin-right: 0;}
.article .introcol {
margin-bottom: 50px;
}
@media only screen and (min-width: 40.0625em) {
.article .introcol {
padding: 0;
}
}
.article .i {
margin: 20px auto;
text-align: center;
padding: 0 30px;
padding-bottom: 20px;
max-width: 400px
}
.article .i figure {
width: 156px;
height: 156px;
position: relative;
border-radius: 100%;
text-align: center;
margin: 0 auto 30px
}
.article .i figure:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.article .i figure svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.article .i figure img {
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s
}
.article .i h4 {
text-align: center;
font-size: 28px;
color: #4d4c45;
line-height: 1.1;
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition-delay: 0.9s;
-o-transition-delay: 0.9s;
transition-delay: 0.9s
}
.article .i h4 strong {
color: #efa56a
}
.article .i .buttonout {
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition-delay: 1.1s;
-o-transition-delay: 1.1s;
transition-delay: 1.1s
}
.article .i .btn {
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold;
color: #efa56a;
font-size: 17px;
font-weight: 500;
letter-spacing: 1.5px
}
.article .i .btn:after {
margin-left: 7px;
vertical-align: top;
margin-top: 1px;
display: inline-block;
content: url('data:image/svg+xml; utf8,')
}
.article hr {
height: 2px;
background: #efa56a;
margin: 50px 0;
border: none
}
.article .columns.sep:after {
width: 2px;
height: 100%;
background: #efa56a;
content: '';
position: absolute;
left: 100%;
margin-left: 8px;
display: block;
top: 0
}
.article blockquote {margin: 0; padding: 0; border: none;}
.article .hl,
.article blockquote p {
margin: 50px 0px;
padding: 0 30px;
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold;
font-size: 48px;
line-height: 54px;
text-align: center
}
.article .hl:before,
.article blockquote p::before {
width: 215px;
height: 4px;
background: #efa56a;
content: '';
display: block;
margin: 0 auto 20px
}
.article .hl:after,
.article blockquote p:after {
width: 215px;
height: 4px;
background: #efa56a;
content: '';
display: block;
margin: 20px auto 0px
}
.article .video {
display: block;
margin: 40px -120px;
padding-top: calc(45% + 135px);
position: relative
}
.fancybox-toolbar .fancybox-button {border:1px solid #efa56a; background: transparent; color:#efa56a;top:10px; right:10px;}
.fancybox-toolbar .fancybox-button:hover {color:#fff;}
.article .video .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover
}
.article .video:first-child {
margin-top: 0
}
.article .watch {
width: 132px;
height: 132px;
border-radius: 100%;
background: #efa56a;
position: absolute;
top: 50%;
left: 50%;
margin: -66px 0 0 -66px;
text-align: center;
color: #fff;
font-family: 'futuramc';
text-transform: uppercase;
font-weight: bold;
padding-top: 45px;
-webkit-box-shadow: 0 0 0 10px rgba(239, 165, 106, 0.3);
box-shadow: 0 0 0 10px rgba(239, 165, 106, 0.3)
}
.article .watch span {
position: relative;
z-index: 1
}
.article .watch:after {
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
background: #cd8348;
border-radius: 100%;
content: '';
display: block;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
position: absolute
}
.article .watch:hover:after {
top: 0%;
right: 0%;
bottom: 0%;
left: 0%
}
.article .watch:before {
display: block;
height: 17px;
background: url(../img/play.svg) no-repeat center;
content: '';
margin-bottom: 5px;
z-index: 1;
position: relative
}
/*
.article.list .video {
padding-bottom: 60%
}*/
.article.list h4 {
margin-bottom: 40px
}
.article.list .button {
margin-bottom: 0
}
.article h4+p {
margin-top: 30px
}
/*.current-menu-item a {color: #000 !important;}*/
.error-404 .contents {color: #fff; float: left;letter-spacing: 2px;width: 100%; position: absolute; top: 50%; transform: translateY(-50%); padding: 0px 50px;text-align: center; z-index: 1;}
.error-404 .contents .page-title {color: #fff; font-size: 61px; line-height: 1;text-align: center;}
.error-404 .contents p{color: #fff; font-size: 36px; line-height: 1.2;text-align: center;font-family: 'futuramc',sans-serif; text-transform: uppercase;}
.error-404.not-found {height: calc(100vh - 107px); text-align: center; background-color: #60bdcb; background-size:cover; background-position: center center;float: left;width: 100%;}
.error-404.not-found:before {
position: absolute;top:0; content:'';left:0; width: 100%; height: 100%; background: rgba(0,0,0,.3);
}
.error-404 .page-title:after {
width: 165px;
height: 2px;
content: '';
background: #efa56a;
display: block;
vertical-align: top;
margin: 20px auto;
}
.fancybox-slide {padding-top:62px!important;}
.iqout--calculator {margin-top:0; padding-top:0;}
.iq--calculator, .iqout--calculator {min-height: 850px;}
.calculator,
.calculator li {margin:0;}
.calculator li {transition-delay: 1s;}
.calculator li.active-slide {transition-delay: 0s;}
.iqout--calculator .bx-viewport {overflow: visible!important;}
.iq--calculator .iqin .iqin2 .bx-controls {position: absolute; bottom:0; left:20px;}
.calculator li .step-wrapper {
width:100%; max-width: 440px;min-height: 460px;position: relative; margin:40px auto 0;text-align: center;
}
.calculator li .step-contents {
float:left; width:100%; position: relative; padding: 80px 55px;opacity: 0;transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition-delay: .5s;
}
.site-2 .calculator li .step-contents {padding-top:60px;}
.calculator li.active-slide .step-contents {opacity: 1;}
.calculator li .step-wrapper:before {
background: #d06d61;
float:left;
content:'';
width:100%; padding-top:100%;
border-radius: 50%;
text-align: center;
position: absolute; top:0; left:0; margin:0;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transform: scale3d(0,0,0);
}
.calculator li.active-slide .step-wrapper:before {
transform: scale3d(1,1,1);
}
.calculator li .tag {transform: none;}
.calculator li p {font-size:24px; color:#fff; margin: 20px 0;}
.calculator li .dropdown {
display: inline-block;
position: relative;
width:300px;
border:2px solid rgba(255,255,255,.3);
opacity: 0;transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition-delay: .6s;
}
.calculator li.active-slide .dropdown {opacity: 1;}
.calculator li .dropdown .option.selected:after {
position:absolute;
right: 15px;
top: 0px;
height: 50px;
line-height: 50px;
float:left;
width:12px;
opacity: 0.3;
content:'';
transform:rotate(90deg);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
background: url(../img/arrow2.svg) no-repeat right center;
background-size:100% auto;
max-width: 100%;
}
.calculator li .dropdown.open .option.selected:after {
transform:rotate(-90deg);
}
.calculator li .dropdown .option {
color:rgba(255,255,255,.5);
font-family: 'futuramc';
text-transform: uppercase;
font-size: 20px;
letter-spacing: 3.45px;
height: 50px;
line-height: 50px;
float:left;
width:100%;
padding: 0 30px 0 15px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
background: #d06d61;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
}
.calculator li .dropdown.open .option.selected {
color:rgba(255,255,255,.2);
}
.calculator li .dropdown .option:hover {
background-color: #ffb3aa;
color: #c1655a
}
.calculator li .dropdown .options {
position: absolute;
top:48px;
left:-2px;
float:left;
width:calc(100% + 4px);
border:2px solid rgba(255,255,255,.3);
display: none;
}
.calculator li .dropdown.open .options {
border-color:rgba(255,255,255,.7);
}
.calculator li .dropdown .options .option {
border-bottom: 2px solid rgba(255,255,255,.3);
}
.calculator li .dropdown .options .option:nth-last-child(1) {
border-bottom:0;
}
.calculator li .calculating { margin-top:20px; }
.calculator li .result p {font-size: 20px}
.calculator li .result p p a {color:#e28c82}
.calculator li .result p strong {display:block; text-transform: uppercase; font-size:50px; line-height: 1}
.site-2 .calculator li .result p strong {font-size: 30px; }
.site-2 .calculator li p {font-size: 20px;}
.site-2 .calculator li .result p {line-height: 1.4}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
display: inline-block;
width:120px;
height: 120px;
background: url(../img/loading.png) center top no-repeat; background-size:120px;
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
.image-wrapper {width: 100%; text-align: center;margin: 0 0 20px 0; }
.alignleft {float:left; clear: left; width:auto; max-width: 50%; margin: 0 20px 10px 0;}
.alignright {float:right; clear: right; width:auto; max-width: 50%; margin: 0 0px 10px 20px;}
.aligncenter {text-align: center;}
.alignnone {display: block; clear:both;margin: 0 0 20px 0; }
.article .separator {margin: 30px 0 80px; height: 2px; background: #eee;}
.fancybox-container .fancybox-slide--iframe .fancybox-content {background:transparent!important;}
.site-2 .news p { max-width: 100%; width: 100%;}
.site-2 .steps .text p { font-size: 17px; line-height: 1.4; }