/* ==========================================================
   AFTERDARK BASS
   RESPONSIVE.CSS
   PART 1
========================================================== */

/* ==========================================================
   1600px+
========================================================== */

@media (min-width:1600px){

.container{

    max-width:1500px;

}

.hero h1{

    font-size:6.5rem;

}

.hero h2{

    font-size:2rem;

}

.hero-text{

    font-size:1.3rem;

    max-width:950px;

}

.section-title h2{

    font-size:3.6rem;

}

.zone-card{

    min-height:700px;

}

.album-card img{

    height:550px;

    object-fit:cover;

}

}

/* ==========================================================
   1400px
========================================================== */

@media (max-width:1400px){

.container{

    max-width:1240px;

}

.hero h1{

    font-size:5.5rem;

}

.hero-logo{

    width:260px;

}

.zone-card{

    min-height:620px;

}

}

/* ==========================================================
   1200px
========================================================== */

@media (max-width:1200px){

.hero{

    padding:140px 0 90px;

}

.hero h1{

    font-size:4.8rem;

}

.hero h2{

    font-size:1.4rem;

}

.hero-text{

    font-size:1.05rem;

}

.hero-logo{

    width:240px;

}

.hero-stats{

    gap:20px;

}

.stat{

    min-width:130px;

    padding:20px;

}

.zone-card{

    min-height:560px;

}

.zone-content{

    padding:35px;

}

.zone-content h3{

    font-size:1.8rem;

}

.section{

    padding:90px 0;

}

.section-title h2{

    font-size:2.8rem;

}

.glass-card{

    padding:35px;

}

.newsletter-card{

    padding:45px;

}

.cta-card{

    padding:60px;

}

}

/* ==========================================================
   992px
========================================================== */

@media (max-width:992px){

.navbar{

    padding:14px 0;

}

.logo{

    width:160px;

}

.navbar-collapse{

    margin-top:20px;

    background:#080808;

    border-radius:18px;

    padding:20px;

    border:1px solid rgba(255,255,255,.08);

}

.navbar-nav{

    gap:5px;

}

.nav-link{

    padding:14px !important;

}

.hero{

    text-align:center;

    min-height:auto;

    padding-top:160px;

    padding-bottom:100px;

}

.hero-logo{

    width:220px;

}

.hero h1{

    font-size:4rem;

    line-height:1.2;

}

.hero h2{

    font-size:1.3rem;

}

.hero-text{

    max-width:700px;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    justify-content:center;

}

.section{

    padding:80px 0;

}

.section-title{

    margin-bottom:55px;

}

.section-title h2{

    font-size:2.5rem;

}

.about-content{

    margin-top:40px;

}

.zone-card{

    min-height:520px;

}

.zone-content{

    padding:30px;

}

.zone-content h3{

    font-size:1.7rem;

}

.album-card{

    margin-bottom:30px;

}

.player-card{

    margin-top:20px;

}

.release-card{

    margin-bottom:25px;

}

.feature-card{

    padding:35px;

}

.platform-card{

    padding:35px;

}

.social-card{

    padding:35px;

}

.footer{

    text-align:center;

}

.footer-social{

    justify-content:center;

    margin-top:20px;

}

.footer-logo{

    margin:auto;

    margin-bottom:20px;

}

.footer-links{

    margin-bottom:30px;

}

}

/* ==========================================================
   TABLETS
========================================================== */

