/****************Preparatory works***************/

/*General*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-width: 320px;
  line-height: 1.6;
  font-size: 16px;
  margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
  text-decoration: none;
  font-weight: normal;
  color: inherit;
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

/*container-block*/

.container-block {
  margin: 15px 0;
  padding: 30px 0;
}

/********margin padding**********/

.margin {
  margin: 30px;
}

.paddig {
  padding: 30px;
}

/*container*/

.wrapper {
  width: 80%;
  margin: 0 auto;
  padding: 10px;
}

/*wrapper*/

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px;
}

/*flex-block*/

.flex {
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-column {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-row-reverse {
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.flex-column-reverse {
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.flex-sa {
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.flex-sb {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.flex-center {
  -webkit-justify-content: center;
  justify-content: center;
}

/*flex-block middle device*/

/*flex-block large device*/

/*grid layout with width*/

.col-1 {
  width: calc(8.33333% - 30px);
}

.col-2 {
  width: calc(16.66667% - 30px);
}

.col-3 {
  width: calc(25% - 30px);
}

.col-4 {
  width: calc(33.33333% - 30px);
}

.col-5 {
  width: calc(41.66667% - 30px);
}

.col-6 {
  width: calc(50% - 30px);
}

.col-7 {
  width: calc(58.33333% - 30px);
}

.col-8 {
  width: calc(66.66667% - 30px);
}

.col-9 {
  width: calc(75% - 30px);
}

.col-10 {
  width: calc(83.33333% - 30px);
}

.col-11 {
  width: calc(91.66667% - 30px);
}

.col-12 {
  width: calc(100% - 30px);
}

/*grid layout middle device*/

/*grid layout large device*/

/*grid layout with flex*/

.grid-1 {
  flex-basis: calc(8.33333% - 30px);
}

.grid-2 {
  flex-basis: calc(16.66667% - 30px);
}

.grid-3 {
  flex-basis: calc(25% - 30px);
}

.grid-4 {
  flex-basis: calc(33.33333% - 30px);
}

.grid-5 {
  flex-basis: calc(41.66667% - 30px);
}

.grid-6 {
  flex-basis: calc(50% - 30px);
}

.grid-7 {
  flex-basis: calc(58.33333% - 30px);
}

.grid-8 {
  flex-basis: calc(66.66667% - 30px);
}

.grid-9 {
  flex-basis: calc(75% - 30px);
}

.grid-10 {
  flex-basis: calc(83.33333% - 30px);
}

.grid-12 {
  flex-basis: calc(91.66667% - 30px);
}

.grid-12 {
  flex-basis: calc(100% - 30px);
}

/*grid layout middle device*/

/*grid layout large device*/

/*grid layout extra large device*/

@media screen and (min-width: 640px) {
  .container {
    width: 80%;
    padding: 30px;
  }

  .flex-md-column {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .flex-md-row {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .flex-md-row-reverse {
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  .flex-md-column-reverse {
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .flex-md-sa {
    -webkit-justify-content: space-around;
    justify-content: space-around;
  }

  .flex-md-sb {
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }

  .flex-md-center {
    -webkit-justify-content: center;
    justify-content: center;
  }

  .col-md-1 {
    width: calc(8.33333% - 30px);
  }

  .col-md-2 {
    width: calc(16.66667% - 30px);
  }

  .col-md-3 {
    width: calc(25% - 30px);
  }

  .col-md-4 {
    width: calc(33.33333% - 30px);
  }

  .col-md-5 {
    width: calc(41.66667% - 30px);
  }

  .col-md-6 {
    width: calc(50% - 30px);
  }

  .col-md-7 {
    width: calc(58.33333% - 30px);
  }

  .col-md-8 {
    width: calc(66.66667% - 30px);
  }

  .col-md-9 {
    width: calc(75% - 30px);
  }

  .col-md-10 {
    width: calc(83.33333% - 30px);
  }

  .col-md-11 {
    width: calc(91.66667% - 30px);
  }

  .col-md-12 {
    width: calc(100% - 30px);
  }

  .grid-md-1 {
    flex-basis: calc(8.33333% - 30px);
  }

  .grid-md-2 {
    flex-basis: calc(16.66667% - 30px);
  }

  .grid-md-3 {
    flex-basis: calc(25% - 30px);
  }

  .grid-md-4 {
    flex-basis: calc(33.33333% - 30px);
  }

  .grid-md-5 {
    flex-basis: calc(41.66667% - 30px);
  }

  .grid-md-6 {
    flex-basis: calc(50% - 30px);
  }

  .grid-md-7 {
    flex-basis: calc(58.33333% - 30px);
  }

  .grid-md-8 {
    flex-basis: calc(66.66667% - 30px);
  }

  .grid-md-9 {
    flex-basis: calc(75% - 30px);
  }

  .grid-md-10 {
    flex-basis: calc(83.33333% - 30px);
  }

  .grid-md-11 {
    flex-basis: calc(91.66667% - 30px);
  }

  .grid-md-12 {
    flex-basis: calc(100% - 30px);
  }
}

@media screen and (min-width: 960px) {
  .flex-ld-column {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .flex-ld-row {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .flex-ld-row-reverse {
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  .flex-ld-column-reverse {
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .flex-ld-sa {
    -webkit-justify-content: space-around;
    justify-content: space-around;
  }

  .flex-ld-sb {
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }

  .flex-ld-center {
    -webkit-justify-content: center;
    justify-content: center;
  }

  .col-ld-1 {
    width: calc(8.33333% - 30px);
  }

  .col-ld-2 {
    width: calc(16.66667% - 30px);
  }

  .col-ld-3 {
    width: calc(25% - 30px);
  }

  .col-ld-4 {
    width: calc(33.33333% - 30px);
  }

  .col-ld-5 {
    width: calc(41.66667% - 30px);
  }

  .col-ld-6 {
    width: calc(50% - 30px);
  }

  .col-ld-7 {
    width: calc(58.33333% - 30px);
  }

  .col-ld-8 {
    width: calc(66.66667% - 30px);
  }

  .col-ld-9 {
    width: calc(75% - 30px);
  }

  .col-ld-10 {
    width: calc(83.33333% - 30px);
  }

  .col-ld-11 {
    width: calc(91.66667% - 30px);
  }

  .col-ld-12 {
    width: calc(100% - 30px);
  }

  .grid-ld-1 {
    flex-basis: calc(8.33333% - 30px);
  }

  .grid-ld-2 {
    flex-basis: calc(16.66667% - 30px);
  }

  .grid-ld-3 {
    flex-basis: calc(25% - 30px);
  }

  .grid-ld-4 {
    flex-basis: calc(33.33333% - 30px);
  }

  .grid-ld-5 {
    flex-basis: calc(41.66667% - 30px);
  }

  .grid-ld-6 {
    flex-basis: calc(50% - 30px);
  }

  .grid-ld-7 {
    flex-basis: calc(58.33333% - 30px);
  }

  .grid-ld-8 {
    flex-basis: calc(66.66667% - 30px);
  }

  .grid-ld-9 {
    flex-basis: calc(75% - 30px);
  }

  .grid-ld-10 {
    flex-basis: calc(83.33333% - 30px);
  }

  .grid-ld-11 {
    flex-basis: calc(91.66667% - 30px);
  }

  .grid-ld-12 {
    flex-basis: calc(100% - 30px);
  }
}

@media screen and (min-width: 1400px) {
  .grid-xld-1 {
    flex-basis: calc(8.33333% - 30px);
  }

  .grid-xld-2 {
    flex-basis: calc(16.66667% - 30px);
  }

  .grid-xld-3 {
    flex-basis: calc(25% - 30px);
  }

  .grid-xld-4 {
    flex-basis: calc(33.33333% - 30px);
  }

  .grid-xld-5 {
    flex-basis: calc(41.66667% - 30px);
  }

  .grid-xld-6 {
    flex-basis: calc(50% - 30px);
  }

  .grid-xld-7 {
    flex-basis: calc(58.33333% - 30px);
  }

  .grid-xld-8 {
    flex-basis: calc(66.66667% - 30px);
  }

  .grid-xld-9 {
    flex-basis: calc(75% - 30px);
  }

  .grid-xld-10 {
    flex-basis: calc(83.33333% - 30px);
  }

  .grid-xld-11 {
    flex-basis: calc(91.66667% - 30px);
  }

  .grid-xld-12 {
    flex-basis: calc(100% - 30px);
  }
}