responsive-flex.html

<link rel="import" href="../polymer/polymer.html">
<dom-module id="responsive-flex">
  <template>
    <style is="custom-style">
       :host {
        display: block;
        --var-sm-min: 0px;
        --var-sm-max: 421px;
        --var-md-min: 422px;
        --var-md-max: 769px;
        --var-lg-min: 770px;
        --var-lg-max: 1224px;
        --var-xl-min: 1225px;
        --var-xl-max: 1824px;
      }
      /** Container Start **/

      .transition-width { 
          transition: width 10s ease-out; 
          webkit-transition: width 10s ease-out; 
      }

      .container {
        max-width: 80%;
        margin: 0 auto;
      }

      .container-left {
        margin-left: 15%;
        margin-right: 5%;
      }

      .container-right {
        margin-left: 5%;
        margin-right: 15%;
      }
      /*WIDTH MODIFIER*/

      .container.width-50 {
        max-width: 50%;
      }

      .container.width-60 {
        max-width: 60%;
      }

      .container.width-70 {
        max-width: 70%;
      }

      .container.width-80 {
        max-width: 80%;
      }

      .container.width-90 {
        max-width: 90%;
      }

      .container.width-100 {
        max-width: 100%;
      }
      /** Container End **/

      .row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .stack {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
      }

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

      .stack.reverse {
        flex-direction: column-reverse;
      }

      .space-start {
        justify-content: flex-start;
      }

      .space-end {
        justify-content: flex-end;
      }

      .space-center {
        justify-content: center;
      }

      .space-between {
        justify-content: space-between;
      }

      .space-around {
        justify-content: space-around;
      }

      .row .offset-1 {
        margin-left: calc(100%/12);
      }

      .row .offset-2 {
        margin-left: calc(100%/6);
      }

      .row .offset-3 {
        margin-left: calc(100%/4);
      }

      .row .offset-4 {
        margin-left: calc(100%/3);
      }

      .row .offset-5 {
        margin-left: calc(calc(100%/3) + calc(100%/12));
      }

      .row .offset-6 {
        margin-left: calc(100%/2);
      }

      .row .offset-7 {
        margin-left: calc(calc(100%/2) + calc(100%/12));
      }

      .row .offset-8 {
        margin-left: calc(100% - calc(100%/3));
      }

      .row .offset-9 {
        margin-left: calc(100% - calc(100%/4));
      }

      .row .offset-10 {
        margin-left: calc(100% - calc(100%/6));
      }

      .row .offset-11 {
        margin-left: calc(100% - calc(100%/12));
      }

      .row .offset-right {
        margin-left: auto;
      }

      .row.reverse .offset-1 {
        margin-right: calc(100%/12);
      }

      .row.reverse .offset-2 {
        margin-right: calc(100%/6);
      }

      .row.reverse .offset-3 {
        margin-right: calc(100%/4);
      }

      .row.reverse .offset-4 {
        margin-right: calc(100%/3);
      }

      .row.reverse .offset-5 {
        margin-right: calc(calc(100%/3) + calc(100%/12));
      }

      .row.reverse .offset-6 {
        margin-right: calc(100%/2);
      }

      .row.reverse .offset-7 {
        margin-right: calc(calc(100%/2) + calc(100%/12));
      }

      .row.reverse .offset-8 {
        margin-right: calc(100% - calc(100%/3));
      }

      .row.reverse .offset-9 {
        margin-right: calc(100% - calc(100%/4));
      }

      .row.reverse .offset-10 {
        margin-right: calc(100% - calc(100%/6));
      }

      .row.reverse .offset-11 {
        margin-right: calc(100% - calc(100%/12));
      }

      .row.reverse .offset-right {
        margin-right: auto;
      }

      .stack .offset-1 {
        margin-top: calc(100%/12);
      }

      .stack .offset-2 {
        margin-top: calc(100%/6);
      }

      .stack .offset-3 {
        margin-top: calc(100%/4);
      }

      .stack .offset-4 {
        margin-top: calc(100%/3);
      }

      .stack .offset-5 {
        margin-top: calc(calc(100%/3) + calc(100%/12));
      }

      .stack .offset-6 {
        margin-top: calc(100%/2);
      }

      .stack .offset-7 {
        margin-top: calc(calc(100%/2) + calc(100%/12));
      }

      .stack .offset-8 {
        margin-top: calc(100% - calc(100%/3));
      }

      .stack .offset-9 {
        margin-top: calc(100% - calc(100%/4));
      }

      .stack .offset-10 {
        margin-top: calc(100% - calc(100%/6));
      }

      .stack .offset-11 {
        margin-top: calc(100% - calc(100%/12));
      }

      .stack .offset-right {
        margin-top: auto;
      }

      .stack.reverse .offset-1 {
        margin-bottom: calc(100%/12);
      }

      .stack.reverse .offset-2 {
        margin-bottom: calc(100%/6);
      }

      .stack.reverse .offset-3 {
        margin-bottom: calc(100%/4);
      }

      .stack.reverse .offset-4 {
        margin-bottom: calc(100%/3);
      }

      .stack.reverse .offset-5 {
        margin-bottom: calc(calc(100%/3) + calc(100%/12));
      }

      .stack.reverse .offset-6 {
        margin-bottom: calc(100%/2);
      }

      .stack.reverse .offset-7 {
        margin-bottom: calc(calc(100%/2) + calc(100%/12));
      }

      .stack.reverse .offset-8 {
        margin-bottom: calc(100% - calc(100%/3));
      }

      .stack.reverse .offset-9 {
        margin-bottom: calc(100% - calc(100%/4));
      }

      .stack.reverse .offset-10 {
        margin-bottom: calc(100% - calc(100%/6));
      }

      .stack.reverse .offset-11 {
        margin-bottom: calc(100% - calc(100%/12));
      }

      .stack.reverse .offset-right {
        margin-bottom: auto;
      }

      .padded-50 {
        padding: 0 50px;
      }

      .padded-40 {
        padding: 0 40px;
      }

      .padded-30 {
        padding: 0 30px;
      }

      .padded-20 {
        padding: 0 20px;
      }

      .padded-10 {
        padding: 0 10px;
      }

      .padded-50.gutter {
        padding: 0 25px;
        margin: 0 25px;
      }

      .padded-40.gutter {
        padding: 0 20px;
        margin: 0 20px;
      }

      .padded-30.gutter {
        padding: 0 15px;
        margin: 0 15px;
      }

      .padded-20.gutter {
        padding: 0 10px;
        margin: 0 10px;
      }

      .padded-10.gutter {
        padding: 0 5px;
        margin: 0 5px;
      }
      /*For All*/

      @media(min-width: 0px) {
        /** Small Section **/
        .responsive-sm-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }

        .responsive-sm-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }

        .responsive-sm-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }

        .responsive-sm-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }

        .responsive-sm-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }

        .responsive-sm-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }

        .responsive-sm-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }

        .responsive-sm-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }

        .responsive-sm-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }

        .responsive-sm-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }

        .responsive-sm-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }

        .responsive-sm-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }

        /** Small Section End **/
        /** Medium Section **/
        .responsive-md-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }

        .responsive-md-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }

        .responsive-md-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }

        .responsive-md-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }

        .responsive-md-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }

        .responsive-md-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }

        .responsive-md-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }

        .responsive-md-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }

        .responsive-md-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }

        .responsive-md-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }

        .responsive-md-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }

        .responsive-md-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }
        /** Medium Section End **/
        /** Large Section **/
        .responsive-lg-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }

        .responsive-lg-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }

        .responsive-lg-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }

        .responsive-lg-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }

        .responsive-lg-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }

        .responsive-lg-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }

        .responsive-lg-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }

        .responsive-lg-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }

        .responsive-lg-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }

        .responsive-lg-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }

        .responsive-lg-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }

        .responsive-lg-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }
        /** Large Section End **/
        /** Extra Large Section **/
        .responsive-xl-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }

        .responsive-xl-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }

        .responsive-xl-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }

        .responsive-xl-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }

        .responsive-xl-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }

        .responsive-xl-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }

        .responsive-xl-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }

        .responsive-xl-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }

        .responsive-xl-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }

        .responsive-xl-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }

        .responsive-xl-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }

        .responsive-xl-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }
        /** Extra Large Section End **/
      }

      @media (min-width: 0px) and (max-width: 420px) {
        .container {
          max-width: 98%;
          margin: 0 auto;
        }

        /*.container-left {
          margin-left: 5%;
          margin-right: 5%;
        }

        .container-right {
          margin-left: 5%;
          margin-right: 5%;
        }*/

        /** Extra Large Section **/
        .responsive-xl-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }

        .responsive-xl-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }

        .responsive-xl-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }

        .responsive-xl-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }

        .responsive-xl-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }

        .responsive-xl-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }

        .responsive-xl-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }

        .responsive-xl-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }

        .responsive-xl-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }

        .responsive-xl-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }

        .responsive-xl-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }

        .responsive-xl-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }

        .row .offset-xl-1 {
          margin-left: calc(100%/12);
        }

        .row .offset-xl-2 {
          margin-left: calc(100%/6);
        }

        .row .offset-xl-3 {
          margin-left: calc(100%/4);
        }

        .row .offset-xl-4 {
          margin-left: calc(100%/3);
        }

        .row .offset-xl-5 {
          margin-left: calc(calc(100%/3) + calc(100%/12));
        }

        .row .offset-xl-6 {
          margin-left: calc(100%/2);
        }

        .row .offset-xl-7 {
          margin-left: calc(calc(100%/2) + calc(100%/12));
        }

        .row .offset-xl-8 {
          margin-left: calc(100% - calc(100%/3));
        }

        .row .offset-xl-9 {
          margin-left: calc(100% - calc(100%/4));
        }

        .row .offset-xl-10 {
          margin-left: calc(100% - calc(100%/6));
        }

        .row .offset-xl-11 {
          margin-left: calc(100% - calc(100%/12));
        }

        /** Extra Large Section End **/
        /** Large Section **/
        .responsive-lg-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }

        .responsive-lg-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }

        .responsive-lg-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }

        .responsive-lg-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }

        .responsive-lg-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }

        .responsive-lg-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }

        .responsive-lg-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }

        .responsive-lg-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }

        .responsive-lg-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }

        .responsive-lg-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }

        .responsive-lg-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }

        .responsive-lg-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }

        .row .offset-lg-1 {
          margin-left: calc(100%/12);
        }

        .row .offset-lg-2 {
          margin-left: calc(100%/6);
        }

        .row .offset-lg-3 {
          margin-left: calc(100%/4);
        }

        .row .offset-lg-4 {
          margin-left: calc(100%/3);
        }

        .row .offset-lg-5 {
          margin-left: calc(calc(100%/3) + calc(100%/12));
        }

        .row .offset-lg-6 {
          margin-left: calc(100%/2);
        }

        .row .offset-lg-7 {
          margin-left: calc(calc(100%/2) + calc(100%/12));
        }

        .row .offset-lg-8 {
          margin-left: calc(100% - calc(100%/3));
        }

        .row .offset-lg-9 {
          margin-left: calc(100% - calc(100%/4));
        }

        .row .offset-lg-10 {
          margin-left: calc(100% - calc(100%/6));
        }

        .row .offset-lg-11 {
          margin-left: calc(100% - calc(100%/12));
        }

        /** Large Section End **/
        /** Medium Section **/
        .responsive-md-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }

        .responsive-md-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }

        .responsive-md-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }

        .responsive-md-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }

        .responsive-md-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }

        .responsive-md-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }

        .responsive-md-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }

        .responsive-md-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }

        .responsive-md-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }

        .responsive-md-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }

        .responsive-md-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }

        .responsive-md-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }

        .row .offset-md-1 {
          margin-left: calc(100%/12);
        }

        .row .offset-md-2 {
          margin-left: calc(100%/6);
        }

        .row .offset-md-3 {
          margin-left: calc(100%/4);
        }

        .row .offset-md-4 {
          margin-left: calc(100%/3);
        }

        .row .offset-md-5 {
          margin-left: calc(calc(100%/3) + calc(100%/12));
        }

        .row .offset-md-6 {
          margin-left: calc(100%/2);
        }

        .row .offset-md-7 {
          margin-left: calc(calc(100%/2) + calc(100%/12));
        }

        .row .offset-md-8 {
          margin-left: calc(100% - calc(100%/3));
        }

        .row .offset-md-9 {
          margin-left: calc(100% - calc(100%/4));
        }

        .row .offset-md-10 {
          margin-left: calc(100% - calc(100%/6));
        }

        .row .offset-md-11 {
          margin-left: calc(100% - calc(100%/12));
        }

        /** Medium Section End **/
        /** Small Section **/
        .responsive-sm-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }

        .responsive-sm-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }

        .responsive-sm-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }

        .responsive-sm-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }

        .responsive-sm-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }

        .responsive-sm-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }

        .responsive-sm-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }

        .responsive-sm-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }

        .responsive-sm-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }

        .responsive-sm-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }

        .responsive-sm-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }

        .responsive-sm-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }

        /** Small Section End **/
        .row .offset-sm-1 {
          margin-left: calc(100%/12);
        }

        .row .offset-sm-2 {
          margin-left: calc(100%/6);
        }

        .row .offset-sm-3 {
          margin-left: calc(100%/4);
        }

        .row .offset-sm-4 {
          margin-left: calc(100%/3);
        }

        .row .offset-sm-5 {
          margin-left: calc(calc(100%/3) + calc(100%/12));
        }

        .row .offset-sm-6 {
          margin-left: calc(100%/2);
        }

        .row .offset-sm-7 {
          margin-left: calc(calc(100%/2) + calc(100%/12));
        }

        .row .offset-sm-8 {
          margin-left: calc(100% - calc(100%/3));
        }

        .row .offset-sm-9 {
          margin-left: calc(100% - calc(100%/4));
        }

        .row .offset-sm-10 {
          margin-left: calc(100% - calc(100%/6));
        }

        .row .offset-sm-11 {
          margin-left: calc(100% - calc(100%/12));
        }

        .hidden-sm{
          display: none;
        }
      }
      /*For Medium (Tab Portrait / Lanscape)*/

      @media (min-width: 421px) and (max-width: 768px) {
        .container {
          max-width: 95%;
          margin: 0 auto;
        }

        /** Extra Large Section **/
        .responsive-xl-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }
        .responsive-xl-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }
        .responsive-xl-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }
        .responsive-xl-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }
        .responsive-xl-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }
        .responsive-xl-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }
        .responsive-xl-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }
        .responsive-xl-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }
        .responsive-xl-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }
        .responsive-xl-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }
        .responsive-xl-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }
        .responsive-xl-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }

        .row .offset-xl-1 {
          margin-left: calc(100%/12);
        }

        .row .offset-xl-2 {
          margin-left: calc(100%/6);
        }

        .row .offset-xl-3 {
          margin-left: calc(100%/4);
        }

        .row .offset-xl-4 {
          margin-left: calc(100%/3);
        }

        .row .offset-xl-5 {
          margin-left: calc(calc(100%/3) + calc(100%/12));
        }

        .row .offset-xl-6 {
          margin-left: calc(100%/2);
        }

        .row .offset-xl-7 {
          margin-left: calc(calc(100%/2) + calc(100%/12));
        }

        .row .offset-xl-8 {
          margin-left: calc(100% - calc(100%/3));
        }

        .row .offset-xl-9 {
          margin-left: calc(100% - calc(100%/4));
        }

        .row .offset-xl-10 {
          margin-left: calc(100% - calc(100%/6));
        }

        .row .offset-xl-11 {
          margin-left: calc(100% - calc(100%/12));
        }
        /** Extra Large Section End **/
        /** Large Section **/
        .responsive-lg-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }
        .responsive-lg-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }
        .responsive-lg-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }
        .responsive-lg-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }
        .responsive-lg-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }
        .responsive-lg-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }
        .responsive-lg-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }
        .responsive-lg-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }
        .responsive-lg-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }
        .responsive-lg-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }
        .responsive-lg-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }
        .responsive-lg-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }

        .row .offset-lg-1 {
          margin-left: calc(100%/12);
        }

        .row .offset-lg-2 {
          margin-left: calc(100%/6);
        }

        .row .offset-lg-3 {
          margin-left: calc(100%/4);
        }

        .row .offset-lg-4 {
          margin-left: calc(100%/3);
        }

        .row .offset-lg-5 {
          margin-left: calc(calc(100%/3) + calc(100%/12));
        }

        .row .offset-lg-6 {
          margin-left: calc(100%/2);
        }

        .row .offset-lg-7 {
          margin-left: calc(calc(100%/2) + calc(100%/12));
        }

        .row .offset-lg-8 {
          margin-left: calc(100% - calc(100%/3));
        }

        .row .offset-lg-9 {
          margin-left: calc(100% - calc(100%/4));
        }

        .row .offset-lg-10 {
          margin-left: calc(100% - calc(100%/6));
        }

        .row .offset-lg-11 {
          margin-left: calc(100% - calc(100%/12));
        }
        /** Large Section End **/
 
        /** Small Section **/
        .responsive-sm-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }

        .responsive-sm-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }

        .responsive-sm-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }

        .responsive-sm-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }

        .responsive-sm-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }

        .responsive-sm-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }

        .responsive-sm-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }

        .responsive-sm-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }

        .responsive-sm-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }

        .responsive-sm-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }

        .responsive-sm-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }

        .responsive-sm-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }

        .row .offset-sm-1 {
          margin-left: calc(100%/12);
        }

        .row .offset-sm-2 {
          margin-left: calc(100%/6);
        }

        .row .offset-sm-3 {
          margin-left: calc(100%/4);
        }

        .row .offset-sm-4 {
          margin-left: calc(100%/3);
        }

        .row .offset-sm-5 {
          margin-left: calc(calc(100%/3) + calc(100%/12));
        }

        .row .offset-sm-6 {
          margin-left: calc(100%/2);
        }

        .row .offset-sm-7 {
          margin-left: calc(calc(100%/2) + calc(100%/12));
        }

        .row .offset-sm-8 {
          margin-left: calc(100% - calc(100%/3));
        }

        .row .offset-sm-9 {
          margin-left: calc(100% - calc(100%/4));
        }

        .row .offset-sm-10 {
          margin-left: calc(100% - calc(100%/6));
        }

        .row .offset-sm-11 {
          margin-left: calc(100% - calc(100%/12));
        }
        /** Small Section End **/

       /** Medium Section **/
        .responsive-md-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }
        .responsive-md-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }
        .responsive-md-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }
        .responsive-md-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }
        .responsive-md-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }
        .responsive-md-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }
        .responsive-md-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }
        .responsive-md-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }
        .responsive-md-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }
        .responsive-md-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }
        .responsive-md-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }
        .responsive-md-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }

        .row .offset-md-1 {
          margin-left: calc(100%/12);
        }

        .row .offset-md-2 {
          margin-left: calc(100%/6);
        }

        .row .offset-md-3 {
          margin-left: calc(100%/4);
        }

        .row .offset-md-4 {
          margin-left: calc(100%/3);
        }

        .row .offset-md-5 {
          margin-left: calc(calc(100%/3) + calc(100%/12));
        }

        .row .offset-md-6 {
          margin-left: calc(100%/2);
        }

        .row .offset-md-7 {
          margin-left: calc(calc(100%/2) + calc(100%/12));
        }

        .row .offset-md-8 {
          margin-left: calc(100% - calc(100%/3));
        }

        .row .offset-md-9 {
          margin-left: calc(100% - calc(100%/4));
        }

        .row .offset-md-10 {
          margin-left: calc(100% - calc(100%/6));
        }

        .row .offset-md-11 {
          margin-left: calc(100% - calc(100%/12));
        }
        /** Medium Section End **/

        .hidden-md {
          display: none;
        }
      }
      /*For Large (PC / ~Notebook 14 inch)*/

      @media (min-width: 769px) and (max-width:1224px) {
        .container {
          max-width: 90%;
          margin: 0 auto;
        }

        /** Extra Large Section **/
        .responsive-xl-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }
        .responsive-xl-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }
        .responsive-xl-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }
        .responsive-xl-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }
        .responsive-xl-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }
        .responsive-xl-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }
        .responsive-xl-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }
        .responsive-xl-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }
        .responsive-xl-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }
        .responsive-xl-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }
        .responsive-xl-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }
        .responsive-xl-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }

        .row .offset-xl-1 {
          margin-left: calc(100%/12);
        }

        .row .offset-xl-2 {
          margin-left: calc(100%/6);
        }

        .row .offset-xl-3 {
          margin-left: calc(100%/4);
        }

        .row .offset-xl-4 {
          margin-left: calc(100%/3);
        }

        .row .offset-xl-5 {
          margin-left: calc(calc(100%/3) + calc(100%/12));
        }

        .row .offset-xl-6 {
          margin-left: calc(100%/2);
        }

        .row .offset-xl-7 {
          margin-left: calc(calc(100%/2) + calc(100%/12));
        }

        .row .offset-xl-8 {
          margin-left: calc(100% - calc(100%/3));
        }

        .row .offset-xl-9 {
          margin-left: calc(100% - calc(100%/4));
        }

        .row .offset-xl-10 {
          margin-left: calc(100% - calc(100%/6));
        }

        .row .offset-xl-11 {
          margin-left: calc(100% - calc(100%/12));
        }

        /** Extra Large Section End **/

        /** Medium Section **/
        .responsive-md-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }
        .responsive-md-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }
        .responsive-md-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }
        .responsive-md-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }
        .responsive-md-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }
        .responsive-md-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }
        .responsive-md-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }
        .responsive-md-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }
        .responsive-md-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }
        .responsive-md-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }
        .responsive-md-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }
        .responsive-md-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }

        /** Large Section End **/
        .row .offset-md-1 {
          margin-left: calc(100%/12);
        }

        .row .offset-md-2 {
          margin-left: calc(100%/6);
        }

        .row .offset-md-3 {
          margin-left: calc(100%/4);
        }

        .row .offset-md-4 {
          margin-left: calc(100%/3);
        }

        .row .offset-md-5 {
          margin-left: calc(calc(100%/3) + calc(100%/12));
        }

        .row .offset-md-6 {
          margin-left: calc(100%/2);
        }

        .row .offset-md-7 {
          margin-left: calc(calc(100%/2) + calc(100%/12));
        }

        .row .offset-md-8 {
          margin-left: calc(100% - calc(100%/3));
        }

        .row .offset-md-9 {
          margin-left: calc(100% - calc(100%/4));
        }

        .row .offset-md-10 {
          margin-left: calc(100% - calc(100%/6));
        }

        .row .offset-md-11 {
          margin-left: calc(100% - calc(100%/12));
        }

        /** Medium Section End **/
        /** Small Section **/
        .responsive-sm-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }

        .responsive-sm-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }

        .responsive-sm-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }

        .responsive-sm-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }

        .responsive-sm-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }

        .responsive-sm-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }

        .responsive-sm-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }

        .responsive-sm-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }

        .responsive-sm-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }

        .responsive-sm-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }

        .responsive-sm-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }

        .responsive-sm-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }

        /** Large Section End **/
        .row .offset-sm-1 {
          margin-left: calc(100%/12);
        }

        .row .offset-sm-2 {
          margin-left: calc(100%/6);
        }

        .row .offset-sm-3 {
          margin-left: calc(100%/4);
        }

        .row .offset-sm-4 {
          margin-left: calc(100%/3);
        }

        .row .offset-sm-5 {
          margin-left: calc(calc(100%/3) + calc(100%/12));
        }

        .row .offset-sm-6 {
          margin-left: calc(100%/2);
        }

        .row .offset-sm-7 {
          margin-left: calc(calc(100%/2) + calc(100%/12));
        }

        .row .offset-sm-8 {
          margin-left: calc(100% - calc(100%/3));
        }

        .row .offset-sm-9 {
          margin-left: calc(100% - calc(100%/4));
        }

        .row .offset-sm-10 {
          margin-left: calc(100% - calc(100%/6));
        }

        .row .offset-sm-11 {
          margin-left: calc(100% - calc(100%/12));
        }

        /** Small Section End **/


       /** Large Section **/
        .responsive-lg-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }
        .responsive-lg-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }
        .responsive-lg-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }
        .responsive-lg-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }
        .responsive-lg-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }
        .responsive-lg-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }
        .responsive-lg-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }
        .responsive-lg-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }
        .responsive-lg-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }
        .responsive-lg-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }
        .responsive-lg-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }
        .responsive-lg-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }
        /** Large Section End **/
        .row .offset-lg-1 {
          margin-left: calc(100%/12);
        }

        .row .offset-lg-2 {
          margin-left: calc(100%/6);
        }

        .row .offset-lg-3 {
          margin-left: calc(100%/4);
        }

        .row .offset-lg-4 {
          margin-left: calc(100%/3);
        }

        .row .offset-lg-5 {
          margin-left: calc(calc(100%/3) + calc(100%/12));
        }

        .row .offset-lg-6 {
          margin-left: calc(100%/2);
        }

        .row .offset-lg-7 {
          margin-left: calc(calc(100%/2) + calc(100%/12));
        }

        .row .offset-lg-8 {
          margin-left: calc(100% - calc(100%/3));
        }

        .row .offset-lg-9 {
          margin-left: calc(100% - calc(100%/4));
        }

        .row .offset-lg-10 {
          margin-left: calc(100% - calc(100%/6));
        }

        .row .offset-lg-11 {
          margin-left: calc(100% - calc(100%/12));
        }

        .hidden-lg{
          display: none;
        }
      }
      /*For Extra Large (PC / >Notebook 15 inch)*/

      @media (min-width: 1224px) and (max-width:1824px) {
        /** Large Section **/
        .responsive-lg-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }
        .responsive-lg-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }
        .responsive-lg-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }
        .responsive-lg-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }
        .responsive-lg-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }
        .responsive-lg-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }
        .responsive-lg-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }
        .responsive-lg-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }
        .responsive-lg-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }
        .responsive-lg-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }
        .responsive-lg-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }
        .responsive-lg-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }
        /** Large Section End **/
        /** Medium Section **/
        .responsive-md-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }
        .responsive-md-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }
        .responsive-md-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }
        .responsive-md-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }
        .responsive-md-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }
        .responsive-md-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }
        .responsive-md-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }
        .responsive-md-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }
        .responsive-md-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }
        .responsive-md-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }
        .responsive-md-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }
        .responsive-md-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }
        /** Medium Section End **/
        /** Small Section **/
        .responsive-sm-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }

        .responsive-sm-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }

        .responsive-sm-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }

        .responsive-sm-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }

        .responsive-sm-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }

        .responsive-sm-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }

        .responsive-sm-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }

        .responsive-sm-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }

        .responsive-sm-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }

        .responsive-sm-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }

        .responsive-sm-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }

        .responsive-sm-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }

        /** Small Section End **/
        /** Extra Large Section **/
        .responsive-xl-1 {
          box-sizing: border-box;
          max-width: calc(100%/12);
          flex-basis: calc(100%/12);
        }
        .responsive-xl-2 {
          box-sizing: border-box;
          max-width: calc(100%/6);
          flex-basis: calc(100%/6);
        }
        .responsive-xl-3 {
          box-sizing: border-box;
          max-width: calc(100%/4);
          flex-basis: calc(100%/4);
        }
        .responsive-xl-4 {
          box-sizing: border-box;
          max-width: calc(100%/3);
          flex-basis: calc(100%/3);
        }
        .responsive-xl-5 {
          box-sizing: border-box;
          max-width: calc(calc(100%/3) + calc(100%/12));
          flex-basis: calc(calc(100%/3) + calc(100%/12));
        }
        .responsive-xl-6 {
          box-sizing: border-box;
          max-width: calc(100%/2);
          flex-basis: calc(100%/2);
        }
        .responsive-xl-7 {
          box-sizing: border-box;
          max-width: calc(calc(100%/2) + calc(100%/12));
          flex-basis: calc(calc(100%/2) + calc(100%/12));
        }
        .responsive-xl-8 {
          box-sizing: border-box;
          max-width: calc(100% - (100%/3));
          flex-basis: calc(100% - (100%/3));
        }
        .responsive-xl-9 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/4));
          flex-basis: calc(100% - calc(100%/4));
        }
        .responsive-xl-10 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/6));
          flex-basis: calc(100% - calc(100%/6));
        }
        .responsive-xl-11 {
          box-sizing: border-box;
          max-width: calc(100% - calc(100%/12));
          flex-basis: calc(100% - calc(100%/12));
        }
        .responsive-xl-12 {
          box-sizing: border-box;
          max-width: calc(100%);
          flex-basis: calc(100%);
        }
        /** Extra Large Section End **/
        .row .offset-xl-1 {
          margin-left: calc(100%/12);
        }

        .row .offset-xl-2 {
          margin-left: calc(100%/6);
        }

        .row .offset-xl-3 {
          margin-left: calc(100%/4);
        }

        .row .offset-xl-4 {
          margin-left: calc(100%/3);
        }

        .row .offset-xl-5 {
          margin-left: calc(calc(100%/3) + calc(100%/12));
        }

        .row .offset-xl-6 {
          margin-left: calc(100%/2);
        }

        .row .offset-xl-7 {
          margin-left: calc(calc(100%/2) + calc(100%/12));
        }

        .row .offset-xl-8 {
          margin-left: calc(100% - calc(100%/3));
        }

        .row .offset-xl-9 {
          margin-left: calc(100% - calc(100%/4));
        }

        .row .offset-xl-10 {
          margin-left: calc(100% - calc(100%/6));
        }

        .row .offset-xl-11 {
          margin-left: calc(100% - calc(100%/12));
        }

        .hidden-xl{
          display: none;
        }
      }
    </style>
  </template>
  <script>
    Polymer({
      is: 'responsive-flex',
      properties: {
        prop1: {
          type: String,
          value: 'responsive-flex',
        },
      },

    });
  </script>
</dom-module>