@charset "utf-8";
/* CSS Document */


/*!
Name: 
URI: https://colnodo.org/crececongoogle/inscripcion
Author: COLNODO
Author URI: mailto:info@colnodo.apc.org
Designer: Maria del Rosario Ortiz
Developer: 
Description: Tema diseñado por Colnodo para el proyecto Crece con Google
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: 
*/
/*--------------------------------------------------------------
>>> TABLA DE CONTENIDOS:
----------------------------------------------------------------
# HTML
	- Body
# Base
	- Typography
	- Elements
# Componentes
    - Estilos para el formulario
	- Menu principal y tagline
	- intro
	- Requisitos
    - que puedes aprender
	- como participar
	-estilos para resultado de búsquedas
	-estilo para pagina de error
# Media Queries
*/

/*--------------------------------------------------------------
# HTML
--------------------------------------------------------------*/

html{
	scroll-behavior: smooth;
}
body{
	font-family: 'Manrope', sans-serif;
	font-weight:400;
	background: rgb(12,57,122);
background: -webkit-linear-gradient(left, rgba(12,57,122,1) 22%, rgba(112,19,221,1) 60%, rgba(39,89,170,1) 100%);
background: -o-linear-gradient(left, rgba(12,57,122,1) 22%, rgba(112,19,221,1) 60%, rgba(39,89,170,1) 100%);
background: linear-gradient(to right, rgba(12,57,122,1) 22%, rgba(112,19,221,1) 60%, rgba(39,89,170,1) 100%);
}

::-webkit-input-placeholder {
    color:#a7acb7!important;
	font-size:90%;
}
:-moz-placeholder {
    color:#a7acb7!important;
	font-size:90%;
}
::-moz-placeholder {
    color:#a7acb7!important;
	font-size:90%;
}
:-ms-input-placeholder {
    color:#a7acb7!important;
	font-size:90%;
}
:hover, :focus{
	-moz-transition:ease-in-out 1s;
  -webkit-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
  text-decoration:none;
}
.navbar-light .navbar-toggler {
  color: rgba(0,0,0,.5);
  border-color: rgba(255,255,255,.1);
}
/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
h2{
	font-weight:800;
	font-size: calc(28px + (36 - 28) * ((100vw - 300px) / (1600 - 300)));
}
h3{
	font-weight:600;
	font-size: calc(20px + (24 - 20) * ((100vw - 300px) / (1600 - 300)));
}
h4{
	font-weight:400;
	font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
}
p, li, td{
	font-size:1rem;
	color:#202124;
	font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
	margin-bottom:10px;
	line-height:1.4;
}

a{color:#1a73e8}

a:hover, a:focus{
	color:#1d5999;
	-moz-transition:ease-in-out 1s;
  -webkit-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
  text-decoration:none;
}

/*--------------------------------------------------------------
# Formulario de registro
--------------------------------------------------------------*/
 
.form-registro{
	background:#fff;
	margin-top:40px;
	margin-bottom:20px;
	padding-top: 40px;
	border-radius:15px;
}
.form-registro h2{
	margin-bottom:2rem;
	color:#4a535e;
}
.form-registro h3{
	color:#7013dd;
	font-size: calc(17px + (20 - 17) * ((100vw - 300px) / (1600 - 300)));
	margin-top:20px;
}
h4{
	font-weight:400;
	font-size: calc(15px + (17 - 15) * ((100vw - 300px) / (1600 - 300)));
}

h4.titulo-form{
	font-weight:800;
	font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1600 - 300)));
	color:#2e65ca;
	border-bottom:1px solid #2e65ca;
	padding-bottom:10px;
	margin-bottom:30px;
}
.form-registro form{
	margin-bottom:5px;
}
.form-registro form label{
	font-size: 16px;
	font-weight:600;
}
.form-registro form label.form-check-label{
	font-weight:400!important;
}
fieldset.opaco{
	background:#fff;
	opacity: 0.5;
}
button[type="button"].enviar:hover, button[type="button"].enviar:focus {
  background: #7013dd;
  border: 0px #7013dd;
}
button[type="button"].enviar{
  background: #4a7eef;
  color: #fff;
  font-weight: 700;
  border-radius: 5px;
  padding: 15px 50px;
  border: 0px #4a7eef;
  font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1600 - 300)));
}

