/* Paleta de colores NUEVA */

/* #364F6B azul oscuro*/
/* #FF6699 rosa*/
/* #3FC1C9 celeste*/
/* #F5F5F5 crema*/


/*css*/
html, body{
    padding: 0;	margin: 0;
}
body { 
       
}
body, div, p{
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;	
    line-height: 1.375rem;	
    color: #333;	
    -webkit-text-size-adjust: none;
}


p{margin: 0 0 0.625rem 0;
}
a, a:link, a:active, a:visited, a:hover{
    color: #333;	
    text-decoration: none;
}
pre{font-size: 0.75rem;	
    width: 100%;	
    overflow: auto;	
    -webkit-overflow-scrolling: touch;
}
#page nav{
    display: none;
    
}
#header{
    background: #364F6B;	
    font-size: 1rem;	
    font-weight: bold;	
    color: #fff;	
    text-align: center;	
    line-height: 2.5rem;	
    height: 2.5rem;	
    padding: 0 3.125rem;
}
#header a{
    background: center center no-repeat transparent;	
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpi/P//PwOtARMDHQBdLGFBYt+nkR2KjEhxQqvIYaR7cD2glSWMo0mY3DiJo5Edi4ZPEqZ7nMSP5pPRon60qB9NwpQDgAADAMIxHUJvWs/TAAAAAElFTkSuQmCC);	
    display: block;	
    width: 2.5rem;	
    height: 2.5rem;	
    position: absolute;	
    top: 0;	
    left: 0.625rem;
}

#header a.right{
    left: auto;
    right: 0.625rem;
}


/*Menu - positioning and sizing*/

