/* -------------------------- */
/* ---- ---- GLOBAL ---- ---- */
/* -------------------------- */

html {
    font-family: 'Roboto Condensed', sans-serif;
}

body {
  margin: 0;
  max-width: 100vw;
  overflow-x: hidden;
  /*background: black;*/
}

div, a {
    /* To deal with those pesky slider outlines */
    outline: none;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  /*list-style: none;*/
  padding: 0;
  margin: 0;
}

.button {
    padding: 8px 10px;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    border-radius: 3px;

}

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }




/* -------------------------- */
/* ---- ---- HEADER ---- ---- */
/* -------------------------- */




/* ----- Main Nav ----- */


#header {
  height: 70px;
  width: 100vw;

  background-color: white;
  border-top: 5px solid black;
  border-bottom: 1px solid #BFBFBF;

  text-transform: uppercase;

  overflow: hidden;
}

#logo {
    height: 50px;
    cursor: pointer;
    position: relative;
    top: 10px;
    margin-right: 20px;
}

/* Positiong nav items */
.nav {
  display: flex;
  align-items: baseline;
  box-sizing: border-box;
  padding: 0 10px;
}

.nav ul, .nav li {
  list-style: none;
}

.nav > .nav__topel,
.nav > button {
  margin-right: 20px;
}
.nav > .nav__topel:last-child,
.nav > button:last-child {
  margin-right: 0;
}

/* For showing and hiding elems in dropdown */

.nav__about,
.nav__boots {
  display: none;
  position: absolute;
  top: 76px;
  left: 0; right: 0;
  background-color: white;
  z-index: 10;
  border-bottom: 1px solid #BFBFBF;
}
.nav__boots { padding-left: 82px; }
.nav__about { padding-left: 147px; }

  .nav__about--show,
  .nav__boots--show {
    display: flex;
    flex-direction: column;
    margin-right: 0;
  }

.nav__el,
.nav__topel {
  cursor: pointer;
  color: #4D4D4D;
}
.nav__topel {
  font-size: 16px;
}
.nav__el {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 16px;
  line-height: 2;
}
.nav__el:hover {
  color: #CB0602;
}
.nav__topel:hover {
  border-bottom: 3px solid #CB0602;
}

#spacer {
    flex-grow: 1;
}

#heritage {
  display: none;
}

.nav__topel--hidden-on-small {
  display: none;
}

/* Until done for mobile */
.boot-finder-button {
  display: none;
}

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) {
  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
  #heritage {
    display: block;
  }
  /*#nav__about-main::after {
    content: " Redback";
  }*/
}
@media (min-width:641px) {
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
  .nav {
    padding: 0 30px;
  }

  .nav > * {
    /*margin-right: 30px;*/
  }

  .nav > .store-locator-button::after {
    content: 'Store Finder';
  }
  .nav > .boot-finder-button::after {
    content: 'Boot Finder';
  }

  .nav__boots { padding-left: 102px; }
  .nav__about { padding-left: 167px; }
}
@media (min-width:961px) {
  /* tablet, landscape iPad, lo-res laptops ands desktops */
  .nav {
    padding: 0 60px;
  }

  #nav__boot-main {
    display: none;
  }
  .nav__boots,
  .nav__boots--show {
    display: none;
  }
  .nav__topel--hidden-on-small {
    display: inherit;
  }

  .nav > .store-locator-button::after {
    content: '';
  }
  .nav > .boot-finder-button::after {
    content: '';
  }
  .nav__about { padding-left: 620px; }

  #nav__about-main::after {
    content: "";
  }

  .boot-finder-button {
    display: block;
  }

}
@media (min-width:1025px) {

  /* big landscape tablets, laptops, and desktops */
  .nav > .store-locator-button::after {
    content: 'Store Finder';
  }
  .nav > .boot-finder-button::after {
    content: 'Boot Finder';
  }

}
@media (min-width:1281px) {
  /* hi-res laptops and desktops */
}



/* ---- Boot Dropdown ---- */


