/*Lista de colores*/
:root{
  --gris: rgb(124, 128, 129);
  --azul: rgb(4, 153, 240);
}


/*Aqui esta pa parte que fija la parte del menu y de la barra de contacto rapido*/
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 4;
}

.navbar{
  margin-top: 50px !important;
}

.menuContenedor{
  height: 100px ;
}


/*Responsive del navbar para poner la barra de contacto*/
@media(max-width: 1300px){
  .navbar{
    margin-top: 38px !important;
  }
  /*Responsive de los textos*/
  .centraRes{
    margin-left: 10%;
    margin-right: 10%;
  }
  /*Responsive para acomodar El texto del lado derecho*/
  .centraDerecho{
    margin-right: 10%;
  }
  /*Responsive Mapa*/
  .mapa{
    width: 120% !important;
    margin-left: -13%;
  }

  /*Responsive de servivios*/
  /*Responsive de la parte de servicios*/
  .alineaDerecha1{
    margin-left: -17%;
  }
  .alineaDerecha2{
    margin-left: -18%;
  }
  .alineaDerecha3{
    margin-left: -9%;
  }
  .alineaDerecha4{
    margin-left: -20%;
  }

  
}

@media(max-width: 670px){
  .navbar{
    margin-top: 30px !important;
  }
  /*Responsive de los textos*/
  .centraRes{
    margin-left: 0%;
    margin-right: 0%;
  }
  /*Responsive para acomodar El texto del lado derecho*/
  .centraDerecho{
    margin-right: 0%;
  }
  /*Responsive para titulo*/
  .resParte1{
    margin-left: 5%;
    margin-right: 5%;
  }
  .resParte2{
    margin-left: 10%;
    margin-right: 10%;
  }
  /*Responsive de circulo*/
  .cirRes{
    width: 120px;
    height: 120px;
  }
  .abajoCir{
    margin-top: 18% !important;
    margin-left: -12%;
  }
  .bajaCir{
    margin-top: 10%;
  }
  /*Responsive Mapa*/
  .mapa{
    margin-top: -30% !important;
    width: 120% !important;
    margin-left: -10%;
    margin-bottom: 10% !important;
  }
  /*Elimina los grandes espacios entre secciones*/
  .eliminaEs{
    margin-top: -50% !important;
  }

  /*Responsive de servivios*/
  /*Responsive de la parte de servicios*/
  .alineaDerecha1{
    margin-left: 0%;
  }
  .alineaDerecha2{
    margin-left: 0%;
  }
  .alineaDerecha3{
    margin-left: 0%;
  }
  .alineaDerecha4{
    margin-left: 0%;
  }
}





/*Barra de contacto rapido*/

.barraContacto{
  background-color: white;
  font-family: 'Oblivious font', sans-serif;
  width: 100%;
  height: 50px;
  display:flex;
  align-items: center;
  justify-content: space-between;
  vertical-align: middle;
}

.espacio{
  width: 10%;
}

.espacio-medio{
  width: 15%;
}

.contacto{
  display:flex;
  align-items: center;
  justify-content: space-between;
  vertical-align: middle;
  width: 50%;
  color: var(--azul);
  font-size: 15px;
}

.contacto img, .redS img, .r img{
  height: 20px;
  width: 20px;

}

.redS{
  display:flex;
  align-items: center;
  justify-content: space-between;
  vertical-align: middle;
  width: 15%;
}


.lv img{
  height: 60px;
  width: 30px;
}

.imagCR{
  font-size: 25px;
  color: var(--azul);
  text-decoration: none;
}

.imagCR:hover{
  color: var(--gris);
}


/*Responsive de la barra rapida de contacto*/
/*-En tamaño grande*/
@media(max-width: 1300px){
  .barraContacto{
      width: 100%;
      height: 39px;
  }
  .espacio{
      width: 10%;
  }
  
  .contacto{
      width: 80%;
      display:flex;
      align-items: center;
      justify-content: space-between;
      vertical-align: middle;
  }
  .redS, .espacio-medio, #barraCF{
      display: none;
  }
  
  
}

/*-En tamaño chico*/
@media(max-width: 670px){
  .barraContacto{
      width: 100%;
      height: 39px;
  }
  .espacio{
      width: 40%;
  }
  .espacio-medio{
      opacity: 0;
  }
  .contacto{
      width: 100%;
      display:flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
  }
  .direccion{
      width: 100%;
  }
  .redS, .lv, .correo, #tel, #finalBC{
      display: none;
  }
}


/*Quita margen de arriba*/
.svg-container {
  display: block !important;
  overflow: hidden !important;
}

.fill-light-wrapper {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}


