/*

adx stylesheet for nars homepage
1. global styles incl slider
2. hero structure
3. other homepage elements 

*/

/* 1. global styles incl slider */

img[data-lazy-src] {
    will-change:content;
}

.mega-menu-logo-container {
    visibility: visible !important;
}

.content-asset a {
    text-decoration: none !important;
}

.glide__slides {
    display: flex;
}

.glide__slide {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 1s;
}

.glide__slide:first-child {
    position:relative;
}

.glide__slide--active {
    z-index:1;
    opacity:1;
}
.glide--swipeable {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.glide--dragging {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.glide__controls {
    display: none;
    position: relative;
    height: 40px;
}

.glide__bullets {
    display: inline-flex;
    list-style: none;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 15px;
    font-weight: 100;
}

.glide__arrow {
    background: transparent;
    border: none;
    color: transparent;
    cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0;
    margin-top: -10px;
    outline: none;
    padding: 0;
    position: absolute;
    top: 40%;
    z-index: 9;
    -webkit-appearance: none;
}

.glide__arrow:hover,
.glide__arrow:focus {
    color: transparent;
    background: transparent;
}

.glide__arrow:focus {
    outline-color: #000000;
}

.glide__arrow:hover:before,
.glide__arrow:focus:before {
    opacity: 1;
}

.glide__arrow:before {
    font-family: icomoon, sans-serif;
    font-size: 40px;
    line-height: 1;
    opacity: .75;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glide__arrow--left {
    left: 0;
}

.glide__arrow--left:before {
    content: "\e903";
}

.glide__arrow--right {
    right: 0;
}

.glide__arrow--right:before {
    content: "\e906";
}

.glide__bullets button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background-color: #6b6b6b;
    border-radius: 50%;
    margin: 15px;
    -webkit-appearance: none;
}

.glide__bullets button.glide__bullet--active {
    background-color: #000;
}

@media only screen and (min-width: 768px) {

}

@media only screen and (min-width: 1024px) {

}

@media only screen and (min-width: 1240px) {

}

/* 2. hero structure */

.hp-section {
  width: 100%;
  min-height: 125px;
  max-width: 1500px;
  margin: 0 auto;
}

.hp-section-dark {
    background: #fff;
}

.hp-section-dark,
.hp-section-dark a {
    color: #fff;
    text-align: center;
}

.hp-section-light {
    background: #000;
}

.hp-section-light,
.hp-section-light a {
    color: #fff !important;
    text-align: center;
}

.hero__background {
    background: #000;
}

.hero__background img {
    vertical-align: bottom;
}

.hero__content {
    padding: 2%;
    background: #000;
    width: 100%;
}

.hero__content .hero__copy {
    margin-top: 25px;
}

.hero__content h4 {
    font-size: 38px;
    line-height: 30px;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: .25em;
}

.hero__content p.text--regular,
.hero__content p.text--highlight {
    font-family: 'Helvetica Neue LT W01_35 Thin', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    margin-bottom: 1em;
}

.hero__content p.text--highlight {
    text-transform: uppercase;
}

.hero__content p.text--regular.text--intro {
    font-size: 1.25em;
    font-weight: 700;
    margin-bottom: .25em;
    margin-top: .25em;
}

.hero__container .hero__content button,
.hero__container.hp-section-light .hero__content button {
    border-color: #fff;
    color: #fff;
}

.hero__content button.cta,
.hero__content a.button {
    font-weight: 700;
    margin-bottom: 25px;
}

@media only screen and (min-width: 768px) {
    .hp-section,
    .hp-section a {
        text-align: left;
    }

    .hp-section-dark,
    .hp-section-dark a {
        color: #000 !important;
    }

    .hero__container {
        position: relative;
    }

    .hero__container.hp-section-dark .hero__content button {
        border-color: #000;
        color: #000;
    }

    .hero__container.hp-section-dark .hero__content button:hover {
        color: #fff;
    }

    .hero__background {
        height: auto;
        width: 100%;
        max-width: 100%;
        background: transparent;
    }

    .hero__background img {
        width: 100%;
        max-width: 100%;
        vertical-align: middle;
    }

    .hero__content {
        position: absolute;
        left: 0;
        top: 15%;
        background: transparent;
        padding: 0;
    }

    .hero__content button.cta {
        padding-left: 60px;
        padding-right: 60px;
        margin-bottom: 0;
    }

    .hero__content .hero__copy {
        margin: 0 auto;
        max-width: 1155px;
        width: 100%;
        left: -1px;
        position: relative;
    }

    .hero__content p.text--regular.text--intro {
        font-size: 1.7em;
        margin-bottom: 0;
        margin-top: 0;
        font-weight: 400;
    }    
}

@media only screen and (min-width: 1024px) {
    .hero__content h4 {
        font-size: 3.5em;
        line-height: 0.9em;
        margin-bottom: 0;
    }
}

@media only screen and (min-width: 1281px) {
    .hero__content h4 {
        font-size: 4em;
        line-height: 0.9em;
    }
}

/* 3. other homepage elements */

#cq_recomm_slot-665d57fe29eeaf8b4d16d3b3f3 {
    min-height: 400px;
}

.pdp-recommendations {
    padding: 0;
}

.pdp-recommendations .header {
    text-align: center; 
    margin: 3% auto 5%;
    font-size: 9vw;
}

@media all and (min-width:768px) {
    .pdp-recommendations .header {
        font-size: 4vw;
    }
}

@media only screen and (min-width: 1024px) {
    #cq_recomm_slot-665d57fe29eeaf8b4d16d3b3f3 {
        min-height: 600px;
    }
}


@media all and (min-width:1500px) {
  .loc-bottom {
    /*padding-top: 28%;*/
  }
  .pdp-recommendations .header {
    font-size: 62px;
  }
}

.t048-bannerWrapper {
    margin-top: 0 !important;
}