@charset "UTF-8";
/*----------------------------------------
1. TIPOGRAFIA DEL SITIO
-----------------------------------------*/
html {
  font-size: 13px; }

body {
  font-family: 'Lato', sans-serif;
  color: #696969; }

/*-----------------------------------------
2. ESTILOS GENERALES DE BOTONES
-------------------------------------------*/
.btn {
  border-radius: 2rem;
  padding: .6rem 2rem;
  font-weight: bold; }

/*-----------------------------------------
3. ESTILOS COLOR PRINCIPAL
------------------------------------------*/
.bg-primary {
	background-color: #178590 !important;
}

.text-primary {
	color: #0B4A7B !important;
}

/*Estilos btn-primary*/
.btn-primary {
	color: #fff;
	background-color: 	#7daeab;
	border-color:	#7daeab;
	position: relative;
	overflow: hidden;
	z-index: 1;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.btn-primary:hover {
  color: #35363c;
  background-color: #fff;
  border-color: #0B4A7B; }

.btn-primary:active {
	color: #35363c !important;
	background-color: #147EA9 !important;
	border-color: #147EA9 !important;
}

.btn-primary:focus {
  color: #35363c !important;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 173, 117, 0.5) !important;
          box-shadow: 0 0 0 0.2rem rgba(0, 173, 117, 0.5) !important; }

/*Insertamos la fecha del boton principal*/
.btn-primary:after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f138";
  position: relative;
  left: .6rem;
  top: .1rem;
  -webkit-transition: left .3s ease;
  transition: left .3s ease; }

.btn-primary:hover:after,
.btn-primary:focus:after,
.btn-primary:active:after {
  left: .25rem; }

/*Insertamos la caja blanca del boton principal*/
.btn-primary:before {
  content: "";
  z-index: -1;
  width: 0;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: skew(45deg, 0);
          transform: skew(45deg, 0);
  -webkit-transition: all .4s ease;
  transition: all .4s ease; }

.btn-primary:hover:before,
.btn-primary:focus:before,
.btn-primary:active:before {
  width: 130%;
  left: -15%; }

/*-----------------------------------------
4. ESTILOS COLOR SECUNDARIO
------------------------------------------*/
.bg-secondary {
	background-color: #435463 !important;
}

.text-secondary {
  color: #35363c !important; }

/*-----------------------------------------
5. ESTILOS PARA ".redes-sociales"
------------------------------------------*/
.redes-sociales li a i {
  color: #fff;
  font-size: 1.5rem;
  padding: .6rem 1rem;
  opacity: .8;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; }

.redes-sociales li a i:hover {
  opacity: 1;
  -webkit-transform: scale(1.3) rotate(360deg);
          transform: scale(1.3) rotate(360deg); }

/*-----------------------------------------
6. ESTILOS PARA "#menu-navegacion"
------------------------------------------*/
/*Quitamos estilos al boton por defecto*/
#menu-navegacion .navbar-toggler {
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  background-color: transparent;
  border: none;
  border-radius: 0;
  outline: 0; }

/*Estilos boton del menu personalizado*/
#menu-navegacion .boton-menu:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f0c9";
  font-weight: 900;
  color: #fff;
  font-size: 2rem; }

#menu-navegacion .icono-cerrar:before {
  content: "\f00d";
  position: relative;
  left: .2rem; }

/*Estilos de los enlace del #menu-navegacion*/
.navbar-dark .navbar-nav .nav-link {
  padding: 1rem 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-radius: .5rem;
  -webkit-transition: all .3s ease;
  transition: all .3s ease; }

.navbar-dark .navbar-nav .nav-link:after {
  font-family: 'Font Awesome 5 Free';
  content: "\f105";
  font-weight: 900;
  -webkit-transition: all .3s ease;
  transition: all .3s ease; }

/*Estilos estado hover de enlace*/
.navbar-dark .navbar-nav .nav-link:hover {
	background-color: #448c94;
}