input[type="number"]{
    -webkit-appearance: textfield !important;
    margin: 0;
    -moz-appearance:textfield !important;
	color:#202124;
}
.form-control, .custom-select, .custom-file-input {
  border: 1px solid #7013dd !important;
}
.form-check {
  margin-bottom: 5px;
}
.alert-danger {
  color: #721c24;
  background-color: #fbd5f5;
  border-color: #fbd5f5;
}
p.equal{
	font-size: 80%;
	font-weight: 400;
}
li.invalid, li.valid{
	font-size: 90%;
	font-weight: 400;
}
a.boton-volver{
	color:#fff;
	font-size:18px;
	font-weight:600;
	padding:10px 30px;
	border-radius:5px;
	background:#4a7eef;
}
a.boton-volver:hover,
a.boton-volver:focus{
	background:#7013DD;
}

/*--------------------------------------------------------------
# - Modal
--------------------------------------------------------------*/

.gracias{
	padding:0 2rem;
	color:#fff;
}
.gracias h2{
	color:#4285f4;
	font-size:calc(20px + (24 - 20) * ((100vw - 300px) / (1600 - 300)));
	text-align:center;
}
.gracias .modal-footer button[type="button"]{
	background:#4285f4;
	color:#fff;
	border:none;
	font-weight:700;
	padding:8px 20px;
	border-radius:7px;
}
.gracias .modal-footer{border-top:none;}
.gracias .modal-header{border-bottom:none;}
/*--------------------------------------------------------------
# - Menu principal y tagline
--------------------------------------------------------------*/

.encabezado{
	background:#fff;
	padding: 1rem 0;
	box-shadow:0px 3px 3px rgba( 0,0,0,.5);
}
.logo-cabecera{
	width:calc(240px + (440 - 250) * ((100vw - 300px) / (1600 - 300)));
}
li.nav-item a{
	font-size:calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
	font-weight:600;
	color:#202124!important;
	padding:0.5rem!important;
}
li.nav-item a.resaltado{
	color:#fff!important;
	background:#EA4335;
	border-radius:8px;
	font-weight:800;
}
.foto-encab{
	background: url("../graficascrece/foto-como-participar.jpg") center left no-repeat;
	height:	65vh;
	background-size:cover;
}
.foto-encab h2{
	color:#EA4335;
	font-size: calc(40px + (50 - 40) * ((100vw - 300px) / (1600 - 300)));
	letter-spacing: -1px;
	margin-top:15vh;
	font-weight:700;
	line-height:1.3;
	letter-spacing:-1px;
	/*text-shadow: 5px 5px 5px rgba(255,255,255,1);*/
}
/*--------------------------------------------------------------
# - intro
--------------------------------------------------------------*/
.intro{
	margin-top:5px;
	background:#f2f5f9 url("../graficascrece/flecha.svg")center top no-repeat;
	background-size:35px;
	padding:100px 0
}
.intro h3{
	color:#4285F4;
	margin-bottom:60px;
}

/*--------------------------------------------------------------
# - requisitos
--------------------------------------------------------------*/
.requisitos{
	background: url("../graficascrece/flecha-blanca.svg") 15vw -1px no-repeat;
	background-size:35px;
	padding:100px 0 70px 0;
}
.requisitos h3{
	
	margin-bottom:60px;
}
.requisitos ul{
	padding-left:0!important;
	list-style: none; /* Remove default bullets */}

.requisitos ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #4a7eef; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1.5em; /* Also needed for space (tweak if needed) */
  margin-left: -1.5em; /* Also needed for space (tweak if needed) */
}
.requisitos p, .requisitos li{

}
.requisitos li{
	padding-left:1rem;
}

/*--------------------------------------------------------------
# - Que puedes aprender
--------------------------------------------------------------*/
.que-puedes{
	background: #224170 url("../graficascrece/foto-que-puedes.jpg") center center no-repeat;
	background-size:cover;
	padding:100px 0 70px 0;
	background-attachment: fixed;
}
.que-puedes h3{
	color:#fff;
	margin-bottom:60px;
}
.que-puedes h4{
	color:#f7c148;
	font-weight:800;
}
.que-puedes p, .que-puedes li{
	color:#fff;
}
.que-puedes p a{
	color:#FBBC05;
	text-decoration:underline;
}
.que-puedes p a:hover,
.que-puedes p a:focus{
	color:#FBBC05;
	text-decoration:underline;
}
.que-puedes img{
	width:calc(90px + (100 - 90) * ((100vw - 300px) / (1600 - 300)));
}
.que-puedes h5{
	color:#fff;
	font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
}
.que-puedes h5 a{
	color:#f7c148;
}
.que-puedes .modal-content{
	background:#4587F5!important;
}
.que-puedes .modal-content .modal-header h5{
	font-weight:700;
	font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300)));
	color:#fff!important;
}
.que-puedes .modal-content .modal-header 
 button.close[type="button"] {
	 color:#fff!important;
}

