@import url('https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,500,700');


* { box-sizing: border-box;}


body         {font-family: 'Roboto', sans-serif;
              max-width: 100%;
              margin: auto;}


header        {background-size: contain;
              background-image: url(img/0101.gif);
              background-position: bottom;
              padding: 1rem;}


.logo  {display: flex;
              margin: auto;
             padding: 0.3rem;}


   

header h1   {color: #FFF;
            text-align: center;              
            font-family: 'Titillium+Web',sans-serif;
             font-weight: 700}



/* navegador */



.f1 nav           {background: #ff8178; padding: 1rem; text-align: center; margin: 2% 0%  2% 0% }
.f1 nav ul li     {list-style-type: none; display: inline;}
.f1 nav ul li a   {color: #ffffff; text-decoration: none;
                  align-content: center; font-family: 'roboto', sans-serif; 
                  font-weight: 400; margin: 2% 2% }



/* div presentacion */


.presentacion    {font-family: 'Roboto', sans-serif; 
                 background-color: #efefef;
                margin: 2rem auto;
                 display: flex;}

.columna1        {width: 40%;
                 float: left;
                 margin: 3rem 5rem 2rem 4rem;
                 text-align: right;}

.columna1 img   {width: 152%;
                 height: 62%;
                 margin: 8rem auto 0;}


.columna2        {
                 
                 margin: 7rem 1rem 1rem 5rem;
                 text-align: left;
                 display: flex; 
                 justify-content: space-between;
                }

.columna2 h1     {font-family: 'Roboto', 'Arial', sans-serif; 
                 color: #2E3356;
                 text-align: left;
                 font-size: 1.8rem;
                 padding-bottom: 1.5rem;}


.columna2 h2     {font-family: 'Roboto', 'Arial', sans-serif; 
                 color: #2E3356;
                 text-align: left;
                 font-size: 1rem;
                 padding-bottom: 0.8rem;}



/* div andoidmac */


.androidmac {display: flex; 
            font-size: 1.1rem;
            color:#6ACBB3;}
.iconos    {margin: auto;}



/* div caracteristicas */


.caracteristicas          {display: flex;
                          flex-direction: row;
                          justify-content: space-between;
                          margin: 3rem 0rem 0rem 0rem; text-align: center;}

.caracteristicas div     {background-color: #2c3456;
                         padding: 1rem;
                         width: 29%;}


.caracteristicas div p   {padding: 0rem 3rem;
                          color:#ffffff;
                          font-weight: 500;}



/* div datosinfo */


.datosinfo  {font-family: 'Roboto', 'Arial', sans-serif; 
            margin: 2rem 0 2rem 0;
            padding: 5rem 0rem 2rem 0rem;
            list-style-type: none;
            text-align: center;
            font-size: 1rem;
            color: #ffffff;
            background-color: #2E3356;
            width: 100%;}

.datosinfotitulo  {font-family: 'Roboto', 'Arial', sans-serif; 
                  color: #6ACBB3;font-weight: 700;font-size: 1.6rem;}


.datosinfo2  {display: flex;
	         flex-direction: ;
	    	 justify-content: center;
	         align-items: flex-start;}


.datosinfo3  {display: flex;
	         flex-direction: ;
	    	 justify-content: center;
	         align-items: flex-start;}

.texto1      {padding: 4rem}
.texto2      {padding: 4rem}



/* div valoraciones */

.valoraciones {display: flex;
              flex-direction: row;
              justify-content: space-between;
              margin: 0rem 0rem 0rem 0rem; text-align: center; }

.valoracionestitulo    {font-family: 'Roboto', 'Arial', sans-serif; 
                       color: #2c3456; display: flex;font-weight: 300;
                       justify-content: center;  font-size: 1.3rem;
                       margin: 2rem auto;}

.valoraciones div{
    width: 100%;
    padding: 1.9rem 0rem;
    background-color: #dbdcde;
    color: #2c3456;
}

.valoraciones div img{
    border-radius: 50%;
    border-color:#2c3456;
    padding: 0.2rem;
}

.valoraciones div span{
    display: grid;
    font-weight: 700;
    font-size: 1rem;
}

.valoraciones div p{
    font-weight: 300;
    max-width: 70%;
    flex: auto;
    margin: auto;
    padding: 0.3rem;
}







/* div descarga */

.section1
    {font-family: 'Roboto', 'Arial', sans-serif; 
    background-image:url(img/fadu04.png);
    background-size: cover;
    background-position: center;
    padding: 3rem;
    display: flex;margin: 4rem 0rem 0rem 0rem}


.columnaizq {display: flex;margin: 1rem 0rem 1rem 8rem}


.section2    {width: 40%;color:#ffffff;
             float: right;
             margin: -33rem 6rem;
             text-align: left;
             display: flex; justify-content: space-between;
             padding-top: 5rem;
	         padding-bottom: 2rem;}


.descarga_btn {
	display: inline-block;
	text-decoration: none;
	padding: 15px 40px;
	border: 2px solid #ffffff;
	border-radius: 2px;
	border-radius: 2px;
	border-radius: 2px;
	margin: 20px 20px 10px 0;

	color: #ffffff;
	font-family: 'Roboto', 'Arial', sans-serif; 
    font-weight: 400;
	font-size: 16px;
}

.descarga_btn:hover {
    color: #ffffff;
	background:#2c3456;
	border: 2px solid #2c3456;
	transition: all ease 1s;
}



/* div redessociales */


.redessociales {
    color: #2c3456; 
    padding: 1rem 0rem 2rem;
    font-weight: 500; margin: 2rem 0rem 2rem 37rem;
}

.redessociales li{display: inline;
    text-decoration: none;margin: 0rem 2rem 0rem 1rem;}

.redessociales li a {padding: 0.6rem;}




/* footer */



footer              {background-color: #2f3356;
                    text-align: center;
                    padding: 1rem;
                    max-width: 100rem;
                    font-size: .8rem;
                    color: #000000  }


footer h8          {font-family: 'Titillium+Web', sans-serif;
                    color:#ffffff;font-weight: 700}

footer p          {font-family: 'Dosis', sans-serif;
                    color:#ffffff;font-weight: 400}


.iconos p {
    margin: 1rem auto;
    display: flex;
}

.redessociales li{
    margin: auto;
    display: inline;
}




/* ------------------------------- Para Mobile ------------------------------- */

@media screen and (max-width: 320px){
  .caracteristicas {
        flex-direction: column;
      margin: 1rem 0 0 0;
    }
   
    /* div descarga */

.section1
    {font-family: 'Roboto', 'Arial', sans-serif; 
 
    padding: 3rem;
    display: flex;margin: 14rem 0rem 0rem 0rem}


    .descarga {
           background-image:url(img/fadu04.png);
    background-size: contain;
    background-position: center;
        padding: 11rem 0 0;
        margin: 1rem 0;
    }

    .columnaizq {display: none;}

.section2    {width: 40%;color:#ffffff;
             float: right;
             margin: -33rem 6rem;
             text-align: left;
             display: flex; justify-content: space-between;
             padding-top: 5rem;
	         padding-bottom: 2rem;}


.descarga_btn {
	display: inline-block;
	text-decoration: none;
	padding: 15px 40px;
	border: 2px solid #ffffff;
	border-radius: 2px;
	border-radius: 2px;
	border-radius: 2px;
	margin: 20px 20px 10px 0;

	color: #ffffff;
	font-family: 'Roboto', 'Arial', sans-serif; 
    font-weight: 400;
	font-size: 16px;
}

.descarga_btn:hover {
    color: #ffffff;
	background:#2c3456;
	border: 2px solid #2c3456;
	transition: all ease 1s;
}

    .caracteristicas div {
        width: 100%;
        margin: 1rem 0;
    }
    
    
    .valoraciones {
        display: none;
    }
    
    .valoracionestitulo {
        display: none;
    }
     
    
    footer {
        background-color: #bfbfbf
    }
    
    .columnader{
        padding: 0;
        margin: 0;
    }
    
    .columnader h1{margin: 0;
    padding: 0;
    font-size: 1.5rem;
    }
    
    .columnader h2{margin: 0;
    padding: 0.5rem 0;
    font-size: 1.2rem;}
    
 
    
    
    
    
    
}




/* ------------------------------- Para tablet ------------------------------- */

@media screen and (min-width: 768px){
    .columnaizq {margin: 0;}
    
    header {
        background-size: cover;
    }
    .caracteristicas div {
        width: 32%;}
    
    .caracteristicas div p{
        padding: 0rem 1rem;
    }
        
    body {
        max-width: 100%;
    }
        
    
    
}