.container,
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -7.5px;
  margin-left: -7.5px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
.col-auto{
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: none;
  width: auto;
}
.col-mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.col-ml-auto{
  margin-left: auto;
}
.col-mr-auto{
  margin-right :auto;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto {
  position: relative;
  width: 100%;
  padding-right: 7.5px;
  padding-left: 7.5px;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.row-cols-1 > * {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.row-cols-2 > * {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.row-cols-3 > * {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.row-cols-4 > * {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.row-cols-5 > * {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.row-cols-6 > * {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.d-none {
  display: none !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
  width: 100%;
}

.griditem{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 15px;
}
.griditem.col1{
  grid-template-columns: repeat(1, 1fr);
}
.griditem.col2{
  grid-template-columns: repeat(2, 1fr);
}
.griditem.col3{
  grid-template-columns: repeat(3, 1fr);
}
.griditem.col4{
  grid-template-columns: repeat(4, 1fr);
}
.griditem.col5{
  grid-template-columns: repeat(5, 1fr);
}
.griditem.col6{
  grid-template-columns: repeat(6, 1fr);
}


@media (max-width: 992px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-md-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-md-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-md-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-md-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-md-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-md-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .d-md-none {
    display: none !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }


  .griditem.colmd1{
    grid-template-columns: repeat(1, 1fr);
  }
  .griditem.colmd2{
    grid-template-columns: repeat(2, 1fr);
  }
  .griditem.colmd3{
    grid-template-columns: repeat(3, 1fr);
  }
  .griditem.colmd4{
    grid-template-columns: repeat(4, 1fr);
  }
  .griditem.colmd5{
    grid-template-columns: repeat(5, 1fr);
  }
  .griditem.colmd6{
    grid-template-columns: repeat(6, 1fr);
  }


}

@media (max-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-sm-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-sm-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-sm-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-sm-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-sm-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-sm-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .d-sm-none {
    display: none !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }

  .griditem.colsm1{
    grid-template-columns: repeat(1, 1fr);
  }
  .griditem.colsm2{
    grid-template-columns: repeat(2, 1fr);
  }
  .griditem.colsm3{
    grid-template-columns: repeat(3, 1fr);
  }
  .griditem.colsm4{
    grid-template-columns: repeat(4, 1fr);
  }
  .griditem.colsm5{
    grid-template-columns: repeat(5, 1fr);
  }
  .griditem.colsm6{
    grid-template-columns: repeat(6, 1fr);
  }


}





.m-0 {margin: 0 !important;}
.mt-0, .my-0 {margin-top: 0 !important;}
.mr-0, .mx-0 {margin-right: 0 !important;}
.mb-0, .my-0 {margin-bottom: 0 !important;}
.ml-0, .mx-0 {margin-left: 0 !important;}

.m-1 {margin: 15px !important;}
.mt-1, .my-1 {margin-top: 15px !important;}
.mr-1, .mx-1 {margin-right: 15px !important;}
.mb-1, .my-1 {margin-bottom: 15px !important;}
.ml-1, .mx-1 {margin-left: 15px !important;}

.m-2 {margin: 30px !important;}
.mt-2, .my-2 {margin-top: 30px !important;}
.mr-2, .mx-2 {margin-right: 30px !important;}
.mb-2, .my-2 {margin-bottom: 30px !important;}
.ml-2, .mx-2 {margin-left: 30px !important;}

.m-n1 {margin: -15px !important;}
.mt-n1,.my-n1 {margin-top: -15px !important;}
.mr-n1,.mx-n1 {margin-right: -15px !important;}
.mb-n1,.my-n1 {margin-bottom: -15px !important;}
.ml-n1,.mx-n1 {margin-left: -15px !important;}

.m-n2 {margin: -30px !important;}
.mt-n2,.my-n2 {margin-top: -30px !important;}
.mr-n2,.mx-n2 {margin-right: -30px !important;}
.mb-n2,.my-n2 {margin-bottom: -30px !important;}
.ml-n2,.mx-n2 {margin-left: -30px !important;}


.p-0 {padding: 0 !important;}
.pt-0, .py-0 {padding-top: 0 !important;}
.pr-0, .px-0 {padding-right: 0 !important;}
.pb-0, .py-0 {padding-bottom: 0 !important;}
.pl-0, .px-0 {padding-left: 0 !important;}

.p-1 {padding: 15px !important;}
.pt-1, .py-1 {padding-top: 15px !important;}
.pr-1, .px-1 {padding-right: 15px !important;}
.pb-1, .py-1 {padding-bottom: 15px !important;}
.pl-1, .px-1 {padding-left: 15px !important;}

.p-2 {padding: 30px !important;}
.pt-2, .py-2 {padding-top: 30px !important;}
.pr-2, .px-2 {padding-right: 30px !important;}
.pb-2, .py-2 {padding-bottom: 30px !important;}
.pl-2, .px-2 {padding-left: 30px !important;}


@media (max-width: 768px) {
  .m-md-0 {margin: 0 !important;}
  .mt-md-0, .my-md-0 {margin-top: 0 !important;}
  .mr-md-0, .mx-md-0 {margin-right: 0 !important;}
  .mb-md-0, .my-md-0 {margin-bottom: 0 !important;}
  .ml-md-0, .mx-md-0 {margin-left: 0 !important;}

  .m-md-1 {margin: 15px !important;}
  .mt-md-1, .my-md-1 {margin-top: 15px !important;}
  .mr-md-1, .mx-md-1 {margin-right: 15px !important;}
  .mb-md-1, .my-md-1 {margin-bottom: 15px !important;}
  .ml-md-1, .mx-md-1 {margin-left: 15px !important;}

  .m-md-2 {margin: 30px !important;}
  .mt-md-2, .my-md-2 {margin-top: 30px !important;}
  .mr-md-2, .mx-md-2 {margin-right: 30px !important;}
  .mb-md-2, .my-md-2 {margin-bottom: 30px !important;}
  .ml-md-2, .mx-md-2 {margin-left: 30px !important;}


  .m-md-n1 {margin: -15px !important;}
  .mt-md-n1, .my-md-n1 {margin-top: -15px !important;}
  .mr-md-n1, .mx-md-n1 {margin-right: -15px !important;}
  .mb-md-n1, .my-md-n1 {margin-bottom: -15px !important;}
  .ml-md-n1, .mx-md-n1 {margin-left: -15px !important;}

  .m-md-n2 {margin: -30px !important;}
  .mt-md-n2,.my-md-n2 {margin-top: -30px !important;}
  .mr-md-n2, .mx-md-n2 {margin-right: -30px !important;}
  .mb-md-n2, .my-md-n2 {margin-bottom: -30px !important;}
  .ml-md-n2, .mx-md-n2 {margin-left: -30px !important;}


  .p-md-0 {padding: 0 !important;}
  .pt-md-0, .py-md-0 {padding-top: 0 !important;}
  .pr-md-0, .px-md-0 {padding-right: 0 !important;}
  .pb-md-0, .py-md-0 {padding-bottom: 0 !important;}
  .pl-md-0, .px-md-0 {padding-left: 0 !important;}

  .p-md-1 {padding: 15px !important;}
  .pt-md-1, .py-md-1 {padding-top: 15px !important;}
  .pr-md-1, .px-md-1 {padding-right: 15px !important;}
  .pb-md-1, .py-md-1 {padding-bottom: 15px !important;}
  .pl-md-1, .px-md-1 {padding-left: 15px !important;}

  .p-md-2 {padding: 30px !important;}
  .pt-md-2, .py-md-2 {padding-top: 30px !important;}
  .pr-md-2, .px-md-2 {padding-right: 30px !important;}
  .pb-md-2, .py-md-2 {padding-bottom: 30px !important;}
  .pl-md-2, .px-md-2 {padding-left: 30px !important;}
}

@media (max-width: 576px) {
  .m-sm-0 {margin: 0 !important;}
  .mt-sm-0, .my-sm-0 {margin-top: 0 !important;}
  .mr-sm-0, .mx-sm-0 {margin-right: 0 !important;}
  .mb-sm-0, .my-sm-0 {margin-bottom: 0 !important;}
  .ml-sm-0, .mx-sm-0 {margin-left: 0 !important;}

  .m-sm-1 {margin: 15px !important;}
  .mt-sm-1, .my-sm-1 {margin-top: 15px !important;}
  .mr-sm-1, .mx-sm-1 {margin-right: 15px !important;}
  .mb-sm-1, .my-sm-1 {margin-bottom: 15px !important;}
  .ml-sm-1, .mx-sm-1 {margin-left: 15px !important;}

  .m-sm-2 {margin: 30px !important;}
  .mt-sm-2, .my-sm-2 {margin-top: 30px !important;}
  .mr-sm-2, .mx-sm-2 {margin-right: 30px !important;}
  .mb-sm-2, .my-sm-2 {margin-bottom: 30px !important;}
  .ml-sm-2, .mx-sm-2 {margin-left: 30px !important;}


  .m-sm-n1 {margin: -15px !important;}
  .mt-sm-n1, .my-sm-n1 {margin-top: -15px !important;}
  .mr-sm-n1, .mx-sm-n1 {margin-right: -15px !important;}
  .mb-sm-n1, .my-sm-n1 {margin-bottom: -15px !important;}
  .ml-sm-n1, .mx-sm-n1 {margin-left: -15px !important;}

  .m-sm-n2 {margin: -30px !important;}
  .mt-sm-n2,.my-sm-n2 {margin-top: -30px !important;}
  .mr-sm-n2, .mx-sm-n2 {margin-right: -30px !important;}
  .mb-sm-n2, .my-sm-n2 {margin-bottom: -30px !important;}
  .ml-sm-n2, .mx-sm-n2 {margin-left: -30px !important;}


  .p-sm-0 {padding: 0 !important;}
  .pt-sm-0, .py-sm-0 {padding-top: 0 !important;}
  .pr-sm-0, .px-sm-0 {padding-right: 0 !important;}
  .pb-sm-0, .py-sm-0 {padding-bottom: 0 !important;}
  .pl-sm-0, .px-sm-0 {padding-left: 0 !important;}

  .p-sm-1 {padding: 15px !important;}
  .pt-sm-1, .py-sm-1 {padding-top: 15px !important;}
  .pr-sm-1, .px-sm-1 {padding-right: 15px !important;}
  .pb-sm-1, .py-sm-1 {padding-bottom: 15px !important;}
  .pl-sm-1, .px-sm-1 {padding-left: 15px !important;}

  .p-sm-2 {padding: 30px !important;}
  .pt-sm-2, .py-sm-2 {padding-top: 30px !important;}
  .pr-sm-2, .px-sm-2 {padding-right: 30px !important;}
  .pb-sm-2, .py-sm-2 {padding-bottom: 30px !important;}
  .pl-sm-2, .px-sm-2 {padding-left: 30px !important;}
}