@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,700,900');

*{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-style: none;
	list-style: none;
	text-transform: none;
}

a{
	color: #ffffff;
}

body{
    background: #3c4a55;
	font-family: 'Rubik';
	width: 100%;
}

/*-----HEADER----------*/


.wrap {
  margin-top: 0 auto;
  text-align: center 
}

a {
  text-decoration: none;
  color: #fff;
  display: block;
}

ul {
  list-style: none;
  position: relative;
  text-align: left;
}

li {
  float: left;
}

ul:after {
  clear: both;
}

ul:before,
ul:after {
    content: " ";
    display: table;
}

nav {
  position: relative;
  background: rgba(114,86,224,1);
    background: -moz-linear-gradient(-45deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(114,86,224,1)), color-stop(100%, rgba(0,196,108,1)));
    background: -webkit-linear-gradient(-45deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    background: linear-gradient(135deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7256e0', endColorstr='#00c46c', GradientType=1 );
  text-align: center;
  letter-spacing: 1px;  
}


ul.primary li a {
  display: block;
  padding: 20px 30px;
  border-right: 1px solid #3D3D3D;
}

ul.primary li:last-child a {
  border-right: none;
}

ul.primary li a:hover {  
  color: #000;
}

/* sub display*/
ul.primary li:hover ul {
  display: block;
  background: #fff;
}

/* keeps the tab background white */
ul.primary li:hover a {
  background: #fff;
  color: #666;
  text-shadow: none;
}

ul.primary li:hover > a{
  color: #000;
} 

.legales{
    text-align: center;
    flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: space-between;
	color:#3c4a55;
	font-weight: 100 ;
	font-size: 0.9rem;
    line-height: 170%;
}

@media only screen and (max-width: 600px) {
  .decor {
    padding: 3px;
  }
  
  .wrap {
    width: 100%;
    margin-top: 0px;
  }
  
   li {
    float: none;
  }
  
  ul.primary li:hover a {
    background: none;
    color: #8B8B8B;
    text-shadow: 1px 1px #000;
  }

  ul.primary li:hover ul {
    display: block;
    background: #272727;
    color: #fff;
  }
  
  ul.sub {
    display: block;  
    position: static;
    box-shadow: none;
    width: 100%;
  }
  
  ul.sub li a {
    background: #272727;
  	border: none;
    color: #8B8B8B;
  }
  
  ul.sub li a:hover {
    color: #ccc;
    background: none;
  }
}



/*-----fin-HEADER----------*/



section{
	padding: 5rem 0 5rem 0;
}

.fondo-blanco{
	background-color: #ffffff;
}

.fondo-gris{
	background-color: #e9e9ea;
    padding: 7rem 7rem 7rem 7rem;
}

.fondo-verde{
    position: relative;
    background: rgba(114,86,224,1);
    background: -moz-linear-gradient(-45deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(114,86,224,1)), color-stop(100%, rgba(0,196,108,1)));
    background: -webkit-linear-gradient(-45deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    background: linear-gradient(135deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7256e0', endColorstr='#00c46c', GradientType=1 ); 
}

.app {
    position: absolute;
    top: 2.5rem; left: 3rem;
    text-align: left;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.landing {
    position: absolute;
    top: 2.5rem; left: 70rem;
    text-align: right;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}


.fondo-violeta{
	background: rgba(114,86,224,1);
    background: -moz-linear-gradient(-45deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(114,86,224,1)), color-stop(100%, rgba(0,196,108,1)));
    background: -webkit-linear-gradient(-45deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    background: linear-gradient(135deg, rgba(114,86,224,1) 0%, rgba(0,196,108,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7256e0', endColorstr='#00c46c', GradientType=1 ); 
}

.header-rotulogrupal{
	padding: 2rem 0 2rem 0;
	text-align: center;
}
 
.contenedor{
	max-width: 65rem;
	margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

.alumnos{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: space-between;
}

.rotulogrupal-perfil{
	width: 25%;
	text-align: center;
}

h2{
	color: #eceeed;
	font-size: 1.1rem;
    
}

.foto-perfil{
	margin-top: 3rem;
	width: 70%;
}

.foto-perfil:hover {
	opacity: 0.9;
}

.propuesta-btn{
	background-color: #505c63;
	color: #ffffff;
	font-weight: 700;
	font-size:0.8rem ;
	padding: 1rem;
	border: none; 
	margin-top: 1rem;
    border-radius: 7px;
    font-family: 'Rubik';
font-weight: 400;
    
    
   }

.propuesta-btn:hover{
	background-color:#05be71;
	cursor: pointer;
}



.footer-texto{
    font-size: 0.7rem;
    text-align: center;
    max-width: 38rem;
    margin-left:auto;
    margin-right: auto;
	padding: 3rem 0 3rem 0;
	color: gainsboro;
}

.footer{
     width: 100%;
     margin-top:20%;
     padding:0% 0% 3% 0%;
}

.sobre-app{
    background-color: #bababa;
    color: #ECEDED;
        
    }
.infoapp{
    font-family: 'Rubik';
    text-align: center;
    font-size: 1rem;
    margin: 0 23rem 0 23rem;
    line-height: 22px
}

.objetivos{
    background-color: #3c4a55;
}



/* Ipad */

@media (max-width:768px)
{
.fondo-gris{
	background-color: #e9e9ea;
    padding: 4rem 4rem 4rem 4rem;
}
    
.app {
	padding: 0;
    display: flex;
    font-size: 3%
}

.landing {
    display: flex;
	padding left: 0; padding top: 0;
    font-size: 3%
}
    
.propuesta-btn{
	font-weight: 500;
	font-size:0.6rem ;
	padding: 0.5rem;
	border: none; 
	margin-top: 0.5rem;
}
 
.contenedor{
    max-width: 60rem;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}
    
.alumnos{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: space-between;
}
    
@media (max-width: 768px) .h2{
	font-size: 1rem;
}
    
.foto-perfil{
	margin-top: 1.5rem;
}
    
.rotulogrupal-perfil{
	width: 25%;
	text-align: center;
}
    
.header-rotulogrupal{
	padding: 3rem 2rem 2rem 2rem;
	text-align: center;
    font-size: 2.5rem;
}

.legales{
    
    flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: space-between;
	color:#3c4a55;
	font-weight: 100;
	font-size: 0.7rem;
    line-height: 170%;
}
    
.footer-texto{
    font-size: 0.6rem;
    text-align: center;
	padding: 3rem 3rem 3rem 3rem;
	color: gainsboro;
}

.fondo-gris{
	background-color: #e9e9ea;
    padding: 2rem 2rem 2rem 2rem;
}
    

    
@media (max-width: 768px) 
.propuesta-btn{
	font-weight: 400;
	font-size:1rem ;
	padding: 0.3rem;
	border: none; 
	margin-top: 0.3rem;
}

@media (max-width: 768px) 
    .h2{font-size: 1rem;  }
    
.app {
	padding: 0;
    display: flex;
    font-size: 1%
}

.landing {
    display: flex;
	padding: 0;
    font-size: 1%
}

.contenedor{
    max-width: 19rem;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    padding: 3rem 0rem 3rem 0rem;
}
 
    

.alumnos{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: space-between;
}
    
 
.foto-perfil{
	margin-top: 1.5rem;
}
    
.rotulogrupal-perfil{
	width: 25%;
	text-align: center;
}
    
.header-rotulogrupal{
	padding: 1rem 1rem 1rem 1rem;
	text-align: center;
    font-size: 1.3rem;
}
 

    
.footer-texto{
    font-size: 0.4rem;
    text-align: center;
	padding: 2rem 1rem 2rem 1rem;
	color: gainsboro;
}
    
.sobre-app{
    background-color: #bababa;
    color: #ECEDED;
        
    }
.infoapp{
    font-family: 'Rubik';
    text-align: center;
    font-size: 0.8rem;
    margin: 0 5rem 0 5rem;
    line-height: 15px
}
  
    


/* RESPONSIVE - MENOS DE 1000 */
@media screen and (max-width: 1000px){
    
    

    .alumnos.contenedor {
    width: 100%;
    flex-wrap: wrap;
    }
               
    .alumnos {
    width: 90%;
    }        
    
    .rotulogrupal-perfil {
    width: 100%;
        padding-bottom: 3rem;
    }
    
    .rotulogrupal-perfil img{
    width: 100%;
        padding-bottom: 2rem;
    }
    
    
 /* RESPONSIVE - MENOS DE 600 */
@media screen and (max-width: 600px){

    
    
    .alumnos.contenedor {
    width: 50%;
    flex-direction: column;
    }
               
    .alumnos {
    width: 100%; 
    }        
    
    .rotulogrupal-perfil {
    width: 80%;
    }

    .rotulogrupal-perfil img{
    width: 80%;
        padding-bottom: 2rem;
    }