/* Legacy Grid */ // TODO: replace all instances of legacy grid in markup and styles // TODO: delete this partial

/* Now For Some of my Breakpoints Loves:

1680 - Large Screen
1480 - Big Screen
1200 - Regular Screen
 992 - Large Tablet
 768 - Tablet
 480 - Phone

*/

@media (min-width: 768px) and (max-width: 991px) { .container { max-width: 728px; } }

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

@media (min-width: 1200px) { .container { max-width: 1170px; } }

@media (min-width: 1480px) { .container { max-width: 1400px; } }

@media (min-width: 1680px) { .container { max-width: 1600px; } }

.responsive-icon {

font-size: 24px;
display: none;

@media (max-width: 768px) {
  display: inline-block;
}

}

.responsive-text-hide {

display: none;

@media (min-width: 768px) {
  display: inline-block;
}

}

.pad-bottom {

padding-bottom: 40px;

}

.container {

margin-right: auto;
margin-left: auto;
width: 100%;

}

.container:before, .container:after {

display: table;
content: " ";

}

.container:after {

clear: both;

}

.row:before, .row:after {

display: table;
content: " ";

}

.row:after {

clear: both;

}

@media (min-width: 768px) {

.row {
  margin-right: -15px;
  margin-left: -15px;
}

}

.row .row {

margin-right: -15px;
margin-left: -15px;

}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {

position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;

}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {

float: left;

}

@media (max-width: 480px) {

.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12 {
  display: block;
  width: 100%;
  margin-left: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

}

@media (min-width: 480px) and (max-width: 768px) {

.col1,
.col2,
.col3,
.col4,
.col5 {
  width: 50%;
}

.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12 {
  width: 100%;
}

}

@media (min-width: 768px) {

.col1   { width: 8.333333333333332%; }
.col2   { width: 16.666666666666664%; }
.col3   { width: 25%; }
.col4   { width: 33.33333333333333%; }
.col5   { width: 41.66666666666667%; }
.col6   { width: 50%; }
.col7   { width: 58.333333333333336%; }
.col8   { width: 66.66666666666666%; }
.col9   { width: 75%; }
.col10  { width: 83.33333333333334%; }
.col11  { width: 91.66666666666666%; }
.col12  { width: 100%; }

.offset1   { margin-left: 8.333333333333332%; }
.offset2   { margin-left: 16.666666666666664%; }
.offset3   { margin-left: 25%; }
.offset4   { margin-left: 33.33333333333333%; }
.offset5   { margin-left: 41.66666666666667%; }
.offset6   { margin-left: 50%; }
.offset7   { margin-left: 58.333333333333336%; }
.offset8   { margin-left: 66.66666666666666%; }
.offset9   { margin-left: 75%; }
.offset10  { margin-left: 83.33333333333334%; }
.offset11  { margin-left: 91.66666666666666%; }

}