*{
font-family: 'Raleway', sans-serif;
margin:0;
padding:0;
}

#contenedor_alumno{
  display:grid;
  grid-template-columns: 0.25fr 1fr 1fr 1fr 1fr 1fr 0.25fr;
  grid-template-rows: 8vh 40vh 20vh 8vh;
  box-sizing: border-box;
  border: 1px solid white;
}

#contenedor_ppal{
width: 90%;
max-width: 1200px;
min-width: 600px;
margin:0 auto;
overflow: hidden;
}

  #contenedor_alumno .alumnos{
  grid-row: 2/5;
  grid-column: 2/7;
  padding: 2px;
  box-sizing: border-box;}

  #contenedor_alumno .tercero{
  grid-row: 2/3;
  grid-column: 4/7;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  }

  #contenedor_alumno .tercero_texto{
  grid-row: 3/5;
  grid-column: 4/7;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2px;
  }

#contenedor_alumno .tercero p{ font-size: 80%;}

#contenedor_alumno .tercero img{
  height: 100%;
  width: 100%;
  padding-top: 20px;
  margin-top: 20px;
  box-sizing: border-box;
  }

#contenedor_alumno .yo img{
  height: 80%;
  width: 90%;
  padding-top: 20px;
  margin-top: 20px;
  box-sizing: border-box;
  }

#contenedor_alumno .yo{
  grid-row: 2/4;
  grid-column: 2/4;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

  #contenedor_alumno .yo_texto{
    grid-row: 4/5;
    grid-column: 2/4;
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    }

#contenedor_alumno .yo_texto p{ font-size: 80%;}
#contenedor_alumno .tercero_texto p{ font-size: 80%;}



#contenedor_alumno .button1{
  grid-column: 2/3;
  grid-row:1/2;
}
#contenedor_alumno .button2{
  grid-column: 3/4;
  grid-row:1/2;
}
#contenedor_alumno .button3{
  grid-column: 4/5;
  grid-row:1/2;
}
#contenedor_alumno .button4{
  grid-column: 5/6;
  grid-row:1/2;
}

#contenedor_alumno .button5{
  grid-column: 6/7;
  grid-row:1/2;
}

#contenedor_alumno .video{
  grid-row: 2/3;
  grid-column: 2/7;
  width: 100%;
  height: 90%;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 30px 32px;
  text-align: center;
  text-decoration: none;
  text-decoration-color: white;
  display: inline-block;
  font-size: 100%;
  margin-top: 2px;
  cursor: pointer;
  font-weight:bold;
  box-sizing: border-box;
}

.button1 {
  background-color: black;
  color: white;
  border: 2px solid white;
}

.button1:hover {
  background-color: #b30000;
  color: white;
}

.button2 {
  background-color: black;
  color: white;
  border: 2px solid white;
}

.button2:hover {
  background-color: #b30000;
  color: white;
}

.button3 {
  background-color: black;
  color: white;
  border: 2px solid white;
}

.button3:hover {
  background-color: #b30000;
  color: white;
}

.button4 {
  background-color: black;
  color: white;
  border: 2px solid white;
}

.button4:hover {
  background-color: #b30000;
  color: white;
}

.button5 {
  background-color: #b30000;
  color: white;
  border: 2px solid white;
}

.button5:hover {
  background-color: #b30000;
  color: white;
}

#main-header {
	background: #333;
	color: white;
	height: 80px;

}
#main-header a {
		color: white;
	}

#main-header img {
		float: left;
    width: 15%;
    height: 100%;
}

#logo-header {
  	float: left;
  	padding: 15px 0 0 20px;
  	text-decoration: none;
  }
#logo-header:hover {
  		color: #b30000;
  	}
#logo-header .site-name {
    		display: block;
    		font-weight: 700;
    		font-size: 1.2em;

    	}
#logo-header .site-desc {
      		display: block;
      		font-weight: 300;
      		font-size: 0.8em;
      		color: #999;
}
nav {
  float: right;
}
nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
		padding-right: 20px;
}
nav ul li {
 display: inline-block;
 line-height: 80px;
  		}
nav ul li a {
  display: block;
  padding: 0 10px;
  text-decoration: none;
}
nav ul li a:hover {
  background: #b30000;
}
body{
  background-color:black;
  color:white;
}
#main-footer {
	background: #333;
	color: white;
	text-align: center;
	padding: 27px;
	margin-top: 3px;
}
#main-footer p {
		margin: auto;
    color:white;
}
#main-footer a {
  	color: white;
    margin: auto;
    overflow: hidden;
}
/* castellano*/
#main-footer .es {
  background-color: black;
  border-radius: 35%;
  text-decoration: none;
  right: 20%;
  bottom: 3.5%;
  font-size:100%;
  width: 80%;
}

#main-footer .es:hover {
  background-color: black;
  box-shadow: 0 4px 8px 0 rgba(252, 252, 252, 0.37), 0 6px 20px 0 rgba(255, 255, 255, 0.36);
}

#main-footer .es_activa {
  background-color: #CC1111;
  border-radius: 35%;
  text-decoration: none;
  right: 20%;
  bottom: 3.5%;
  font-size:100%;
}

 #main-footer .es_activa:hover {
  background-color: #CC1111;
  border-radius: 35%;
  text-decoration: none;
  right: 20%;
  bottom: 3.5%;
  box-shadow: 0 4px 8px 0 rgba(252, 252, 252, 0.37), 0 6px 20px 0 rgba(255, 255, 255, 0.36);
}

/*catalan */
#main-footer .ca {
  background-color: black;
  border-radius: 35%;
  text-decoration: none;
  right: 15%;
  bottom:3.5%;
  font-size:100%;
}

#main-footer .ca:hover {
  background-color: black;
  box-shadow: 0 4px 8px 0 rgba(252, 252, 252, 0.37), 0 6px 20px 0 rgba(255, 255, 255, 0.36);
}

#main-footer .ca_activa {
  background-color: #CC1111;
  border-radius: 35%;
  text-decoration: none;
  right: 15%;
  bottom:3.5%;
  font-size:100%;
}

#main-footer .ca_activa:hover {
  background-color: #CC1111;
  border-radius: 35%;
  text-decoration: none;
  right: 15%;
  bottom:3.5%;
  font-size:100%;
  box-shadow: 0 4px 8px 0 rgba(252, 252, 252, 0.37), 0 6px 20px 0 rgba(255, 255, 255, 0.36);
}

@media screen and (max-width:1000px){
  #contenedor_ppal{ width: 80%;}
  .button{font-size: 80%; padding: 30px 16px;}
  nav{font-size: 80%;}
  p{font-size: 80%;}
  #logo-header .site-name {font-size: 80%;}
  #logo-header .site-desc {font-size: 80%;}
  h2{font-size: 80%;}
  #contenedor_alumno .tercero_texto p {font-size: 80%;}
  #contenedor_alumno .yo_texto p {font-size: 80%;}
}

@media screen and (max-width:900px){
  #contenedor_ppal{width: 60%;}
  .button{font-size:60%; padding: 30px 16px;}
  nav{font-size: 60%;}
  p{font-size: 80%;}
  h2{font-size: 60%;}
  #logo-header .site-name {font-size: 60%;}
  #logo-header .site-desc {font-size: 60%;}
  #main-footer p {font-size: 80%;}
  #main-footer a {font-size: 80%;}
  #contenedor_alumno .tercero_texto p {font-size: 60%;}
  #contenedor_alumno .yo_texto p {font-size: 60%;}
}