* {
        box-sizing: border-box;
        }
body{
  color:brown;
  text-align: center;
  font-weight: bold;
}
#principal{
    width: 80%;
    margin: auto;
}

.fila{
    display: flex;
    flex-wrap: wrap;
}

.columna{
  padding: 10px 20px;
  width: 100%;
}


.columna>div
{
    background-color: lightpink;
    border: 2px  dotted;
    color: brown;
    border-radius: 10px;

}
img{
    width: 100%;
}

/* DISTRIBUCION COLUMNAS */

.horizontal-final{
  justify-content: flex-end;

}

.horizontal-separado{
  justify-content: space-around
  ;

}

.horizontal-centro
{
  justify-content: center;
}

footer
{
  min-height: 300px;
}
.vertical.centrado
{
  align-items: center;
}

/* media queries-movil grande*/
@media screen and (min-width:576px) {
  .movil-doce {
    width: 100%;
  }
  
  .movil-once {
    width: 91.6667%;
  }
  
  .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-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%;
  }

}
/* 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%;
  }

}
/* desktop*/
@media screen and (min-width:1200px) {
  .desk-doce {
    width: 100%;
  }
  
  .desk-once {
    width: 91.6667%;
  }
  
  .desk-diez {
    width: 83.3333%;
  }
  
  .desk-nueve {
    width: 75%;
  }
  
  .desk-ocho {
    width: 66.6667%;
  }
  
  .desk-siete {
    width: 58.3333%;
  }
  
  .desk-seis {
    width: 50%;
  }
  
  .desk-cinco {
    width: 41.6667%;
  }
  
  .desk-cuatro {
    width: 33.3333%;
  }
  
  .desk-tres {
    width: 25%;
  }
  
  .desk-dos {
    width: 16.6667%;
  }
  
  .desk-uno {
    width: 8.3333%;
  }

}