.boot-dropdown {
  display: none;
  padding: 10px;

}
  .boot-dropdown--show {
    display: flex;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background-color: white;
    z-index: 10;
    border-bottom: 1px solid #BFBFBF;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
    max-height: 80vh;
    overflow-y: scroll;
    text-align: center;
    border-bottom: 1px solid  #BFBFBF;
  }

.boot-dropdown__img {
    width: 100px;
}
.boot-dropdown__img-box {
  width: 140px;
}

.boot-dropdown__title {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 0px;
}
.boot-dropdown__subtitle {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0;
}
.boot-dropdown__code {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    margin-top: 0px;
    color: #4d4d4d;
}


/* ---- Boot & Store Buttons */


.boot-finder-button {
    background-color: rgba(255, 255, 255, 0);
    border: 1px solid #BFBFBF;
    color: #4D4D4D;
}.store-locator-button {
    color: white;
    background-color: #CB0602;
    border: 1px solid #CB0602;
}




/* ---------------------------- */
/* ---- ---- HOME PAGE --- ---- */
/* ---------------------------- */





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


.home-slider {
  /*height: 500px;*/
  /*width: 100vw;*/
}

.home-slider__slide {
    height: 80vw;
    min-height: 400px;
    width: 100vw;

    background-position: center;
    background-size: cover;
    position: relative;

}

.home-slider__caption {
    position: absolute;
    padding: 10px 8px 5px 8px;
    top: 20px;
    left: 10px;
    color: white;
    background-color: rgba(0,0,0,0.6);
    border-radius: 5px;
}

.home-slider__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 24px;
    margin: 0;
    margin-bottom: 10px;
}

.home-slider__text {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    align-items: baseline;
}

.home-slider__text:hover {
    font-weight: 300;
}

.home-slider__dots
{
    position: absolute;
    bottom: 25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;
    text-align: center;
}
.home-slider__dots li
{
    position: relative;
    display: inline-block;

    margin: 0 5px;
    padding: 10px 0;

    cursor: pointer;
}
.home-slider__dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 30px;
    height: 10px;

    cursor: pointer;

    background-color: white;
    border: 0;
    outline: none;
}
.home-slider__dots li:hover button,
.home-slider__dots li button:hover,
.home-slider__dots li button:focus,
.home-slider__dots li.slick-active button
{
    background-color: #BD0506;
}


@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) {
  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */

}
@media (min-width:641px) {
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
  .home-slider__caption {
    padding: 0;
    left: 30px;
    top: 30px;
    background: none;
  }

  .home-slider__title {
    font-size: 72px;
  }

  .home-slider__text {
    font-size: 24px;
    line-height: 42px;
  }

}
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
  .home-slider__slide {
    height: 60vw;
    max-height: 750px;
  }

  .home-slider__caption {
    left: 60px;
  }

}
@media (min-width:1025px) {
  /* big landscape tablets, laptops, and desktops */
  .home-slider__caption {
    left: 90px;
  }
  .home-slider__dots li button {
    width: 100px;
    height: 5px;
  }
}
@media (min-width:1281px) {
  /* hi-res laptops and desktops */
  .home-slider__caption {
    top: 60px;
    left: 120px;
  }
}


/* ---- ----  Home Base  ---- ---- */

.base {
  width: 100vw;
  display: flex;
  flex-direction: column;
  background: black;
}

.base__div {
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
}

.base__img {
  display: block;
  width: 100vw;
}

.base__caption {
  position: absolute;
  top: 20px;
  left: 10px;
  padding: 10px 8px 5px 8px;
  color: white;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
}

.base__title {
  font-size: 16px;
  text-transform: uppercase;
  margin: 0;
  margin-bottom: 10px;
}

.base__text {
  font-size: 12px;
  line-height: 16px;
  max-width: 50%;
}