.navbar-dark .navbar-nav .nav-link:hover:after {
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg); }

/*Estilos para el enlace activo*/
.navbar-dark .navbar-nav .nav-link.active {
	background-color: #8cc4cc;
}

/*Clase cuando  la barra de navegación se fija a la parte superior*/
.menu-fijo {
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  background-color: #435463 !important;
  width: 100% !important; }

/*-----------------------------------------
7. ESTILOS PARA "#animacion"
------------------------------------------*/
.swiper-slide {
  height: 34rem;
  /*450px*/
  text-align: center;
  color: #fff;
  background-size: cover;
  background-position: center center; }

.swiper-slide::before {
  content: "";
  position: absolute;
  background: black;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: .4; }

.swiper-button-prev,
.swiper-button-next {
  background-image: none;
  background-color: rgba(0, 0, 0, 0.29);
  width: 3rem;
  height: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  border-radius: 50%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease; }

.swiper-button-prev::before,
.swiper-button-next::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f060"; }

.swiper-button-next::before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); }

/*Estado Hover de los botones*/
.swiper-button-prev:hover,
.swiper-button-next:hover {
	background-color: rgba(0, 0, 0, 0.46);
	color: #147EA9;
}

/*Estilos para el paginador*/
.swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  margin: 0 .4rem !important; }

.swiper-pagination-bullet-active {
  background-color: #FFF; }

/*-----------------------------------------
8. ESTILOS PARA "#bienvenidos"
------------------------------------------*/
.contenedor-video a {
  background-color: rgba(255, 255, 255, 0.79);
  width: 7rem;
  height: 7rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 50%;
  color: #0B4A7B;
  font-size: 2rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-clip: padding-box;
  border: 0 solid transparent;
  -webkit-transition: all .5s ease;
  transition: all .5s ease; }

.contenedor-video a:hover {
  background-color: #0B4A7B;
  color: #fff;
  border: 10px solid rgba(255, 255, 255, 0.5); }

.contenedor-video img {
  -webkit-transition: all .5s ease;
  transition: all .5s ease; }

.contenedor-video:hover img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2); }

/*-----------------------------------------
9. ESTILOS PARA "#te-ayudamos"
------------------------------------------*/
#te-ayudamos {
  position: relative;
  -webkit-transform: skew(0, 6deg);
          transform: skew(0, 6deg); }

#te-ayudamos::before {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.52);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; }

#te-ayudamos .container {
  -webkit-transform: skew(0, -6deg);
          transform: skew(0, -6deg); }

/*-----------------------------------------
10. ESTILOS PARA "#premios"
------------------------------------------*/
.contador-linea {
  background-color: #0B4A7B;
  width: 4rem;
  height: .4rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: all .5s ease;
  transition: all .5s ease; }

#premios .col-6:hover .contador-linea {
  bottom: 1rem;
  -webkit-transform: translateX(-50%) rotate(180deg);
          transform: translateX(-50%) rotate(180deg);
  background-color: #35363c; }

/*-----------------------------------------
15. ESTILOS PARA "#nuestra-app"
------------------------------------------*/
#nuestra-app::before {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; }

/*-----------------------------------------
16. ESTILOS PARA "#contacto"
------------------------------------------*/
#contacto .detalle-rectangulo {
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	background: #178590;
	left: 50%;
	bottom: 0;
	-webkit-transform: translateX(-50%) translateY(50%) rotate(45deg);
	transform: translateX(-50%) translateY(50%) rotate(45deg);
}

.input-group-cita {
  margin-bottom: 0;
  cursor: pointer; }

