/* ==========================================================================
   5 Columns
   ========================================================================== */
.col-1-5, .col-2-5, .col-3-5, .col-4-5, .col-5-5, .col-sm-1-5, .col-sm-2-5, .col-sm-3-5, .col-sm-4-5, .col-sm-5-5, .col-md-1-5, .col-md-2-5, .col-md-3-5, .col-md-4-5, .col-md-5-5, 
.col-lg-1-5, .col-lg-2-5, .col-lg-3-5, .col-lg-4-5, .col-lg-5-5, .col-xl-1-5, .col-xl-2-5, .col-xl-3-5, .col-xl-4-5, .col-xl-5-5 {
   position: relative;
   width: 100%;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
}

.col-1-5 {
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
   }
   .col-2-5 {
      -ms-flex: 0 0 40%;
      flex: 0 0 40%;
      max-width: 40%;
   }
   .col-3-5 {
      -ms-flex: 0 0 60%;
      flex: 0 0 60%;
      max-width: 60%;
   }
   .col-4-5 {
      -ms-flex: 0 0 80%;
      flex: 0 0 80%;
      max-width: 80%;
   }
   .col-5-5 {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
   }

@media (min-width: 576px) {
   .col-sm-1-5 {
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
   }
   .col-sm-2-5 {
      -ms-flex: 0 0 40%;
      flex: 0 0 40%;
      max-width: 40%;
   }
   .col-sm-3-5 {
      -ms-flex: 0 0 60%;
      flex: 0 0 60%;
      max-width: 60%;
   }
   .col-sm-4-5 {
      -ms-flex: 0 0 80%;
      flex: 0 0 80%;
      max-width: 80%;
   }
   .col-sm-5-5 {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
   }
}

@media (min-width: 768px) {
  .col-md-1-5 {
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
   }
   .col-md-2-5 {
      -ms-flex: 0 0 40%;
      flex: 0 0 40%;
      max-width: 40%;
   }
   .col-md-3-5 {
      -ms-flex: 0 0 60%;
      flex: 0 0 60%;
      max-width: 60%;
   }
   .col-md-4-5 {
      -ms-flex: 0 0 80%;
      flex: 0 0 80%;
      max-width: 80%;
   }
   .col-md-5-5 {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
   }
}

@media (min-width: 992px) {
  .col-lg-1-5 {
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
  }
  .col-lg-2-5 {
      -ms-flex: 0 0 40%;
      flex: 0 0 40%;
      max-width: 40%;
   }
   .col-lg-3-5 {
      -ms-flex: 0 0 60%;
      flex: 0 0 60%;
      max-width: 60%;
   }
   .col-lg-4-5 {
      -ms-flex: 0 0 80%;
      flex: 0 0 80%;
      max-width: 80%;
   }
   .col-lg-5-5 {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
   }
}

@media (min-width: 1200px) {
  .col-xl-1-5 {
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
   }
   .col-xl-2-5 {
      -ms-flex: 0 0 40%;
      flex: 0 0 40%;
      max-width: 40%;
   }
   .col-xl-3-5 {
      -ms-flex: 0 0 60%;
      flex: 0 0 60%;
      max-width: 60%;
   }
   .col-xl-4-5 {
      -ms-flex: 0 0 80%;
      flex: 0 0 80%;
      max-width: 80%;
   }
   .col-xl-5-5 {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
   }
}


/* ==========================================================================
   Backgound Size
   ========================================================================== */
.bkg-cover { background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; }
.bkg-fixed { background-repeat: no-repeat!important; -webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover!important; background-size: cover!important; background-position: center; background-attachment: fixed!important; position: static; }
.bkg-contain { background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; }


/* ==========================================================================
   Inside Space
   ========================================================================== */
.padding-bottom-xs { padding-bottom: 5px; }
.padding-bottom-sm { padding-bottom: 15px; }
.padding-bottom-md { padding-bottom: 30px; }
.padding-bottom-lg { padding-bottom: 45px; }
.padding-bottom-xl { padding-bottom: 60px; }
.padding-bottom-xxl { padding-bottom: 90px; }

.padding-top-xs { padding-top: 5px; }
.padding-top-sm { padding-top: 15px; }
.padding-top-md { padding-top: 30px; }
.padding-top-lg { padding-top: 45px; }
.padding-top-xl { padding-top: 60px; }
.padding-top-xxl { padding-top: 90px; }

.padding-left-xs { padding-left: 5px; }
.padding-left-sm { padding-left: 15px; }
.padding-left-md { padding-left: 30px; }
.padding-left-lg { padding-left: 45px; }
.padding-left-xl { padding-left: 60px; }
.padding-left-xxl { padding-left: 90px; }

