/**
 * Flatsome Grid & Row System
 * Extracted from flatsome.css — Flexbox-based grid
 *
 * Breakpoints:
 *   small-*  : mobile baseline (always active)
 *   medium-* : <= 849px
 *   large-*  : >= 850px
 */

/* ==========================================================================
   CONTAINER & ROW
   ========================================================================== */

.full-width .ubermenu-nav,
.row,
body.boxed,
body.framed {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.full-width .ubermenu-nav,
.row {
  max-width: 1080px;
}

.row.row-collapse { max-width: 1050px; }
.row.row-small    { max-width: 1065px; }
.row.row-large    { max-width: 1110px; }

/* ==========================================================================
   COLUMN BASE
   ========================================================================== */

.col,
.columns,
.gallery-item {
  margin: 0;
  padding: 0 15px 30px;
  position: relative;
  width: 100%;
}

.col          { padding-bottom: 30px; }
.col-fit      { flex: 1; }
.col-first    { order: -1; }
.col-last     { order: 1; }

.col-inner {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex: 1 0 auto;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 100%;
}

.col-has-radius { overflow: hidden; }

.col + .col .col-inner {
  margin-left: 0;
  margin-right: auto;
}

/* ==========================================================================
   COLUMN DIVIDERS
   ========================================================================== */

.col-divided {
  border-right: 1px solid #ececec;
  padding-right: 30px;
}

.col.col-divided:not(.col-first):last-child {
  border-left: 1px solid #ececec;
  border-right: 0;
  padding-left: 30px;
  padding-right: 0;
}

.col-border {
  border-right: 1px solid #ececec;
  padding-right: 0;
}

.col-border + .col,
.col-divided + .col { padding-left: 30px; }

.dark .col-divided { border-color: hsla(0, 0%, 100%, .2); }

.row-divided.row-reverse > .col + .col:not(.large-12) {
  border-left: 0;
  border-right: 1px solid #ececec;
}

/* ==========================================================================
   ALIGNMENT UTILITIES
   ========================================================================== */

.align-equal > .col { display: flex; }

.align-middle  { align-items: center !important;    align-self: center !important;    vertical-align: middle !important; }
.align-bottom  { align-items: flex-end !important;  align-self: flex-end !important;  justify-content: flex-end !important;   vertical-align: bottom !important; }
.align-top     { align-items: flex-start !important; align-self: flex-start !important; justify-content: flex-start !important; vertical-align: top !important; }
.align-center  { justify-content: center !important; }
.align-right   { justify-content: flex-end !important; }

/* ==========================================================================
   SMALL COLUMNS (mobile baseline)
   ========================================================================== */

.small-1  { flex-basis: 8.3333333333%;  max-width: 8.3333333333%; }
.small-2  { flex-basis: 16.6666666667%; max-width: 16.6666666667%; }
.small-3  { flex-basis: 25%;            max-width: 25%; }
.small-4  { flex-basis: 33.3333333333%; max-width: 33.3333333333%; }
.small-5  { flex-basis: 41.6666666667%; max-width: 41.6666666667%; }
.small-6  { flex-basis: 50%;            max-width: 50%; }
.small-7  { flex-basis: 58.3333333333%; max-width: 58.3333333333%; }
.small-8  { flex-basis: 66.6666666667%; max-width: 66.6666666667%; }
.small-9  { flex-basis: 75%;            max-width: 75%; }
.small-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; }
.small-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; }

.small-12,
.small-columns-1 .flickity-slider > .col,
.small-columns-1 > .col { flex-basis: 100%; max-width: 100%; }

.small-columns-2 .flickity-slider > .col,
.small-columns-2 > .col { flex-basis: 50%;            max-width: 50%; }

.small-columns-3 .flickity-slider > .col,
.small-columns-3 > .col { flex-basis: 33.3333333333%; max-width: 33.3333333333%; }

.small-columns-4 .flickity-slider > .col,
.small-columns-4 > .col { flex-basis: 25%;            max-width: 25%; }

.small-columns-5 .flickity-slider > .col,
.small-columns-5 > .col { flex-basis: 20%;            max-width: 20%; }