/*Personalizando el selector de fechas*/
.picker__box {
  border: 5px solid #FFF; }

.picker--focused .picker__day--selected,
.picker__day--selected,
.picker__day--selected:hover {
  background: #0B4A7B;
  color: #fff; }

.picker__day--today:before {
  border-top: .5em solid #ffffff; }

.picker__select--month,
.picker__select--year {
  margin-top: -.5em;
  padding: 0 .5rem;
  border-radius: .5rem; }

/*personalizando el selector de hora*/
.picker--focused .picker__list-item--selected,
.picker__list-item--selected,
.picker__list-item--selected:hover {
  background: #0B4A7B; }

.picker__list-item--highlighted,
.picker__list-item:hover {
  border-color: #007a53; }

.picker__list {
  padding: .5rem 0; }

.picker--time .picker__button--clear {
  color: #fff;
  background: #ff520d;
  border-radius: .5rem;
  -webkit-transition: all .5s ease;
  transition: all .5s ease; }

.picker__button--clear:before {
  width: 0;
  border-top: 0px solid #e20;
  display: none; }

/*-----------------------------------------
17. ESTILOS PARA "#pie-de-pagina"
------------------------------------------*/
.columna-inclinada::before {
  content: "";
  position: absolute;
  background: #448c94;
  top: 0;
  bottom: 0;
  left: -100%;
  right: -100%; }

.enlaces-secundario {
  border-bottom: 1px solid #5d666f;
  -webkit-box-shadow: 0 1px #212529;
          box-shadow: 0 1px #212529; }

.enlaces-secundario a {
  padding: 1rem;
  color: white;
  text-decoration: none;
  display: block; }

/*Estilos para IE11*/
.ie11 #bienvenidos .contenedor-video img {
  width: 100%; }

.ie11 .navbar-dark .navbar-nav .nav-link::after {
  display: block; }


/*-----------------------------------------
18. margenes
------------------------------------------*/
.margin {
	margin:15px; }
	
.pad-10 {
	padding:15px; }	

/*---------------------------------------------------
X .EMPEZAN EL SHOW DE LAS MEDIAS QUERIES
---------------------------------------------------*/
@media (min-width: 768px) {
  .navbar-dark .navbar-nav .nav-link {
    padding: .7rem 1.2rem;
    border-radius: 1.5rem; }

  .navbar-dark .navbar-nav .nav-link:after {
    content: ""; }

  #te-ayudamos {
    -webkit-transform: skew(0, 3deg);
            transform: skew(0, 3deg); }

  #te-ayudamos .container {
    -webkit-transform: skew(0, -3deg);
            transform: skew(0, -3deg); }

  .columna-inclinada::before {
    left: -300%;
    right: 0;
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg); } }
@media (min-width: 990px) {
  html {
    font-size: 16px; }

  .swiper-slide {
    height: 37.5rem;
    /*600px*/ } }
@media (min-width: 1200px) {
  .swiper-slide {
    height: 44rem;
    /*700px*/ } }

/*# sourceMappingURL=estilos.css.map */

/*IMAGENES DE FONDO*/
.fondo-burbuja {
	background-image:url(../images/fondo.jpg); }
	
.fondo-mano {
	background-image:url(../images/fondo-te-ayudamos-xl.jpg); }	

.panel-group {
    margin-bottom: 20px;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}
.panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
}
.panel-default {
    border-color: #ddd;
}
.panel-default>.panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}
.panel-group .panel-heading {
	border-bottom: 0;
	color: #36C;
	background-color: #7DAEAB;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel-title {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 16px;
	color: #03C;
}
.panel-group .panel+.panel {
    margin-top: 5px;
}

.panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
}

.panel-default {
    border-color: #ddd;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.panel-body {
    padding: 15px;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #ddd;
}

.panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top: 1px solid #ddd;
}

.tabla {
	background: rgba(0, 45, 3, 0.05);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	vertical-align: middle;

}
 .borde {
	border-bottom: 1px dashed #8cc4cc;
	border-top: 1px dashed #8cc4cc;
	padding: 10px;
	margin: 10px;
	color: #333;
}	 

 .borde2 {
	 padding: 10px;
	 margin: 10px;

}