.que-puedes .modal-content .modal-body{
	padding:2rem;	
}
.que-puedes .modal-content .modal-body h6{
	font-weight:800;
	font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
	color:#fff!important;	
}
.que-puedes .modal-content .modal-body span{
	font-weight:400;
	color:#fff;
	
}
.que-puedes .modal-content .modal-body span a{
	color:#F7C148!important;	
}
.que-puedes .modal-content .modal-body ol.temasCarrera{
	font-weight:400;
	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
	color:#fff!important;
	padding-left:1.5rem;
	margin-top:20px;
}
.que-puedes .modal-content .modal-body li{
	font-weight:400;
	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
	color:#fff!important;
	margin-bottom:10px!important;
}
.que-puedes .modal-content .modal-footer 
 button.btn.btn-secondary[type="button"] {
	 color:#fff!important;
	 background:transparent;
	 border-color:#fff;
}
/*--------------------------------------------------------------
# - Como participar
--------------------------------------------------------------*/
.como-participar{
	/*background: url("../graficascrece/foto-como-participar.jpg") center left no-repeat;*/
	background: #4587f5;
}
.participar{
	padding-top:20px;
}
.como-participar h3{
	color:#fff!important;
	margin-bottom:40px;
}
.como-participar li{
	color:#fff!important;
}

/*--------------------------------------------------------------
# - Postulate
--------------------------------------------------------------*/
.postulate, .aliados{
	padding:100px 0 70px 0;
	background:#fff;
}
.postulate h3, .aliados h3{
	color:#0c397a;
	margin-bottom:30px;
	font-size: calc(24px + (30 - 24) * ((100vw - 300px) / (1600 - 300)));
	font-weight:800;
}
.postulate h4{
	font-weight:400;
	font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1600 - 300)));
	line-height:1.3;
}
a.boton-postularse{
	font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300)));
	color:#fff;
	background:#1a73e8;
	border-radius:8px;
	padding:15px 70px;
	font-weight:800
}
a.boton-postularse:hover,
a.boton-postularse:focus{
	background:#2759aa;
}
.postulate .card{
	border:none;
	background:transparent;
}
.postulate .card label{
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
}
.postulate .input-group{
	padding:2rem;
	background:#F2F5F9;
}
.postulate .form-control{
	border: 1px solid #D1D1D1 !important;
	background:#fff;
}
.postulate .btn-secondary{
	background:#EA4335!important;
	border-color:#EA4335!important;
}
#modalnoRegistrado .modal-footer,
#modalValidacion .modal-footer{
	display:none;
}
#modalnoRegistrado .modal-body,
#modalValidacion .modal-body{
	padding-bottom:30px;
}
#modalnoRegistrado .modal-body h5{
	font-weight:800;
	color:#0c397a;
}
/*--------------------------------------------------------------
Testimonios
--------------------------------------------------------------*/

.testimonios {
    padding-top: 12vh;
    padding-bottom: 30px;
	background:#E6EAF1;
}

.carousel-control-next, .carousel-control-prev {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 15%;
  background-color: transparent!important;
  text-align: center;
  opacity: 1;
  transition: opacity .15s ease;
	border:none;
}
.carousel-item{
	height: 60vh;
}
.testimonios .nombre{
	font-style:italic;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
}
.logo-testimonio {
      width: 150px;
      height: 150px;
      flex-shrink: 0;
		background:#fff;
		padding:20px;
		margin-bottom:40px;
    }
	.foto-testimonio {
      width: 150px;
      height: 150px;
      flex-shrink: 0;
	  background:#fff;
	  margin-bottom:40px;
    }

    .logo-testimonio .imagen{
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
    }
	.foto-testimonio .imagen{
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
       width: 150px;
      height: 150px;border-radius:50%;
    }