.small-columns-6 .flickity-slider > .col,
.small-columns-6 > .col { flex-basis: 16.6666666667%; max-width: 16.6666666667%; }

.small-columns-7 .flickity-slider > .col,
.small-columns-7 > .col { flex-basis: 14.2857142857%; max-width: 14.2857142857%; }

.small-columns-8 .flickity-slider > .col,
.small-columns-8 > .col { flex-basis: 12.5%;          max-width: 12.5%; }

/* ==========================================================================
   MEDIUM COLUMNS (<= 849px)
   ========================================================================== */

.medium-2  { flex-basis: 16.6666666667%; max-width: 16.6666666667%; }
.medium-3  { flex-basis: 25%;            max-width: 25%; }
.medium-4  { flex-basis: 33.3333333333%; max-width: 33.3333333333%; }
.medium-5  { flex-basis: 41.6666666667%; max-width: 41.6666666667%; }
.medium-6  { flex-basis: 50%;            max-width: 50%; }
.medium-7  { flex-basis: 58.3333333333%; max-width: 58.3333333333%; }
.medium-8  { flex-basis: 66.6666666667%; max-width: 66.6666666667%; }
.medium-9  { flex-basis: 75%;            max-width: 75%; }
.medium-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; }
.medium-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; }

.medium-12,
.medium-columns-1 .flickity-slider > .col,
.medium-columns-1 > .col { flex-basis: 100%; max-width: 100%; }

.medium-columns-2 .flickity-slider > .col,
.medium-columns-2 > .col { flex-basis: 50%;            max-width: 50%; }

.medium-columns-3 .flickity-slider > .col,
.medium-columns-3 > .col { flex-basis: 33.3333333333%; max-width: 33.3333333333%; }

.medium-columns-4 .flickity-slider > .col,
.medium-columns-4 > .col { flex-basis: 25%;            max-width: 25%; }

.medium-columns-5 .flickity-slider > .col,
.medium-columns-5 > .col { flex-basis: 20%;            max-width: 20%; }

.medium-columns-6 .flickity-slider > .col,
.medium-columns-6 > .col { flex-basis: 16.6666666667%; max-width: 16.6666666667%; }

.medium-columns-7 .flickity-slider > .col,
.medium-columns-7 > .col { flex-basis: 14.2857142857%; max-width: 14.2857142857%; }

.medium-columns-8 .flickity-slider > .col,
.medium-columns-8 > .col { flex-basis: 12.5%;          max-width: 12.5%; }

/* ==========================================================================
   LARGE COLUMNS (>= 850px)
   ========================================================================== */

.large-2  { flex-basis: 16.6666666667%; max-width: 16.6666666667%; }
.large-3  { flex-basis: 25%;            max-width: 25%; }
.large-4  { flex-basis: 33.3333333333%; max-width: 33.3333333333%; }
.large-5  { flex-basis: 41.6666666667%; max-width: 41.6666666667%; }
.large-6  { flex-basis: 50%;            max-width: 50%; }
.large-7  { flex-basis: 58.3333333333%; max-width: 58.3333333333%; }
.large-8  { flex-basis: 66.6666666667%; max-width: 66.6666666667%; }
.large-9  { flex-basis: 75%;            max-width: 75%; }
.large-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; }
.large-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; }

.gallery-columns-1 .gallery-item,
.large-12,
.large-columns-1 .flickity-slider > .col,
.large-columns-1 > .col { flex-basis: 100%; max-width: 100%; }

.gallery-columns-2 .gallery-item,
.large-columns-2 .flickity-slider > .col,
.large-columns-2 > .col { flex-basis: 50%;            max-width: 50%; }

.gallery-columns-3 .gallery-item,
.large-columns-3 .flickity-slider > .col,
.large-columns-3 > .col { flex-basis: 33.3333333333%; max-width: 33.3333333333%; }

.gallery-columns-4 .gallery-item,
.large-columns-4 .flickity-slider > .col,
.large-columns-4 > .col { flex-basis: 25%;            max-width: 25%; }

.gallery-columns-5 .gallery-item,
.large-columns-5 .flickity-slider > .col,
.large-columns-5 > .col { flex-basis: 20%;            max-width: 20%; }

