@import "fonts.css";

html, body {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    min-width: 1300px;
    font-family: 'Geometria', sans-serif;
    background-color: #ddd;
}
body{
    -webkit-text-size-adjust: 100%;
}
body * {
    font-family: 'Geometria', sans-serif;
    color: #333;
}

h1 {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}

#main-container {
    width: 1300px;
    margin: 0 auto;
    padding: 0;
}

header {
    background: url('/img/header-bg.png') no-repeat;
    background-size: cover;
    box-shadow: inset 0 -1px 28px 7px rgba(89, 82, 71, 0.294);
    height: 521px;
    position: relative;
}

    #title {
        display: block;
        position: absolute;
        top: 15px;
        left: 465px;
    }
    #tel {
        font-size: 24px;
        color: #fff;
        font-weight: bold;
        text-shadow: 1px 1px 2px rgba(140, 145, 118, 1);
        position: absolute;
        top: 35px;
        right: 80px;
    }

    #caption {
        font-size: 48px;
        text-align: center;
        position: absolute;
        width: 100%;
        top: 175px;
    }
    #mercury {
        font-weight: bold;
        color: #ff5c5c;
        text-shadow: 0 0 24px #ff5c5c;
    }
    #radiation {
        font-weight: bold;
        color: #ffc516;
        text-shadow: 0 0 24px #fff500;
    }

    #icons {
        position: absolute;
        top: 340px;
        text-align: center;
        width: 100%;
    }

    #icons > div {
        border-radius: 6px;
        background-color: rgba(255, 255, 255, 0.6);
        display: inline-block;
        margin: 0 41px;
        text-align: center;
    }
    #icons > div:first-child {
        margin-left: 0;
    }
    #icons > div:last-child {
        margin-right: 0;
    }
    #icons > div > .icn {
        border-radius: 6px;
        background-color: #fff;
        box-shadow: 1px 1px 2px 0 rgba(140, 145, 118, 0.294);
        width: 92px;
        height: 80px;
        margin: 10px 10px 5px;
        text-align: center;
        display: inline-block;
    }
    #icons > div > .text {
        font-weight: 600;
        color: #333;
        font-size: 24px;
        text-align: center;
        padding: 0 10px 10px;
    }
    #icn-flat .icn {
        background: url('/img/icn-flat.png') center no-repeat;
    }
    #icn-house .icn {
        background: url('/img/icn-house.png') center no-repeat;
    }
    #icn-office .icn {
        background: url('/img/icn-office.png') center no-repeat;
    }
    #icn-stacks .icn {
        background: url('/img/icn-stacks.png') center no-repeat;
    }

