.btn-draw {
position: relative;
display: inline-block;
vertical-align: middle;
width: auto;
margin: 0;
padding: 0;
background: transparent;
border: 0;
text-decoration: none !important;
text-align: center;
cursor: pointer;
-webkit-appearance: none;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.btn-draw {
color: #00ffc8;
margin-left: 2.3em;
}
.btn-draw:after {
content: '';
top: 0;
right: 0;
height: 1px;
width: 100%;
background-color: #00ffc8;
}
.btn-draw:before {
content: '';
position: absolute;
top: 50%;
left: -2.4em;
height: 1px;
width: 3em;
background-color: #00ffc8;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.btn-draw .btn-draw__text {
position: relative;
display: block;
padding: 0.7555em 2.29em;
line-height: 1.5;
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.btn-draw .btn-draw__text:before, .btn-draw .btn-draw__text:after {
content: '';
position: absolute;
height: 1px;
width: 0;
background-color: #00ffc8;
}
.btn-draw .btn-draw__text:before {
top: 0;
left: 0;
-webkit-transition: width 0.15s 0.45s cubic-bezier(0.77, 0, 0.175, 1);
transition: width 0.15s 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-draw .btn-draw__text:after {
bottom: 0;
right: 0;
-webkit-transition: width 0.15s 0.15s cubic-bezier(0.77, 0, 0.175, 1);
transition: width 0.15s 0.15s cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-draw .btn-draw__text > span:before, .btn-draw .btn-draw__text > span:after {
content: '';
position: absolute;
height: 0;
width: 1px;
background-color: #00ffc8;
-webkit-transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
}
.btn-draw .btn-draw__text > span:before {
left: 0;
bottom: 0;
-webkit-transition: height 0.15s 0 cubic-bezier(0.77, 0, 0.175, 1);
transition: height 0.15s 0 cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-draw .btn-draw__text > span:after {
right: 0;
top: 0;
-webkit-transition: height 0.15s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
transition: height 0.15s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
@media (hover) {
.btn-draw:hover, a:hover .btn-draw {
cursor: pointer;
color: #00ffc8;
}
.btn-draw:hover:before, a:hover .btn-draw:before {
width: 0;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.btn-draw:hover .btn-draw__text, a:hover .btn-draw .btn-draw__text {
-webkit-transform: translateX(-2.2em);
transform: translateX(-2.2em);
-webkit-transition: width 1s ease, -webkit-transform 0.5s ease;
transition: width 1s ease, -webkit-transform 0.5s ease;
transition: transform 0.5s ease, width 1s ease;
transition: transform 0.5s ease, width 1s ease, -webkit-transform 0.5s ease;
}
.btn-draw:hover .btn-draw__text:before, a:hover .btn-draw .btn-draw__text:before {
width: 100%;
max-width: 100%;
-webkit-transition: width 0.15s cubic-bezier(0.77, 0, 0.175, 1);
transition: width 0.15s cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-draw:hover .btn-draw__text:after, a:hover .btn-draw .btn-draw__text:after {
width: 100%;
-webkit-transition: width 0.15s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
transition: width 0.15s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-draw:hover .btn-draw__text > span:before, a:hover .btn-draw .btn-draw__text > span:before {
left: 0;
height: 100%;
-webkit-transition: height 0.15s 0.45s cubic-bezier(0.77, 0, 0.175, 1);
transition: height 0.15s 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-draw:hover .btn-draw__text > span:after, a:hover .btn-draw .btn-draw__text > span:after {
right: 0;
height: 100%;
-webkit-transition: height 0.15s 0.15s cubic-bezier(0.77, 0, 0.175, 1);
transition: height 0.15s 0.15s cubic-bezier(0.77, 0, 0.175, 1);
}
}
.btn-draw.btn--white {
color: #fff;
}
.btn-draw.btn--white:before, .btn-draw.btn--white:after, .btn-draw.btn--white .btn-draw__text:before, .btn-draw.btn--white .btn-draw__text:after, .btn-draw.btn--white .btn-draw__text > span:before, .btn-draw.btn--white .btn-draw__text > span:after {
background-color: #fff;
}
.btn-draw.btn--white:hover, a:hover .btn-draw.btn--white {
color: #fff;
}
.velo-slides {
z-index: 8;
position: relative;
height: 100vh; }
.velo-slides[data-velo-slider="on"] {
overflow: hidden;
}
.velo-slide {
height: 100vh;
z-index: 4;
}
h3.velo-slide__title {
font-size: 6vh !important;
font-weight: 700 !important;
line-height:1.2em !important;
} @media (min-width: 768px) {
h3.velo-slide__title {
font-size: 12vh !important;
}	
}
[data-velo-slider="on"] .velo-slide {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.velo-slide.is-active {
z-index: 8;
}
.velo-slide__bg {
z-index: 7;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
color: #111;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #111;
overflow: hidden;
}
.velo-slide__bg:after {
z-index: 0;
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.4;
}
.velo-slide__figure {
z-index: 0;
position: relative;
height: 100%;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.is-hovering .velo-slide__figure {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.velo-slide__vid-wrap {
z-index: 5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.velo-slide__vid-wrap:after {
z-index: 0;
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.4;
}
.is-hovering .velo-slide__vid-wrap {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.velo-slide__vid-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);	
}
.velo-slide__vid {
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
min-width: 100%;
max-width: none;
height: auto;
min-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.velo-slide__header {
z-index: 9;
position: relative;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow-y: hidden;
padding: 6%;
}
.velo-slide__pretitle {
color: #fff;
max-width: 22em;
}
@media (min-width: 54em) {
.velo-slide__pretitle {
margin-left: 7%;
}
}
.velo-slide__title {
margin-bottom: 0.1em;
line-height: 1.1;
color: #fff;
letter-spacing: -0.025em;
font-weight: 700;
font-size: 2.25em;
}
@media (min-width: 54em) {
.velo-slide__title {
font-size: 5em;
}
}
@media (min-width: 65em) {
.velo-slide__title {
font-size: 5em;
}
}
@media (min-width: 91em) {
.velo-slide__title {
font-size: 5em;
}
}
.velo-slide__text {
color: #fff;
max-width: 30em;
display: block;
margin: 1em 0 1.5em 1%;
font-size: 1.1em;
line-height: 1.8;
font-weight: 300;
}
.velo-slide__btn {
opacity: 0;
}
.is-active .velo-slide__btn {
opacity: 1;
}
.velo-slide__btn > a > span {
opacity: 0;
overflow-y: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.is-active .velo-slide__btn > a > span {
opacity: 1;
z-index: 9999;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
transition: transform 0.4s ease, opacity 0.8s ease;
transition: transform 0.4s ease, opacity 0.8s ease, -webkit-transform 0.4s ease;
}
.velo-slides[data-velo-theme="light"] .velo-slide__bg {
color: #fff;
}
.oh {
display: block;
overflow-y: hidden;
padding: 0.02em 0;
}
.oh span {
display: inline-block;
-webkit-transform: translate3d(0, 140%, 0);
transform: translate3d(0, 140%, 0);
opacity: 0;
-webkit-transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
transition: transform 0.4s ease, opacity 0.8s ease;
transition: transform 0.4s ease, opacity 0.8s ease, -webkit-transform 0.4s ease;
}
.is-active .oh span {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
opacity: 1;
-webkit-transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;
transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.is-active .oh:nth-of-type(2n) span {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.border, .border:before, .border:after, .border span {
z-index: 91;
position: fixed;
background-color: currentColor;
-webkit-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out;
}
.is-hovering .border, .is-hovering .border:before, .is-hovering .border:after, .is-hovering .border span {
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
.velocity-animating .border, .velocity-animating .border:before, .velocity-animating .border:after, .velocity-animating .border span {
-webkit-transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.border {
top: 0;
left: 0;
width: 100%;
height: 0vw;
}
.is-hovering .border {
height: 0vw;
}
.velocity-animating .border { height: 0;
}
@media (min-width: 54em) {
.velocity-animating .border { height: 0;
}
}
.border:before {
content: '';
bottom: 0;
left: 0;
width: 0vw;
height: 100%;
}
.is-hovering .border:before {
width: 0vw;
}
.velocity-animating .border:before {
width: 0;
}
@media (min-width: 54em) {
.velocity-animating .border:before {
width: 0;
}
}
.border:after {
content: '';
bottom: 0;
right: 0;
height: 100%;
width: 0vw;
}
.is-hovering .border:after {
width: 0vw;
}
.velocity-animating .border:after {
width: 0;
}
@media (min-width: 54em) {
.velocity-animating .border:after {
width: 0;
}
}
.border span {
bottom: 0;
left: 0;
height: 0vw;
width: 100%;
}
.is-hovering .border span {
height: 0vw;
}
.velocity-animating .border span {
height: 0;
}
@media (min-width: 54em) {
.velocity-animating .border span {
height: 0;
}
}
.velo-slider__hint {
z-index: 99;
position: fixed;
top: 0;
left: 0;
display: none;
height: 100vh;
width: 4em;
font-size: 0.9em;
color: #fff;
}
@media (min-width: 54em) {
.velo-slider__hint {
display: block;
}
}
.velo-slider__hint > span {
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
-webkit-transform: translate(-50%, -50%) rotate(-90deg);
transform: translate(-50%, -50%) rotate(-90deg);
overflow: hidden;
}
.velo-slider__hint > span > span {
display: inline-block;
-webkit-transform: translateY(-110%);
transform: translateY(-110%);
}
.is-active .velo-slider__hint > span > span {
opacity: 1;
top: 50%;
-webkit-transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: 0.4 ease;
transition: 0.4 ease;
}
.velo-slides-nav {
position: absolute;
z-index: 91;
left: 6%;
bottom: 1em;
}
@media (min-width: 54em) {
.velo-slides-nav {
bottom: 6%;
top: auto;
}
}
.velo-slides-nav__list {
padding: 0 !important;
list-style: none;
width: 160px;
}
.velo-slides-nav li {
position: relative;
float: left;	
}
.velo-slides-nav li > a {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid currentColor;	
}
.velo-slides-nav li:last-child {
margin-left: -1px;
}
.velo-slides-nav a {
display: block;
color: rgba(255, 255, 255, 0.9);
-webkit-transition: color 0.5s ease, text-shadow 0.5s ease;
transition: color 0.5s ease, text-shadow 0.5s ease;
text-decoration: none;
}
.velo-slides-nav a:hover {
color: white;
text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.6);
-webkit-transition: color 0.5s ease, text-shadow 0.5s ease;
transition: color 0.5s ease, text-shadow 0.5s ease;
}
.velo-slides-nav a.inactive {
opacity: .3;
-webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
.velo-slides-nav i {
position: absolute;
top: 39px;
left: 27px;
width: 20px; height: 2px; background: currentColor; -webkit-transition: all 0.15s ease;
transition: all 0.15s ease;	
}
.velo-slides-nav a.js-velo-slides-prev>i {
-webkit-transform-origin: 0% 50%;transform-origin: 0% 50%;left:33px;	
}
.velo-slides-nav a.js-velo-slides-prev i:first-child {
-webkit-transform: translate(0, -.0225rem) rotate(40deg); transform: translate(0, -.0225rem) rotate(40deg); 
}
.velo-slides-nav a.js-velo-slides-prev i:last-child {
-webkit-transform: translate(0, .0225rem) rotate(-40deg); transform: translate(0, .0225rem) rotate(-40deg); 
}
.velo-slides-nav a.js-velo-slides-prev:hover i:first-child {
-webkit-transform: translate(0, -.0225rem) rotate(30deg); transform: translate(0, -.0225rem) rotate(30deg); 
}
.velo-slides-nav a.js-velo-slides-prev:hover i:last-child {
-webkit-transform: translate(0, .0225rem) rotate(-30deg); transform: translate(0, .0225rem) rotate(-30deg); 
}
.velo-slides-nav a.js-velo-slides-prev:active i:first-child {
-webkit-transform: translate(.0225rem, -.0625rem) rotate(25deg); transform: translate(.0225rem, -.0225rem) rotate(25deg); 
}
.velo-slides-nav a.js-velo-slides-prev:active i:last-child {
-webkit-transform: translate(.0225rem, .0625rem) rotate(-25deg); transform: translate(.0225rem, .0225rem) rotate(-25deg); 
}
.velo-slides-nav a.js-velo-slides-prev.inactive i:first-child {
-webkit-transform: translate(-.3125rem, 0) rotate(0deg); transform: translate(-.3125rem, 0) rotate(0deg); 
}
.velo-slides-nav a.js-velo-slides-prev.inactive i:last-child {
-webkit-transform: translate(-.3125rem, 0) rotate(0deg); transform: translate(-.3125rem, 0) rotate(0deg); 
}
.velo-slides-nav a.js-velo-slides-prev.inactive:hover i:first-child {
-webkit-transform: translate(-.3125rem, 0) rotate(0deg); transform: translate(-.3125rem, 0) rotate(0deg); 
}
.velo-slides-nav a.js-velo-slides-prev.inactive:hover i:last-child {
-webkit-transform: translate(-.3125rem, 0) rotate(0deg); transform: translate(-.3125rem, 0) rotate(0deg); 
} .velo-slides-nav a.js-velo-slides-next i {
-webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; 
}
.velo-slides-nav a.js-velo-slides-next i:first-child {
-webkit-transform: translate(0, .0225rem) rotate(40deg); transform: translate(0, .0225rem) rotate(40deg); 
}
.velo-slides-nav a.js-velo-slides-next i:last-child {
-webkit-transform: translate(0, -.0225rem) rotate(-40deg); transform: translate(0, -.0225rem) rotate(-40deg); 
}
.velo-slides-nav a.js-velo-slides-next:hover i:first-child {
-webkit-transform: translate(0, .0225rem) rotate(30deg); transform: translate(0, .0225rem) rotate(30deg); 
}
.velo-slides-nav a.js-velo-slides-next:hover i:last-child {
-webkit-transform: translate(0, -.0225rem) rotate(-30deg); transform: translate(0, -.0225rem) rotate(-30deg); 
}
.velo-slides-nav a.js-velo-slides-next:active i:first-child {
-webkit-transform: translate(.0625rem, .0225rem) rotate(25deg); transform: translate(.0225rem, .0225rem) rotate(25deg); 
}
.velo-slides-nav a.js-velo-slides-next:active i:last-child {
-webkit-transform: translate(.0625rem, -.0225rem) rotate(-25deg); transform: translate(.0225rem, -.0225rem) rotate(-25deg); 
}
.velo-slides-nav a.js-velo-slides-next.inactive i:first-child {
-webkit-transform: translate(.3125rem, 0) rotate(0deg); transform: translate(.3125rem, 0) rotate(0deg); 
}
.velo-slides-nav a.js-velo-slides-next.inactive i:last-child {
-webkit-transform: translate(.3125rem, 0) rotate(0deg); transform: translate(.3125rem, 0) rotate(0deg); 
}
.velo-slides-nav a.js-velo-slides-next.inactive:hover i:first-child {
-webkit-transform: translate(.3125rem, 0) rotate(0deg); transform: translate(.3125rem, 0) rotate(0deg); 
}
.velo-slides-nav a.js-velo-slides-next.inactive:hover i:last-child {
-webkit-transform: translate(.3125rem, 0) rotate(0deg); transform: translate(.3125rem, 0) rotate(0deg); 
}
.velo-slides-nav a.inactive {
opacity: 0.3;
cursor: default; 
}