.gallery-columns-6 .gallery-item,
.large-columns-6 .flickity-slider > .col,
.large-columns-6 > .col { flex-basis: 16.6666666667%; max-width: 16.6666666667%; }

.gallery-columns-7 .gallery-item,
.large-columns-7 .flickity-slider > .col,
.large-columns-7 > .col { flex-basis: 14.2857142857%; max-width: 14.2857142857%; }

.gallery-columns-8 .gallery-item,
.large-columns-8 .flickity-slider > .col,
.large-columns-8 > .col { flex-basis: 12.5%;          max-width: 12.5%; }

/* ==========================================================================
   ROW VARIANTS
   ========================================================================== */

@media (min-width: 850px) {
  .gallery,
  .row {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
  }

  .row > div:not(.col):not([class^=col-]):not([class*=" col-"]) { width: 100% !important; }

  .row.row-grid,
  .row.row-masonry { display: block; }

  .row.row-grid > .col,
  .row.row-masonry > .col { float: left; }

  .container .row:not(.row-collapse),
  .lightbox-content .row:not(.row-collapse),
  .row .gallery,
  .row .row:not(.row-collapse) {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 0;
    padding-right: 0;
    width: auto;
  }

  .row .container { padding-left: 0; padding-right: 0; }

  .banner + .row:not(.row-collapse),
  .banner-grid-wrapper + .row:not(.row-collapse),
  .section + .row:not(.row-collapse),
  .slider-wrapper + .row:not(.row-collapse) { margin-top: 30px; }
}

.row-full-width  { max-width: 100% !important; }
.row-isotope     { transition: height .3s; }
.row-reverse     { flex-direction: row-reverse; }

@media screen and (max-width: 549px) {
  .small-row-reverse { flex-direction: column-reverse; }
}

@media screen and (max-width: 849px) {
  .medium-row-reverse { flex-direction: row-reverse; }
}

/* Row collapse */
.row-collapse { padding: 0; }
.row-collapse > .col,
.row-collapse > .flickity-viewport > .flickity-slider > .col { padding: 0 !important; }
.row-collapse > .col .container { max-width: 100%; }

/* Row small */
.container .row-small:not(.row-collapse),
.row .row-small:not(.row-collapse) { margin-bottom: 0; margin-left: -10px; margin-right: -10px; }
.row-small > .col,
.row-small > .flickity-viewport > .flickity-slider > .col { margin-bottom: 0; padding: 0 9.8px 19.6px; }

/* Row xsmall */
.container .row-xsmall:not(.row-collapse),
.row .row-xsmall:not(.row-collapse) { margin-bottom: 0; margin-left: -2px; margin-right: -2px; }
.row-xsmall > .col,
.row-xsmall > .flickity-viewport > .flickity-slider > .col { margin-bottom: 0; padding: 0 2px 3px; }

/* Row large */
.container .row-large:not(.row-collapse),
.row .row-large:not(.row-collapse) { margin-bottom: 0; margin-left: -30px; margin-right: -30px; }
.row-large > .col,
.row-large > .flickity-viewport > .flickity-slider > .col { margin-bottom: 0; padding: 0 30px 30px; }

/* Row dashed / solid borders */
.row-dashed,
.row-solid { overflow: hidden; }

.row-dashed .col,
.row-solid .col { padding: 0; position: relative; }

.row-dashed .col-inner,
.row-solid .col-inner { padding: 15px; }

.row-dashed .col:before,
.row-solid .col:before {
  border-left: 1px dashed #ddd;
  content: " ";
  height: 100%;
  left: -1px;
  position: absolute;
  top: 0;
}

.row-dashed .col:after,
.row-solid .col:after {
  border-bottom: 1px dashed #ddd;
  bottom: -1px;
  content: " ";
  height: 0;
  left: 0;
  position: absolute;
  top: auto;
  width: 100%;
}

.row-solid .col:before { border-left-style: solid; }
.row-solid .col:after  { border-bottom-style: solid; }

.dark .row-dashed .col:after,
.dark .row-dashed .col:before,
.dark .row-solid .col:after,
.dark .row-solid .col:before { border-color: hsla(0, 0%, 100%, .2); }

