@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {font-family:'Open Sans', sans-serif ; margin: 0 auto; max-width: 80rem; margin-top: 0; margin-bottom: 0;}

*{margin: 0; padding: 0; box-sizing: border-box;}

h1 {font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 1.8rem; color:#004258; text-decoration-line: overline; }
h2 {font-family: 'Open Sans', sans-serif; font-weight: 800; font-size: 1.5rem; color:#fff; text-align: center; margin-top: 0;}
h3 {color: #E6E6E6; text-align: center; text-decoration-line: overline; font-family: 'Open Sans', sans-serif; font-size: 2rem; font-weight: 300;}
h4 {font-weight: 400; color: #E6E6E6; font-size: 1.5rem; text-align: center; display: flex; justify-content: center; margin: 0; margin-bottom: 2rem; padding-top: 15rem; }

hr {height: 0.001rem; max-width:  100%; background-color: #004258; opacity: 0;}


header {background-image: url(img/fondo1.jpg); background-position: center; background-size: cover; height: 40rem;}

nav ul {margin-top: 0;}
nav ul li {list-style: none; display: inline; margin: 0 auto;margin-top: 0rem;}
nav ul li a {color: #fff; text-decoration: none; float: right; font-weight: 400; margin-right: 1rem; margin-top: 1rem; margin-bottom: 1rem;}
nav ul li p {margin-top: 0; text-align: left; font-weight: 400; color: #fff;}


/*Encabezado textos*/ 
.titulo {margin-top: 20rem; margin-bottom: 5rem;}
.boton {margin-top: 20rem; background-color: #EB4726;  border: 0.1rem solid #fff; border-radius: 3rem; font-size: 1rem; text-align: center; color: #fff; font-weight: 700; width: 12.5rem; margin: 0 auto;  }
.boton a { text-decoration: none; color: #fff; padding: 2rem;}


main {font-family:'Open Sans', sans-serif ; margin-bottom: 0; }


/*Como funciona*/ 
.cftitulo {background-color: #EB4726; margin-top: 0; padding: 3rem; padding-top: 2rem;}
.cftitulo p {font-weight: 400; color:#E6E6E6; text-align: center;}


.comofuncionat {display: flex; flex-wrap: nowrap; justify-content: space-between; }


.comofuncionat  img {max-width: 15rem; max-height: 15rem;}
.comofuncionat article p {font-weight: 700; font-size: 1rem; text-align: center;  margin: 0; color: #EB4726; width: 15rem; max-height: 15rem; }


/*Celus*/ 
.celus1 { width: 100%; display: flex; justify-content: center; padding-top: 3rem; }
.celus1 article img {width: 30rem;}
.celus1texto {display: flex; flex-direction: column; align-items: center; align-content: stretch; text-align: left;  padding: 4rem; }
.celus1texto p { font-weight: 400; color: #004258; text-align: left; font-size: 1rem; }

.celus2 { width: 100%; display: flex; justify-content: center; padding-top: 3rem; margin-bottom: 4rem;}
.celus2 article img {width: 30rem;}
.celus2texto {display: flex; flex-direction: column; align-items: center; align-content: stretch; text-align: right;  padding: 4rem; }
.celus2texto p { font-weight: 400; color: #004258; text-align: right; font-size: 1rem; }

/*Nosotros*/ 
.nosotros {background-color: #004258; padding: 3rem; padding-top: 2rem;}
.nosotros p {font-weight: 400; color:#E6E6E6; text-align: center; margin-bottom: 0;}


footer { background-image: url(img/final.jpg); background-position: center; background-size: cover; height: 50rem; }




/*Tablet*/
@media (max-width:768px) { 
   .comofuncionat {display: flex; flex-wrap: wrap; justify-content: space-around; }
    .comofuncionat  img {width: 100%; max-height: auto;}
    .comofuncionat article p {font-weight: 700; font-size: 1rem; text-align: center;  margin: 0; color: #EB4726; width: 15rem; max-height: 15rem; }
    
    
    
    .celus1 { width: 100%; display: flex; flex-wrap: nowrap; justify-content: center; padding-top: 3rem; }
    .celus article {width: 40%;}
    .celus1 article img {width: 80%;}
    .celus1texto {display: flex; flex-direction: column; align-items: center; align-content: stretch; text-align: left;  padding: 0; width: 40%; margin-top: 2rem; margin-right: 2rem;}
    .celus1texto p { font-weight: 400; color: #004258; text-align: left; font-size: 1rem; }

    .celus2 { width: 100%; display: flex; flex-wrap: nowrap; justify-content: center; padding-top: 3rem; align-items: center;}
    .celus2ima {margin:0; }
    .celus2 article img {width: 80%; }
    .celus2texto {display: flex; flex-direction: column; align-items: center; align-content: stretch; text-align: right;  padding: 0;width: 40%; margin-top: 2rem; margin-left: 2rem;}
    .celus2texto p { font-weight: 400; color: #004258; text-align: right; font-size: 1rem; }
    
    
    
    
/*Celulares*/    
@media (max-width:450px){
    
.comofuncionat {display: flex; flex-wrap: wrap; justify-content: space-around; }
    .comofuncionat article { width: 40%;}
    .comofuncionat  img {max-width: 100%; max-height: auto;}
    .comofuncionat article p {font-weight: 700; font-size: 0.9rem; text-align: center;  margin: 0; color: #EB4726; width: 100%;}
    
    
    
    h1 {font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 1.8rem; color:#004258; text-decoration-line: overline; margin-bottom: 1rem; }
    .celus1 { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; padding-top: 3rem; }
    .celus1 article img {width: 100%;}
    .celus1texto {display: flex; flex-direction: column; align-items: center;  align-content: stretch; text-align: center;  padding: 0; width: 80%;  margin-top: 2rem;  }
    .celus1texto p { font-weight: 400; color: #004258; text-align: center; font-size: 1rem; width: 100%;  }

    .celus2 {     width: 100%;
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
    padding-top: 3rem;}
    .celus2 article img {width: 100%; }
    .celus2texto {display: flex; flex-direction: column; align-items: center; align-content: stretch; text-align: center;  padding: 0;width: 80%;  margin-top: 2rem;}
    .celus2texto p { font-weight: 400; color: #004258; text-align: center; font-size: 1rem; }  

    
    
    
    
    
    
    /*Celulares*/    
@media (max-width:375px){
    
  .comofuncionat {display: flex; flex-wrap: wrap; justify-content: space-around; }
    .comofuncionat article { width: 40%;}
    .comofuncionat  img {max-width: 100%; max-height: auto;}
    .comofuncionat article p {font-weight: 700; font-size: 0.9rem; text-align: center;  margin: 0; color: #EB4726; width: 100%;}
    
    
    
    h1 {font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 1.8rem; color:#004258; text-decoration-line: overline; margin-bottom: 1rem; }
    .celus1 { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; padding-top: 3rem; }
    .celus1 article img {width: 100%;}
    .celus1texto {display: flex; flex-direction: column; align-items: center;  align-content: stretch; text-align: center;  padding: 0; width: 80%;  margin-top: 2rem;  }
    .celus1texto p { font-weight: 400; color: #004258; text-align: center; font-size: 1rem; width: 100%;  }

    .celus2 {     width: 100%;
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
    padding-top: 3rem;}
    .celus2 article img {width: 100%; }
    .celus2texto {display: flex; flex-direction: column; align-items: center; align-content: stretch; text-align: center;  padding: 0;width: 80%;  margin-top: 2rem;}
    .celus2texto p { font-weight: 400; color: #004258; text-align: center; font-size: 1rem; }
    
   }