.padding-right-xs { padding-right: 5px; }
.padding-right-sm { padding-right: 15px; }
.padding-right-md { padding-right: 30px; }
.padding-right-lg { padding-right: 45px; }
.padding-right-xl { padding-right: 60px; }
.padding-right-xxl { padding-right: 90px; }


/* ==========================================================================
   Outside Space
   ========================================================================== */
.margin-bottom-xs { margin-bottom: 5px; }
.margin-bottom-sm { margin-bottom: 15px; }
.margin-bottom-md { margin-bottom: 30px; }
.margin-bottom-lg { margin-bottom: 45px; }
.margin-bottom-xl { margin-bottom: 60px; }
.margin-bottom-xxl { margin-bottom: 90px; }

.margin-top-xs { margin-top: 5px; }
.margin-top-sm { margin-top: 15px; }
.margin-top-md { margin-top: 30px; }
.margin-top-lg { margin-top: 45px; }
.margin-top-xl { margin-top: 60px; }
.margin-top-xxl { margin-top: 90px; }

.margin-left-xs { margin-left: 5px; }
.margin-left-sm { margin-left: 15px; }
.margin-left-md { margin-left: 30px; }
.margin-left-lg { margin-left: 45px; }
.margin-left-xl { margin-left: 60px; }
.margin-left-xxl { margin-left: 90px; }

.margin-right-xs { margin-right: 5px; }
.margin-right-sm { margin-right: 15px; }
.margin-right-md { margin-right: 30px; }
.margin-right-lg { margin-right: 45px; }
.margin-right-xl { margin-right: 60px; }
.margin-right-xxl { margin-right: 90px; }


/* ==========================================================================
   IMG styles
   ========================================================================== */
img { display: inline-block; max-width: 100%; }

.square-img { position: relative; overflow: hidden; }
.square-img:before{ content: ""; display: block; padding-top: 100%;}
.square-img > div, .square-img > img { position: absolute; width: 100%; height: 100%; top: 0; }
.square-img > div.centered { -webkit-font-smoothing: antialiased; top: 50%;-webkit-transform: translate(-50%, -50%)!important; transform: translate(-50%, -50%);z-index: 9999;height: auto!important;left: 50%;}

.rectangle-img { position: relative; overflow: hidden; }
.rectangle-img:before{ content: ""; display: block; padding-top: 50%; }
.rectangle-img > div, .rectangle-img > img { position: absolute; width: 100%; height: 100%; top: 0; }
.rectangle-img > div.centered { -webkit-font-smoothing: antialiased; top: 50%;-webkit-transform: translate(-50%, -50%)!important; transform: translate(-50%, -50%);z-index: 9999;height: auto!important;left: 50%;}

.sixteen-nine-img { position: relative; overflow: hidden; }
.sixteen-nine-img:before{ content: ""; display: block; padding-top: 56.25%; }
.sixteen-nine-img > div, .sixteen-nine-img > img { position: absolute; width: 100%; height: 100%; top: 0; }
.sixteen-nine-img > div.centered { -webkit-font-smoothing: antialiased; top: 50%;-webkit-transform: translate(-50%, -50%)!important; transform: translate(-50%, -50%);z-index: 9999;height: auto!important;left: 50%;}

.twentyone-nine-img { position: relative; overflow: hidden; }
.twentyone-nine-img:before{ content: ""; display: block; padding-top: 42.86%; }
.twentyone-nine-img > div, .twentyone-nine-img > img { position: absolute; width: 100%; height: 100%; top: 0; }
.twentyone-nine-img > div.centered { -webkit-font-smoothing: antialiased; top: 50%;-webkit-transform: translate(-50%, -50%)!important; transform: translate(-50%, -50%);z-index: 9999;height: auto!important;left: 50%;}

.twentyone-six-img { position: relative; overflow: hidden; }
.twentyone-six-img:before{ content: ""; display: block; padding-top: 28.571%; }
.twentyone-six-img > div, .twentyone-six-img > img { position: absolute; width: 100%; height: 100%; top: 0; }
.twentyone-six-img > div.centered { -webkit-font-smoothing: antialiased; top: 50%;-webkit-transform: translate(-50%, -50%)!important; transform: translate(-50%, -50%);z-index: 9999;height: auto!important;left: 50%;}

.twentyone-three-img { position: relative; overflow: hidden; }
.twentyone-three-img:before{ content: ""; display: block; padding-top: 14.281%; }
.twentyone-three-img > div, .twentyone-three-img > img { position: absolute; width: 100%; height: 100%; top: 0; }
.twentyone-three-img > div.centered { -webkit-font-smoothing: antialiased; top: 50%;-webkit-transform: translate(-50%, -50%)!important; transform: translate(-50%, -50%);z-index: 9999;height: auto!important;left: 50%;}

