/*  Fonts
=============================*/

@import 'https://fonts.googleapis.com/css?family=Dosis:300,400,500,800';


/* datos*/    
    
.datos{
                width: 100%;
                padding: 100px 0 20px 0;
        background-color:rgb(255, 116, 116);
   
    display: flex;
    justify-content: space-around;
    text-align: center;
    flex-direction: column;
   

}

.container {
    
   padding-right: 12em;
    padding-left: 12em;
    margin-right: auto;
    margin-left: auto;
}


.row text-center {
    padding: 0 3em 0 3em; 
}


 
.datos h1{
                color: #fff;
                font-family: "Dosis", sans-serif;
                font-size: 18px;
    font-weight: 400
                margin: 50px 0px 0px 0px;
                word-break: break-word;
}
 
.datos p{
                color: #fff;
                font-family: "Dosis", sans-serif;
                font-weight: 300;
    font-size: 16px;
    margin: 30px 0 0 0;
                line-height: 28px;
}
 
.datos .details{
                margin-bottom: 80px;
}
 
.datos .details:nth-child(3n+1){
                clear: both;
}







header h1 {
  font-family: 'Dosis', sans-serif;
  color: white;
  font-size: 4em;  
  list-style: none;
  }
header h1:hover {
  color: #6c00ff;  
}

h3 { 
  font-family: 'Dosis', sans-serif;
  color: white;
  font-size: 2.5em;  
  }

p {
  font-family: 'Dosis', sans-serif;  
  color: white;
  font-size: 1.5em;  
  }

/*  Responsive
=============================*/

section-01 {
  display: flex;
}
.contenedor-central { 
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  }

/* imagen de fondo responsive */
.section-01 {
  width: 100%;
  background-image: url(../img/back_cover_landing-compressor.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;  
  }

.izquierda {
  text-align: center;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  width: 40em;
  height: 45em;
  list-style: none;  
  }

.derecha {
  text-align: center;
  margin-left: 1em;
  margin-right: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
  width: 40em;
  list-style: none;  
  }

.derecha img {
  margin:0px;
  padding: 0px;
  width: 25em;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  }

.bajar-app {
  display: flex;
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;  
}

.android {
  text-align: center;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  vertical-align: middle;
  width: 10em;
  margin-bottom: auto;
  margin-top: auto;  
}

.appstore {
  text-align: center;
  margin-left: 1em;
  margin-right: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
  vertical-align: middle;
  width: 10em;
  margin-bottom: auto;
  margin-top: auto;
}

/*  Estilo Flexbox
=============================*/

.contenedor-central {
  display: flex;  
  justify-content: center;
  align-items: center;
  }

.bajar-app {
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  background: #ffffff ;
  text-align: center;
  height: 80px;
  list-style: none; 
  display: flex;  
  justify-content: center;
  align-items: center;
  }

/*  Diseño Para Ipad
=============================*/
@media screen and (max-width: 768px) {
  
  .contenedor-central {
    flex-direction: column;
    }
  
  .izquierda header {
    width: 24em;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    
  }
  
  .izquierda img {
    width: 12em;
    order: 1;
    }
  
  
  .derecha {
    flex: 1 100%;
    order: 2;
    }
  
  .derecha img {
    width: 15em
  }    
}


/*  Diseño Para Iphone
=============================*/

@media screen and (max-width: 375px) {
  .contenedor-central {
    flex-direction: column;
    }  
  
  .izquierda img {
    width: 6em;
  }
  
  .izquierda header {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    justify-content: center;
    align-items: center;    
    }  
  
  .izquierda header h1 {
    font-size: 2.5em;   
    }  
  
  .izquierda header h3 {
    font-size: 1.5em;   
    }  
  
  .izquierda header p {
    width: 10em;
    font-size: 1.5em;   
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    } 
    
  .derecha {
    flex: 1 100%;
    order: 2;
    }  
  
  .derecha img {
    width: 12em
  }    
}

@-wekit-media
  @-moz-@ms