@font-face {
  font-family: 'Bebas Neue Light';
  src: url('../font/bebasneue_light-webfont.woff');
}
@font-face {
  font-family: 'Bebas Neue Regular';
  src: url('../font/BebasNeue-Regular.woff');
}
*{
  margin: 0px;
  padding: 0px;
}
html{
  box-sizing:border-box;
  font-family: 'open sans', Arial, Helvetica, sans-serif;
  background-color: #EDEEF0;
  display: flex;
  justify-content: left;
  flex-direction: column;
  align-items: center;  
	min-height: 100%;
	position: relative;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body{  
  display: flex;
  justify-content: left;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 1000px;
  background-color: #FFFFFF;
  min-height: 100vh;  
  padding-bottom: 300px ;
}
h1,h2,h3,h4{
  color:#3160AF;  
  align-self: stretch;
  margin: 20px 0px;
}
h2,h3{
  margin: 20px ;
  margin-bottom: 0px;  
  padding: 10px 10px 5px 10px;
}

header{  
  display: flex;
  background-image: url('../imagenes/header.jpg');
  flex-direction: row;
  justify-content: flex-start;
}
header div,figure{
  margin-left: 20px;
}
header h1{
  font-size: 72px;
  font-family: 'Bebas Neue Light', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  font-weight:bold;
  font-style: normal;
  text-decoration: none;
  text-align: left;  
  padding: 0px;
  margin-bottom: 0px;   
  white-space: nowrap;
  line-height: 120%;  
  
}
header h2{
  font-size: 22px;
  font-family: 'Bebas Neue Regular', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  text-align: left;
  padding: 0px;  
  letter-spacing: 20px;
  margin: 0px;   
  white-space: nowrap;
  line-height: 120%;
  
}
.idioma{
  display: flex;
  flex-direction:row;
  align-self: stretch;
  justify-content: center;
}
.titulo{
  flex: 6;
  align-self: center;
}
.iconos{
  flex:1;
  text-align: center;
  align-self:center;
  margin-top: 20px;   
}
.separador{
  height: 3px;
  margin: 0px 5px;
  align-self: stretch;
  background-color: #315faf86;
}
.lista{
  margin: 0px;
  margin-bottom: 10px;
}
form{  
  min-width: 350px;
  padding: 15px;

}
label{
  font-size: 1rem;
  font-weight: 600;
  margin: 5px;
  word-wrap: normal;  
}
p{
  margin: 5px;
}
input	{
  margin: 10px ;
  width: 250px;
  padding: 3px 5px;
  border-radius: 5px;
  border: 2px solid ;
  font-size: 1rem;
  box-shadow: 1px 1px 2px rgb(63, 63, 71);
}
input:focus{
  background-color: #315faf3f;
}
main{
  align-self: stretch;
}
.radio{
  cursor:pointer;
}
input[type="radio"]{
  width: initial;
  box-shadow: none;
  margin: 10px 2px;
  cursor: pointer;
}
button{
  font-size: 1rem;
  font-weight: 600;
  margin: 20px;
  padding: 8px 10px;
  border-radius: 5px;
  border: none;
  background-color: #3160AF;
  color: #EDEEF0;
  cursor:pointer;
}
button:active{
  border-color: #3160AF;
  background-color: #3160AF;
  outline: 3px solid #315faf75;  
}
.container-row{
  display: flex;  
  flex-direction: row;
  align-items: center;
}
ul{
  padding: 20px;
  list-style: none;  
}
.bloque{
  margin: 20px;
  padding: 10px;
}
.final{
  margin: 0px 30px;
}
/*pie*/
footer{
  background-color: #3162AF;  
  position: absolute;
  bottom: 0;
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;  
  color:#EDEEF0;       
	padding: 10px 0px;  
  align-items: center;  
}
footer div{
  flex:  1;
  text-align: center; 
}
footer a{
  text-decoration: none;
  font-style: italic;
  color: white;
}
@media (min-width:200px) {
  header h1{
    font-size: 28px;
  }
  header h2{
    font-size: 14px;
    letter-spacing: 8px;
  }
  header figure,
  header figure img{
    height:80px;
    border: 0px;
  }
  body{
    width: 100%;
    padding-bottom: 0px;
  }
  form{
    min-width: 0px;
  }
  input{
    width: 150px;
  }
  h2{
    font-size: 20px;
  }
  footer{
    width: 100%;
    position: relative;
  }
  .cursos{
    max-height: 150px;
    max-width: 210px;
  } 
}
@media (min-width:550px) {
  header h1{
    font-size: 72px;
  }
  header h2{
    font-size: 22px;
    letter-spacing: 20px;
  }
  header figure,
  header figure img{
    height:100%;
    border: 20px;
  }
  body{
    width: 100%;
    padding-bottom: 300px;
  }
  input{
    width: 250px;
  }
  form{
    min-width: 350px;
  }
  h2{
    font-size:24px;
  }
  footer{
    width: 100%;
    position: absolute;
  }
  .cursos{
  max-height: 180px;
  max-width: 310px;  
}
}
@media (min-width:700px) {
  body{
    width: 100%;
  }
  footer{
    width: 100%;
  }
}
@media (min-width:1000px) {
  body{
    max-width: 1000px;
  }
  footer{
    max-width: 1000px;
  }
}