/* Row box shadow */
.row-box-shadow-1 .col-inner,
.row-box-shadow-1-hover .col-inner,
.row-box-shadow-2 .col-inner,
.row-box-shadow-2-hover .col-inner,
.row-box-shadow-3 .col-inner,
.row-box-shadow-3-hover .col-inner,
.row-box-shadow-4 .col-inner,
.row-box-shadow-4-hover .col-inner,
.row-box-shadow-5 .col-inner,
.row-box-shadow-5-hover .col-inner { transition: transform .3s, box-shadow .3s, background-color .3s, color .3s, opacity .3s; }

.row-box-shadow-1 .col-inner,
.row-box-shadow-1-hover .col-inner:hover { box-shadow: 0 1px 3px -2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); }

.row-box-shadow-2 .col-inner,
.row-box-shadow-2-hover .col-inner:hover { box-shadow: 0 3px 6px -4px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23); }

.row-box-shadow-3 .col-inner,
.row-box-shadow-3-hover .col-inner:hover { box-shadow: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.22); }

.row-box-shadow-4 .col-inner,
.row-box-shadow-4-hover .col-inner:hover { box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.1); }

.row-box-shadow-5 .col-inner,
.row-box-shadow-5-hover .col-inner:hover { box-shadow: 0 30px 40px 0 rgba(0,0,0,.2); }

.row-box-shadow-4-hover .col-inner:hover,
.row-box-shadow-5-hover .col-inner:hover { transform: translateY(-6px); }

/* Row slider */
.row-slider { position: relative; scrollbar-width: none; }
.row-slider::-webkit-scrollbar { height: 0 !important; width: 0 !important; }
.row.row-slider:not(.flickity-enabled) { display: block; }

.row-slider .flickity-page-dots { bottom: 0; }
.row-slider .flickity-page-dots .dot {
  background-color: #111;
  border: 0;
  height: 10px;
  opacity: .2;
  width: 10px;
}

.row-slider .flickity-prev-next-button {
  background-color: transparent !important;
  box-shadow: none !important;
  opacity: .8;
  transform: translateX(0) !important;
  width: 20px !important;
}

.row-slider .flickity-prev-next-button svg { border: 0 !important; padding: 3px !important; }

/* ==========================================================================
   GRID COL (full-height images)
   ========================================================================== */

@media (min-width: 850px) {
  .row-grid .box .image-cover { height: 100%; padding: 0; }
  .grid-col > .col-inner { height: 100%; }

  .grid-col .banner,
  .grid-col .box,
  .grid-col .box-image,
  .grid-col .box-image img,
  .grid-col .col-inner > .img,
  .grid-col .flickity-slider > .img,
  .grid-col .image-cover,
  .grid-col .image-cover img,
  .grid-col .slider,
  .grid-col .slider-wrapper,
  .grid-col .slider:not(.flickity-enabled),
  .grid-col .slider > .img,
  .grid-col > .col-inner > .img,
  .grid-col > .col-inner > .img .img-inner > img,
  .grid-col > .col-inner > .img div {
    bottom: 0;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    padding: 0 !important;
    position: absolute !important;
    top: 0;
    width: 100%;
  }

  .grid-col .slider:not(.flickity-enabled) > * { position: relative !important; }
  .grid-col .box-image img { font-family: "object-fit: cover;"; }
  .grid-col .flickity-viewport { height: 100% !important; }

  .grid-col .box:not(.box-shade):not(.box-overlay):not(.box-badge) .box-text {
    background-color: hsla(0, 0%, 100%, .95);
    bottom: 0;
    padding-left: 1.5em;
    padding-right: 1.5em;
    position: absolute;
  }
}

/* ==========================================================================
   FLEX ROW / FLEX COL (header/UI layout)
   ========================================================================== */

.flex-row {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
}

.flex-row-start  { justify-content: flex-start; }
.flex-row-center { justify-content: center; }

.flex-row-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.text-center .flex-row { justify-content: center; }
.header .flex-row      { height: 100%; }
.flex-col              { max-height: 100%; }
.flex-wrap             { flex-wrap: wrap; }
.flex                  { display: flex; }

