@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

/* body {propiedad:valor;} */

*{box-sizing: border-box; transition: all 1s;}
body {background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);}
header {text-align: center;}
h1{color: whitesmoke;font-family: 'Roboto', sans-serif; font-weight: 700;}
h2{color: whitesmoke ;font-family: 'Roboto', sans-serif; font-weight: 400;}

h3 a{ background-color: grey ;color:black;font-family: 'Roboto', sans-serif ; text-align: center; text-decoration: none; border-radius: 20% ;}
.materiascursadas {text-align: center;}

footer p{color: whitesmoke; font-size: 0.7rem; text-align: center;}

nav{padding: 2%;}
.companerxs a{ background-color: black ;color: grey ;text-align: center; padding: 0.5rem;font-family: 'Roboto', sans-serif; font-weight: 400; text-decoration: none;}
.companerxs{text-align: center;}


.materiascursadas{color: white; font-family: 'Roboto', sans-serif; font-weight: 300}

.datosobligatorios {color: grey;}

.listadatos {text-align:center; font-size: 0.9rem; background-color: black; color: grey; padding-left: 1rem; padding-right: 1rem; padding: 1rem;}

.menu p a{font-family: 'Roboto', sans-serif; text-decoration: none; color:grey; font-size: 1.2rem;}
.menu {text-align: center; background-color: black; padding: 0.5rem;}
.inicio:hover{font-weight: 700;}
.plan:hover{font-weight: 700;}
.mapa:hover{font-weight: 700;}
.app:hover{font-weight: 700;}
.grupo:hover{font-weight: 700;}
.catedra:hover{font-weight: 700;}

.menu{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: flex-start;
}

.logos {display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:center;
	align-items: stretch;
	align-content: stretch;}
 
.logocatocampo {width: 50%;}
/*.logofadu {width: 10%;}*/

/* .materias {text-align: center;} */
.primero {color: white; background-color: black; border-radius: 5%; border-style:outset;}
.segundo {color: white; background-color: black; border-radius: 5%;border-style:outset;}
.tercero {color: white; background-color: black;border-radius: 5%;border-style:outset;}
.materias {font-family: 'Roboto', sans-serif; font-weight: 400}
.materias ul{list-style-type: none;}

.materias {display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: flex-start;} 


.foto { border-radius: 50%; border-style: outset;}

/*
 WEB 
 */
@media (min-width: 576px) {
	
	body {background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);}
	header {text-align: center;}
	h1{color: whitesmoke;font-family: 'Roboto', sans-serif; font-weight: 700;}
	h2{color: whitesmoke ;font-family: 'Roboto', sans-serif; font-weight: 400;}
	
	h3 a{ background-color: grey ;color:black;font-family: 'Roboto', sans-serif ; text-align: center; text-decoration: none; border-radius: 20% ;}
	.materiascursadas {text-align: center;}
	
	footer p{color: whitesmoke; font-size: 0.7rem; text-align: center;}
	
	nav{padding: 2%;}
	.companerxs a{ background-color: black ;color: grey ;text-align: center; padding: 0.5rem;font-family: 'Roboto', sans-serif; font-weight: 400; text-decoration: none;}
	.companerxs{text-align: center;}
	
	.materiascursadas{color: white; font-family: 'Roboto', sans-serif; font-weight: 300}
	
	.datosobligatorios {color: grey;}
	
	.listadatos {text-align:center; font-size: 0.9rem; background-color: black; color: grey; padding-left: 1rem; padding-right: 1rem; padding: 1rem;}
	
	.menu p a{font-family: 'Roboto', sans-serif; text-decoration: none; padding: 4rem;color:grey; font-size: 1.2rem;}
	.menu {text-align: center; background-color: black; padding: 0.5rem;}
	.inicio:hover{font-weight: 700;}
	.plan:hover{font-weight: 700;}
	.mapa:hover{font-weight: 700;}
	.app:hover{font-weight: 700;}
	.grupo:hover{font-weight: 700;}
	.catedra:hover{font-weight: 700;}
	
	.menu{display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: stretch;
		align-content: stretch;}

	/*.logos {display: flex;
		flex-direction: row;
		flex-wrap: center;
		justify-content:center;
		align-items: stretch;
		align-content: stretch;}*/
	 
	.logocatocampo {width: 30%;}
	/*.logofadu {width: 10%;}*/
	
	
	.primero {background-color: grey;}
	.segundo {background-color: grey;}
	.tercero {background-color: grey;}
	
	.materias {display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-content: center;}
	
	
	.foto { border-radius: 50%; border-style: outset;}

}