/*Flex Column
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV
::m{n}
::
*/
:root {
  --container-width: 1280px;
  --page-container-width: 1140px;
}

html body .container {
  max-width: var(--container-width);
  margin: auto;
  padding: 0 15px;
}

html body .page-container {
  max-width: var(--page-container-width);
  margin: auto;
  padding: 0 15px;
}

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

/*Default Column*/
.col,
.col-1, .col-2, .col-2-4, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  -webkit-box-flex: 0;
  padding-left: 25px;
  padding-right: 25px;
  box-sizing: border-box;
}

.w1, .col1, .col-1 {
  -ms-flex: 0 0 8.333%;
  -webkit-box-flex: 0;
  flex: 0 0 8.333%;
  max-width: 8.333%;
}

.w2, .col2, .col-2 {
  -ms-flex: 0 0 16.666%;
  -webkit-box-flex: 0;
  flex: 0 0 16.666%;
  max-width: 16.666%;
}

.w2-4, .col2-4, .col-2-4 {
  -ms-flex: 0 0 20%;
  -webkit-box-flex: 0;
  flex: 0 0 20%;
  max-width: 20%;
}

.w3, .col3, .col-3 {
  -ms-flex: 0 0 25%;
  -webkit-box-flex: 0;
  flex: 0 0 25%;
  max-width: 25%;
}

.w4, .col4, .col-4 {
  -ms-flex: 0 0 33.333%;
  -webkit-box-flex: 0;
  flex: 0 0 33.333%;
  max-width: 33.333%;
}

.w5, .col5, .col-5 {
  -ms-flex: 0 0 41.6666%;
  -webkit-box-flex: 0;
  flex: 0 0 41.6666%;
  max-width: 41.6666%;
}

.w6, .col6, .col-6 {
  -ms-flex: 0 0 50%;
  -webkit-box-flex: 0;
  flex: 0 0 50%;
  max-width: 50%;
}

.w7, .col7, .col-7 {
  -ms-flex: 0 0 58.333%;
  -webkit-box-flex: 0;
  flex: 0 0 58.333%;
  max-width: 58.333%;
}

.w8, .col8, .col-8 {
  -ms-flex: 0 0 66.666%;
  -webkit-box-flex: 0;
  flex: 0 0 66.666%;
  max-width: 66.666%;
}

.w9, .col9, .col-9 {
  -ms-flex: 0 0 74.9999%;
  -webkit-box-flex: 0;
  flex: 0 0 74.999%;
  max-width: 74.999%;
}

.w10, .col10, .col-10 {
  -ms-flex: 0 0 83.3333%;
  -webkit-box-flex: 0;
  flex: 0 0 83.3333%;
  max-width: 83.3333%;
}

.w11, .col11, .col-11 {
  -ms-flex: 0 0 91.666%;
  -webkit-box-flex: 0;
  flex: 0 0 91.666%;
  max-width: 91.666%;
}

.w12, .col12, .col-12 {
  -ms-flex: 0 0 100%;
  -webkit-box-flex: 0;
  flex: 0 0 100%;
  max-width: 100%;
}

/*
@media only screen and (min-width:998px) {
  lg screen Or All screen size
  
}

@media only screen and (max-width:998px) {
  
}*/

@media only screen and (min-width:768px) {
  /*lg screen Or All screen size nire then 768 */
  .md-pl40 {
    padding-left: 40px;
  }
  
  .md-pl30 {
    padding-left: 30px;
  }
  
  .md-pl20 {
    padding-left: 20px;
  }
  
  .md-pl10 {
    padding-left: 10px;
  }
  
  /*margin right*/
  .md-pr40 {
    padding-right: 40px;
  }
  
  .md-pr30 {
    padding-right: 30px;
  }
  
  .md-pr20 {
    padding-right: 20px;
  }
  
  .md-pr10 {
    padding-right: 10px;
  }
}

