/* V2.0 */
/*//// FUNCTIONS PT. 1 - FLEX - SPLATSTRAP MODULE ////*/

/*// FLEX CONTAINER //*/ 
.splat-flex-container { 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}

/*// BRUTE CLASSES //*/
/*/ COLLAPSED ROW CLASS TO FORCE LINE BREAK /*/ 
.break { flex-basis: 100% !important; height: 0 !important; }

/* ADD TO FLEX CONTAINER TO FORCE BEHAVIOR */
.force-container-row { flex-direction: row !important; }
.force-container-column { flex-direction: column !important; }
.force-no-wrap { flex-wrap: nowrap !important; }
.force-container-space-around { justify-content: space-around !important; }
.force-container-space-between { justify-content: space-between !important; }

/*// FLEX ITEMS - SHARED PROPERTIES //*/ 
.splat-flex-container > .splat-flex-item-100,
.splat-flex-container > .splat-flex-item-90,
.splat-flex-container > .splat-flex-item-80,
.splat-flex-container > .splat-flex-item-75,
.splat-flex-container > .splat-flex-item-70,
.splat-flex-container > .splat-flex-item-66, 
.splat-flex-container > .splat-flex-item-60,
.splat-flex-container > .splat-flex-item-50,
.splat-flex-container > .splat-flex-item-40,
.splat-flex-container > .splat-flex-item-33,
.splat-flex-container > .splat-flex-item-30,
.splat-flex-container > .splat-flex-item-25,
.splat-flex-container > .splat-flex-item-20,
.splat-flex-container > .splat-flex-item-12,
.splat-flex-container > .splat-flex-item-10 {
    box-sizing: border-box;
    position: relative;
    height: auto;
    min-height: 1px;
    box-sizing: border-box;
    /*border: 1px solid silver;*/
}

/*// FLEX ITEMS - INITIAL WIDTH //*/ 
.splat-flex-container > .splat-flex-item-100 { width: 100%; }
.splat-flex-container > .splat-flex-item-90 { width: 90%; }
.splat-flex-container > .splat-flex-item-80 { width: 80%; }
.splat-flex-container > .splat-flex-item-75 { width: 75%; }
.splat-flex-container > .splat-flex-item-70 { width: 70%; }
.splat-flex-container > .splat-flex-item-66 { width: 66.666%; }
.splat-flex-container > .splat-flex-item-60 { width: 60%; }
.splat-flex-container > .splat-flex-item-50 { width: 50%; }
.splat-flex-container > .splat-flex-item-40 { width: 40%; }
.splat-flex-container > .splat-flex-item-33 { width: 33.333%; }
.splat-flex-container > .splat-flex-item-30 { width: 30%; }
.splat-flex-container > .splat-flex-item-25 { width: 25%; }
.splat-flex-container > .splat-flex-item-20 { width: 20%; }
.splat-flex-container > .splat-flex-item-12 { width: 12.5%; }
.splat-flex-container > .splat-flex-item-10 { width: 10%; }

@media only screen and (max-width: 850px) {
    /*// FLEX CONTAINER //*/ 
    .splat-flex-container { height: auto !important; padding: 0 !important; }
    .splat-flex-container > div { /*padding: 5%  7.5% !important;*/ }

    /* FORCED BEHAVIORS */
    .force-container-row {}
    .force-container-column {}
    .force-no-wrap {}
    .force-container-space-around {}
    .force-container-space-between { justify-content: space-around !important; }

    /*// FLEX ITEMS - WIDTH //*/ 
    .splat-flex-container > .splat-flex-item-100 { width: 100%; }
    .splat-flex-container > .splat-flex-item-90 { width: 100%; }
    .splat-flex-container > .splat-flex-item-80 { width: 100%; }
    .splat-flex-container > .splat-flex-item-75 { width: 75%; }
    .splat-flex-container > .splat-flex-item-70 { width: 75%; }
    .splat-flex-container > .splat-flex-item-66 { width: 75%; }
    .splat-flex-container > .splat-flex-item-60 { width: 75%; }
    .splat-flex-container > .splat-flex-item-50 { width: 50%; }
    .splat-flex-container > .splat-flex-item-40 { width: 50%; }
    .splat-flex-container > .splat-flex-item-33 { width: 50%; }
    .splat-flex-container > .splat-flex-item-30 { width: 50%; }
    .splat-flex-container > .splat-flex-item-25 { width: 25%; }
    .splat-flex-container > .splat-flex-item-20 { width: 25%; }
    .splat-flex-container > .splat-flex-item-12 { width: 25%; }
    .splat-flex-container > .splat-flex-item-10 { width: 25%; }
}

