/*selector{propiedad: valor;}*/
@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@300;400;700&family=Roboto+Condensed:ital,wght@0,400;0,700;1,700&display=swap');

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


body{padding-top: 15rem;}

header{background-color: rgb(255,255,255);}

.main-header{text-align: center;
position: fixed;
top: 0;
left:0;
width: 100%;}


.imagen{width: width: 30%;
		max-width: 400px; 
		padding-top: 3rem;
		display: flex;
		margin-left: auto;}

.imagen1{width: 170px;
		display: block;
		margin-left: auto;
		margin-right: auto;}


nav{background-color: rgb(255,255,255);
	padding: 0.5rem; 
	margin-bottom: 1%;}

nav ul{ text-align: center;}

nav ul li{display: inline-block;
			width: 20%;}

nav ul li a{color: rgb(21,84,114); 
			text-decoration: none; 
			padding: 1rem;
			padding-left: 3rem;
			padding-right: 3rem;
			border-radius: 10px; 
			font-family: 'Chivo'; 
			font-weight: 700;}

.link-activo{background-color: rgba(243,98,53,0.90);
			color: rgb(255,255,255);
			font-family: 'Chivo'; 
			font-weight: 700;}

.link-otros:hover{
            background-color: rgba(243, 98, 53, 0.18);
			color: rgb(0, 0, 0);
			font-family: 'Chivo'; 
			font-weight: 700;}

section{background-color: rgb(255,255,255);}

#mockup{display: flex;
		background-image: url(../img/vector_fondo.svg);
		background-repeat: no-repeat;
	}

h1{color: rgb(21,84,114); 
	font-family: 'Roboto Condensed'; 
	font-style: italic;
	font-weight: 700; 
	font-size: 5rem;
	margin-left: 12%;
	padding-top: 2rem;
	line-height: 1;}

h2{color: rgb(243,98,53); 
	font-family: 'Roboto Condensed'; 
	font-style: italic;
	font-weight: 700;
	margin-left: 12%; 
	font-size: 3rem;}

.parrafo{color: rgb(30,30,30);
		margin-left: 12%; 
		font-size: 16px; 
		font-family: 'Chivo'; 
		font-weight: 400;}

.descarga{color: rgb(21,84,114); 
	font-family: 'Roboto Condensed'; 
	font-style: italic;
	font-weight: 700; 
	font-size: 2rem;
	margin-left: 12%;
	padding-top: 1rem;}

.stores{width: 500px;
		display: flex;
		margin-right: auto;
		margin-left: 12%;
		padding-top: 2rem;}


.light{color: rgb(50,50,50);
	font-family: 'Roboto'; 
	font-weight: 700, sans-serif;}


.alineacion{display: flex;}
.margintop{margin-top: 5%;}
.marginbottom{margin-bottom: 5%;}

.materias{	background-color: rgb(255,255,255);
			border-radius: 15px;
			width: 50%;
			text-align: center;
			padding-top: 2%;}

.materias1{	background-color: rgb(21,84,114);
			
			width: 50%;}

h3{margin-top: 5%;
	font-family: 'Chivo';
	font-weight: 700;
	color: rgb(255,255,255);
	font-size: 1.3rem;
	padding-left: 15%;
	padding-top: 6%}

.alfiler{ width: 55%;}
.bubble{ width: 50%; }
.happy{ width: 55%; }


.asignatura{font-family: 'Roboto'; 
			font-weight: 400, sans-serif;
			text-decoration: none;
			padding-top: 15px;
			font-size: 17px;}

.app{background-color: rgb(21,84,114);
	
	width: 50%;
	padding-bottom: 2%;
	display: block;}

.app1{background-color: rgb(255,255,255);
	border-radius: 15px;
	width: 50%;
	text-align: center;
	padding-top: 2%;
	padding-bottom: 2%;
	display: block;}

.texto{	color:rgb(255,255,255);
		font-family: 'Chivo'; 
		font-weight: 400, sans-serif;
		text-align: left;
		padding-left: 15%;
		padding-top: 2%;
		padding-right: 15%}