/*--------------------------------------------------------------
# - Preguntas frecuentes
--------------------------------------------------------------*/
.preguntas{
	background:#E6EAF1;
	color:#252525;
	padding:60px 0;
}
.preguntas h4{
	font-size: calc(15px + (18 - 15) * ((100vw - 300px) / (1600 - 300)));
	font-weight:600;
	color:#4285F4;
}
/*******acordeon *******/

[data-toggle="collapse"] i:before {
  content: "\f068";
}
[data-toggle="collapse"].collapsed i:before {
  content: "\f067";
}
#accordion .card-header,
#accordion1 .card-header{
  margin-bottom: 0px;
	border-bottom:1px solid #B8C2CC;
	background:transparent;
}
#accordion .accordion-title,
#accordion1 .accordion-title{
  position: relative;
  display: block;
  padding: 12px 8px 12px 40px;
  background: transparent;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  text-decoration: none;
  color: #252525;
  font-size: 16px!important;
  font-weight: 700;
  width: 100%;
  text-align: left;
  transition: all 0.4s ease-in-out;
}
#accordion .accordion-title i,
#accordion1 .accordion-title i{
  position: absolute;
  width: 30px;
  height: 100%;
  left: 0;
  top: 0;
  color: #4285F4;
  background: transparent;
  text-align: center;
  border-right: 1px solid transparent;
}
#accordion .accordion-title:hover,
#accordion1 .accordion-title:hover{
  padding-left: 60px;
  background-color:rgba(255,255,255,0.50); 
  color: #4285F4;
}
#accordion .accordion-title:hover i,
#accordion1 .accordion-title:hover i {
  border-right: 1px solid #fff;
}
#accordion .card,
#accordion1 .card{
	background:transparent;
	margin-bottom:8px;
}

#accordion .accordion-body,
#accordion1 .accordion-body{
  padding: 15px;
  background-color:rgba(255,255,255,0.50);
}
#accordion .accordion-body ul,
#accordion1 .accordion-body ul{
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
#accordion .accordion-body li,
#accordion1 .accordion-body li{
  padding-left: 1.2rem;
  text-indent: -1.2rem;
	margin-left:1.2rem;
	list-style-type: disc;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
}
#accordion .accordion-body li:before,
#accordion1 .accordion-body li:before{
  /*content: "\f10a";*/
  padding-right: 5px;
  font-family: "Flaticon";
  font-size: 16px;
  font-style: normal;
  color: #213744;
}

/*--------------------------------------------------------------
# Aliados
--------------------------------------------------------------*/
.aliados{
	padding: 100px 0 70px 0;
}

img.logo-aliado:hover{-webkit-transform:scale(1.3);transform:scale(1.1);}

.aliados .col-md-3.col-4{
	align-self:center;
	padding:35px;
}
/* Estilos personalizados para los botones de navegación */
    .slick-prev:before, .slick-next:before {
      font-family: FontAwesome;
      font-size: 25px;
      line-height: 1;
      color: #fff;
      /*gap: 10px;*/
    }
   .slick-prev:before {
      content: "\f053"; /* Icono de flecha izquierda */
      color: #4285F4;
    }
    .slick-next:before {
      content: "\f054";/* Icono de flecha derecha */
      color: #4285F4;
    }

.aliados button[type="button"].slick-arrow{
border:0px transparent;
color:#4285F4;
	background:transparent;
}
button.slick-pause-button{
	border:0px transparent;
	color:#4285F4;
	background:transparent;
	padding:0!important;
	margin: 0 30px;
}
button.slick-pause-button i{
	font-size:30px;
}

@media (max-width: 767px) {
	.aliados .col-md-3.col-4{
	padding:10px;
}
}


/*--------------------------------------------------------------
# - Pie de pagina
--------------------------------------------------------------*/
.pie{
	background:#171819;
	color:#fff;
	padding:60px 0 20px 0;
}
.pie a{
	color:#fff;
}
.pie i{
	color:#fff;
}
.pie i:hover,
.pie i:focus,
.pie a:hover,
.pie a:focus{
	color:#1a73e8;
}
.pie p,
.pie li{
	color:#fff;
	font-size:80%;
}
.pie ul{
	list-style:none;
}
.credito{
	font-size: calc(11px + (13 - 11) * ((100vw - 300px) / (1600 - 300)));color:#969696;
}