/*
Simple Frame V1.0
Lightweight responsive grid framework, with basic flexbox functionality.
*/

/*
Author: HMG Creative
Author URI: http://hmgcreative.com/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS
----------------------------------------------------------------
#1.0 - CONTAINERS & ROWS
#2.0 - FLEX CLASSES
#3.0 - VISIBILITY
#4.0 - XS COLUMNS
#5.0 - SM COLUMNS
#6.0 - MD COLUMNS
#7.0 - LG COLUMNS
#8.0 - XL COLUMNS
#9.0 - NESTED ROWS
#10.0 - CLEARING

============================================================= */


/*--------------------------------------------------------------
#1.0 - CONTAINERS & ROWS
--------------------------------------------------------------*/
.container {
  width: 100%;
}
.row {
  margin-right: auto;
  margin-left: auto;
}

.inner-row, .site-header > .section {
  margin-left: auto;
  margin-right: auto;
}

[class*="col-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
  width: 100%;
}

@-ms-viewport {
  width: device-width;
}


/*--------------------------------------------------------------
#2.0 - FLEX CLASSES
--------------------------------------------------------------*/
.flex {
  display: -webkit-box; 
  display: -moz-box; 
  display: -ms-flexbox; 
  display: -webkit-flex; 
  display: flex;

  -webkit-box-lines: multiple; 
     -moz-box-lines: multiple; 
      -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}

.flex.center {
         -webkit-box-pack: center; 
            -moz-box-pack: center; 
            -ms-flex-pack: center; 
  -webkit-justify-content: center; 
          justify-content: center; 
}

.flex.vertical-center {
    -webkit-box-align: center; 
       -moz-box-align: center; 
       -ms-flex-align: center; 
  -webkit-align-items: center; 
          align-items: center; 
}


/*--------------------------------------------------------------
#3.0 - VISIBILITY
--------------------------------------------------------------*/
.hidden, .hidden-xs, 
.sm-only, .md-only, .lg-only, .xl-only {
  display: none;
  opacity: 0;
  visibility: hidden;
}


/*--------------------------------------------------------------
#4.0 - XS COLUMNS
--------------------------------------------------------------*/
@media screen and (min-width: 481px) {
  .col-xs-12 { width: 100%; }
  .col-xs-11 { width: 91.66666667%; }
  .col-xs-10 { width: 83.33%; }
  .col-xs-9 { width: 75%; }
  .col-xs-8 { width: 66.5%; }
  .col-xs-7 { width: 58.33%; }
  .col-xs-6 { width: 50%; }
  .col-xs-5 { width: 41.5%; }
  .col-xs-4 { width: 33.33%; }
  .col-xs-3 { width: 25%; }
  .col-xs-2 { width: 16.66666667%; }
  .col-xs-1 { width: 8.33%; }

/* OFFSETS */
  .col-xs-offset-12 { margin-left: 100%; }
  .col-xs-offset-11 { margin-left: 91.66666667%; }
  .col-xs-offset-10 { margin-left: 83.33%; }
  .col-xs-offset-9 { margin-left: 75%; }
  .col-xs-offset-8 { margin-left: 66.5%; }
  .col-xs-offset-7 { margin-left: 58.33%; }
  .col-xs-offset-6 { margin-left: 50%; }
  .col-xs-offset-5 { margin-left: 41.66666667%; }
  .col-xs-offset-4 { margin-left: 33.33%; }
  .col-xs-offset-3 { margin-left: 25%; }
  .col-xs-offset-2 { margin-left: 16.66666667%; }
  .col-xs-offset-1 { margin-left: 8.33%; }
  .col-xs-offset-0 { margin-left: 0%; }

  /* HIDE / SHOW */
  .xs-only {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .hidden-xs {
    display: initial;
    opacity: 1;
    visibility: visible;
  }
}

@media screen and (max-width: 767px) {
  .visible-xs {
    display: initial;
    opacity: 1;
    visibility: visible;
  }
}


/*--------------------------------------------------------------
#5.0 - SM COLUMNS
--------------------------------------------------------------*/
@media screen and (min-width: 768px) {
  .inner-row, .site-header > .section { width: 750px; }

  .col-sm-12 { width: 100%; }
  .col-sm-11 { width: 91.66666667%; }
  .col-sm-10 { width: 83.33%; }
  .col-sm-9 { width: 75%; }
  .col-sm-8 { width: 66.5%; }
  .col-sm-7 { width: 58.33%; }
  .col-sm-6 { width: 50%; }
  .col-sm-5 { width: 41.5%; }
  .col-sm-4 { width: 33.33%; }
  .col-sm-3 { width: 25%; }
  .col-sm-2 { width: 16.66666667%; }
  .col-sm-1 { width: 8.33%; }

/* OFFSETS */
  .col-sm-offset-12 { margin-left: 100%; }
  .col-sm-offset-11 { margin-left: 91.66666667%; }
  .col-sm-offset-10 { margin-left: 83.33%; }
  .col-sm-offset-9 { margin-left: 75%; }
  .col-sm-offset-8 { margin-left: 66.5%; }
  .col-sm-offset-7 { margin-left: 58.33%; }
  .col-sm-offset-6 { margin-left: 50%; }
  .col-sm-offset-5 { margin-left: 41.66666667%; }
  .col-sm-offset-4 { margin-left: 33.33%; }
  .col-sm-offset-3 { margin-left: 25%; }
  .col-sm-offset-2 { margin-left: 16.66666667%; }
  .col-sm-offset-1 { margin-left: 8.33%; }
  .col-sm-offset-0 { margin-left: 0%; }
}

/* HIDE / SHOW */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .sm-only, .visible-sm {
    display: initial;
    opacity: 1;
    visibility: visible;
  }
}


