/*----------------------------------------------- GENERAL -----------------------------------------------*/
body {
  overflow-x: hidden;
  margin: 0px;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
/*----------------------------------------------- GENERAL (END) -----------------------------------------------*/


















/*----------------------------------------------- MODULAR -----------------------------------------------*/
#modular {
  background-color: #F5A623;
  position: relative;
}
@media screen and (max-width: 768px) {
  #modular {
    padding-top: 150px;
    padding-bottom: 75px;
  }
}
@media screen and (min-width: 769px) {
  #modular {
    padding-top: 125px;
    padding-bottom: 100px;
  }
}



/*HEADER*/
#modular .wrapper-header {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 24px;
}

#modular .wrapper-header h1 {
  width: 100%;
  max-width: 400px;
  font-weight: 900;
  text-align: center;
  color: white;
}



/*IMAGE*/
#modular .wrapper-carousel {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 12px;
}

#modular .wrapper-carousel .carousel-container {
  max-width: 250px;
  justify-content: center;
}

/*THIS IS KEY SO THAT IMAGES DON'T GLITCH IN WHEN LAZY LOADED IN FROM THE CAROUSEL*/
#modular .wrapper-carousel .carousel-container img {
  aspect-ratio: 103 / 213;
}





/*SEE CAROUSELS.CSS FOR OTHE PAGINATION STYLING*/
#modular .wrapper-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
}


/*DESCRIPTION*/
#modular .wrapper-description {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 24px;
}

#modular .wrapper-description h4 {
  width: 100%;
  max-width: 400px;
  font-weight: 600;
  text-align: center;
  color: white;
}





/*ARROWS*/
/*WRAPPER*/
#modular .wrapper-arrows {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  height: 40px;
  top: calc(50% - 20px);
}

/*INNER-WRAPPER*/
#modular .carousel-arrows {
  display: flex;
  position: relative;
}

/*POSITION ARROWS*/
#modular .carousel-arrow-backward {
  right: 160px;
}
#modular .carousel-arrow-forward {
  left: 160px;
}

/*ARROW COLOR*/
#modular .carousel-arrow-backward span  {
  background-color: white
}
#modular .carousel-arrow-forward span  {
  background-color: white;
}
/*----------------------------------------------- MODULAR (END) -----------------------------------------------*/



















/*----------------------------------------------- PROTOTYPE -----------------------------------------------*/
[id*="prototype"] {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-left: 30px;
  padding-right: 30px;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  [id*="prototype"] {
    padding-top: 48px;
    padding-bottom: 32px;
  }
}
@media screen and (min-width: 769px) {
  [id*="prototype"] {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}



/*WRAPPER-TEXT*/
@media screen and (max-width: 768px) {
  [id*="prototype"] .wrapper-text {
    width: 100%;
    order: 2;
  }
}
[id*="prototype"] .wrapper-text h4 {
  color: #FFFFFF;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  [id*="prototype"] .wrapper-text {
    text-align: center;
  }
}
@media screen and (min-width: 769px) {
  [id*="prototype"] .wrapper-text h4 br {
    display: none;
  }
}



/*WRAPPER-BUTTON*/
@media screen and (max-width: 768px) {
  [id*="prototype"] .wrapper-button {
    order: 1;
    margin-bottom: 8px;
  }
}
[id*="prototype"] .wrapper-button {
  position: relative;
}

[id*="prototype"] .wrapper-button > img {
  width: 92px;
  height: 40px;
  position: absolute;
  top: -28px;
  left: calc(50% - 46px);
  pointer-events: none;
  animation-delay: 1s;
  z-index: 2;
}



/*UNIQUE COLORS FOR EACH BANNER*/
/*ONBOARDING*/
#prototype_onboarding {
  background-color: #E4EDFF;
}
/*ONBOARDING - ORDER*/
@media screen and (min-width: 769px) {
  #prototype_onboarding .wrapper-text {
    order: 1;
    margin-right: 8px;
  }
  #prototype_onboarding .wrapper-button {
    order: 2;
    margin-left: 8px;
  }
}
/*ONBOARDING - DESCRIPTION TEXT*/
#prototype_onboarding h4 {
  color: #4C84FF;
}
/*ONBOARDING - BUTTON*/
#prototype_onboarding [class*="button-overlay-cta"] {
  background-color: rgba(76,132,255,1);
  text-decoration: none;
}
#prototype_onboarding [class*="button-overlay-cta"]:hover {
  box-shadow: inset 0 0 0 3px rgba(65,112,217,1);
}



