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

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

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;
      animation: fadeIn 2s ease-in;
      height: auto;
      width: 100%;
      }

.preston {
    width: 100%;
    height: auto;
    position: inherit;
    background-image: url("preston.jpg");
    background-size: cover;
    height: 750px;
     }

.social {

box-sizing: inherit;

position: absolute;

width: 100%;

}
     /*
      *
      * social navigation bar
      *
      */

.media {
  position: absolute;
  margin-left: auto;
  margin-right: auto;

  top: 13%;
  left: 2%;
  width: 100%;
}

.media ul{
  position: inherit;
  text-align: center;
  line-height: 90px;
  display: inline-block;
  box-sizing: border-box;
  top: 20%;
  left: 0%;
  padding-top: 1px;
  width: 24%;

}


.media a {

  list-style: none;
  display: inline-block;
  text-decoration: none;
  box-sizing: border-box;
  text-align: center;
  font-size: 21px;
  padding: 20px 20px;
  color: #292929;
  padding: 2em;
  transition: .5s;
  width: 18.9%;
}

.media a:hover {
    color: #fff;
    transition: .5s;


 }

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

 .media ul, span {
   position: absolute;
   z-index: 1;
   top: 21px;
   transform: translateX(-80%) translateY(-20px);
   width: 120px;
   text-align: center;
   height: 20px;
   line-height: 20px;
   background: #292929;
   color: #fff;
   font-size: 14px;
   border-radius: 4px;
   transition: .4s;
   opacity: 0;
   visibility: visible;
 }

 .media ul, span:before {
   content: '';
   position: absolute;
   bottom: -8px;
   left: 0%;
   background: #292929;
   z-index: 1;

 }

.media ul, span:hover {
 opacity: 1;
 visibility: visible;
}


.main img{
       width: 100%;
       height: auto;
       display: block;
     }

  /*
   *
   * Footer
   *
   */

  footer {
    border-top: 0px;
    border-bottom: 0px;
    padding: -5em;
    width: 100%;
    height: 100%;
    background: #0f1928;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    box-sizing: border-box;
    display: inline-block;
    float: left;
    text-align: center;

  }

  footer li {
    display: inline-block;
    margin: 0 5em;

  }

  footer a {
    text-decoration: none;
    color: #325082;
    padding: 0.9em;
    font-size: 9.9px;
    text-align: center;
    text-transform: uppercase;
  }

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

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

         .nav a {
           padding: 0.4em;
         }

      .preston {
          height: 450px;
          }

          .media {
                  left: 0%;
                }

                .media ul{
                  line-height: 40px;
                }
                .nav__item {
                  line-height: 150px;
                  border-radius: 5%;
                  }
                  .nav a {
                    padding: 2px;
                  }
 }

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

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

         .nav a {
           padding: 0.4em;
         }

      .preston {
          height: 450px;
          }

          .media {
                  left: 0%;
                }

                .media ul{
                  line-height: 40px;
                }
                .nav__item {
                  line-height: 150px;
                  border-radius: 5%;
                  }
                  .nav a {
                    padding: 2px;
                  }
 }

   @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;
           }

     footer {
            padding: 1em;
          }

          footer li {
            display: list-item;
            margin: 0 2em;
          }

          footer a {
            padding: 1em;
            font-size: 10px;

          }
   }

   @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 ul, span {
                   position: absolute;
                   z-index: 1;
                   top: 21px;
                   transform: translateX(-80%) translateY(-20px);
                   width: 120px;
                   text-align: center;
                   height: 20px;
                   line-height: 20px;
                   background: #292929;
                   color: #fff;
                   font-size: 14px;
                   border-radius: 4px;
                   transition: .4s;
                   opacity: 0;
                   visibility: visible;
                 }


     footer a {
       font-size: 11px;
     }
 }

 @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;
     }
   }