:root{
    --blanco:  #FFFFFF;
    --oscuro:  #212121;
    --primario:#FFC107;
    --secundario:#1E296D;
    --gris:#757575;
    --grisClaro:#DFE9F3;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font-family: "Open Sans", Arial, Sans-serif;
	font-size: 16px;
}

.container .div{
			
	padding: 20px;
	border:1px solid rgba(255,255,255,.25);
}

/*Formulario
======================================================================*/
.formulario{
    background-color:var(--secundario);
    border-radius: 0.5rem;
    width:90%;/*Ésta función siempre devuelve el valor mínimo entre el 600px y el 100%, ayuda a hacer el width responsivo, sin necesidad de usar mediaqueries*/
    padding:2rem;
    margin: 0 auto;
	align-content: center;   
	text-align: center;
	height: fit-content;
}


.contenedor_campos{
    display: grid;
    grid-template-columns: 50% 50%; /*repeat(2,1fr);  Es lo mismo*/
    grid-template-rows: auto auto 20rem;
    column-gap: 1rem;/*Separación de columnas*/
}


.campos_entradas label{
    color:var(--blanco);
    display: block;
    margin-top: 1rem;
    font-weight: bold; /*(Que es lo mismo que 700)*/
    
    
}
.boton{
    background-color: var(--primario);
    color:var(--blanco);
    padding:1rem 2rem;
    margin-top: 3rem;
    font-size:1.5rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: .3rem;
    width:90%;
    text-align: center;
    border: none;
}

.legend{
	color: var(--blanco);
}
.boton:hover{
    cursor:pointer;
}

.input textarea{
    height: 10rem;
}

.formulario{
    scroll-snap-align:center;
    scroll-snap-stop: always;
	
}

.sombra{
	-webkit-box-shadow: 0px 5px 15px 0px rgba(122,122,122,0.75);
    -moz-box-shadow: 0px 5px 15px 0px rgba(122,122,122,0.75);
    box-shadow: 0px 5px 15px 0px rgba(122,122,122,0.75);
    /*Color de sombra*/
    background-color: var(--secundario);

	
    /*Esquinas*/
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;


    /*Separación de márgen*/
    padding:2rem;
}

.sombra_servicios{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.input-text{
    width:100%;
    padding:1.5rem;
    border: none;
    border-radius: 0.5rem;    
}
/********** NAVBAR ADAPTABLE A DISPOSITIVOS MOVILES ****************/
.fixed-top {
  max-height: 100vh;
  overflow: auto;
}



/*SCROLL DE NAVBAR AÑADIDO POR ALBERTO CRUZ
EL 1 DE SEPTIEMBRE DE 2021
 ****************/
 .DivWithScroll{
    height:65vh;
	width:200px;
    overflow:hidden;
	overflow-y:scroll;
	overflow-x: hidden;
	direction:rtl;
	background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
	font-weight: bold;
	border:1px solid rgba(136, 90, 90, 0.25);
	font-size: 12px;


}

/* width */
::-webkit-scrollbar {
	width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
	background: #f1f1f1;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
	background: #888;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
	background: #555;
  }

  
/*El tamaño maximo donde se aplicara esta clase
es de 768px. Es decir, para esconcer el navbar de las
PC -- Alberto Cruz*/
@media (max-width: 768px){
	.hide_desk_nav{
		display: none;
	}
	
}



/****** MAIN *****/

.main{
	margin-top: 50px;
}
.main h4{
	text-align: center;
	font-family: "Open Sans", Arial, Sans-serif;
	font-weight: 400;
	font-size: 40px;
	padding: 10px;
	color: #1E296D;
}
.main .fotos{
	margin-top: 80px;
}
.main .fotos img{
	/*para centrar foto dentro de un div*/
	display:block;
	margin:auto;
}


/****** BARRA LATERAL*****/

.aside{

	position: fixed;
	font-size: 14px;
}
.aside li{
	text-align: center;
}
.aside li .active{
	
	color: #fff;
	background: #1E296D;
}
.aside h1{
	font-weight: 300;
}
.aside a{

	color: #000;
}
.aside a:hover{
	color: red;
}

/******* FOOTER ***/

.footer .centrado{
	text-align: center;
	padding: 20px 0px;
	background: #A8BEDC;
	margin-bottom: 30px;
}

.footer p{
	padding: 10px;
}
.footer .redes{
	text-align: center;
}
.footer .redes img{
	width: 10%;
	padding: 10px;
}

/********* MEDIAQUERIES *******/
@media screen and (max-width:600px)
{
	/* NAVBAR */
	.linea .container a{
		font-size: 15px;
	}
	.linea .container .collapse a{
	font-size: 15px;
	padding: 5px 0px;
	}

	
	/****** MAIN *****/

	.main .fotos{
		margin-top: 50px;
	}
	.main p{
		font-size: 15px;
	}
	/*para centrar fotos en su div
	.main .imagen-centro{
		display: flex;
        align-items: center;
	}*/
	.main .fotos img{
		width: 50%;
		display:block;
		margin:auto;
		max-width: 100%;
	}
	
	/*** FOOTER *********/
	.footer h3{
		font-size: 15px;
	}
	.footer p,
	.footer a{
		font-size: 15px;
	}

	.footer .ubicacion p{
		font-size: 10px;
	}
	.footer .redes img{
	width: 20%;
	padding: 10px;
}
}

@media screen and (max-width:400px)
{
	
	/************ FoOTER **************/
	
	.footer{
		padding: 20px;
	}
}

@media screen and (max-width:300px)
{
	
	/****** MAIN *****/
	.main .fotos{
		margin-top: 20px;
	}
	.main p{
		font-size: 15px;
	}
	/*** FOOTER *********/
	.footer h3{
		font-size: 15px;
	}
	.footer p,
	.footer a{
		font-size: 12px;
	}

	.footer .ubicacion p{
		font-size: 10px;
	}
}