/*MODULE*/
#prototype_module {
  background-color: #FE7E02;
}
/*MODULE - ORDER*/
@media screen and (min-width: 769px) {
  #prototype_module .wrapper-text {
    order: 1;
    margin-right: 8px;
  }
  #prototype_module .wrapper-button {
    order: 2;
    margin-left: 8px;
  }
}
/*MODULE - BUTTON*/
#prototype_module [class*="button-overlay-cta"] {
  background-color: rgba(255,255,255,.2);
  text-decoration: none;
}
#prototype_module [class*="button-overlay-cta"]:hover {
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.4);
}



/*HABIT*/
#prototype_habit {
  background-color: #F5A623;
}
/*HABIT - ORDER*/
@media screen and (min-width: 769px) {
  #prototype_habit .wrapper-text {
    order: 2;
    margin-left: 8px;
  }
  #prototype_habit .wrapper-button {
    order: 1;
    margin-right: 8px;
  }
}
/*HABIT - BUTTON*/
#prototype_habit [class*="button-overlay-cta"] {
  background-color: #00CC91;
  text-decoration: none;
}
#prototype_habit [class*="button-overlay-cta"]:hover {
  box-shadow: inset 0 0 0 3px #19B99A;
}



/*HIDE PROTOTYPES ON MOBILE*/
@media screen and (max-width: 768px) {
  #prototype_onboarding  {
    display: none;
  }
  #prototype_module  {
    display: none;
  }
  #prototype_habit  {
    display: none;
  }
  #widget .button-portfolio-small {
    display: none;
  }
}
/*----------------------------------------------- PROTOTYPE (END) -----------------------------------------------*/



















/*----------------------------------------------- EMPTY -----------------------------------------------*/
#empty {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: #11D29B;
}
@media screen and (max-width: 768px) {
  #empty {
    padding-top: 150px;
  }
}
  



/*HALF*/
@media screen and (max-width: 768px) {
  #empty [class*="half"] {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  #empty [class*="half"] {
    width: 50%;
  }
}



/*TEXT HALF*/
#empty .half-text {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}



/*HEADER*/
#empty .half-text .wrapper-header {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 12px;
}

#empty .half-text .wrapper-header h1 {
  width: 100%;
  max-width: 400px;
  font-weight: 900;
  text-align: center;
  color: white;
}



/*DESCRIPTION*/
#empty .half-text .wrapper-description {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 12px;
}

#empty .half-text .wrapper-description h4 {
  width: 100%;
  max-width: 400px;
  font-weight: 600;
  text-align: center;
  color: white;
}



/*PAGINATION*/
/*SEE MAIN.CSS FOR OTHE PAGINATION STYLING*/
#empty .half-text .wrapper-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-right: 30px;
  margin-left: 30px;
  pointer-events: none;
}

#empty .half-text .wrapper-pagination .carousel-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  max-width: 400px;
  pointer-events: none;
}

#empty .half-text .wrapper-pagination .pagination_dot-boundary {
  pointer-events: auto;
}


/*ARROWS*/
/*WRAPPER*/
#empty .wrapper-arrows {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 40px;
  margin-top: -40px;
  margin-right: 30px;
  margin-left: 30px;
  pointer-events: none;
}

/*INNER-WRAPPER*/
#empty .carousel-arrows {
  display: flex;
  width: 100%;
  max-width: 400px;
  justify-content: center;
  position: relative;
  pointer-events: none;
}

/*POSITION ARROWS*/
#empty .carousel-arrows .carousel-arrow-backward {
  right: 64px;
  pointer-events: auto;
}
#empty .carousel-arrows .carousel-arrow-forward {
  left: 64px;
  pointer-events: auto;
}

/*ARROW COLOR*/
#empty .carousel-arrow-backward span  {
  background-color: white
}
#empty .carousel-arrow-forward span  {
  background-color: white;
}




/*IMAGE HALF*/
#empty .half-image {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  #empty .half-image img {
      width: 100%;
  }
}
@media screen and (min-width: 769px) {
  #empty .half-image img {
    width: 100%;
  }
}

/*THIS IS KEY SO THAT IMAGES DON'T GLITCH IN WHEN LAZY LOADED IN FROM THE CAROUSEL*/
#empty .half-image img {
  aspect-ratio: 1 / 1;
}
/*----------------------------------------------- EMPTY (END) -----------------------------------------------*/



















