/* MOBILE MEDIA QUERY */

@media screen and (max-width: 766px) {
    * {
      font-size: 16px;
    }

    .atc-option h5, .atc-option span {
      font-size: .8rem;
    }
  
    #featured {
      position: relative;
      text-align: center; 
      height: 90vh; 
      width: 100vw; 
      margin-top: 10vh; 
      padding-top: 10vh;
      opacity: .99; 
      z-index: 1; 
      background: 
        linear-gradient(
        rgba(214,214,214,0.45),
        rgba(214,214,214,0.45)), 
        url(../static/tearfence.jpeg);
      background-size: cover; 
      background-position: center;
    }

    .popup {
      color: black; 
      background-color: white; 
      height: 80vh; 
      width: 80vw; 
      border-radius: .2em; 
      margin: 10vh 10vw; 
      padding: 5vh 5vw; 
      overflow-y: scroll;
    }

    .cart {
      overflow: auto;
    }

    .licenses {
        position: relative; 
        color: black; 
        text-align: center; 
        height: min-content; 
        width: 100%;  
        padding: 1vh 0; 
        bottom: 0; 
        left: 0; 
        right: 0; 
        background-color: rgba(193,225,238,.8); 
        box-shadow: 0vw -.5vw 1em -.2em black;; 
        z-index: 2;
    }

    .licenses-container {
      padding: 0 10%;
    }

    .licenses-card-group {
      margin-top: 5vh;
      display: flex;
    }

    .licenses-card-box {
      height: 50vh;
      width: 100%;
      margin: 5vh auto;
    }

    #beats {
      position: relative;
      text-align: center; 
      height: 90vh; 
      width: 100vw; 
      margin-top: 10vh; 
      padding-top: 10vh;
      opacity: .99; 
      z-index: 1; 
      background: 
        linear-gradient(
        rgba(214,214,214,0.45),
        rgba(214,214,214,0.45)), 
        url(../static/tearfence.jpeg);
      background-size: cover; 
      background-position: center;
    }

    .web-header {
        display: none;
    }

    .web-header-logo {
      display: none;
    }

    .mobile-header {
      position: absolute;
      top: 0; 
      bottom: 0; 
      left: 0; 
      right: 0; 
      background-color: rgba(193,225,238,.8); 
      box-shadow: 0vw .5vw 1em 0em black; 
      width: 100%; 
      height: 10vh; 
      z-index: 9;
    }

    .mobile-header-container {
      padding: 0 5%; 
      height: 100%; 
      width: 100%; 
      text-align: center; 
      position: relative;
      display: grid;
      grid-template-columns: 60% 20% 20%;
    }

    .mobile-header-logo {
      float: left; 
      height: 10vh; 
      width: 80%; 
      text-align: left;
      bottom: 0vh;
      cursor: pointer;
      display: flex;
    }

    .mobile-header-link {
      color: #000; 
      height: min-content; 
      width: min-content; 
      cursor: pointer;
      display: flex;
      margin: auto;
    }

    .mobile-header-link i {
      color: #000; 
    }

    #mobile-footer {
      height: 100vh; 
      width: 100vh; 
      text-align: center;   
      padding: 0; 
      margin: 0; 
      border: 0; 
      position: static;
    }

    #web-footer {
      display: none;
    }
}


/* WEB MEDIA QUERY */


