body{
  font-family: 'Fredoka', sans-serif;
}
.container {
    max-width: 1200px;
  }
.text-small{
  font-size:.9rem;
}
.btn-primary{
  background-color: #b149e0;
  border:none;
}
.btn-primary:hover{
  background-color: #4cb3e8;
}
.btn-primary:disabled{
  background-color: #efceff
}

.text-info{
  color : #4cb3e8 !important;
}

.btn-wa{
  background : #24cc63;
  color:#fff;
}
.btn-wa:hover{
  background : #075b51;
  color:#fff;
}


.href{
  color:#555;
  text-decoration: none;
}
.href:hover{
  color:#00a490;
  text-decoration-line: underline;
}
.error{
  font-size:.8rem;
  color:red;
}

.fs-small{
  font-size:.7rem;
}

.form-group{
  margin-bottom: 20px;
}

/* Absolute Center Spinner */
.loading {
  position: fixed;
  /* display: flex !important; */
  z-index: 999999999999;
  background-color: red;
  height: 100vh;
  width: 100vw;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}


/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));
  background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
}


/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin: 0 auto !important;
  /* margin-top: 31.5em !important; */
  -webkit-animation: spinner 150ms infinite linear;
  -moz-animation: spinner 150ms infinite linear;
  -ms-animation: spinner 150ms infinite linear;
  -o-animation: spinner 150ms infinite linear;
  animation: spinner 150ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

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

.bg-gray{
  background-color:#eaeaea
}

.bg-special1{
  /* background-color:#f8ffff; */
  background-color:#f8ffff;
}

.mod-wa{position:fixed; bottom:10px; right:65px; width:180px;z-index:99999}
.mod-wa-item{padding:10px; background:#fff; margin-bottom:10px; border:1px solid #eaeaea};
.btn-chat-wa {
  background:#42b549;
  /*position:fixed;*/
  z-index:999;
  /*bottom:15px;right:20px;*/
  padding: 10px 10px;
}
.btn-chat-wa i{
  font-size:1.3rem;
  color:#fff;
  
}


.content-carousel {
  margin-top: 30px;  
}

.bg-slider {
  width: 100%;
  min-height: 40vh;
  position: relative;
}


.caption-top-left {
  color: white;
  /* background-color: rgba(0,0,0,0.2);
  backdrop-filter: blur(2px); */
  padding: 20px;
  position: absolute;
  width: 100%;
  top: 40px;
  left: 40px;
  display: flex;
  flex-direction: column;
  align-items: left;
  text-align: left;
}
.caption-top-right {
  color: white;
  /* background-color: rgba(0,0,0,0.2);
  backdrop-filter: blur(2px); */
  padding: 20px;
  position: absolute;
  width: 100%;
  top: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  align-items: right;
  text-align: right;
}
.caption-top-center {
  color: white;
  /* background-color: rgba(0,0,0,0.2);
  backdrop-filter: blur(2px); */
  padding: 20px;
  position: absolute;
  width: 100%;
  top: 40px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.caption-bottom-center {
  color: white;
  /* background-color: rgba(0,0,0,0.2);
  backdrop-filter: blur(2px); */
  padding: 20px;
  position: absolute;
  width: 100%;
  bottom: 40px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.caption-bottom-left {
  color: white;
  /* background-color: rgba(0,0,0,0.2);
  backdrop-filter: blur(2px); */
  padding: 20px;
  position: absolute;
  width: 100%;
  bottom: 40px;
  left: 40px;
  display: flex;
  flex-direction: column;
  align-items: left;
  text-align: left;
}
.caption-bottom-right {
  color: white;
  /* background-color: rgba(0,0,0,0.2);
  backdrop-filter: blur(2px); */
  padding: 20px;
  position: absolute;
  width: 100%;
  bottom: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  align-items: right;
  text-align: right;
}

.caption-top-right,
.caption-bottom-right {
  right: 10px;
}
.caption-top-left,
.caption-bottom-left {
  left: 10px;
}
.caption-top-left h1,
.caption-top-right h1,
.caption-top-center h1,
.caption-bottom-center h1,
.caption-bottom-left h1,
.caption-bottom-right h1 {
  font-size: 2.5rem;
}

.caption-top-left p,
.caption-top-right p,
.caption-top-center p,
.caption-bottom-center p,
.caption-bottom-left p,
.caption-bottom-right p {
  font-size: 1rem;
}

.carousel-item img{
  width: 100%;
  height: 40rem !important;
}

.card-img-event{
  width: 100%;
  border-radius: 10px;
}
.card-img-event img{
  width: 100%;
}

.card-events a {
  text-decoration: none !important;
}
.card-events .card {
  height: 100%;
}
.card-events .card .card-header {
  height: 14rem !important;
}
.card-events .card .card-header img {
  height: 13rem;
  /* object-fit: cover;
  object-position: center; */
}


/* // Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
  .content-carousel {
    margin-top: 100px;  
  }
  .carousel-item img{
    width: 100%;
    height: 20rem !important;
  }
  .card-events .card .card-header {
    height: 11rem !important;
  }
  .card-events .card .card-header img {
    height: 10rem;
    /* object-fit: cover;
    object-position: center; */
  }

  .caption-top-left h1,
  .caption-top-right h1,
  .caption-top-center h1,
  .caption-bottom-center h1,
  .caption-bottom-left h1,
  .caption-bottom-right h1 {
    font-size: 1.5rem;
  }

  .caption-top-left p,
  .caption-top-right p,
  .caption-top-center p,
  .caption-bottom-center p,
  .caption-bottom-left p,
  .caption-bottom-right p {
    font-size: 0.8rem;
  }


}