/*----------------------------------------------- CONTENT -----------------------------------------------*/
#content {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  background-color: #E4EDFF;
  position: relative;
  overflow: hidden;
/*  padding-top: 100px;
  padding-bottom: 100px;*/
}

.inner {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 800px;
  max-width: 1200px;
  position: relative;
/*  border: 8px solid green;*/
}
@media screen and (max-width: 768px) {
  .inner {
    padding-top: 200px;
    padding-bottom: 200px;
  }
}
@media screen and (min-width: 769px) {
  .inner {
    padding-top: 200px;
    padding-bottom: 200px;
  }
}




#content .wrapper-text {
  width: 100vw;
  max-width: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 24px;
  padding-bottom: 24px;
  z-index: 8;
/*  background-color: yellow;*/
}

#content .wrapper-text h1 {
  width: 100%;
  font-weight: 900;
  text-align: center;
  padding-bottom: 12px;
  color: #4C84FF;
  z-index: 9;
}

#content .wrapper-text h4 {
  width: 100%;
  max-width: 400px;
  font-weight: 700;
  text-align: center;
  color: #4C84FF;
  z-index: 9;
}






/*IMAGES*/
#content img {
  position: absolute;
  transition: all 2s ease-in-out;
}

.content-grow {
  transform: scale(1.2);
}


/*SIZES*/
.content_size-250 {
  width: 250px;
  z-index: 7;
}

.content_size-225 {
  width: 225px;
  z-index: 6;
}

.content_size-200 {
  width: 200px;
  z-index: 5;
}

.content_size-175 {
  width: 175px;
  z-index: 4;
}

.content_size-150 {
  width: 150px;
  z-index: 3;
}

.content_size-125 {
  width: 125px;
  z-index: 2;
}

.content_size-100 {
  width: 100px;
  z-index: 1;
}











/*POSITIONING*/
/*FOUNDERS TALKS*/
#founders_talk-genetics {
  left: 24%;
  bottom: 19%;
}

#founders_talk-part_1 {
  left: -2%;
  top: -4%; 
}



/*HOW TO*/
#how_to-setup_cgm {
  right: 22%;
  top: -4%;
}

#how_to-take_gene_sample {
  right: -2.5%;
  bottom: 30%;
}

#how_to-take_gut_sample {
  left: 5%;
  bottom: 30%;
}



/*ANATOMY*/
#anatomy_blog-medication {
  left: -6%;
  bottom: -3.33%;
}

#anatomy_blog-gut_brain_axis {
  right: 29.25%;
  bottom: 4.5%;
}



/*BLOG*/
#blog-allergies {
  right: -2%;
  top: -3.33%;
}

#blog-sleep {
  left: 13%;
  top: 34.33%;
}



/*EDUCATIONAL*/
#educational-coaching {
  right: 17.5%;
  bottom: 26.83%;
}

#educational-science {
  left: 28%;
  bottom: -1%;
}

#educational-metabolism {
  right: 11.33%;
  top: 25%;
}

#educational-fitness {
  right: -2%;
  bottom: -3.33%;
}

#educational-weight_plateau {
  left: -3.33%;
  top: 30.5%;
}

#educational-orientation {
  left: 22.2%;
  top: 8%;
}

#educational-meals {
  right: 30%;
  top: 14%;
}
/*----------------------------------------------- CONTENT (END) -----------------------------------------------*/



















/*----------------------------------------------- COLUMNS -----------------------------------------------*/
[id*="columns"] {
  width: 100%;
  display: flex;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  [id*="columns"] {
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 150px;
  }
}
@media screen and (min-width: 769px) {
  [id*="columns"] {
    justify-content: center;
    padding-top: 125px;
  }
}




/*GENERAL COLUMN*/
[id*="columns"] [class*="column"] {
  width: 100%;
  max-width: 400px;
}

/*COLUMN MARGINS*/
@media screen and (max-width: 768px) {
  [id*="columns"] [class*="column"]  {
    margin-left: 30px;
    margin-right: 30px;
  }
  [id*="columns"] [class*="column"]  {
    margin-left: 30px;
    margin-right: 30px;
  }
}


/*HEADER*/
[id*="columns"] .column-text .wrapper-header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

