html, body  {margin: 0; padding: 0; height: 100%; text-align: center; background-color: black}
section {width: 100%; min-height: 100%}
hr {height: 1px; background: #FFFFFF; border: 0; margin: 0 0 80px 0;}
h1 {font-family: 'Poppins', sans-serif; text-align: center; font-weight: 700; font-size: 35px; padding-left: 0; padding-right: 0; margin: 0;}
h2 {font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 19px; color: #FFFFFF; padding-left: 0; padding-right: 0; margin: 0;}
p {font-family: 'Poppins', sans-serif; color: #FFFFFF; text-align: center; font-weight: 300;}
a {font-family: 'Poppins', sans-serif; color: #FFFFFF; font-style: normal; font-weight: 400; text-decoration: none;}
li  {list-style-type: none;}


/* HEADER ****************************/

header {
  width: 100%;
  height: 65px;
  position: fixed;
  top: 0;
  left: 0;
  background: none;
  z-index: 1;
}

/*nav bar***/
header nav {
  margin-top: 63px;
  margin-right: 50px;
  float: right;
}

.nav-bar a li {font-family: 'Poppins', sans-serif; letter-spacing: 0px; font-size: 19px; text-shadow: 0 2px 12px rgba(0,0,0,1);}

.nav-bar a{
  float: left;
  margin: 0 0 0 40px;
}

.nav-bar a li:hover {color: #986EB5;}



/*Logo***/
#logo {
  width: 300px;
  float: left;
  margin-top: 20px;
  margin-left: 50px;
}


#logo img {width: 100%;}


/*Work Details ****************************/

h1 {color: #986EB5; margin-bottom: 20px;}

#header-div {
  padding-top: 285px;
  padding-bottom: 150px;
  width: 100%;
  margin: 0 auto 0 auto;
}

#header-div p {
  width: 50%;
  margin: auto;
}

#sample {
  width: 100%;
  margin: 100px auto;
}

#myVideo, #sample img {
  display: block;
  max-width: 70vw;
  max-height: 80vh;
  margin: 80px auto;
}

#header-div a {font-size: 20px; text-decoration: underline;}
#header-div a:hover {color: #986EB5}

/*Footer****************************************/

footer {
  width: 100%;
  height: 65px;
}

#list {float: right; margin: 0 50px 0 0; padding: 0;}
#social {float: left; margin: 0 0 0 50px; padding: 0;}

#list li {
  margin: 0 0 0 20px;
  position: relative;
  float: right;
}

#social li {
  margin: 0 20px 0 0;
  position: relative;
  float: left;
}

#list li p, #social li p {
  font-size: 13px;
  font-weight: 500;
}

#list a :hover {color: #986EB5;}
#social a :hover {color: #986EB5;}



/* MEDIA QUERIES ****************************/


/* Work Details */


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



}

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


}




/* Tablet */

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

  #sample img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    margin: 80px auto;
  }
}




/* MOBILE */
@media screen and (max-width: 768px) {

  #logo {display: none;}

  header {
    position:  absolute;
  }

  header nav {
    list-style: none;
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    float: none;
  }

    .nav-bar {padding: 30px 10vw;}

    .nav-bar a{
      margin: 0 auto;
    }

    #a1 {float: left}
    #a2{display: inline-block; float: none;}
    #a3{float: right}

    #contact-text div {
      padding-top: 250px;
    }

  #social {display: none;}

  #list {
        list-style: none;
        display: block;
        margin: 0 auto;
        width: 300px;
        text-align: center;
        float: none;
  }

  #list li {
     display: inline-block;
     float: none;
     opacity: 0.5;
  }

  form input, form textarea, .button {width: 90%;}




  #header-div {
    padding-top: 200px;
    padding-bottom: 50px;
  }

h1 {font-size: 35px;}

  #myVideo, #sample img {
    display: block;
    max-width: 100vw;
    max-height: 100vh;
    margin: 20px auto;
  }

  #myVideo, #sample {
    width: 100%;
    margin: 35px auto;
  }


  #header-div p {
    width: 90%;
    margin: auto;
  }


}