@media (max-width:768px){

.container{

    padding-left:22px;

    padding-right:22px;

}

.hero{

    padding-top:150px;

    padding-bottom:90px;

}

.hero-logo{

    width:180px;

}

.hero-badge{

    font-size:.75rem;

    letter-spacing:1px;

    padding:8px 18px;

}

.hero h1{

    font-size:3rem;

    letter-spacing:2px;

}

.hero h2{

    font-size:1.1rem;

}

.hero-text{

    font-size:1rem;

    line-height:1.8;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

    gap:15px;

}

.btn-main,

.btn-outline{

    width:260px;

    justify-content:center;

}

.hero-stats{

    flex-direction:column;

    align-items:center;

    gap:18px;

}

.stat{

    width:100%;

    max-width:320px;

}

.section{

    padding:70px 0;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:2.1rem;

}

.section-title span{

    font-size:.8rem;

    letter-spacing:2px;

}

/* ABOUT */

.glass-card{

    padding:30px;

}

.glass-card h3{

    font-size:1.7rem;

}

.glass-card p{

    font-size:.98rem;

}

/* ZONES */

.zone-card{

    min-height:480px;

}

.zone-content{

    padding:25px;

}

.zone-content h3{

    font-size:1.5rem;

}

.zone-content p{

    font-size:.95rem;

}

.zone-btn{

    font-size:.95rem;

}

/* FEATURED */

.album-card{

    margin-bottom:30px;

}

.album-info{

    padding:22px;

}

.album-info h3{

    font-size:1.6rem;

}

.player-card{

    padding:25px;

}

.player-card iframe{

    height:300px;

}

/* VIDEO */

.video-card{

    padding:15px;

}

/* RELEASES */

.release-card img{

    height:220px;

}

.release-content{

    padding:22px;

}

/* FEATURES */

.feature-card{

    padding:28px;

}

.feature-card i{

    font-size:2.6rem;

}

.feature-card h3{

    font-size:1.3rem;

}

/* STATS */

.stat-card{

    padding:35px 20px;

}

.stat-card h2{

    font-size:2.5rem;

}

/* STREAMING */

.platform-card{

    padding:30px;

}

.platform-card i{

    font-size:3rem;

}

/* CTA */

.cta-card{

    padding:40px 30px;

}

.cta-card h2{

    font-size:2.2rem;

}

.cta-card p{

    font-size:1rem;

}

/* SOCIAL */

.social-card{

    padding:30px;

}

.social-card i{

    font-size:2.6rem;

}

/* NEWSLETTER */

.newsletter-card{

    padding:35px;

    text-align:center;

}

.newsletter-card h2{

    font-size:2rem;

}

/* FOOTER */

.footer{

    padding-top:70px;

}

.footer h5{

    margin-top:30px;

}

.footer-links{

    text-align:center;

}

.footer-social{

    justify-content:center;

}

.footer-divider{

    margin:35px 0;

}

.copyright{

    text-align:center;

    margin-bottom:10px;

}

/* BACK TO TOP */

.back-to-top{

    width:50px;

    height:50px;

    right:20px;

    bottom:20px;

}

}
/* ==========================================================
   MOBILE DEVICES
   (576px and below)
========================================================== */

@media (max-width:576px){

/* ==========================
   Global
========================== */

.container{

    padding-left:18px;

    padding-right:18px;

}

section{

    padding:60px 0;

}

/* ==========================
   Navbar
========================== */

.logo{

    width:140px;

}

.navbar{

    padding:12px 0;

}

.navbar-toggler{

    border:none;

    box-shadow:none;

}

.navbar-toggler i{

    color:#fff;

    font-size:28px;

}

.nav-link{

    text-align:center;

}

/* ==========================
   Hero
========================== */

.hero{

    min-height:100vh;

    padding-top:130px;

    padding-bottom:70px;

}

.hero-logo{

    width:150px;

}

.hero-badge{

    font-size:.70rem;

    padding:7px 15px;

}

.hero h1{

    font-size:2.3rem;

    letter-spacing:1px;

    line-height:1.2;

}

.hero h2{

    font-size:1rem;

    margin-top:12px;

}

.hero-text{

    font-size:.95rem;

    line-height:1.8;

    margin-top:20px;

}

.hero-buttons{

    margin-top:35px;

}

.btn-main,

.btn-outline{

    width:100%;

    max-width:300px;

    font-size:.95rem;

    padding:15px;

}

.hero-stats{

    margin-top:40px;

    gap:15px;

}

.stat{

    width:100%;

    max-width:100%;

}

/* ==========================
   Section Titles
========================== */

.section-title{

    margin-bottom:35px;

}

.section-title span{

    font-size:.75rem;

}

.section-title h2{

    font-size:1.8rem;

    margin-top:10px;

}

/* ==========================
   About
========================== */

.glass-card{

    padding:24px;

}

.glass-card h3{

    font-size:1.5rem;

}

.glass-card p{

    font-size:.95rem;

}

/* ==========================
   Zone Cards
========================== */

.zone-card{

    min-height:420px;

}

.zone-content{

    padding:22px;

}

.zone-content h3{

    font-size:1.4rem;

}

.zone-content p{

    font-size:.90rem;

}

.zone-btn{

    font-size:.9rem;

}

/* ==========================
   Album
========================== */

.album-card img{

    height:260px;

    object-fit:cover;

}

.album-info{

    padding:20px;

}

.album-info h3{

    font-size:1.5rem;

}

/* ==========================
   Spotify
========================== */

.player-card{

    padding:18px;

}

.player-card iframe{

    height:152px;

}

/* ==========================
   YouTube
========================== */

.video-card{

    padding:10px;

}

/* ==========================
   Releases
========================== */

.release-card img{

    height:220px;

}

.release-content{

    padding:20px;

}

.release-content h4{

    font-size:1.2rem;

}

/* ==========================
   Features
========================== */

.feature-card{

    padding:24px;

}

.feature-card i{

    font-size:2.4rem;

}

/* ==========================
   Stats
========================== */

.stat-card{

    padding:28px;

}

.stat-card h2{

    font-size:2rem;

}

/* ==========================
   Platforms
========================== */

.platform-card{

    padding:28px;

}

.platform-card i{

    font-size:2.6rem;

}

/* ==========================
   CTA
========================== */

.cta-card{

    padding:30px 22px;

}

.cta-card h2{

    font-size:1.8rem;

}

.cta-card p{

    font-size:.95rem;

}

/* ==========================
   Social
========================== */

.social-card{

    padding:28px;

}

.social-card i{

    font-size:2.4rem;

}

/* ==========================
   Newsletter
========================== */

.newsletter-card{

    padding:28px;

}

.newsletter-card h2{

    font-size:1.8rem;

}

.newsletter-card p{

    font-size:.95rem;

}

/* ==========================
   Footer
========================== */

.footer{

    text-align:center;

}

.footer-logo{

    width:150px;

}

.footer-text{

    font-size:.95rem;

}

.footer-links{

    margin-top:20px;

}

.footer-social{

    justify-content:center;

}

/* ==========================
   Back To Top
========================== */

.back-to-top{

    width:45px;

    height:45px;

    right:15px;

    bottom:15px;

    font-size:18px;

}

}