[id*="columns"] .column-text .wrapper-header h1 {
  width: 100%;
  max-width: 400px;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  [id*="columns"] .column-text .wrapper-header h1 {
    text-align: center;
  }
}





/*DESCRIPTION*/
[id*="columns"] .column-text .wrapper-description {
  width: 100%;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  [id*="columns"] .column-text .wrapper-description {
    margin-bottom: 8px;
  }
}
@media screen and (min-width: 769px) {
  [id*="columns"] .column-text .wrapper-description {
    margin-bottom: 24px;
  }
}


[id*="columns"] .column-text .wrapper-description h4 {
  width: 100%;
  max-width: 400px;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  [id*="columns"] .column-text .wrapper-description h4 {
    text-align: center;
  }
}






/*IMAGE*/
[id*="columns"] .column-image {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: -6px;
}

[id*="columns"] .column-image .carousel-container {
  max-width: 400px;
  justify-content: center;
  overflow: hidden;
}

/*THIS IS KEY SO THAT IMAGES DON'T GLITCH IN WHEN LAZY LOADED IN FROM THE CAROUSEL*/
[id*="columns"] .column-image .carousel-container img {
  aspect-ratio: 2 / 3;
}
/*----------------------------------------------- COLUMNS (END) -----------------------------------------------*/



















/*----------------------------------------------- INTRO -----------------------------------------------*/
#intro {
  width: 100%;
  display: flex;
  overflow: hidden;
  background-color: #EDF2FF;
}
@media screen and (max-width: 768px) {
  #intro {
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media screen and (min-width: 769px) {
  #intro {
    justify-content: center;
    padding-top: 125px;
    padding-bottom: 125px;
  }
}







/*INTRO TEXT*/
#intro .intro-text {
  width: 100%;
  max-width: 400px;
}
@media screen and (max-width: 768px) {
  #intro .intro-text  {
    margin-left: 30px;
    margin-right: 30px;
  }
}
@media screen and (min-width: 769px) {
  #intro .intro-text  {
    margin-left: 30px;
    margin-right: 60px;
  }
}


/*HEADER*/
#intro .intro-text .wrapper-header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

#intro  .intro-text .wrapper-header img {
  width: 100%;
  animation-delay: 3s;
}


/*DESCRIPTION*/
#intro .intro-text .wrapper-description {
  width: 100%;
  display: flex;
  justify-content: center;
}

#intro .intro-text .wrapper-description h3 {
  color: #4C84FF;
  font-weight: 700;
  animation-delay: 3s;
}
@media screen and (max-width: 768px) {
  #intro .intro-text .wrapper-description h3 {
      text-align: center;
      margin-bottom: 24px;
    }
}
@media screen and (min-width: 769px) {
  #intro .intro-text .wrapper-description h3 {
      text-align: left;
    }
}







/*INTRO IMAGE*/
#intro .intro-image {
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: center;
  margin-bottom: -4px;
}
@media screen and (max-width: 768px) {
  #intro .intro-image  {
    margin-left: 30px;
    margin-right: 30px;
  }
}
@media screen and (min-width: 769px) {
  #intro .intro-image  {
    margin-left: 60px;
    margin-right: 30px;
  }
}



/*IMAGE WRAPPER*/
#intro  .intro-image .image-wrapper {
  display: flex;
  justify-content: center;
  position: relative;
}


/*IMAGE BASE*/
#intro  .intro-image .image-wrapper .image-base {
  width: 100%;
}



/*TASK BACKGROUND*/
.task-background {
  width: 85%;
  top: 16.2%;
  left: 8.25%;
  width: 76.75%;
  position: absolute; 
}

/*TASKS*/
.tasks {
  width: 85%;
  top: 16.2%;
  left: 8.25%;
  width: 76.75%;
  position: absolute;
  overflow: hidden;
/*  border: 1px solid green;*/
  border-radius: 25%;
/*  border: 4px solid cyan;*/
}

.task {
  width: 100%;
/*  border: 4px solid magenta;*/
}



/*DOTS*/
.dots {
  position: absolute;
  top: 23%;
  width: 4%;
  left: 88.75%;
}

.dot {
  width: 100%;
}





/*ROW-TRACK*/
.row-track {
  width: 100%;
  display: flex;
  position: absolute;
  height: 20.71%;
  top: 40.6%;
  left: 0;
  animation: trackRow 24s infinite;
  x-transition: all 2s ease-in-out;
}
@keyframes trackRow {
  0% {
    left: -100%;
  }
  50% {
    left: 9.625%;
  }
  100% {
    left: -100%;
  }
}



