/*NOTES*/
/*THIS IS JUST THE GENERAL STYLING FOR CAROUSELS.
THIS PAGE CONTAINS PAGINATION ITEMS, BUTTON ICONS, CAROUSEL CONTAINERS AND CAROUSEL SLIDES. 
UNIQUE STYLING WILL BE IN THE PAGE'S INDIVIDUAL CSS FILE.*/





/*----------------------------------------------- PAGINATION -----------------------------------------------*/
/*CAROUSEL PAGINATION*/
.carousel-pagination {
  display: flex;
}

.pagination_dot-boundary {
  padding: 14px 4px;
}
.pagination_dot-boundary.inactive {
  cursor: pointer;
}

.pagination_dot {
  height: 12px;
  border-radius: 6px;
  margin: 0px;
  background-color: white;
  -webkit-transition:all .25s ease-in-out;
     -moz-transition:all .25s ease-in-out;
      -ms-transition:all .25s ease-in-out;
       -o-transition:all .25s ease-in-out;
          transition:all .25s ease-in-out;
}
.pagination_dot-boundary.active .pagination_dot {
  width: 24px;
  opacity: 1;
}
.pagination_dot-boundary.inactive .pagination_dot {
  width: 12px;
  opacity: .5;
}
.pagination_dot-boundary.inactive:hover .pagination_dot {
  opacity: 1;
  -webkit-transition:all .25s ease-in-out;
     -moz-transition:all .25s ease-in-out;
      -ms-transition:all .25s ease-in-out;
       -o-transition:all .25s ease-in-out;
          transition:all .25s ease-in-out;
  background-color: rgba(255,255,255,0);
  box-shadow: 0 0 0 4px white;
}
/*----------------------------------------------- PAGINATION (END) -----------------------------------------------*/





