@import url('https://fonts.googleapis.com/css?family=Barlow&display=swap');

* {margin:0; padding: o;}

body {background-image: url("../img/fondo.jpg");  background-repeat:no-repeat; background-attachment: fixed;}

header { background-color: rgba(31, 33, 90, 0.32); height: 3rem; padding-top: 1rem; padding-bottom: 1rem; padding-left: 20%; padding-right: 20%; display: flex; justify-content: space-between; align-items: center;}

header .menu ul {font-family: "Barlow", sans-serif; color: #fff; display: flex; justify-content: center;}

.menu ul li a {color:#fff; text-decoration: none;}

.menu ul li a:hover{color:#ffb202;}

.menu li {list-style: none; display: block; padding: 0 2rem 0 2rem; font-weight: bold;}

.menu li:hover {color:#ffb202;}


.uno {display: flex; justify-content: space-between; height: 675px;}

.texto {padding-top: 10%; padding-left: 20%; font-family: "Barlow", sans-serif;}

.texto h2 {color: #fff; font-weight: 200; font-size: 300%; margin-top: 10%;}

.texto h1 {color: #fff; margin-top: 5%; font-weight: lighter; font-size: 130%;} 

.boton {display: inline-block; margin-top: 10%; background-color: #ffb202; padding: 3% 6% 3% 6%; border-radius: 20px; font-weight: bold;}

.boton:hover {background-color: #fff; color: #ffb202;}

.boton a {text-decoration: none;}


.imagen {padding-right: 17%; padding-top: 3%;}

.dos {background-color: #252d5a;}

.propiedades {display: flex; justify-content: space-between; padding-top: 5%; padding-bottom: 5%; padding-right: 20%; padding-left: 20%;}

.sub {display: flex; flex-direction: column; justify-content: center;}

.sub p {font-family: "Barlow", sans-serif; color: #fff; font-size: 80%; text-align: center; margin-top: 15%;}

.tres {background-color: #f3f3f3; display: flex; justify-content: space-between; padding-left: 15%; padding-right: 20%; padding-top: 5%; padding-bottom: 2%;}


h3 {font-family: "Barlow", sans-serif; font-size: 140%; color: #ffb202; margin-top: 20%; margin-bottom: 5%; margin-left: 7%;}

.tres .punteo ul {list-style: none;}

li {display: inline-block; font-family: "Barlow", sans-serif; margin-top: 4%;}

.cuatro {background-color: #ffb202; padding-top: 3%; padding-bottom: 3%;}

.cuatro p {font-family: "Barlow", sans-serif; color: #252d5a; font-weight: bold; text-align: center; font-size: 140%;}

.redes {display: flex; justify-content: center; margin-top: 2%;}

.redes div {margin-left: 2%; margin-right: 2%;}


footer {background-color: #3e3e3e; padding: 2% 20% 2% 20%;}

footer p {font-family: "Barlow", sans-serif; color: #fff; font-size: 80%; text-align: center;}

 
    .vid-contenedor{
  
    
    width: 100%;
    height: 0;
    padding-bottom: 45%;
    position: relative;
    background: #252d5a;
    padding-top: 10rem;
    
}
.vid-contenedor iframe{
    display: block;
    width: 50%;
    height: 28rem;
    margin: auto;
}
    
    

@media screen and (max-width:639px) {
    
    * {margin: 0; padding: 0;}
    
    body {background-image: url(../img/fondo2.jpg);}
    
    header {background-color: rgba(31, 33, 90, 0.79); display: flex; justify-content: center; flex-direction: column; padding-top: 2%; height: auto; align-content: center;}
    
    header .menu ul {font-size:70%;}
    
    .menu li {padding: 0 4% 0 4%;}
    
    .uno {flex-direction: column; align-content: center; height: auto; padding: 0;}
    
    .texto {padding:0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    
    .texto h2 {font-size: 200%; text-align: center;}
    
    .texto h1 {font-size: 89%;}
    
    .boton {display: block; width: 18%; border-radius: 15px; text-align: center;}
    
    .imagen {padding: 10% 0 0 0; display: flex; justify-content: center;}
    
    .propiedades {padding: 20% 32% 0% 32%; flex-direction: column; justify-content: center; align-content: center;}
    
    .sub {padding-bottom: 50%;}
    
    .sub p {font-size: 130%;}
    
    .tres {padding: 10% 0 15% 0; flex-direction: column; justify-content: center; align-content:center;}
    
    .tres img {display: flex; justify-content: center; width: 100%; max-width: 700px;}
    
    h3 {text-align: center; font-size: 160%; margin-top: 10%;}
    
    .tres .punteo ul {margin: 0 10% 0 10%; display: flex; flex-direction: column; justify-content: center;}
    
    li {font-size: 110%;}
    
    footer {padding: 5% 10% 5% 10%;}
    
    .vid-contenedor{
  
    
    width: 100%;
    height: auto;
    padding-bottom: 3rem;
    position: relative;
    background: #252d5a;
    padding-top: 3rem;
        
    
}
    .vid-contenedor iframe{
    width: 80%;
    height: 13rem;
    margin: auto;
}
 
}