@tailwind base;
@tailwind components;
@tailwind utilities;

#content{
    width: 100%;
}

input:checked ~ .radio {
  color:white;
  background-color: #09AEAE;
}
.loader {
  border-top-color: #09AEAE;
  -webkit-animation: spinner 1.5s linear infinite;
  animation: spinner 1.5s linear infinite;
}

@-webkit-keyframes spinner {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.alert-shown{
  display: block;
  opacity: 1;
  transition: all 250ms linear;
}

.alert-hidden {
  display: none;
  opacity: 0;
  transition: all 250ms linear 2s;
}




/* body{
  font-family: 'Work Sans', sans-serif;
} */
.work-sans {
  font-family: 'Work Sans', sans-serif;
}
      
#menu-toggle:checked + #menu {
  display: block;
}

.hover\:grow {
  transition: all 0.3s;
  transform: scale(1);
}

.hover\:grow:hover {
  /* transform: scale(1.02); */
    transform: scale(1.05)
}

.hover\:growsmall{
  transition: all 0.2s;
  transform: scale(1);
}

.hover\:growsmall:hover{
  transform: scale(1.02);
}

.hover\:growsearch {
  transition: all 0.3s;
  transform: scale(1);
}

.hover\:growsearch:hover {
  /* transform: scale(1.02); */

}

@media only screen and (min-width: 1800px){
  .hover\:grow:hover {
    transform: scale(1.2)
    /* transform: scaleY(0.60);
    transform: scaleX(0.7) */
  }
}

.carousel-open:checked + .carousel-item {
  position: static;
  opacity: 100;
}
.carousel-item {
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
  display: block;
}

.carousel-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
  color: #000;
  /*Set to match the Tailwind colour you want the active one to be */
}