/* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 960 Grid ================================================== */ html { min-width: 910px; } html.responsive { min-width: 0px; } .boxed#top { margin: 0 auto; overflow: visible; /* position:relative; z-index: 3; */ } .container { position: relative; width: 100%; margin: 0 auto; padding: 0px 50px; clear: both; } .inner-container{ position: relative; height:100%; width:100%; } /*no z-index for container_wrap or fixed bgs start disapearing when other elements transition -> weird chrome bug*/ .container_wrap { clear: both; position: relative; /* z-index: 1; */ border-top-style: solid; border-top-width: 1px; } .unit, .units { float: left; display: inline; margin-left: 50px; position: relative; z-index: 1; min-height: 1px; } .row { position: relative; margin-bottom: 20px; clear: both; } #wrap_all { width: 100%; position: static; /*fixes chrome 40 issue with fixed section bgs*/ z-index: 2; overflow: hidden; } .boxed #wrap_all { overflow: visible; /*needed for cart icon */ } /* Nested Column Classes */ body .unit.alpha, body .units.alpha, body div .first { margin-left: 0; clear: left; } body .unit.alpha, body .units.alpha { width: 100%; } /* Base sizes */ .container .av-content-full.units {width: 100%} .container .av-content-small.units {width: 73%} .boxed#top, .html_boxed.html_header_sticky #header{ width: 1010px; } .container{ max-width: 1010px; } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px, Gutter: 30px, Unit: 32px */ @media only screen and (min-width: 768px) and (max-width: 989px) { .responsive #top { overflow-x: hidden; } .responsive .boxed#top , .responsive.html_boxed.html_header_sticky #header{ width: 782px;} .responsive .container{ max-width: 782px; } .responsive.html_mobile_menu_tablet .boxed #wrap_all { overflow: hidden; /*needed for mobile menu scrolling */ } } /* All Tablets and smaller */ @media only screen and (max-width: 989px) { .responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell { margin: 0; margin-bottom: 20px; width: 100%; display: block; } /* added 5.0.2: remove 20px only between 767px and 989px */ .responsive #top #wrap_all .av-break-at-tablet .flex_cell.no_margin{ margin-bottom: 0; } .responsive #top #wrap_all .av-break-at-tablet-flextable, .responsive .av-layout-grid-container.av-break-at-tablet { display: block; } .responsive #top #wrap_all .av-break-at-tablet-flextable.av-mobile-columns-flex{ display: flex; flex-direction: column; } .responsive #top #wrap_all .av-break-at-tablet-flexwrapper.av-column-wrapper-individual.av-mobile-columns-flex{ display: flex; flex-direction: column; width: 100%; } .responsive #top #wrap_all .av-break-at-tablet-flextable.av-mobile-columns-flex.av-columns-reverse, .responsive #top #wrap_all .av-break-at-tablet-flexwrapper.av-column-wrapper-individual.av-mobile-columns-flex.av-columns-reverse{ flex-direction: column-reverse; } .responsive #top #wrap_all .av-flex-cells .no_margin{ height:auto !important; overflow: hidden; } } /* #Mobile (Portrait) ================================================== */ @media only screen and (max-width: 767px) { .responsive .boxed #wrap_all { overflow: hidden; /*needed for mobile menu scrolling */ } .responsive #top { overflow-x: hidden; } .responsive .boxed#top, .responsive #top.boxed .stretch_full , .responsive.html_boxed.html_header_sticky #header, .responsive.html_boxed.html_header_transparency div #header{ width: 100%; max-width: 100%; } .responsive #top .flex_column_table_cell{display: block;} .responsive #top .flex_column_table{display:block;} .responsive #top #wrap_all .av-mobile-columns-flex{ display: flex; flex-direction: column; width: 100%; } .responsive #top #wrap_all .av-mobile-columns-flex.av-columns-reverse{ flex-direction: column-reverse; } .responsive #top #wrap_all .container { width: 85%; max-width: 85%; margin: 0 auto; padding-left:0; padding-right:0; float:none; } .responsive .units, .responsive .unit { margin: 0; } .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin { margin: 0; margin-bottom: 20px; width: 100%; } .responsive #top #wrap_all .av-flex-cells .no_margin{ display: block; margin: 0; height:auto !important; overflow: hidden; padding-left:8% !important; padding-right:8% !important; } .responsive #top #wrap_all .av-flex-cells .no_margin .flex_cell_inner{ width: 100%; max-width: 100%; margin: 0 auto; } .responsive #top #wrap_all .av-flex-cells .no_margin.av-zero-padding{ padding-left:0% !important; padding-right:0% !important; } .responsive #top #wrap_all .flex_column:empty{ margin:0; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested units, or wrap each row of units in a