/* @font-face { font-family: Betterlett; src: url('../fonts/Betterlett.ttf'); }  */
@-webkit-keyframes color_change {
	from { color: #05b6f1; }
	to { color: #ba0823; }
}

@-moz-keyframes color_change {
	from { color: #05b6f1; }
	to { color: #ba0823; }
}
@-ms-keyframes color_change {
	from { color: #05b6f1; }
	to { color: #ba0823; }
}
@-o-keyframes color_change {
	from { color: #05b6f1; }
	to { color: #ba0823; }
}
@keyframes color_change {
	from { color: #05b6f1; }
	to { color: #ba0823; }
}

body {
  height: 100%
}

.dark-theme {
  background-color: #cd5f6fff;
  font-family: Arial, Helvetica, sans-serif;;
  font-size: 18px
}

.themed-grid-col {
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
  padding-bottom: 15px;
  padding-top: 15px;
}

.themed-container {
  border: 1px solid rgba(0, 123, 255, .2);
  background-color: rgba(0, 123, 255, .15);
  margin-bottom: 30px;
  padding: 15px;
}

.top-social-container {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100000;
}

.header-row {  
  background: rgba(0, 0, 0, 0.40);
  background-image: url("../images/header-grad.png");
  background-repeat: repeat-y;
  background-position: left; 
  z-index: 1000;  
}

.header-image {
  background-image: url("../images/patch.jpeg");
  display: block;
  height: 72px;
}

.header-fancy-font {
  color: #ba0823cc;
  margin: 7px 0 0 16px;
}

#sb-header-image {
  width: 315px;
}

.fancy-font {
  color: #ba0823cc;
  font-size: 28px;
  text-align: center;
  -webkit-animation: color_change 3s infinite alternate;
	-moz-animation: color_change 3s infinite alternate;
	-ms-animation: color_change 3s infinite alternate;
	-o-animation: color_change 3s infinite alternate;
	animation: color_change 3s infinite alternate;
}

.social-links {
  display: inline-flex;
  margin: 13px 0 0 14px;
}

.social-links a {
  margin-left: 10px;
}

.main-content {
  background-image: url("../images/paint-splater-1.png");
  background-repeat: repeat;
  background-position: left; 
  color: #926a6a;
  width: 100%;
  padding: 10px;
}

.new-album-header {
  margin: 75px 0 25px 0;
  text-align: center;
}

.stereo-beach-new-album-title {
  display: block;
  margin: 0 auto;
  width: 50%;
}

.new-album-container {
  background: rgba(0, 0, 0, 0.80);
  border-radius: 30px;
  box-shadow: 5px 10px #ba0823cc;
  text-align: center;
}

.new-album-image {
  border: 4px solid #d69800;
  border-radius: 30px;
  margin: 10px 0 15px 0;
  max-width: 80%;
}

.video-container {
  background: rgba(0,0,0,0.80);
  border: 4px solid #d69800;
  border-radius: 30px;
  box-shadow: 5px 10px #ba0823cc;
  margin: 20px auto 15px;
  padding: 10px 10px 30px;
  text-align: center
}

.video-container .yt-embed-vid {
  height: 280px;
  width: 80%;
}

.stereo-beach-bio-container {
  background: rgba(0, 0, 0, 0.90);
  border-radius: 30px;
  box-shadow: 5px 10px #ba0823cc;
  margin: 20px auto 15px;  
  padding: 0 8px 15px;
}

.container-header-img {
  display: block;
  margin: 10px auto;
  width: 126px; 
}

.previous-albums-header {
  width: 350px; 
}

.stereo-beach-bg-img-container {
  border: 4px solid #d69800;
  border-radius: 30px;
  display: block;
  height: auto;
  left: 0;
  margin: 20px auto 20px;
  position: relative;
  top: 0;
  width: 100%;
}

.stereo-beach-bio-header, .stereo-beach-bio-description {
  color: #e0e0e0;
  display: block;
  line-height: 3rem;  
}

.stereo-beach-bio-header {
  color: #05b6f1;
  font-size: 33px;
}

.previous-album-row {
  background: rgba(0, 0, 0, 0.90);
  border-radius: 30px;
  box-shadow: 5px 10px #ba0823cc;
  margin: 20px auto 15px;
  padding: 0 0 15px 0;
}

.previous-album-imgs {
  border: 4px solid #d69800;
  border-radius: 30px;
}

.stereo-beach-previous {
  color: #05b6f1;
  display: block; 
  line-height: 3rem;
  margin: 10px 0 2px 0;
}

.okug-link {
  display: block;
  margin: 15px auto 40px;
  width: 50%;
}

.text-spacer {
  margin-right: 30px;
}

.plug-it-container {
  background: rgba(0, 0, 0, 0.90);
  border: 4px solid #d69800;
  border-radius: 30px;
  box-shadow: 5px 10px #ba0823cc;
  font-size: 35px;
  line-height: 3rem;
  margin: 20px auto 60px;
  padding: 10px 10px 30px;
  text-align: center;
}

.buy-our-mixtape {
  color: #05b6f1;
  font-size: 35px;
  line-height: 3rem;
  margin: 0px auto 20px;
}

.soundcloud-link {
  margin: 0px;
  width: 50%;
}

#email-link {
  margin-right: 10px;
}

/* iPhones 6, 7, & 8 Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

  .header-fancy-font {
    margin-top: 4px;
    font-size: 30px;
  }

  .social-links {
    margin: 0 0 0 0;
  }

  #email-link {
    margin-right: 69px;
  }

  .yt-embed-vid  {
    margin-bottom: 20px;
  }

  .jawshuwa-link {
    margin-bottom: 20px;
  }
}

.footer-row {
  background: rgba(0, 0, 0, 0.90);
  border: 4px solid #d69800;
  border-radius: 30px;
  box-shadow: 5px 10px #ba0823cc;
  color: #ba0823cc;
  font-size: 20px;
  padding-left: 5px;
  width: 100%;
}

.footer-row .row {
  text-align: center;
}

.bandcamp-link{
  margin-top: 5px;
}

.amazon-link {
  margin: -4px -3px 0;
  padding: 0;
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    .new-album-image {
      max-width: 90%;
    }

    .new-album-header {
      margin-top: 10px;
    }

    .stereo-beach-new-album-title {
      width: 75%;
    }

    .fancy-font {
      font-size: 15px;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

    .new-album-header {
      /* margin-top: 50px; */
    }

    #sb-header-image {
      display: block;
      margin: 0 auto;
      width: 175px;
    }

    .social-links {
      margin: 0 auto;
      text-align: center;
      
    }
    .social-links a {
      height: 22px;
      margin: 0 10px 0 0;
      width: 22px;
    }

    .social-links a svg {
      height: 22px;
      margin: 0 10px 0 0;
      width: 22px;
    }

    #email-link {
      height: 22px;
      margin: 0px 10px 0 0;
      width: 22px;
    }

    .amazon-link {
      margin-top: 0px;
    }

    .bandcamp-link {
      margin-top: 0px;
    }

    .header-fancy-font {
      margin-top: 1px;
    }

    .fancy-font {
      font-size: 15px;
    }

    .new-album-image {
      max-width: 90%;
    }

    .new-album-header {
      margin-top: 85px;
    }

    .stereo-beach-bio-header, .stereo-beach-bio-description {
      font-size: 12px;
      line-height: 1rem;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

    /* .yt-embed-vid {
      height: 270px;
      width: 480px;
    }

    .okug-link {
      max-width: 480px;
    }

    #apple-link {
      margin-top: 10px;
      max-width: 100%;
    }
  
    #spotify-link {
      margin-top: 25px;
      max-width: 95%;
    }
  
    #soundcloud-link {
      margin-top: 20px;
      max-width: 100%;
    }
  
    #email-link {
      margin-top: 6px;
      max-width: 90%;
    } */

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

    .new-album-header {
      margin-top: 50px;
    }
    /* .yt-embed-vid {
      height: 216px;
      width: 384px;
    }

    .okug-link {
      max-width: 335px;
    }

    #apple-link {
      margin-top: 10px;
      max-width: 100%;
    }
  
    #spotify-link {
      margin-top: 12px;
      max-width: 95%;
    }
  
    #soundcloud-link {
      margin-top: 10px;
      max-width: 116%;
    }

    #email-link {
      margin-top: 6px;
      max-width: 90%;
    } */
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
    /* .yt-embed-vid {
      height: 216px;
      width: 384px;
    }

    .okug-link {
      max-width: 525px;
    }

    #apple-link {
      margin-top: 10px;
      max-width: 100%;
    }
  
    #spotify-link {
      margin-top: 25px;
      max-width: 95%;
    }
  
    #soundcloud-link {
      margin-top: 20px;
      max-width: 100%;
    }
  
    #email-link {
      margin-top: 6px;
      max-width: 90%;
    } */
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 896px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 896px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

    .new-album-image {
      max-width: 90%;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 896px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
    
    /* .yt-embed-vid {
      height: 216px;
      width: 384px;
    }
    
    #apple-link {
      margin-top: 10px;
      max-width: 100%;
    }
  
    #spotify-link {
      margin-top: 25px;
      max-width: 95%;
    }
  
    #soundcloud-link {
      margin-top: 20px;
      max-width: 100%;
    }

    .email-txt {
      display: none;
    }
  
    #email-link {
      margin-top: 6px;
      max-width: 90%;
    } */
}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
    /* .yt-embed-vid {
      height: 216px;
      width: 384px;
    }

    #apple-link {
      margin-top: 10px;
      max-width: 100%;
    }
  
    #spotify-link {
      margin-top: 12px;
      max-width: 95%;
    }
  
    #soundcloud-link {
      margin-top: 10px;
      max-width: 116%;
    }
  
    .email-txt {
      display: none;
    }
  
    #email-link {
      margin-top: 6px;
      max-width: 90%;
    } */

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
    /* #apple-link {
      margin-top: 10px;
      max-width: 100%;
    }
  
    #spotify-link {
      margin-top: 25px;
      max-width: 95%;
    }
  
    #soundcloud-link {
      margin-top: 20px;
      max-width: 100%;
    }

    .email-txt {
      display: none;
    }
  
    #email-link {
      margin-top: 6px;
      max-width: 90%;
    } */
}

/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {
    /* .yt-embed-vid {
      height: 216px;
      width: 384px;
    }
    
    #apple-link {
      margin-top: 10px;
      max-width: 100%;
    }
  
    #spotify-link {
      margin-top: 12px;
      max-width: 95%;
    }
  
    #soundcloud-link {
      margin-top: 10px;
      max-width: 116%;
    }
  
    .email-txt {
      display: none;
    }
  
    #email-link {
      margin-top: 6px;
      max-width: 90%;
    } */

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {
    /* #apple-link {
      margin-top: 10px;
      max-width: 100%;
    }
  
    #spotify-link {
      margin-top: 25px;
      max-width: 95%;
    }
  
    #soundcloud-link {
      margin-top: 20px;
      max-width: 100%;
    }

    .email-txt {
      display: none;
    }
  
    #email-link {
      margin-top: 6px;
      margin-left: 10px;
      max-width: 90%;
    } */
}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
    /* #apple-link {
      margin-top: 22px;
      max-width: 80%;
    }
  
    #spotify-link {
      margin-top: 35px;
      max-width: 85%;
    }
  
    #soundcloud-link {
      margin-top: 26px;
      max-width: 101%;
    }
  
    .email-txt {
      display: none;
    }
  
    #email-link {
      margin-top: 6px;
      margin-left: 34px;
      max-width: 90%;
    } */
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
    /* #apple-link {
      margin-top: 24px;
      max-width: 82%;
    }
  
    #spotify-link {
      margin-top: 43px;
      max-width: 88%;
    }
  
    #soundcloud-link {
      margin-top: 20px;
      max-width: 100%;
    }

    .email-txt {
      display: none;
    }
  
    #email-link {
      margin-top: 6px;
      margin-left: 34px;
      max-width: 79%;
    } */
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
    /* #apple-link {
      margin-top: 22px;
      max-width: 80%;
    }
  
    #spotify-link {
      margin-top: 35px;
      max-width: 85%;
    }
  
    #soundcloud-link {
      margin-top: 26px;
      max-width: 101%;
    }
  
    .email-txt {
      display: none;
    }
  
    #email-link {
      margin-top: 6px;
      margin-left: 10px;
      max-width: 90%;
    } */
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
    
  .stereo-beach-bio-header {
    font-size: 40px;
  }
}
/* Iphone 13 mini */
/* 2340x1080 pixels at 476ppi */
@media only screen 
  and (device-width: 375px) 
  and (device-height: 812px) 
  and (-webkit-device-pixel-ratio: 3) {

  .header-fancy-font {
    /* color: #48ef1a; */
    margin-top: 1px;
    font-size: 40px;
  }
}

/* 2532x1170 pixels at 460ppi */

@media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape) {

  .header-fancy-font {
    /* color: #48ef1a; */
    margin-top: 1px;
    font-size: 40px;
  }

}

/* 2778x1284 pixels at 458ppi */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) {

  .header-fancy-font {
    /* color: #48ef1a; */
    margin-top: 1px;
    font-size: 40px;
  }

}