/*----------------------------------------------- ARROWS -----------------------------------------------*/
/*DON'T FORGET THE CSS IN YOUR LOCAL FILE. COPY IT OVER TO YOUR SECTION, AND MAY NEED TO MAKE THE SECTION RELATIVE FOR ABSOLUTELY POSITIONED ARROWS*/
/*ARROWS*/
@media screen and (max-width: 768px) {
  .wrapper-arrows {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

.carousel-arrow-backward,
.carousel-arrow-forward {
  width: 40px;
  height: 40px;
  z-index: 1;
  position: relative;
}

.carousel-arrow-backward span,
.carousel-arrow-forward span {
    display: block;
    position: absolute;
    height: 9px;
    width: 20px;
    border-radius: 4.5px;
    opacity: 1;
    transition: .5s ease-out;
}

.carousel-arrow-backward:hover,
.carousel-arrow-forward:hover {
    cursor: pointer;
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
    transform:scale(1.1);

    -webkit-transform:translateZ();
    -webkit-transition:all .3s linear;
    -moz-transition:all .3s linear;
    -ms-transition:all .3s linear;
    -o-transition:all .3s linear;
    transition:all .3s linear;
}

.carousel-arrow-backward:hover span,
.carousel-arrow-forward:hover span {
    opacity: 1;
}

.carousel-arrow-backward span:first-child,
.carousel-arrow-forward span:first-child {
    left: 19%;
    top: 49%;
}

.carousel-arrow-backward span:last-child,
.carousel-arrow-forward span:last-child {
    left: 19%;
    bottom: 49%;
}

.carousel-arrow-backward span:first-child,
.carousel-arrow-forward span:last-child {
    transform: rotate(45deg);
}

.carousel-arrow-backward span:last-child,
.carousel-arrow-forward span:first-child {
    transform: rotate(-45deg)
}



/*ROTATE NEXT*/
@keyframes rotateCCW_prev {
  0% { 
    transform: rotate(45deg);
    transform-origin: center;
  }
  100% { 
    transform: rotate(-135deg);
    transform-origin: center;
  }
}
@keyframes rotateCW_prev {
  0% { 
    transform: rotate(-45deg);
    transform-origin: center;
  }
  100% { 
    transform: rotate(135deg);
    transform-origin: center;
  }
}

/*ROTATE PREV*/
@keyframes rotateCCW_next {
  0% { 
    transform: rotate(-45deg);
    transform-origin: center;
  }
  100% { 
    transform: rotate(-225deg);
    transform-origin: center;
  }
}
@keyframes rotateCW_next {
  0% { 
    transform: rotate(45deg);
    transform-origin: center;
  }
  100% { 
    transform: rotate(225deg);
    transform-origin: center;
  }
}
/*----------------------------------------------- ARROWS (END) -----------------------------------------------*/





/*----------------------------------------------- ICON BUTTONS -----------------------------------------------*/
/*ICON-BUTTON-WRAPPER*/
[id*="columns"] .column-text .wrapper-icon_buttons {
  width: 100%;
  display: flex;
}
@media screen and (max-width: 768px) {
  [id*="columns"] .column-text .wrapper-icon_buttons {
    justify-content: center;
    margin-bottom: 48px;
  }
}



/*ICON-BUTTON*/
[id*="columns"] .column-text .wrapper-icon_buttons .icon_button {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 22px;
  position: relative;
  -webkit-transition:all .25s ease-in-out;
     -moz-transition:all .25s ease-in-out;
      -ms-transition:all .25s ease-in-out;
       -o-transition:all .25s ease-in-out;
          transition:all .25s ease-in-out; 
}
@media screen and (max-width: 768px) {
  [id*="columns"] .column-text .wrapper-icon_buttons .icon_button {
    margin-left: 12px;
    margin-right: 12px;
  }
}
/*@media screen and (min-width: 769px) {
  [id*="columns"] .column-text .wrapper-icon_buttons .icon_button {
      margin-right: 24px;
  }
}*/
[id*="columns"] .column-text .wrapper-icon_buttons .icon_button.inactive:hover {
  cursor: pointer;
}

/*SYMBOL*/
[id*="columns"] .column-text .wrapper-icon_buttons .icon_button .symbol {
  position: absolute;
  top: 5px;
  left: 5px;
  border-radius: 27px;
  -webkit-transition:all .25s ease-in-out;
     -moz-transition:all .25s ease-in-out;
      -ms-transition:all .25s ease-in-out;
       -o-transition:all .25s ease-in-out;
          transition:all .25s ease-in-out;
}
/*SYMBOL*/
[id*="columns"] .column-text .wrapper-icon_buttons .icon_button.active .symbol {
  background-color: rgba(209,233,255,0);
}
[id*="columns"] .column-text .wrapper-icon_buttons .icon_button.inactive .symbol {
  background-color: rgba(209,233,255,1);
}
[id*="columns"] .column-text .wrapper-icon_buttons .icon_button.inactive:hover .symbol {
  background-color: rgba(209,233,255,0);
}


/*BORDER*/
[id*="columns"] .column-text .wrapper-icon_buttons .icon_button .border{
  position: absolute;
  bottom: 0px;
  left: 0px;
  border-radius: 27px;
  width: 54px;
  height: 54px;
  -webkit-transition:all .25s ease-in-out;
     -moz-transition:all .25s ease-in-out;
      -ms-transition:all .25s ease-in-out;
       -o-transition:all .25s ease-in-out;
          transition:all .25s ease-in-out;
}


/*LABEL*/
/*ACTIVE*/
[id*="columns"] .column-text .wrapper-icon_buttons .icon_button.active .label {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: absolute;
  left: 5px;
  right: 5px;
  margin: auto;
  top: 40px;
}
/*INACTIVE*/
[id*="columns"] .column-text .wrapper-icon_buttons .icon_button.inactive .label {
  display: none;
}



/*LABEL H5*/
/*ACTIVE*/
[id*="columns"] .column-text .wrapper-icon_buttons .icon_button.active .label h5 {
  padding: 8px 8px;
  border-radius: 12px;
  font-weight: 900;
  line-height: 15px;
  text-align: center;
}
/*INACTIVE*/
[id*="columns"] .column-text .wrapper-icon_buttons .icon_button.inactive .label  h5{
  display: none;
}
/*----------------------------------------------- ICON BUTTONS (END) -----------------------------------------------*/





/*----------------------------------------------- CAROUSEL CONTAINER -----------------------------------------------*/
/*CAROUSEL CONTAINER*/
.carousel-container {
  width: 100%;
  display: flex;
  position: relative;
}
/*----------------------------------------------- CAROUSEL CONTAINER (END) -----------------------------------------------*/





/*----------------------------------------------- CAROUSEL SLIDE -----------------------------------------------*/
/*CAROUSEL SLIDE*/
.carousel-slide {
  width: 100%;
  height: 100%;
  position: relative;
}
.carousel-slide.active {
  display: block;
}
.carousel-slide.inactive {
  display: none;
}
.carousel-slide.constant {
  position: absolute;
  top: 0px;
}
/*----------------------------------------------- CAROUSEL SLIDE (END) -----------------------------------------------*/





/*----------------------------------------------- CAROUSEL SLIDE IMG -----------------------------------------------*/
.carousel-slide img {
  width: 100%;
}
/*----------------------------------------------- CAROUSEL SLIDE IMG -----------------------------------------------*/