body, html{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #08101d;
}

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

a, a:active, a:focus {
   outline: none;
}

html{
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body{
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-style: #7db0ff;
    position: fixed;
  }

  img {
    max-width: 100%;
  }

article, aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{
  display:block;
}
audio,canvas,progress,video{
  display:inline-block;
  }

progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{
  background-color:transparent;
  -webkit-text-decoration-skip:objects;
}
a:active,a:hover{
  outline-width:0
  }

abbr[title]{
  border-bottom:none;
  text-decoration:underline;
  text-decoration:underline dotted;
}

header, nav, footer, section, article, div {
  box-sizing: border-box;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

  /*
   *
   * Header
   *
   */

header {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    min-height: 50px;
    transition: min-height 0.3s;
    margin: inherit;
    margin-bottom: 0px;
    background: #0f1928;
  }

  .header_logo {
    height: 200px;
    display: block;
    margin: -80px auto;
    margin-bottom:0px;

  }

  /*
   *
   * navigation bar
   *
   */

.nav {

    position: fixed;
    z-index: 1;
    top: 3.3em;
    margin-bottom: 0px;
    margin-top: auto;
    float: left;
    width:100%;
    content: inherit;
    }

    .nav__menu {
      width: 100%;
      padding: 0;
      margin: 0;
      margin-bottom: 0px;
      padding-top: 3.2em;
    }

    .nav__item {
      box-sizing: border-box;

      display: inline-block;
      width: 19.5%;
      text-align: center;
      line-height: 100px;
      border-radius: 10%;
      text-transform: uppercase;
    }
    .nav a {
      text-decoration: none;
      color: #f4f4f4;
      padding: 1.5em;
    }

    .nav a:hover {
      text-decoration: none;
      color: #6599ed;
     }


     /*
      *
      * Main
      *
      */



      #main {
        position: absolute;
        height: auto;
        width: 100%;
        animation: fadeIn 2s ease-in;
      }


      .contentbox {
        height: 650px;
        width: 920px;
        border-radius: 5px;
        background: #FFFFFF;

        display: block;
        margin: auto;
        position: center;
        transform: translateX(0%) translateY(10%);
        display: block;
        float: center;
      }


      .headline {
        position: absolute;
        top: 15%;
        left: -6.5%;
        transform: translateX(100%) translateY(-150%);
        text-align: center;
        line-height: 0.5;
        font-family: 'Montserrat', sans-serif;
        font-style: #0f1928;

      }

      .text {
        position: absolute;
        top: 20%;
        left: 0;
        right: 65%;
        transform: translateX(20%) translateY(-20%);
        text-align: center;
        font-family: 'Open Sans', sans-serif;
        font-style: #0f1928;
        line-height: 1.2;
        font-size: 15px;
      }

.text a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}






      .img {
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translateX(-100%) translateY(-50%);
        height: 650px;
        width: 450px;
        background-image: url(thank.jpg);
        background-size: contain;
      }


      /*
       *
       * ______________________________________________________________
       *
       */
       /* Viewport - Screensizes */
       @media screen and (max-width: 379px) {

         .nav {
            font-size: 8px;
             }
             .nav__item {
               border-radius: 6%;
               width: 19%;
             }

             .nav a {
               padding: 0.4em;
             }
      }

       @media screen and (max-width: 549px) {

            header {
             min-height: 120px;
           }

         .nav {
            position: fixed;
             z-index: 1;
             top: 3em;
            font-size: 9px;
             }

             .nav__menu {
               width: 100%;
               padding: 0;
               margin: 0;
               margin-bottom: 0px;
               padding-top: 3.2em;
             }

             .nav__item {
               line-height: 160px;
               border-radius: 8%;
            }
             .nav a {
               padding: 1em;
             }



         .preston {

             height: 350px;
              }


        .media {
                left: 3%;
              }

              .media ul{
                line-height: 40px;
              }

              .media a {
                font-size: 21px;
                padding: 20px 20px;
                color: #292929;
                padding: 1.3em;
              }

               .media ul, span {
                 top: 20px;
                 height: 20px;
                 line-height: 5px;
                 transform: translateX(-110%) translateY(-5px);
                 color: #fff;
                 font-size: 16px;
               }


       }

       @media screen and (min-width: 550px) {

         .nav {
            position: fixed;
             z-index: 1;
             top: 3em;
            font-size: 12px;
             }

             .nav__menu {
               width: 100%;
               padding: 0;
               margin: 0;
               margin-bottom: 0px;
               padding-top: 3.2em;
             }

             .nav__item {
               line-height: 160px;
               border-radius: 8%;
            }
             .nav a {
               padding: 1em;
             }


             .preston {

                 height: 350px;
                  }

      }

      @media screen and (min-width: 700px) {
       .preston {
           height: 450px;
            }

       }

       @media screen and (min-width: 850px) {

         main, .nav{
           margin-left: auto;
           margin-right: auto;
           }

         .preston {
             height: 750px;
              }

         }



      /* Keyframes */

      @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }






  /*
   *
   * ______________________________________________________________
   *
   */