/*=== GLOBAL STYLES ============================*/

html,
body {  
    border: 0px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    line-height: 1.7;
    font-size: 18px;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
    color: #f5f5f5;
    background-color: black;
}

/*--- IOS Input Reset ----*/

input, textarea {
    border-radius: 0;
    -webkit-border-radius:0px;
}

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


/*=== FLEX / CLEARFIX ====================*/


/*=== HEADER =====================================*/

/*--- INDEX PAGE HEADER ---*/

/*0-- PLACE HOLDER REMOVE LATER --*/

.header_bg {
    transition: .3s;    
}

.index-header .fixed-header {
  background-image: url("../images/Placeholder-SMALL.png");
  height: 493px;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  transform: translateZ(0);
  -moz-transform: translatez(0);
  -ms-transform: translatez(0);
  -o-transform: translatez(0);
  -webkit-transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  background-repeat: no-repeat;
  background-position: center top; 
  background-size: 375x;
}

.index-header {
    margin: 0;
}

.fixed-header h1 {
  margin: 285px 0 0 0;
}

/*--- NAVIGATION ---*/

.large-nav {
  display: none;
}

.navigation {
  position: fixed;
  top: 0;
  z-index: 99;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
    background-color: #0a0b08;
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 5%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
  z-index: 99;
}

.overlay a {
  cursor: grab;
  padding: 8px;
  text-decoration: none;
  font-size: 28px;
  color: #f5f5f5;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #818181;  
  opacity: 1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px
  }
}

.small-social-links {
  text-align: center;
}

.small-social-links a {
  display: inline;
  margin: 6px;
}

.small-social-links a img {
  width: 48px;
}


/*=== MAIN CONTENT ===============================*/

main {
  position:relative;

}

 
.intro-section {
  width: 335px;
  margin: 300px auto 20px auto;
  opacity: 0.99;
}

.section {
  width: 335px;
  margin: 0 auto;
  padding: 30px 0 10px 0;
}

/*--- CONTACT SECTION ---*/

/*--- Store Page ----*/

/*=== BUTTONS / LINKS ====================*/

.text-link {
  color: #fefefe;
}
  
#connect {
  text-align: center;
  margin-top: 100px;
}

.link-button {
  display: block;
  text-decoration: none;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  width: 100%; 
  margin: 0 0 0 0;
  padding: 10px 0;
  color: white;
  border: 2px solid white;

}

/*=== FOOTER =============================*/

footer {
  text-align: center;
  background-color: black;
}

footer a {
  display: block;
  color: #f5f5f5;
  text-decoration: none;
}

#connect img {
  display: block;
  width: 48px;
  margin: 0 auto 20px auto;
}
  

/*=== HOVER/TRANSITIONS ==================*/

.navigation span img:hover,
.close:hover,
.close:focus,
.text-link:hover,
#connect a:hover,
footer a:hover, 
a:hover, 
.small-social-links a:hover {
  opacity: 0.8;
  transition: 0.3s;
  cursor: pointer;
}


 
/* BEGIN SECOND MEDIA QUERRY HERE -----------------------------------------------------------------*/

/* media query screen=below 769px -------------------------------------------------------*/

@media (min-width: 768px)  {  

/*=== FLEX / CLEARFIX ====================*/


/*=== HEADER =============================*/

.small-nav {
  display: none;
}

.large-nav {
  display: inline;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: lab(0% 0 0);
  z-index: 99;
}

.topnav {
  overflow: hidden;
  background-color: none;
  margin-right: 200px;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  color: white;
}

.social-links {
  display: flex;
  position: fixed;
  top: 0;
  right: 20px;
  margin-top: 14px;
}

.social-links a {
  display: block;
  margin: 6px;
}

.social-links a img {
  width: 32px;
}

.index-header .fixed-header {
  background-image: url("../images/Placeholder-MEDIUM.png");
  background-size: 768x;
}


/*=== MAIN CONTENT =======================*/

.intro-section {
  width: 500px;
  margin-top: 440px;
}

.section {
  width: 500px;
}

/*--- Store Section ---*/


}



/* BEGIN THIRD MEDIA QUERRY HERE -------------------------------------------------------------------*/
/* media query screen=below 1280px -------------------------------------------------------*/

@media (min-width: 1280px)  { 

/*=== FLEX / CLEARFIX ====================*/


/*=== HEADER =============================*/

.index-header .fixed-header {
  background-image: url("../images/Placeholder-LARGE.png");
  top: 55px;
  height: 540px;
  background-size: 1280px;
}

/*=== MAIN CONTENT =======================*/

.intro-section {
  margin-top: 620px;
  width: 780px;
}

.section {
  width: 780px;
}

/*--- Store Section ---*/


}