.container {
  width: 100%;
  max-width: 1500px;
  margin: auto;
  height: 100%;

}

.row {
  width: 100%;
  display: flex;
  margin-bottom: .5rem;
  justify-content: space-evenly;
}

.col-1 {
    width: 8%;
  }
.col-2 {
    width: 16%;

  }
.col-3 {
    width: 24%;
  }
.col-4 {
    width: 32%;
  }
.col-5 {
    width: 40%;
  }
.col-6 {
    width: 48%;
  }
.col-7 {
    width: 56%;
  }
.col-8 {
    width: 64%;
  }
.col-9 {
    width: 72%;
  }
.col-10 {
    width: 80%;
  }
.col-11 {
    width: 88%;
  }
.col-12 {
    width: 96%;
  }

  /*media queries
ipad */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {
    .container{
      height: 1024px;
    }
    }

/* Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {
    .container{
      max-width:1024px;
      max-height: 768px;
    }
    .secondRow.row{
      max-width: 1024px;
      width:1000px;
    }

}