﻿html, body {
    height:100%;
    margin: 0 auto;
    padding: 0;
    line-height:1.2;
    max-width: 1440px;
    min-width: 768px;
}

header > * { background-color: inherit; }

h1 { font-size: 26px; }

a, p > i, label > i { font-style: normal; white-space: nowrap; }

li { display: inline-block; list-style: none; }

.clear { clear:both; }
.color-dark { color: #545454; }

.cta { padding-top: 15px; font-weight: 900; }
.cta-phone { font-size: 2em; position: relative; margin-left: 30px; display: inline-block; line-height: 40px; }
.cta-phone:before {
    content: "";
    position: absolute;
    background: url(img/phone-blu.png) no-repeat;
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    background-size: 60px;
    left: -75px;
    top: 10px;
}
.cta-phone .cta-text { font-size: 1.2em; }

div.timer {
    text-align: center;
    font-size: 1em;
    min-width: 460px;
    width: 100%;
    margin-top: 50px;
}

div.timer label { vertical-align:bottom; }

div.timer ul {
    margin: 0;
    padding: 0;
    vertical-align: -webkit-baseline-middle;
    font-size: 1em;
    white-space: nowrap;
}

div.timer li { 
    background: #fff;
    position: relative;
    margin: 0 5px;
    padding: 5px 20px;
}

div.timer li:first-child {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

div.timer li:last-child {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

div.timer li span { padding: 0; position:relative; display: inline-block; font-weight: 800; }
div.timer li span:last-child { padding-right: 12px; }

div.timer li span:last-child::after {
    /*position: absolute;
    top: 25%;
    text-align: center;
    width: 100%;
    display: contents;*/
    font-weight: normal;
    padding-left: 5px;
}

div.timer li.days span:last-child::after { content:'Days' }
div.timer li.hours span:last-child::after { content:'Hours' }
div.timer li.mins span:last-child::after { content:'Minutes' }
div.timer li.secs span:last-child::after { content:'Seconds' }

header { 
    padding: 50px 0; 
    font-size: 20px; 
    background-color: #fff; 
    text-align: center;
    width: 100%;
    max-width: 1440px;
    min-width: 320px;
    margin-bottom: 100px;
}

header .cta-phone { color: #2874a4; font-weight: 700; }

header > div:first-child {
    text-align: left;
    font-size: 1.5em;
}

header > div:last-child {
    text-align: right;
}

section { 
    padding-bottom: 20px; 
    margin: 0 auto;
    text-align: center;
}

section.hero {
    background: url(img/hero-bg.png) no-repeat;
    background-size: cover;
    width: 100%;
    height: 44vw;
    min-height: 337px;
    max-height: 631px;
    position: relative;
}

section.hero .hero-header {
    font-size: 26px;
    background-color: #b1d3ea;
    background-color: rgba(177,211,234,.8);
    border-radius: 25px;
    max-width: 75%;
    margin: 0 auto;
    text-align: left;
    padding: 25px;
}

section.hero .hero-header img { margin-top: 50px; }

section.hero .download { 
    display: none; 
    position: absolute;
    bottom: -70px;
}

.download {
    margin: 0 auto;
    width: 100%;
}

.download a.btn {
    background-color: #1e597e;
    color: #fff;
    height: 50px;
    border-radius: 15px;
    border: none;
    font-size: 2em;
}

section.download {
    margin-top: 30px;
}

section.download a.btn {
    font-size: 2em;
    height: 195px;
    line-height: 37px;
    width: 230px;
}

.hero-download a.btn span {
    padding: 20px;
}

section.download img {
    width: 30%;
}

section.download a.btn span {
    white-space: pre-wrap;
}

section.offer-expires {
    background-color: #b1d3ea;
    font-size: 2em;
    padding: 50px 0;
}

section.offer-expires .calendar {
    position: relative;
    max-width: 75%;
    display: inline-block;
    text-align: left;
}

section.offer-expires .calendar i {
    font-style: normal;
    font-size: .8em;
}

section.offer-expires .calendar::before {
    content:"";
    background: url(img/calendar-icon.png) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    background-size: 60px;
    left: -75px;
    top: 2px;
}

section.content > div { padding: 25px 0; }

section.content .section-1 .row {
    font-size: 1.8em;
    background-color: #e0eef8;
    margin-top: 25px;
    padding: 45px 5px;
    text-align: left;
    border-radius: 25px;
}

section.content .section-1 .row h2 { 
    font-size: 1.6em; 
    margin: 0;
    padding: 0;
}

section.content .section-1 .row p {
    padding: 10px;
}

section.content .section-2,
section.content .section-3 { font-size: 2em; }

section.content .section-2 p { font-size: .8em; margin: 10px 0; }
section.content .section-2 label { display: block; }
section.content .section-2 .btn {
    background-color: #1e597e;
    color: #fff;
    cursor: pointer;
    font-size: 2em;
    border-radius: 20px;
}

section.content .section-3 h3,
section.content .section-6 h3 {
    color: #1e597e;
    font-size: 1.5em;
    font-weight: 900;
    padding: 0;
    margin: 30px 0;
}

section.content div.row {
    margin: 0 auto;
    width: 100%;
    max-width: 650px;
}

section.content .section-3 div.col {
    background: #ebebeb;
    border-radius: 20px;
    padding: 20px 40px;
    margin: 20px auto;
    color: #666666;
}

section.content .section-3 div.col img { display: inline-block; }
section.content .section-3 div.col label { padding: 20px 0 5px; }


section.content .section-4,
section.content .section-7
{ background-color: #b1d3ea; }

section.content .section-4 div.h2 { font-style:italic; }
section.content .section-4 ul.providers {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

section.content .section-4 ul.providers li {
    padding: 30px;
}

section.content .section-4 ul.providers li.nowrap { width: 100%; }

section.content .section-5,
section.content .section-6,
section.content .section-7
{ font-size: 2.3em; }

section.content .section-5 h3 { 
    font-weight: 700; 
    font-style: italic; 
    color:#1e597e; 
    font-size: 1.3em;
    margin-bottom: 80px;
}

section.content .section-5 > div.row { text-align: left; margin: 50px auto; }
section.content .section-5 > div.row > div { padding: 10px 50px; }
section.content .section-5 > div.row > div label { margin-bottom: 20px; }

section.content .section-6 div.row { font-size: .9em; }
section.content .section-6 div.col {
    background: #ebebeb;
    border-radius: 20px;
    padding: 40px;
    margin: 20px auto;
    color: #666666;
}

section.content .section-6 div.col img { margin-bottom: 10px; }

section.content .section-7 > div { 
    position: relative; 
    display: inline-block; 
    text-align:left; 
    font-size: .8em;
    margin: 0 120px;
}

section.content .section-7 > div::before {
    content: "";
    position: absolute;
    background: url(img/phone-blk.png) no-repeat;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    background-size: 60px;
    left: -75px;
    top: 10px;
    display: none;
}

section.content .section-7 img { 
    display: block;
    margin: -15px auto 10px;
    width: 60px;
}

section.content .section-7 > div div {
    margin-bottom: 10px;
}

section.content .section-7 > div a,
section.content .section-7 > div a:visited {
    color: #073b5c;
    font-weight: 900;
}

section.content .section-7 span { font-size: .8em; }

section.content .section-8 { 
    font-size: 2.5em; 
    margin: 0 auto;
}

section.content .section-8 > div {
    font-weight: 700;
}

section.content .section-8 > div > div:first-child {
    font-size: 1.7em;
    margin-bottom: 20px;
}

section.content .section-8 > div > div:last-child {
    color: #1e597e;
}

footer {
    background-color: #1e597e;
    color: #fff;
    font-size: 1.4em;
    padding: 30px;
}

footer p { margin: 20px; }
footer a,
footer a:visited,
footer a:hover { color: #fff; white-space: normal; }

@media only screen and (min-width:767px) {
    h1 { font-size: 3.5vw; }
    section.content .section-1 .row { font-size: 2.3vw; }
}

@media only screen and (min-width:991px) {
    .download { display: none; }
    section.hero .download { display: block }
    section.hero .hero-header img { margin-top:0; }

    section.offer-expires { padding: 100px 0; }

    section.content div.row { display: inline-flex; max-width: 100%; }
    section.content div.col { max-width: 28%; }

    section.content .section-7 > div { margin: 0 auto; }
    section.content .section-7 img { display: none; }
    section.content .section-7 > div::before { display: inline-block; }
}

@media (min-width: 1440px) {
    h1 { font-size: 50px; }
    section.hero .hero-header {
        margin: 10px 205px;
        float: right;
    }
    section.offer-expires .calendar { max-width: 100%; }

    section.content .section-1 div.row {
        font-size: 2em;
        padding: 45px;
    }

    section.content .section-4 ul.providers li.nowrap {
        width: auto;
    }

    section.content .section-8 {
        text-align: right;
        background: url(img/active-woman.png) no-repeat;
        background-size: contain;
        border-radius: 25px;
        width: auto;
        height: 391px;
        margin: 50px 40px;
    }

    section.content .section-8 > div {
        float: right;
        max-width: 45%;
    }
}

