@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:300,500,700&subset=latin-ext'); .screenResolution { position: fixed; bottom: 10px; left: 10px; width: 80px; text-align: center; font-weight: 500; font-size: 0.875em; background: #ff0000; color: #fff; padding: 0.5em; } .floatedButtons .sendInquiry { display: none; } body, html { height: 100%; } body { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 100%; line-height: 1.5; font-weight: 500; color: #000; background-color: #FFFFFF; } a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; text-decoration: none; } a:link { color: #E50004; } a:visited { color: #7B7B7B; } a:hover { outline: 0; color: #3a3a3a; } a:active { outline: 0; color: #E50004; } img { border: 0; width: auto; max-width: 100%; height: auto; } object, video, embed { max-width: 100%; height: auto; } .section-title { text-align: center; margin: 0 auto; padding: 0.5em 0; color: #2B2524; font-size: 2em; position: relative; } .section-title:before { content: ""; width: 40%; background: #2B2524; height: 1px; position: absolute; top: 52%; left: 0; margin-right: 2%; } .section-title:after { content: ""; width: 40%; background: #2B2524; height: 1px; position: absolute; top: 52%; right: 0; margin-left: 2%; } img { -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); } .section-link { clear: both; display: block; padding: 2em 0 0; text-align: center; } .section-link a { color: #999; } .item_img { font-size: 0; line-height: 0; position: relative; } .item_img a { position: relative; display: inline-block; max-width: 100%; overflow: hidden; } .item_img a:before, .item_img a:after { content: ""; opacity: 0; pointer-events: none; z-index: 3; position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .item_img a:before { top: 0px; left: 0px; right: 100%; bottom: 100%; border-top: 10px solid; border-left: 10px solid; } .item_img a:after { left: 100%; top: 100%; bottom: 0px; right: 0px; border-bottom: 10px solid; border-right: 10px solid; } .item_img a img { opacity: 0.9; } .item_img a:hover img, .item_img a:hover .BWfade { transform: scale(1.1); opacity: 1; } .item_img a:hover img { transform: scale(1.1) !important; -o-transform: scale(1.1) !important; -moz-transform: scale(1.1) !important; -webkit-transform: scale(1.1) !important; -ms-transform: scale(1.1) !important; opacity: 1 !important; } .item_img a:hover:before { opacity: 1; bottom: 0px; right: 0px; } .item_img a:hover:after { opacity: 1; top: 0px; left: 0px; } .item_img a:before, .item_img a:after, .item_img:after { border-color: #D8A94B; } .newsletterWrapper, .paymentMethod, .deliveryMethod { padding: 2em 0; } .deliveryMethod { background: #f5f5f5; } .newsletterWrapper h3, .paymentMethod h3, .deliveryMethod h3 { margin: 0 auto 0.2em; padding: 0; color: #2B2524; font-weight: 600; font-size: 2em; text-transform: uppercase; } .deliveryMethod .icons { float: right; width: 100px; margin-left: 1em; } .newsletterWrapper p, .paymentMethod p, .deliveryMethod p { font-size: 1.1em; font-weight: 300; margin-bottom: 1em; } .ShoppingCart .cancelOrder, .ShoppingCart .cartProceedToCheckout { font-size: 1em; font-weight: 700; padding: 1em 1.5em; border-radius: 8px; } .ShoppingCart .cancelOrder { color: #999999 !important; background: #DDDDDD !important; } .ShoppingCart .cartProceedToCheckout { background: #D8A94B !important; } .cancel-order-popup .note { font-size: 1.125em; color: #ffffff; margin: 0 auto 0.5em; } .cancel-order-popup .button { min-height: 50px; } .cancel-order-popup .button.blue { line-height: 50px; } .fixed-rate { font-size: 1.625rem; text-align: center; padding: 1.25rem 0 .25rem; margin: 0 auto; display: block; } .sf-menu, .sf-menu * { margin: 0 auto; padding: 0; list-style: none; } .sf-menu li { position: relative; } .sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 100000; } .sf-menu .flyOutLeft ul { right: 0 !important; left: auto; } .vendor-ie-7 .sf-menu .flyOutLeft ul { left: inherit !important; } .sf-menu>li { float: left; } .sf-menu li:hover>ul, .sf-menu li.sfHover>ul { display: block; } .sf-menu a { display: block; position: relative; } .sf-menu ul ul { top: 0; left: 12em; } .sf-menu .flyOutLeft ul ul { top: 0; left: -24em; } .sf-menu { padding: 0; } .sf-menu ul { box-shadow: 2px 2px 6px rgba(0, 0, 0, .2); width: 12em; } .sf-menu ul>li:first-child {} .sf-menu ul>li:last-child {} .vendor-ie-11 .sf-menu ul>li:first-child { margin-bottom: -1px; } .vendor-ie-11 .sf-menu ul>li:last-child { margin-top: -1px; } .sf-menu a { padding: 0.8em 0.5em; text-decoration: none; zoom: 1; text-align: left; font-size: 0.875em; } .sf-menu a:link, .sf-menu a:visited { color: #ffffff; } .sf-menu a:hover, .sf-menu a:active { color: #FFFFFF; } .vendor-ie-7 .sf-menu a, .vendor-ie-7 .sf-menu ul a:hover { background: #CECECE; } .vendor-ie-7 .sf-menu ul a, .vendor-ie-7 .sf-menu a:hover { background: #CECECE; } .sf-menu li { background: #CECECE; } .sf-menu>li { background: none; } .sf-menu ul li { background: #2B2524; border-radius: 0; } .sf-menu ul ul li { background: #2B2524; } .sf-menu li:hover, .sf-menu li.sfHover { background: #D8A94B; } .sf-arrows .sf-with-ul { padding-right: 2.5em; } .sf-arrows .flyOutLeft ul .sf-with-ul { padding-left: 2.5em; padding-right: 1em; } .vendor-ie-7 .sf-arrows a.sf-with-ul { padding-right: 1em; padding-left: 1em; } .sf-arrows .sf-with-ul:after { content: ''; position: absolute; top: 50%; right: 1em; margin-top: -3px; height: 0; width: 0; border: 5px solid transparent; border-top-color: #ffffff; } .sf-arrows>li>.sf-with-ul:focus:after, .sf-arrows>li:hover>.sf-with-ul:after, .sf-arrows>.sfHover>.sf-with-ul:after { border-top-color: #FFFFFF; } .sf-arrows ul .sf-with-ul:after { margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: #000000; } .sf-arrows ul li>.sf-with-ul:focus:after, .sf-arrows ul li:hover>.sf-with-ul:after, .sf-arrows ul .sfHover>.sf-with-ul:after { border-left-color: #FFFFFF; } .sf-arrows .flyOutLeft ul .sf-with-ul:after { margin-left: -3px; left: 1em; border-color: transparent; border-right-color: #000000; } .sf-arrows .flyOutLeft ul li>.sf-with-ul:focus:after, .sf-arrows .flyOutLeft ul li:hover>.sf-with-ul:after, .sf-arrows .flyOutLeft ul .sfHover>.sf-with-ul:after { border-right-color: #FFFFFF; border-left-color: transparent; } .goMobile-btn { display: none; font-weight: bold; cursor: pointer; padding: 0; float: left; margin-left: 0; background: #111111 url(https://www.hsn.hr/layout/menuTogglerIcons.png?v-638093941007600574) no-repeat 0px 0px; color: #000000; position: absolute; top: 0; right: 0; width: 43px; height: 43px; text-indent: -999em; } .goMobile-btn.active { background-position: left -43px; } .goMobile-btn: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; } .goMobile-subArrow { display: none; } .siteWrapper { position: relative; overflow: hidden; overflow-y: auto; width: 100%; height: 100%; } .siteCanvas { width: 100%; height: 100%; position: relative; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); -moz-transition: 300ms ease all; -ms-transition: 300ms ease all; -o-transition: 300ms ease all; -webkit-transition: 300ms ease all; transition: 300ms ease all; } .siteWrapper.show-nav .siteCanvas { -moz-transform: translateX(300px); -ms-transform: translateX(300px); -o-transform: translateX(300px); -webkit-transform: translateX(300px); transform: translateX(300px); } .ws-topNavWrapper { background: #D8A94B; } .ws-topNav { position: relative; } .menuToggler { display: block; float: left; } .menuToggler .desktop { display: none; background-color: #CC0000; color: #ffffff; padding: 0.5em; cursor: pointer; } .menuToggler .mobile { display: none; background: #D8A94B url(https://www.hsn.hr/layout/menuTogglerIcons.png?v-638093941007600574) no-repeat 0px 0px; color: #ffffff; width: 43px; height: 43px; cursor: pointer; } .menuToggler .mobile.active { background-position: 0 -43px; } .ws-menu, .ws-menu * { margin: 0; padding: 0; list-style: none; } .ws-menu { width: 100%; font-size: 0.8755em; line-height: 1; } .ws-menu .megaMenu { display: none; position: absolute; top: 100%; left: 0; z-index: 10000000; width: 100%; box-shadow: 2px 2px 6px rgba(0, 0, 0, .2); background-color: #ffffff; } .ws-menu .megaMenu.active { display: block; } .ws-menu>li { float: left; } .ws-menu>li>a { display: block; position: relative; padding: 1em 0.5em; text-decoration: none; font-size: 1.2em; font-weight: 400; } .ws-menu>li>a .productCount { position: absolute; top: 0; right: 2em; bottom: 0; display: none; border-left: solid 1px #5ea2e1; text-align: right; min-width: 35px; visibility: hidden; padding-top: 0.8em; } .ws-menu>li>a.hasProductCount:hover .productCount, .ws-menu>li>a.hasProductCount .productCount.active { visibility: visible; } .ws-menu .megaMenu .menuDescription { padding: 1em; border-bottom: solid 1px #dddddd; line-height: 1.4; } .ws-menu .megaMenu .menuDescription.fullWidth .col { float: none; clear: both; } .ws-menu .megaMenu .menuDescription.fullWidth .span_1_of_2 { width: 100%; margin: 0 0 1em 0; } .ws-menu .megaMenu .menuDescription .menuBanner { display: block; border-radius: 4px; overflow: hidden; } .ws-menu .megaMenu .menuDescription .menuBanner img { display: block; width: 100%; } .ws-menu .megaMenu .menuDescription.wysiwyg h2 { font-size: 2em; font-weight: 700; text-align: center; margin: 0 auto 0.5em; color: #2B2524; } .ws-menu .megaMenu .menuDescription.wysiwyg p { font-size: 1.125em; font-weight: 300; text-align: center; margin: 0 0 0.5em; } .ws-menu .megaMenu .megaMenuCol { width: 33.3333%; padding: 0.5em 0.5em 0; border-right: solid 1px #cccccc; display: table-cell; height: 100%; } .ws-menu .megaMenu .section .megaMenuCol:last-child { border-right: none; } .ws-menu .megaMenu .megaMenuColTitle { position: relative; } .ws-menu .megaMenu .megaMenuColTitle a { display: block; margin: -0.5em -0.5em 0; padding: 0.5em 1em; background-color: #eeeeee; } .ws-menu .megaMenu .megaMenuColTitle a .productCount { position: absolute; top: 0; right: 2em; border-left: solid 1px #cccccc; text-align: left; min-width: 35px; margin-top: 0.5em; padding-left: 3px; font-size: 0.9285em; font-weight: normal; } .ws-menu .megaMenu .section { border-bottom: solid 1px #dddddd; display: table; width: 100%; height: 100%; } .ws-menu .megaMenu .section:last-child { border-bottom: none; } .ws-menu a:link, .ws-menu a:visited { color: #ffffff; } .ws-menu a:hover { color: #585858; } .ws-menu a:active { color: #585858; } .ws-menu .megaMenu a:link, .ws-menu .megaMenu a:visited { color: #2f80c2; } .ws-menu .megaMenu a:hover { color: #CC0000; } .ws-menu .megaMenu a:active { color: #CC0000; } .ws-menu>li:hover>a, .ws-menu>li.sfHover>a, .ws-menu>li.selected>a { background-color: #2B2524; color: #ffffff; } .ws-menu .megaMenuToggler { padding-right: 2em; } .ws-menu .megaMenuToggler.noDropDown { padding-right: 0.4em; } .ws-menu>li>a.hasProductCount, .ws-menu .megaMenuToggler.hasProductCount, .ws-menu .megaMenuColTitle a.hasProductCount { } .megaMenuToggler.noDropDown:after { display: none; } .megaMenuToggler:after { content: ''; position: absolute; top: 50%; right: 0.7em; margin-top: -2px; height: 0; width: 0; border: 5px solid transparent; border-top-color: #ffffff; -moz-transform: scale(.9999); } li.selected .megaMenuToggler:after { border-top-color: #585858; } .toggleNextMenu { display: none; background-color: #EE7F01; height: 25px; line-height: 25px; width: 25px; position: absolute; top: 6px; right: 5px; cursor: pointer; border-radius: 4px; text-align: center; color: #ffffff; font-family: Arial, sans-serif; font-size: 14px; } .toggleNextMenu.active { background-position: -82px -17px; background-color: #585858; } .toggleNextMenu:before { content: '\25bc'; } .toggleNextMenu.active:before { content: '\2716'; } .accordionNav { font-size: 0.9285em; } .accordionNav ul { display: none; } .accordionNav li { position: relative; } .accordionNav li a { padding: 0.5em; display: block; text-decoration: none; position: relative; } .accordionNav li a:hover { background-color: #eeeeee; border-radius: 4px; } .accordionNav ul li a { outline: 0; padding-left: 10px; } .accordionNav ul ul li a { padding-left: 18px; } .accordionNav ul ul ul li a { padding-left: 26px; } .accordionNav ul ul ul ul li a { padding-left: 34px; } .accordionNav .accordionToggler { padding-right: 2em; } .accordionNav .toggleNextUl { display: block; background-color: #cccccc; width: 18px; height: 18px; line-height: 18px; position: absolute; top: 0.3em; right: 4px; cursor: pointer; border-radius: 4px; text-align: center; color: #ffffff; display: block; font-family: Arial, sans-serif; font-size: 14px; } .accordionNav .toggleNextUl.active { background-position: -86px -21px; background-color: #666666; } .accordionNav .toggleNextUl:before { content: '\25bc'; } .accordionNav .toggleNextUl.active:before { content: '\2716'; } .accordionNav a .productCount { position: absolute; top: 0; right: 2em; display: none; border-left: solid 1px #cccccc; text-align: left; min-width: 35px; margin-top: 0.5em; padding-left: 3px; } .accordionNav a .productCount.active, .accordionNav a.alwaysVisible .productCount { display: block; } .accordionNav .hasProductCount { } @media only screen and (max-width: 1024px) { .ws-topNavWrapper { position: fixed; background: none; top: 0; left: 0; bottom: 0; } .ws-topNav { width: 100%; height: 100%; } .vendor-ie .show-nav .ws-menu { left: 0; } .vendor-ie .show-nav .menuToggler { margin-left: 300px; } .menuToggler .desktop, .megaMenuToggler:after { display: none; } .menuToggler .mobile, .toggleNextMenu { display: block; } .ws-menu { position: absolute; top: 0; width: 300px; height: 100%; left: -300px; overflow-y: auto; background-color: #585858; box-shadow: 2px 2px 6px rgba(0, 0, 0, .2); } .ws-menu .megaMenu { position: static; } .vendor-ie .show-nav .megaMenu { left: auto; } .ws-menu .megaMenu .menuDescription .col { float: none; clear: both; } .ws-menu .megaMenu .menuDescription .span_1_of_2 { width: 100%; margin: 0 0 1em 0; } .ws-menu .megaMenu .megaMenuCol { width: 100%; display: block; border-bottom: solid 1px #dddddd; border-right: none; } .ws-menu .megaMenu .section:last-child .megaMenuCol:last-child { border-bottom: none; } .ws-menu .megaMenu .section { border-bottom: none; display: block; } .ws-menu>li { position: relative; float: none; } .ws-menu>li>a { width: 100%; float: none; border-bottom: solid 1px #EE7F01; } .ws-menu>li>a.hasProductCount .productCount.active { visibility: visible; } .ws-menu>li>a .productCount { right: 3em; } .ws-menu>li>a.hasProductCount, .ws-menu .megaMenuToggler.hasProductCount { padding-right: 5.5em !important; } } @media only screen and (max-width: 360px) { .ws-menu { width: 250px; left: -250px; } .vendor-ie .show-nav .menuToggler { margin-left: 250px; } .siteWrapper.show-nav .siteCanvas { -moz-transform: translateX(250px); -ms-transform: translateX(250px); -o-transform: translateX(250px); -webkit-transform: translateX(250px); transform: translateX(250px); } } #headerWrapper { width: 100%; } header { position: relative; padding-bottom: 1em; } #topNav { margin: 0; padding: 0; float: left; } .vendor-ie-7 #topNav { z-index: 1; position: relative; } header, #content, .container, .ws-topNav, .section-title { width: 90%; max-width: 1500px; margin: 0 auto; } footer { background: #2B2524; margin: 1em auto 0; } #contentWrapper { width: 100%; margin-bottom: 1em; } .top-header { background: #2B2524; color: #ffffff; } header h1, header .logo-holder { margin: 1.3em auto 0; float: left; } header h1 a, header h1 img, header .logo-holder a, header .logo-holder img { width: 100%; display: inline-block; width: 60px; } header .logo-holder a { float: left; } header .logo-holder h2 { margin: 0 auto; padding: 0.17em 0.5em; display: inline-block; font-family: 'Times New Roma'; font-size: 2.2em; } header .logo-holder h2 a { display: block; width: auto; float: none !important; color: #2B2524; } .secend-logo { width: 240px; margin-right: 180px; margin: 1.2em 1em 0; float: left; } .secend-logo a { display: inline-block; } .secend-logo a img { display: block; width: 100%; } header ul.infos { position: absolute; top: 75%; left: 0; list-style: none; font-weight: normal; font-size: 0.875em; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } header ul.infos li { color: #87888A; text-shadow: 1px 1px 0 #F2F2F2; border-left: 1px dotted #87888A; padding-left: 1em; display: inline-block; margin-left: 0.8em; } header ul.infos li:first-child { border: none; margin-left: 0; padding-left: 0; } .userArea { font-size: 0.875em; font-weight: 400; list-style: none; float: right; display: inline-block; } .userArea li { padding-top: 0.8em; padding-bottom: 0.8em; padding-left: 0.7em; margin: 0; display: inline-block; border-left: 1px solid #524745; } .userArea li:first-child { border-left: none; padding-left: 0; padding-right: 0.5em; } .userArea li a { display: block; color: #ffffff; } .userArea li a:hover { display: block; color: #D8A94B; } .userArea li:after { color: #87888A; font-weight: bold; } .vendor-ie-8 .userArea li:after { display: inline-block; } .userArea li.last:after { content: ''; padding: 0; } .vendor-ie-7 .userArea li { padding-left: 0.5em; } #sideUserAreaNav { background: #2B2524; line-height: 0; text-align: center; margin: 1em 0 0; } #sideUserAreaNav .sideNav .topLevel { display: none; } #sideUserAreaNav .sideNav ul { display: inline-block; text-align: center; } #sideUserAreaNav .sideNav ul:before, #sideUserAreaNav .sideNav ul:after { content: ""; display: table; } #sideUserAreaNav .sideNav ul:after { clear: both; } #sideUserAreaNav .sideNav ul li { float: left; display: inline-block; line-height: 0; border-left: 1px solid #ffffff; text-align: center; } #sideUserAreaNav .sideNav ul li:first-child { border-left: none; } #sideUserAreaNav .sideNav ul li a { padding: 0.8em 1.5em; display: block; line-height: 1; color: #ffffff; } #sideUserAreaNav .sideNav ul li a:hover { color: #D8A94B; } a.basket { position: relative; display: inline-block; float: right; width: 70px; height: 50px; margin: 2em 0 0; background: url(https://www.hsn.hr/layout/basket-icon.png?v-638093941007600574) no-repeat; background-size: contain; } a.basket span:first-child { display: block !important; position: absolute; width: 100%; } a.basket span:first-child em { position: absolute; text-indent: inherit !important; top: -8px; right: 7px; width: 25px; height: 25px; line-height: 25px; border-radius: 50%; text-align: center; background: #252021; color: #ffffff; border: 2px solid #ffffff; } a.basket span { display: block; display: none; } a.basket em { font-style: normal; font-weight: 400; font-size: 0.875em; color: #E20020; } header #languageSelector { list-style: none; font-size: 0.75em; margin-top: 0.5em; } header #languageSelector li { display: inline; } header #languageSelector li a { display: inline-block; padding: 1px 1px 1px 21px; border-radius: 6px; margin: 0 5px 5px 0; background: url(https://www.hsn.hr/layout/flags.png?v-638093941007600574) no-repeat 0 -16px; } header #languageSelector li.selected a, header #languageSelector li a:hover { background-color: #CECECE; } header #languageSelector li a.HR { background-position: 2px 4px; } header #languageSelector li a.EN { background-position: 2px -27px; } header #languageSelector li a.DE { background-position: 2px -58px; } header #languageSelector li a.IT { background-position: 2px -89px; } header #languageSelector li a.SL { background-position: 2px -120px; } header #languageSelector li a.TR { background-position: 2px -151px; } .index-article { padding: 1em 0 2em; margin: 2em auto; background: rgba(216, 169, 75, 0.10); } .contentBlock { padding: 1em 0 0; margin: 2em auto 0; } .index-article article, .contentBlock article { width: 31.33%; margin-left: 3%; float: left; text-align: center; } .contentBlock article { margin-bottom: 3%; } .index-article article:nth-child(3n + 1), .contentBlock article:nth-child(3n + 1) { margin-left: 0; } .index-article article .date, .contentBlock article .date { text-align: center; font-size: 1em; font-weight: 300; color: #999999; padding: 0.5em 0; } .index-article article .photoFrame, .contentBlock article .photoFrame { width: 100%; margin: 0 auto 1em; border: none; border-radius: 0; } .index-article article .photoFrame a, .index-article article .photoFrame a img, .contentBlock article .photoFrame a, .contentBlock article .photoFrame img { display: block; width: 100%; } .index-article article h2, .contentBlock article h2 { font-weight: 700; font-size: 2em; line-height: 1.1; margin: 1em auto 0.5em; display: block; } .index-article article h2 a, .contentBlock article h2 a { color: #2B2524; } .index-article article h2 a:hover, .contentBlock article h2 a:hover { color: #D8A94B; } .index-article article p, .contentBlock article p { font-weight: 300; font-size: 1.125em; } .index-article article .buttons .button.primary, .contentBlock article .buttons .button.primary { color: #2B2524; font-weight: 700; font-size: 0.875em; padding: 0; background: none; text-transform: none; } .contentBlockDetals h1 { font-weight: 700; font-size: 2em; line-height: 1.1; margin: 0.5em auto; } .contentBlockDetals .photoFrame { font-size: 100%; width: 30%; } .contentBlockDetals .photoFrame.floatLeft { float: left; margin: 0em 1em 1em 0em; } .contentBlockDetals .photoFrame.floatRight { float: right; margin: 0em 0em 1em 1em; } .contentBlockDetals .photoFrame a, .contentBlockDetals .photoFrame a img { display: block; width: 100%; } .contentBlockDetals .wysiwyg { font-weight: 300; font-size: 1.125em; } h1.sectionTitle { font-size: 1.25em; font-weight: normal; padding-bottom: 0.2em; margin-bottom: 0.5em; color: #000000; } .highlight { margin: 0 auto 2em; display: block; text-align: center; } .highlight h1 { margin: 0 auto; padding: 0; color: #2B2524; font-weight: 600; font-size: 2em; text-transform: uppercase; } .highlight .wysiwyg { margin: 0.5em auto 0; padding: 0; font-size: 1em; font-weight: 500; } .slidingBoxes { margin: 2em auto; padding: 0; } .slidingBoxes .slidingBox:first-child { margin-left: 0; } .slidingBox { zoom: 1; float: left; display: inline; position: relative; width: 33.33%; overflow: hidden; } .slidingBox .front { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; background: rgba(21, 21, 15, 0.75); -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .slidingBox:hover .front { background: rgba(21, 21, 15, 0.90); -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .slidingBox .back { position: relative; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; line-height: 0; } .slidingBox h2, .slidingBox p { width: 70%; margin-left: 30px; } .slidingBox h2 { font-weight: normal; font-size: 3em; font-weight: 700; line-height: 1; margin-top: 30px; margin-bottom: 0.5em; } .slidingBox h2 a { color: #D8A94B; } .slidingBox:hover h2 a { color: #ffffff; } .slidingBox p { font-size: 1.5em; font-weight: 300; line-height: 1.2; overflow: hidden; color: #ffffff; } .slidingBox .icon { position: absolute; bottom: 0; right: 0; width: 22px; height: 22px; background: url(https://www.hsn.hr/layout/slideBox-icon.png?v-638093941007600574) no-repeat 0 0; background-color: #E20020; background-color: rgba(226, 0, 32, 0.9); border-top-left-radius: 6px; display: none; } .ua-mobile .slidingBox .icon { background-position: 10px -20px; z-index: 2; width: 41px; height: 41px; border-top-left-radius: 6px; } .vendor-ie-7 .slidingBox .icon { background-color: #E20020; } .slidingBox img { width: 100%; display: inline-block; } .slidingBox a.button { position: absolute; bottom: 30px; left: 30px; background: #D8A94B; color: #ffffff; font-weight: 700; font-size: 1em; padding: 1em 1.5em; } .slidingBox a { color: #FFFFFF; } #WelcomeMessage { padding: 2em 0; text-align: center; margin: 0 auto; } #WelcomeMessage h2 { font-size: 2em; margin: 0 auto 0.5em; } #WelcomeMessage p { font-weight: 300; } #WelcomeMessage .buttons { margin: 0 auto; padding: 1em; 0 } #WelcomeMessage .buttons .button.gray { border: none; background: #D8A94B; color: #ffffff; font-size: 1em; padding: 0.8em 1em; } .info-box { padding: 2em 0; margin: 0 auto 2em; width: 70%; } .info-box .item { width: 33.33%; margin: 0 auto; float: left; } .info-box .item h2 { font-size: 2em; margin: 0 auto; padding: 0; color: #ffffff; } .info-box .item.bg-yellow { background-color: #F7C052; } .info-box .item.bg-red { background-color: #E85342; margin: -2em 0; padding: 2em 0; } .info-box .item.bg-green { background-color: #34C663; } .smallBanners .smallBanner, .smallBanners img { display: block; } .smallBanners .smallBanner { float: left; width: 24.25%; margin-bottom: 0.5em; margin-left: 1%; } .smallBanners .smallBanner:nth-child(4n + 1) { margin-left: 0; } .productList .productBox { float: left; margin: 0 0 1% 1%; padding: 1% 1% 4em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; width: 19.2%; text-align: center; border: 1px solid #ededed; } .productList .productBox:nth-child(5n + 1) { margin-left: 0; } .vendor-ie-7 .productList .productBox { border: none; width: 30.50%; } .ua-desktop .productList .productBox:hover { -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; } .vendor-ie-7 .productList .productBox { background-color: #F2F2F2; } .vendor-ie-7 .productList .productBox:hover { background-color: #F2F2F2; } .productList .product-image-wrapper { width: 100%; padding: 0; display: inline-block; text-align: center; margin: 0 auto 1em; position: relative; line-height: 0; } .productList .product-image-wrapper .productTags { list-style: none; line-height: 1; z-index: 999; display: block; width: 100%; position: absolute; bottom: 1em; text-align: center; } .productList .product-image-wrapper .productTags li { margin: 0.8em auto; } .productList .product-image-wrapper .productTags span { z-index: 1; color: #ffffff; font-weight: 400; pointer-events: none; font-size: 0.75em; text-align: center; padding: 0.4em 0.8em; border-radius: 3px; } .productList .product-image-wrapper .productTags span.action { background: rgba(183, 0, 24, 0.9); } .vendor-ie-7 .productList .product-image-wrapper .productTags span.action, .vendor-ie-8 .productList .product-image-wrapper .productTags span.action, .vendor-ie-9 .productList .product-image-wrapper .productTags span.action { background: transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#C8B70018, endColorstr=#C8B70018); zoom: 1; } .productList .product-image-wrapper .productTags span.new { background: rgba(112, 155, 10, 0.8); } .vendor-ie-7 .productList .product-image-wrapper .productTags span.new, .vendor-ie-8 .productList .product-image-wrapper .productTags span.new, .vendor-ie-9 .productList .product-image-wrapper .productTags span.new { background: transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#C895BE3C, endColorstr=#C895BE3C); zoom: 1; } .productList .product-image-wrapper .productTags span.quantityDiscount { background: rgba(1, 94, 172, 0.8); } .vendor-ie-7 .productList .product-image-wrapper .productTags span.quantityDiscount, .vendor-ie-8 .productList .product-image-wrapper .productTags span.quantityDiscount, .vendor-ie-9 .productList .product-image-wrapper .productTags span.quantityDiscount { background: transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#C8015EAC, endColorstr=#C8015EAC); zoom: 1; } .productList .productBox h2 { margin-bottom: 0.5em; font-size: 1.5em; line-height: 1; font-weight: 700; min-height: 3em; } .productList .productBox h2 a { color: #2B2524; } .productList .productBox .prices { list-style: none; clear: both; font-size: 1em; margin-bottom: 0.5em; line-height: 1.3; } .productList .productBox em, .productList .productBox i { font-style: normal; font-weight: 500; } .productList .productBox em { } .productList .productBox .prices span { display: block; } .productList .productBox .prices.listPrices span { display: inline-block; margin-left: 5px; color: #666666; } .productList .productBox .prices.listPrices span:before { content: '|'; font-weight: 300; margin-right: 5px; color: #000; } .productList .productBox .prices.regular li { width: 100%; } .productList .productBox .prices.discounted li { width: 100%; } .vendor-ie-7 .productList .productBox .prices.discounted { padding-bottom: 3px; } .productList .productBox .prices li.before { color: #757575; text-decoration: line-through; } .productList .productBox .prices li.after { text-align: center; color: #C00; } .productList .productBox p { font-size: 0.875em; margin-bottom: 0.5em; height: 4.5em; color: #666; text-align: center; } .productList .productBox .button.addToBasket, .productList .productBox .button.sendInquiry, .productList .productBox .button.red { cursor: pointer; } .vendor-ie-7 .productList .productBox .button.gray { float: left; } .productList .productBox .quantityPop { position: absolute; left: 0; bottom: 4.5em; width: 94%; padding: 3%; background-color: #FFFFFF; border-top: solid 1px #CECECE; border-bottom: solid 1px #CECECE; display: none; } .ua-desktop .productList .productBox .quantityPop { -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25); } .productList .productBox .quantityPop:before, .productList .productBox .quantityPop:after { content: ""; position: absolute; border-left: 7px solid transparent; border-right: 7px solid transparent; top: 100%; left: 50%; margin-left: -7px; } .productList .productBox .quantityPop:before { border-top: 7px solid #CECECE; margin-top: 1px; } .productList .productBox .quantityPop:after { border-top: 7px solid #FFFFFF; z-index: 1; } .productList .productBox .quantityPop label { display: block; font-size: 0.875em; text-align-last: left; } .quantityPop .button.red { float: right; } .productList .productBox input.txtBox { padding: 9px 6px 8px; width: 3em; text-align: center; border: 1px solid #CECECE; border-radius: 6px; float: left; } .productList .productBox .quantityPop select { margin-bottom: 0.5em; width: 100%; font-size: 0.875em; } .vendor-ie-7 .productList .productBox input.txtBox { float: left; } .productList .productBox input.txtBox:focus { outline: 0; border-color: #bf0101; } .productList .product-image-wrapper a { display: inline-block; margin: 0 auto 0; padding: 0; line-height: 0; text-align: center; border: 5px solid #ffffff; box-shadow: 0px 0px 5px #dddddd; height: 230px; } .productList .product-image-wrapper a img { display: block; height: 100% !important; width: auto; } .productList .productBox .buttons .floatedButtons { margin: 0 auto; } .productList .productBox .buttons { position: absolute; bottom: 0.8em; left: 5%; width: 90%; text-align: center; } .productList .productBox .buttons .button.gray { display: inline-block; background: none; text-shadow: none; color: #999999; font-weight: 700; padding: 0.8em 1em; border: none; display: none; } .productList .productBox .buttons .floatedButtons { display: block; text-align: center; } .discountCountdown { display: block; background: none; width: 100%; text-align: center; position: relative; padding: 0; margin: 0 auto 1em; border: 1px solid #D3031E; } .discountCountdown:before { position: absolute; left: 8px; top: 2px; font-family: 'FontAwesome'; font-size: 1.5em; content: '\f017'; color: #646464; display: none; } .discountCountdown em { font-size: 0.8em !important; font-style: normal; font-weight: 400 !important; text-transform: uppercase; color: #ffffff; padding: 5px; margin: 0 0 3px; background: #D3031E; display: block; } .discountCountdown .is-countdown { padding: 0; margin: 0; } .discountCountdown .countdown-row { background: none; padding: 0; margin: 0; width: 100%; } .discountCountdown .countdown-section { padding: 0; margin: 0 2px; text-align: center; border-radius: 4px; display: inline-block; } .discountCountdown .countdown-amount { font-size: 1em; line-height: 1; font-weight: bold; color: #D3031E; padding: 0; margin: 0; background: none; } .discountCountdown .countdown-period { font-size: 0.8em; line-height: 1; color: #afafaf; padding: 0; margin: 0 2px; background: none; display: block; } .productDetails .discountCountdown { width: auto; margin: 0.5em 0; text-align: left; font-size: 1.25em; } .productList-2 .productBox { margin-bottom: 0.5em; padding: 0.5em 1%; border: 1px solid #dddddd; } .productList-2 .productBox:nth-child(2n + 1) {} .ua-desktop .productList-2 .productBox:hover { -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; } .productList-2 .product-image-wrapper { width: 20%; margin-bottom: 0.5em; padding: 0.5em 0; float: left; text-align: center; } .productList-2 .product-image-wrapper a { display: inline-block; margin: 0 auto; width: 70%; } .productList-2 .product-desc-wrapper { width: 78%; float: right; } .productList-2 h2 { margin-bottom: 0.5em; font-size: 1.5em; } .productList-2 .productTags { list-style: none; font-size: 0.875em; } .productList-2 .productTags li { display: inline; } .productList-2 .productTags span { display: inline-block; margin: 0 0.5em 0.5em 0; color: #FFFFFF; border-radius: 6px; padding: 0 3px; text-shadow: 1px 1px 0 #000000; } .productList-2 .productTags span.action { background-color: #B70018; } .productList-2 .productTags span.new { background-color: #709B0A; } .productList-2 .productTags span.quantityDiscount { background-color: #015EAC; } .productList-2 .productBox .prices { list-style: none; clear: both; font-size: 0.875em; margin-bottom: 0.5em; } .productList-2 .productBox .prices li { padding-right: 1em; display: inline; float: left; } .productList-2 .productBox .prices.listPrices li { padding-right: 0; display: block; float: none; } .productList-2 .productBox em, .productList .productBox i { font-style: normal; } .productList-2 .productBox .prices span { display: block; font-size: 0.785em; } .productList-2 .productBox .prices.listPrices span { display: inline-block; margin-left: 5px; color: #666666; } .productList-2 .productBox .prices li.before { color: #757575; text-decoration: line-through; } .productList-2 .productBox .prices li.after { color: #C00; } .productList-2 .productBox p { font-size: 0.875em; margin-bottom: 0.5em; color: #666; } .productList-2 .productBox .buttons { text-align: right; clear: both; } .productList-2 .productBox .buttons .button { margin-right: 0.5em; } .productList-2 .productBox .quantityPop { background-color: #FFFFFF; border-top: solid 1px #CECECE; border-bottom: solid 1px #CECECE; clear: both; margin-bottom: 0.5em; padding: 0.5em; text-align: right; display: none; } .vendor-ie-7 .productList-2 .productBox .quantityPop { position: relative; zoom: 1; } .productList-2 .productBox .quantityPop label { font-size: 0.875em; } .productList-2 .productBox input.txtBox { padding: 6px 6px 7px; width: 3em; text-align: right; border: 1px solid #CECECE; border-radius: 6px; margin-right: 1em; } .productList-2 .productBox .quantityPop select { margin-right: 1em; width: 10em; font-size: 0.875em; } .productList-2 .productBox input.txtBox:focus { outline: 0; border-color: #bf0101; } .productList-2 .discountCountdown { display: inline-block; font-size: 1.125em; width: auto; } .productDetails h1 { font-size: 2em; font-weight: 700; display: block; line-height: 1.2; } .productDetails h1 span:first-child { display: block; margin: 0 auto; padding: 0; } .productDetails h1 span.productCode { font-size: 14px; font-weight: 500; display: inline-block; text-align: center; background: #f5f5f5; border: 1px solid #ededed; padding: 0.5em 1em; border-radius: 6px; } .productDetails h1 span.productCode span { display: inline-block; font-weight: 300; } .productDetails .productTags { list-style: none; font-size: 0.875em; } .productDetails .productTags li { display: inline; } .productDetails .productTags span { display: inline-block; color: #FFFFFF; margin: 0 0.3em 0.3em 0; white-space: nowrap; color: #FFFFFF; padding: 0.5em 1em; font-weight: 700; } .productDetails .productTags span:last-child { margin-right: 0; } .productDetails .productTags span.action { background-color: #B70018; } .productDetails .productTags span.new { background-color: #709B0A; } .productDetails .productTags span.quantityDiscount { background-color: #015EAC; } .productDetails .prices { list-style: none; clear: both; margin-bottom: 0.5em; font-size: 0.875em; } .productDetails .prices.listPrices { margin: 0.5em 0; } .productDetails em, .productDetails i { font-style: normal; } .productDetails .prices span { display: block; } .productDetails .prices.listPrices span { display: inline-block; margin-left: 5px; color: #666666; } .productDetails .prices.listPrices span:before { content: '|'; font-weight: 300; margin-right: 5px; color: #000; } .productDetails .prices.regular li { width: 100%; } .productDetails .prices.discounted li { width: 50%; } .productDetails .prices.listPrices li { } .vendor-ie-7 .productDetails .prices.discounted li { width: 49.9%; } .vendor-ie-7 .productDetails .prices.discounted { padding-bottom: 3px; } .productDetails .prices li.before { float: left; color: #757575; text-decoration: line-through; } .productDetails .prices li.after { float: right; text-align: right; color: #C00; } .productDetails .quantityPop, .productDetails .altBookVersionWrap { background-color: #F2F2F2; margin-bottom: 0.5em; } .productDetails .quantityPop { padding: 1em; } .productDetails .altBookVersionWrap { text-align: center; width: 49.5%; float: left; margin-left: 1%; } .productDetails .altBookVersionWrap:nth-child(2n + 1) { margin-left: 0; } .productDetails .altBookVersionWrap p { margin: 1em 1em 0.5em; } .productDetails .altBookVersionWrap a { margin: 0 auto 1em; } .productDetails p.shortDesc { font-size: 0.875em; margin-bottom: 0.5em; text-align: justify; color: #666; border-bottom: solid 1px #CECECE; padding-bottom: 0.5em; } .productDetails p.getInTouch { text-align: center; margin-bottom: 1em; } .productDetails p.notAvailable { text-align: left; background-color: #F2F2F2; padding: 1em 0.9em 0; font-size: 1.125em; } .productDetails h1.sectionTitle { margin-bottom: 0.5em; } .productDetails input.txtBox { display: inline-block; text-align: center; border: 1px solid #dddddd; padding: 0.8em 0.2em; font-size: 0.875em; font-weight: 300; color: #999999; width: 55px; } .productDetails input.txtBox:focus { outline: 0; border-color: #bf0101; } .vendor-ie-7 .productDetails input.txtBox { float: left; } .vendor-ie-10 input::-ms-clear { display: none; } .productDetails .quantityPop select { margin-bottom: 0.5em; width: 100%; font-size: 0.875em; } .productDetails .quantityPop label { display: block; font-size: 1.125em; margin: 0 auto 0.5em; } .productDetails .quantityPop .floatedButtons { float: right; padding: 2px 0 0; } .productDetails .button.red, .quantityPop .button.red { cursor: pointer; background: #709B0A; } .productDetails .button.red:hover, .quantityPop .button.red:hover { background: #92CA0D; } .rearranger { padding: 0; margin: 1em auto; font-size: 0.875em; background: #D8A94B; } .rearranger .sorter { background: #2B2524; padding: 0.8em 1em 0.8em 2em; color: #ffffff; } .rearranger .sorter span { font-weight: 500; } .rearranger ul.chooseListType, .rearranger .sorter ul { list-style: none; } .rearranger ul.chooseListType { float: left; padding: 0.8em 1em; } .rearranger ul.chooseListType li, .rearranger .sorter ul li { display: inline; } .rearranger ul.chooseListType li a { display: inline-block; text-indent: -999em; width: 32px; height: 32px; background: url(https://www.hsn.hr/layout/productListType.png?v-638093941007600574) no-repeat; margin-right: 0.5em; } .vendor-ie-7 .rearranger ul.chooseListType li a { display: block; float: left; } .rearranger ul.chooseListType li.columns a { background-position: 0 0; } .rearranger ul.chooseListType li.rows a { background-position: -32px 0; } .rearranger .sorter { float: right; line-height: 2.285714285714286; } .rearranger .sorter ul { line-height: 2.285714285714286; display: inline; margin-left: 0.5em; } .rearranger .sorter ul a { display: inline-block; margin-right: 1em; background: url(https://www.hsn.hr/layout/sorting.png?v-638093941007600574) no-repeat right 3px; padding-right: 20px; text-decoration: underline; color: #ffffff; text-decoration: none; font-weight: 300 !important; } .rearranger .sorter ul a.ascending { background-position: right -47px; } .rearranger .sorter ul a.descending { background-position: right -97px; } .general-compact { width: 100%; margin: 1em auto; border-collapse: collapse; } .general-compact thead tr th, .general-compact tbody tr td { border-bottom: 1px solid #dddddd; border-left: 1px solid #dddddd; padding: 0.5em; text-align: center; } .general-compact thead tr th { background: #f5f5f5; color: #999999; font-size: 1em; font-weight: 700; } .general-compact thead tr th:first-child, .general-compact tbody tr td:first-child { border-left: none !important; } .general-compact tbody tr td { font-weight: 300; } .general-compact tbody tr td.tabNote {} .general-plain { margin: 0 auto 2em; } .general-plain.wide { border-collapse: collapse; width: 100%; } .general-plain.narrow { display: none; } .general-plain.wide thead tr th { padding: 0.5em; font-weight: 500; font-size: 0.875em; font-weight: 700; border-bottom: 1px solid #dddddd; border-left: 1px solid #dddddd; } .general-plain.wide thead tr th:first-child { border-left: none; } .general-plain.wide tbody tr { border-bottom: 1px solid #dddddd; } .general-plain.wide tbody tr td { vertical-align: middle; padding: 1%; } .general-plain.wide tbody tr td.photo { padding: 0 1em; width: 55px; } .general-plain.wide tbody tr td.photo div { position: relative; margin: 0.5em auto; } .general-plain.wide tbody tr td.photo div label { position: absolute; left: -20px; top: 25%; } .general-plain.wide tbody tr td.photo div label input.button.blue { background: #bf0101; color: #ffffff; border: none; width: 30px; height: 30px; line-height: 10px; border-radius: 100%; font-weight: 400; font-size: 0.75em; } .general-plain.wide tbody tr td.details { } .general-plain.wide tbody tr td.details a { display: inline-block; font-size: 1.2em; font-weight: 700; color: #15150F; } .general-plain.wide tbody tr td.details span { font-size: 0.875em; color: #999999; text-align: left; } .general-plain.wide tbody tr td.details label, .general-plain.wide tbody tr td.details .productTags { text-align: left; display: none; } .general-plain.wide tbody tr td label { display: block; text-align: center; } .general-plain.wide tbody tr td label input { display: inline-block; text-align: center; border: 1px solid #dddddd; padding: 0.8em 0.2em; font-size: 0.875em; font-weight: 300; color: #999999; width: 35px; } .general-plain.wide tbody tr td span { display: block; font-weight: 500; text-align: center; } .general-plain.wide tbody tr td .priceBefore, .general-plain.wide tbody tr td .priceAfter { display: block; font-weight: 500; text-align: center; } .general-plain.wide tbody tr td .priceAfter { font-size: 1.2em; color: #E20020; } .general-plain.wide tbody tr td .priceAfter .euroPrice, .general-plain.wide tbody tr td .priceBefore .euroPrice { display: inline-block; margin-left: .5rem; } .general-plain.wide tbody tr td .priceBefore, .general-plain.wide tbody tr td .priceBefore .euroPrice { text-decoration: line-through; font-size: 1rem; } .general-plain.wide tbody tr td:last-child { text-align: center; } .general-plain.wide tbody tr td:last-child span { display: block; font-size: 1.2em; } .general-plain.wide tbody tr td:last-child span strong { font-weight: 500; } .general-plain.wide tbody tr td:last-child span.euroPrice { font-size: 1rem; } .ShoppingCart .orderSummary { width: 49.5%; font-size: 100%; margin: 1em auto; } .ShoppingCart .orderSummary .wide { display: none; } .ShoppingCart .orderSummary table.narrow { width: 100%; border-collapse: collapse; } .ShoppingCart .orderSummary table caption, .orderSummary table.wide caption { font-weight: 700; padding: 0.8em; margin-bottom: 1em; color: #999999; background-color: #f5f5f5; text-transform: uppercase; text-align: right; } .ShoppingCart .orderSummary table caption span, .orderSummary table.wide caption span { float: left; } .ShoppingCart .orderSummary table.narrow th { width: 50%; } .ShoppingCart .orderSummary table.narrow td { width: 50%; text-align: right; } .ShoppingCart .orderSummary table.narrow th, .ShoppingCart .orderSummary table.narrow td { border-bottom: 1px solid #dddddd; padding: 0.37em 0; vertical-align: middle; } .ShoppingCart .orderSummary table.narrow td .euroPrice { display: block; } .ShoppingCart .orderSummary table.narrow tr:last-child th { font-size: 1.5em; font-weight: 500; } .ShoppingCart .orderSummary table.narrow td.total { font-size: 1.5em; font-weight: 500; color: #D8A94B; } .orderSummary table.wide { width: 100%; margin: 1em auto; } .orderSummary table.wide thead th { padding: 0.5em; font-weight: 500; font-size: 0.875em; font-weight: 700; border-bottom: 1px solid #dddddd; border-left: 1px solid #dddddd; } .orderSummary table.wide thead th:first-child { border-left: 0; } .orderSummary table.wide tbody tr { border-bottom: 1px solid #dddddd; } .orderSummary table.wide tbody td { padding: 0.5em; text-align: center; } .orderSummary table.wide tbody td .euroPrice { display: block; } .orderSummary table.narrow { width: 100%; border-collapse: collapse; margin: 1em auto; } .orderSummary table.narrow caption { font-weight: 700; padding: 0.8em; margin-bottom: 1em; color: #999999; background-color: #f5f5f5; text-transform: uppercase; text-align: right; } .orderSummary table.narrow caption span { float: left; } .orderSummary table.narrow tbody th { padding: 0.5em; font-weight: 500; font-size: 0.875em; font-weight: 700; border-bottom: 1px solid #dddddd; border-left: 1px solid #dddddd; } .orderSummary table.narrow tbody th:first-child { border-left: none; } .orderSummary table.narrow tbody tr { border-bottom: 1px solid #dddddd; } .orderSummary table.narrow tbody td strong { display: block; } .general-gray-zebra { width: 100%; border-collapse: collapse; margin: 2em auto; } .general-gray-zebra th { padding: 0.5em; font-weight: 500; font-size: 0.875em; font-weight: 700; border-bottom: 1px solid #dddddd; border-left: 1px solid #dddddd; } .general-gray-zebra th:first-child { border-left: 0; } .general-gray-zebra tbody tr { border-bottom: 1px solid #dddddd; } .general-gray-zebra tbody td { padding: 0.5em; text-align: center; vertical-align: middle; } .general-gray-zebra tbody td:first-child a { font-size: 1.2em; color: #2B2524; } .general-gray-zebra tbody td:first-child span { display: block; font-size: 0.875em; color: #999999; font-weight: 300; } .general-gray-zebra tbody td.statusPaid, .general-gray-zebra tbody td.statusOrdered { font-weight: 300; } .general-gray-zebra tbody td.statusPaid { color: #3EB060; } .general-gray-zebra tbody td.statusOrdered { color: #D73D32; } .general-gray-zebra tbody td.tabNote {} .progressMeter { overflow: auto; margin: 1em auto; } .progressMeter li { float: left; width: 24.25%; color: #87888A; background-color: #f5f5f5; list-style-type: none; padding: 0.8em 0; margin-left: 1%; } .progressMeter li:nth-child(4n + 1) { margin-left: 0; } .progressMeter li.two { background-position: -138px 4px; } .progressMeter li.three { background-position: -268px 4px; } .progressMeter li.four { background-position: -416px 4px; } .progressMeter li.five { background-position: -565px 4px; } .progressMeter li.current { background-position: 4px -468px; color: #87888A; background-color: #dddddd; } .progressMeter li.current.two { background-position: -138px -468px; } .progressMeter li.current.three { background-position: -268px -468px; } .progressMeter li.current.four { background-position: -416px -468px; } .progressMeter li.current.five { background-position: -565px -468px; } .zoomGallery { border: 1px solid #eeeeee; overflow: hidden; margin-bottom: 1%; } .zoomGallery img { width: 100%; } .productGallery .bx-wrapper { margin-bottom: 0.5em !important; } .productGallery ul { list-style: none; } #zoomGalleryThumbs { list-style: none; margin-bottom: 0.5em; } #zoomGalleryThumbs li { width: 24.25%; float: left; margin-left: 1%; background: #ffffff; line-height: 0; margin-bottom: 1%; } #zoomGalleryThumbs li:nth-child(4n + 1) { margin-left: 0; } .zoomGallery img, #zoomGalleryThumbs img { display: block; } #zoomGalleryThumbs a { border: 1px solid #ffffff; display: inline-block; opacity: 0.8; line-height: 0; } #zoomGalleryThumbs a.active { border: 1px solid #00B5EF; opacity: 1; } .productGallery .bx-wrapper .bx-prev { background: url(https://www.hsn.hr/layout/bxslider/controls.png?v-638093941007600574) no-repeat -5px 10px; background-color: #00B5EF; left: 0px; top: 40px; } .productGallery .bx-wrapper .bx-next { background: url(https://www.hsn.hr/layout/bxslider/controls.png?v-638093941007600574) no-repeat -40px 10px; background-color: #00B5EF; right: 0px; top: 40px; } .stepByStep { position: relative; text-align: center; margin-bottom: 0.5em; border-radius: 6px; border: solid 1px #CECECE; } .stepByStep a { display: block; padding: 36% 0 0.5em 0; } .stepByStep span, .stepByStep i { z-index: 2; position: relative; padding: 0 1%; display: block; } .stepByStep span { font-weight: bold; font-size: 1em; } .stepByStep img { position: absolute; left: 0; top: 0; z-index: 1; border-radius: 6px; } .categoryFilter { font-size: 0.875em; margin-bottom: 1em; padding: 0.5em; } .categoryFilter .filters { margin-top: 0.5em; display: none; } .categoryFilter .filterGroup { width: 100%; padding: 0.5em; margin-bottom: 1em; margin-left: -0.5em; margin-right: -0.5em; overflow: hidden; border: 1px solid #dddddd; } .categoryFilter h1, .categoryFilter .filterToggle { text-transform: uppercase; color: #FFFFFF; padding-left: 35px; background: url('https://www.hsn.hr/layout/filterIcons.png?v-638093941007600574') no-repeat 5px 5px; background-color: #c1c1c1; margin: -0.5em; } .categoryFilter h1>a.active { margin-bottom: 1em; background: #c1c1c1; } .categoryFilter h1 a, .categoryFilter .filterToggle a { padding: 0.5em; color: #ffffff; cursor: pointer; display: block; position: relative; margin-bottom: 0.5em; } .categoryFilter h1 a span, .categoryFilter .filterToggle a span { position: absolute; top: 50%; right: 1em; width: 11px; margin-top: -4px; height: 8px; background-image: url(https://www.hsn.hr/layout/sprites.png?v-638093941007600574); background-repeat: no-repeat; display: block; } .categoryFilter h1 a span, .categoryFilter .filterToggle a span { background-position: 0 0; } .categoryFilter h1 a.active span, .categoryFilter .filterToggle a.active span { background-position: -11px 0; } .categoryFilter h2, .categoryFilter div p, .categoryFilter .alwaysShow { font-family: 'Montserrat', sans-serif; font-weight: 700; margin: 0 auto 0.5em; color: #D8A94B; text-align: left; text-transform: uppercase; padding: 0.5em 0 0.2em; border-bottom: 2px solid #D8A94B; } .categoryFilter ul, .categoryFilter ol { list-style: none; margin: 0.5em 0 0; overflow: auto; padding: 0 0.5em; } .categoryFilter ol li { float: left; width: 24.25%; margin-left: 1%; margin-bottom: 0.5em; font-weight: 600; } .categoryFilter ol li:nth-child(4n + 1) { margin-left: 0; } .categoryFilter ol li input { float: left; } .icheckbox_square-blue { float: left; } .categoryFilter ol li label { float: left; margin-left: 5px; margin-top: 0px; font-weight: 400; } .categoryFilter ol li label:hover { color: #D8A94B; cursor: pointer; } .categoryFilter ol li label span { padding-left: 2px; width: 165px; } .categoryFilter ul li { padding-left: 1em; background: url(https://www.hsn.hr/layout/blackArrow.png?v-638093941007600574) no-repeat 5px 7px; } .categoryFilter ul li.hidden { display: none; } .categoryFilter .buttons { text-align: center; margin: 0 0 1em; padding: 0.5em; } .tinynav { display: none; padding: 0; height: 27px; vertical-align: top; } .vendor-ie-8 .categoryFilter div { display: block !important; } .categoryFilter .sliderWrapper { padding: 0 10px; margin-bottom: 1em; } .categoryFilter .sliderWrapper .sliderBars { height: 40px; line-height: 40px; margin: 0 15px; font-size: 0; } .categoryFilter .sliderWrapper .sliderBars .sliderBars-bar { display: inline-block; background-color: #cccccc; width: 2%; vertical-align: bottom; } .ui-rangeSlider-bar, .ui-rangeSlider-label { background: #D7A84C !important; } .ui-rangeSlider-label-inner { border-bottom-color: #D7A84C !important; } .newsletterWrapper { width: 32.66%; float: left; margin-top: 1%; } .paymentMethod, .deliveryMethod { width: 32.66%; margin-left: 1%; float: left; background: #f5f5f5; } .contentFooter { background-color: #F2F2F2; border: solid 1px #CECECE; border-radius: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .contentFooter.inset { padding: 0 0.5em; } footer ol { list-style: none; margin-right: 50px; padding: 1em 0 0.3em; display: block; } footer ol li { display: inline-block; margin-left: 1em; } footer ol li:first-child { margin-left: 0; } footer ol li a { display: block; color: #ffffff !important; font-weight: 300; font-size: 0.875em; } footer ol li a:hover { color: #D8A94B !important; } footer .container { position: relative; } footer .back-top { width: 45px; height: 45px; background: #15150F url(https://www.hsn.hr/layout/back-top.png?v-638093941007600574) no-repeat; margin: 0; padding: 0; position: absolute; right: 0; top: 0.5em; text-indent: -999em; overflow: hidden; } ul.socialIcons { list-style: none; text-align: center; } ul.socialIcons li { display: inline; } ul.socialIcons li a { display: inline-block; width: 34px; height: 34px; text-indent: -9999em; margin: 0 0.25em 0.25em 0.25em; background: url(https://www.hsn.hr/layout/social-icons.png?v-638093941007600574) no-repeat 0 -68px; } ul.socialIcons li a#facebook { background-position: 0 0; } ul.socialIcons li a#twitter { background-position: -34px 0; } ul.socialIcons li a#googlePlus { background-position: -68px 0; } ul.socialIcons li a#linkedIN { background-position: -102px 0; } ul.socialIcons li a#skype { background-position: -136px 0; } ul.socialIcons li a#youTube { background-position: -170px 0; } ul.socialIcons li a:hover, ul.socialIcons li a:focus { -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; } ul.socialIcons li a#facebook:hover, ul.socialIcons li a#facebook:focus { background-position: 0 -34px; } ul.socialIcons li a#twitter:hover, ul.socialIcons li a#twitter:focus { background-position: -34px -34px; } ul.socialIcons li a#googlePlus:hover, ul.socialIcons li a#googlePlus:focus { background-position: -68px -34px; } ul.socialIcons li a#linkedIN:hover, ul.socialIcons li a#linkedIN:focus { background-position: -102px -34px; } ul.socialIcons li a#skype:hover, ul.socialIcons li a#skype:focus { background-position: -136px -34px; } ul.socialIcons li a#youTube:hover, ul.socialIcons li a#youTube:focus { background-position: -170px -34px; } p#footerSig { font-size: 0.875em; font-weight: 300; color: #777777; float: left; margin: 1.5em 0; } p#footerSig strong { font-weight: 300; } p#footerSig i { font-style: normal; } p#author { width: 81px; height: 24px; float: right; margin: 1.3em 0 0; } p#author a { background: url(https://www.hsn.hr/layout/sprites.png?v-638093941007600574?v_KO) no-repeat -19px -126px; display: block; width: 81px; height: 24px; text-indent: -999em; } .wsPay { text-align: center; margin-top: 1em; } .wsPay a { display: inline-block; margin: 0.5em .5em 0; background-color: #FFFFFF; height: 35px; } .wsPay .trustwaveBadge { display: inline-block; vertical-align: top; margin: 0.5em 1.5em 0 0; height: 35px; } .wsPay .trustwaveBadge img, .wsPay a img { display: block; vertical-align: middle; height: 100%; } .sub-footer { background: #15150f; margin: 1em auto 0; } .newsletterWrapper { margin: 0 auto; background: #D9AB4A; } .newsletterWrapper p { font-size: 1.1em; font-weight: 300; margin-bottom: 1em; } .newsletterBox { position: relative; border: none; background-color: #FFFFFF; padding: 0.5em; border-radius: 35px; } .newsletterBox input.txtBox { font-size: 0.875em; font-weight: 300; margin: -1px 1em 0; border: none; color: #999999; } .newsletterBox select { width: 150px; border: none; border-left: solid 1px #999999; padding: 6px; background-color: #ffffff; border-radius: 0; float: right; margin: -2px 45px 0 0; color: #999999; display: inline-block; } .searchBox { position: absolute; right: 7em; top: 0.3em; background: #f5f5f5; border: 1px solid #dddddd; border-radius: 8px; padding: 0.4em 1em 0.5em; min-width: 350px; } .searchBox { margin-bottom: 0.5em; float: right; margin: 1.5em auto 0; } .searchBox input.txtBox { font-size: 0.8125em; height: 1.625em; border: 0; color: #6c6c6c; background-color: #f5f5f5; } .searchBox input.txtBox { width: 87%; } .searchBox input.btn, .newsletterBox input.btn { background: url(https://www.hsn.hr/layout/sprites.png?v-638093941007600574) no-repeat; position: absolute; border: none; font-size: 0.1px; line-height: 0; text-indent: -999em; color: #FC0; cursor: pointer; } .searchBox input.btn { background-position: 0 -33px; width: 25px; height: 32px; top: 4px; right: 5px; } .newsletterBox input.btn { background-position: -38px -18px; width: 21px; height: 15px; top: 13px; right: 20px; } .vendor-ie-7 .newsletterBox select { border: none; margin: -24px 35px 0 0; } .vendor-opera .newsletterBox select { padding: 7px 6px; } .vendor-webkit .newsletterBox select { line-height: 26px; } .button { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 0.9375em; text-transform: uppercase; padding: 0.8em 1em; display: inline-block; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; outline: none; vertical-align: middle; line-height: 1; border-spacing: 0; border: none; } .button.small { padding: 5px 10px; font-size: 1em !important; text-transform: uppercase; } .button.addToBasket, .button.eBook.noText, .button.audioBook.noText { position: relative; margin: 0 0.2em; padding: 0.7em; background-color: #2B2524 !important; border-radius: 100%; width: 24px; height: 24px; } .button.addToBasket:hover, .button.eBook.noText:hover, .button.audioBook.noText:hover { background-color: #D8A94B !important; } .button.addToBasket span, .button.eBook.noText span, .button.audioBook.noText span { text-indent: -9999em; height: 100%; direction: rtl; overflow: hidden; position: absolute; } .button.addToBasket { background: url(https://www.hsn.hr/layout/basket-icon-small.png?v-638093941007600574) no-repeat center center; } .button.eBook, .button.audioBook { text-align: left; padding-left: 32px; } .button.eBook { background: url(https://www.hsn.hr/layout/ebook-icon-small.png?v-638093941007600574) no-repeat 7px center; } .button.audioBook { background: url(https://www.hsn.hr/layout/audioBook-icon-small.png?v-638093941007600574) no-repeat 7px center; } .button.eBook.noText, .button.audioBook.noText { background-position: center center; } .vendor-ie-7 .button.addToBasket span { text-indent: 0; direction: ltr; color: #C00; overflow: visible; } .button i { display: inline-block; font-size: 1em; margin-right: 0.5em; } .button.facebook { background-color: #3B5998; border: 1px solid #3B5998; box-shadow: 0 0 1px 1px #5e81cb inset; color: #FFFFFF; text-shadow: 0 1px 0 #000000; } .button.facebook:hover, .button.facebook:active { background-color: #294784; } .button.facebook i { background: url(https://www.hsn.hr/layout/white_facebook.png?v-638093941007600574) no-repeat 0 0; margin-right: 5px; border-right: solid 1px #5e81cb; } .button.twitter { background-color: #55ACEE; border: 1px solid #55ACEE; box-shadow: 0 0 1px 1px #7CC8FF inset; color: #FFFFFF; text-shadow: 0 1px 0 #000000; } .button.twitter:hover, .button.twitter:active { background-color: #3995D6; } .button.twitter i { background: url(https://www.hsn.hr/layout/white_twitter_bird.png?v-638093941007600574) no-repeat 0 0; margin-right: 5px; border-right: solid 1px #84CCFF; } input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { border: 0; padding: 0; margin: -1px 0; } .vendor-opera input.button { padding: 4px 5px; } .button.primary { background-color: #D8A94B; color: #ffffff; } .button.primary:hover, .button.primary:active { background-color: #b9903d; color: #ffffff; } .button.gray { background-color: #F2F2F2; color: #333333; } .button.gray:hover, .button.gray:active { background-color: #CECECE; } .button.green { background-color: #709B0A; color: #FFFFFF; } .button.green:hover, .button.green:active { background-color: #5F8400; } .button.blue { background-color: #015EAC; color: #FFFFFF; } .button.blue:hover, .button.blue:active { background-color: #00447C; } .button.red { background-color: #E20020; color: #FFFFFF; } .button.red:hover, .button.red:active { background-color: #B70018; } .button.light-blue { background-color: #87b4ec; color: #FFFFFF; } .button.light-blue:hover { background-color: #75a5e1; box-shadow: 0 0 1px 1px #89baf6 inset; color: #FFFFFF; } .button.light-blue:active { background-color: #75a5e1; box-shadow: 0 0 1px 1px #89baf6 inset; color: #feffad; } .breadcrumbs { font-size: 1em; margin: 0.5em auto 0; } .breadcrumbs ul { padding: 0.6em 0 0; text-align: center; } .breadcrumbs ul li { display: inline; border-left: 1px solid #dddddd; margin-left: 0.5em; padding-left: 0.5em; } .breadcrumbs ul li:first-child { border-left: none; margin-left: 0; padding-left: 0; } .breadcrumbs ul li:last-child { display: none; } .breadcrumbs ul li a { display: inline-block; color: #999; } .vendor-ie-7 .breadcrumbs ul li { padding: 0 0.25em; } .pagination { margin: 0 auto 2em; padding: 0; font-size: 0.875em; clear: both; display: block; } .pagination ul { display: inline-block; width: 100%; } .pagination li { display: inline-block; font-weight: 300; margin: 0 0em 0.2em; } .pagination li span { display: inline-block; width: 38px; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .pagination a { display: block; line-height: 38px; border-radius: 0; border: 1px solid #dddddd; color: #999999; } .pagination a:hover { color: #999999; background: #f5f5f5; } .pagination .active a { color: #999999; background: #f5f5f5; cursor: default; } .pagination .disabled span, .pagination .disabled a, .pagination .disabled a:hover { color: #999999; background-color: transparent; cursor: default; } .pagination-centered { text-align: center; } .pagination-right { text-align: right; } .login-registration { margin: 0 auto 2em; } .loginBox, .registrationBox { width: 43%; float: left; padding: 3%; border: 1px solid #EBEBEB; } .registrationBox { float: right; } .loginBox h3, .registrationBox h3 { margin: 0 auto 0.2em; padding: 0; color: #2B2524; font-weight: 600; font-size: 2em; text-transform: uppercase; } .loginBox p, .registrationBox p { font-weight: 300; } .loginBox .contentForm { border: none; margin: 0 auto; padding: 0; } .loginBox input[type="checkbox"] { display: inline-block; } .loginBox .formField label { display: block; line-height: 1.2; font-weight: 300; } .registrationBox { background: #ebebeb; } .registrationBox .buttons { margin: 1em 0; } .registrationBox .buttons .button.red { padding: 0.8em; font-size: 1.125em; font-weight: 500; } input, select, textarea { } select { padding: 0.8em; border: solid 1px #CECECE; font-size: 0.875em; } .contentForm { padding: 1em 0 2em; } .contentForm * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .contentForm legend { font-weight: 700; padding: 0.8em; margin-bottom: 1em; color: #999999; background-color: #f5f5f5; text-transform: uppercase; width: 100%; text-align: center; } .contentForm legend span { display: block; font-size: 0.75em; font-weight: normal; font-style: italic; } .contentForm>div { clear: both; overflow: hidden; padding: 1px; margin: 0 0 0.5em 0; } .contentForm .inset { padding-left: 30%; } .contentForm .inset.wspay a, .cms.wspay a { display: inline-block; margin: 0.5em 0.5em 0.5em 0; } .cms.wspay { text-align: center; } .contentForm>div p { margin: 0 0.5em 1em; clear: both; font-weight: 300; } .contentForm .editable { padding-top: 5px; } .contentForm .hidden { display: none; } .vendor-ie-8 .contentForm .hidden { padding-top: 7px; } .contentForm .fieldLabel { display: block; float: left; width: 30%; text-align: right; font-size: 1em; padding: 0.2em 1em; } .contentForm .fieldLabel span { display: inline-block; padding-right: 10px; } .contentForm .formField span.selectionDesc { font-weight: 300; font-size: 1em; display: block; padding-left: 1.3em; margin-bottom: 0.5em; font-style: normal; } .contentForm label.fieldLabel span { padding-top: 4px; } .contentForm .formField { width: 70%; float: right; } .contentForm .formField .euroPrice { margin-left: .25rem; font-weight: 500; } .contentForm .formField div { margin-right: 0.5em; } .contentForm .formField div label { font-weight: 300; } .contentForm .formField div:last-child { margin-right: 0; } .contentForm .formField.breakLine div { float: none; margin: 0 0 0.3em 0; } .contentForm .inset .formField { float: left; width: 100%; } .contentForm .formField .message { display: none; background: #52B948; border: 1px solid #408E37; margin: 0.5em 0 0; max-width: 70%; border-radius: 4px; } .contentForm .formField .message p { font-size: 0.875em; color: #ffffff; padding: 0; margin: 0.8em; } .contentForm .formField .message.active { display: block; } .contentForm .inset p { margin: 0 0 1em; } .contentForm .grayed { color: #999999; } .contentForm input.txtBox { width: 70%; padding: 0.8em; border: solid 1px #CECECE; font-size: 0.875em; } .contentForm .superSelectContainer { width: 70%; } .contentForm .superSelectContainer, .contentForm .superSelectContainer div { margin: 0 !important; } .contentForm .txtArea { font-size: 1em; width: 70%; min-width: 70%; max-width: 70%; padding: 0.8em; border: solid 1px #CECECE; } input[type="checkbox"], input[type="radio"] { padding: 0; margin-left: 0; vertical-align: top; } .vendor-ie-7 input[type="checkbox"], .vendor-ie-7 input[type="radio"] { margin-top: -2px; vertical-align: middle; } .vendor-ie-8 input[type="checkbox"], .vendor-ie-8 input[type="radio"] { margin-top: -3px; vertical-align: middle; } input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, textarea:focus, .txtArea:focus { outline: 0; border-color: #bf0101; } .contentForm em { color: #bf0101; font-weight: bold; padding-right: 4px; } .contentForm .button { font-size: 1em; } fieldset.buttons { text-align: center; margin: 1em auto; display: block; padding-top: 1em; clear: both; } fieldset.buttons label { display: inline-block; margin: 0 0.25em 0.5em; } .contentForm.terms label { display: block; position: relative; font-size: 0.875em; margin: 0 0.5em 0.5em; } .contentForm.terms label input[type='checkbox'] { position: absolute; top: 0; left: 0; } .contentForm.terms label span { display: block; padding-left: 1.5em; font-weight: 300; } .contentForm.terms label a { text-decoration: underline; color: #D8A94B; font-weight: 700; } .promoCode { width: 49.5%; float: left; margin-right: 1%; } .promoCode .contentForm .fieldLabel { padding: 0.5em 1em; text-align: center; } .promoCode .contentForm .fieldLabel span { padding: 0; } .promoCode .contentForm input.txtBox { border-radius: 8px; color: #999999; font-weight: 300; } .promoCode .breakLine { float: right; } .promoCode .button.blue { border: none; font-size: 0.875em; font-weight: 700; background: #dddddd; color: #999999; text-shadow: none; padding: 1em 1.5em; border-radius: 8px; } .promoCode .contentForm legend { margin: 0 auto; } .promoCode .contentForm .formField {} .promoCode .code { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; display: inline-block; width: 100%; padding: 0.5em; } .promoCodeMark { font-size: 0.8571em; margin-top: 5px; text-align: center; } .promoCodeMark span { display: inline-block; background-color: #FFC; border: dotted 1px #cecece; padding: 3px; border-radius: 4px; text-align: center; } .promoCodeMark em { font-style: normal; color: #E20020; font-size: 1.1666em; } .wide .promoCodeMark { text-align: center; } .narrow .promoCodeMark { text-align: left; } .promoCodeMark strong { display: block; } .promoCodeMsg-success, .promoCodeMsg-error { margin: 1em 0.5em 0.5em; font-size: 1.125em; padding: 15px 20px 15px 80px; min-height: 80px; border-radius: 6px; border-style: solid; border-width: 3px; background-image: url(https://www.hsn.hr/layout/bg-boxCouponCode.png?v-638093941007600574); background-repeat: no-repeat; color: #FFFFFF; clear: both; text-align: center; } .promoCodeMsg-success span, .promoCodeMsg-error span { text-decoration: underline; } .promoCodeMsg-success { background-position: 10px 10px; background-color: #349744; border-color: #1b7e2b; } .promoCodeMsg-error { background-position: 10px -238px; background-color: #E20020; border-color: #b2051d; } .bookFlipButton { display: inline-block; background: #349744 url(https://www.hsn.hr/layout/bookFlipIcon.png?v-638093941007600574) no-repeat 5px 5px; padding: 10px 10px 10px 55px; font-size: 1.1428em; border-radius: 4px; border: solid 1px #1b7e2b; text-transform: uppercase; } .bookFlipButton:link, .bookFlipButton:visited, .bookFlipButton:hover, .bookFlipButton:active { color: #ffffff; } .bookFlipButton:hover, .bookFlipButton:active { color: #ffffff; background-color: #1b7e2b; } .DeliveryTypes .formField div label { font-weight: 800; font-size: 1.125em; } .messageBox { margin: 1em auto; padding: 1em; background: #fff; border: 2px solid #dddddd; border-radius: 6px; color: #252021; } .messageBox ul { list-style: none; margin: 0; padding: 0; } .messageBox ul li { font-weight: 400; font-size: 1em; } .messageBox ul li strong, .messageBox ul li b { font-weight: 600; } .alert { background: rgba(255, 213, 43, 0.15); border-color: #FFD52B; } .error { background: rgba(233, 78, 60, 0.15); border-color: #E94E3C; } .info { background: rgba(47, 205, 112, 0.15); border-color: #2FCD70; } .resp-tabs-list { background: #2B2524; display: inline-block; width: 100%; margin-top: 2em; } .resp-tabs-list li { display: inline-block; padding: 1em 1.5em; list-style: none; cursor: pointer; float: left; text-align: center; font-size: 1em; text-transform: uppercase; color: #777777; } .resp-tabs-container { background-color: #FFFFFF; clear: left; margin-bottom: 1em; } h2.resp-accordion { cursor: pointer; padding: 0.5em; display: none; border-radius: 6px; border: 1px solid #CECECE; border-top: none; padding: 0.5em; } .resp-tab-content { display: none; padding: 0.5em; border: 1px solid #CECECE; } .resp-tab-active { color: #ffffff !important; background-color: #D8A94B !important; } .vendor-ie .resp-tab-active, .vendor-opera .resp-tab-active { padding-bottom: 0.6em !important; position: relative; } .resp-content-active, .resp-accordion-active { display: block; } h2.resp-tab-active { border-bottom: none !important; margin-bottom: 0 !important; padding: 0.5em !important; } .resp-arrow { width: 0; height: 0; float: right; margin-top: 0.5em; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #CECECE; } h2.resp-tab-active span.resp-arrow { border: none; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #87888A; } h2.resp-tab-active { background: #F2F2F2 !important; } .resp-easy-accordion h2.resp-accordion { display: block; } .resp-easy-accordion .resp-tab-content { border: 1px solid #CECECE; } .resp-easy-accordion .resp-tab-content:last-child { border-bottom: 1px solid #CECECE !important; } .resp-jfit { width: 100%; } .resp-tab-content-active { display: block; } h2.resp-accordion:first-child { border-top: 1px solid #CECECE !important; } .productGallery .resp-tabs-container .relatedProducts.productList .productBox { width: 49.5%; } .productGallery .resp-tabs-container .relatedProducts.productList .productBox:nth-child(3n + 1) { margin-left: 1%; } .productGallery .resp-tabs-container .relatedProducts.productList .productBox:nth-child(2n + 1) { margin-left: 0; } .relatedProductsDiscountMessage { background-color: #E20020; margin-bottom: 1em; color: #ffffff; padding: 0.5em 0.5em 0.5em 60px; text-align: left; font-size: 1em; cursor: pointer; position: relative; } .relatedProductsDiscountMessage p { margin-bottom: 0.5em; } .relatedProductsDiscountMessage small { font-size: 0.75em; line-height: 1; } .relatedProductsDiscountMessage .icon { position: absolute; left: 0.5em; top: 0; width: 47px; height: 87px; display: block; background: url(https://www.hsn.hr/layout/sprites.png?v-638093941007600574) no-repeat 0 -163px; } .documents ol { list-style: none; } .documents a { display: block; padding: 0.5em 0 0.5em 40px; } .documents a:hover { background-color: #F2F2F2 !important; } .documents ol li { margin-bottom: 0.5em; border-bottom: dotted 1px #CECECE; } .documents ol li:last-child { margin-bottom: 0; border-bottom: none; } .documents ol li.pdf a { background: url(https://www.hsn.hr/layout/icon-file-pdf.png?v-638093941007600574) no-repeat 0 0.5em; } .documents ol li.doc a, .documents ol li.docx a { background: url(https://www.hsn.hr/layout/icon-file-doc.png?v-638093941007600574) no-repeat 0 0.5em; } .documents ol li.rar a { background: url(https://www.hsn.hr/layout/icon-file-rar.png?v-638093941007600574) no-repeat 0 0.5em; } .documents ol li.xls a { background: url(https://www.hsn.hr/layout/icon-file-xls.png?v-638093941007600574) no-repeat 0 0.5em; } .documents ol li.xlsx a { background: url(https://www.hsn.hr/layout/icon-file-xlsx.png?v-638093941007600574) no-repeat 0 0.5em; } .documents ol li.ppt a { background: url(https://www.hsn.hr/layout/icon-file-ppt.png?v-638093941007600574) no-repeat 0 0.5em; } .documents ol li.file a { background: url(https://www.hsn.hr/layout/icon-file-blank.png?v-638093941007600574) no-repeat 0 0.5em; } .documents ol li span { display: block; color: #666; } .videoGallery .videoContainer { width: 49.5%; margin-left: 1%; margin-bottom: 1%; float: left; } .videoGallery .videoContainer:nth-child(2n + 1) { margin-left: 0; } .videoContainer div { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .videoContainer div iframe, .videoContainer div object, .videoContainer div embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .videoContainer h2 { margin: 0.5em 0; display: none; } .videoContainer p { margin-bottom: 0.5em; display: none; } .iFrameContainer { width: 100%; margin-bottom: 1em; } .iFrameContainer div { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .iFrameContainer div iframe, .iFrameContainer div object, .iFrameContainer div embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .photoGallery .imageContainer { width: 24.25%; margin-left: 1%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFF; } .photoGallery .imageContainer:hover { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .photoGallery .imageContainer img { display: block; } .photoGallery .imageContainer:nth-child(4n + 1) { margin-left: 0; } .photoGallery .row { margin-bottom: 0.5em; } .singleContact { margin-bottom: 0.5em; border-bottom: dotted 1px #CECECE; padding-bottom: 0.5em; } .singleContact:last-child { border-bottom: none; } .singleContact .contactPhoto { width: 25%; float: left; } .singleContact .skypeContainer { display: inline-block; height: 28px; overflow: hidden; } .vendor-ie-7 .singleContact .skypeContainer { float: left; } .singleContact .skypeContainer img { margin: 0 !important; vertical-align: 0 !important; } .singleContact h2, .singleContact ul { float: right; width: 72%; } .singleContact h2 { background-color: #F2F2F2; margin-bottom: 0.5em; padding: 1%; border-radius: 6px; color: #000000; } .singleContact h2 span.jobTitle { display: block; font-weight: normal; font-size: 0.857em; color: #000; } .singleContact ul { list-style: none; padding: 0 1%; position: relative; } .singleContact ul li { margin-bottom: 0.5em; } .singleContact ul li.social { clear: both; border-top: dotted 1px #CECECE; border-bottom: dotted 1px #CECECE; padding: 0.3em 0; } .singleContact ul li.social a { margin-right: 0.5em; } .singleContact .getInTouch { clear: both; text-align: right; font-size: 1.1428em; } .wysiwyg.longDesc { font-size: 1em; font-weight: 300; } .wysiwyg p { margin-bottom: 1em; } .wysiwyg h1, .wysiwyg h2, .wysiwyg h3, .wysiwyg h4, .wysiwyg h5, .wysiwyg h6 { font-weight: normal; margin-bottom: 1em; color: #E20020; } .wysiwyg h1 { font-size: 1.4285em; } .wysiwyg h2 { font-size: 1.2857em; } .wysiwyg h3 { font-size: 1.1428em; } .wysiwyg h4, .wysiwyg h5, .wysiwyg h6 { font-size: 1em; } .wysiwyg ul, .wysiwyg ol, .wysiwyg dl { margin: 1em 1em 1em 2em; } .wysiwyg ol li { list-style: decimal outside; line-height: 1.5; } .wysiwyg ul li { list-style: disc outside; line-height: 1.5; } .notification { background: rgb(51, 51, 51); background: rgba(51, 51, 51, 0.9); border-bottom: solid 3px #333333; position: fixed; top: 0; left: 0; width: 98%; padding: 0.5em 1%; text-align: center; z-index: 999999; color: #FFFFFF; } .notification .wysiwyg { font-size: 0.875em; margin: 0 auto; max-width: 70em; } .notification .wysiwyg ul, .notification .wysiwyg ul li { list-style: none; } .notification .buttons, .extraButtons { text-align: center; } .notification.hide { display: none; } .responsiveTable { border: none; border-collapse: collapse; margin-bottom: 1em; width: 100%; border-spacing: 0; } .responsiveTable .hrkPrice, .responsiveTable .euroPrice { display: block; } .responsiveTable.width50 th, .responsiveTable.width50 td { width: 50% !important; } .responsiveTable tr:nth-child(2n+1) { background: #f5f5f5; } .responsiveTable td, .responsiveTable th { padding: 0.8em 1em; } .responsiveTable td strong, .responsiveTable td b { font-weight: 500; } .responsiveTable th { text-align: right; } .toggleable .textBlock { display: none; padding: 1px; } .toggleable .textBlock.active { display: block; } .textBlockToggle { border: solid 1px #D3D3D3; padding: 0.5em; position: relative; cursor: pointer; text-align: center; text-transform: uppercase; } .textBlockToggle.active { background-color: #ffffff; } .textBlockToggle:after { content: ''; position: absolute; top: 50%; right: 1em; margin-top: -3px; height: 0; width: 0; border: 8px solid transparent; border-top-color: #2B2524; } .textBlockToggle.active:after { margin-top: -12px; border-top-color: transparent; border-bottom-color: #D8A94B; } .gdpr { width: 90%; max-width: 50em; margin: 0 auto; } .gdpr p { font-size: 1.125em; font-weight: 300; margin: 0 auto 1em; } .gdpr p strong { font-weight: 500; } .gdpr .fieldLabel { float: none; margin-bottom: 0.5em; padding: 0; display: block; width: 100%; text-align: left; font-size: 1.125em; } .gdpr em { font-style: normal; color: red; } .gdpr .contentForm .formField { float: none; width: 100%; } .gdpr .contentForm input.txtBox { width: 55%; } .gdpr .contentForm select { width: 40%; margin-left: 4%; } .gdpr .checkbox { position: relative; padding-left: 20px; font-size: 1.125em; font-weight: 300; color: #111111; } .gdpr .checkbox input[type="checkbox"] { position: absolute; top: 6px; left: 0; } .gdpr .inset { padding: 0.5em 0; } .gdpr .inset .button { min-width: 180px; } @media only screen and (max-width: 1300px) { .slidingBox h2 { font-size: 1.5em; } .slidingBox p { font-size: 1em; } .productList .productBox { width: 24.25%; } .productList .productBox:nth-child(6n) { margin-left: 1%; } .productList .productBox:nth-child(4n + 1) { margin-left: 0; } .newsletterWrapper h3, .paymentMethod h3, .deliveryMethod h3 { font-size: 1.5em; } .newsletterWrapper p, .paymentMethod p, .deliveryMethod p { font-size: 1em; margin: 0 auto 0.3em; } .newsletterBox { margin-top: 1.5em; } .wsPay a, .wsPay .trustwaveBadge { height: 33px; } .searchBox { min-width: 280px; } } @media only screen and (max-width: 1024px) { .logo-holder h2 { font-size: 1.8em; padding: 0.3em 0.5em; } .slidingBox a.button { display: none; } .top-header { min-height: 43px; position: relative; } .top-header .container { width: 100%; } #topNav { width: 100%; position: absolute; min-height: 43px; } .goMobile-btn { display: block; } .goMobile-subArrow { display: block !important; background: #111111 url(https://www.hsn.hr/layout/sprites.png?v-638093941007600574) no-repeat -82px 9px; height: 25px; width: 25px; position: absolute; top: 18px; right: 0.5em; cursor: pointer; border-radius: 100%; } .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: #D8A94B; } .sf-menu { width: 100% !important; display: none; float: none; padding: 0; position: absolute; top: 100%; z-index: 99999; } .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-arrows .sf-with-ul:after { display: none !important; } .sf-menu li { float: none !important; display: block !important; width: 100% !important; border-radius: 0 !important; position: relative; } .sf-menu li { background: transparent; } .sf-menu a { background: #2B2524; background: rgba(43, 37, 36, 0.95); border-top: solid 1px #887774; text-align: center; font-size: 1.2em; } .sf-menu .xpopdrop { display: block !important; } .sf-menu ul li a { font-size: 0.875em; border-top: none; background: none !important; } .sf-menu ul ul li a {} .sf-menu ul ul ul li a {} .sf-menu li:hover, .sf-menu li.sfHover { } .userArea { position: absolute; top: 0; right: 55px; } .promoCode, .ShoppingCart .orderSummary { width: 100%; display: block; float: none; } .promoCode .contentForm legend { cursor: pointer; } .promoCode .contentForm>div { display: none; } .promoCode .contentForm>div.active { display: block; } .ShoppingCart .buttons .emptyCart, .ShoppingCart .buttons .refreshCart, .ShoppingCart .buttons .continueShopping, .ShoppingCart .buttons .checkout { font-size: 0.75em; } } @media only screen and (min-width: 900px) { .orderSummary table.narrow { display: none; } .ShoppingCart .orderSummary table.narrow { display: table; margin: 0 auto; } } @media only screen and (max-width: 900px) { header { padding-top: 4em; } .searchBox { width: 95%; margin: 0 auto; right: 0.3em; top: 1.5em; } .orderSummary table.wide { display: none; } .productList .productBox:nth-child(5n), .productList .productBox:nth-child(9n) { margin-left: 1%; } .productList .productBox { width: 32.66666666666667%; } .productList .productBox:nth-child(3n + 1) { margin-left: 0; } .index-article article, .contentBlock article { display: block; width: 100%; float: none; margin: 0 auto 2em; } .index-article article:before, .index-article article:after, .contentBlock article:before, .contentBlock article:after { content: ""; display: table; } .index-article article:after, .index-article article:after { clear: both; } .index-article article .photoFrame, .contentBlock article .photoFrame { float: left; width: 35%; } .index-article article .wysiwyg, .contentBlock article .wysiwyg { float: left; width: 60%; margin-left: 5%; text-align: left; } .index-article article .date, .contentBlock article .date { text-align: left; padding: 0; margin: 0 auto 0.5em; } .index-article article h2, .contentBlock article h2 { font-size: 1.5em; } .smallBanners .smallBanner { width: 49.5%; margin-left: 1%; } .smallBanners .smallBanner:nth-child(2n + 1) { margin-left: 0; } .newsletterWrapper { width: 100%; float: none; display: block; margin: 0 auto 1%; } .paymentMethod, .deliveryMethod { width: 49.5%; } .paymentMethod { margin-left: 0; } .loginBox, .registrationBox { width: 92%; margin: 1em auto; float: none; } } @media only screen and (max-width: 800px) { .span_2_of_3, .span_1_of_3 { width: 100%; margin: 0 auto 0.5em; float: none; } .productGallery { width: 60% !important; } } @media only screen and (min-width: 768px) {} @media only screen and (max-width: 640px) { .productDetails .altBookVersionWrap { width: 100%; margin: 0 auto 0.5em; float: none; } .rearranger ul.chooseListType, .rearranger .sorter { padding: 0.5em; } .productList .productBox:nth-child(4n), .productList .productBox:nth-child(10n) { margin-left: 1%; } .productList .productBox { width: 49.5%; } .productList .productBox:nth-child(2n + 1) { margin-left: 0; } .newsletterWrapper, .paymentMethod, .deliveryMethod { width: 100%; float: none; display: block; margin: 0 auto 1%; } header { text-align: center; } a.basket { float: none; margin: 1em auto; text-align: center; } .banner-content .text, .banner-content .images { display: block; float: none; width: 100% !important; clear: both; padding: 1em 0; margin: 0 !important; text-align: center; } .progressMeter li { display: block; float: none; width: 100%; margin: 0 auto 0.5em; padding: 0.3em 0; } .searchBox { text-align: left; width: 93%; } .responsiveTable.width50 th, .responsiveTable.width50 td, .responsiveTable th, .responsiveTable td { display: block; width: auto !important; text-align: center; padding: 0.5em; } .extraButtons .button { display: block; margin: 0 auto 0.5em; } .general-plain.wide tbody tr td { text-align: center; } .general-plain.wide tbody tr td.details a { font-size: 0.875em; } } @media only screen and (max-width: 600px) { .slidingBox { text-align: center; } .slidingBox h2 { font-size: 1em; width: 90%; margin: 0.5em auto; } .slidingBox p { font-size: 0.75em; width: 90%; margin: 0.5em auto; } .newsletterBox } @media only screen and (max-width: 480px) { a.basket { margin: 0.5em auto; float: none; } header h1, header .logo-holder { display: block; float: none; } header .logo-holder a { float: none; margin: 0 auto; text-align: center; display: block; } .logo-holder h2 { font-size: 1.3em; text-align: center; display: block; float: none; } .rearranger .sorter { padding: 0.75em 0.3em; font-size: 0.875em; } .rearranger .sorter span { display: none; } .rearranger ul.chooseListType li a { margin-right: 0; } .slidingBox { width: 100%; margin: 0 auto; display: block; } .slidingBox h2, .slidingBox p { text-align: center; width: 90%; margin: 1em auto; } .slidingBox h2 { font-size: 2em; } .slidingBox p { font-size: 1em; } .index-article article { float: none; width: 100%; margin: 1em auto; } .smallBanners .smallBanner { width: 49.5%; margin-bottom: 1%; } .smallBanners .smallBanner:nth-child(2n + 1) { margin-left: 0; } .searchBox { width: 90%; right: 1%; } footer ol { margin: 1em auto 1.5em; padding: 1em 0 0; } footer ol li { width: 100%; margin: 0 auto; padding: 0.2em 0; text-align: center; } footer ol li a { font-size: 1em; } p#footerSig { float: none; text-align: center; } p#footerSig i { display: block; } p#author { float: none; margin: 0 auto 2em; } .orderSummary table.narrow caption { text-align: center; } .orderSummary table.narrow caption span { display: block; float: none; } .orderSummary table.narrow th, .orderSummary table.narrow td { display: block !important; text-align: center !important; border: none; padding: 0.8em; width: 100% !important; } .orderSummary table.narrow th { background: #f5f5f5; } #sideUserAreaNav .sideNav ul li { float: none; display: block; border: none; } } @media only screen and (max-width: 360px) { .index-article article .photoFrame, .index-article article .wysiwyg { width: 100%; margin: 0 auto; } .index-article article .wysiwyg { text-align: center; } .index-article article .date { text-align: center; margin: 0.5em auto; } .smallBanners .smallBanner { width: 100%; margin: 0 auto 1%; float: none; } .slidingBox { width: 100%; margin: 0 auto; display: block; } .slidingBox h2, .slidingBox p { text-align: center; width: 90%; margin: 1em auto; } .productList .productBox { width: 100%; padding: 1em 1em 3.5em; margin: 0 auto 1em !important; float: none; } .section-title:before, .section-title:after { width: 20%; } .searchBox { width: 90%; right: 0; } .searchBox input.txtBox { width: 80%; } }