/*ROW-SEE*/
.row-see {
  width: 100%;
  display: flex;
  position: absolute;
  height: 20.71%;
  top: 68%;
  left: 9.625%;
  animation: seeRow 24s infinite;
  x-transition: all 2s ease-in-out;
}
@keyframes seeRow {
  0% {
    left: 9.625%;
  }
  50% {
    left: -95.75%;
  }
  100% {
    left: 9.625%;
  }
}



/*TRACK AND SEE WIDGETS*/
.intro_widget-narrow {
  width: 37.5%;
  height: 100%;
  margin-right: 2.5%;
}

.intro_widget-wide {
  width: 62.5%;
  height: 100%;
  margin-right: 2.5%;
}
/*----------------------------------------------- INTRO (END) -----------------------------------------------*/



















/*----------------------------------------------- COLUMNS-TRACK -----------------------------------------------*/
#columns-track {
  background-color: white;
}


/*COLUMN ORDER*/
#columns-track .column-text {
  order: 1;
}
#columns-track .column-image {
  order: 2;
}


/*COLUMN MARGINS*/
@media screen and (min-width: 769px) {
  #columns-track .column-text  {
    margin-left: 30px;
    margin-right: 60px;
  }
  #columns-track .column-image  {
    margin-left: 60px;
    margin-right: 30px;
  }
}


/*HEADER*/
#columns-track  .column-text .wrapper-header h1 {
  color: #F5A623;
}
@media screen and (min-width: 769px) {
  #columns-track  .column-text .wrapper-header h1 {
      text-align: left;
    }
}


/*DESCRIPTION*/
@media screen and (min-width: 769px) {
  #columns-track .column-text .wrapper-description h4 {
      text-align: left;
    }
}


/*ICON_BUTTONS*/
@media screen and (min-width: 769px) {
  #columns-track  .column-text .wrapper-icon_buttons {
    justify-content: flex-start;
  }
}
@media screen and (min-width: 769px) {
  #columns-track .column-text .wrapper-icon_buttons .icon_button {
      margin-right: 24px;
  }
}


/*BORDER (ACTIVE)*/
#columns-track .column-text .wrapper-icon_buttons .icon_button.active .border {
  border: 5px solid rgba(252,233,200,1);
}
/*INACTIVE*/
#columns-track .column-text .wrapper-icon_buttons .icon_button.inactive .border {
  border: 0px solid rgba(252,233,200,0);
}
/*INACTIVE - HOVER*/
#columns-track .column-text .wrapper-icon_buttons .icon_button.inactive:hover .border {
  border: 5px solid rgba(252,233,200,1);
}


/*LABEL*/
#columns-track .column-text .wrapper-icon_buttons .icon_button.active .label h5 {
  color: white;
  background-color: #00CC91;
}
/*----------------------------------------------- COLUMNS-TRACK (END) -----------------------------------------------*/









/*----------------------------------------------- COLUMNS-LEARN -----------------------------------------------*/
#columns-learn {
  background-color: #F2F6FF;
}


/*COLUMN ORDER*/
@media screen and (min-width: 769px) {
  #columns-learn .column-text {
    order: 2;
  }
  #columns-learn .column-image {
    order: 1;
  }
}


/*COLUMN MARGINS*/
@media screen and (min-width: 769px) {
  #columns-learn .column-text  {
    margin-left: 60px;
    margin-right: 60px;
  }
  #columns-learn .column-image  {
    margin-left: 60px;
    margin-right: 60px;
  }
}


/*HEADER*/
#columns-learn  .column-text .wrapper-header h1 {
  color: #00CC91;
}
@media screen and (min-width: 769px) {
  #columns-learn  .column-text .wrapper-header h1 {
      text-align: right;
    }
}


/*DESCRIPTION*/
@media screen and (min-width: 769px) {
  #columns-learn .column-text .wrapper-description h4 {
      text-align: right;
    }
}


/*ICON_BUTTONS*/
@media screen and (min-width: 769px) {
  #columns-learn  .column-text .wrapper-icon_buttons {
    justify-content: flex-end;
  }
}
@media screen and (min-width: 769px) {
  #columns-learn .column-text .wrapper-icon_buttons .icon_button {
      margin-left: 24px;
  }
}