/* ==========================================================
   EXTRA SMALL DEVICES
   (360px and below)
========================================================== */

@media (max-width:360px){

.logo{

    width:120px;

}

.hero{

    padding-top:110px;

}

.hero-logo{

    width:120px;

}

.hero h1{

    font-size:1.9rem;

}

.hero h2{

    font-size:.9rem;

}

.hero-text{

    font-size:.88rem;

}

.btn-main,
.btn-outline{

    font-size:.85rem;

    padding:13px 18px;

}

.section-title h2{

    font-size:1.5rem;

}

.glass-card{

    padding:20px;

}

.zone-card{

    min-height:360px;

}

.zone-content{

    padding:18px;

}

.zone-content h3{

    font-size:1.2rem;

}

.zone-content p{

    font-size:.85rem;

}

.player-card iframe{

    height:152px;

}

.album-card img{

    height:220px;

}

.release-card img{

    height:180px;

}

.cta-card{

    padding:22px 18px;

}

.newsletter-card{

    padding:22px;

}

.footer-logo{

    width:120px;

}

}

/* ==========================================================
   LANDSCAPE MOBILE
========================================================== */

@media (max-height:500px) and (orientation:landscape){

.hero{

    min-height:auto;

    padding-top:120px;

    padding-bottom:60px;

}

.hero-logo{

    width:140px;

}

.hero h1{

    font-size:2.4rem;

}

.hero-stats{

    display:none;

}

.scroll-down{

    display:none;

}

}

/* ==========================================================
   VERY LARGE MONITORS
========================================================== */

@media (min-width:1900px){

.container{

    max-width:1700px;

}

.hero h1{

    font-size:7rem;

}

.hero h2{

    font-size:2.2rem;

}

.hero-text{

    max-width:1100px;

    font-size:1.35rem;

}

.section-title h2{

    font-size:4rem;

}

.zone-card{

    min-height:760px;

}

}

/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover:none){

.zone-card:hover,
.release-card:hover,
.platform-card:hover,
.feature-card:hover,
.social-card:hover,
.album-card:hover{

    transform:none;

}

.btn-main:hover,
.btn-outline:hover{

    transform:none;

}

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

.navbar,
.back-to-top,
.scroll-down,
.hero-buttons,
.footer-social{

    display:none !important;

}

body{

    background:white;

    color:black;

}

.hero{

    min-height:auto;

    background:none;

}

.section{

    page-break-inside:avoid;

}

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion:reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}

/* ==========================================================
   HIGH CONTRAST
========================================================== */

@media (prefers-contrast:more){

.glass-card,
.zone-card,
.platform-card,
.feature-card,
.release-card,
.stat-card,
.social-card{

    border:2px solid #ffffff;

}

}

/* ==========================================================
   DARK MODE SUPPORT
========================================================== */

@media (prefers-color-scheme:dark){

body{

    background:#050505;

}

}

/* ==========================================================
   END OF RESPONSIVE.CSS
========================================================== */