/*INDEX
general
layaut
media queries
movil grande
tablet vertical
tablet horizontal
laptop
desktop*/


/*general*/
*{
    box-sizing: border-box;
}
img {
    width: 100%;
}
/*layaut*/
#principal{
    width: 100%;
    margin: auto;
}
.fila{
    display: flex;
    flex-wrap: wrap;
}
.columna{
    padding: 10px 20px;
    width: 100%;
}


.horizontal-final{
    justify-content: flex-end;
}
.horizontal-centro{
    justify-content: center;
}
.horizontal-separado{
    justify-content: space-between;
}
.horizontal-margenes{
    justify-content: space-around;
}
.vertical-centrado{
    align-items: center;
}
.abajo{
    align-self: flex-end;
}
.centro{
    align-self: center;
}

/*media queries- movil grande*/
@media screen and (min-width:576px) {
    .movil-doce {
        width: 100%;
      }
      
    .movil-once {
        width: 91.6667%;
      }
      movil-
    .movil-diez {
        width: 83.3333%;
      }
      
    .movil-nueve {
        width: 75%;
      }
      
    .movil-ocho {
        width: 66.6667%;
      }
      
    .movil-siete {
        width: 58.3333%;
      }
      
    .movil-seis {
        width: 50%;
    }
      
    .movil-cinco {
        width: 41.6667%;
    }
      
    .movil-cuatro {
        width: 33.3333%;
    }
      
    .movil-tres {
        width: 25%;
    }
      
    .movil-dos {
        width: 16.6667%;
    }
      
    .movil-uno {
        width: 8.3333%;
    }  
}
/*tablet vertical*/
@media screen and (min-width:768px) {
    .tablet-v-doce {
        width: 100%;
      }
      
    .tablet-v-once {
        width: 91.6667%;
      }
    
    .tablet-v-diez {
        width: 83.3333%;
      }
      
    .tablet-v-nueve {
        width: 75%;
      }
      
    .tablet-v-ocho {
        width: 66.6667%;
      }
      
    .tablet-v-siete {
        width: 58.3333%;
      }
      
    .tablet-v-seis {
        width: 50%;
    }
      
    .tablet-v-cinco {
        width: 41.6667%;
    }
      
    .tablet-v-cuatro {
        width: 33.3333%;
    }
      
    .tablet-v-tres {
        width: 25%;
    }
      
    .tablet-v-dos {
        width: 16.6667%;
    }
      
    .tablet-v-uno {
        width: 8.3333%;
    }  
}
/*tablet horizontal*/
@media screen and (min-width:992px) {
    .tablet-h-doce {
        width: 100%;
      }
      
    .tablet-h-once {
        width: 91.6667%;
      }
    
    .tablet-h-diez {
        width: 83.3333%;
      }
      
    .tablet-h-nueve {
        width: 75%;
      }
      
    .tablet-h-ocho {
        width: 66.6667%;
      }
      
    .tablet-h-siete {
        width: 58.3333%;
      }
      
    .tablet-h-seis {
        width: 50%;
    }
      
    .tablet-h-cinco {
        width: 41.6667%;
    }
      
    .tablet-h-cuatro {
        width: 33.3333%;
    }
      
    .tablet-h-tres {
        width: 25%;
    }
      
    .tablet-h-dos {
        width: 16.6667%;
    }
      
    .tablet-h-uno {
        width: 8.3333%;
    }  
}
/*tablet laptop*/
@media screen and (min-width:1200px) {
    .laptop-doce {
        width: 100%;
      }
      
    .laptop-once {
        width: 91.6667%;
      }
    
    .laptop-diez {
        width: 83.3333%;
      }
      
    .laptop-nueve {
        width: 75%;
      }
      
    .laptop-ocho {
        width: 66.6667%;
      }
      
    .laptop-siete {
        width: 58.3333%;
      }
      
    .laptop-seis {
        width: 50%;
    }
      
    .laptop-cinco {
        width: 41.6667%;
    }
      
    .laptop-cuatro {
        width: 33.3333%;
    }
      
    .laptop-tres {
        width: 25%;
    }
      
    .laptop-dos {
        width: 16.6667%;
    }
      
    .laptop-uno {
        width: 8.3333%;
    }  
}
/*tablet desktop*/
@media screen and (min-width:1400px) {
    .desktop-doce {
        width: 100%;
      }
      
    .desktop-once {
        width: 91.6667%;
      }
    
    .desktop-diez {
        width: 83.3333%;
      }
      
    .desktop-nueve {
        width: 75%;
      }
      
    .desktop-ocho {
        width: 66.6667%;
      }
      
    .desktop-siete {
        width: 58.3333%;
      }
      
    .desktop-seis {
        width: 50%;
    }
      
    .desktop-cinco {
        width: 41.6667%;
    }
      
    .desktop-cuatro {
        width: 33.3333%;
    }
      
    .desktop-tres {
        width: 25%;
    }
      
    .desktop-dos {
        width: 16.6667%;
    }
      
    .desktop-uno {
        width: 8.3333%;
    }  
}