@charset "UTF-8";
/* CSS Document */

main.home {
 margin-top: -6rem;
}


#pool_carousel .carousel-item {
  background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: 100vh;
}


.carousel-item {
  transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.carousel-caption h1 {font-size: 2rem;}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  transition: opacity 0s 2s;
}

.carousel-caption {
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12.5%;
  text-align: left!important;
}

.my-col {
  padding: 1rem calc(10% + 1rem);
}

.carousel-control-next, .carousel-control-prev {width: 10%;}
.carousel-control-next-icon, .carousel-control-prev-icon {width: 1.75rem;height: 1.75rem;}


.roller {
  height: 4rem;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.roller #rolltext {
  position: absolute;
  top: 0;
  animation: slide 9s cubic-bezier(0.125, 0.1, 0.125, 1) infinite;  
}

@keyframes slide {
  0%{
    top:0;
  }
  16.6% {
    top: -4rem;    
  }
  33.3% {
    top: -8rem;
  }
    49.9% {
    top: -12rem;
  }
  
    66.5% {
    top: -16rem;
  }
  
    83.2% {
    top: -20rem;
  }

}





.pool_teaser {
  background-color: var(--color-black);
  height: 20vh;
  display: flex;
  align-items: center;
  -webkit-transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.pool_teaser_wrapper a p {
  font-family: var(--font-family-bold);
  color: var(--color-light-grey);
  font-size: 2.25rem;
}

.pool_teaser_wrapper a:hover p {
  color: var(--color-black);
}

.pool_teaser_scrolling_area {
  display: flex; 
  overflow: hidden;
}

.pool_teaser_scrolling_item {
  white-space: nowrap;
  animation-name: infiniteScroll;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes infiniteScroll {
  from {transform: translateX(0) }
  to {transform: translateX(calc(0px - 50%));}
}


.my-col {
  background-size: cover!important;
  background-repeat: no-repeat!important;
  background-position: center center!important;
}

@media (min-width: 576px) {
  .carousel-caption h1 {font-size: 2.75rem;}
}


@media (min-width: 768px) {
  .carousel-caption h1 {font-size: 3.5rem;}
}


@media (min-width: 992px) {
  .roller-h1,.pool_teaser_wrapper a p {font-size: 2.5rem;}
  .carousel-caption h1 {font-size: 4.25rem;}
  .carousel-control-next-icon, .carousel-control-prev-icon {width: 2rem;height: 2rem;}

}


@media (min-width: 1200px) {
  .roller-h1,.pool_teaser_wrapper a p {font-size: 2.75rem;}
  .carousel-caption h1 {font-size: 5rem;}
  #pool_carousel .carousel-item {height: calc(100vh - 10rem);}
  .carousel-control-next-icon, .carousel-control-prev-icon {width: 2.5rem;height: 2.5rem;}
}


@media (min-width: 1400px) {
  .roller-h1,.pool_teaser_wrapper a p {font-size: 3rem}
  .carousel-caption h1 {font-size: 5.75rem;}
}


@media (min-width: 1500px) {
  .roller-h1 {font-size: 3.25rem}
  .carousel-caption h1 {font-size: 6.5rem;}
  .carousel-control-next-icon, .carousel-control-prev-icon {width: 3rem;height: 3rem;}
}

@media (min-width: 1600px) {
    .roller-h1 {font-size: 3.5rem}
    .carousel-caption h1 {font-size: 7.25rem;}
}

@media (min-width: 1920px) {
    .roller-h1 {font-size: 3.75rem}
    .carousel-caption h1 {font-size: 8rem;}
}