/* .col-1 {width:  8.33%; height: 200px;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%; height: 200px; }
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;} */
.col-12 {width: 100%; height: 200px;}

* {
  box-sizing: border-box;
}

body {
  /* background-image: url("../assets/images/dawn.png");
  background-repeat:no-repeat; */
  margin: 0;
  padding: 0;
}

.conteiner {
  height: 100vh;
  max-width: 1200px;
  margin: auto;
  width: 100%;
}

.row-::before {
  content: '';
  display: table;/*es como display: block */
}

.row-:after {
  clear: both;//limpiar
}

[class*='col-'] {
  float: left;
  min-height: 1px;
  padding: 12px;
  width: 100%;
}


@media (max-width: 870px) {
  .conteiner {
    background-repeat: no-repeat;
    background-image: url("../assets/images/dawn.png");
      background-size: 100%;
    position: relative;
    height: 100vh;
    width:100%;
  }
  .kat {
    background-image: url("../assets/images/kitten-large.png");
    background-repeat: no-repeat;
    background-size: 64%;
    height: 100vh;
    /* position: absolute; */
    margin-left: 18%;
    margin-top: 4%;
    width: 100%;
  }
}

@media ( min-width: 871px) and (max-width:1000px){

  .conteiner {
    background-repeat: no-repeat;
    background-image: url("../assets/images/night.jpg");
    background-size: 100%;
    height: 100vh;
    width: 100%;
    }
    .kat {
      background-image: url("../assets/images/kitten-small.png");
      background-repeat: no-repeat;
      background-size: 32%;
      height: 100vh;
      /* position: absolute; */
      margin-left: 20%;
      width: 100%;
    }
  }

@media  (min-width:1001px){
  .conteiner {
    background-image: url("../assets/images/sunny-day.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100vh;
    width: 100%;
    }
    .kat {
      background-image: url("../assets/images/kitten-medium.png");
      background-repeat: no-repeat;
      background-size: 46%;
      height: 100vh;
      /* position: absolute; */
      margin-left: 26%;
      margin-top:2%;
      width: 100%;
    }
  }