/*=============================================
=            CSS CAHUENGA        =
=============================================*/

body {
	font-family: 'Roboto', sans-serif;
	color: black;
	background-color: white;
 	overflow-x: hidden;
}
.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.btn-primary{
	background-color:#00793E;
	border-color: #00793E;
	font-weight: normal;
}

.btn-primary:hover{
  background-color:#00793E;
  border-color: #00793E;
  font-weight: normal;
}

/*----------  NAVBAR----------*/
.navbar {
    padding-top: 3vh;
    padding-left: 25%;
    background-color: #00793E;
    height: 8vh;
}
.nav-text{
	color: white;
	padding: 1vh 2vh;
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: 3pt;
	text-align: center;
}
/*----------  MENU ----------*/
.menu{
	margin: 3vh 0vh;
}

/*----------  SLIDER ----------*/
/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
  max-width: 80vh;
}
#myCarousel h1{
    font-size: 8em;
    margin-bottom: 0px;
    font-family: 'Square Peg', cursive;
  }

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}
/* Declare heights because of positioning of img element */
.carousel-item {
  height: 100%;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */
.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1rem;
    font-size: .7rem;
    line-height: 1;
    max-width: 80vh;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  #myCarousel h1{
    font-size: 2em;
    margin-bottom: 0px;
    font-family: 'Square Peg', cursive;
  }
  .carousel-caption {
    bottom: 0rem;
    max-width: 80vh;
  }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #myCarousel h1{
    font-size: 1em;
    margin-bottom: 0px;
    font-family: 'Square Peg', cursive;
  }
  .carousel-caption {
    bottom: 0rem;
    max-width: 80vh;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  #myCarousel h1{
    font-size: 1em;
    margin-bottom: 0px;
    font-family: 'Square Peg', cursive;
  }
  .carousel-caption {
    bottom: 0rem;
    max-width: 80vh;
  }
  .btn-group-lg>.btn, .btn-lg {
      --bs-btn-padding-y: 0.5rem;
      --bs-btn-padding-x: 1rem;
      --bs-btn-font-size: .8rem;
      --bs-btn-border-radius: 0.5rem;
      margin: 0px;
  }
}

/* MARKETING CONTENT
--------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
--------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
    max-width: 80vh;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

/*------------------------------------------------------------------
    WHATSAPP
-------------------------------------------------------------------*/

.btn-whatsapp {
        display:block;
        width:70px;
        height:70px;
        color#fff;
        position: fixed;
        right:20px;
        bottom:60%;
        border-radius:50%;
        line-height:650px;
        text-align:center;
        z-index:999;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .btn-whatsapp {
        display:block;
        width:70px;
        height:70px;
        color#fff;
        position: fixed;
        right:20px;
        bottom:45%;
        border-radius:50%;
        line-height:650px;
        text-align:center;
        z-index:999;
  }
}

/*----------  SEPARADOR 1 ----------*/
#separador1 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00793e+0,00b752+100 */
    background: #00793e; /* Old browsers */
    background: -moz-linear-gradient(left,  #00793e 0%, #00b752 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #00793e 0%,#00b752 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #00793e 0%,#00b752 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00793e', endColorstr='#00b752',GradientType=1 ); /* IE6-9 */
    color: #fff;
    background-size: cover;
    margin: 0vh 0vh 5vh 0vh;
    padding: 5vh 0vh;
}
#separador1 p{
    font-size: 1.5em;
}
#separador1 h2 {
    font-family: 'Square Peg', cursive;
    margin-bottom: 5px;
    font-size: 4em;
}
@media (max-width: 576px) {
  #separador1 p{
    font-size: 1em;
  }
  #separador1 h2 {
      font-family: 'Square Peg', cursive;
      margin-bottom: 3vh;
      font-size: 1.8em;
      font-weight: bolder;
  }
}
/*----------  SEPARADOR 2 ----------*/
#separador2 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#df89d6+0,db2ec7+100 */
background: #df89d6; /* Old browsers */
background: -moz-linear-gradient(left,  #df89d6 0%, #db2ec7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #df89d6 0%,#db2ec7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #df89d6 0%,#db2ec7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df89d6', endColorstr='#db2ec7',GradientType=1 ); /* IE6-9 */
    color: #fff;
    background-size: cover;
    margin: 0vh 0vh 5vh 0vh;
    padding: 5vh 0vh;
}
#separador2 p{
    font-size: 1.5em;
}
#separador2 h2 {
    font-family: 'Square Peg', cursive;
    margin-bottom: 5px;
    font-size: 4em;
}
@media (max-width: 576px) {
  #separador2 p{
    font-size: 1em;
  }
  #separador2 h2 {
      font-family: 'Square Peg', cursive;
      margin-bottom: 3vh;
      font-size: 1.8em;
      font-weight: bolder;
  }
}
/*----------  SEPARADOR 3 ----------*/
#separador3 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#77c90d+0,4f990a+100 */
    background: #77c90d; /* Old browsers */
    background: -moz-linear-gradient(left,  #77c90d 0%, #4f990a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #77c90d 0%,#4f990a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #77c90d 0%,#4f990a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77c90d', endColorstr='#4f990a',GradientType=1 ); /* IE6-9 */
    color: #fff;
    background-size: cover;
    margin: 0vh 0vh 5vh 0vh;
    padding: 5vh 0vh;
}
#separador3 p{
    font-size: 1.5em;
}
#separador3 h2 {
    font-family: 'Square Peg', cursive;
    margin-bottom: 5px;
    font-size: 4em;
}
@media (max-width: 576px) {
  #separador3 p{
    font-size: 1em;
  }
  #separador3 h2 {
      font-family: 'Square Peg', cursive;
      margin-bottom: 3vh;
      font-size: 1.8em;
      font-weight: bolder;
  }
}

/*----------  Título1  ----------*/
#titulo1 {
  padding: 2vh;
}
#titulo1 h1 {
  font-family: 'Roboto', sans-serif;
  margin-bottom: 3vh;
  font-size: 2em;
  font-weight: bolder;
}
#titulo1 h1 span{
  font-family: 'Square Peg', cursive;
  margin-bottom: 3vh;
  font-size: 2.5em;
  font-weight: bolder;
}

/*----------  PREGUNTAS FRECUENTES ----------*/
#curveUpColor path,
#curveDownColor path {
  fill: #F2F2F2;
  stroke: #F2F2F2;
}
#preguntas{
  background-color:#F2F2F2;
  padding: 5vh 0vh;
}
#preguntas h1{
  font-family: 'Roboto', sans-serif;
  margin: 10px;
  font-weight: bolder;
}
#preguntas span{
  font-family: 'Roboto', cursive;
  margin-top: -30px;
  letter-spacing: 5px;
}
#preguntas .accordion-header {
    margin-bottom: 0;
    background-color: #F2F2F2;
}