/* 
 * These styles will hide extra carousel slides until the Javscript has loaded
 * and properly sets the width of "carsouel-items-container"
 */

@media screen and (max-width: 575px) {
  .loading.civic-carousel .carousel-items-container > div:not(:first-child) {
    display: none;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .loading.civic-carousel:not([data-num-items-sm]) .carousel-items-container > div:not(:first-child) {
    display: none;
  }
  
  .loading.civic-carousel[data-num-items-sm="2"] .carousel-items-container > div:not(:first-child):not(:nth-child(2)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-sm="3"] .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .loading.civic-carousel:not([data-num-items-md]):not([data-num-items-sm])
    .carousel-items-container > div:not(:first-child) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-sm="2"]:not([data-num-items-md])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-sm="3"]:not([data-num-items-md])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-md="2"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-md="3"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-md="4"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)) {
    display: none;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .loading.civic-carousel:not([data-num-items-lg]):not([data-num-items-md]):not([data-num-items-sm])
    .carousel-items-container > div:not(:first-child) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-sm="2"]:not([data-num-items-lg]):not([data-num-items-md])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-sm="3"]:not([data-num-items-lg]):not([data-num-items-md])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-md="2"]:not([data-num-items-lg])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-md="3"]:not([data-num-items-lg])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-md="4"]:not([data-num-items-lg])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-lg="2"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-lg="3"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-lg="4"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-lg="5"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-lg="6"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)):not(:nth-child(6)) {
    display: none;
  }  
}

@media screen and (min-width: 1200px) {
  .loading.civic-carousel:not([data-num-items-xl]):not([data-num-items-lg]):not([data-num-items-md]):not([data-num-items-sm])
    .carousel-items-container > div:not(:first-child) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-sm="2"]:not([data-num-items-xl]):not([data-num-items-lg]):not([data-num-items-md])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-sm="3"]:not([data-num-items-xl]):not([data-num-items-lg]):not([data-num-items-md])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-md="2"]:not([data-num-items-xl]):not([data-num-items-lg])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-md="3"]:not([data-num-items-xl]):not([data-num-items-lg])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-md="4"]:not([data-num-items-xl]):not([data-num-items-lg])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-lg="2"]:not([data-num-items-xl])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-lg="3"]:not([data-num-items-xl])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-lg="4"]:not([data-num-items-xl])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-lg="5"]:not([data-num-items-xl])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-lg="6"]:not([data-num-items-xl])
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)):not(:nth-child(6)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-xl="2"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-xl="3"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-xl="4"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-xl="5"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-xl="6"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)):not(:nth-child(6)) {
    display: none;
  }

  .loading.civic-carousel[data-num-items-xl="7"]
    .carousel-items-container > div:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)):not(:nth-child(6)):not(:nth-child(7)) {
    display: none;
  }
}