:root {
  --dbwhite: #ffffff;
  --dbblack: #0a0a0a;
  --dbblue: #1c3a56;
  --dbbrown: #31261d;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

.tk-aktiv-grotesk-extended {
  font-family: aktiv-grotesk-extended, sans-serif;
}

.hp-primary-btn {
  color: #fff;
  max-width: 420px;
  width: 65%;
  font-size: 14px;
  border: 2px solid #fff;
  padding: 0 1rem !important;
  line-height: 50px;
  height: 50px;
}

.hp-primary-btn:hover {
  color: #000;
  background: #fff;
  text-shadow: none;
}

.carousel-inner {
  border-radius: 5px;
  aspect-ratio: 9/16;
}

.main-card .hp-primary-btn {
  color: #000;
  background: #fff;
}

.main-card .hp-primary-btn:hover {
  color: #fff;
  background: var(--dbbrown);
  text-shadow: none;
  border: 1px solid var(--dbbrown);
}

.bottom-right {
  position: fixed;
  bottom: 35px;
  right: 7px;
  z-index: 1000;
}

.scroll-hide {
  opacity: 0;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.switch,
.circle {
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.circle {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--dbblack);
  box-shadow: 0 4px 4px rgba(26, 53, 71, 0.25), 0 0 0 1px rgba(26, 53, 71, 0.07);
}

.circle:hover {
  box-shadow: 0 8px 8px rgba(26, 53, 71, 0.25), 0 0 0 1px rgba(26, 53, 71, 0.07);
}

.circle:before {
  position: absolute;
  content: ' ';
  background-image: url(../../../../images/homepage/2021/06/dark_icon.png?$staticlink$);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 27px;
  margin-top: 10px;
  opacity: 1;
  color: var(--dbwhite);
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.circle:after {
  position: absolute;
  content: ' ';
  background-image: url(../../../../images/homepage/2021/06/light_icon.png?$staticlink$);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 27px;
  margin-top: 10px;
  color: var(--dbblack);
  opacity: 0;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.switched .circle {
  box-shadow: 0 4px 4px rgba(26, 53, 71, 0.25), 0 0 0 1px rgba(26, 53, 71, 0.07);
  background: var(--dbwhite);
}

.switched .circle:hover {
  box-shadow: 0 8px 8px rgba(26, 53, 71, 0.25), 0 0 0 1px rgba(26, 53, 71, 0.07);
}

.switched .circle:before {
  opacity: 0;
}

.switched .circle:after {
  opacity: 1;
  color: var(--dbblack);
}

.switched .mob-hide {
  background: var(--dbwhite);
}

.page {
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
  overflow-x: hidden;
  max-width: 100vw;
}

body.light .page {
  background: var(--dbblack) !important;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

body.light #shopbyCollection .h3,
body.light #shopbyCollection .product-card_title,
body.light #featuredCategories .h3,
body.light #featuredCategories .product-card_title {
  color: var(--dbwhite);
}

body.light .mob-hide,
body.light .mob-show {
  color: var(--dbblack);
}

body.light .mob-hide,
body.light .mob-show {
  background: var(--dbwhite);
}

body.light #durangoTeam .hp-primary-btn {
  color: var(--dbblack);
  border: 1px solid var(--dbblack);
}

body.light #durangoTeam .hp-primary-btn:hover {
  color: var(--dbwhite);
  background: var(--dbblack);
}

body.light .mob-show .hp-primary-btn {
  color: var(--dbblack);
  border: 1px solid var(--dbblack);
}

body.light .mob-show .hp-primary-btn:hover {
  color: var(--dbwhite);
  background: var(--dbblack);
}

.square:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.rectangle:after {
  content: '';
  display: block;
  padding-bottom: 33%;
}

.carousel-item {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  border-radius: 5px;
  min-height: 50vh;
  width: 100%;
  margin: 0 auto;
}

#background-carousel .blur {
  background-position: center;
  min-width: 100vw;
  height: 550px;
  overflow: hidden;
}

#background-carousel {
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  width: auto;
  overflow: hidden;
}

#carousel-bkgd {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.main-card h1 {
  line-height: 1;
  font-size: 3.15rem;
}

.carousel-item .text-secondary {
  font-size: 0.8rem;
  color: #d0d0d0 !important;
}

.main-card {
  /* box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.5); */
  border-radius: 5px;
}

.main-card div.m-0 > div:nth-child(1) > div:nth-child(1) > p:nth-child(1),
.main-card div.m-0 > div:nth-child(1) > div:nth-child(1) > h1:nth-child(2),
.main-card span.main-sm-copy {
  text-shadow: 0 0 25px rgba(10, 10, 10, 0.7);
}

.main-card .carousel-item {
  height: 100%;
}

.line-down-wrap {
  height: 300px;
  width: 100%;
  z-index: 2;
  text-align: center;
  margin: 0 auto;
  margin-top: -6rem;
}

.line-down {
  border-right: 2px solid #aaa;
}

#vbellowWrap {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 90%;
  height: 1040px;
}

#vbellowWrap a {
  width: 100%;
  height: 100%;
  text-decoration: none;
}

#vbellowWrap:hover .vbellow:not(:hover) {
  filter: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz1cJ2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCc+PGZpbHRlciBpZD1cJ2dyYXlzY2FsZVwnPjxmZUNvbG9yTWF0cml4IHR5cGU9XCdtYXRyaXhcJyB2YWx1ZXM9XCcwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwIDAgMCAxIDBcJy8+PC9maWx0ZXI+PC9zdmc+I2dyYXlzY2FsZQ==);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.vbellow {
  flex: 1;
  height: 100%;
  max-width: 100%;
  width: auto;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  border-radius: 5px;
  transition: all 0.75s ease-in-out;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}