.base__link {
  font-size: 14px;
  color: #969696;
  font-weight: 300;
}
  .base__link:hover {
    font-weight: 400;
  }

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) {
  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */

}
@media (min-width:641px) {
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
  .base {
    flex-direction: row;
    overflow-x: hidden;
  }
  .base__img {
    width: 33.33vw;
  }
  .base__caption {

  }
  .base__title {
    font-size: 18px;
  }
  .base__text {
    font-size: 16px;
    line-height: 24px;
    display: none;
  }
  .base__link {
    font-size: 16px;
  }


}
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
  .base__caption {
    left: 20px;
  }
  .base__title {
    font-size: 22px;
  }
}
@media (min-width:1025px) {
  /* big landscape tablets, laptops, and desktops */
  .base__text {
    display: inherit;
  }
  .base__caption {
    left: 40px;
    top: 40px;
  }
}

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

/* ---------------------------------------- */
/* ---- ---- --- ABOUT DESIGN --- ---- ---- */
/* ---------------------------------------- */




.about {
  width: 100vw;
  overflow-x: hidden;
}

.about__img {
  width: 140vw;
  display: block;

  margin-left: 50%;
  transform: translateX(-50%);
}

.about__content {
  text-align: center;
  font-family: "Roboto Condensed", sans-serif;
  color: black;
  box-sizing: border-box;
  padding: 10px;
}

.about__title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: bold;
  text-transform: uppercase;
  margin: 16px 0;
}

.about__linebreak {
  width: 30vw;
  height: 0px;
  border-top: 1px solid black;
  margin: 0 auto;
}

.about__subtitle {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: #575757;
}

.about__text {
  padding: 10px;
  text-align: justify;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.3;
  color: #686868;
}



.about__boots {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80vw;
  margin: auto;
  align-items: flex-end;
  justify-content: center;
  font-family: "Roboto Condensed", sans-serif;
  color: black;
  margin-bottom: 40px;
}

.about__boot-box {
  width: 200px;
  text-align: center;
}
.about__boot-img {
  width: 150px;
}

.about__boot-title {
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 0;
}

.about__boot-code {
  text-transform: uppercase;
  font-size: 12px;
  margin-top: 0;
}


/* ---- Leather ----*/
/* There are some special rules for the leather page */


.about__leather {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  padding: 0 20px;
  box-sizing: border-box;
}
.about__leather-img {
  width: 80px;
  margin: 10px;
}


@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) {
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
  .about__content {
    padding-left: 50px;
    padding-right: 50px;
    max-width: 900px;
    margin: 0 auto;
  }
  .about__title {
    font-size: 46px;
  }
  .about__subtitle {
    font-size: 24px;
  }
  .about__text {
    font-size: 19px;
    text-align: center;
  }
  .about__boots {
    margin-top: 20px;
    margin-bottom: 80px;
  }

}
@media (min-width:961px) {
  .about__img {
    width: 110vw;
  }

  /* tablet, landscape iPad, lo-res laptops ands desktops */
  .about__content {
    padding-top: 20px;
  }
}
@media (min-width:1025px) {

  .about__img {
    width: 100vw;
  }

  /* big landscape tablets, laptops, and desktops */
  .about__title {
    font-size: 50px;
  }
  .about__subtitle {
    font-size: 22px;
  }
  .about__text {
    font-size: 18px;
  }
}
@media (min-width:1281px) { /* hi-res laptops and desktops */ }




/* --------------------------------------- */
/* ---- ---- BOOT PAGES / PANELS ---- ---- */
/* --------------------------------------- */



/* ---- ---- Boot Info Wrapper ---- ---- */
.bootinfo {
  background: black;
}

/* ---- ---- Showcase ---- ---- */


.showcase {
  /*height: 400px;*/
  width: 100vw;

  background-image: url('/images/wood spotlight.jpg');
  background-color: black;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
  color: white;
}

.showcase__slide {
  width: 100vw;
  height: 400px;
  position: relative;
}

.showcase__caption {
  position: absolute;
  top: 20px;
  left: 10px;
  padding: 10px 8px 5px 8px;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
}

.showcase__img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 125px;
  outline: none;
  max-width: 90vw;
}