.offer {
    background: url('/img/offer-bg.png') no-repeat;
    background-size: cover;
    box-shadow: inset 0 -2px 10px rgba(89, 82, 71, 0.25);
    position: relative;
    padding-bottom: 13px;
}
    .offer h1 {
        margin: 0;
        padding: 30px 0 7px;
        color: #ff9000;
        text-transform: uppercase;
        text-shadow: 0 1px 1px #ab3400;
    }

    .offer .trapezoid {
        margin: 0 auto;
        text-align: center;
        border-top: 85px solid #fc9816;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        height: 0;
        overflow: visible;
        width: 450px;
        color: #fff;
        font-size: 24px;
        position: relative;
    }
    .offer .trapezoid p {
        margin: 0;
        text-align: center;
        width: 100%;
        position: absolute;
        top: -75px;
        color: #fff;
    }
    .offer .trapezoid p strong {
        color: inherit;
    }

    .offer form {
        margin: 25px auto 0 auto;
        width: 225px;
    }
    .offer form fieldset {
        border: 0 none;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .offer form fieldset input {
        width: 100%;
        height: 37px;
        line-height: 37px;
        vertical-align: middle;
        font-size: 18px;
        background-color: #fff;
        text-align: center;
        border-radius: 5px;
        box-shadow: inset 0 1px 1px rgba(108, 105, 94, 0.75);
        border: 0;
    }
    .offer form fieldset input.has-error {
        background-color: #fcc;
    }
    .offer form button {
        margin-top: 17px;
        width: 100%;
        height: 41px;
        line-height: 41px;
        vertical-align: middle;
        text-align: center;
        font-size: 18px;
        border-radius: 5px;
        background-color: #ff9000;
        box-shadow: 0 2px 5px 1px rgba(205, 81, 6, 0.75);
        border: 0 none;
        color: #fff;
        cursor: pointer;
    }
    .offer form button:disabled {
        /*background-color: #666;*/
        cursor: not-allowed;
    }
    .offer form button.success {
        /*background-color: #01bc0e;*/
    }

    .offer > p {
        font-size: 18px;
        color: #997f5e;
        text-align: center;
        margin: 10px auto;
    }

.video {
    background: url('/img/video-bg.png') no-repeat;
    background-size: cover;
    position: relative;
    padding: 50px 0 20px;
}
    .video .video-js {
        border-radius: 7px;
        border: 2px solid #fff;
        box-shadow: 0 3px 2px rgba(140, 145, 118, 0.75);
        margin: 0 auto;
        display: block;
        cursor: pointer;
    }
    .video p {
        font-weight: bold;
        font-size: 24px;
        text-align: center;
        font-style: italic;
        margin-top: 30px;
    }

.explain {
    padding: 50px 0 95px;
    background-color: #fff;
}
    .explain table {
        border: 0 none;
        border-collapse: collapse;
        margin: 0 auto;
    }
    .explain td {
        padding: 0;
        position: relative;
    }
    .explain tr:not([colspan]) td:not(:last-child) {
        padding-right: 30px;
    }
    .explain td.bg h1 {
        background-size: cover;
        padding-left: 21px;
        width: 100%;
        box-sizing: border-box;
        line-height: 100px;
        font-size: 36px;
        font-weight: bold;
        text-transform: uppercase;
        margin: 0;
        text-align: left;
        border-radius: 7px;
    }
    td#hg-bg h1 {
        background: url('/img/hg-bg.png') no-repeat;
        background-size: cover;
    }
    td#rad-bg h1 {
        background: url('/img/rad-bg.png') no-repeat;
        background-size: cover;
    }
    .explain h2 {
        font-weight: bold;
        font-size: 36px;
        text-align: center;
        margin: 40px 0 0;
    }
    .explain .list ul {
        padding-left: 15px;
    }
    .explain .list li {
        list-style: none;
        font-size: 24px;
        margin: 10px 0;
        padding-left: 15px;
    }
    .explain #hg-list li {
        background: url('/img/hg-bullet.png') no-repeat left 15px;
    }
    .explain #rad-list li {
        background: url('/img/rad-bullet.png') no-repeat left 15px;
    }
    .explain .list-grad dl {
        border-radius: 7px;
        padding: 40px 15px;
        width: 100%;
        box-sizing: border-box;
    }
    #hg-list-grad dl {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff7777+0,fb4e4e+100 */
        background: #ff7777; /* Old browsers */
        background: -moz-linear-gradient(left, #ff7777 0%, #fb4e4e 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff7777), color-stop(100%,#fb4e4e)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, #ff7777 0%,#fb4e4e 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, #ff7777 0%,#fb4e4e 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left, #ff7777 0%,#fb4e4e 100%); /* IE10+ */
        background: linear-gradient(to right, #ff7777 0%,#fb4e4e 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7777', endColorstr='#fb4e4e',GradientType=1 ); /* IE6-9 */
    }
    #rad-list-grad dl {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffba00+0,ffde00+100&0.8+0,0.8+100 */
        background: -moz-linear-gradient(left, rgba(255,186,0,0.8) 0%, rgba(255,222,0,0.8) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,186,0,0.8)), color-stop(100%,rgba(255,222,0,0.8))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(255,186,0,0.8) 0%,rgba(255,222,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(255,186,0,0.8) 0%,rgba(255,222,0,0.8) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(255,186,0,0.8) 0%,rgba(255,222,0,0.8) 100%); /* IE10+ */
        background: linear-gradient(to right, rgba(255,186,0,0.8) 0%,rgba(255,222,0,0.8) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffba00', endColorstr='#ccffde00',GradientType=1 ); /* IE6-9 */
    }
    .explain .list-grad dt {
        background: url('/img/black-bullet.png') no-repeat left 15px;
        font-size: 24px;
        margin: 0;
        padding-left: 15px;
    }
    .explain .list-grad dd {
        font-style: italic;
        font-size: 18px;
        margin: 0 0 15px;
        padding-left: 15px;
    }