@media screen and (min-width: 767px) {
    * {
      font-size: 16px;
    }

    .atc-option h5, .atc-option span {
      font-size: 1rem;
    }
  
    #featured {
      position: relative;
      text-align: center; 
      height: 85vh; 
      width: 100vw; 
      margin-top: 15vh; 
      padding-top: 10vh;
      opacity: .99; 
      z-index: 1; 
      background: 
        linear-gradient(
        rgba(214,214,214,0.45),
        rgba(214,214,214,0.45)), 
        url(../static/tearfence.jpeg);
      background-size: cover; 
      background-position: center;
    }

    .licenses {
        position: relative; 
        color: black; 
        text-align: center; 
        height: 90vh; 
        width: 100%;  
        padding-top: 1vh; 
        bottom: 0; 
        left: 0; 
        right: 0; 
        background-color: rgba(193,225,238,.8); 
        box-shadow: 0vw -.5vw 1em -.2em black;; 
        z-index: 2;
        display: flex;
    }

    .licenses-container {
      padding: 5%;
      margin: auto;
    }

    .licenses-card-group {
      margin-top: 22.5vh;
      display: flex;
    }

    .licenses-card-box {
      height: 100%;
      width: 30%;
      margin: auto;
    }

    .popup {
      color: black; 
      background-color: white; 
      height: 70vh; 
      width: 70vw; 
      border-radius: .2em; 
      margin: 15vh 15vw; 
      padding: 5vh 5vw; 
      overflow-y: scroll;
    }

    .cart {
      overflow: auto;
    }

    #beats {
      position: relative;
      text-align: center; 
      height: 85vh; 
      width: 100vw; 
      margin-top: 15vh; 
      padding-top: 10vh;
      opacity: .99; 
      z-index: 1; 
      background: 
        linear-gradient(
        rgba(214, 214, 214,0.45),
        rgba(214, 214, 214, 0.45)), 
        url(../static/tearfence.jpeg);
      background-size: cover; 
      background-position: center;
    }
    
    .mobile-header {
        display: none;
    }

    .web-header {
      position: absolute; 
      background-color: rgba(193,225,238,.8); 
      box-shadow: 0vw .5vw 2em; 
      width: 100vw; 
      height: 15vh; 
      top: 0vh; 
      z-index: 3;
    }

    .web-header-logo {
      width: 28vw; 
      height: 16vh; 
      text-align: center;  
      position: absolute; 
      top: 0vh; 
      left: 36vw; 
      z-index: 4; 
      cursor: pointer;
    }

    .web-header-container {
      width: 100vw; 
      height: 15vh; 
      padding: 0 5vw; 
      text-align: center; 
      position: fixed; 
      top: 0; 
      bottom: 0; 
      left: 0; 
      right: 0; 
      z-index: 5;
    }

    .web-header-music {
      display: inline-block; 
      float: left; 
      position: relative; 
      z-index: 9; 
      color: #000; 
      padding: 0; 
      margin: 0; 
      width: 10vw; 
      height: 100%; 
      text-align: center; 
      border: .2em solid rgba(250,250,255,0.0); 
      border-radius: 12px; 
      cursor: pointer;
    }

    .web-header-music-icon {
      height: 100%; 
      text-align: left; 
      position: relative; 
      top: 2vh;
      color: black;
    }

    .web-header-cart {
      display: inline-block; 
      float: right; 
      position: relative; 
      z-index: 9; 
      color: #000; 
      padding: 0; 
      margin: 0; 
      width: 10vw; 
      height: 100%; 
      text-align: center; 
      border: .2em solid rgba(250,250,255,0.0); 
      border-radius: 12px; 
      cursor: pointer;
    }

    .web-header-cart-icon {
      height: 100%; 
      text-align: right; 
      position: relative; 
      top: 2vh; 
      color: black;
    }

    #web-footer {
      height: 85vh; 
      width: 100%; 
      text-align: center;  
      padding: 0; 
      margin: 0; 
      border: 0; 
      position: static; 
      top: 185vh;
    }

    #mobile-footer {
      display: none;
    }
}

/*APP BACKGROUND(do later)*/



/*ADD TO CART POPUP*/

#atc-title-box {
  text-align: center; 
  height: 10vh; 
  margin-bottom: 2.5vh;
}

#atc-title {
  padding: 0; 
  height: 5vh; 
  padding-top: 2.5vh;
}

.atc-option {
  height: 10vh; 
  margin-bottom: 2.5vh; 
  cursor: pointer; 
  display: grid; 
  grid-template-columns: 15% 55% 30%; 
  grid-template-areas: "dot license price" "dot offerings price";
}

