/* LAYOUT: 
  Display
  Position
  Width ( EMs )
  Margin ( REMs)
  Padding ( REMs )
  Transform
  Z-index
*/

/* CSS Variables */

:root {
  --content-width: 0;
}

* { box-sizing: border-box; }

html, body { 
  width: 100%;
  margin: 0; 
  padding: 0;
}

.content-width{
  width: var(--content-width);
  margin: 0 auto;
}

/* Media Queries */

/* Mobile */
@media screen and (min-width: 0em) {  /* 0em to 40em @ 16px = 0px to 640px */
  :root{
    --content-width: calc(100% - 2em);
  }
  
  #mm-logo-small{
    display: block;
    margin: 0 auto;
    width: 3em;
  }
  
  #mm-logo{
    display: none;
  }
  
  #hero{
    grid-template-columns:  1fr;
  }
  
  #hero div{
    padding: 1em 0;
  }

  #indicator{
    background-color: pink;
  }
  
}

/* Small */
@media screen and (min-width: 40em) {  /* 40em to 64em @ 16px = 640px to 1024px */
  :root{
    --content-width: 38em;
  }
  
  #mm-logo-small{
    display: none;
  }
  
  #mm-logo{
    display: block;
    margin: 0 auto;
    width: 19em;
  }

  
  #hero{
    grid-template-columns:  1fr 1fr;
  }
  
  #hero div{
    padding: 1em;
  }

  #indicator{
    background-color: orange;
  }
}

 /* Medium */
@media screen and (min-width: 64em) {  /* 64em to 90em @ 16px = 1024px to 1440px */
  :root{
    --content-width: 50em;
  }
  
  #hero{
    grid-template-columns:  1fr 1fr 1fr;
  }
  
  #indicator{
    background-color: aqua;
  }
}

 /* Large */
@media screen and (min-width: 90em) {  /* 90em @ 16px = 1440px+ */
  :root{
    --content-width: 80em;
  }
  
  #hero{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  
  #indicator{
    background-color: grey;
  }
  
}

#darken-overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 200;
}

#darken-overlay.show{
  display: block;
}

#announcement-banner{
  position: relative;
}

#announcement-banner h5{
  padding-left: 1em;
  padding-right: 3.5em;
  margin: 0;
}

#announcement-banner button{
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
}

header{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

  #header-social-buttons{
    position: absolute;
    left: 1em;
    top: 1em;
    /*top: 50%;
    transform: translateY(-50%);  */
  }
  
  #header-menu-buttons{
    position: absolute;
    right: 1em;
    top: 1em;
  }

#login-menu{
  position: fixed;
  top: 0;
  right: -20em;
  
  width: 20em;
  padding: 1rem;

  height: 100vh;
  z-index: 1000;
    transition-timing-function: ease-in;
  transition: 0.2s;
  z-index: 300;
}




nav ul{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  text-align: center;
  padding: 0;
}

nav ul li{
  display: inline-block;

}



nav ul li a{
  display: inline-block;
  padding: 0.5em 0;
  margin: 0.5em 0;
}






#hero{
  display: grid;
  padding: 2em 0;
}



#hero div img{
  display: block;
  position: relative;
  width: 100%;
}

#hero div .category{
  display: inline-block;
  position: relative;
  left: 50%;
  transform:translate(-50%,-50%);
  background-color: #DCAE1D;

  padding: 0.5em 1em;
  
}


.portrait{
  width: 100%;
  object-fit: cover;
  height: 24em;
}

.landscape{
  width: 100%;
  object-fit: cover;
  height: 12em;
}


#features{
  position: relative;
  margin: 2em auto;
  padding: 1em 2em;
}


#features-window{

}

#features-slider{
  overflow-x: scroll;

  scroll-behavior: smooth;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

#features-slider div{
  position: relative;
  display: inline-block;
  margin: 0.5em;
}

#features-slider div:first-child{
  margin-left: 0 !important; 
}

#features-slider div:last-child{
  margin-right: 0 !important;
}

#features-slider div img{
  object-fit: cover;
  height: 12em;
}

.slide-title{
  white-space: normal;
  max-width: calc(100% - 2em);
  position: absolute;
  left: 0.5em;
  bottom: 00.5em;
  color: #FFFFFF;
  font-family: 'Lato', sans-serif;
  font-size: 1em;
  font-weight: 900;
  font-variant: normal;
}

#features h5{
  font-size: 1.15em;
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-variant: normal;
  position: absolute;
  background-color: #CF5C36;
  color: #FFFFFF;
  top: -2.5em;
  left: 1em;
  padding: 0.25em;
}

#slider-button-left{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

#slider-button-right{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#slider-button-left img, #slider-button-right img{
  display: block;
  width: 2em;
  height: 2em;
}







#news{
  padding: 2em 0;
  margin: 2em 0;
  background-color: #DCAE1D;
}

footer{
  padding: 2em 0;
  background-color: #083445;
  color: #FFFFFF;
}