@media only screen and (max-width: 768px) {
    .splat-flex-container { width: 100% !important; }

    /*// FLEX ITEMS - WIDTH //*/ 
    .splat-flex-container > .splat-flex-item-75 { width: 100%; }
    .splat-flex-container > .splat-flex-item-70 { width: 100%; }
    .splat-flex-container > .splat-flex-item-66 { width: 100%; }
    .splat-flex-container > .splat-flex-item-60 { width: 100%; }
    .splat-flex-container > .splat-flex-item-50 { width: 75%; }
    .splat-flex-container > .splat-flex-item-25 { width: 50%; }
    .splat-flex-container > .splat-flex-item-20 { width: 50%; }
    .splat-flex-container > .splat-flex-item-12 { width: 50%; }
    .splat-flex-container > .splat-flex-item-10 { width: 50%; }
} 

@media only screen and (max-width: 600px) { 
    /*// FLEX ITEMS - WIDTH //*/ 
    .splat-flex-container > .splat-flex-item-50 { width: 100%; }
    .splat-flex-container > .splat-flex-item-40 { width: 100%; }
    .splat-flex-container > .splat-flex-item-33 { width: 100%; }
    .splat-flex-container > .splat-flex-item-30 { width: 100%; }
    .splat-flex-container > .splat-flex-item-25 { width: 100%; }
    .splat-flex-container > .splat-flex-item-20 { width: 100%; }
    .splat-flex-container > .splat-flex-item-12 { width: 100%; }
    .splat-flex-container > .splat-flex-item-10 { width: 100%; }
}




/*//// FUNCTIONS PT. 2 - VISIBILITY - RETINA MODULE ////*/
.hide-laptop-and-smaller, .hide-tablet-and-smaller, .hide-mobile-and-smaller { display: block !important; }
      @media only screen and (max-width: 1300px) { .hide-laptop-and-smaller { display: none !important; } }
      @media only screen and (max-width: 1024px) { .hide-tablet-and-smaller { display: none !important; } }
      @media only screen and (max-width: 824px) { .hide-mobile-and-smaller { display: none !important; } }
.show-laptop-and-larger, .show-tablet-and-larger, .show-mobile-and-larger { display: block !important; }
      @media only screen and (max-width: 1100px) { .show-laptop-and-larger { display: none !important; } }
      @media only screen and (max-width: 1024px) { .show-tablet-and-larger { display: none !important; } }
      @media only screen and (max-width: 824px) { .show-mobile-and-larger { display: none !important; } }
.hide-laptop-and-larger, .hide-tablet-and-larger, .hide-mobile-and-larger { display: none !important; } 
      @media only screen and (max-width: 1100px) {.hide-laptop-and-larger { display: block !important; } }
      @media only screen and (max-width: 1024px) {.hide-tablet-and-larger { display: block !important; } }
      @media only screen and (max-width: 824px) {.hide-mobile-and-larger { display: block !important; } }
.show-laptop-and-smaller, .show-tablet-and-smaller, .show-mobile-and-smaller { display: none !important; }
      @media only screen and (max-width: 1100px) { .show-laptop-and-smaller { display: block !important; } }
      @media only screen and (max-width: 1024px) { .show-tablet-and-smaller { display: block !important; } }
      @media only screen and (max-width: 824px) { .show-mobile-and-smaller { display: block !important; } }
.show-portrait, .show-landscape { display: none; }
      @media only screen and (orientation: portrait) { .show-portrait { display: block !important; } }
      @media only screen and (orientation: landscape) { .show-landscape { display: block !important; } }



/*//// FUNCTIONS PT. 3 - BACKGROUND IMAGE SIZES - BAR-BACK MODULE ////*/
/*// MEDIUM DEVICE - IMG/MEDIUM DIR //*/
@media only screen and (max-width: 1400px) { }
/*// SMALL DEVICE - IMG/SMALL DIR //*/
@media only screen and (max-width: 813px) { }


/*// UTILITY - CLEAR-FIX //*/
/*ADD .clear CLASS TO CLEAR HANGING FLOATS*/
  .clear:before, .clear:after { content:' '; display: table; }
  .clear:after { clear: both; }
  .clear { *zoom:1; }


/*//// ACCESSIBILITY ////*/
  a:focus, textarea:focus, 
  input[type=text]:focus,
  input[type=tel]:focus, 
  input[type=email]:focus {
     outline: 1px auto #fcbf0f;
     outline-color: #fcbf0f;
  }