.showcase__dots
{
    position: absolute;
    bottom: 40px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.showcase__dots li
{
    position: relative;
    display: inline-block;

    margin: 0 5px;
    padding: 10px 0;

    cursor: pointer;
}
.showcase__dots li div
{
    display: block;
    width: 32px;
    height: 32px;
    cursor: pointer;
    /*background-color: white;*/
    border: 0;
    outline: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.showcase__dots li:hover .display-leather,
.showcase__dots li .display-leather:hover,
.showcase__dots li .display-leather:focus,
.showcase__dots li.slick-active .showcase__leather
{
    /*border-width: 3px;*/
    border-color: rgba(203,6,2,0.5);
}.showcase__leather {
    width: 42px;
    border: 2px solid #414042;
}


/* ---- ---- Panels ---- ---- */


.panel {
  position: relative;
  overflow: hidden;
  color: white;
}

.panel__img {
  display: block;
  min-width: 100vw;
  min-height: 320px;
  margin: 0 auto;
  margin-left: 50%;
  transform: translateX(-50%);
}

.panel__caption {
  position: absolute;
  top: 0px; bottom: 0px;
  padding: 10px;
  width: 50vw;
  box-sizing: border-box;
  overflow-y: hidden;
  background-color: rgba(0,0,0,0.3);
}
  .panel__caption--left {
    left: 0;
    text-align: left;
  }
  .panel__caption--right {
    right: 0;
    text-align: right;
  }

  .panel__caption > h2 {
    margin-top: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-size: 24px;
  }

  .panel__caption > p,
  .panel__caption > ul {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
  }

#panel__layered {
  margin-left: 100%;
  transform: translateX(-88%);
}

.panel__storefinder {
    width: 100vw;
    height: 200px;
    background-color: black;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

  .store-locator-panel-button {
      font-size: 16px;
      text-transform: uppercase;
      font-weight: 300;
      line-height: 32px;
      padding: 0 8px;
      letter-spacing: 1px;
  }




@media (min-width:481px) {
  .showcase__slide {
    height: 400px;
  }

  .showcase__img {
    max-width: 80vw;
  }

  .panel__img {
    min-height: 400px;
  }

  .panel__caption {
    background: none;
  }

  .store-locator-panel-button {
    font-size: 20px;
    line-height: 36px;
  }
}

@media (min-width:641px) {
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
  .showcase__slide {
    height: 520px;
  }

  .showcase__img {
    max-width: 70vw;
  }

  .showcase__caption {
    left: 30px;
    font-size: 32px;
    line-height: 1.3;
  }

  .panel__img {
    min-height: 520px;
  }

  .panel__caption {
    line-height: 1.4;
    padding: 40px;
    padding-top: 80px;
  }

  .panel__caption--right {
    text-align: left;
    padding-left: 80px;
  }

  .panel__caption > h2 {
    font-size: 32px;
    line-height: 1.4;
  }
  .panel__caption > ul,
  .panel__caption > p {
    font-size: 16px;
    line-height: 28px;
  }


}
@media (min-width:961px) {
  /* tablet, landscape iPad, lo-res laptops ands desktops */
  .showcase__caption {
    left: 60px;
  }

  .panel__caption {
    padding: 60px;
    padding-top: 80px;
  }

  .panel__caption--right {
    padding-left: 100px;
  }

  .panel__caption > h2 {
    font-size: 36px;
    line-height: 1.4;
  }
  .panel__caption > ul,
  .panel__caption > p {
    font-size: 20px;
    line-height: 32px;
  }

  .panel__storefinder {
    height: 300px;
  }
  .store-locator-panel-button {
    font-size: 24px;
    line-height: 48px;
  }

  #panel__layered {
    transform: translateX(-100%);
  }
}
@media (min-width:1025px) {

  .panel__caption--left,
  .panel__caption--right {
    padding-left: 10vw;
    padding-right: 0vw;
  }

  .panel__caption > h2 {
    font-size: 54px;
    line-height: 62px;
  }

  .panel__caption > ul,
  .panel__caption > p {
    max-width: 30vw;
  }

  .showcase__slide {
    height: 650px;
  }

  .showcase__img {
    bottom: 180px;
  }

  .panel__img {
    min-height: 650px;
  }

  .showcase__dots {
    bottom: 60px;
  }
}
@media (min-width:1281px) {

  .showcase__caption {
    left: 130px;
    font-size: 36px;
  }

  .panel__caption {
    padding-top: 100px;
  }

  .panel__caption--left,
  .panel__caption--right {
    padding-left: 13vw;
    padding-right: 3vw;
  }

}




/* ----------------------------- */
/* ---- ---- TRADITION ---- ---- */
/* ----------------------------- */




.tradition {
  position: relative;
  overflow: hidden;
  /*text-align: center;*/
}

.tradition__img {
  display: block;
  min-width: 100vw;
  min-height: 400px;
  /*max-height: 820px;*/
  margin: 0 auto;
  margin-left: 50%;
  transform: translateX(-50%);
}

.tradition__caption {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;

  background-color: rgba(0,0,0,0.35);

  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 0 10px;
}

.tradition__title {
  max-width: 750px;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-size: 32px;
  line-height: 1.4;
  margin: 0;
}

.tradition__text {
  max-width: 750px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 20px;
  padding: 0 10px;
}


#storyline {
  width: 100vw;
}

