/* 
 Notes on the classes:

 1. The .carousel-left and .carousel-right is used to indicate where
    the active slide is heading.
 2. .active is the current slide.
 3. .active.carousel-left and .active.carousel-right is the current
    slide in its in-transition state. Only one of these occurs at a time.
 4. .carousel-next.carousel-left and .carousel-prev.carousel-right
    is the upcoming slide in transition.
*/

.carousel { 
  position: relative;
  display: flex;
  width: 100%;
  height: 800px;
}

/* Carousel Controls */

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 30%;
  left: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators > .active { background-color: white; }

.carousel-indicators > li {
  position: relative;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  cursor: pointer;
  background-color: rgba(255,255,255,.5);
}

.carousel-indicators > li::before,
.carousel-indicators > li::after {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
}

.carousel-indicators > li::before { top: -10px; }
.carousel-indicators > li::after { bottom: -10px; }

.carousel-indicators > li:hover { cursor: pointer; }

.carousel-arrow {
  border: solid white;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 0;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  z-index: 4;
  cursor: pointer;
}

.carousel-arrow.left {
  left: 2.5%;
  transform: rotateZ(135deg);
}
.carousel-arrow.right {
  right: 2.5%;
  transform: rotateZ(315deg);
}

.carousel-item-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Carousel Items*/
.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  z-index: 0;
  height: 100%;
  perspective: 1000px;
}

.active {
  display: block;
  transition: all 1s ease-in-out;
}

.carousel-caption.disabled { display: none; }

/* From right to left */
.carousel-right { transform: translateX(100%); }
.carousel-prev.right { animation: prevRight .7s ease forwards; }
.carousel-next.right { animation: nextRight .7s ease forwards; }
.carousel-caption h2.right { transform: translateX(100%); }
.carousel-caption .prev.right { animation: prevRight .7s ease forwards; }
.carousel-caption .next.right { animation: nextRight .7s ease forwards; }
@keyframes nextRight { 
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes prevRight {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
/* From left to right */
.carousel-left { transform: translateX(-100%); }
.carousel-prev.left { animation: prevLeft .7s ease forwards; }
.carousel-next.left { animation: nextLeft .7s ease forwards; }
.carousel-caption h2.left { transform: translateX(100%); }
.carousel-caption .prev.left { animation: prevLeft .7s ease forwards; }
.carousel-caption .next.left { animation: nextLeft .7s ease forwards; }
@keyframes nextLeft { 
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes prevLeft {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}


.disabled { display: none; }

.carousel-cover {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.49);
}

.carousel-heading {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  color: white;
  display: flex;
  align-items: center;
}

.carousel-heading  h1 {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.2;
  user-select: none;
  text-shadow: 1px 1px 8px #000;
  margin-top: -6rem;
}

.carousel-caption {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 4;
  align-items: flex-end;
  justify-content: flex-end;
}

.carousel-subheading {
  width: 40%;
  text-align: center;
  color: white;
  padding: 0;
  margin: 0;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

.carousel-subheading h2 {
  font-size: 1.5rem;
  margin: 0 5% 0 0;
  color: #212121;
  width: 100%;
}

.row-separator {
  position: absolute;
  bottom: -1px;
  z-index: 7;
  width: 100%;
  height: 205.2px;
  overflow: hidden;
}

.row-separator > svg {
  fill: whitesmoke;
  height: inherit;
  width: 100%;
  position: absolute;
  left: -10%;
  top: 10%;
}

.row-separator > svg:nth-child(2) { 
  left: -5%;
  fill: #55beee;
  position: absolute;
  top: 15%;
}

.row-separator > svg:nth-child(3) {
  left: 0;
  fill: #abdd34;
  position: absolute;
  top: 20%;
}

.resized_car {
  height: 513px;
  margin-bottom: 5%;
}
.resized_car.carousel-item-container .carousel-heading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.resized_car .carousel-heading {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  top: 40%;
  right: 0;
  margin: auto 0 auto auto;
  height: 100%;
}

.resized_car .carousel-heading h1 {
  font-size: 3.5rem;
  margin: 0;
  color: #212529;
  text-shadow: none;
  padding: 0;
  margin-right: 5%;
}

/* Background images */

.fixed-bg { background-attachment: fixed; }

#span-shadow { display: none; }

#slide_1,
#slide_2,
#slide_3,
#slide_4,
#about,
#people,
#environment,
#certifications,
#services,
#contatti,
#products,
#materie_pr_sec,
#bobine_stock,
#news,
#carte_produzione,
#gallery {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#people,
#bobine_stock,
#carte_produzione, #contatti { background-position: top; }

/* JPEG (DEFAULT) */
.no-webP #slide_1 { background-image: url('/assets/img/home/slide_1.jpg'); }
.no-webP #slide_2 { background-image: url('/assets/img/home/slide_2.jpg'); }
.no-webP #slide_3 { background-image: url('/assets/img/home/slide_3.jpg'); }
.no-webP #slide_4 { background-image: url('/assets/img/home/slide_4.jpg'); }
.no-webP #about { background-image: url('/assets/img/about/azienda_copertina.jpg'); }
.no-webP #environment{ background-image: url('/assets/img/about/ambiente_copertina.jpg'); }
.no-webP #certifications { background-image: url('/assets/img/about/certificazioni_copertina.jpg'); }
.no-webP #people { background-image: url('/assets/img/about/capitale_copertina.jpg'); }
.no-webP #services { background-image: url('/assets/img/services/servizi_copertina.jpg'); }
.no-webP #contatti { background-image: url('/assets/img/contacts/contatti_copertina.jpg'); }
.no-webP #products { background-image: url('/assets/img/products/prodotti_copertina.jpg'); }
.no-webP #materie_pr_sec { background-image: url('/assets/img/products/materie_copertina.jpg'); }
.no-webP #bobine_stock { background-image: url('/assets/img/products/bobina_copertina.jpg'); }
.no-webP #carte_produzione { background-image: url('/assets/img/products/produzione_copertina.jpg'); }
.no-webP #news { background-image: url('/assets/img/news/news_copertina.jpg'); }
.no-webP #gallery { background-image: url('/assets/img/gallery/copertina.jpg'); }

/* WEBP (If supported) */
.webp #slide_1 { background-image: url('/assets/img/home/slide_1.webp'); }
.webp #slide_2 { background-image: url('/assets/img/home/slide_2.webp'); }
.webp #slide_3 { background-image: url('/assets/img/home/slide_3.webp'); }
.webp #slide_4 { background-image: url('/assets/img/home/slide_4.webp'); }
.webp #about { background-image: url('/assets/img/about/azienda_copertina.webp'); }
.webp #environment{ background-image: url('/assets/img/about/ambiente_copertina.webp'); }
.webp #certifications { background-image: url('/assets/img/about/certificazioni_copertina.webp'); }
.webP #people { background-image: url('/assets/img/about/capitale_copertina.webp'); }
.webp #services { background-image: url('/assets/img/services/servizi_copertina.webp'); }
.webp #contatti { background-image: url('/assets/img/contacts/contatti_copertina.webp'); }
.webp #materie_pr_sec { background-image: url('/assets/img/products/materie_copertina.webp'); }
.webp #bobine_stock { background-image: url('/assets/img/products/bobina_copertina.webp'); }
.webP #carte_produzione { background-image: url('/assets/img/products/produzione_copertina.webp'); }
.webp #news { background-image: url('/assets/img/news/news_copertina.webp'); }
.webP #gallery { background-image: url('/assets/img/gallery/copertina.jpg'); }