@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,600,700,900');

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,600,700,900');
*{ margin: 0; padding: 0;}
body {background: #d4fbff; font-family: 'Montserrat', sans-serif; font-weight: 400}



.pagina {; margin:0 auto; }


header nav {text-align: left;}
nav {background: #1DB4C4;}

header nav ul { margin: 0 auto; padding: 1.25rem; display:block;list-style: none}

header  nav ul li {list-style-type: none; display: inline; font-family:'Montserrat', sans-serif; font-size: 1.1rem; text-align:center;font-weight: 400; padding-right: 1rem; padding-left: 1rem;}
header nav ul li a {color: #fdffe6; text-decoration: none;}
header  nav ul li a:hover {color: #B4E9EF;}

dark {color: #0E627C; font-weight: 600}


/* boton responsive*/

.botonmenu {display: none;}

/*--------------------*/

/* encabezado */
main .encabezado {text-align: center; align-content: center; padding-bottom: 4rem;}

main .encabezado img {width: 15rem; align-content: center; padding-top: 2rem;}

main .encabezado {background-image: url(img/fondolibros2.jpg); background-size: cover;}

main .encabezado h1 {font-size: 3rem; color: #EFF4D7; text-align: center; margin: 0rem; padding-bottom: 0.5rem;}

main .encabezado p {font-size: 1.2rem; color: #b71a61; text-align: center; font-weight: 500; margin: 0.2rem; padding-bottom: 3rem; }



.botondescarga {padding-bottom: 0.5rem; padding-top: 0.5rem; padding-left: 1.5rem; padding-right: 1.5rem; text-decoration: none; margin-top: 20rem; background-color: #0E627C;  border: 0.1rem solid #0E627C; border-radius: 3rem; font-size: 1.8rem; text-align: center; color: #d2faff; font-weight: 400; width: 12.5rem; margin: 0 auto; }





.fase1 { background: #fdffe6; display: flex;
   justify-content: space-between;align-content: center;padding-bottom: 2rem; padding-top: 2rem; }
    	

.fase1 img {width: 50%;}

.celular { margin: auto; padding-right: 2rem; padding-left: 2rem; padding-top: 1rem; padding-bottom: 1rem;}

.contenido1 {margin: auto; color: #0E627C; padding-right: 2rem; padding-left: 2rem; padding-top: 1rem; padding-bottom: 1rem;max-width: 25rem;}

.contenido1 h3 {font-size: 2rem; font-weight: 500; margin-bottom: 1rem;}

.contenido1 p {padding-bottom: 1rem; font-size: 1rem;}

.contenido1 img { width: 100%}

.func {background: #B4E9EF;}

.func img {width: 80rem; align-content: center; padding-top: 0rem; }

h4 { font-size: 2rem; text-align: center; margin: 0rem; background: #1DB4C4; padding-top: 2rem;color: #fdffe6;}



.funcionamiento { background: #1DB4C4; display: flex;
   justify-content: space-between;align-content: center;padding-bottom: 0rem; padding-top: 0.5rem; font-weight: 600; padding-left: 5rem; padding-right: 4rem; padding-bottom: 2rem; text-align: center; font-size: 1.2rem; color: #fdffe6;}

.funcionamiento h5 img {width: 3rem; padding-bottom: 0rem;}

.pantallas img {align-content: center; width: 100%;}

.caracteristicas {background: #fdffe6; text-align: center; padding: 2rem;}
h7 {font-size: 2rem; color: #0E627C; font-weight: 600;}

.caracteristicas p {font-size: 1rem; color: #b71a61; padding-top: 1rem;}


.fase3 {background: #fdffe6; display: flex; align-content: center;padding-bottom: 0rem; padding-top: 0rem;}

.celular2 img {width: 50%;}

.celular2 { margin: auto; padding-right: 2rem; padding-left: 2rem; padding-top: 0rem; padding-bottom: 0rem;}

.contenido2 {margin: auto; padding-right: 2rem; padding-left: 0rem; padding-top: 0rem; padding-bottom: 0rem; text-align: left; color: #0E627C; max-width: 25rem;}

.contenido2 h8{ font-size: 1.2rem; font-weight: 600; color: #b71a61; padding-top: 1rem;padding-bottom: 1re }

.contenido2 h8 img {max-width: 2rem;}

.contenido2 p {font-size: 1rem; color: #0E627C; margin: 0;padding-top: 0.5rem; padding-bottom: 1.5rem;}

red {color: #b71a61; font-weight: 500}

.fase4 { padding-bottom: 20rem; padding-top: 0rem; background-image: url(img/libroycel.jpg); background-size: cover;}


.fase4 h6 {font-size: 3rem; color: #fff;margin: 0; padding-left: 5rem; padding-top: 3rem; color: #d4fbff; }

.fase4 p { font-size: 1.2rem; color: #fff;padding-left: 5rem; color: #d4fbff;}

footer { background: #1DB4C4; text-align:center; margin: 0; padding: 2rem; display:block; color: #fdffe6; font-size: 0.8rem; padding-bottom: 1rem; padding-top: 1rem; }

main .pantallas3 {display: none;}

 
    
    .fase4 h6 {padding: 2rem; text-align: center; font-size: 1.5rem;}

/* -------------------- TABLET ------------------ */

@media (max-width: 768px) {

    .escritorio {display: none;}    

*{margin: 0; padding: 0; box-sizing: border-box;font-family: 'Roboto Condensed', sans-serif }

body { align-content: center; margin: 0; }

.pagina { max-width: 48rem; margin: 0 auto; background: #167499;}

/*barra de navegacion*/

header {height: 50 px; width: 100%; }
.botonmenu {background: #1DB4C4 ; display: block;}

header nav .menu { width:auto; margin:0; left:-100%;  }

.botonmenu img { width: 10%; padding: 1.2rem; margin-left: 1rem; }

.iconomenu { width: 16% ; padding-left: 1.2rem; padding-right: 1rem; }

header nav ul {	 list-style:none; background: #1DB4C4 ;  width: 20rem; }

header nav ul li {list-style: none; padding-top: 1rem; padding-bottom: 1rem; color:#fdffe6; font-size: 1.2rem; display: flex; border-bottom: 1px solid #fdffe6; font-weight: 400; }

header nav ul li:hover {background: rgba(7, 7, 7, 0.29)}

header nav ul li a {  text-decoration: none ; list-style-type: none; align-items: center; padding-left: 1rem; color: #fdffe6; 	padding:20px;  
 }

.menu {z-index: 99;position: absolute;}
	
  
/*fin barra navegacion*/


main {background: #1EB2C3; }


h1 {font-family: 'Montserrat', sans-serif; font-weight: 700; color: #EFF4D7; font-size: 3rem; margin: 1rem; text-align: center; margin-bottom: 2rem;}


.encabezado {text-align: center;}


main .encabezado img { width: 15rem; padding-left: 4rem; padding-top: 3rem;}

/*busqueda*/



.completar {margin-top: 3rem; margin-bottom: 3rem;}

.busqueda {margin-bottom: 4rem; position: relative;}

.busqueda img {width: 3rem; position: absolute; top: -0rem; right: 9.5rem;}

.busqueda input {
    display: block;
    padding: 0;
    margin: 0 auto;
    width: 30rem;
    height: 3rem;
    background: #EFF4D7;
    color: #0E627C;
    outline: none;
    margin-bottom: 0.2rem;
    padding-left: 1rem;
    font-size: 1.5rem;
    font-family: 'Roboto Condensed', sans-serif;
    z-index: 1;
    border-style: none;
    box-shadow: 0px 0px 20px 3px rgba(18, 99, 125, 0.7);
            
}
::-webkit-input-placeholder { /* Chrome */
  color: #EFF4D7;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #EFF4D7;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #EFF4D7;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: #EFF4D7;
  opacity: 1;
}

.formulario input:last-of-type {
    margin-bottom: 30px;
}

.busqueda input:last-of-type {
    margin-bottom: 20px;
}



    

 /*sliders*/




.listado {background: #B6E2E9;  text-align: center; }

.listado img {margin-right: 0rem; align-content: center;}

h2 {  font-family: 'Roboto Condensed', sans-serif; font-weight: 700; padding-top: 1rem; color: #A91F5E; text-align: center;}

    
     main .encabezado {padding-bottom: 11rem;padding-top: 6rem;}
    main .encabezado img {width: 30%; padding: 0rem;}
    main .encabezado h1 {font-size: 2.5rem;}
    main .encabezado p {font-size: 1.2rem;padding-left: 1rem; padding-right: 1rem; font-family: 'Montserrat', sans-serif; font-weight: 500;}
    main .botondescarga {font-size: 2rem;}
    main .fase1 {flex-wrap: wrap; display: flex;}
    main .contenido1 {font-size: }
    main .funcionamiento {padding: 0; padding-bottom: 2rem;}
    main .funcionamiento p {text-align: center;  margin-bottom: 0.5rem;}
    main .funcionamiento img {margin-top: 2rem; width: 3.5rem;}
    main .fase3 {flex-wrap: wrap; display: flex;}
    
    main .fase3 img { width: 50%;}
    
    main .pantallas {display: block;}
    
    main .pantallas3 {display: none;}
    
    main .pantallas3 img {width: 20rem; margin-left: 2rem;}
    
    
    
    main h3 {text-align: center;}
    main .contenido1 p {text-align: center;}
    
    main .contenido2 {text-align: center; padding: 0;}
    
    main .celular {  margin-left: 18rem; padding: 0rem; }
    main .celular img { width: 40%;} 
    
    .fase4 { padding-bottom: 20rem; padding-top: 0rem; background-image: url(img/libroycel3.jpg); background-size: cover;}
    
    .fase4 article {background: #0E627C;}
    
    .fase4 h6 {padding: 2rem; text-align: center; font-size: 1.5rem;}
    
    





}

    
/* celular */
@media (max-width: 400px) {
    
    
    h1 { font-size: 2.5rem;}
    
    .encabezado img {width: 15rem;}
    
    .botonmenu img { width: 18%; padding: 1rem; margin-left: 0.8rem; }

    .iconomenu { width: 25% ; padding-left: 0.8rem; padding-right: 1rem; }
   
    
    .busqueda input { width: 20rem;}
   
    .busqueda img {width: 3rem; position: absolute; top: 0rem; right: 2rem;}
 
        main .encabezado {padding-bottom: 11rem;padding-top: 6rem;}
    main .encabezado img {width: 50%; padding: 0rem;}
    main .encabezado h1 {font-size: 2.5rem;}
    main .encabezado p {font-size: 1.2rem;padding-left: 1rem; padding-right: 1rem; font-family: 'Montserrat', sans-serif; font-weight: 500;}
    main .botondescarga {font-size: 2rem;}
    main .fase1 {flex-wrap: wrap; display: flex;}
    main .contenido1 {font-size: }
    main .funcionamiento {flex-wrap: wrap; display: block; }
    main .funcionamiento p {text-align: center;  margin-bottom: 0.5rem;}
    main .funcionamiento img {margin-top: 2rem; width: 3.5rem;}
    main .fase3 {flex-wrap: wrap; display: flex;}
    
    main .fase3 img { width: 110%;}
    
    main .pantallas {display: none;}
    
    main .pantallas3 {display: block;}
    
    main .pantallas3 img {width: 20rem; margin-left: 2rem;}
    
    
    
    main h3 {text-align: center;}
    main .contenido1 p {text-align: center;}
    
    main .contenido2 {text-align: center; padding: 0;}
    
    main .celular {  margin-left: 6rem; padding: 0rem; }
    main .celular img { width: 70%;} 
    
    .fase4 { padding-bottom: 20rem; padding-top: 0rem; background-image: url(img/libroycel2.jpg); background-size: cover;}
    
    .fase4 article {background: #0E627C;}
    
    .fase4 h6 {padding: 2rem; text-align: center; font-size: 0.8rem;}
    
    

    
    
}