/*BORDER (ACTIVE)*/
#columns-learn .column-text .wrapper-icon_buttons .icon_button.active .border {
  border: 5px solid rgba(209,233,255,1);
}
/*INACTIVE*/
#columns-learn .column-text .wrapper-icon_buttons .icon_button.inactive .border {
  border: 0px solid rgba(209,233,255,0);
}
/*INACTIVE - HOVER*/
#columns-learn .column-text .wrapper-icon_buttons .icon_button.inactive:hover .border {
  border: 5px solid rgba(209,233,255,1);
}


/*LABEL*/
#columns-learn .column-text .wrapper-icon_buttons .icon_button.active .label h5 {
  color: white;
  background-color: #F5A623;
}
/*----------------------------------------------- COLUMNS-LEARN (END) -----------------------------------------------*/













/*----------------------------------------------- COLUMNS-REPORTS -----------------------------------------------*/
#columns-reports {
  background-color: #FCE9C8;
}


/*COLUMN ORDER*/
#columns-reports .column-text {
  order: 1;
}
#columns-reports .column-image {
  order: 2;
}


/*COLUMN MARGINS*/
@media screen and (min-width: 769px) {
  #columns-reports .column-text  {
    margin-left: 30px;
    margin-right: 60px;
  }
  #columns-reports .column-image  {
    margin-left: 60px;
    margin-right: 30px;
  }
}


/*HEADER*/
#columns-reports  .column-text .wrapper-header h1 {
  color: #4C84FF;
}
@media screen and (min-width: 769px) {
  #columns-reports  .column-text .wrapper-header h1 {
      text-align: left;
    }
}


/*DESCRIPTION*/
@media screen and (min-width: 769px) {
  #columns-reports .column-text .wrapper-description h4 {
      text-align: left;
    }
}


/*ICON_BUTTONS*/
@media screen and (min-width: 769px) {
  #columns-reports  .column-text .wrapper-icon_buttons {
    justify-content: flex-start;
  }
}
@media screen and (min-width: 769px) {
  #columns-reports .column-text .wrapper-icon_buttons .icon_button {
      margin-right: 24px;
  }
}

/*BORDER (ACTIVE)*/
#columns-reports .column-text .wrapper-icon_buttons .icon_button.active .border {
  border: 5px solid rgba(255,255,255,1);
}
/*INACTIVE*/
#columns-reports .column-text .wrapper-icon_buttons .icon_button.inactive .border {
  border: 0px solid rgba(255,255,255,0);
}
/*INACTIVE - HOVER*/
#columns-reports .column-text .wrapper-icon_buttons .icon_button.inactive:hover .border {
  border: 5px solid rgba(255,255,255,1);
}


/*LABEL*/
#columns-reports .column-text .wrapper-icon_buttons .icon_button.active .label h5 {
  color: white;
  background-color: #4C84FF;
}
/*----------------------------------------------- COLUMNS-REPORTS (END) -----------------------------------------------*/




















/*----------------------------------------------- ANIMATERS -----------------------------------------------*/
#animaters {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: #11D29B;
}
@media screen and (max-width: 768px) {
  #animaters {
    padding-top: 150px;
    padding-bottom: 125px;
  }
}
@media screen and (min-width: 769px) {
  #animaters {
    padding-top: 125px;
    padding-bottom: 125px;
  }
}
  



/*HALF*/
@media screen and (max-width: 768px) {
  #animaters [class*="half"] {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  #animaters [class*="half"] {
    width: 50%;
  }
}



/*TEXT HALF*/
#animaters .half-text {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}



/*HEADER*/
#animaters .half-text .wrapper-header {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 12px;
}

#animaters .half-text .wrapper-header h1 {
  width: 100%;
  max-width: 400px;
  font-weight: 900;
  text-align: center;
  color: white;
}



/*DESCRIPTION*/
#animaters .half-text .wrapper-description {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 12px;
}

#animaters .half-text .wrapper-description h4 {
  width: 100%;
  max-width: 400px;
  font-weight: 600;
  text-align: center;
  color: white;
}



/*PAGINATION*/
/*SEE MAIN.CSS FOR OTHE PAGINATION STYLING*/
#animaters .half-text .wrapper-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-right: 30px;
  margin-left: 30px;
  pointer-events: none;
}

#animaters .half-text .wrapper-pagination .carousel-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  max-width: 400px;
  pointer-events: none;
}

