@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
@import url(bootstrap/bootstrap.css);
.skew {
  transform: skewY(-3deg);
  background: white;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow: hidden; }

.skew-top, .skew-bottom {
  transform: skewY(12deg);
  padding-bottom: 8%;
  width: 38%;
  position: absolute; }

.skew-top {
  transform: skewY(12deg);
  padding-bottom: 8%;
  margin-top: -4%;
  top: 0;
  right: 0;
  background: linear-gradient(110deg, #00A7FF 0%, #FEFF1D 100%); }

.skew-bottom {
  transform: skewY(12deg);
  padding-bottom: 8%;
  margin-bottom: -4%;
  bottom: 0;
  left: 0;
  background: linear-gradient(20deg, #FEFF1D -100%, #00A7FF 80%); }

.skew-diagonal {
  transform: rotate(31deg);
  background: #F7F9FC;
  position: absolute;
  top: -100%;
  bottom: 0;
  right: 60%;
  width: 75%; }

.skew-diagonal-alt {
  transform-origin: top right;
  transform: skew(31deg);
  background: #F7F9FC;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 37.5%;
  left: -200%; }

body, html {
  font-size: 18px;
  line-height: 1.5;
  font-weight: normal;
  font-family: 'Roboto', Helvetica, serif;
  color: #6E7E87;
  background: #0F1926; }
  @media (max-width: 767px) {
    body, html {
      font-size: 14.4px;
      line-height: 1.275; } }

section {
  padding: 120px 0 60px 0;
  position: relative; }

.col {
  padding-bottom: 60px; }

.container, .relative {
  position: relative; }

.overflow-hidden {
  overflow: hidden; }

.text-light, .press h5, .press .h5, .press, .quote {
  color: #b3bcc1; }

footer {
  position: relative; }

h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0 0 22.5px 0;
  padding: 0; }

em {
  color: #F8781E;
  font-style: normal; }

h1, .h1 {
  font-size: 48px;
  line-height: 1.5;
  font-weight: bold;
  font-family: 'Roboto', Helvetica, serif; }
  @media (max-width: 767px) {
    h1, .h1 {
      font-size: 38.4px;
      line-height: 1.275; } }

h2, .h2 {
  font-size: 42px;
  line-height: 1.5;
  font-weight: bold;
  font-family: 'Roboto', Helvetica, serif;
  color: white; }
  @media (max-width: 767px) {
    h2, .h2 {
      font-size: 33.6px;
      line-height: 1.275; } }

h3, .h3 {
  font-size: 34px;
  line-height: 1.5;
  font-weight: bold;
  font-family: 'Roboto', Helvetica, serif;
  color: #172435; }
  @media (max-width: 767px) {
    h3, .h3 {
      font-size: 27.2px;
      line-height: 1.275; } }

h4, .h4 {
  font-size: 14px;
  line-height: 1.5;
  font-weight: normal;
  font-family: 'Roboto', Helvetica, serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #F8781E; }
  @media (max-width: 767px) {
    h4, .h4 {
      font-size: 11.2px;
      line-height: 1.275; } }

h5, .h5 {
  font-size: 18px;
  line-height: 1.5;
  font-weight: bold;
  font-family: 'Roboto', Helvetica, serif;
  color: #172435; }
  @media (max-width: 767px) {
    h5, .h5 {
      font-size: 14.4px;
      line-height: 1.275; } }

@media (max-width: 767px) {
  p, li {
    line-height: 1.5; } }

.large {
  font-size: 24px;
  line-height: 1.5;
  font-weight: normal;
  font-family: 'Roboto', Helvetica, serif; }
  @media (max-width: 767px) {
    .large {
      font-size: 19.2px;
      line-height: 1.275; } }

.small {
  font-size: 14px;
  line-height: 1.5;
  font-weight: normal;
  font-family: 'Roboto', Helvetica, serif; }
  @media (max-width: 767px) {
    .small {
      font-size: 11.2px;
      line-height: 1.275; } }

.bold {
  font-weight: bold; }

a {
  color: #F8781E; }
  a:hover {
    color: #00A7FF;
    text-decoration: none; }
  a:active {
    color: #00A7FF; }

.none {
  display: none; }

.center {
  text-align: center;
  display: block; }

.box-shadow {
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.5);
  padding: 30px;
  background: white;
  overflow: hidden; }

.filled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.brand {
  background: url(../img/brand.png);
  background-image: url(../img/brand.svg), none;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  display: block; }
  .brand {
    width: 62px;
    height: 70px; }

button.btn, .btn {
  padding: 12px 22.5px;
  border-radius: 0;
  font-size: inherit;
  color: white;
  background: #00A7FF; }
  button.btn, button.btn:hover, button.btn:active, button.btn:focus, .btn, .btn:hover, .btn:active, .btn:focus {
    color: white;
    outline: 0; }
  button.btn:focus, .btn:focus {
    background: #0075b3; }
  button.btn:hover, .btn:hover {
    background: #00A7FF; }
  button.btn-white, .btn-white {
    background: white; }
    button.btn-white, button.btn-white:active, .btn-white, .btn-white:active {
      color: #172435; }
    button.btn-white:hover, .btn-white:hover {
      background: #0F1926;
      color: white; }
  button.btn .icon, .btn .icon {
    float: left;
    margin-right: 15px;
    display: block;
    width: 9px;
    height: 26px;
    background: url(../img/play.png);
    background-image: url(../img/play.svg), none;
    background-repeat: no-repeat;
    background-position: right center; }
    @media (max-width: 767px) {
      button.btn .icon, .btn .icon {
        height: 20px; } }
  button.btn:hover .icon, .btn:hover .icon {
    background-position: left center; }

nav {
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; }

nav .brand-container {
  float: left;
  position: relative;
  padding-right: 62px; }
  nav .brand-container .brand {
    margin: 30px 0;
    position: relative; }

nav .brand-effect {
  transform: rotate(12deg) skew(-10deg);
  position: absolute;
  bottom: 58px;
  right: 0;
  width: 800px;
  height: 200px;
  background: linear-gradient(10deg, #00A7FF 55%, #FEFF1D 95%); }

nav p, nav ul {
  margin: 50px 0 0 0; }

nav p {
  float: left;
  font-style: italic;
  font-weight: bold;
  margin-left: 30px; }

nav ul {
  float: right;
  list-style: none;
  padding: 0; }
  nav ul li {
    float: left;
    margin-left: 30px;
    padding: 0; }
  nav ul a {
    display: block;
    cursor: pointer; }
    nav ul a, nav ul a:hover, nav ul a:visited, nav ul a:active {
      color: white;
      text-decoration: none; }
    nav ul a:hover {
      border-bottom: 2px solid white;
      color: white; }

@media (max-width: 767px) {
  nav ul {
    display: none; }
  nav p {
    margin: 36px 0 0 -20px; }
  nav {
    position: absolute; }
  nav .brand-container {
    transform: scale(0.6) translate3d(-35px, -35px, 0); } }

.header {
  overflow: hidden;
  position: relative;
  background: url(../img/header-poster.jpg) no-repeat center center;
  background-size: cover; }

.header-effect {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.9) 100%); }

.header video {
  display: block; }

.header .container, .header .container .row {
  height: 100%; }

.header .container .row {
  display: flex; }

.header .container .header-text {
  align-self: center; }
  @media (max-width: 767px) {
    .header .container .header-text {
      align-self: flex-end;
      padding-bottom: 45px;
      text-align: right;
      text-align: right; }
      .header .container .header-text h1, .header .container .header-text .h1 {
        font-size: 32px;
        line-height: 1.5;
        font-weight: bold;
        font-family: 'Roboto', Helvetica, serif; } }
    @media (max-width: 767px) and (max-width: 767px) {
      .header .container .header-text h1, .header .container .header-text .h1 {
        font-size: 25.6px;
        line-height: 1.275; } }

.header .container .h1, .header .container h1 {
  color: white; }

.header-loader {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -13px -32px; }
  .header-loader div {
    height: 26px;
    width: 7px;
    background: #fff;
    float: left;
    margin: 0 1px;
    border-radius: 2px;
    animation: loading 0.7s linear infinite; }
    .header-loader div:nth-child(1) {
      animation-delay: 0.1s; }
    .header-loader div:nth-child(2) {
      animation-delay: 0.2s; }
    .header-loader div:nth-child(3) {
      animation-delay: 0.3s; }
    .header-loader div:nth-child(4) {
      animation-delay: 0.4s; }
    .header-loader div:nth-child(5) {
      animation-delay: 0.5s; }
    .header-loader div:nth-child(6) {
      animation-delay: 0.6s; }

@keyframes loading {
  0% {
    opacity: 1; }
  50%, 100% {
    opacity: 0.25; } }

.about {
  margin-top: -2.66666667%; }
  .about img {
    width: 50%;
    max-width: 250px;
    margin: 90px auto 15px auto;
    display: block; }
    @media (max-width: 767px) {
      .about img {
        margin-top: 0; } }
  .about ul {
    list-style: none;
    padding: 0; }
    .about ul li {
      background: url(../img/check.png);
      background-image: url(../img/check.svg), none;
      background-repeat: no-repeat;
      background-position: left 5px;
      padding-left: 30px;
      margin-bottom: 15px; }
      @media (max-width: 767px) {
        .about ul li {
          background-position: left top; } }

.press-footer {
  text-align: center;
  color: #6E7E87;
  margin-top: 37.5px; }

.press-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: -15px; }
  .press-links a {
    background: #6E7E87;
    display: block;
    padding: 22.5px;
    color: #172435;
    text-align: center;
    margin: 15px;
    text-decoration: none; }

.press ul {
  padding-left: 22.5px;
  list-style: none; }
  .press ul li::before {
    content: "\25b8";
    color: #00A7FF;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em; }

.quote {
  background: #172435;
  padding-bottom: 75px; }

.quote .h3, .quote h3 {
  color: white; }

.quote ol {
  padding-left: 1em; }
  .quote ol li {
    margin-bottom: 15px; }

.quote-zoom {
  background: #0F1926;
  padding: 30px;
  padding-bottom: 7.5px;
  margin-top: 52.5px; }
  .quote-zoom h5, .quote-zoom .h5, .quote-zoom p {
    color: white; }

.quote-divider {
  border-top: 1px solid #4c575d;
  margin-top: 60px;
  height: 120px; }

.quote-line {
  padding-bottom: 7%; }

.contact {
  padding-bottom: 0;
  margin-top: -2.66666667%; }

.contact .skew {
  height: 150%; }

.contact footer {
  border-top: 1px solid #DEE5E9;
  padding: 30px; }

.contact label {
  color: #0F1926;
  font-weight: normal; }

.contact textarea {
  resize: vertical; }

.contact .form-check-label {
  color: #6E7E87; }

.contact .form-check-input {
  margin-right: 7.5px; }

.contact .form-control {
  border: 1px solid #DEE5E9;
  box-shadow: none;
  border-radius: 0;
  font-size: 18px;
  line-height: 1.5;
  font-weight: normal;
  font-family: 'Roboto', Helvetica, serif;
  height: auto;
  padding: 12px; }
  @media (max-width: 767px) {
    .contact .form-control {
      font-size: 14.4px;
      line-height: 1.275; } }
  .contact .form-control:focus {
    border-color: #b0c1ca; }

.contact .form-group {
  margin: 22.5px 0; }

.contact .form p {
  margin-top: 15px;
  display: none; }

.contact .form p.error {
  color: #F8781E; }

.contact .form p.success {
  color: #0a0; }

.contact .form .error > label {
  color: #F8781E; }

.contact .form .error .form-control {
  border-color: #F8781E; }