/*Acordeon de cosas a tu dispocicion*/
.contenidoActividades{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.T1, .C1{
  background-color: rgb(131, 208, 231) !important;
  color: rgb(20, 60, 121) !important;
}

.T1:hover{
  background-color: var(--azul) !important;
  color: white !important;
}

.T2, .C2{
  background-color: rgb(173, 122, 221) !important;
  color: rgb(72, 20, 121) !important;
}

.T2:hover{
  background-color: rgb(132, 41, 218) !important;
  color: white !important;
}

.T3, .C3{
  background-color: rgb(135, 224, 135) !important;
  color: rgb(37, 121, 20) !important;
}

.T3:hover{
  background-color: rgb(7, 145, 19) !important;
  color: white !important;
}

.T4, .C4{
  background-color: rgb(221, 170, 122) !important;
  color: rgb(121, 65, 20) !important;
}

.T4:hover{
  background-color: rgb(182, 91, 6) !important;
  color: white !important;
}

.accordion{
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
}

.accordion dt > a {
text-align: center;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: var(--gris);
-webkit-transition: background-color 0.5s ease-in-out;
}
.accordion dd {
background-color: rgb(131, 208, 231);
color:#0a2479;
font-size: 1em;
line-height: 1.5em;
}
.accordion dd > p {
padding: 1em 2em 1em 2em;
}

.accordion {
position: relative;
background-color: white;
}

.container {
max-width: 960px;
margin: 0 auto;
padding: 2em 0 2em 0;
}

.accordionTitle {
  background-color: rgb(131, 208, 231);
}
.accordionTitle:before {
content: "+";
font-size: 1.5em;
line-height: 0.5em;
float: left;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover {
background-color: var(--azul);
color: white;
}

.accordionTitleActive {
background-color:white !important;
}
.accordionTitleActive:before {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
transform: rotate(-225deg);
}

.accordionItem {
height: auto;
overflow: hidden;
}
@media all {
.accordionItem {
  max-height: 50em;
  -moz-transition: max-height 1s;
  -o-transition: max-height 1s;
  -webkit-transition: max-height 1s;
  transition: max-height 1s;
}
.accordion{
      width: 80%;
      margin-left: 10%;
      margin-right: 10%;
  }
}
@media screen and (min-width: 48em) {
.accordionItem {
  max-height: 15em;
  -moz-transition: max-height 0.5s;
  -o-transition: max-height 0.5s;
  -webkit-transition: max-height 0.5s;
  transition: max-height 0.5s;
}

}

.accordionItemCollapsed {
max-height: 0;
}

.animateIn {
-webkit-animation-name: accordionIn;
-webkit-animation-duration: 0.65s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: normal;
-moz-animation-duration: 0.65s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionIn;
animation-duration: 0.65s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}

.animateOut {
-webkit-animation-name: accordionOut;
-webkit-animation-duration: 0.75s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: accordionOut;
-moz-animation-duration: 0.75s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionOut;
animation-duration: 0.75s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}

@-webkit-keyframes accordionIn {
0% {
  opacity: 0;
  -webkit-transform: scale(0.8);
}
100% {
  opacity: 1;
  -webkit-transform: scale(1);
}
}
@-moz-keyframes accordionIn {
0% {
  opacity: 0;
  -moz-transform: scale(0.8);
}
100% {
  opacity: 1;
  -moz-transform: scale(1);
}
}
@keyframes accordionIn {
0% {
  opacity: 0;
  transform: scale(0.8);
}
100% {
  opacity: 1;
  transform: scale(1);
}
}
@-webkit-keyframes accordionOut {
0% {
  opacity: 1;
  -webkit-transform: scale(1);
}
100% {
  opacity: 0;
  -webkit-transform: scale(0.8);
}
}
@-moz-keyframes accordionOut {
0% {
  opacity: 1;
  -moz-transform: scale(1);
}
100% {
  opacity: 0;
  -moz-transform: scale(0.8);
}
}
@keyframes accordionOut {
0% {
  opacity: 1;
  transform: scale(1);
}
100% {
  opacity: 0;
  transform: scale(0.8);
}
}


/*Parte del mapa*/
.mapa{
  width: 100%;
  background-color: white;
}

.mapaD{
  width: 100% !important;
  border-radius: 10px !important;
}

/*Color de fondo blanco*/

.fBlanc{
  background-color: white !important;
}

.cTam{
  font-size: 20px !important;
}

.bajaForm{
  margin-top: 30px !important;
  border: none !important;
  background-color: white;
}

.bajaForma1{
  margin-top: 50px !important;
  margin-bottom: 0 !important;
}

.acomodaF, .noMargin{
  margin: 0% !important;
}



@media(max-width: 1300px){
  .bajaForma{
    margin-top: 100px !important;
    margin-bottom: 0px !important;
    width: 100% !important;
    border: none !important;
  }  
  .acomodaF, .noMargin{
    margin: 0% !important;
    border: none !important;
  }
}

@media(max-width: 670px){
  .bajaForma{
   margin: 0% !important;
    width: 100% !important;
    border: none !important;
  }  
  .acomodaF, .noMargin{
    margin: 0% !important;
    border: none !important;
  }
}