@media only screen and (max-width: 1210px) { .sf-with-ul { padding-right: 0; } .menu-delivery-popup .vertical-container { width: 90%; } } @media only screen and (max-width: 1024px) { .menu-delivery-popup { padding-top: 1em; overflow-y: scroll; } .menu-delivery-popup .vertical-container { position: static; top: inherit; left: inherit; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; margin: 0 auto 1em; } header h1, header .logo-holder { float: none; margin: 0.5em auto; } header ul.mixed { list-style: none; float: none; margin: 1.3em auto 1em; display: table; } header ul.mixed li { display: table-cell; float: none; vertical-align: top; padding: 0 3px; } a.basket { margin-left: 0; } .topHeader div.content, header { width: 100%; max-width: none; } .topHeader div.content { padding: 0 1em; } .userArea { right: 16px; } .searchBox { right: 54px; } .languageSelector { right: 92px; } .currencySelector { right: 130px; } .fbLinkHeader { right: 168px; } .locationIcon { right: 132px; } #headerWrapper header { position: relative; } .topHeader div.content { min-height: 36px; } #content .col.productGallery { margin-left: 1%; } #content .span_5_of_5, #content .span_4_of_5, #content .span_3_of_5, #content .span_2_of_5, #content .span_1_of_5 { width: 100%; } #content { padding-top: 0.5em; } #sideNav { margin-bottom: 0; } ul.sideNav a.dcjq-parent { padding-right: 24px; } #content .col { margin: 0 0 0.5em 0; } #content .contentFooter .col { margin-left: 1%; margin-bottom: 0; } #content .contentFooter .col:first-child { margin-left: 0; } .categoryFilter { padding: 0; margin-top: 0.5em; margin-bottom: 0; border: solid 1px #111111; } .categoryFilter ul li.hidden { display: block; } .categoryFilter h2, .categoryFilter ul { display: none; } .categoryFilter h2.alwaysShow { display: block; margin: 0 0.5em 0.5em; } .categoryFilter ol { margin: 0 0 0.5em; } .filterBody .categoryFilter ol li { margin: 0; } .categoryFilter .tinynav { display: block; margin: 0 auto 0.5em; width: 98%; } .goMobile-btn { display: block; } .goMobile-subArrow { background-image: url(https://juicebox.easx.eu/layout/sprites.png?v-637211276026100000); } .goMobile-subArrow { display: block !important; background-color: #eeeeee; background-repeat: no-repeat; background-position: -82px 9px; height: 25px; width: 25px; position: absolute; top: 6px; right: 5px; cursor: pointer; } .goMobile-subArrow.active { background-position: -82px -17px; } .goMobile-subArrow:hover { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-color: #dddddd; } .sf-menu { width: 100% !important; display: none; float: none; padding: 0; margin-top: 0.5em; } .sf-menu a { padding: 0.8em 1em !important; border-bottom: solid 1px #eeeeee; } .sf-menu ul li a { background: #ffffff; } .sf-menu ul li a:link, .sf-menu ul li a:visited { color: #000000; } .sf-menu ul li a:hover, .sf-menu ul li a:active { color: #20e434; } .sf-menu > li:before { display: none; } .sf-menu > li { padding-left: 0; } .sf-menu.xactive { display: block !important; clear: both; } .sf-menu ul { display: none !important; position: static !important; width: 100% !important; box-shadow: none !important; border: none !important; } .sf-menu ul ul, .sf-menu .flyOutLeft ul ul { left: 0; display: none; } .sf-with-ul { padding-right: 0; } .sf-menu li { float: none !important; display: block !important; width: 100% !important; } .sf-menu .xpopdrop { display: block !important; } .sf-menu ul li a { padding-left: 1.5em !important; } .sf-menu ul ul li a { padding-left: 2em !important; } .sf-menu ul ul ul li a { padding-left: 2.5em !important; } header .tinynav { display: none; } #headerWrapper ul.sideNav a.topLevel { display: block; background: #00673B; color: #ffffff !important; position: relative; float: right; margin: -55px 40px 0 0; } #headerWrapper #sideNav { margin: 0 auto 0; position: relative; width: 100%; display: block; } #headerWrapper #sideNav ul.sideNav ul { top: 100%; width: 100%; background: #00673B; z-index: 99999; text-align: center; } #headerWrapper #sideNav ul.sideNav ul li { display: block; text-align: left; border-bottom: 1px solid #005E36; } #headerWrapper #sideNav ul.sideNav ul li a { padding: 0.5em 50px; font-weight: 600; } #headerWrapper #sideNav ul.sideNav ul li ul { position: relative; } #headerWrapper #sideNav ul.sideNav ul li ul li a { padding: 0.5em 70px; font-weight: 300; } #headerWrapper #sideNav ul.sideNav ul li .dcjq-icon { right: 3.4em; } .productList .productBox { margin-left: 1%; } .productList .productBox:nth-child(4n+1) { margin-left: 0; } .smallBanners.showOnMobile { margin: 0 auto 1em; max-width: 70em; width: 92%; } .smallBanners.showOnMobile .smallBanner { margin-left: 1%; width: 49.5%; } .smallBanners.showOnMobile .smallBanner:nth-child(2n+1) { margin-left: 0; } .filterBody .formElement { width: 49.5%; margin-left: 1%; } .filterBody .formElement:nth-child(2n+1) { margin-left: 0; } .goMobile-btn-product { display: block; color: #000000; } .goMobile-product-subArrow { display: block !important; background-color: #eeeeee; background-repeat: no-repeat; background-position: -82px 9px; height: 25px; width: 25px; position: absolute; top: 6px; right: 5px; cursor: pointer; } .goMobile-product-subArrow.active { background-position: -82px -17px; } .goMobile-product-subArrow:hover { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-color: #dddddd; } #productNav { padding: 0 1em; } .product-menu { width: 100% !important; max-width: none; display: none; float: none; padding: 0; } .product-menu.xactive { display: block !important; clear: both; } .product-menu ul { display: none !important; position: static !important; width: 100% !important; box-shadow: none !important; border: none !important; } .product-menu ul li { background: none; } .product-menu ul ul, .product-menu .flyOutLeft ul ul { left: 0; display: none; } .product-menu li { float: none !important; display: block !important; width: 100% !important; margin: 0; } .product-menu > li:before { display: none; } .product-menu a { padding: 0.8em 1em !important; font-size: 0.875em; border-bottom: solid 1px #eeeeee; } .product-menu ul li a { background: #ffffff; } .product-menu ul li a:link, .product-menu ul li a:visited { color: #000000; } .product-menu ul li a:hover, .product-menu ul li a:active { color: #20e434; } .product-menu.sf-arrows .sf-with-ul:after { display: none !important; } .product-menu .xpopdrop { display: block !important; } .product-menu ul li a { padding-left: 1.5em !important; } .product-menu ul ul li a { padding-left: 2em !important; } .product-menu ul ul ul li a { padding-left: 2.5em !important; } .slidingBox { width: 49%; } .slidingBoxes .slidingBox:nth-child(3n+1) { margin-left: 2%; } .slidingBoxes .slidingBox:nth-child(2n+1) { margin-left: 0; } } @media only screen and (max-width: 900px) { .additionsList li, .exclusionList li { width: 50%; } .additionsList li:nth-child(3n+1), .additionsList li:nth-child(3n+2) { padding-right: 5px; } .additionsList li:nth-child(2n+1) { padding-right: 40px; } } @media only screen and (max-width: 800px) { #content .span_1_of_2, #content .span_2_of_2 { width: 100%; } #content .wysiwyg .span_1_of_3, #content .wysiwyg .span_2_of_3, #content .wysiwyg .span_3_of_3 { width: 100%; margin-bottom: 1em; } .productList .productBox { width: 32.66666666666667%; margin-left: 1%; } .productList .productBox:nth-child(3n+1) { margin-left: 0; } .productList .productBox:nth-child(4n+5) { margin-left: 1%; } .smallBanners { width: 92%; margin: 0 auto 0.5em; } .smallBanners.showOnMobile .smallBanner { width: 49.5%; margin-left: 1%; } .smallBanners.showOnMobile .smallBanner:nth-child(2n+1) { margin-left: 0 !important; } .contentList .contentBlock article { width: 49.5%; } .contentList .contentBlock article:nth-child(3n+1) { margin-left: 1%; } .contentList .contentBlock article:nth-child(2n+1) { margin-left: 0; } footer .content { width: 100%; } footer div.col { display: block; width: 100%; margin: 0; padding: 0 1em; } footer h3 { text-align: center; } footer address, footer .newsletter { text-align: center; margin: 0 0 1em; } footer .iFrameContainer { width: 70%; margin: 0 auto 1em; } footer address p { padding-left: 0; } .newsletter { padding: 1em; } .newsletter p { padding: 0; } .newsletterBox { max-width: 260px; margin: 0 auto; } p#footerSig, p#author { display: block; padding: 0.5em; margin: 0 auto; text-align: center; } ul.socialIcons { text-align: center; padding: 1em 0 0; } .footerLogo { padding: 1em 0 0; } .indexArticles article { margin: 0 0 1em 0 !important; clear: both !important; width: 100%; float: none; } .menu-delivery-popup .span_1_of_2, .menu-delivery-popup .span_1_of_5, .menu-delivery-popup .span_2_of_5, .menu-delivery-popup .span_3_of_5, .menu-delivery-popup .span_4_of_5 { width: 100%; margin-left: 0; margin-bottom: 1em; float: none; } .menuDeliveryChoice .email-group .login-button { text-align: center; padding-top: 0; } } @media only screen and (max-width: 768px) { header .userBar { position: static; text-align: right; margin-top: 0.5em; } #content .contentFooter ol { text-align: center; } .productList .productBox { width: 49.5%; } .productList .productBox:nth-child(2n+1) { margin-left: 0; } .resp-tabs-container .relatedProducts.productList .productBox { width: 49.5%; } .resp-tabs-container .relatedProducts.productList .productBox:nth-child(2n+1) { margin-left: 0; } #content .span_1_of_2.productDetails, #content .span_1_of_2.productGallery { width: 100%; margin-left: 0; } #featureTabs { margin-bottom: 0.5em !important; } .resp-tab-content { border: 1px solid #eeeeee; } ul.resp-tabs-list { display: none; } h2.resp-accordion { display: block; } h2.resp-accordion br { display: none; } h2.resp-accordion br:after { content: " "; } .resp-vtabs .resp-tab-content { border: 1px solid #C1C1C1; } .resp-vtabs .resp-tabs-container { border: none; float: none; width: 100%; min-height: initial; clear: none; margin-bottom: 0.5em; } .resp-accordion-closed { display: none !important; } .resp-vtabs .resp-tab-content:last-child { border-bottom: 1px solid #c1c1c1 !important; } .contentForm .fieldLabel { display: block; float: none; width: 100%; text-align: left; padding: 0 1%; } .contentForm .formField { width: 100%; float: none; padding: 0 1%; } .contentForm .formField.breakInline select { margin-bottom: 0.5em; } .contentForm .inset { padding: 0 1%; text-align: center; } .contentForm .inset .formField { float: none; } .contentForm input.txtBox, .contentForm .txtArea, .contentForm select { width: 100%; } .contentForm .txtArea { max-width: 100%; min-width: 100%; } .contentForm .hidden input.txtBox, .contentForm .hidden .txtArea, .contentForm .hidden select { width: 80%; } .contentForm .hidden .txtArea { max-width: 80%; min-width: 80%; } .narrow { display: table; } .wide { display: none; } .contentFooter .span_3_of_4, .contentFooter .span_1_of_4 { width: 100%; } #content .contentFooter .col { margin-left: 0; float: none; } .contentFooter ol { margin: 0.5em 0 0; } .smallBanners.showOnMobile .smallBanner { width: 49.5%; } .smallBanners.showOnMobile .smallBanner:nth-child(2n+1) { margin-left: 0; } .productList .productBox:nth-child(2n+1) { margin-left: 0; } .productList .productBox:nth-child(2n+4) { margin-left: 1%; } .menu .menu-items .serving-icon { display: block; margin-bottom: 3px; } .menu .menu-caption .serving-icon { display: none; } .menu .menu-title { float: none; padding-top: 0; width: 100% !important; } .menu .menu-item-title { float: none; width: 100% !important; } .menu .menu-items .menu-variants { float: none; width: 100%; padding-left: 3em; } .menu .menu-items .menu-variant-price { padding: 0 5px 10px; } .slidingBox { display: block; width: 100%; float: none; margin: 2% auto; } } @media screen and (max-width: 767px) { .sizeGuideWrapper .table-responsive { border: 1px solid #ddd; margin-bottom: 15px; overflow-y: hidden; width: 100%; } .sizeGuideWrapper .table-responsive > .table { margin-bottom: 0; } .sizeGuideWrapper .table-responsive > .table > thead > tr > th, .sizeGuideWrapper .table-responsive > .table > tbody > tr > th, .sizeGuideWrapper .table-responsive > .table > tfoot > tr > th, .sizeGuideWrapper .table-responsive > .table > thead > tr > td, .sizeGuideWrapper .table-responsive > .table > tbody > tr > td, .sizeGuideWrapper .table-responsive > .table > tfoot > tr > td { white-space: nowrap; } .sizeGuideWrapper .table-responsive table caption { text-align: left; } } @media only screen and (max-width: 640px) { header h2 { float: none; clear: both; width: 160px; margin: 0 auto 1em; } header .userBar { text-align: center; } header .tinynav { margin: 0 0 0.5em 0; vertical-align: middle; } .singleContact .contactPhoto, .bx-pager { display: none; } .singleContact h2, .singleContact ul { float: none; width: 98%; } .productList-2 .productBox .quantityPop label { display: block; margin-bottom: 0.5em; } footer .span_3_of_3, footer .span_2_of_3, footer .span_1_of_3 { width: 100%; } footer .col { margin: 0.5em 0 0.5em 0; } .footerBanners .smallBanner { width: 48%; } #footerSig { text-align: center; padding-left: 0; } p#author { float: none; margin: 0 auto; } .filterBody .categoryFilter ol li { width: 100%; display: block; float: none; padding: 0.5em; } .additionsList li, .exclusionList li { width: 100%; padding-right: 5px !important; } .menu-additions .section .col { float: none; } .menu-additions .section .span_1_of_3 { width: 100%; } .menu-additions .ordersTempList .additionsTempList, .menu-additions .ordersTempList .exclusionTempList { padding: 30px 0 0 0; } .menu-additions .ordersTempList .additionsTempList:before, .menu-additions .ordersTempList .exclusionTempList:before { left: 0; top: -0.2em; } .menu-additions .ordersTempList .additionsTempList li, .menu-additions .ordersTempList .exclusionTempList li { white-space: normal; display: block; } .menu-additions .ordersTempList li .quantityMark { display: block; margin: 0 0 0 -3px; } .chosenUnits { text-align: center; } .chosenUnits .unit { float: none; margin-bottom: 0.3em; text-align: left; } .chosenUnits .button { float: none; margin: 0 0 0.25em 0; } } @media only screen and (max-width: 480px) { header h1, header .logo-holder { width: 240px; } header ul.mixed .specialPhone { background-position: 7px -216px; padding: 8px 5px 8px 44px; font-size: 1em; } a.basket { padding: 10px 7px 10px 38px; } a.basket:before { top: 9px; } a.basket span:first-child { display: none; } .productList .productBox { width: 100%; margin-left: 0; } .resp-tabs-container .relatedProducts.productList .productBox, .productGallery .resp-tabs-container .relatedProducts.productList .productBox { width: 100%; margin-left: 0; } .responsiveTable, .responsiveTable caption, .responsiveTable thead, .responsiveTable tbody, .responsiveTable th, .responsiveTable td, .responsiveTable tr { display: block; } .responsiveTable caption { margin-bottom: 1px; } .responsiveTable td { text-align: center; } .responsiveTable tr:first-child th:first-child, .responsiveTable tr:first-child td:first-child, .responsiveTable tr:first-child td.onlyChild { border-top-left-radius: 6px !important; border-top-right-radius: 6px !important; } .responsiveTable tr:first-child th, .responsiveTable tr:first-child td, .responsiveTable tr:first-child th:last-child, .responsiveTable tr:first-child td:last-child, .responsiveTable tr:last-child th:first-child, .responsiveTable tr:last-child td:first-child { border-radius: 0; } .responsiveTable tr:last-child td:last-child { border-bottom-left-radius: 6px; } .responsiveTable tr:last-child td.onlyChild { border-bottom-right-radius: 6px; } .rearranger .sorter { font-size: 0.8571em; line-height: 1; } .rearranger .sorter span { display: block; text-align: center; background-color: #CCCCCC; border-radius: 4px; padding: 3px; } .rearranger .sorter ul a { display: inline-block; margin-right: 0.5em; background-position: center 25px; padding: 0 0 26px 0; text-decoration: underline; } .rearranger .sorter ul a.ascending { background-position: center -25px; } .rearranger .sorter ul a.descending { background-position: center -75px; } .smallBanners.showOnMobile .smallBanner { width: 100%; margin-left: 0 !important; } .textFrame { width: 100%; margin: 0 0 1em 0; } .textFrame.floatLeft, .textFrame.floatRight { float: none; } .filterBody .formElement { display: block; float: none; margin: 0 auto 0.5em; width: 100%; } .contentList .contentBlock article { width: 100%; margin: 0 0 1em; } .searchBox input.txtBox { width: 120px; } footer .iFrameContainer { width: 90%; } .menu .menu-items .menu-variants { padding-left: 0; } .menu .menu-items > li::before { display: none; } .menu .menu-item-title { padding: 10px 5px 10px 5px; } .menu .menu-additions { padding: 10px 5px; } .additionsList li label { width: 41%; } .additionsList li .menu-prices { width: 35%; } .additionsList li .additionsQuantity { width: 24%; } } @media only screen and (max-width: 360px) { header h1, header .logo-holder { width: 220px; } .footerBanners .smallBanner { width: 100%; margin: 0; } header ul.mixed { margin: 0.8em 0 0; display: block; } header ul.mixed li { display: block; padding: 0; text-align: center; margin: 0 0 0.5em 0; } header ul.mixed li a { display: inline-block; } }