@media only screen and (max-width: 1145px) { ul.infos { text-align: center; } ul.infos li { font-size: 0.75em; } #topNavWrapper .container { width: 95%; } } @media only screen and (max-width: 1024px) { header { width: 100%; padding: 0 1em; } #topNavWrapper { position: absolute; top: 0; left: 0; width: 100%; background: none; } #topNavWrapper .container { width: 100%; } .slidingBoxes .slidingBox.special .front { width: 65%; } .slidingBoxes .slidingBox .front { padding: 1.5em; } .slidingBoxes .slidingBox .front h2 { font-size: 1.125em; } .slidingBoxes .slidingBox .front p { font-size: 0.875em; } #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; width: 90%; } #sideNav { margin-bottom: 0; margin-top: 0.5em; } ul.sideNav a.dcjq-parent { padding-right: 24px; } ul.sideNav a.topLevel { text-align: center; } .breadcrumbs { margin-bottom: 0.7em; } #content .col { margin: 0 0 0.5em 0; } #content .contentFooter { padding: 0.5em 0.5em 0 !important; } #content .contentFooter .col { margin-left: 1%; } #content .contentFooter .col:first-child { margin-left: 0; } #headerWrapper {} header { margin-bottom: 0.5em; } .categoryFilter { padding: 0; margin-top: 0.5em; margin-bottom: 0; } .categoryFilter div { display: none; } .categoryFilter h1 { text-align: center; } .categoryFilter h1 a span { display: block; background-position: 0 0; } .categoryFilter h1 a.active span { background-position: -11px 0; } .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.5em 0.5em; } .categoryFilter .tinynav { display: block; margin: 0 auto 0.5em; width: 98%; } #topNav { width: 100%; } .goMobile-btn { display: block; } .goMobile-subArrow { display: block !important; background: #000000 url(http://www.legolim.hr/layout/sprites.png?v-636851296631116240) no-repeat -82px 9px; height: 25px; width: 25px; position: absolute; top: 4px; right: 5px; border-radius: 6px; 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: #e40000; } .sf-menu { display: none; float: none; padding: 0px 0px 5px; width: 100%; } .sf-menu.xactive { display: block !important; clear: both; } .sf-menu ul { display: none !important; position: static !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-arrows .sf-with-ul:after { display: none !important; } .sf-menu li { float: none !important; display: block !important; border-radius: 0 !important; background: #BEC8D4; border-left: none; text-align: center; } .sf-menu ul li { background: #BEC8D4; } .sf-menu ul ul li { background: #BEC8D4; } .sf-menu a { border-bottom: solid 1px #8396AB; color: #111111 !important; } .sf-menu .xpopdrop { display: block !important; } .sf-menu ul li a { padding-left: 2em !important; } .sf-menu ul ul li a { padding-left: 2.5em !important; } .sf-menu ul ul ul li a { padding-left: 3em !important; } .sf-menu li:hover, .sf-menu li.sfHover { background-color: #BEC8D4; } footer { width: 100%; } .contentFooter ol { text-align: center; } .smallBanners.hideOnMobile { display: none; } .smallBanners.showOnMobile { display: block; padding-top: 1em; } .productList .productBox:hover { transform: none !important; z-index: auto !important; } } @media only screen and (max-width: 900px) { .top-header { min-height: 38px; } ul.infos { font-size: 0.85em; } header h1, header div.logo { width: 250px; } .productList .product-image-wrapper { width: 170px; height: 170px; } #indexContentBlock article h2 { font-size: 1.5em; } } @media only screen and (max-width: 800px) { ul.infos { display: none !important; } .slidingBoxes .slidingBox.special { padding-bottom: 8em; } .slidingBoxes .slidingBox.special .back { width: 100%; } .slidingBoxes .slidingBox.special .front { width: 90%; height: auto !important; top: inherit; bottom: -1em; left: 5%; } .slidingBoxes .slidingBox .front { padding: 2.2em; } .slidingBoxes .slidingBox { width: 100%; margin-bottom: 1em; } .slidingBoxes .slidingBox .front h2 { font-size: 1.8em; min-height: auto; } #content .span_1_of_2, #content .span_2_of_2 { width: 100%; } #footerSig i { display: block; font-size: 0.6875em; padding-left: 1.6em; } #languageSelector { display: none; } header .tinynav { display: block; margin-top: 0.5em; width: 40%; font-size: 0.75em; } header ul.infos { font-size: 0.875em; margin: 0em auto; display: block; text-align: center; width: 60%; float: none; } header ul.infos li:first-child { font-size: 1.1428em; } } @media only screen and (min-width: 769px) { .productList .productBox:nth-child(3n+1) { margin-left: 0; } } @media only screen and (max-width: 768px) { #content .contentFooter ol { text-align: center; } .productList .productBox { width: 49.29278642149929%; } .productList .productBox:nth-child(2n+2) { margin: 1% 0 0 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; } 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, .contentFooter .span_2_of_4 { width: 100%; } #content .contentFooter .col { margin-left: 0; float: none; } .smallBanners.showOnMobile .smallBanner { width: 49.5%; } .smallBanners.showOnMobile .smallBanner:nth-child(3n+1) { margin-left: 1%; } .smallBanners.showOnMobile .smallBanner:nth-child(2n+1) { margin-left: 0; } header .userArea { font-size: 0.75em; } header a.basket { font-size: 0.75em; padding-left: 50px; background-position: -300px center; } } @media only screen and (max-width: 640px) { #indexContentBlock article { float: none; width: 100%; margin-left: 0; } .slidingBoxes .slidingBox.special .back { min-height: 350px; } .slidingBoxes .slidingBox.special .front h2, .slidingBoxes .slidingBox .front h2 { font-size: 1.125em; } .slidingBoxes .slidingBox.special .front p { font-size: 0.875em; } .singleContact .contactPhoto { 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; } #footerSig { text-align: center; } p#author { float: none; margin: 0 auto; } } @media only screen and (max-width: 540px) { header h1, header div.logo { display: block; float: none; margin: 1em auto 1.3em; } .searchBox { float: none; margin: 0 auto 1em; } } @media only screen and (max-width: 480px) { header { padding-bottom: 0.5em; } .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; } header a.basket { position: relative; right: auto; top: auto; width: 100px !important; margin: 0 auto 0.5em; padding: 0.5em 0.5em 0.5em 75px; background-position: left center; } header .userArea { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 0.5em 0; text-align: center; } .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 ul.chooseListType li { display: block; } .rearranger ul.chooseListType li:first-child { margin-bottom: 0.5em; } .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; } .newsletterBox input.txtBox { width: 38%; } } @media only screen and (max-width: 360px) { #sideNav, .categoryFilter { float: none; width: 100%; } .contentBlock article { width: 95%; } header h1, header div.logo { width: 80%; } header ul.infos { font-size: 11px; width: 90%; display: block; margin: 0 auto; } }