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

*, *: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.26);
    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;
     }

.content {
       height: inherit;
       width: 100%;
       height: 100%;
       position: inherit;
       padding-left: 0;
       padding-right: 0;
       background: black;

     }

     .videoWrapper {
     	position: relative;
     	padding-bottom: 56.25%; /* 16:9 */
     	padding-top: 25px;
     	height: 0;
     }
     .videoWrapper iframe {
     	position: absolute;
     	top: 10;
     	left: 0;
     	width: 100%;
     	height: 100%;
     }
  /*
   *
   * Footer
   *
   */



   /*
    *
    * ______________________________________________________________
    *
    */
    /* 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 fadeIn {
     0% {
       opacity: 0;
     }
     100% {
       opacity: 1;
     }
   }


  /*
   *
   * ______________________________________________________________
   *
   */