.storyline__title {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  fill: white;
}

.storyline__content {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  fill: white;
}

.center-line {
  stroke: #4B4B4B;
  stroke-width: 2;
}

.year {
  fill: #5C0303;
  letter-spacing: -15px;
  font-style: italic;
}


@media (min-width:481px) {
  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
  .tradition__img {
    min-height: 500px;
  }
  .tradition__caption {
    padding: 0 10vw;
  }
  .tradition__title {
    font-size: 52px;
  }
  .tradition__text {
    font-size: 15px;
    padding: 0 5vw
  }
}
@media (min-width:641px) {
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
  .tradition__caption {
    padding: 0 20vw;
  }
  .tradition__title {
    font-size: 58px;
  }
  .tradition__text {

  }
}
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) {
  /* big landscape tablets, laptops, and desktops */
  .tradition__title {
    font-size: 72px;
  }
  .tradition__text {
    font-size: 18px;
  }
}
@media (min-width:1281px) {
  /* hi-res laptops and desktops */

}


/* ------------------------------- */
/* ---- ---- BOOT FINDER ---- ---- */
/* ------------------------------- */




.sidebar {
    float: left;
    width: 280px;
    left: 0px;
    border-right: 1px solid #BFBFBF;
    padding-left: 40px;
    font-family: "Roboto", sans-serif;
    box-sizing: border-box;
}.boot-finder {
    border-left: 1px solid #BFBFBF;
    margin-left: 280px;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-start;
    position: relative;
    right: 1px;
}.bootfinder-img-box {
    margin: 20px;
    text-align: center;
}.bootfinder-boot-title {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 0px;
}.bootfinder-boot-code {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    margin-top: 0px;
}.hideboot {
    display: none;
}.bootfinder-img {
    width: 200px;
    height: 220px;
    object-fit: contain;
    cursor: pointer;
}
.sidebar h3 {
    font-weight: 100;
    font-size: 42px;
}.filters {
    margin-bottom: 60px;
}.filter {
    border: none;
    display: block;
    background-color: transparent;
    padding: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 16px;
    text-transform: capitalize;
    cursor: pointer;
    margin-bottom: 16px;
    outline: none;
}

.filter .svg-icon .bf-circle {
    stroke: #BFBFBF;
}
.filter .svg-icon .bf-tick {
    stroke: none;
}
.checked .svg-icon .bf-circle {
    stroke: #CB0602;
    fill: #CB0602;
}
.checked .svg-icon .bf-tick {
    stroke: white;
}

.svg-icon {
    width: 1em;
    height: 1em;
    position: relative;
    bottom: -0.125em;
}
.svg-icon--big {
    width: 1em;
    height: 1em;
}
.arrow-right {
    stroke: #CB0602;
    stroke-width: 1.5;
}