#animaters .half-text .wrapper-pagination .pagination_dot-boundary {
  pointer-events: auto;
}



/*ARROWS*/
/*WRAPPER*/
#animaters .wrapper-arrows {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 40px;
  margin-top: -40px;
  margin-right: 30px;
  margin-left: 30px;
  pointer-events: none;
}

/*INNER-WRAPPER*/
#animaters .carousel-arrows {
  display: flex;
  width: 100%;
  max-width: 400px;
  justify-content: center;
  position: relative;
  pointer-events: none;
}

/*POSITION ARROWS*/
#animaters .carousel-arrows .carousel-arrow-backward {
  right: 64px;
  pointer-events: auto;
}
#animaters .carousel-arrows .carousel-arrow-forward {
  left: 64px;
  pointer-events: auto;
}

/*ARROW COLOR*/
#animaters .carousel-arrow-backward span  {
  background-color: white
}
#animaters .carousel-arrow-forward span  {
  background-color: white;
}




/*IMAGE HALF*/
#animaters .half-image {
  display: flex;
  justify-content: center;
  padding-left: 30px;
  padding-right: 30px;
}

@media screen and (max-width: 768px) {
  #animaters .half-image img {
      width: 100%;
  }
}
@media screen and (min-width: 769px) {
  #animaters .half-image img {
    width: 100%;
  }
}

/*CAROUSEL CONTAINER*/
#animaters .half-image .carousel-container {
  max-width: 400px;

}

/*CAROUSEL CONTAINER*/
#animaters .half-image .carousel-container .carousel-slide {
  overflow: hidden;
  margin-bottom: -4px;
  border-radius: 25%;
}

/*THIS IS KEY SO THAT IMAGES DON'T GLITCH IN WHEN LAZY LOADED IN FROM THE CAROUSEL*/
#animaters .half-image .carousel-container .carousel-slide img {
  aspect-ratio: 400 / 285;
}

/*NOTE THIS IS ONLY APPLIED TO THE CONVEYER BELT, BECAUSE IT IS WIDER*/
#animaters .half-image .carousel-container .carousel-slide img#review_animation_conveyer {
  aspect-ratio: auto;
}

/*POSITION ABSOLUTE ALL BUT FIRST IMAGES*/
#animaters .half-image .carousel-container .carousel-slide img:nth-of-type(n+2) {
  position: absolute;
  left: 0px;
  margin: auto;
}




/*ANIMATIONS*/
/*EXPLORE ANIMATION*/
/*SUN*/
#explore_animation-sun {
  x-transition: all 2s ease-in-out;
  animation: sun 6s infinite;
}
@keyframes sun {
  0% {
    left: 0px;
  }
  50% {
    left: -16px;
  }
  100% {
    left: 0px;
  }
}

/*CLOUD*/
#explore_animation-cloud  {
  x-transition: all 2s ease-in-out;
  animation: cloud 6s infinite;
}
@keyframes cloud {
  0% {
    top: 0px;
  }
  50% {
    top: 16px;
  }
  100% {
    top: 0px;
  }
}

/*SITTING_01*/
#explore_animation-sitting_02 {
  x-transition: all ease-in-out;
  animation: sitting_02 6s infinite;
}
@keyframes sitting_02 {
  0% {
    opacity: 0;
  }
  49.99% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  99.99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}



/*REVIEW ANIMATION*/
/*CONVEYER BELT*/
#review_animation_conveyer {
  width: 200% !important;
}

#review_animation_conveyer {
  x-transition: all 2s ease-in-out;
  animation: conveyerBelt 6s;
  animation-iteration-count: infinite;
}
@keyframes conveyerBelt {
  0% {
    left: 0%;
  }
  75% {
    left: -100%;
  }
}


/*RESET BUTTON*/
#explore_animation-restart,
#insight_animation_restart,
#review_animation_restart {
  -webkit-transition:all 1s ease-in-out;
     -moz-transition:all 1s ease-in-out;
      -ms-transition:all 1s ease-in-out;
       -o-transition:all 1s ease-in-out;
          transition:all 1s ease-in-out; 
}
#explore_animation-restart:hover,
#insight_animation_restart:hover,
#review_animation_restart:hover {
  transform: scale(1.1);
  cursor: pointer;
}


/*----------------------------------------------- ANIMATERS (END) -----------------------------------------------*/