@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

body, html {font-family: "Open Sans"; font-size: 18px; background: #fff; margin: 0; padding: 0; color: #000; position: relative;}
input, select, textarea {font-family: "Open Sans"; font-size: 1rem;}

/* font size adaptation for different screen sizes */
@media screen and (max-width: 1199px) {body, html {font-size: 15px;}}

a {text-decoration: none; color: #04a1da; border-bottom: rgba(4,161,218,0.4) 1px solid;
    -webkit-transition: all 0.6s;
       -moz-transition: all 0.6s;
        -ms-transition: all 0.6s;
         -o-transition: all 0.6s;
            transition: all 0.6s;
    }
a:hover {border-bottom-color: rgba(4, 161, 218, 1);
    -webkit-transition: all 0.1s;
       -moz-transition: all 0.1s;
        -ms-transition: all 0.1s;
         -o-transition: all 0.1s;
            transition: all 0.1s;
    }

.content {width: 90%; max-width: 1300px; margin: 0 auto;}
.section {}
.mobile-only {display: none;}

h1, h2, h3 {font-weight: bold; margin-bottom: 2rem; margin-top: 0;}

p {line-height: 140%;}

/* responsive columns */
.row {margin: 0 -2rem;}
.row:after {content: ""; clear: both; display: block;}
.col, .col-right {padding: 0 2rem; float: left; min-height: 1px;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.col-right {float: right;}
.col-20 {width: 20%;}
.col-25 {width: 25%;}
.col-33 {width: 33.33%;}
.col-35 {width: 35%;}
.col-50 {width: 50%;}
@media screen and (max-width: 767px) {
    .col, .col-right {width: 100%;}
}

/* icons */
.home-icon {width: 100px; height: 100px; display: inline-block; vertical-align: top; background: url(../img/home-icons.png); background-size: 400px 200px;}
.home-icon-type {background-position: 0 0;}
.home-icon-edit {background-position: -100px 0;}
.home-icon-format {background-position: -200px 0;}
.home-icon-check {background-position: 0 -100px;}
.home-icon-correct {background-position: -100px -100px;}

/* buttons */
.button {display: inline-block; padding: 15px 40px; text-align: center; border-radius: 4px; white-space: nowrap;
    background: #04A1DA; color: #fff; border: 0; text-transform: uppercase; letter-spacing: 0.1em; text-align: center;
    }
.button:hover {background: #00bbff;}

/* sections */
.section {padding: 4rem 0; overflow: hidden;}

/* footer */
.footer {background: #f5f5f5; font-size: 0.8rem; color: #999; text-align: center;}
.footer a {color: #999; border-bottom: rgba(0,0,0,0.1) 1px solid; margin: 0 0.5rem;}
.footer a:hover {color: #000; border-bottom-color: rgba(0,0,0,0.4);}
.footer .content {border-top: rgba(0,0,0,0.1) 1px solid; padding: 4rem 0;}
.footer-links {margin-top: 1rem;}

/* popup windows */
.popup-overlay {position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 100%; background: rgba(0,0,0,0.5); z-index: 20;}
.popup-overlay.is-hide {visibility: hidden; opacity: 0}
.popup {background: #fff; box-shadow: 0 15px 60px rgba(0,0,0,0.15); margin: 10rem auto; width: 90%; max-width: 450px; padding: 3.5rem;
    border-radius: 4px; position: relative; box-sizing: border-box;
    }
@media screen and (max-width: 767px) {
    .popup {padding: 3rem 1.5rem;}
}
.popup-close {position: absolute; top: 0.5rem; right: 1.5rem; color: #000; border-bottom: 0; font-size: 2.5rem; opacity: 0.4;}
.popup-close:hover {opacity: 1;}
.popup-title {text-transform: uppercase; letter-spacing: 0.1em; text-align: center;}
.popup-intro {margin: 3.5rem 0;}

/* forms */
.form-group {display: block; margin-bottom: 1.5rem;}
.form-input {padding: 0.5rem 0; width: 100%; box-sizing: border-box; border: 0; border-bottom: rgba(0,0,0,0.1) 1px solid;}
.form-input:focus {border-bottom-color: #04a1da; outline: none;}
.form-buttons .button {display: block; padding-left: 0; padding-right: 0; width: 100%;}

/* homepage */
.home h2 {font-size: 2.3rem; line-height: 130%;}
.home-top {background: #bebebe url(../img/home-top.jpg) 50% 50% no-repeat; background-size: cover; color: #fff; padding-top: 1.5rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }
.home-top .logo {margin-bottom: 3rem;}
@media screen and (max-width: 767px) {
    .home-top {background-position: 0 0; text-align: center;}
    .home-top .logo {margin: 3rem 0;}
    .home-top .logo img {margin: 0 auto;}
}
.home-top p {line-height: 130%;}
.home-top .logo img {width: 120px; height: 105px; display: block;}
.home-top .button {margin-top: 3rem; text-shadow: none;}
@media screen and (max-width: 767px) {
    .home-top .button {display: block;}
}
.home-howitworks {text-align: center; overflow: hidden; padding-bottom: 1rem;}
.home-howitworks .content {overflow: visible;}
.home-howitworks-graph {position: relative; width: 110.6%; left: -4.8%; padding-top: 43%; overflow: hidden; height: 0; margin-top: 3rem;
    background: url(../img/home-sheet.png) 0 0 no-repeat; background-size: contain;
    }
.home-howitworks-graph .row {display: flex; align-items: center;}
@media screen and (max-width: 1199px) {
    .home-howitworks-graph {height: 500px; padding-top: 0; background-size: 100% 500px;}
    .home-howitworks-graph .row {margin: 0 -0.5rem;}
    .home-howitworks-graph .col {padding: 0 0.5rem; font-size: 0.9rem;}
}
.home-howitworks-graph .col-step {position: relative;}
.home-howitworks-graph .col-step:after {content: ""; background: url(../img/home-dots.png) 0 0 repeat-x; background-size: 10px 6px; height: 3px; width: 50%;
    position: absolute; left: 75%; top: 50px;
    }
.home-howitworks-after .col-step:after {background-position: 0 -3px;}
.home-howitworks-graph .home-icon {display: block; margin: 0 auto;}
.home-howitworks-before {position: absolute; top: 0; bottom: 57%; left: 5.3%; right: 6.2%;}
.home-howitworks-after {position: absolute; top: 43%; bottom: 17%; left: 5.3%; right: 6.2%; color: #fff;}
@media screen and (max-width: 767px) {
    .home-icon {width: 50px; height: 50px; background-size: 200px 100px;}
    .home-icon-type {background-position: 0 0;}
    .home-icon-edit {background-position: -50px 0;}
    .home-icon-format {background-position: -100px 0;}
    .home-icon-check {background-position: 0 -50px;}
    .home-icon-correct {background-position: -50px -50px;}

    .home-howitworks-graph {background: transparent; height: auto; position: static; width: 100%; overflow: visible;}
    .home-howitworks-graph .row {display: block; margin: 0; padding: 1rem 0;}
    .home-howitworks-graph .col {display: block; margin-bottom: 1.5rem; font-size: 12px;}
    .home-howitworks-graph .col-step, .home-howitworks-graph .col-step-last {width: 33%; float: left;}
    .home-howitworks-graph .col-step:after {top: 25px;}
    .home-howitworks-before, .home-howitworks-after {position: static; box-shadow: 0 10px 40px rgba(0,0,0,0.2);}
    .home-howitworks-before {background: #e7e7e7;}
    .home-howitworks-after {background: #049cd8;}
}
.home-about {background: #f5f5f5; padding-bottom: 0;}
.home-about .col {padding-bottom: 8rem;}

.home-about .content {position: relative;}
.home-about-logo {position: absolute; bottom: 0; right: 0; width: 33%; padding-top: 33%; height: 0; background: url(../img/home-logo-large.png) 100% 100% no-repeat;
    background-size: contain; opacity: 0.05;
    }
@media screen and (max-width: 767px) {
    .home-about .col {padding-bottom: 0;}
    .home-about-logo {width: 50%; padding-top: 50%; position: static; margin: 2rem auto 0;}
}

img {
    max-width: 100%;
    height: auto;
}