/*--------------------------------------------------------------
#6.0 - MD COLUMNS
--------------------------------------------------------------*/
@media screen and (min-width: 992px) {
  .inner-row, .site-header > .section { width: 970px; }

  .col-md-12 { width: 100%; }
  .col-md-11 { width: 91.66666667%; }
  .col-md-10 { width: 83.33%; }
  .col-md-9 { width: 75%; }
  .col-md-8 { width: 66.5%; }
  .col-md-7 { width: 58.33%; }
  .col-md-6 { width: 50%; }
  .col-md-5 { width: 41.5%; }
  .col-md-4 { width: 33.33%; }
  .col-md-3 { width: 25%; }
  .col-md-2 { width: 16.66666667%; }
  .col-md-1 { width: 8.33%; }

/* OFFSETS */
  .col-md-offset-12 { margin-left: 100%; }
  .col-md-offset-11 { margin-left: 91.66666667%; }
  .col-md-offset-10 { margin-left: 83.33%; }
  .col-md-offset-9 { margin-left: 75%; }
  .col-md-offset-8 { margin-left: 66.5%; }
  .col-md-offset-7 { margin-left: 58.33%; }
  .col-md-offset-6 { margin-left: 50%; }
  .col-md-offset-5 { margin-left: 41.66666667%; }
  .col-md-offset-4 { margin-left: 33.33%; }
  .col-md-offset-3 { margin-left: 25%; }
  .col-md-offset-2 { margin-left: 16.66666667%; }
  .col-md-offset-1 { margin-left: 8.33%; }
  .col-md-offset-0 { margin-left: 0%; }
}

/* HIDE / SHOW */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .md-only, .visible-md {
    display: initial;
    opacity: 1;
    visibility: visible;
  }
}