@media only screen and (max-width:768px) {
  
  /*sm screen*/
  .col {
    -ms-flex: 0 0 100%;
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
  /*previous media screen transformation*/
  /*Current Media screen*/
  .t1 {
    -ms-flex: 0 0 8.333%;
    -webkit-box-flex: 0;
    flex: 0 0 8.333%;
    max-width: 8.333%;
  }
  
  .t2 {
    -ms-flex: 0 0 16.666%;
    -webkit-box-flex: 0;
    flex: 0 0 16.666%;
    max-width: 16.666%;
  }
  
  .t2-4 {
    -ms-flex: 0 0 20%;
    -webkit-box-flex: 0;
    flex: 0 0 20%;
    max-width: 20%;
  }
  
  .t3 {
    -ms-flex: 0 0 25%;
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    max-width: 25%;
  }
  
  .t4 {
    -ms-flex: 0 0 33.333%;
    -webkit-box-flex: 0;
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
  
  .t5 {
    -ms-flex: 0 0 41.6666%;
    -webkit-box-flex: 0;
    flex: 0 0 41.6666%;
    max-width: 41.6666%;
  }
  
  .t6 {
    -ms-flex: 0 0 50%;
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .t7 {
    -ms-flex: 0 0 58.333%;
    -webkit-box-flex: 0;
    flex: 0 0 58.333%;
    max-width: 58.333%;
  }
  
  .t8 {
    -ms-flex: 0 0 66.666%;
    -webkit-box-flex: 0;
    flex: 0 0 66.666%;
    max-width: 66.666%;
  }
  
  .t9 {
    -ms-flex: 0 0 74.9999%;
    -webkit-box-flex: 0;
    flex: 0 0 74.999%;
    max-width: 74.999%;
  }
  
  .t10 {
    -ms-flex: 0 0 83.3333%;
    -webkit-box-flex: 0;
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  
  .t11 {
    -ms-flex: 0 0 91.666%;
    -webkit-box-flex: 0;
    flex: 0 0 91.666%;
    max-width: 91.666%;
  }
  
  .t12 {
    -ms-flex: 0 0 100%;
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media only screen and (max-width:480px) {
  /*Xs screen*/
  .col,
  .col-1,
  .col-2,
  .col-2-4,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    -ms-flex: 0 0 100%;
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
  /*previous media screen transformation*/
  /*Current Media screen*/
  .m1 {
    -ms-flex: 0 0 8.333%;
    -webkit-box-flex: 0;
    flex: 0 0 8.333%;
    max-width: 8.333%;
  }
  
  .m2 {
    -ms-flex: 0 0 16.666%;
    -webkit-box-flex: 0;
    flex: 0 0 16.666%;
    max-width: 16.666%;
  }
  
  .m2-4 {
    -ms-flex: 0 0 20%;
    -webkit-box-flex: 0;
    flex: 0 0 20%;
    max-width: 20%;
  }
  
  .m3 {
    -ms-flex: 0 0 25%;
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    max-width: 25%;
  }
  
  .m4 {
    -ms-flex: 0 0 33.333%;
    -webkit-box-flex: 0;
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
  
  .m5 {
    -ms-flex: 0 0 41.6666%;
    -webkit-box-flex: 0;
    flex: 0 0 41.6666%;
    max-width: 41.6666%;
  }
  
  .m6 {
    -ms-flex: 0 0 50%;
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .m7 {
    -ms-flex: 0 0 58.333%;
    -webkit-box-flex: 0;
    flex: 0 0 58.333%;
    max-width: 58.333%;
  }
  
  .m8 {
    -ms-flex: 0 0 66.666%;
    -webkit-box-flex: 0;
    flex: 0 0 66.666%;
    max-width: 66.666%;
  }
  
  .m9 {
    -ms-flex: 0 0 74.9999%;
    -webkit-box-flex: 0;
    flex: 0 0 74.999%;
    max-width: 74.999%;
  }
  
  .m10 {
    -ms-flex: 0 0 83.3333%;
    -webkit-box-flex: 0;
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  
  .m11 {
    -ms-flex: 0 0 91.666%;
    -webkit-box-flex: 0;
    flex: 0 0 91.666%;
    max-width: 91.666%;
  }
  
  .m12 {
    -ms-flex: 0 0 100%;
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media only screen and (max-width:320px) {
  /*below Xs screen*/
  
  body .col,
  body .col-1, body .col-2,
  body .col-2-4,
  body .col-3,
  body .col-4,
  body .col-5,
  body .col-6,
  body .col-7,
  body .col-8,
  body .col-9,
  body .col-10,
  body .col-11,
  body .col-12 {
    -ms-flex: 0 0 100%;
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.col-grow {
  flex-grow: 1;
  max-width: 100%;
}

.row.col-rev {
  flex-direction: row-reverse;
}