.vbellow-1 {
  margin-top: 0;
}

.vbellow:hover {
  flex: 3;
  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.35);
}

.hovimg-text {
  width: 60%;
  height: 100px;
  text-shadow: 0 0 25px rgba(10, 10, 10, 0.7);
  text-align: center;
  z-index: 3;
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  line-height: 1;
  position: relative;
}

.hovimg-text span {
  font-size: 0.75rem;
  font-weight: 400;
}

.vbellow:hover .hovimg-text {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.mob-show {
  display: none;
  color: var(--dbwhite);
  background: var(--dbblack);
}

.mob-hide {
  display: block;
  color: var(--dbwhite);
  background: var(--dbblack);
}

div.mob-hide:nth-child(1):after,
div.col-sm-10:nth-child(2):after {
  background: linear-gradient(to bottom, #0000 60%, #0a0a0a 100%);
  background-image: -ms-linear-gradient(90deg, #0a0a0a 0%, transparent 100%);
  content: '';
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 2;
}

.main-card .slide1 .hp-primary-btn,
.main-card .slide2 .hp-primary-btn,
.main-card .slide3 .hp-primary-btn,
.main-card .slide4 .hp-primary-btn {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.main-card .slide1 .hp-primary-btn:hover,
.main-card .slide2 .hp-primary-btn:hover,
.main-card .slide3 .hp-primary-btn:hover,
.main-card .slide4 .hp-primary-btn:hover {
  background-color: #fff;
  color: #000;
}

.slide1 {
  background-image: url(../../../../images/homepage/2025/05/2025-0523-DB-Homepage-Image-memorial-day-sale.jpg?$staticlink$);
}
  
.slide1.blur {
    background-image: url(../../../../images/homepage/2025/05/2025-0523-DB-HomepageBlur-memorial-day-sale.jpg?$staticlink$);
}

.slide2 {
  background-image: url(../../../../images/homepage/2023/07/2023-0718-DB-MainSlide-summer-work.jpg?$staticlink$);
}

.slide2.blur {
  background-image: url(../../../../images/homepage/2023/07/2023-0718-DB-MainSlide-Blur-summer-work.jpg?$staticlink$);
}

.slide3 {
  background-image: url(../../../../images/homepage/2023/06/2023-0629-DB-MainSlide-coastal-country.jpg?$staticlink$);
}

.slide3.blur {
  background-image: url(../../../../images/homepage/2023/06/2023-0629-DB-MainSlide-Blur-coastal-country.jpg?$staticlink$);
}

/* Expanding Sections on Hover */

.vbellow-1 {
  background-image: url(../../../../images/homepage/2021/06/2021-0609-DB-VerticalAccordion-Mens.jpg?$staticlink$);
}

.vbellow-2 {
  background-image: url(../../../../images/homepage/2021/06/2021-0609-DB-VerticalAccordion-Womens.jpg?$staticlink$);
}

.vbellow-3 {
  background-image: url(../../../../images/homepage/2021/06/2021-0609-DB-VerticalAccordion-Western.jpg?$staticlink$);
}

.vbellow-4 {
  background-image: url(../../../../images/homepage/2021/06/2021-0609-DB-VerticalAccordion-Work.jpg?$staticlink$);
}

.vbellow-5 {
  background-image: url(../../../../images/homepage/2021/11/2021-1101-DB-VerticalAccordion-ToeTypes.jpg?$staticlink$);
}

/* Video */
video.mobVid {
    display: block;
    width: 100%;
}

video.deskVid {
    display: none;
    width: 100%;
}

/* Video Cover Text */
div.coverUp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 1023px) {
  .vbellow {
    flex: 3;
  }

  .vbellow:after {
    background: linear-gradient(to bottom, #0000 60%, #0a0a0a 100%);
    background-image: -ms-linear-gradient(90deg, #0a0a0a 0%, transparent 100%);
    content: '';
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 1px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2;
    border-radius: 5px;
  }

  #vbellowWrap:hover .vbellow:not(:hover),
  .vbellow:hover {
    box-shadow: none;
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    filter: none;
  }

  .slide1 {
      background-image: url(../../../../images/homepage/2025/05/2025-0523-DB-Homepage-Image-memorial-day-sale-MB.jpg?$staticlink$);
  }
}

@media screen and (min-width: 1023px) {
    video.mobVid {
        display: none;
    }
    
    video.deskVid {
        display: block;
    }

    .slide1.blur {
        background-image: url(../../../../images/homepage/2025/05/2025-0523-DB-HomepageBlur-memorial-day-sale.jpg?$staticlink$);
    }

    .carousel-inner {
        aspect-ratio: 16/9;
    }
}

@media screen and (max-width: 992px) {
  .line-down-wrap {
    height: 250px;
    margin-top: -6rem;
  }
}

@media screen and (max-width: 767px) {
  .mob-show {
    display: block;
  }

  .mob-hide {
    display: none;
  }

  .main-card h1 {
    line-height: 1;
  }

}

@media screen and (max-width: 550px) {
  .hovimg-text {
    font-size: 1.8rem;
  }

  .hovimg-text span {
    font-size: 0.65rem;
  }

  .main-card h1 {
    font-size: 1.9rem;
  }
}