.report-header {
    padding: 0;
    background-color: #fff;
    margin: 0;
}
    .report-header h1 {
        font-size: 36px;
        text-align: center;
        padding: 50px 0 10px;
        margin: 0;
    }
    .report-header h2 {
        color: #9a9792;
        font-size: 18px;
        font-weight: normal;
        text-align: center;
        padding: 10px 0;
        margin: 0;
    }
    .report-header p {
        color: #aeaeae;
        font-size: 18px;
        font-style: italic;
        text-align: center;
        margin: 0;
        padding-bottom: 2px;
    }
.report-map {
    background: url('/img/map.png') no-repeat left top;
    background-size: 1300px 450px;
    height: 450px;
    width: 1300px;
    margin: 0 auto;
    position: relative;
    box-shadow: inset 0 0 10px rgba(60, 54, 42, 0.75);
}
    .report-map .map-marker {
        position: absolute;
        background: url('/img/map-marker.png') no-repeat left top;
        background-size: 62px 77px;
        height: 77px;
        width: 62px;
        padding: 13px 0;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
        box-sizing: border-box;
        text-decoration: none;
    }

.report-links {
    text-align: center;
    background-color: #fff;
}
    .report-links a {
        display: inline-block;
        font-size: 18px;
        text-decoration: underline;
        color: inherit;
        line-height: 18px;
        margin: 0 15px;
        cursor: pointer;
        padding-top: 2px;
    }
    .report-links a img {
        display: inline-block;
        vertical-align: middle;
    }

.feedback {
    padding: 30px 0 80px;
    background-color: #fff;
}
    .feedback table {
        border: 0 none;
        border-collapse: collapse;
        margin: 0 auto;
    }
    .feedback table td {
        padding: 0;
        vertical-align: middle;
    }
    .feedback table tr:not(:first-child) td {
        padding-top: 30px;
    }
    .feedback td.feedback-text div {
        padding: 22px;
        border-radius: 4px;
        border: 1px solid #eee;
        box-shadow: 2px 2px 2px 0 rgba(140, 145, 118, 0.55);
        width: 800px;
        margin-right: 22px;
    }
    .feedback td.feedback-text div h2 {
        font-size: 22px;
        font-weight: bold;
        text-align: left;
    }
    .feedback td.feedback-text div p {
        font-size: 22px;
    }
    .feedback td.hg-calm {
        width: 42px;
        height: 50px;
        background: url('/img/hg-calm.png') no-repeat center center;
        background-size: 42px 50px;
    }
    .feedback td.hg-detected {
        width: 42px;
        height: 50px;
        background: url('/img/hg-detected.png') no-repeat center center;
        background-size: 42px 50px;
    }
    .feedback td.rad-calm {
        width: 70px;
        height: 50px;
        background: url('/img/rad-calm.png') no-repeat center center;
        background-size: 52px 50px;
    }
    .feedback td.rad-detected {
        width: 70px;
        height: 50px;
        background: url('/img/rad-detected.png') no-repeat center center;
        background-size: 52px 50px;
    }

footer {
    text-align: center;
    padding: 20px 0;
    background-color: #fff;
}
    footer p {
        font-size: 14px;
        margin: 0;
        line-height: 20px;
        vertical-align: middle;
    }