.espaciado{padding: 38px;}

.imagen2{width: 200px; 
		padding: 1rem;
		display: block;
		margin-left: auto;
		margin-right: auto;
		border-radius: 160px;}

.descripcion{font-family: 'Chivo'; 
			font-weight: 400, sans-serif;
	 		font-size: 18px;
			padding-bottom: 2rem;}

.datos{padding-top: 20px;}

footer p{color: rgb(50,50,50); 
		font-size: 11px; 
		font-family: 'Roboto'; 
		font-weight: 400, sans-serif; 
		background-color: rgb(255,255,255);
		text-align: left;
		margin: auto;
		padding: 1rem;}

.información{color: rgb(50,50,50); 
		font-size: 11px; 
		font-family: 'Roboto'; 
		font-weight: 400, sans-serif;
		text-align: left;
		margin: auto;
		padding: 1rem;}

header nav a img{display: none;}



@media screen and (min-width: 481px) and (max-width: 768px/*o 48rem*/){

	#mockup{
		flex-wrap: wrap;
		background-image: none;

	}

	#mockup article{
		width: 100%;
	}

	h1, h2, .descarga, .parrafo{
		padding-left: 4rem !important;
	}

	h1{font-size: 4rem;}

	h2{font-size: 3rem;}

	.descarga{
		margin-bottom: 20px;
	}
	.stores{
		display: block;
		margin-top: 20px;
		margin: auto!important;
		padding: 0!important;
	}

	#mockup .imagen{
		display: block;
		margin: auto;
	}

	.materias, .app1{
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.app, .materias1{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-bottom: 20px;
	}

	.app h3{
		padding-left: 0!important;
		text-align: left!important;
	}
	
}

header nav a img{display:none;}

@media screen and (max-width: 480px/*o 30rem*/){

	.imagen1{margin-left: 32% !important;}

	#mockup{
		flex-wrap: wrap;
		background-image: none;

	}

	#mockup article{
		width: 100%;
	}

	h1, h2, .descarga, .parrafo{
		padding-left: 2rem !important;
	}

	h1{font-size: 3rem;}

	h2{font-size: 2rem;}

	.descarga{
		margin-bottom: 20px;
	}

	.stores{
		display: block;
		margin-top: 20px;
		margin: auto!important;
		padding: 0!important;
		width: 400px;
	}

	#mockup .imagen{
		display: block;
		margin: auto;
	}

	#guarda, #opinion, #vos, #publica{
		flex-wrap: wrap;
	}

	#guarda article, #opinion article, #vos article, #publica article{
		width: 100%;
		padding-bottom: 30px;
	}

	#opinion, #publica{
		flex-direction:column-reverse;
	}

	.app1, .materias{
		padding-top: 20px;
	}


  /*boton hamburguesa*/
  .main-header{ display: flex;
  				justify-content: space-between;
  				text-align: left;}

  .main-header nav a img{width: 70px;
  					line-height: 4rem;
  					font-size: 1.5rem;
  					display: block;
  					margin-top: 70%;
  				    background-color: rgb(21,84,114);}

  .main-header .boton-menu{display: flex;
  							justify-content: center;
  							align-items: center;
  							line-height: 4rem;}

  .main-header nav{position: relative;}

  .main-header nav ul{ display: none;
  						list-style: none;
  						text-align: center;
  						padding: 0;
  						padding-bottom: 10%;
  						padding-top: 15%;
  						padding-bottom:15%;
  						margin: 0;}
  
  .main-header nav:hover ul{display: flex;
 						 	flex-direction: column;
  							position: absolute;
  							top: 100%;
  							right: 0;
  							background-color: rgb(21,84,114);
  							min-width: 10rem;}  

.main-header nav:hover ul li{line-height: 200%;
							}

  .main-header nav:hover ul li a{color: white;}
  .link-activo{background-color: transparent;}

  body{padding-top: 10rem;}
}