body {
    font-family: "proxima-nova", sans-serif;
    font-weight: normal;
    color: #606060;
}
h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #262526;
}
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
    max-width: 100%;
}
img {
    border:none;
    height:auto !important;
}
a {
    color: inherit;
}

.clear-float {
    clear:both;
}

/** custom **/
.highlight {
    color: #1993E0;
}
.yellow-text {
    color: #FFD500;
}
.big {
    font-size: 30px;
}
.sub-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: #1993E0;
}

.button,
.yellow {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    padding: 10px 40px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
    border-radius: 40px;
    max-width: 100%;
    background-color: #e0ded2;
    background-color: rgba(38,37,38,0.2);
    border: 2px solid #0FA6E0;
    box-sizing: border-box;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.yellow {
    font-size: 16px;
    padding: 10px 20px;
    background-color: #FECB00;
    border: none;
}
.yellow-block .button {
    background-color: #e8ba04;
    background-color: rgba(38,37,38,0.2);
}
.dark-block .button {
    background-color: #1e1c1f;
    background-color: rgba(38,37,38,0.2);
}
.dark-block h1,
.dark-block h2,
.dark-block h3,
.dark-block h4 {
    color: #FFF;
}

.button:hover,
.yellow:hover,
.yellow-block .button:hover,
.dark-block .button:hover {
    color: #FFF;
    background-color: #10a6e1;
    -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
    box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
}

/** reverse **/
.button.blue {
    color: #FFF;
    padding-right: 30px;
    background-color: #0FA6E0;
    -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
    box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
}
.button.blue::after {
    content:"";
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/right-arrow-w.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-left: 10px;
}
.button.blue:hover {
    background-color: #117EC1;
    border-color: #117EC1;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

img.display-left {
    max-width: 50%;
    float:left;
    margin-right:40px;
    margin-bottom:20px;
}
img.display-right {
    max-width: 50%;
    float:right;
    margin-left:40px;
    margin-bottom:20px;
}

/** blocks **/
.dark-block,
.yellow-block {
    position: relative;
    width: 100%;
    padding: 60px 20px;
    box-sizing: border-box;
    z-index: 1;
}
.dark-block::before,
.dark-block::after,
.yellow-block::before,
.yellow-block::after {
    content:"";
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.dark-block,
.dark-block::before,
.dark-block::after {
    color: #FFF;
    background-color: #262526;
}
.yellow-block,
.yellow-block::before,
.yellow-block::after {
    background-color: #FECB00;
}
.dark-block::before,
.yellow-block::before {
    right: 100%;
}
.dark-block::after,
.yellow-block::after {
    left: 100%;
}

/** cols **/
.two-col,
.three-col {
    display: inline-block;
    vertical-align: top;
    padding: 1%;
    box-sizing: border-box;
}
.two-col {
    width: 48%;
}
.two-col iframe {
    width: 100%;
}
.three-col {
    width: 30%;
    margin: 0 1%;
}

div.icon {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 200px;
    font-size: 18px;
    padding: 5px 20px;
    box-sizing: border-box;
    margin: 0 3%;
}
div.icon p:first-of-type {
    margin-top:0;
}
div.icon img {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 960px){
    .dark-block,
    .yellow-block {
        padding: 20px;
    }
    .two-col {
        display: block;
        width: 100%;
        padding: 0;
        margin: 20px 0;
    }
}
@media only screen and (max-width: 760px){
    img.display-left,
    img.display-right {
        display: block;
        max-width: 100%;
        float: none;
        margin: 20px 0;
    }
    .three-col {
        display: block;
        width: 100%;
        padding: 0;
        margin: 20px 0;
    }
}

@media only screen and (max-width: 350px){
    .button,
    .yellow,
    .button.blue {
        width: 100%;
        padding: 15px 3%;
    }
}