/*
  Created: 15-10-2018
  Edited:  12-04-2023

  Notes:
   - The container is mobile first design 
*/

/* ---------- Container Layout Start ---------- */
.container 
{
 position: relative;
 padding-left: 1rem;
 padding-right: 1rem;
 margin-left: auto;
 margin-right: auto;
 box-sizing: border-box;
}

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

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

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

@media (min-width: 1200px) 
{
 .container 
 {
  width: 1140px;
  max-width: 100%;
 }
}
/* ---------- Container Layout End ---------- */

.row 
{
 margin-left: -1rem; /* 16px */
 margin-right: -1rem; /* 16px */
}

.no-gutter
{
 margin-left: -1rem !important;
 margin-right: -1rem !important;
}

.page
{
 padding: 1.25rem 0;
}

/* ---------- Display Start ---------- */

.db  { display: block; }
.dib { display: inline-block; }

/* ---------- Display End ---------- */

/* ---------- Position Start ---------- */

.pr { position: relative; }
.pa { position: absolute; }

.pa-centre { top: 50%; right: 50%; transform: translate(50%, -50%); }

/* (p)osition (a)bsolute - (T)op -(value) */
.pa-t-0 { top: 0 }

/* (p)osition (a)bsolute - (T)op (S)hove -(value) */
.pa-ts-5 { top: -5px; }
.pa-ts-10 { top: -10px; }
.pa-ts-15 { top: -15px; }
.pa-ts-20 { top: -20px; }
.pa-ts-25 { top: -25px; }

/* (p)osition (a)bsolute - (T)op (P)ull -(value) */

.pa-tp-5 { top: 5px; }
.pa-tp-10 { top: 10px; }
.pa-tp-15 { top: 15px; }
.pa-tp-20 { top: 20px; }
.pa-tp-25 { top: 25px; }

/* (p)osition (a)bsolute - (R)ight -(value) */
.pa-r-0 { right: 0; }

/* (p)osition (a)bsolute - (R)ight (P)ull -(value) */
.pa-rp-5 { right: 5px; }
.pa-rp-10 { right: 10px; }
.pa-rp-15 { right: 15px; }
.pa-rp-20 { right: 20px; }
.pa-rp-25 { right: 25px; }

/* (p)osition (a)bsolute - (R)ight (S)hove -(value) */
.pa-rs-5 { right: -5px; }
.pa-rs-10 { right: -10px; }
.pa-rs-15 { right: -15px; }
.pa-rs-20 { right: -20px; }
.pa-rs-25 { right: -25px; }

/* (p)osition (a)bsolute - (l)eft -(value) */
.pa-l-0 { right: 0; }

/* (p)osition (a)bsolute - (L)eft (P)ull -(value) */
.pa-lp-5 { left: 5px; }
.pa-lp-10 { left: 10px; }
.pa-lp-15 { left: 15px; }
.pa-lp-20 { left: 20px; }
.pa-lp-25 { left: 25px; }

/* ---------- Position End ---------- */

/*
    Notes:
    - 
*/
/* ---------- Flexbox Start Layout ---------- */
.flex { display: flex; }

.flex-row { flex-direction: row; }
.flex-wrap-row { display: flex; flex-direction: row; flex-wrap: wrap; }
.flex-nowrap-row { display: flex; flex-direction: row; flex-wrap: nowrap; }
.flex-wrap-reverse-row { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }

.flex-column { flex-direction: column; }
.flex-wrap-column { display: flex; flex-direction: column; flex-wrap: wrap; }
.flex-nowrap-column { display: flex; flex-direction: column; flex-wrap: nowrap; }
.flex-wrap-reverse-column { display: flex; flex-direction: column; flex-wrap: wrap-reverse; }

.flex-expand-shrink
{
 flex-grow: 1; 
 flex-shrink: 1;
}

.flex-inline
{
 display: inline-flex;
 align-items: center; 
}

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

.flex-vc { align-items: center; }
.flex-hc { justify-content: center; }
.flex-vcentre { align-items: center; }
.flex-centre { align-items: center; justify-content: center; }

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

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

