body {margin: 0px; text-align: center; font-family: 'Typograph PROx';}
a {color: white; text-decoration: none;}
h1 {font-size: 50px; color: white; font-weight: 300; position: absolute; top: 50%; transform: translateY(-50%); left: 0px; right: 0px; margin: 0px; transition: font-size ease 0.25s;}
h2 {text-transform: uppercase; font-size: 45px; margin-top: -1px; padding-top: 30px; color: white; font-weight: 600;}
h2.color {color: #19B067;}

section {width: 100%; overflow: hidden; background-repeat: no-repeat; background-position-x: 50%; background-size: cover; position: relative;}
.s1 {height: 100vh; background: url(/images/s1bg.jpg); background-size: cover;}
.s2 {background-image: url(/images/bg.jpg); min-height: 700px; overflow: visible; padding-bottom: 10px;}
.s3 {background-image: url(/images/s3bg.jpg);}
.s4 {background-image: url(/images/bg.jpg);}
.s5 {background-image: url(/images/s4bg.jpg); background-size: 1200px;}
.s6 {background-image: url(/images/s5bg.jpg); background-size: 1200px;}
.s7 {background-image: url(/images/bg.jpg); font-family: Exox;}

nav {padding-top: 30px;}
nav ul {list-style: none; margin: 0px; padding: 0px; line-height: 1.5;}
nav li {display: inline-block; font-size: 20px; padding: 0px 30px; font-weight: 300; transition: padding ease 0.25s, font-size ease 0.25s;}
nav li:first-of-type {padding-left: 8px;}
nav li:last-of-type {padding-right: 8px;}
.black {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4)}
.downdiv {position: absolute; bottom: 50px; left: 0px; right: 0px; margin: 0px auto;}
.down img {height: 30px;}