.filter:hover {
    color: #CB0602;
}.checked {
    color: #CB0602;
    font-weight: 400;
}
.hide {
    display: none;
}




/* --------------------------------- */
/* ---- ---- STORE LOCATOR --------- */
/* --------------------------------- */

.storefinder {
  width: 100vw;
  overflow-x: hidden;

  display: flex;
  flex-direction: column;

}

.search__container {
  width: 100vw;
  background: black;
  text-align: center;
  order: 2;
}

.search {

    color: white;
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    padding: 10px;

    max-width: 1000px;
    margin: auto;
}

.search__title {
    display: none;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-size: 22px;
    /*margin: 10px 0;*/
}

.search__input-div {
  font-size: 14px;
  color: #969696;
  position: relative;
}

.search__input {
    height: 40px;
    width: 80vw;
    max-width: 600px;

    border-radius: 5px;
    border: 1px solid black;

    font-size: 14px;

    padding-left: 10px;
    font-family: "Roboto", sans-serif;
}

.search__input-btn {
  position: absolute;
  top: 0;
  right: 0;
  /*border: 1px solid green;*/
  height: 40px;
  width: 40px;

  background: none;
  border: none;
}

.search__input-btn > svg {
  width: 1.5em;
  height: 1.5em;
  bottom: -0.375em;

}

.search__link {
  display: none;
}

#store-map {
  order: 1;

  height: 320px;
}

#stores {
    margin: auto;
    background-color: black;
    color: white;
    padding: 0 10px;
    padding-bottom: 20px;
}.stores-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}.store-info {
    min-width: 300px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 300;
    color: #FAFAFA;
    line-height: 1.4;
}.store-name {
    line-height: 2;
    font-weight:400;
    color: white;
}.store-hours {
    color: #E0E0E0;
}

.get-directions-button {
    color: white;
    background-color: #CB0602;
    border: 1px solid #CB0602;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
    font-family: "Roboto Condensed";
    font-weight: 100;
    padding: 10px 10px;
}

.infowindow__link {
  color: blue;
  text-decoration: underline;
}

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) {
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */

  .search__container {
    order: -1
  }

  .search {
    padding: 10px 30px;
    padding-bottom: 36px;

  }
  .search__title {
    display: block;
    font-size: 36px;
  }

  #store-map {
    height: 400px;
  }

  #stores {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width:961px) {
  /* tablet, landscape iPad, lo-res laptops ands desktops */
  .search {
    padding-left: 60px;
    padding-right: 60px;
  }

  #store-map {
    height: 450px;
  }

  #stores {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (min-width:1025px) {
  /* big landscape tablets, laptops, and desktops */
  #store-map {
    height: 500px;
  }
}
@media (min-width:1281px) {
  /* hi-res laptops and desktops */
  #store-map {
    height: 600px;
  }
}



/* -------------------------- */
/* ---- ---- FOOTER ---- ---- */
/* -------------------------- */



/* ---- Bottom Nav , Disabled for the moment ---- */

.bottom-nav {
    width: 100%;
    height: 20px;
    background-color: #393B3C;
}
/*
.bottom-nav-list {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 14px;
    font-weight: 300;
    list-style-type: none;
    display: inline-flex;
    color: #FAFAFA;
}

.bottom-nav-item {
    margin-right: 20px;
    text-transform: uppercase;
    cursor: pointer;
}*/

/* ---- Footer ---- */

.footer {
    height: 70px;
    width: 100vw;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: black;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__text {
  color: #666666;
  font-size: 8px;
}

@media (min-width:641px) {
  .footer {
    height: 100px;
    padding: 0 20vw;
  }
  .footer__text {
    font-size: 12px;
  }
}

/* -------------------------- */
/* ---- ----  404   ---- ---- */
/* -------------------------- */

.img__404 {
  width: 100vw;
  max-height: 300px;
  object-fit: cover;
}