.flex-vertical-centre
{
 align-items: center;  
}

.flex-horizontal-centre 
{
 justify-content: center;
}

.flex-centre-both 
{
 align-items: center;
 justify-content: center;
}

.flex-centre-end 
{
 align-items: center;
 justify-content: flex-end;
}

.flex-acs { align-content: start; }
.flex-ass { align-self: start; }
.flex-ase { align-self: flex-end; }
.flex-aie { align-items: flex-end; }

.flex-1  { width: 4.166666666666667%; }
.flex-2  { width: 8.3333333333333333333333333333333%; }
.flex-3  { width: 12.5%; }
.flex-4  { width: 16.666666666666666666666666666667%; }
.flex-5  { width: 20.833333333333333333333333333333%; }
.flex-6  { width: 25%; }
.flex-7  { width: 29.166666666666666666666666666667%; }
.flex-8  { width: 33.333333333333333333333333333333%; }
.flex-9  { width: 37.5%; }
.flex-10 { width: 41.666666666666666666666666666667%; }     
.flex-11 { width: 45.833333333333333333333333333333%; }
.flex-12 { width: 50%; }
.flex-13 { width: 54.166666666666666666666666666667%; }
.flex-14 { width: 58.333333333333333333333333333333%; }
.flex-15 { width: 62.5%; }
.flex-16 { width: 66.666666666666666666666666666667%; }
.flex-18 { width: 75%; }
.flex-19 { width: 79.166666666666666666666666666667%; }
.flex-20 { width: 83.333333333333333333333333333333%; }
.flex-21 { width: 87.5%; }
.flex-22 { width: 91.666666666666666666666666666667%; } 
.flex-23 { width: 95.833333333333333333333333333333%; }
.flex-24 { width: 100%; }
/* ---------- Flexbox  End  Layout ---------- */

