*, *::before, *::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html { text-size-adjust: 100%; scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }

/* --- GLOBAL ---------- Scrollbar */
body::-webkit-scrollbar { width: 8px; background-color: #000; }
body::-webkit-scrollbar:hover { width: 8px; background-color: #000; }
body::-webkit-scrollbar-track { background-color: #000; }
body::-webkit-scrollbar-thumb { background: #b78846; }
body::-webkit-scrollbar-thumb:hover { background: #dfa75a; }

/* --- GLOBAL ---------- Defaults */
html,body,a,h1, h2, h3, h4,p,ul,a#logoMark { padding:0; margin:0; }

.margin,.navGroup,#cart,.aps-hero_content { position: relative;}

#logoMark #aps-logo { display: inline-block;}
#logoMark,#cart,.navGroup,#rightNav,#cartIcon,.slideNav .margin { display: flex; }
.aps-button { display: inline-flex;}
#rightNav { gap: 1.3rem;}

#logoMark,.navGroup,#rightNav,#cart,.aps-button,.aps-hero { align-items: center; }

/* --- GLOBAL ---------- Layout ----------- */
/* --- GLOBAL ---------- Margins ---------- */
.zreo { margin: 0; }
/* --- GLOBAL ---------- Padding ---------- */
.zreo { padding: 0; }
.margin { padding: 0 1.5rem; }

/* --- GLOBAL ---------- Typography: Font Family ---------- */
body { line-height: 1.6; letter-spacing: 0.01em; color: #111;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }
body { font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; }
.aps-button,.brando,.tab p b { font-family: "brandon-grotesque", sans-serif; }

/* --- GLOBAL ---------- Typography: Font Weight ---------- */
body,p,button,.aps-button, #mastHead b,
#logoMark span,.aps-hero_lede,.aps-hero_lede b { font-weight: 400;}
h1, h2, h3, h4, #mastHead a { font-weight:500; }
.navLink { font-weight:700; font-weight:600; }

a { text-decoration: none; }
ul#rightNav li>a {transition: all .2s;}
/* --- GLOBAL ---------- Typography: Text > Letter Spacing ---------- */
h1, h2, h3, h4 { letter-spacing: -0.01em; }
/* --- GLOBAL ---------- Typography: Text > Align Center ------------ */
.aps-new-release { text-align: center; }
/* --- GLOBAL ---------- Typography: Text > Decoration -------------- */
#mastHead a { text-decoration: none; }
/* --- GLOBAL ---------- Typography: Text > Uppercase --------------- */
#logoMark span,.aps-hero h1,.aps-button,.navLink { text-transform: uppercase; }


/* --- GLOBAL ---------- Typography: List ---------- */
li { margin: 0; padding: 0; list-style-type: none; }

/* --- GLOBAL ---------- Color: White ---------- */
a,.aps-hero,.aps-button { color: #FFFFFF; }
.tab span b { color: #b78846; }

/* --- GLOBAL ---------- Buttons ---------- */
button { font-size: .9rem; }

.aps-button { 
    padding: 1rem; 
    font-size: .9rem; 
    text-decoration: none; 
    letter-spacing: .05rem; 
    transition: transform .2s ease, opacity .2s ease, background-color .2s ease; 
    background-color: #000; 
}
.aps-button.outline { background: rgba(0,0,0,0); }

#cart::before { background: rgba(255,255,255,.22); }

/* --- GLOBAL ---------- Borders & Effecrs ---------- */
/* #cart { border-left: 1px solid; } */
#mastHead { border-bottom: 1px solid; }
.aps-button.outline { border: 2px solid; }
.aps-button.outline { border-color: #FFF; }

/* .2s */a { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
/* .2s */.aps-button,button,.button,.btn { transition: background-color .2s;}
/* .2s */.aps-button,button,.button,.btn { -webkit-transition: background-color .2s linear;-ms-transition: background-color .2s linear;transition: background-color .2s linear;}


/* --- GLOBAL ---------- Border Color ---------- */
#mastHead { border-color:rgba(255,255,255,.22); }


/* --- GLOBAL ---------- Icons & Graphics ---------- */
i.icon-diamond svg { max-height: 44px;}
#aps-logo { fill:#fff; height: 1.25rem; margin: auto 0;}

/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------- */

/* --- GLOBAL ---------- Header ---------- */
#mastHead { position:fixed; top:0; left: 0; right: 0; z-index: 999;}
#mastHead.dark { background-color: rgba(0,0,0,.92);}

#logoMark span { display: inline-flex; margin: 0 1rem; }
header #head-top {}

#cart::before { content: ""; position: absolute; top: 0; pointer-events: none; left: 0; width:1px; }


/* --------------------------------------------------------------------------------------------------------------------------------- */
/* ---------- HOME */
.aps-hero { position: relative; display: grid; isolation: isolate; background: #111; }
.aps-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0) 65%);}
.aps-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.22)); width: 100%; }
/* .aps-container { flex-direction: column; } */
.aps-hero_lede { color: rgba(255,255,255,.86); }
/* .aps-hero_actions { flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; } */


/* GLOBAL -------------------- HERO BANNER -------------------- */
.slideNav button,.slideNav button.tab .contain { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.slideNav { height: 90px; }
.slideNav .margin { max-width: 1404px; height: 90px; }

#barRow { position: absolute; height: 90px; left:0; right:0; bottom:0; z-index: 900; }
.barContain { display: block; position: relative; height: 100%; }
span.barOne,span.barTwo,span.barThree { position: absolute; width: 1px; height: 100%; bottom:0; background-color: rgba(255,255,255,0.22); }
span.barOne { left: 25%; margin-left: -0.5px; }
span.barTwo { left: 50%; margin-left: -0.5px; }
span.barThree { left: 75%; margin-left: -0.5px; }

.banner-arrow { position: absolute; top: 50%; transform: translateY(-50%); width:50px; height: 50px; border: 2px solid #fff; border-radius: 50%; cursor: pointer; background: transparent; z-index: 10;}
.banner-arrow svg { fill: rgba(255,255,255,1); width: 50%;height: 50%; vertical-align: middle;}
.banner-arrow:hover svg { fill:rgba(0,0,0,1); }

.view.shadow {box-shadow: inset 0 200px 150px -50px rgba(0, 0, 0, 0.77);box-shadow: rgba(0, 0, 0, 0.8) 0px -220px 180px -140px inset, rgba(0, 0, 0, 0.8) 0px 220px 180px -100px inset;}

.overlay { position: absolute;left: 0;right: 0;top: 0;bottom: 0;-webkit-transition: background 0.8s;-o-transition: background 0.8s;transition: background 0.8s;z-index: 1;}
.overlay.shadow {box-shadow: inset 0 200px 150px -50px rgba(0, 0, 0, 0.77);box-shadow: rgba(0,0,0,0.8) 0px -220px 180px -140px inset, rgba(0,0,0,0.8) 0px 220px 180px -100px inset;}
.overlay.shadow::before {content: "";display: block;width: 500px;height: 100%;position: absolute;top: 0;right: 0;background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 66%, rgba(0, 0, 0, 0.9) 100%);background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 66%, rgba(0, 0, 0, 0.9) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 66%, rgba(0, 0, 0, 0.9) 100%);filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#e6000000', GradientType=1 );opacity: 0.7;pointer-events: none;}


/*----------------------------------------------------------------------------------------------------*/
/*Slider*/



.slideNav button.tab { width: 25%; display: flex; flex-basis:25%; padding:0; bottom:0; box-sizing: border-box; height: 90px;border-radius: 0;outline:0; border:0;color: #fff;font-family: minion-pro, georgia, serif;font-style: normal;line-height: 22px;letter-spacing: 2px; text-transform: uppercase;text-shadow: 0 1px 0 rgba(0, 0, 0, .25);background: transparent;cursor: pointer;opacity: 1; overflow:hidden;-webkit-tap-highlight-color: transparent;transition: .3s opacity;transform: translate3d(0, 0, 0); transition: all .4s; z-index: 950;}

.tab.active { border-bottom: 2px solid #b78846; color: #333; }
.tab:hover { border-bottom: 2px solid #999; }
.slideNav button.tab .contain { display: block;transition: all .4s;position: relative;top: 50%;transform: translateY(-50%);text-align: center; padding: 1.5rem 2.5rem; }
.slideNav button.tab .contain p { font-size: .9rem; line-height: 150%; }

/* ---------- TAB HOVER ---------- */
.slideNav button.tab.active { box-shadow: inset 0 -5px 0 #b78846, inset 0 -50px 50px -40px rgba(0, 0, 0, .33); }
.slideNav button.tab:hover { box-shadow: inset 0 -5px 0 #b78846, inset 0 -50px 50px -40px rgba(0, 0, 0, .33); }
/* Tab Buttons */
.aps-hero #heroTabs {}
.aps-hero #heroTabs .btnTab {}

.swiper-next, .swiper-prev { position: absolute; top: 177px; left: 0; z-index: 4; display: flex; flex-direction: column;
    align-content: center;
    justify-content: center;
    box-sizing: content-box;
    width: 10%;
    height: 63%;
    padding: 0 20px;
    border-radius: 0;
    cursor: pointer !important;
}
.swiper-next, .swiper-prev { top: 125px; }
.swiper-next { right: 0; left: auto; }

.swiper-next .circle, .swiper-prev .circle {
    display: block;
    box-sizing: border-box;
    width: 62px;
    height: 62px;
    margin: 0 auto;
    padding: 21px 21px 20px 19px;
    border: 3px solid #fff;
    border-radius: 100%;
    overflow: hidden;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
    transition: color .3s background-color .3s box-shadow .3s;
}
.swiper-next .circle {
    padding: 21px 20px 20px 21px;
}
.swiper-next .circle::before, .swiper-prev .circle::before {
    position: relative;
    display: block;
    transition: all .4s;
    content: "";
}
.swiper-next .circle::before {
    width: 0;
    height: 0;
    margin: 0 2px 0 4px;
    border-top: 8px solid rgba(0, 0, 0, 0);
    border-bottom: 8px solid rgba(0, 0, 0, 0);
    border-left: 12px solid #fff;
}
.swiper-prev .circle::before {
    width: 0;
    height: 0;
    margin: 0 4px 0 2px;
    border-top: 8px solid rgba(0, 0, 0, 0);
    border-right: 12px solid #fff;
    border-bottom: 8px solid rgba(0, 0, 0, 0);
}






/* DESKTOP ---------------------------------------------------------------------------------------------------------- */
@media (min-width: 1404px) {
}

/* DESKTOP ---------------------------------------------------------------------------------------------------------- */
@media (min-width: 770px) and (max-width: 1404px) {
        .swiper-prev {
        left: 0;
        width: auto;
        height: 72%;
        margin-left: auto;
        padding: 0 0 0 20px;}
    .swiper-next { right: 0; width: auto; height: 72%; margin-right: auto; padding: 0 20px 0 0; }
    .swiper-next:hover, .swiper-prev:hover { cursor: pointer !important; }
    .swiper-next:hover .circle, .swiper-prev:hover .circle {
    border: 3px solid #fff;
    background-color: #fff;
    transition: all .5s;}

}

/* LAPTOP ---------------------------------------------------------------------------------------------------------- */
@media (min-width: 769px) {

    #iconCart { width: 22px; margin: auto;}
    /* --- LAPTOP ---------- Typography: Font Size ---------------------------------------------------- */
    #logoMark span { font-size: .75rem;}
    .navLink { font-size: .8rem; }

    /* --- LAPTOP ---------- Typography: Letter Spacing ---------------------------------------------------- */
    #logoMark span { letter-spacing: .175rem;}
    .navLink { letter-spacing: .1rem;}
    .aps-hero h1 { letter-spacing: .175rem;}
    .widerOne { letter-spacing: .125rem;}
    .widerFive { letter-spacing: .5rem;}

    /* --- LAPTOP ---------- Typography: Line Height ---------------------------------------------------- */
    #logoMark span,.navLink { line-height: 52px; }
    
    /* --- LAPTOP ---------- Header ---------- */
    #mastHead { height:52px; }
    ul#infoMenu { display: flex;}
    .navGroup { justify-content: space-between;}
    #rightNav li { height: 52px;}
    #cart { padding-left: 1.5rem; }
    #cart::before { height: 52px;}

    /* #mastHead a:hover { transition: all 2ms;} */
    #mastHead #aps-logo:hover { fill:#ddaa62; }
    #mastHead a#logoMark:hover span { color:#ddaa62; }
    #mastHead ul li a:hover { color: #ddaa62; }

    /* --- LAPTOP ---------- Hero ---------- */
    .aps-hero h1 { margin: 0; font-size: 4.7rem; line-height: 1.05;}
    .aps-hero_lede { text-transform: uppercase; font-size: 1.35rem; line-height: 1.5; letter-spacing: .1rem; margin: 1rem 0 1rem;  }
    .aps-hero { min-height: 90svh; height:90vh; }
    .aps-hero_content { float: right; padding-right: 15rem; max-width: 50%; z-index: 2; }

    

    #bannerTabs { position: absolute; bottom: 0; left: 0; width: 100%; height: 90px;}

    /* --- LAPTOP ---------- Home: Newest Releases ---------------------------------------------------- */
    .aps-new-release .container { padding: 3rem 0; }
    .aps-new-release header {  }

}

/* MOBILE WIDE ---------------------------------------------------------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {

    #mastHead { height:52px; line-height: 52px;}
    #logoMark span { line-height: 52px; }
    .aps-hero h1 { font-size: 4.7rem; }
}

/* MOBILE ---------------------------------------- */
@media (max-width: 480px) {

    /* Hide */
    .navLink { display: none; }
    /* br.lineBreak { display: none; } */

    #logoMark span { font-size: .75rem; font-weight: 500; letter-spacing: .07rem; max-width: 200px;}

    #mastHead { height:52px; line-height: 52px;}
    #logoMark span { line-height: 52px; }
    .aps-hero { min-height: 80svh; height:80vh; }
    .aps-hero h1 { font-size: 2.5rem; line-height: 1;}
    .aps-hero_content { padding: 1rem; }

    #rightNav {position: absolute; top: 0; right: 0;}
}