.flex-has-center > .flex-col:not(.flex-center),
.flex-has-center > .flex-row > .flex-col:not(.flex-center),
.flex-has-center > .nav-row > .flex-col:not(.flex-center) { flex: 1; }

@media (max-width: 849px) {
  .medium-flex-wrap { flex-flow: column wrap; }
  .medium-flex-wrap .flex-col { flex-grow: 0; padding-bottom: 5px; padding-top: 5px; width: 100%; }
  .medium-text-center .flex-row { justify-content: center; }
}

@media (max-width: 549px) {
  .small-flex-wrap { flex-flow: column wrap; }
  .small-flex-wrap .flex-col { flex-grow: 0; width: 100%; }
}

/* ==========================================================================
   STACK UTILITIES
   ========================================================================== */

.stack { --stack-gap: 0; display: flex; }

.stack-row            { flex-direction: row; }
.stack-row > *        { margin: 0 !important; }
.stack-row > * ~ *    { margin-left: var(--stack-gap) !important; }

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

/* Alignment */
.items-stretch   { align-items: stretch; }
.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.items-end       { align-items: flex-end; }
.items-baseline  { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

/* Medium (md:) responsive variants */
@media (max-width: 849px) {
  .md\:stack-row          { flex-direction: row; }
  .md\:stack-row > *      { margin: 0 !important; }
  .md\:stack-row > * ~ *  { margin-left: var(--stack-gap) !important; }
  .md\:stack-col          { flex-direction: column; }

  .md\:items-stretch  { align-items: stretch; }
  .md\:items-start    { align-items: flex-start; }
  .md\:items-center   { align-items: center; }
  .md\:items-end      { align-items: flex-end; }
  .md\:items-baseline { align-items: baseline; }

  .md\:justify-start   { justify-content: flex-start; }
  .md\:justify-center  { justify-content: center; }
  .md\:justify-end     { justify-content: flex-end; }
  .md\:justify-between { justify-content: space-between; }
  .md\:justify-around  { justify-content: space-around; }
}

/* Small (sm:) responsive variants */
@media (max-width: 549px) {
  .sm\:stack-row          { flex-direction: row; }
  .sm\:stack-row > *      { margin: 0 !important; }
  .sm\:stack-row > * ~ *  { margin-left: var(--stack-gap) !important; }
  .sm\:stack-col          { flex-direction: column; }

  .sm\:items-stretch  { align-items: stretch; }
  .sm\:items-start    { align-items: flex-start; }
  .sm\:items-center   { align-items: center; }
  .sm\:items-end      { align-items: flex-end; }
  .sm\:items-baseline { align-items: baseline; }

  .sm\:justify-start   { justify-content: flex-start; }
  .sm\:justify-center  { justify-content: center; }
  .sm\:justify-end     { justify-content: flex-end; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:justify-around  { justify-content: space-around; }
}

/* ==========================================================================
   SECTION
   ========================================================================== */

.section {
  align-items: center;
  display: flex;
  flex-flow: row;
  min-height: auto;
  padding: 30px 0;
  position: relative;
  width: 100%;
}

.container .section,
.row .section { padding-left: 30px; padding-right: 30px; }

/* ==========================================================================
   COL HOVER EFFECTS
   ========================================================================== */

.col-hover-blur .col-inner,
.col-hover-fade .col-inner,
.col-hover-focus .col-inner { transition: all, .2s; }

.col-hover-fade .col-inner       { opacity: .6; }
.col-hover-fade:hover .col-inner { opacity: 1; }

.col-hover-blur .col-inner       { filter: blur(3px); }
.col-hover-blur:hover .col-inner { filter: blur(0); }

.col-hover-focus:hover .col-inner { opacity: 1; }
.row:hover .col-hover-focus .col:not(:hover) { opacity: .6; }

/* Has shadow */
.has-shadow > .col > .col-inner { background-color: #fff; }

/* ==========================================================================
   CLEARFIX
   ========================================================================== */

.clear:after,
.clearfix:after,
.container:after,
.row:after { clear: both; content: ""; display: table; }