.graphImage {display: none; width: 90%; max-width: 500px; margin: -10px auto 0px auto;}
svg {margin-top: 40px;}
.s3 p {font-size: 20px; color: #008667; font-weight: 600; text-align: left; width: 400px;}
.desktop .s3 p {color: #D3D3D3;}

.step2p {position: absolute; left: 0px; right: 30px; margin: 0px auto; top: 390px;}
.step3p {position: absolute; left: 120px; right: 0px; margin: 0px auto; top: 500px;}
.step4p {position: absolute; left: 120px; right: 0px; margin: 0px auto; top: 590px;}

.step1 {height: 100px; position: absolute; z-index: 6; top: 100px; left: 5px; right: 0px; margin: 0px auto;}
.step2 {height: 100px; position: absolute; z-index: 6; left: 340px; right: 0px; margin: 0px auto; top: 370px;}
.step3 {height: 100px; position: absolute; z-index: 6; left: 0px; right: 380px; margin: 0px auto; top: 440px;}
.step4 {height: 100px; position: absolute; z-index: 6; left: 0px; right: 365px; margin: 0px auto; top: 570px;}
.step5 {height: 100px; position: absolute; z-index: 6; left: 0px; right: 20px; margin: 0px auto; top: 750px;}

.desktop .step2, .desktop .step3, .desktop .step4 {opacity: 0;}

.step2g {height: 100px; position: absolute; z-index: 5; left: 340px; right: 0px; margin: 0px auto; top: 370px;}
.step3g {height: 100px; position: absolute; z-index: 5; left: 0px; right: 380px; margin: 0px auto; top: 440px;}
.step4g {height: 100px; position: absolute; z-index: 5; left: 0px; right: 365px; margin: 0px auto; top: 570px;}
.step5g {height: 100px; position: absolute; z-index: 5; left: 0px; right: 20px; margin: 0px auto; top: 750px;}

.videos {margin: 0px auto;}
.video {display: inline-block;}
.v {height: 200px; width: 200px; overflow: hidden; border-radius: 125px; margin: 10px auto; border: 7px solid white; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2);}
.headline {font-weight: 600; color: white; font-size: 20px; margin: 20px auto 50px auto; width: 280px;}
.video img {border: 0px; height: 200px; cursor: pointer;}
.mainvideo {display: none; position: fixed; z-index: 10; height: 100%; width: 100%; top: 0px; margin: 0px auto; left: 0px; right: 0px; background: rgba(0, 0, 0, 0.5)}
.mainvideo iframe {height: 80vh; width: 142.22vh; border: 0px; margin-top: 10vh;}
.close {position: fixed; top: 3vh; left: 0px; right: 0px; color: white; font-size: 20px; margin-left: 145vh; cursor: pointer;}
h3 {font-weight: 600; color: white; font-size: 25px;}

.content {width: 800px; padding: 0px 20px; margin: 0px auto; box-sizing: border-box;}
.bubleContent {position: absolute; left: 0px; right: 0px;}
.bubleContainer {height: 150px; width: 200px; position: absolute;}
.buble {background-size: cover; height: 150px; width: 200px; left: 50%; top: 50%; transform: translate(-50%, -50%); background-size: cover; margin: 0px auto; font-size: 23px; position: absolute; cursor: pointer; padding: 0px; display: table; transition: height ease 0.25s, width ease 0.25s, font-size ease 0.25s, top ease 0.25s, left ease 0.25s, right ease 0.25s, transform ease 0.25s;}
.buble:hover, .clone .buble {height: 180px; width: 240px; font-size: 27px;}
.buble.expanded {left: 50% !important; height: 450px; width: 600px;}
.bubleInside {position: relative; height: 100%; width: 100%;}
.bubleInside div {position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); box-sizing: border-box;}
div.a {color: #19B067; font-weight: 600; padding: 0px 5px;}
div.b {display: none; font-size: 20px; padding: 30px 30px 40px 30px;}
.b1, .b4 {top: 0px; left: 30px;}
.b2, .b5 {top: 180px; left: 210px;}
.b3, .b6 {top: 360px; left: 30px;}
.b4, .b6 {left: 390px;}
.b5 {left: 570px;}
.l {background-image: url(/images/bublina.svg);}
.r {background-image: url(/images/bublina2.svg);}
.clone .buble {position: absolute; z-index: 10; transform: translate(-50%, -50%);}

.reference {width: 600px; margin: 0px auto; text-align: justify; color: #4E4E4E; font-family: Exox; font-weight: 400; font-size: 15px; position: absolute; left: 0px; right: 0px;}
.reference:not(.active) {display: none;}
.reference span {font-size: 18px; margin-bottom: 5px; display: block;}
.person {margin: 30px auto; text-align: center; position: absolute; top: 330px; left: 0px; right: 0px; display: block;}
.right, .left {height: 20px; cursor: pointer;}
.left {margin-right: 90px;}
.right {transform: rotate(180deg); margin-left: 90px;}
span.name {position: absolute; margin: 5px; font-size: 25px; font-weight: 600; text-transform: uppercase; display: inline; left: 0px; right: 0px; top: -12px; z-index: -1;}
.name:not(.active) {display: none;}
hr {margin: 0px; height: 5px; border: 0px; background-color: #7FC0B3; margin-top: 350px;}

.price {font: 25px Exox; font-weight: 600; color: #4E4E4E; margin-bottom: 60px;}

.top {width: 840px; background-color: white; margin: 0px auto; border-left: 5px solid #026c45; text-align: left; padding: 0px 15px; margin-bottom: 30px; color: #026c45; display: table; box-sizing: border-box;}
.col {display: table-cell; vertical-align: middle;}
.contactname {font-size: 30px; font-weight: 600;}
.top p {margin: 6px;}
.icon {height: 40px; margin: 5px 10px;}
.description {font-size: 18px; color: #008667; position: relative; top: -18px; font-weight: 600;}
.point {height: 120px; margin: 15px 0px;}

.bottom {width: 840px; margin: 0px auto; text-align: center; padding-bottom: 30px;}
.send {display: block;}
input, textarea {height: 30px; padding: 7px 10px; font: 17px Exox; margin-right: 10px; width: 270px; margin-bottom: 10px; border: 0px; outline: 0px;}
textarea {resize: none; border: 0px; width: 570px; padding: 10px; height: 150px;}
input[type=submit] {display: block; width: 100px; background: #008667; color: white; text-transform: uppercase; box-sizing: content-box; cursor: pointer;}
.contact {height: 278px; float: right;}

footer {height: 70px; width: 100%; background: #008667;}
.love {height: 50px; margin: 10px; float: left;}
.up {height: 50px; margin: 10px; float: right; cursor: pointer;}
.full {position: absolute; opacity: 0; z-index: 5; right: 0px;}

@media (min-width: 801px) {
    .buble.expanded {top: 50% !important;}
}

@media (max-width: 980px) {
    .mainvideo iframe {width: 90vw; height: calc(90vw / 16 * 9);}
    .close {display: none;}
}

@media (max-width: 850px) {
    .top {height: 155px; width: 590px;}
    .bottom {width: auto;}
    .point {display: none;}
    .contact {display: none;}
    input, textarea {margin: 0px 5px 10px 5px;}
    input[type=submit] {margin: 0px auto;}
}

@media (max-width: 800px) {
    nav li {padding: 0px 10px;}
    h1 {font-size: 40px;}
    .bubleContainer {position: relative; top: 0px !important; left: 0px !important; margin: 15px auto;}
    .bubleContent {width: auto; position: static;}
}

@media (max-width: 650px) {
    .reference {width: 90%;}
    .person {top: 350px;}
    div.b {font-size: 17px;}
    .buble.expanded {height: 375px; width: 500px;}
}

@media (max-width: 610px) {
    input, textarea {display: block; margin: 10px auto; width: 90%; max-width: 265px;}
    .contactBr {display: none;}
    .top {width: auto;}
    .col {display: block; padding: 5px;}
    .graph {display: none;}
    .graphImage {display: block;}
}

@media (max-width: 600px) {
    nav li {font-size: 15px;}
    h1 {font-size: 30px;}
    .space {display: none;}
    .price {font-size: 20px;}
}

@media (max-width: 500px) {
    hr {margin-top: 400px;}
    .person {top: 400px;}
    .space {display: none;}
    .price {font-size: 20px;}
    .love {height: 40px;}
    .clone .buble {background: white; border: 5px solid #008163; width: 90%; height: 300px;}
    .clone .b {padding: 10px;}
}

@media (max-width: 400px) {
    .reference span {font-size: 15px;}
    hr {margin-top: 450px;}
    .person {top: 450px;}
    .love {display: block; margin: 0px auto; float: none; padding: 10px;}
    .up {display: block; float: none; margin: 0px auto; padding-bottom: 10px; opacity: 1 !important;}
    .full {display: none;}
    footer {height: auto;}
}

@media (max-width: 350px) {
    hr {margin-top: 500px;}
    .person {top: 500px;}
    .space {display: block; opacity: 0;}
    .love {height: auto; width: 90%;}
}

@font-face {font-family: 'Typograph PROx'; font-weight: 200; src: url(/font/typograph200.ttf);}
@font-face {font-family: 'Typograph PROx'; font-weight: 300; src: url(/font/typograph300.ttf);}
@font-face {font-family: 'Typograph PROx'; font-weight: 600; src: url(/font/typograph600.ttf);}
@font-face {font-family: 'Typograph PROx'; font-weight: 800; src: url(/font/typograph800.ttf);}
@font-face {font-family: 'Exox'; font-weight: 400; src: url(/font/exo400.otf);}
@font-face {font-family: 'Exox'; font-weight: 600; src: url(/font/exo600.otf);}
@font-face {font-family: 'Exox'; font-weight: 700; src: url(/font/exo700.otf);}