@font-face {
  font-family: 'icomoon';
  src: url("fonts/icomoon.woff") format("woff"),
    url("fonts/icomoon.ttf") format("truetype"),
    url("fonts/icomoon.eot") format("eot");
  font-weight: normal;
}

@font-face {
  font-family: 'Klavika';
  src: url("fonts/KlavikaWebBasicLight.eot"),
       url("fonts/KlavikaWebBasicLight.ttf");
  src: url("fonts/KlavikaWebBasicLight.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Klavika';
  src: url('fonts/KlavikaWebBasicRegular.eot'),
       url('fonts/KlavikaWebBasicRegular.ttf');
  src: url("fonts/KlavikaWebBasicRegular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Klavika';
  src: url('fonts/KlavikaWebBasicMedium.eot'),
       url('fonts/KlavikaWebBasicMedium.otf');
  src: url("fonts/KlavikaWebBasicMedium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}


@font-face {
  font-family: 'Proxima Nova';
  src: url("fonts/mark_simonson_-_proxima_nova_light-webfont.eot") format('eot'),
       url("fonts/mark_simonson_-_proxima_nova_light-webfont.otf") format('otf'),
       url("fonts/mark_simonson_-_proxima_nova_light-webfont.woff") format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url("fonts/mark_simonson_-_proxima_nova_regular-webfont.eot") format('eot'),
       url("fonts/mark_simonson_-_proxima_nova_regular-webfont.ttf") format('truetype'),
       url("fonts/mark_simonson_-_proxima_nova_regular-webfont.woff") format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url("fonts/mark_simonson_-_proxima_nova_bold-webfont.eot") format('eot'),
       url("fonts/mark_simonson_-_proxima_nova_bold-webfont.otf") format('otf'),
       url("fonts/mark_simonson_-_proxima_nova_bold-webfont.woff") format('woff');
  font-weight: 700;
  font-style: normal;
}






html {
  height: 100%;
}
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
  overflow: hidden;
  color: #38383a;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 16px;
}

section.frame {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}






h1, h2, h3, h4, h5, h6 {
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 300;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  margin-top: 1em;
}

h1 {
  font-family: 'Klavika', 'Proxima Nova', sans-serif;
  font-size: 66px;
}
h2 {
  font-size: 28px;
}

header {
  height: 90px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: #38383a;
  background-image: url(images/stripes-bottom.png);
  background-size: 60% auto;
  background-position: right bottom;
  background-repeat: no-repeat;
  position: relative;
  z-index: 100;
  padding: 25px 20px 0 20px;
}
main {
  position: relative;
  height: calc(100% - 90px);
}

.white-bg {
  background-color: #fff;
}
.blue-bg {
  background-color: #54c7dd;
}
.gray-bg, .grey-bg {
  background-color: #38383a;
  color: #fff;
}
.blue {
  color: #54c7dd;
}
.gray, .grey {
  color: #38383a;
}
.subtitle {
  font-size: 40px;
}

.scroll-thumb {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 15px;
  height: 30px;
  background-color: #38383a;
  border-radius: 10px;
  z-index: 100;
}


.research-bg {
  background-image: url(images/research-bg.jpg);
  background-position: center top;
  background-size: cover;
}

div.text-block {
  position: absolute;
  width: 40%;
  font-size: 30px;
  font-weight: 300;
}

div.form-block {
  position: absolute;
  width: 40%;
  font-size: 20px;
  font-weight: 300;
}


div.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  overflow: hidden;
}
div.sidebar.gray-bg, div.sidebar.grey-bg {
  background-color: #4b4b4d;
}

div#social_world_container {
  position: absolute;
  width: 0;
  height: 0;
  top: 60%;
  left: 50%;
}

img#social_world {
  position: absolute;
  width: 400px;
  height: auto;
  top: 0;
  left: 0;
  margin-top: -200px;
  margin-left: -200px;
}

.social-world-text {
  font-size: 20px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  margin-left: -150px;
  margin-top: -10px;
  text-align: center;
}

.absolute-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.faded-bottom {
  font-size: 150px;
  font-weight: 600;
  position: absolute;
  bottom: -50px;
  right: -20px;
  color: #fff;
}
.faded {
  opacity: 0.1;
}

.light-blue-angle {
  background-color: #61d3e8;
  width: 100%;
  height: 400%;
  transform: translate(75%, -15%) rotate(35deg);
  bottom: 0;
  left: 0;
  transform-origin: left top;
}





img#annual_reports {
  width: auto;
  height: 75%;
  position: absolute;
  bottom: 2%;
  left: 10%;
}


.binary {
  position: absolute;
  font-family: 'Klavika', 'Proxima Nova', sans-serif;
  font-weight: 300;
  text-align: center;
}
.binary.sm {
  font-size: 80px;
  line-height: 60px;
}
.binary.med {
  font-size: 120px;
  line-height: 100px;
}
.binary.lg {
  font-size: 180px;
  line-height: 150px;
}
.binary.huge {
  font-size: 800px;
  line-height: 680px;
  font-weight: 500;
}
.binary.white {
  opacity: 0.1;
  color: #fff;
}
.binary.gray, .binary.grey {
  opacity: 0.1;
  color: #38383a;
}
.binary.blue {
  opacity: 0.4;
  color: #136bb5;
}

div#scene4_callouts {
  position: absolute;
  top: 50%;
  left: 70%;
  width: 0;
  height: 0;
}
div#scene4_callouts img {
  position: absolute;
}

img#scene5_girl {
  position: absolute;
  left: 3%;
  top: 50%;
  height: 50%;
}

img#scene5_cloud1 {
  position: absolute;
  left: 19%;
  top: 49%;
  height: 5%;
}
img#scene5_cloud2 {
  position: absolute;
  left: 21%;
  top: 41%;
  height: 6%;
}
img#scene5_cloud3 {
  position: absolute;
  left: 18%;
  top: 34%;
  height: 7%;
}
img#scene5_cloud4 {
  position: absolute;
  left: 15%;
  top: 3%;
  height: 30%;
}
img#scene7_superhero {
  position: absolute;
  left: 5%;
  top: 10%;
  height: 85%;
}







input[type=submit],
button {
  border-radius: 3px;
  background-color: #83c15a;
  color: #fff;
  font-family: 'Klavika';
}

input[type=text].error,
input[type=email].error,
input[type=phone].error,
input[type=date].error {
  border: 1px solid #be1e2d;
}

.fake-checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #54c7dd;
  border: 1px solid #6D6E71;
  cursor: pointer;
  transition: 0.5s;
  text-align: center;
}

.fake-checkbox.error {
  border: 1px solid #be1e2d;
}

.fake-checkbox i {
  opacity: 0.05;
  color: #fff;
  transition: 0.5s;
}

.fake-checkbox.checked {
  background-color: #83c15a;
}

.fake-checkbox.checked i {
  opacity: 1;
}

.soft {
  opacity: 0.5;
}

form {
  font-size: 16px;
}