html.mmenu-opened,
html.mmenu-opened body
{
	height: 100%;
	width: 100%;
	overflow: hidden;
}
html.mmenu-opened body
{
	position: relative;
}
.mmenu
{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.mmenu,
.mmenu *
{
	-webkit-text-size-adjust: none;
	font-family: 'Roboto', sans-serif;
	font-size: 0.875rem;
}
.mmenu ul,
.mmenu li,
.mmenu li > a,
.mmenu li > span
{
	display: block;
	padding: 0;
	margin: 0;
}
.mmenu > ul
{
	padding: 0.625rem 0 2.5rem 0;
}
.mmenu .mmenu-hidden
{
	display: none;
}
html.mmenu-left .mmenu > ul > li
{
	padding-right: 4.063rem;
}
html.mmenu-right .mmenu > ul > li
{
	padding-left: 4.063rem;
}
html.mmenu-opened .mmenu.mmenu-opened
{
	display: block;
}
html.mmenu-opened .mmenu-page
{
	box-shadow: 0 0 1.25rem #000000;
	background-color: inherit;
	min-height: 100%;
	position: absolute;
	z-index: 1;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#mmenu-blocker
{
	display: none;
}
html.mmenu-opened #mmenu-blocker
{
	background: rgba( 255, 255, 255, 0.1 );
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 2;
}
html.mmenu-opened .mmenu-page,
html.mmenu-opened #mmenu-blocker
{
	-webkit-transition: left 0.5s ease, right 0.5s ease, margin 0.5s ease;
	-moz-transition: left 0.5s ease, right 0.5s ease, margin 0.5s ease;
	transition: left 0.5s ease, right 0.5s ease, margin 0.5s ease;
}
html.mmenu-left.mmenu-opened .mmenu-page,
html.mmenu-left.mmenu-opened #mmenu-blocker
{
	margin-left: 0rem;
	left: 0%;
}
html.mmenu-left.mmenu-opening .mmenu-page,
html.mmenu-left.mmenu-opening #mmenu-blocker
{
	left: 20%;
}
html.mmenu-right.mmenu-opened .mmenu-page,
html.mmenu-right.mmenu-opened #mmenu-blocker
{
	margin-right: 0px;
	right: 0%;
}
html.mmenu-right.mmenu-opening .mmenu-page,
html.mmenu-right.mmenu-opening #mmenu-blocker
{
	margin-right: -4.1rem;
	right: 100%;
}






/*Menu - styling*/
.mmenu
{
	background: #f5f5f5;
}
.mmenu *
{
	text-shadow: 0 0.0625rem 0.0625rem rgba( 0, 0, 0, 0.5 );
}
.mmenu li
{
	border: none;
	border-top: 0.0625rem solid #444;
	border-bottom: 0.0625rem solid #111;
	position: relative;
}
.mmenu li:first-child
{
	border-top-width: 0;
}
.mmenu li > a,
.mmenu li > span
{
	text-indent: 1.25rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 2.5rem;
	overflow: hidden;
	padding-right: 0.3125rem;
}
.mmenu li > a,
.mmenu li > span,
.mmenu li > a:hover
{
	color: #364F6B;
	text-decoration: none;
    font-family: 'Roboto', sans-serif;
}
.mmenu li.mmenu-selected > a,
.mmenu li.mmenu-selected > span
{
	background: #FF6699;
}
.mmenu li.mmenu-selected > a.mmenu-subopen
{
	background: transparent;
}




/*ELEMENTOS*/

article {
    padding: 0;
    min-height: 40rem;
    display: block;
    font-family: 'Roboto', sans-serif;
    background: url(../img/1.jpg);
    background-size: 100%;
    
    
}

.contenedor{
    background-color: transparent;
    display: block;
    font-family: 'Roboto', sans-serif;
    margin-left: 1rem;
    padding: 3rem;
    max-width: 22rem;

}

.logo{display: none;
}


.descripcion{
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: #414A50;
    text-align: center;
    margin-top: 15rem;
}

.boton {
    background-color: #3FC1C9;
    width: 10rem;
    height: 2.5rem;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    display: block;
    padding-top: 1.25rem; 
    border-radius: 30px; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 3rem;
}

.icono {
    width: 6.25rem;
    height: 6.25rem;
    margin-left: auto;
    margin-right: auto;
}

#main {
   margin: 0;
   padding: 0;
    width: 100%;
    background-color: #F5F5F5; 
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 

footer {
   display: block;
   margin: 0;
   padding: 0;
   min-height: 5rem;
   font-family: sans-serif;
    color: #fff;
    text-align: center;
    background-color: #414A50;
   }

/*DETALLE DE CADA BLOQUE*/

.tarea1 {
    font-family: 'Roboto', sans-serif;
    min-height: 5rem;
    padding: 2rem;
    margin: 1rem;
    width: 30%;
}
.tarea2 {
    font-family: 'Roboto', sans-serif;
    min-height: 5rem;
    padding: 2rem;
    margin: 1rem;
    width: 30%;
}
.tarea3 {
    font-family: 'Roboto', sans-serif;
    min-height: 5rem;
    padding: 2rem;
    margin: 1rem;
    width: 30%;
}

@media all and (max-width:70rem)
{ 
article{background: #cae6ed;}
    
    .contenedor{
        margin: 0 auto;
    }
    .logo{
        display: block;
        margin: auto;
        margin-top: 2rem;
    }
    
    .descripcion{
        margin-top: 2rem;
    }
    
}

@media all and (max-width:50rem)

{
   

   #main {
    -webkit-flex-flow: column;
            flex-flow: column;
   }
    
    #main .tarea1 { 
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    #main .tarea2 { 
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    #main .tarea3 { 
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    html.mmenu-left.mmenu-opening .mmenu-page,
html.mmenu-left.mmenu-opening #mmenu-blocker
{
	margin-left: 8rem;
	left: 20%;
}
}

@media all and (max-width:25rem)

{

    #main {
       
    -webkit-flex-flow: column;
            flex-flow: column;
       
   }
    
    #main .tarea1 {
        -webkit-flex-flow: column;
                flex-flow: column;
        width: 60%;
    }
    
    #main .tarea2 {
         -webkit-flex-flow: column;
                flex-flow: column;
        width: 60%;
    }
    
    #main .tarea3 {
         -webkit-flex-flow: column;
                flex-flow: column;
        width: 60%;
    }
    
    html.mmenu-left.mmenu-opening .mmenu-page,
html.mmenu-left.mmenu-opening #mmenu-blocker
{
	margin-left: 8rem;
	left: 20%;
}
}