/* ---------- Flexbox Responsive Start Layout ---------- */

 @media (max-width: 575px)
 {
  .flex-xs-1,  .flex-xs-2,  .flex-xs-3,  .flex-xs-4,  .flex-xs-5,  .flex-xs-6,  .flex-xs-7,  .flex-xs-8,  .flex-xs-9,  .flex-xs-9,  .flex-xs-10,  
  .flex-xs-11,  .flex-xs-12,  .flex-xs-13,  .flex-xs-14,  .flex-xs-15,  .flex-xs-16,  .flex-xs-17,  .flex-xs-18,  .flex-xs-19,  .flex-xs-20,  
  .flex-xs-21,  .flex-xs-22,  .flex-xs-23,  .flex-xs-24
  {
   float: left;
   width: 100%;    
  }

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

  .flex-xs-1
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 4.1666666666666666666666666666667%;
   max-width: 4.1666666666666666666666666666667%;   
  }
     
  .flex-xs-2
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 8.3333333333333333333333333333333%;
   max-width: 8.3333333333333333333333333333333%;   
  }
     
  .flex-xs-3
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 12.5%;
   max-width: 12.5%;   
  } 
     
  .flex-xs-4
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 16.666666666666666666666666666667%;
   max-width: 16.666666666666666666666666666667%;   
  }
     
  .flex-xs-5
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 20.833333333333333333333333333333%;
   max-width: 20.833333333333333333333333333333%;   
  }
     
  .flex-xs-6
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 25%;
   max-width: 25%;   
  }
     
  .flex-xs-7
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 29.166666666666666666666666666667%;
   max-width: 29.166666666666666666666666666667%;   
  }
     
  .flex-xs-8
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 33.333333333333333333333333333333%;
   max-width: 33.333333333333333333333333333333%;   
  }  
     
  .flex-xs-9
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 37.5%;
   max-width: 37.5%;   
  }
     
  .flex-xs-10
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 41.666666666666666666666666666667%;
   max-width: 41.666666666666666666666666666667%;   
  }
     
  .flex-xs-11
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 45.833333333333333333333333333333%;
   max-width: 45.833333333333333333333333333333%;   
  }
     
  .flex-xs-12
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 50%;
   max-width: 50%;   
  }
     
  .flex-xs-13
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 54.166666666666666666666666666667%;
   max-width: 54.166666666666666666666666666667%;   
  }
     
  .flex-xs-14
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 58.333333333333333333333333333333%;
   max-width: 58.333333333333333333333333333333%;   
  }
     
  .flex-xs-15
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 62.5%;
   max-width: 62.5%;   
  }
     
  .flex-xs-16
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 66.666666666666666666666666666667%;
   max-width: 66.666666666666666666666666666667%;   
  }
     
  .flex-xs-17
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 70.833333333333333333333333333333%;
   max-width: 70.833333333333333333333333333333%;   
  }
     
  .flex-xs-18
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 75%;
   max-width: 75%;   
  }
     
  .flex-xs-19
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 79.166666666666666666666666666667%;
   max-width: 79.166666666666666666666666666667%;   
  }
     
  .flex-xs-20
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 83.333333333333333333333333333333%;
   max-width: 83.333333333333333333333333333333%;   
  }
     
  .flex-xs-21
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 87.5%;
   max-width: 87.5%;   
  }  
     
  .flex-xs-22
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 91.666666666666666666666666666667%;
   max-width: 91.666666666666666666666666666667%;   
  }  
     
  .flex-xs-23
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 95.833333333333333333333333333333%;
   max-width: 95.833333333333333333333333333333%;   
  }
     
  .flex-xs-24
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 100%;
   max-width: 100%;   
  }
 }

 @media (min-width: 576px) and (max-width: 767px)
 {
  .flex-sm-1,  .flex-sm-2,  .flex-sm-3,  .flex-sm-4,  .flex-sm-5,  .flex-sm-6,  .flex-sm-7,  .flex-sm-8,  .flex-sm-9,  .flex-sm-9,  .flex-sm-10,  
  .flex-sm-11,  .flex-sm-12,  .flex-sm-13,  .flex-sm-14,  .flex-sm-15,  .flex-sm-16,  .flex-sm-17,  .flex-sm-18,  .flex-sm-19,  .flex-sm-20,  
  .flex-sm-21,  .flex-sm-22,  .flex-sm-23,  .flex-sm-24
  {
   float: left; 
   width: 100%;   
  }    

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

  .flex-sm-1
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 4.1666666666666666666666666666667%;
   max-width: 4.1666666666666666666666666666667%;   
  }
     
  .flex-sm-2
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 8.3333333333333333333333333333333%;
   max-width: 8.3333333333333333333333333333333%;   
  }
     
  .flex-sm-3
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 12.5%;
   max-width: 12.5%;   
  } 
     
  .flex-sm-4
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 16.666666666666666666666666666667%;
   max-width: 16.666666666666666666666666666667%;   
  }
     
  .flex-sm-5
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 20.833333333333333333333333333333%;
   max-width: 20.833333333333333333333333333333%;   
  }
     
  .flex-sm-6
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 25%;
   max-width: 25%;   
  }
     
  .flex-sm-7
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 29.166666666666666666666666666667%;
   max-width: 29.166666666666666666666666666667%;   
  }
     
  .flex-sm-8
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 33.333333333333333333333333333333%;
   max-width: 33.333333333333333333333333333333%;   
  }  
     
  .flex-sm-9
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 37.5%;
   max-width: 37.5%;   
  }
     
  .flex-sm-10
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 41.666666666666666666666666666667%;
   max-width: 41.666666666666666666666666666667%;   
  }
     
  .flex-sm-11
  {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 45.833333333333333333333333333333%;
   max-width: 45.833333333333333333333333333333%;   
  }
     
  .flex-sm-12
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 50%;
      max-width: 50%;   
  }
     
  .flex-sm-13
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 54.166666666666666666666666666667%;
      max-width: 54.166666666666666666666666666667%;   
  }
     
  .flex-sm-14
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 58.333333333333333333333333333333%;
      max-width: 58.333333333333333333333333333333%;   
  }
     
  .flex-sm-15
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 62.5%;
      max-width: 62.5%;   
  }
     
  .flex-sm-16
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 66.666666666666666666666666666667%;
      max-width: 66.666666666666666666666666666667%;   
  }
     
  .flex-sm-17
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 70.833333333333333333333333333333%;
      max-width: 70.833333333333333333333333333333%;   
  }
     
  .flex-sm-18
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 75%;
      max-width: 75%;   
  }
     
  .flex-sm-19
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 79.166666666666666666666666666667%;
      max-width: 79.166666666666666666666666666667%;   
  }
     
  .flex-sm-20
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 83.333333333333333333333333333333%;
      max-width: 83.333333333333333333333333333333%;   
  }
     
  .flex-sm-21
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 87.5%;
      max-width: 87.5%;   
  }  
     
  .flex-sm-22
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 91.666666666666666666666666666667%;
      max-width: 91.666666666666666666666666666667%;   
  }  
     
  .flex-sm-23
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 95.833333333333333333333333333333%;
      max-width: 95.833333333333333333333333333333%;   
  }
     
  .flex-sm-24
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 100%;
      max-width: 100%;   
  }     
 }
    
 @media (min-width: 768px) and (max-width: 991px)
 {
  .flex-md-1,  .flex-md-2,  .flex-md-3,  .flex-md-4,  .flex-md-5,  .flex-md-6,  .flex-md-7,  .flex-md-8,  .flex-md-9,  .flex-md-9,  .flex-md-10,  
  .flex-md-11,  .flex-md-12,  .flex-md-13,  .flex-md-14,  .flex-md-15,  .flex-md-16,  .flex-md-17,  .flex-md-18,  .flex-md-19,  .flex-md-20,  
  .flex-md-21,  .flex-md-22,  .flex-md-23,  .flex-md-24
  {
      float: left;
      width: 100%;    
  }

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

  .flex-md-1
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 4.1666666666666666666666666666667%;
      max-width: 4.1666666666666666666666666666667%;   
  }
     
  .flex-md-2
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 8.3333333333333333333333333333333%;
      max-width: 8.3333333333333333333333333333333%;   
  }
     
  .flex-md-3
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 12.5%;
      max-width: 12.5%;   
  } 
     
  .flex-md-4
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 16.666666666666666666666666666667%;
      max-width: 16.666666666666666666666666666667%;   
  }
     
  .flex-md-5
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 20.833333333333333333333333333333%;
      max-width: 20.833333333333333333333333333333%;   
  }
     
  .flex-md-6
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 25%;
      max-width: 25%;   
  }
     
  .flex-md-7
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 29.166666666666666666666666666667%;
      max-width: 29.166666666666666666666666666667%;   
  }
     
  .flex-md-8
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 33.333333333333333333333333333333%;
      max-width: 33.333333333333333333333333333333%;   
  }  
     
  .flex-md-9
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 37.5%;
      max-width: 37.5%;   
  }
     
  .flex-md-10
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 41.666666666666666666666666666667%;
      max-width: 41.666666666666666666666666666667%;   
  }
     
  .flex-md-11
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 45.833333333333333333333333333333%;
      max-width: 45.833333333333333333333333333333%;   
  }
     
  .flex-md-12
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 50%;
      max-width: 50%;   
  }
     
  .flex-md-13
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 54.166666666666666666666666666667%;
      max-width: 54.166666666666666666666666666667%;   
  }
     
  .flex-md-14
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 58.333333333333333333333333333333%;
      max-width: 58.333333333333333333333333333333%;   
  }
     
  .flex-md-15
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 62.5%;
      max-width: 62.5%;   
  }
     
  .flex-md-16
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 66.666666666666666666666666666667%;
      max-width: 66.666666666666666666666666666667%;   
  }
     
  .flex-md-17
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 70.833333333333333333333333333333%;
      max-width: 70.833333333333333333333333333333%;   
  }
     
  .flex-md-18
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 75%;
      max-width: 75%;   
  }
     
  .flex-md-19
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 79.166666666666666666666666666667%;
      max-width: 79.166666666666666666666666666667%;   
  }
     
  .flex-md-20
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 83.333333333333333333333333333333%;
      max-width: 83.333333333333333333333333333333%;   
  }
     
  .flex-md-21
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 87.5%;
      max-width: 87.5%;   
  }  
     
  .flex-md-22
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 91.666666666666666666666666666667%;
      max-width: 91.666666666666666666666666666667%;   
  }  
     
  .flex-md-23
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 95.833333333333333333333333333333%;
      max-width: 95.833333333333333333333333333333%;   
  }
     
  .flex-md-24
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 100%;
      max-width: 100%;   
  }     
 }

 @media (min-width: 992px) and (max-width: 1199px)
 {
  .flex-lg-1,  .flex-lg-2,  .flex-lg-3,  .flex-lg-4,  .flex-lg-5,  .flex-lg-6,  .flex-lg-7,  .flex-lg-8,  .flex-lg-9,  .flex-lg-9,  .flex-lg-10,  
  .flex-lg-11,  .flex-lg-12,  .flex-lg-13,  .flex-lg-14,  .flex-lg-15,  .flex-lg-16,  .flex-lg-17,  .flex-lg-18,  .flex-lg-19,  .flex-lg-20,  
  .flex-lg-21,  .flex-lg-22,  .flex-lg-23,  .flex-lg-24
  {
      float: left;
      width: 100%;    
  }   

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

  .flex-lg-1
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 4.1666666666666666666666666666667%;
      max-width: 4.1666666666666666666666666666667%;   
  }
     
  .flex-lg-2
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 8.3333333333333333333333333333333%;
      max-width: 8.3333333333333333333333333333333%;   
  }
     
  .flex-lg-3
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 12.5%;
      max-width: 12.5%;   
  } 
     
  .flex-lg-4
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 16.666666666666666666666666666667%;
      max-width: 16.666666666666666666666666666667%;   
  }
     
  .flex-lg-5
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 20.833333333333333333333333333333%;
      max-width: 20.833333333333333333333333333333%;   
  }
     
  .flex-lg-6
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 25%;
      max-width: 25%;   
  }
     
  .flex-lg-7
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 29.166666666666666666666666666667%;
      max-width: 29.166666666666666666666666666667%;   
  }
     
  .flex-lg-8
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 33.333333333333333333333333333333%;
      max-width: 33.333333333333333333333333333333%;   
  }  
     
  .flex-lg-9
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 37.5%;
      max-width: 37.5%;   
  }
     
  .flex-lg-10
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 41.666666666666666666666666666667%;
      max-width: 41.666666666666666666666666666667%;   
  }
     
  .flex-lg-11
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 45.833333333333333333333333333333%;
      max-width: 45.833333333333333333333333333333%;   
  }
     
  .flex-lg-12
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 50%;
      max-width: 50%;   
  }
     
  .flex-lg-13
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 54.166666666666666666666666666667%;
      max-width: 54.166666666666666666666666666667%;   
  }
     
  .flex-lg-14
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 58.333333333333333333333333333333%;
      max-width: 58.333333333333333333333333333333%;   
  }
     
  .flex-lg-15
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 62.5%;
      max-width: 62.5%;   
  }
     
  .flex-lg-16
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 66.666666666666666666666666666667%;
      max-width: 66.666666666666666666666666666667%;   
  }
     
  .flex-lg-17
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 70.833333333333333333333333333333%;
      max-width: 70.833333333333333333333333333333%;   
  }
     
  .flex-lg-18
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 75%;
      max-width: 75%;   
  }
     
  .flex-lg-19
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 79.166666666666666666666666666667%;
      max-width: 79.166666666666666666666666666667%;   
  }
     
  .flex-lg-20
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 83.333333333333333333333333333333%;
      max-width: 83.333333333333333333333333333333%;   
  }
     
  .flex-lg-21
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 87.5%;
      max-width: 87.5%;   
  }  
     
  .flex-lg-22
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 91.666666666666666666666666666667%;
      max-width: 91.666666666666666666666666666667%;   
  }  
     
  .flex-lg-23
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 95.833333333333333333333333333333%;
      max-width: 95.833333333333333333333333333333%;   
  }
     
  .flex-lg-24
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 100%;
      max-width: 100%;   
  }
 }

 @media (min-width: 1200px)
 {
  .flex-xl-1,  .flex-xl-2,  .flex-xl-3,  .flex-xl-4,  .flex-xl-5,  .flex-xl-6,  .flex-xl-7,  .flex-xl-8,  .flex-xl-9,  .flex-xl-9,  .flex-xl-10,  
  .flex-xl-11,  .flex-xl-12,  .flex-xl-13,  .flex-xl-14,  .flex-xl-15,  .flex-xl-16,  .flex-xl-17,  .flex-xl-18,  .flex-xl-19,  .flex-xl-20,  
  .flex-xl-21,  .flex-xl-22,  .flex-xl-23,  .flex-xl-24
  {
      float: left; 
      width: 100%;  
  }

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

  .flex-xl-1
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 4.1666666666666666666666666666667%;
      max-width: 4.1666666666666666666666666666667%;   
  }
     
  .flex-xl-2
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 8.3333333333333333333333333333333%;
      max-width: 8.3333333333333333333333333333333%;   
  }
     
  .flex-xl-3
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 12.5%;
      max-width: 12.5%;   
  } 
     
  .flex-xl-4
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 16.666666666666666666666666666667%;
      max-width: 16.666666666666666666666666666667%;   
  }
     
  .flex-xl-5
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 20.833333333333333333333333333333%;
      max-width: 20.833333333333333333333333333333%;   
  }
     
  .flex-xl-6
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 25%;
      max-width: 25%;   
  }
     
  .flex-xl-7
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 29.166666666666666666666666666667%;
      max-width: 29.166666666666666666666666666667%;   
  }
     
  .flex-xl-8
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 33.333333333333333333333333333333%;
      max-width: 33.333333333333333333333333333333%;   
  }  
     
  .flex-xl-9
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 37.5%;
      max-width: 37.5%;   
  }
     
  .flex-xl-10
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 41.666666666666666666666666666667%;
      max-width: 41.666666666666666666666666666667%;   
  }
     
  .flex-xl-11
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 45.833333333333333333333333333333%;
      max-width: 45.833333333333333333333333333333%;   
  }
     
  .flex-xl-12
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 50%;
      max-width: 50%;   
  }
     
  .flex-xl-13
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 54.166666666666666666666666666667%;
      max-width: 54.166666666666666666666666666667%;   
  }
     
  .flex-xl-14
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 58.333333333333333333333333333333%;
      max-width: 58.333333333333333333333333333333%;   
  }
     
  .flex-xl-15
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 62.5%;
      max-width: 62.5%;   
  }
     
  .flex-xl-16
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 66.666666666666666666666666666667%;
      max-width: 66.666666666666666666666666666667%;   
  }
     
  .flex-xl-17
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 70.833333333333333333333333333333%;
      max-width: 70.833333333333333333333333333333%;   
  }
     
  .flex-xl-18
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 75%;
      max-width: 75%;   
  }
     
  .flex-xl-19
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 79.166666666666666666666666666667%;
      max-width: 79.166666666666666666666666666667%;   
  }
     
  .flex-xl-20
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 83.333333333333333333333333333333%;
      max-width: 83.333333333333333333333333333333%;   
  }
     
  .flex-xl-21
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 87.5%;
      max-width: 87.5%;   
  }  
     
  .flex-xl-22
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 91.666666666666666666666666666667%;
      max-width: 91.666666666666666666666666666667%;   
  }  
     
  .flex-xl-23
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 95.833333333333333333333333333333%;
      max-width: 95.833333333333333333333333333333%;   
  }
     
  .flex-xl-24
  {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 100%;
      max-width: 100%;   
  }     
 }
/* ---------- Flexbox Responsive End Layout ---------- */

/* ---------- Display Start ---------- */

.db  { display: block; }
.dib { display: inline-block; }

/* ---------- Display End ---------- */

/* ---------- Position Start ---------- */

.pr { position: relative; }
.pa { position: absolute; }

/* ---------- Position End ---------- */