html, body {
    height: 100%;
}
html,body,div,header,nav,ul,li,a,h1,h2,h3,h5,img,iframe {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #fff;
}
header {
    height: 80vh;
    background: url("ui/header.jpg") no-repeat;
    background-size: cover;
    padding: 25px 10px;
}
header.subpage {
    height: auto;
    background: #fff;
}
header.subpage + section:first-child h3 {
    margin-bottom: 50px;
}
.logo {
    float: left;
}
.logo div {
    width: 170px;
    height: 59px;
    background: url("ui/logo.png");
    background-size: cover;
}
nav,
#burger-open {
    display: none;
}
.burger {
    width: 22px;
    height: 2px;
    background: #888;
    box-shadow: 0 8px 0 0 #888, 0 -8px 0 0 #888;
}
.burger-label {
    padding: 12px 4px;
    cursor: pointer;
    float: right;
    position: relative;
    z-index: 2;
}
#burger-open:checked ~ .burger-label .burger {
    transform: rotate(45deg);
    box-shadow: none;
    position: relative;
}
#burger-open:checked ~ .burger-label .burger::after {
    content: "";
    width: 100%;
    height: 100%;
    transform: rotate(90deg);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: #888;
}
#burger-open:checked ~ nav {
    display: block;
    background: #fff;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    left: auto;
    box-shadow: 0 -10px 11px 20px rgba(0,0,0,0.42);
    padding: 80px 0 0 0;
}
#burger-open:checked ~ nav ul {
    padding: 0;
}
#burger-open:checked ~ nav ul a {
    margin-left: 15px;
    margin-bottom: 10px;
    display: block;
}
nav,
.burger {
    float: right;
}
nav ul {
    padding: 17px 25px 60px 0;
}
nav ul li {
    display: inline-block;
    list-style: none;
    font: 400 18px/26px "Montserrat", sans-serif;
}
nav ul a {
    margin-left: 65px;
}
nav ul a.active li,
nav ul a:hover li {
    border-bottom: 3px solid #4ba2c3;
}
nav ul a li {
    color: #000;
}
header .promo {
    display: block;
    padding-top: 100px;
}
header h1 {
    font: 500 22px/30px "Montserrat", sans-serif;
    color: #fff;
    background: #4ba1c3bb;
    padding: 8px 13px;
    display: inline-block;
    box-shadow: 0 0 7px 3px rgba(0,0,0,0.12);
}
header h2 {
    font: 500 17px/26px "Montserrat", sans-serif;
    color: #fff;
    background: #656565c5;
    padding: 6px 10px;
    display: inline-block;
    margin-top: 30px;
    box-shadow: 0 0 7px 3px rgba(0,0,0,0.12);
}
p {
    font: 400 18px/32px "Open Sans", sans-serif;
    color: #000;
    margin: 0 0 35px;
}
h3 {
    font: 500 30px/40px "Montserrat", sans-serif;
    color: #000;
    margin: 35px auto;
    text-align: center;
}
h5 {
    font: 500 20px/28px "Montserrat", sans-serif;
    color: #000;
    margin: 10px 0;
}
.read-fix {
    max-width: 900px;
    margin: 0 auto 45px;
    padding: 0 12px;
}
a.button {
    color: #fff;
    font: 400 18px/26px "Open Sans", sans-serif;
    background: #4ba2c3;
    padding: 8px 15px;
    text-decoration: none;
    position: relative;
    box-shadow: 0 0 7px 3px rgba(0,0,0,0.12);
    transition: box-shadow 300ms ease;
}
a.button:hover {
    box-shadow: 0 0 3px 2px rgba(0,0,0,0.3);

}
a.button::after {
    content: ">";
    margin-left: 10px;
}
.row {
    margin-bottom: 100px;
    padding: 0 12px;
}
.row h3,
.row p {
    max-width: 1000px;
    text-align: left;
}
.row h3 {
    margin-bottom: 60px;
}
.row p {
    margin: 0 auto 45px;
}
.row a {
    display: inline-block;
    width: 100%;
    padding: 0 12px;
}
.row img {
    box-shadow: 0 0 7px 3px rgba(0,0,0,0.12);
    margin: 0 0 20px;
    width: 100%;
}
section {
    padding: 60px 0;
    background: #fff;
    text-align: center;
    display: block;
    clear: both;
    overflow: auto;
}
section > div {
    max-width: 1300px;
    margin: 0 auto;
}
section.blue-bg,
body.blue-bg,
body.blue-bg header,
body.blue-bg section {
    background: #dceaef;
}
.full-width-image {
    width: 100%;
    height: auto;
    margin: 0 0 50px;
}
.column {
    width: 100%;
    float: none;
    padding: 0 20px;
    text-align: center;
    margin: 0 auto;
}
.column img {
    width: 100%;
    padding: 40px;
    max-width: 500px;
}
.column h5 img {
    width: 20px;
    height: 20px;
    display: inline-block;
    padding: 0;
    margin-right: 10px;
}
iframe {
    border: 0;
    outline: 0;
    width: 100%;
    height: 450px;
    margin: 50px 0;
}
@media screen and (min-width: 420px) {
    .row a,
    .row img {
        width: auto;
    }
}
@media screen and (min-width: 768px) {
    header h1 {
        font-size: 30px;
        line-height: 40px;
    }
    header h2 {
        font-size: 20px;
        line-height: 26px;
    }
    .column {
        width: 50%;
        float: left;
        text-align: left;
    }
    .column + .column h3 {
        text-align: left;
    }
}
@media screen and (min-width: 1000px) {
    nav {
        display: block;
    }
    #burger-open,
    .burger-label {
        display: none;
    }
    header .promo {
        padding-top: 200px;
        padding-left: 80px;
    }
    header h1  {
        background: #4ba1c3;
    }
    header h2 {
        background: #656565;
        margin-top: 15px;
    }
    .column img {
        max-width: 100%;
    }
    iframe {
        margin-top: 0;
    }
}