html{ font-size: 16px;
background-color: #00ADEE;}
*{box-sizing: border-box;}
*{margin: 0; padding: 0;}

}

body {
	font-size: 19px;
	font-family: 'poppins', sans-serif;
	color: #ffff;
}

header {
    font-family: 'poppins', serif;
    font-size: 2rem;
    display: flex;
	flex-direction:column-reverse;
	flex-wrap: nowrap;
	align-content: stretch;
    width:100%;
    padding:1.7rem;
    height: 15rem;
}

header div img{
    
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items:flex-end;
}

    
}

header div {
    
    font-size: 0;
	width: 200px;
	height: 51px;
    justify-content:space-around;
}

li{
    font-family: 'poppins', serif;
    color:white;
    list-style-type: none;
    text-decoration: none;
    Padding: 2rem .9rem;
    display: inline;
    width: auto;
}

a {
  color: darkgrey;
  text-decoration: none;
  list-style: none; 
  }


.navlist{
    background-color: #ffff;
    display: inline;
    width: 100%;; text-align: center; font-size: 1.2rem; color: white; padding:1rem 2rem 1rem 3rem; font-weight: 300;}
    
}


section h3 {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 500;
   
}

/* fin header */


/* banner */

.banner {
    
    background-image: url(img/fondo.png);
	background: #ffff;
	padding-top: 3.5rem;
}

.banner article {
    
	max-width: 960px;
	padding: 0rem;
	margin:  auto;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.banner article div {
    
    margin: 0rem 0 0 4rem ;
	width: 50%;
    height: 40rem;

}

.banner article div h2 {
    
	color: #FCBA23;
    font-family: 'poppins', sans-serif;
    font-weight: 400;
	font-size: 2.5rem;
	line-height: rem;
	margin-bottom: 1rem;
    margin-top: 2rem;
    line-height: 3.4rem;
}

.banner article div h2 span {
    
    
	font-weight: 700;
}

.banner article div p {
    
    font-family: 'poppins', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
	margin-bottom: 1rem;
}

.banner article div a {
    
display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: baseline;
	align-content: stretch;
    
}

.banner article div img {
    
    padding: 0.7rem ; 
    margin-top: 3rem;
	margin-bottom: -50px;
	max-width: 150%;
}


/* fin banner */

/* Como funciona */

.comofunciona {
    
background-color: white;
align-content: center;
background-size:contain;
}

.titular { 
    
    font-family: 'poppins', sans-serif;
    font-weight: 200;
    display: grid; 
    margin: 4% 10% 7% 15%;
    line-height: 1.5rem:
}

.titular article { 
    width: 100%; display: auto auto
}

.titular h2{
    
margin: 0rem 0rem 3rem;
font-size: 2.7rem;
font-weight: 300;
color:#ffff;
display: grid;
grid-column-start: 1;
grid-column-end: 4;
    text-align: center;
}

.fadutips {
    text-align: center;
    margin: auto;
    margin-right: 2rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
     color:white
    
}

.videotips{
    text-align: center;
    margin: auto;
    margin-right: 2rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
     color:white
}

.archivos{ 
    text-align: center;
    margin: auto;
    margin-right: 2rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
     color:white
}

.fadutips img {
    
height: 5rem;    

}

.videotips img{
height: 5rem; 
}

.archivos img {
 height: 4.9rem;   
    
}

h5{
color:#ffff;
font-family: 'poppins', sans-serif;
font-weight: 600;
font-size: 1.4rem;
margin: 2rem 2rem 1rem 2rem;

}
 
/* fin de ComoFunciona*/

/* info */

.info {
    
	margin-bottom: 6rem;
	padding: 1rem;
}

.info h3 {
    
    font-family: 'poppins', sans-serif;
    font-weight: 800;
	margin-bottom: 3rem;
    text-align: center;
    color: white;
    font-size:2.7rem;
    
}

.info article {
    
	display: flex;
	flex-direction: row;
	align-items: center;
	max-width: 960px;
	justify-content: space-between;
	margin: 0 auto;

}

.info article div {
	width: 100%;
}

.info article div.imagen {
    
	text-align: center;
}

.info article div.imagen img {
    
	max-width: 80%;
}

.info article div p {
    
    font-family: 'lato', sans-serif;
    font-weight: 400;
	line-height: 1.6rem;
}

.video1 {
    display: flex;
    flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
    
	}

/* fin info */

/* imagen */

section.imagen {
    
	background: #ffff;
	padding: 2rem 0 2rem 0;
	text-align: center;
	margin-bottom: 2rem;
}

section.imagen img {
    
	margin-bottom: -20px;
	max-width: 100%;
    padding: 1.5rem
}

/* fin imagen */


/* final */

.final {
    
    text-align: center;
	padding:1rem 1rem 5rem 1rem;
}

.final h3 {
    
    font-family: 'poppins';
    font-weight: 600;
	margin-bottom: 4rem;
    color:#ffff;
    font-size: 1.5rem;
}


/*fin final*/

p.legales {
    
    margin-bottom: auto;
    margin-right: auto;
    background-color: black;
	padding: 1rem 1rem 1rem 1rem;
    text-align: center;
	font-size: 0.6rem;
	font-weight: 100;
	color: whitesmoke;
    font-family:  'open sans' ;
}


@media screen and (max-width: 768px) {
.video  {
		width: 50%;

	}
header img {
		width: 70%;

	}   
    
	.banner {
		padding-top: 3.5rem;
	}
	.banner article {
		flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	}

    .banner article div a {
   
        
    margin-top: -3rem;    
    flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
    }
    
	.banner article div {

		width: 90%;
		margin:3rem;
		text-align: center;
		padding-bottom: 1rem;
	}

    .banner article div p {
        
        align-content: center
    
    }


@media screen and (max-width: 600px) {
.video {
		width: 50%;

	}

    
    
    
	.banner article div.imagen {
		display: none;
	}

    .banner article div a {
    
    flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
    }
    
    .banner article div p {
        
        align-content: space-around
    
    }
    
    .titular {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
        
    }

.fadutips {
    -webkit-order: 0;
   
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    align-self: auto;

    
    }

.videotips {
    -webkit-order: 0;
   
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    
    align-self: auto;
    color:white
    
    }

.archivos {
    -webkit-order: 0;
    
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    
    align-self: auto;
    
    }


}