<style>

  @font-face {
    font-family: "Circe";
    src: url("fonts/Circe.otf");
    font-weight: normal;
    }
  @font-face {
    font-family: "Circe";
    src: url("fonts/CirceBold.otf");
    font-weight: bold;
    }

  @font-face {
    font-family: "ProximaNova";
    src: url("fonts/ProximaNovaRegular.otf");
    font-weight: normal;
    }
  @font-face {
    font-family: "ProximaNova";
    src: url("fonts/ProximaNovaBold.otf");
    font-weight: bold;
    }

    html {
      height: 100%;
    }
    body {
      background: #FFF;
      padding: 0;
      font-family: 'ProximaNova';
      position: relative;
      margin: 0;
      height: 100%;
      -webkit-font-smoothing: antialiased;

      font-style: normal;
      font-stretch: normal;
      line-height: normal;
      letter-spacing: normal;

      text-align: left;
      
    }

    div.header {
      position: absolute;
      z-index: 10;
      top: 0;
      right: 100px;
      left: 100px;
      padding: 20px 0px;

    
    }

    div.header div.rmenu {
      float: right;
      line-height: 40px;
    }

    div.header div.rmenu a {
      display: inline-block;
      margin-left: 20px;

      font-family: ProximaNova;
      font-size: 20px;
      font-weight: 600;
      color: #1b7eec;
    }

    .logo {
      width: 157px;
      height: 40px;
      object-fit: contain;
    }

    .wlogo {
      width: 157px;
      height: 40px;
      object-fit: contain;
      display: none;
    }

    .viewing-page-2 .wlogo{
      display: inline-block;
    }
    .viewing-page-2 .logo{
      display: none;
    }

    .viewing-page-2 div.header div.rmenu a {
      color: #fff;
    }


    section.page1 img {
      max-height: 100%;
      max-width: 60%;
      right: 0;
      position: absolute;
      z-index: 1;
    }

    section.page1 h1, 
    section.page3 h1 {
      font-family: Circe;
      font-size: 50px;
      font-weight: bold;
      color: #1b7eec;
      max-width: 40%;
      width: 530px;
      text-transform: uppercase;
    }

    section.page1 h2,
    section.page3 h2 {
      font-family: Circe;
      font-size: 24px;
      color: #72828c;
      font-weight: normal;
      max-width: 40%;
      width: 530px;
    }

    section.page2 {
      background: #1b7eec;
      color: #fff;
    }

    section.page2 div.checkpoint_cell {
      display: inline-block;
      width: 30%;
      min-width: 300px;
      margin-top: 30px;
    }

    section.page2 div.checkpoint_cell h4 {
      opacity: 0.4;
      font-family: ProximaNova;
      font-size: 30px;
      font-weight: bold;
      margin: 0 80px 0 0;
    }

    section.page2 div.checkpoint_cell h5 {
      font-family: ProximaNova;
      font-size: 21px;
      font-weight: bold;
      margin: 10px 80px 0 0;
    }

    section.page2 div.checkpoint_cell p {
      opacity: 0.8;
      font-family: ProximaNova;
      font-size: 18px;
      margin: 10px 80px 0 0;
    }



    
    .wrapper {
        height: 100% !important;
        height: 100%;
        margin: 0 auto; 
        overflow: hidden;
    }
    
    a {
      text-decoration: none;
    }

    a.bluebtn {
      box-shadow: 0 10px 20px 0 rgba(27, 126, 236, 0.35);
      background-image: linear-gradient(to bottom, #378cea, #1078eb);
      padding: 20px 40px;
      font-family: ProximaNova;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      border-radius: 34px;
      
    }

    a.bluebtn.disabled {
      background-color: #b3c2cc;
      background-image: none;
      box-shadow: none;
    }

    a.whitebtn {
      padding: 20px 40px;
      font-family: ProximaNova;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      border-radius: 34px;
      border: 2px solid #fff;
      
    }

    div.hsep {
      width: 96px;
      height: 2px;
    }

    div.vspace {
      width: 100%;
      height: 37px;
    }
    
    
    
    .pointer {
      color: #9b59b6;
      font-family: 'Pacifico', cursive;
      font-size: 30px;
      margin-top: 15px;
    }
    
    .main {
      width: 100%;
      margin: 0 auto;
    }
    
    
    .clear {
      width: auto;
    }
    
    
    
    .main section .page_container {
      position: relative;
      top: 15%;
      left: 100px;
      right: 0;
      z-index: 3;
    }
    .main section  {
      overflow: hidden;
    }
    
    
    
    .viewing-page-2 .back{
      background: rgba(0, 0, 0, 0.25);
      color: #FFF;
      }
    


    body.disabled-onepage-scroll .onepage-wrapper  section {
      min-height: 100%;
      height: auto;
    }
    
    body.disabled-onepage-scroll .main section .page_container, body.disabled-onepage-scroll .main section.page3 .page_container  {
      padding: 20px;
      margin-top: 5px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    body.disabled-onepage-scroll  section .page_container h1{
      font-size: 50px;
    }
    body.disabled-onepage-scroll section .page_container h2, body.disabled-onepage-scroll section .page_container .credit, body.disabled-onepage-scroll section .page_container .btns{
      width: 100%;
    }
    
    body.disabled-onepage-scroll .main section.page1 > img {
      position: absolute;
      width: 80%;
      left: 10%;
    }
    
    body.disabled-onepage-scroll .main section > img {
      position: relative;
      max-width: 80%;
      bottom: 0;
    }
    body.disabled-onepage-scroll code {
      width: 95%;
      margin: 0 auto 25px;
      float: none;
      overflow: hidden;
    }
    
    body.disabled-onepage-scroll .main section.page3 .page_container {
      width: 90%;
      margin-left: auto;
      margin-right: auto;
      right: 0;
    }

    div.inp_cont {
      width: 30%;
      display: inline-block;
      min-width: 300px;
      margin-bottom: 20px;
      margin-top: 30px;
    }

    div.inp_cont input {
      width: 80%;
    }

    div.linp_cont {
      width: 100%;
    }
    div.linp_cont input {
      width: 84%;
    }



    button.bluebtn {
      box-shadow: 0 10px 20px 0 rgba(27, 126, 236, 0.35);
      background-image: linear-gradient(to bottom, #378cea, #1078eb);
      padding: 20px 40px;
      font-family: ProximaNova;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      border-radius: 34px;
      
    }

    button.bluebtn.disabled {
      background-color: #b3c2cc;
      background-image: none;
      box-shadow: none;
    }



    input[type="text"] {
      box-sizing: border-box;
      height: 49px;
      border: none;
      border-bottom: 1px solid #ccc;
      background: #fff;
      resize: none;
      outline: none;
      font-family: Circe;
      font-size: 24px;
      font-weight: bold;
      
    }
    input[type="text"][required]:focus {
      border-color: #1b7eec;
    }
    input[type="text"][required]:focus + label[placeholder]:before {
      color: #1b7eec;
    }
    input[type="text"][required]:focus + label[placeholder]:before,
    input[type="text"][required]:valid + label[placeholder]:before {
      transition-duration: 0.2s;
      -webkit-transform: translate(0, -30px) scale(0.9, 0.9);
              transform: translate(0, -30px) scale(0.9, 0.9);
    }
    input[type="text"][required]:invalid + label[placeholder][alt]:before {
      content: attr(alt);
    }
    input[type="text"][required] + label[placeholder] {
      display: block;
      pointer-events: none;
      line-height: 1.25em;
      margin-top: -30px;
    }
    input[type="text"][required] + label[placeholder]:before {
      content: attr(placeholder);
      display: inline-block;
      margin: 0;
      padding: 0 2px;
      color: #b3c2cc;
      white-space: nowrap;
      transition: 0.3s ease-in-out;
      background-image: linear-gradient(to bottom, #fff, #fff);
      background-size: 100% 5px;
      background-repeat: no-repeat;
      background-position: center;
    }



    @media only screen and (max-device-width: 640px)
    {
      div.header {
        display: none;
      }

      .main section .page_container {
        left: 20px;
      }

      section.page1 img {
        display: none;
      
      }

      section.page1 h1, 
      section.page3 h1 {
        font-size: 35px;
        max-width: 100%;
        text-align: left;
      }

      section.page1 h2,
      section.page3 h2 {
        font-size: 24px;
        max-width: 100%;
        text-align: left;
      }

      a.whitebtn,
      a.bluebtn 
      {
        display: none;
      }

      .main section .page_container {
        top: 3%;
        
      }

    }



    </style>