html {
  box-sizing: border-box;
}

/*
*,
*:before,
*:after {
  box-sizing: inherit;
}
*/

body {max-width: 1000px;margin: 0 auto; padding-left: 20px;padding-right: 20px;}

/* small screen */
@media screen and (max-width: 800px) {
  .smaller-left, .small-left, .small-right, .large-left, .large-right, .medium-right {width:100%;float: none;}
    left-yellow { width:100%;float: none;display: table;vertical-align: middle;margin: auto;}
    right-yellow {width:100%;float: none;display: table;vertical-align: middle; margin: auto;padding-bottom:20px;}
    h1 {font-family: "din-2014-narrow",sans-serif;font-weight: 400;text-align: center; margin:5px 10px 5px 10px;padding:5px 10px 5px 10px;font-size:50px;line-height:1em;}
    .earth {max-width: 200px;max-height: 200px;}
    .mobile-only {display:block;}
    .two-col-img {max-width: 250px;max-height: 200px;display: inline;}
    .buffer{margin-left:auto;}
}
/* medium screen */
@media screen and (min-width: 801px) and (max-width: 1000px) {
    .smaller-left {width: 30%;float: left;}
    .small-left {width: 40%;float: left;}
    .large-right {width: 60%;float: right;}
    .large-left {width: 60%;float: left;}
    .small-right {width: 40%;float: right;}
    .medium-right {width: 50%;float: right;}
    left-yellow {float: left;width: 45%;vertical-align: middle;margin: 40px 0;}
    right-yellow {float: right;width: 45%;margin-top: auto;margin-bottom: auto;}
    h1 {font-family: "din-2014-narrow",sans-serif;font-weight: 400;text-align: left; padding: 0 0 0 20px;margin: 0 0 0 20px;font-size: 60px;}
    .earth {max-width: 100%;max-height: 100%;margin: auto;}
    .mobile-only {display:none;}
    .two-col-img {max-width: 300px;max-height: 250px;display: inline;}
    .buffer{margin-left:50px;}
}
/* large screen */
@media screen and (min-width: 1001px) {
    .smaller-left {width: 33%;float: left;}
    .small-left {width: 40%;float: left;}
    .large-right {width: 60%;float: right;}
    .large-left {width: 60%;float: left;}
    .small-right {width: 40%;float: right;}
    .medium-right {width: 50%;float: right;}
    left-yellow {float: left;width: 55%;vertical-align: middle;margin: 40px 0;}
    right-yellow {float: right;width: 35%;margin: -10px 10px -10px 0;}
    h1 {font-family: "din-2014-narrow",sans-serif;font-weight: 400;text-align: left; padding: 0 0 0 30px;margin: 0 0 0 30px;font-size: 64px;line-height: 1.2em;}
    .earth {max-width: 350px;max-height: 350px;}
    .mobile-only {display:none;}
    .two-col-img {max-width: 300px;max-height: 250px;display: inline;}
    .buffer{margin-left:70px;}
}
content {display: block;font: 18px/64px "din-2014-narrow",sans-serif;text-align: left;font-weight: 300;letter-spacing: 2px;}

.yellowBox:before, .yellowBox:after {content: "";display: table;}
.yellowBox:after {clear: both;}
.yellowBox {background-color: #FFD524;max-width: 1000px;min-height: 100%;vertical-align: middle;clear: both;}

.circle {max-width: 300px;max-height: 300px;display: inline;margin-left: auto;margin-right: auto;}

.earth {display: block;margin-left: auto;margin-right: auto}

.img-align-right {float: right;margin-left: 30px;}

.img-align-left {float: left;margin-right: 30px;}

.img-align-center {margin: 10px auto 20px;display: block;}

.logo {padding-top: 40px;max-width: 450px;    }

p.border {color: #62DCF1;}

.two-col-grid {clear: both;padding-top: 20px;padding-bottom: 20px;}



hr {height: 1px;color: #62DCF1;background-color: #62DCF1;border: none;clear: both;}

hr.border{height: 2px;margin-top: 30px;margin-bottom: 30px;}


h2 {font-family: "din-2014";font-weight: 400;font-size: 32px;line-height: 55px;letter-spacing: 1px;text-align: left;}

h3 {font-family: "din-2014-narrow",sans-serif;font-weight: 300;font-size: 38px;letter-spacing: 3px;text-align: center;line-height: 1.0em;}

h4 {font-family: "din-2014-narrow",sans-serif;font-weight: 400;font-size: 24px;letter-spacing: 1px;text-align: left;}

.mission {font-family: "din-2014",sans-serif;font-weight: 300;font-size: 20px;line-height: 25px;letter-spacing: .25px;}

a {color: #16d5f7;text-decoration: underline;}

.subtitle {font-size: 28px;font-style: italic;text-align: center;font-family: "din-2014",sans-serif;font-weight: 300;}

footer {max-width: 100%;float: right;font-size: 30px;font-style: italic;}