.four-three-img { position: relative; overflow: hidden; }
.four-three-img:before{ content: ""; display: block; padding-top: 75%; }
.four-three-img > div, .four-three-img > img { position: absolute;  height: 100%; width: 100%;top: 0; }
.four-three-img > div.centered { -webkit-font-smoothing: antialiased; top: 50%;-webkit-transform: translate(-50%, -50%)!important; transform: translate(-50%, -50%);z-index: 9999;height: auto!important;left: 50%;}

.three-four-img { position: relative; overflow: hidden; }
.three-four-img:before{ content: ""; display: block; padding-top: 133%; }
.three-four-img > div, .three-four-img > img { position: absolute;  height: 100%; width: 100%; top: 0; }
.three-four-img > div.centered { -webkit-font-smoothing: antialiased; top: 50%;-webkit-transform: translate(-50%, -50%)!important; transform: translate(-50%, -50%);z-index: 9999;height: auto!important;left: 50%;}


/* ==========================================================================
   INNER CONTAINER
   ========================================================================== */
.inner-container div[class*="col-"] > div { display: inline-block; margin-left: 40px; max-width: 500px; padding-bottom: 40px; padding-top: 60px; width: 100%; }
.inner-container div[class*="col-"]:first-child > div { float: right; margin-left: inherit; margin-right: 40px; }
.inner-container h1, .inner-container h2, .inner-container h3, .inner-container h4, .inner-container h5, .inner-container h6 { margin-bottom: 20px; }
.inner-container ul { padding-left: 25px; }
.inner-container p, .inner-container ul li { font-size: 15px; line-height: 21px; }

@media (max-width: 1199px) {
   .inner-container div[class*="col-"] > div { margin-left: 25px; max-width: 420px; }
   .inner-container div[class*="col-"]:first-child > div { margin-right: 25px; }
}

@media (max-width: 992px) {
   .inner-container div[class*="col-"].bkg-cover { min-height: 350px; }
   .inner-container div[class*="col-"] > div { margin-left: 0; max-width: 100%; padding-left: 15px; padding-right: 15px; padding-top: 40px; }
   .inner-container div[class*="col-"]:first-child > div { margin-right: 0; }
}

@media (max-width: 767px) {
   .inner-container div[class*="col-"].bkg-cover { min-height: 300px; }
}

@media (max-width: 576px) {
   .inner-container div[class*="col-"].bkg-cover { min-height: 250px; }
   .inner-container div[class*="col-"] > div { padding-left: 5px; padding-right: 5px; }
}

.video-bkg { overflow: hidden; position: relative; }
.video-bkg::after { content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
.video-bkg > div { position: relative; z-index: 2; }
.video-bkg > iframe, .video-bkg > video { aspect-ratio: 16/9; height: auto; left: 0; min-height: 100%; object-fit: cover; position: absolute; top: 50%; width: 100%; z-index: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); }


/* ==========================================================================
   BORDER
   ========================================================================== */
div[class*="border-"] { border-width: 0; }

.border-bottom-xs { border-bottom-width: 1px!important; }
.border-bottom-sm { border-bottom-width: 2px!important; }
.border-bottom-md { border-bottom-width: 3px!important; }
.border-bottom-lg { border-bottom-width: 4px!important; }
.border-bottom-xl { border-bottom-width: 5px!important; }
.border-bottom-xxl { border-bottom-width: 10px!important; }

.border-left-xs { border-left-width: 1px!important; }
.border-left-sm { border-left-width: 2px!important; }
.border-left-md { border-left-width: 3px!important; }
.border-left-lg { border-left-width: 4px!important; }
.border-left-xl { border-left-width: 5px!important; }
.border-left-xxl { border-left-width: 10px!important; }

.border-right-xs { border-right-width: 1px!important; }
.border-right-sm { border-right-width: 2px!important; }
.border-right-md { border-right-width: 3px!important; }
.border-right-lg { border-right-width: 4px!important; }
.border-right-xl { border-right-width: 5px!important; }
.border-right-xxl { border-right-width: 10px!important; }

.border-top-xs { border-top-width: 1px!important; }
.border-top-sm { border-top-width: 2px!important; }
.border-top-md { border-top-width: 3px!important; }
.border-top-lg { border-top-width: 4px!important; }
.border-top-xl { border-top-width: 5px!important; }
.border-top-xxl { border-top-width: 10px!important; }


/* ==========================================================================
   VIDEO styles
   ========================================================================== */
.video-container { position: relative; }
.video-container:before{ content: ""; display: block; padding-top: 56.25%; }
.video-container > div, .video-container > iframe { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; }