/* 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%; }
}