/*--------------------------------------------------------------
#7.0 - LG COLUMNS
--------------------------------------------------------------*/
@media screen and (min-width: 1200px) {
  .inner-row, .site-header > .section { width: 1170px; }

  .col-lg-12 { width: 100%; }
  .col-lg-11 { width: 91.66666667%; }
  .col-lg-10 { width: 83.33%; }
  .col-lg-9 { width: 75%; }
  .col-lg-8 { width: 66.5%; }
  .col-lg-7 { width: 58.33%; }
  .col-lg-6 { width: 50%; }
  .col-lg-5 { width: 41.5%; }
  .col-lg-4 { width: 33.33%; }
  .col-lg-3 { width: 25%; }
  .col-lg-2 { width: 16.66666667%; }
  .col-lg-1 { width: 8.33%; }

/* OFFSETS */  
  .col-lg-offset-12 { margin-left: 100%; }
  .col-lg-offset-11 { margin-left: 91.66666667%; }
  .col-lg-offset-10 { margin-left: 83.33%; }
  .col-lg-offset-9 { margin-left: 75%; }
  .col-lg-offset-8 { margin-left: 66.5%; }
  .col-lg-offset-7 { margin-left: 58.33%; }
  .col-lg-offset-6 { margin-left: 50%; }
  .col-lg-offset-5 { margin-left: 41.66666667%; }
  .col-lg-offset-4 { margin-left: 33.33%; }
  .col-lg-offset-3 { margin-left: 25%; }
  .col-lg-offset-2 { margin-left: 16.66666667%; }
  .col-lg-offset-1 { margin-left: 8.33%; }
  .col-lg-offset-0 { margin-left: 0%; }
}

/* HIDE / SHOW */
@media screen and (min-width: 1200px) and (max-width: 1599px) {
  .hidden-lg {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .lg-only, .visible-lg {
    display: initial;
    opacity: 1;
    visibility: visible;
  }
}


/*--------------------------------------------------------------
#8.0 - XL COLUMNS
--------------------------------------------------------------*/
@media screen and (min-width: 1600px) {
  .inner-row, .site-header > .section { width: 1200px; }

  .col-xl-12 { width: 100%; }
  .col-xl-11 { width: 91.66666667%; }
  .col-xl-10 { width: 83.33%; }
  .col-xl-9 { width: 75%; }
  .col-xl-8 { width: 66.5%; }
  .col-xl-7 { width: 58.33%; }
  .col-xl-6 { width: 50%; }
  .col-xl-5 { width: 41.5%; }
  .col-xl-4 { width: 33.33%; }
  .col-xl-3 { width: 25%; }
  .col-xl-2 { width: 16.66666667%; }
  .col-xl-1 { width: 8.33%; }

/* OFFSETS */  
  .col-xl-offset-12 { margin-left: 100%; }
  .col-xl-offset-11 { margin-left: 91.66666667%; }
  .col-xl-offset-10 { margin-left: 83.33%; }
  .col-xl-offset-9 { margin-left: 75%; }
  .col-xl-offset-8 { margin-left: 66.5%; }
  .col-xl-offset-7 { margin-left: 58.33%; }
  .col-xl-offset-6 { margin-left: 50%; }
  .col-xl-offset-5 { margin-left: 41.66666667%; }
  .col-xl-offset-4 { margin-left: 33.33%; }
  .col-xl-offset-3 { margin-left: 25%; }
  .col-xl-offset-2 { margin-left: 16.66666667%; }
  .col-xl-offset-1 { margin-left: 8.33%; }
  .col-xl-offset-0 { margin-left: 0%; }

  /* HIDE / SHOW */
  .hidden-xl {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .xl-only, .visible-xl {
    display: initial;
    opacity: 1;
    visibility: visible;
  }
}


/*--------------------------------------------------------------
#9.0 - NESTED ROWS
--------------------------------------------------------------*/
.inner-row .inner-row {
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-bottom: 20px;
}


/*--------------------------------------------------------------
#10.0 - CLEARING
--------------------------------------------------------------*/
.container:after { content: ""; display: table; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested columns, 
or use the clearfix applied to .inner-row */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after,
.inner-row:before,
.inner-row:after {
  content: '';
  display: table;
  overflow: hidden;
  visibility: hidden;
 }
.row:after, 
.inner-row:after,
.clearfix:after {
  clear: both; }
    
/* You can also use a <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}