.atc-option-select {
  border-top: 0.1vh solid black; 
  border-bottom: 0.1vh solid black; 
  height: 10vh; 
  margin-bottom: 2.5vh; 
  background-color: rgba(193,225,238,.8);
}

.atc-option-dot {
  grid-area: dot; 
  height: 4vh; 
  width: 4vh; 
  border-radius: 10em; 
  border: .1vh solid black; 
  float: left; 
  margin: 3vh 2.5vw 0 2.5vw;
}

.atc-option-dot-select {
  background-color: #000;
}

.atc-option-license-box {
  width: 100%; 
  height: 10vh; 
  float: left;
  display: flex;
  flex-direction: column;
}

.atc-option-license-name {
  grid-area: license; 
  text-align: left; 
  margin: auto auto 0 auto; 
  width: 100%; 
  height: min-content; 
}

.atc-option-offerings {
  grid-area: offerings; 
  text-align: left; 
  margin: 0 auto auto auto; 
  width: 100%; 
  height: min-content; 
  color: #444;
}

.atc-option-price {
  grid-area: price; 
  height: 5vh; 
  margin-top: 2.5vh; 
  float: right; 
  text-align: left;
}

/*BEATS CARD*/

.beats-card-item {
  padding: 2vh 0; 
  display: grid; 
  grid-template-columns: 12.5% 62.5% 25%; 
  text-align: left;
}

#beats-card-web {
  position: relative; 
  width: 60vh; 
  height: 90vh; 
  top: 5%; 
  left: 20%; 
  padding: 2vh 5vw; 
  border: 0em solid black; 
  border-radius: 1em; 
  box-shadow: 0px 6px 10px #555; 
  overflow: scroll; 
  background-color: rgba(128,128,150,0.4);
}

#beats-card-mobile {
  position: relative; 
  width: 80%; 
  height: 90%; 
  top: 0%; 
  left: 10%; 
  padding: 2vh 5vw; 
  border: 0em solid black; 
  border-radius: 1em; 
  box-shadow: 0px 6px 10px #555; 
  overflow: scroll; 
  background-color: rgba(128,128,150,0.5);
}

/*CART CONTENT*/

#cart-content-header {
  text-align: center; 
  height: 5vh; 
  padding-bottom: 2.5vh;
}

#cart-content-list {
  height: 35vh; 
  width: 100%; 
  overflow: scroll;
}

.cart-content-list-item {
  display: block; 
  width: 100%; 
  height: min-content; 
  margin-bottom: 4.5vh; 
  padding: 0 10%;
}

.cart-content-list-grid {
  display: grid; 
  grid-template-columns: 62.5% 30% 7.5%; 
  grid-template-areas: "title title title" " . price remove";
  text-align: left;
}

.cart-content-item-remove {
  grid-area: remove; 
  float: right; 
  height: 100%; 
  width: 100%; 
  max-width: 25px; 
  border: .3vh solid rgba(204, 78, 0, 0.5); 
  cursor: pointer; 
  background-color: rgba(255,180,135,0.5); 
  color: rgba(204, 78, 0, 0.5); 
  display: flex;
}

#cart-content-totals {
  width: 100%; 
  padding: 0 10%; 
  height: 5vh; 
  display: grid; 
  border-top: .2vh solid black; 
  grid-template-columns: 70% 30%; 
  text-align: left;
}

#cart-buy-button {
  height: 5vh; 
  width: 30vw; 
  margin-top: 5vh; 
  color: #004; 
  background-color: rgba(193,225,238,.8); 
  border: .3vh solid rgb(49, 143, 180);
}

/* LICENSES LAYOUT */

.licenses-card {
  height: 100%; 
  box-shadow: 0.5vw .5vw 1em -.5em #444;
}

.licenses-card-price {
  font-size: 2.5em;
}

.licenses-card-button {
  margin: auto; 
  background-color: rgba(255,180,135,0.5); 
  color: black; 
  border: none; 
  padding: 1.5vh 4vw; 
  border-radius: .3em;
}