/* https://github.com/rishabh-rajgarhia/bootstrap-4-utilities */ .mr-0,.mx-0{margin-right:0!important}.ml-0,.mx-0{margin-left:0!important}.mt-0,.my-0{margin-top:0!important}.mb-0,.my-0{margin-bottom:0!important}.pr-0,.px-0{padding-right:0!important}.pl-0,.px-0{padding-left:0!important}.pt-0,.py-0{padding-top:0!important}.pb-0,.py-0{padding-bottom:0!important}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.m-0{margin:0!important}.mr-1,.mx-1{margin-right:.25rem!important}.ml-1,.mx-1{margin-left:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mb-1,.my-1{margin-bottom:.25rem!important}.m-1{margin:.25rem!important}.mr-2,.mx-2{margin-right:.5rem!important}.ml-2,.mx-2{margin-left:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mb-2,.my-2{margin-bottom:.5rem!important}.m-2{margin:.5rem!important}.mr-3,.mx-3{margin-right:1rem!important}.ml-3,.mx-3{margin-left:1rem!important}.mt-3,.my-3{margin-top:1rem!important}.mb-3,.my-3{margin-bottom:1rem!important}.m-3{margin:1rem!important}.mr-4,.mx-4{margin-right:1.5rem!important}.ml-4,.mx-4{margin-left:1.5rem!important}.mt-4,.my-4{margin-top:1.5rem!important}.mb-4,.my-4{margin-bottom:1.5rem!important}.m-4{margin:1.5rem!important}.mr-5,.mx-5{margin-right:3rem!important}.ml-5,.mx-5{margin-left:3rem!important}.mt-5,.my-5{margin-top:3rem!important}.mb-5,.my-5{margin-bottom:3rem!important}.m-5{margin:3rem!important}.p-0{padding:0!important}.pr-1,.px-1{padding-right:.25rem!important}.pl-1,.px-1{padding-left:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pb-1,.py-1{padding-bottom:.25rem!important}.p-1{padding:.25rem!important}.pr-2,.px-2{padding-right:.5rem!important}.pl-2,.px-2{padding-left:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pb-2,.py-2{padding-bottom:.5rem!important}.p-2{padding:.5rem!important}.pr-3,.px-3{padding-right:1rem!important}.pl-3,.px-3{padding-left:1rem!important}.pt-3,.py-3{padding-top:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.p-3{padding:1rem!important}.pr-4,.px-4{padding-right:1.5rem!important}.pl-4,.px-4{padding-left:1.5rem!important}.pt-4,.py-4{padding-top:1.5rem!important}.pb-4,.py-4{padding-bottom:1.5rem!important}.p-4{padding:1.5rem!important}.pr-5,.px-5{padding-right:3rem!important}.pl-5,.px-5{padding-left:3rem!important}.pt-5,.py-5{padding-top:3rem!important}.pb-5,.py-5{padding-bottom:3rem!important}.p-5{padding:3rem!important}@media (min-width:768px){.float-sm-left{float:left!important}.float-sm-right{float:right!important}.float-sm-none{float:none!important}.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}.mr-sm-0,.mx-sm-0{margin-right:0!important}.ml-sm-0,.mx-sm-0{margin-left:0!important}.mt-sm-0,.my-sm-0{margin-top:0!important}.mb-sm-0,.my-sm-0{margin-bottom:0!important}.pr-sm-0,.px-sm-0{padding-right:0!important}.pl-sm-0,.px-sm-0{padding-left:0!important}.pt-sm-0,.py-sm-0{padding-top:0!important}.pb-sm-0,.py-sm-0{padding-bottom:0!important}.m-sm-0{margin:0!important}.mr-sm-1,.mx-sm-1{margin-right:.25rem!important}.ml-sm-1,.mx-sm-1{margin-left:.25rem!important}.mt-sm-1,.my-sm-1{margin-top:.25rem!important}.mb-sm-1,.my-sm-1{margin-bottom:.25rem!important}.m-sm-1{margin:.25rem!important}.mr-sm-2,.mx-sm-2{margin-right:.5rem!important}.ml-sm-2,.mx-sm-2{margin-left:.5rem!important}.mt-sm-2,.my-sm-2{margin-top:.5rem!important}.mb-sm-2,.my-sm-2{margin-bottom:.5rem!important}.m-sm-2{margin:.5rem!important}.mr-sm-3,.mx-sm-3{margin-right:1rem!important}.ml-sm-3,.mx-sm-3{margin-left:1rem!important}.mt-sm-3,.my-sm-3{margin-top:1rem!important}.mb-sm-3,.my-sm-3{margin-bottom:1rem!important}.m-sm-3{margin:1rem!important}.mr-sm-4,.mx-sm-4{margin-right:1.5rem!important}.ml-sm-4,.mx-sm-4{margin-left:1.5rem!important}.mt-sm-4,.my-sm-4{margin-top:1.5rem!important}.mb-sm-4,.my-sm-4{margin-bottom:1.5rem!important}.m-sm-4{margin:1.5rem!important}.mr-sm-5,.mx-sm-5{margin-right:3rem!important}.ml-sm-5,.mx-sm-5{margin-left:3rem!important}.mt-sm-5,.my-sm-5{margin-top:3rem!important}.mb-sm-5,.my-sm-5{margin-bottom:3rem!important}.m-sm-5{margin:3rem!important}.p-sm-0{padding:0!important}.pr-sm-1,.px-sm-1{padding-right:.25rem!important}.pl-sm-1,.px-sm-1{padding-left:.25rem!important}.pt-sm-1,.py-sm-1{padding-top:.25rem!important}.pb-sm-1,.py-sm-1{padding-bottom:.25rem!important}.p-sm-1{padding:.25rem!important}.pr-sm-2,.px-sm-2{padding-right:.5rem!important}.pl-sm-2,.px-sm-2{padding-left:.5rem!important}.pt-sm-2,.py-sm-2{padding-top:.5rem!important}.pb-sm-2,.py-sm-2{padding-bottom:.5rem!important}.p-sm-2{padding:.5rem!important}.pr-sm-3,.px-sm-3{padding-right:1rem!important}.pl-sm-3,.px-sm-3{padding-left:1rem!important}.pt-sm-3,.py-sm-3{padding-top:1rem!important}.pb-sm-3,.py-sm-3{padding-bottom:1rem!important}.p-sm-3{padding:1rem!important}.pr-sm-4,.px-sm-4{padding-right:1.5rem!important}.pl-sm-4,.px-sm-4{padding-left:1.5rem!important}.pt-sm-4,.py-sm-4{padding-top:1.5rem!important}.pb-sm-4,.py-sm-4{padding-bottom:1.5rem!important}.p-sm-4{padding:1.5rem!important}.pr-sm-5,.px-sm-5{padding-right:3rem!important}.pl-sm-5,.px-sm-5{padding-left:3rem!important}.pt-sm-5,.py-sm-5{padding-top:3rem!important}.pb-sm-5,.py-sm-5{padding-bottom:3rem!important}.p-sm-5{padding:3rem!important}}@media (min-width:992px){.float-md-left{float:left!important}.float-md-right{float:right!important}.float-md-none{float:none!important}.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}.mr-md-0,.mx-md-0{margin-right:0!important}.ml-md-0,.mx-md-0{margin-left:0!important}.mt-md-0,.my-md-0{margin-top:0!important}.mb-md-0,.my-md-0{margin-bottom:0!important}.pr-md-0,.px-md-0{padding-right:0!important}.pl-md-0,.px-md-0{padding-left:0!important}.pt-md-0,.py-md-0{padding-top:0!important}.pb-md-0,.py-md-0{padding-bottom:0!important}.m-md-0{margin:0!important}.mr-md-1,.mx-md-1{margin-right:.25rem!important}.ml-md-1,.mx-md-1{margin-left:.25rem!important}.mt-md-1,.my-md-1{margin-top:.25rem!important}.mb-md-1,.my-md-1{margin-bottom:.25rem!important}.m-md-1{margin:.25rem!important}.mr-md-2,.mx-md-2{margin-right:.5rem!important}.ml-md-2,.mx-md-2{margin-left:.5rem!important}.mt-md-2,.my-md-2{margin-top:.5rem!important}.mb-md-2,.my-md-2{margin-bottom:.5rem!important}.m-md-2{margin:.5rem!important}.mr-md-3,.mx-md-3{margin-right:1rem!important}.ml-md-3,.mx-md-3{margin-left:1rem!important}.mt-md-3,.my-md-3{margin-top:1rem!important}.mb-md-3,.my-md-3{margin-bottom:1rem!important}.m-md-3{margin:1rem!important}.mr-md-4,.mx-md-4{margin-right:1.5rem!important}.ml-md-4,.mx-md-4{margin-left:1.5rem!important}.mt-md-4,.my-md-4{margin-top:1.5rem!important}.mb-md-4,.my-md-4{margin-bottom:1.5rem!important}.m-md-4{margin:1.5rem!important}.mr-md-5,.mx-md-5{margin-right:3rem!important}.ml-md-5,.mx-md-5{margin-left:3rem!important}.mt-md-5,.my-md-5{margin-top:3rem!important}.mb-md-5,.my-md-5{margin-bottom:3rem!important}.m-md-5{margin:3rem!important}.p-md-0{padding:0!important}.pr-md-1,.px-md-1{padding-right:.25rem!important}.pl-md-1,.px-md-1{padding-left:.25rem!important}.pt-md-1,.py-md-1{padding-top:.25rem!important}.pb-md-1,.py-md-1{padding-bottom:.25rem!important}.p-md-1{padding:.25rem!important}.pr-md-2,.px-md-2{padding-right:.5rem!important}.pl-md-2,.px-md-2{padding-left:.5rem!important}.pt-md-2,.py-md-2{padding-top:.5rem!important}.pb-md-2,.py-md-2{padding-bottom:.5rem!important}.p-md-2{padding:.5rem!important}.pr-md-3,.px-md-3{padding-right:1rem!important}.pl-md-3,.px-md-3{padding-left:1rem!important}.pt-md-3,.py-md-3{padding-top:1rem!important}.pb-md-3,.py-md-3{padding-bottom:1rem!important}.p-md-3{padding:1rem!important}.pr-md-4,.px-md-4{padding-right:1.5rem!important}.pl-md-4,.px-md-4{padding-left:1.5rem!important}.pt-md-4,.py-md-4{padding-top:1.5rem!important}.pb-md-4,.py-md-4{padding-bottom:1.5rem!important}.p-md-4{padding:1.5rem!important}.pr-md-5,.px-md-5{padding-right:3rem!important}.pl-md-5,.px-md-5{padding-left:3rem!important}.pt-md-5,.py-md-5{padding-top:3rem!important}.pb-md-5,.py-md-5{padding-bottom:3rem!important}.p-md-5{padding:3rem!important}}@media (min-width:1200px){.float-lg-left{float:left!important}.float-lg-right{float:right!important}.float-lg-none{float:none!important}.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}.mr-lg-0,.mx-lg-0{margin-right:0!important}.ml-lg-0,.mx-lg-0{margin-left:0!important}.mt-lg-0,.my-lg-0{margin-top:0!important}.mb-lg-0,.my-lg-0{margin-bottom:0!important}.pr-lg-0,.px-lg-0{padding-right:0!important}.pl-lg-0,.px-lg-0{padding-left:0!important}.pt-lg-0,.py-lg-0{padding-top:0!important}.pb-lg-0,.py-lg-0{padding-bottom:0!important}.m-lg-0{margin:0!important}.mr-lg-1,.mx-lg-1{margin-right:.25rem!important}.ml-lg-1,.mx-lg-1{margin-left:.25rem!important}.mt-lg-1,.my-lg-1{margin-top:.25rem!important}.mb-lg-1,.my-lg-1{margin-bottom:.25rem!important}.m-lg-1{margin:.25rem!important}.mr-lg-2,.mx-lg-2{margin-right:.5rem!important}.ml-lg-2,.mx-lg-2{margin-left:.5rem!important}.mt-lg-2,.my-lg-2{margin-top:.5rem!important}.mb-lg-2,.my-lg-2{margin-bottom:.5rem!important}.m-lg-2{margin:.5rem!important}.mr-lg-3,.mx-lg-3{margin-right:1rem!important}.ml-lg-3,.mx-lg-3{margin-left:1rem!important}.mt-lg-3,.my-lg-3{margin-top:1rem!important}.mb-lg-3,.my-lg-3{margin-bottom:1rem!important}.m-lg-3{margin:1rem!important}.mr-lg-4,.mx-lg-4{margin-right:1.5rem!important}.ml-lg-4,.mx-lg-4{margin-left:1.5rem!important}.mt-lg-4,.my-lg-4{margin-top:1.5rem!important}.mb-lg-4,.my-lg-4{margin-bottom:1.5rem!important}.m-lg-4{margin:1.5rem!important}.mr-lg-5,.mx-lg-5{margin-right:3rem!important}.ml-lg-5,.mx-lg-5{margin-left:3rem!important}.mt-lg-5,.my-lg-5{margin-top:3rem!important}.mb-lg-5,.my-lg-5{margin-bottom:3rem!important}.m-lg-5{margin:3rem!important}.p-lg-0{padding:0!important}.pr-lg-1,.px-lg-1{padding-right:.25rem!important}.pl-lg-1,.px-lg-1{padding-left:.25rem!important}.pt-lg-1,.py-lg-1{padding-top:.25rem!important}.pb-lg-1,.py-lg-1{padding-bottom:.25rem!important}.p-lg-1{padding:.25rem!important}.pr-lg-2,.px-lg-2{padding-right:.5rem!important}.pl-lg-2,.px-lg-2{padding-left:.5rem!important}.pt-lg-2,.py-lg-2{padding-top:.5rem!important}.pb-lg-2,.py-lg-2{padding-bottom:.5rem!important}.p-lg-2{padding:.5rem!important}.pr-lg-3,.px-lg-3{padding-right:1rem!important}.pl-lg-3,.px-lg-3{padding-left:1rem!important}.pt-lg-3,.py-lg-3{padding-top:1rem!important}.pb-lg-3,.py-lg-3{padding-bottom:1rem!important}.p-lg-3{padding:1rem!important}.pr-lg-4,.px-lg-4{padding-right:1.5rem!important}.pl-lg-4,.px-lg-4{padding-left:1.5rem!important}.pt-lg-4,.py-lg-4{padding-top:1.5rem!important}.pb-lg-4,.py-lg-4{padding-bottom:1.5rem!important}.p-lg-4{padding:1.5rem!important}.pr-lg-5,.px-lg-5{padding-right:3rem!important}.pl-lg-5,.px-lg-5{padding-left:3rem!important}.pt-lg-5,.py-lg-5{padding-top:3rem!important}.pb-lg-5,.py-lg-5{padding-bottom:3rem!important}.p-lg-5{padding:3rem!important}} /* *** FLY EFFECT *** */ .fly-effect{ background: transparent!important; } .fly-effect .icon-container{ position: absolute; min-height: 64px; min-width: 64px; border-radius: 50%; background: #b4051f; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.25); box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.25); } .fly-effect .cart-add-kiosk{ position: absolute; left: 50%; top: 50%; margin: 0; min-height: 32px; min-width: 32px; background-color: transparent !important; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* *** END FLY EFFECT *** */ /* *** KEYFRAMES *** */ /* Keyframes: bounce */ @keyframes bounce { from { transform: translate3d(0, 0, 0); } to{ transform: translate3d(0, 150px, 0); } } @-webkit-keyframes bounce { from{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to{ -webkit-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0); } } /* End Keyframes: bounce */ /* Keyframes: rubberBand */ @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /* End Keyframes: rubberband */ /* Keyframes: bouncingBall */ @keyframes bouncingBall { from { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } to{ transform: translate3d(0, 150px, 0) scale3d(1.15, 0.85, 1); } } @-webkit-keyframes bouncingBall { from{ -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } to{ -webkit-transform: translate3d(0, 150px, 0) scale3d(1.15, 0.85, 1); transform: translate3d(0, 150px, 0) scale3d(1.15, 0.85, 1); } } /* End Keyframes: bouncingBall */ /* *** END KEYFRAMES *** */ /* *** EXTRA BOOTSTRAP 4 UTILITIES *** */ .d-none{ display: none!important; } .m-auto { margin: auto !important; } .mt-auto, .my-auto { margin-top: auto !important; } .mr-auto, .mx-auto { margin-right: auto !important; } .mb-auto, .my-auto { margin-bottom: auto !important; } .ml-auto, .mx-auto { margin-left: auto !important; } .text-uppercase{ text-transform: uppercase !important; } hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } /* *** END EXTRA BOOTSTRAP 4 UTILITIES *** */ /* *** TYPOGRAPHY *** */ h1{ font-family: 'Roboto', sans-serif; } /* *** END TYPOGRAPHY *** */ /* *** PRELOADER *** */ #loading { background: transparent!important; } .pl-container{ position: relative; top: 25%; } .pl-football { display: block; max-width: 128px; min-height: 128px; /* background: no-repeat center center url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='128px' height='128px' viewBox='0 0 128 128' style='enable-background:new 0 0 128 128;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cg%3E%3Cg id='Layer1_1_' transform='matrix(1,0,0,1,-3.17644,-3.03747)'%3E%3Ccircle class='st0' cx='67.18' cy='67.04' r='62.19'/%3E%3C/g%3E%3Cpath d='M39.92,4.68c-7.94,3.22-15.06,7.95-21.17,14.06C12.64,24.85,7.91,31.98,4.69,39.92C1.58,47.58,0,55.69,0,64 c0,8.31,1.58,16.41,4.69,24.08c3.22,7.94,7.95,15.07,14.06,21.17c6.11,6.11,13.23,10.84,21.17,14.06C47.59,126.43,55.69,128,64,128 s16.41-1.58,24.08-4.69c7.94-3.22,15.07-7.95,21.17-14.06c6.11-6.11,10.84-13.23,14.06-21.17C126.43,80.42,128,72.31,128,64 c0-8.31-1.58-16.42-4.68-24.09c-3.22-7.94-7.95-15.07-14.06-21.17C103.15,12.64,96.03,7.9,88.08,4.68C80.42,1.58,72.32,0,64,0 S47.59,1.58,39.92,4.68z M16,90.94c-3.08-1.93-5.92-4.16-8.44-6.79C3.72,73.34,3.07,61.64,5.61,50.53c1.2-2.36,2.56-4.63,4.1-6.8 c0.48-0.67,0.92-1.37,1.43-2.02l14.44,8.55v0.36c-0.04,7.77,0.75,15.48,2.32,23.08c0.01,0.04,0.01,0.05,0.02,0.09l-11.2,17.56 C16.47,91.23,16.23,91.09,16,90.94z M58.94,120.63c2.49,1.27,5.05,2.35,7.69,3.22c-11.19,0.49-22.49-2.13-32.47-7.87l24.21,4.31 C58.55,120.42,58.74,120.53,58.94,120.63z M58.85,116.26l-28.57-5.09c-3.34-4.06-6.35-8.35-8.93-12.94 c-0.66-1.17-1.39-2.3-1.95-3.52l11.19-17.55c0.25,0.06,0.52,0.13,0.84,0.21c7,1.87,14.12,3.2,21.3,4.25 c0.42,0.06,0.77,0.11,1.07,0.14l13.41,23.19c-2.33,3.27-4.68,6.53-7.09,9.75C59.72,115.24,59.29,115.75,58.85,116.26z M106.39,106.38c-2.27,2.28-4.69,4.33-7.22,6.16c-0.42-3.35-1.14-6.63-2.16-9.84L111.32,76c3.94-1.8,7.74-3.83,11.28-6.35 c0.46-0.33,0.85-0.69,1.14-1.09C122.7,82.35,116.92,95.85,106.39,106.38z M105.75,71.76c0.53,1.02,1.06,2.04,1.58,3.08 l-13.82,25.79c-0.08,0.02-0.16,0.04-0.24,0.05c-7.47,1.4-15.01,2.14-22.6,2.17l-13.8-23.85C59.03,75,61.15,71,63.26,67 c1.43-2.72,2.84-5.45,4.25-8.18l28.55-2.93C99.56,61.01,102.87,66.25,105.75,71.76z M99.96,41.17c-1.35,3.58-2.81,7.12-4.25,10.67 L67.9,54.69c-0.33-0.44-0.68-0.87-1.04-1.28c-3.28-3.72-6.59-7.42-9.89-11.12c0.03-0.04,0.06-0.07,0.09-0.1 c-1.33-1.33-2.67-2.66-4-3.99l7.74-23.31c0.53-0.14,1.07-0.26,1.61-0.32c4.21-0.43,8.42-0.91,12.64-1.16 c2.58-0.15,5.18-0.23,7.81-0.04l19.16,21.59C101.37,37.04,100.73,39.13,99.96,41.17z M106.39,21.61 c5.28,5.29,9.38,11.32,12.27,17.77c-3.58-2.46-7.41-4.49-11.43-6.14c-0.63-0.26-1.27-0.49-1.92-0.71L86.45,11.28 c0.13-0.92,0.2-1.84,0.23-2.76C93.85,11.43,100.57,15.8,106.39,21.61z M44.81,7.4c0.07,0.05,0.11,0.1,0.15,0.11 c4.31,1.49,8.23,3.68,11.93,6.28l-7.23,21.78c-0.04,0.01-0.07,0.02-0.11,0.04c-1.48,0.61-2.99,1.16-4.45,1.82 c-6,2.73-11.86,5.75-17.37,9.38l-14.27-8.45c0.02-0.45,0.1-0.9,0.25-1.3c0.96-2.55,1.9-5.12,2.99-7.62 c0.83-1.93,1.79-3.79,2.82-5.61c0.68-0.75,1.38-1.49,2.11-2.22c6.78-6.78,14.79-11.59,23.32-14.44C44.9,7.25,44.85,7.32,44.81,7.4z '/%3E%3C/g%3E%3C/svg%3E%0A"); */ background-size: 50%; } .icon-loading { display: block; max-width: 58px; min-height: 58px; } .pl-animate{ -webkit-animation-name: bouncingBall; -webkit-animation-duration: 0.5s; animation: bouncingBall 0.5s; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: cubic-bezier(.5,0.05,1,.5); animation-timing-function: cubic-bezier(.5,0.05,1,.5); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* *** END PRELOADER *** */ /* *** TABS *** */ #product-detail-header-content #product-detail-header-content-tabs{ z-index: 9; } /*#product-detail-header-content #product-detail-header-content-tabs .tab-links{ position: relative; min-width: 100%; } #product-detail-header-content #product-detail-header-content-tabs .tab-links::after{ content: ' '; position: absolute; bottom: 0; display: block; min-width: 100%; border-bottom: 1px solid #dedede; }*/ #product-detail-header-content .tab-links a{ display: block; } /* Tab */ #product-detail-header-content-tabs li:not(.active) > a > .product-detail-header-content-tabs-tab{ font-weight: inherit; color: #b4051f; background: #fff!important; border-color: #fff; } /* End Tab */ /* Active tab */ #product-detail-header-content-tabs .active > a > .product-detail-header-content-tabs-tab{ font-weight: inherit; background: #fff!important; } /* End Active tab */ /*#product-detail-header-tab-content{ border-top: 1px solid #fff!important; }*/ /* *** END TABS *** */ /* *** MODAL CLOSE BUTTON *** */ #product-detail{ overflow: visible!important; } .product-detail-modal-content-wrapper{ overflow: hidden; min-width: 100%; min-height: 100%; } #product-detail .product-detail-close-btn{ top: -48px; } #product-detail .product-detail-close-btn .product-detail-close-btn__text{ position: absolute; left: 48px; margin-left: .5rem; color: #fff; font-size: 16px; font-weight: 300; line-height: 47px; } /* *** END MODAL CLOSE BUTTON *** */ /* *** MODAL CLOSE BUTTON *** */ #product-detail .product-detail-close-btn{ padding: 0; max-height: 48px; min-height: 46px; max-width: 48px; min-width: 46px; line-height: 42px; font-size: 32px; font-weight: 700; color: #e30613; background: #000; border: 1px solid #000; } /* *** END MODAL CLOSE BUTTON *** */ /* *** SIZE TABLE *** */ /* #product-detail-navigation #product-detail-navigation-matrix{ min-width: 100%; } */ /* Option */ #product-detail-navigation #product-detail-navigation-matrix .matrix-option{ padding: 0; max-height: 48px; max-width: 48px; min-width: 46px; line-height: 46px; color: #000; background: #fff; border: 1px solid #000; } /* End option */ /* Option - Not available */ #product-detail-navigation #product-detail-navigation-matrix .matrix-option-not-available{ position: relative; color: #dedede; border-color: #dedede; } #product-detail-navigation #product-detail-navigation-matrix .matrix-option-not-available::before, #product-detail-navigation #product-detail-navigation-matrix .matrix-option-not-available::after{ content: ''; position: absolute; left: 0; right: auto; top: 30%; bottom: auto; height: 65px; width: 1px; background: #dedede; } #product-detail-navigation #product-detail-navigation-matrix .matrix-option-not-available::before{ left: auto; right: 0; -moz-transform: rotate(-45deg) translate(-50%, -50%); -webkit-transform: rotate(-45deg) translate(-50%, -50%); -o-transform: rotate(-45deg) translate(-50%, -50%); -ms-transform: rotate(-45deg) translate(-50%, -50%); transform: rotate(-45deg) translate(-50%, -50%); } #product-detail-navigation #product-detail-navigation-matrix .matrix-option-not-available::after{ left: 0; right: auto; -moz-transform: rotate(45deg) translate(-50%, -50%); -webkit-transform: rotate(45deg) translate(-50%, -50%); -o-transform: rotate(45deg) translate(-50%, -50%); -ms-transform: rotate(45deg) translate(-50%, -50%); transform: rotate(45deg) translate(-50%, -50%); } /* End Option - Not available */ /* Option - No size and One size */ #product-detail-navigation #product-detail-navigation-matrix .matrix-option[data-matrixrecordid="NOSIZE"], #product-detail-navigation #product-detail-navigation-matrix .matrix-option[data-matrixrecordid="ONESIZE"]{ max-width: 100%!important; } #product-detail-navigation #product-detail-navigation-matrix .matrix-option[data-matrixrecordid="NOSIZE"] span, #product-detail-navigation #product-detail-navigation-matrix .matrix-option[data-matrixrecordid="ONESIZE"] span{ padding: 0 .5rem; } /* End Option - No size and One size */ /* Selected option */ #product-detail-navigation #product-detail-navigation-matrix .selected-matrix-option{ color: #fff; background: #000; } /* End Selected option */ /* Back / close button */ #product-detail-navigation #product-detail-navigation-close{ display: none!important; } /* End Back / close button */ /* *** END SIZE TABLE *** */ /* Default styling SUR */ /* Styling SUR */ /* Import Mixins.less */ /*Color Mixins*/ /*This is an abstraction layer for the kiosk defaults.*/ /* Transition Mixin */ /* Scale Mixin */ /* Text Overflow Mixin */ /* Rotate Y */ /* Rotate Z */ /* Animation Name */ /* Animation Duration */ /* Overlay Mixin */ /* Responsive breakpoints */ /* https://stackoverflow.com/a/26932152 */ /* Loading Color Mixin */ /* Header Color Mixin */ /* Header Height Mixin */ /* Breadcrumb Color Mixin */ /* Navigation Color Mixin */ /* Filter Bar Color Mixin */ /* Filter Dropdown Color Mixin */ /* Product Color Mixin */ /* Product Color Detail Color Mixin */ /* Popup Color Mixin */ /* Cart Color Mixin */ /* Global Content Mixin (Heading & Button) */ /* *** keyboard dark theme *** for when jQuery UI themes are not being used See http://jsfiddle.net/Mottie/6dmqhLvh/ */ .ui-keyboard { /* adjust overall keyboard size using "font-size" */ font-size: 14px; text-align: center; background: #282828; border-radius: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); padding: 4px; padding: .3em; position: absolute; left: 25px; top: 25px; z-index: 99; white-space: nowrap; /* include the following setting to place the keyboard at the bottom of the browser window */ /*width: 100%; height: auto; left: 0px; top: auto; bottom: 0px; position: fixed; white-space: nowrap; overflow-x: auto;*/ } .ui-keyboard-has-focus { z-index: 99; } .ui-keyboard-button { border: 1px solid #404040; padding: 0 0.5em; margin: 1px; min-width: 3em; height: 3em; line-height: 3em; vertical-align: top; font-family: Helvetica, Arial, sans-serif; color: #eee; text-align: center; border-radius: 5px; -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5); background: #444; background-image: -webkit-linear-gradient(-90deg, #444444 0%, #333333 100%); background-image: linear-gradient(-90deg, #444444 0%, #333333 100%); cursor: pointer; overflow: hidden; -moz-user-focus: ignore; } .ui-keyboard-button.ui-state-hover { background: #ddd; background-image: -webkit-linear-gradient(-90deg, #555555 0%, #5f5f5f 100%); background-image: linear-gradient(-90deg, #555555 0%, #5f5f5f 100%); } .ui-keyboard-button:not([disabled]):hover { background: #eee; background-image: -webkit-linear-gradient(-90deg, #4f4f4f 0%, #444444 100%); background-image: linear-gradient(-90deg, #4f4f4f 0%, #444444 100%); } .ui-keyboard-button:not([disabled]):active { background: #ddd; background-image: -webkit-linear-gradient(-90deg, #555555 0%, #5f5f5f 100%); background-image: linear-gradient(-90deg, #555555 0%, #5f5f5f 100%); } .ui-keyboard-button span { display: block; width: 100%; font-size: 1.2em; text-align: center; } /* make action keys extra-wide */ .ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) { min-width: 6em; } .ui-keyboard-button.ui-state-active { color: #000000; background: #b4051f; } .ui-keyboard-space { width: 15em; } .ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) span { font-size: 0.8em; position: relative; /*top: -1em; left: -1.6em;*/ } .ui-keyboard-placeholder { color: #888; } /* disabled or readonly inputs, or use input[disabled='disabled'] { color: #f00; } */ .ui-keyboard-nokeyboard { color: #888; border-color: #888; } .ui-keyboard-spacer { display: inline-block; width: 1px; height: 0; cursor: default; } .ui-keyboard-NBSP span, .ui-keyboard-ZWSP span, .ui-keyboard-ZWNJ span, .ui-keyboard-ZWJ span, .ui-keyboard-LRM span, .ui-keyboard-RLM span { font-size: 0.5em; line-height: 1.5em; white-space: normal; } /* combo key styling - toggles diacritics on/off */ .ui-keyboard-button.ui-keyboard-combo.ui-state-default { -webkit-box-shadow: 1px 1px 3px 0 rgba(213, 133, 18, 0.5); box-shadow: 1px 1px 3px 0 rgba(213, 133, 18, 0.5); border-color: #d58512; } .ui-keyboard-button.ui-keyboard-combo.ui-state-active { -webkit-box-shadow: 1px 1px 3px 0 rgba(38, 154, 188, 0.5); box-shadow: 1px 1px 3px 0 rgba(38, 154, 188, 0.5); border-color: #269abc; } /* (in)valid inputs */ button.ui-keyboard-accept.ui-keyboard-valid-input { -webkit-box-shadow: 1px 1px 3px 0 rgba(57, 132, 57, 0.5); box-shadow: 1px 1px 3px 0 rgba(57, 132, 57, 0.5); border-color: #398439; } button.ui-keyboard-accept.ui-keyboard-valid-input:not([disabled]):hover { border-color: #4cae4c; } button.ui-keyboard-accept.ui-keyboard-invalid-input { -webkit-box-shadow: 1px 1px 3px 0 rgba(172, 41, 37, 0.5); box-shadow: 1px 1px 3px 0 rgba(172, 41, 37, 0.5); border-color: #ac2925; } button.ui-keyboard-accept.ui-keyboard-invalid-input:not([disabled]):hover { border-color: #d43f3a; } /* unlocked icon (keyboard enabled) */ button.ui-keyboard-toggle span { width: .9em; height: .9em; display: inline-block; background-repeat: no-repeat; background-position: center center; background-size: contain; /* dark theme unlocked icon - fill: #eee */ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTguNyw0LjRINy41SDUuMHYtMS45YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40LDAtMi41LDEuMS0yLjUsMi41djEuOWgxLjIgdi0xLjljMC0wLjcsMC42LTEuMiwxLjItMS4yczEuMiwwLjYsMS4yLDEuMnYxLjljLTAuNywwLTEuMiwwLjYtMS4yLDEuMlY4LjggYzAsMC43LDAuNiwxLjIsMS4yLDEuMmg1LjBDOS40LDEwLDEwLDkuNCwxMCw4LjhWNS42QzEwLDUuMCw5LjQsNC40LDguOCw0LjR6IE02LjYsNy40djEuMCBjMCwwLjItMC4xLDAuMy0wLjMsMC4zUzYuMCw4LjYsNi4wLDguNFY3LjRjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zLDAuMy0wLjYsMC42LTAuNiBTNi45LDYuNiw2LjksNi45QzYuOSw3LjEsNi44LDcuMyw2LjYsNy40eiIvPjwvc3ZnPg=='); } /* locked icon (keyboard disabled) */ button.ui-keyboard-toggle.ui-keyboard-disabled span { /* dark theme locked icon - fill: #eee */ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTcuNCA0LjRWMi41YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40IDAtMi41IDEuMS0yLjUgMi41djEuOSBjLTAuNyAwLTEuMiAwLjUtMS4yIDEuMnYzLjFDMS4zIDkuNCAxLjggMTAgMi41IDEwaDQuOWMwLjcgMCAxLjItMC42IDEuMi0xLjJWNS42IEM4LjcgNC45IDguMSA0LjQgNy40IDQuNHogTTUuMyA3LjR2MS4wYzAgMC4yLTAuMSAwLjMtMC4zIDAuM2MtMC4yIDAtMC4zLTAuMS0wLjMtMC4zVjcuNCBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zIDAuMy0wLjYgMC42LTAuNmMwLjMgMCAwLjYgMC4zIDAuNiAwLjYgQzUuNiA3LjEgNS41IDcuMyA1LjMgNy40eiBNNi4yIDQuNEgzLjdWMi41YzAtMC43IDAuNS0xLjIgMS4yLTEuMmMwLjcgMCAxLjIgMC42IDEuMiAxLjIgVjQuNHoiLz48L3N2Zz4='); } .ui-keyboard.ui-keyboard-disabled button:not(.ui-keyboard-toggle), .ui-keyboard.ui-keyboard-disabled input { opacity: 0.5; } /*** Alt-Keys Popup extension ***/ /* clickable overlay on top of keyboard to hide the popup */ .ui-keyboard-overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); } /* the actual popup styling, class names from the css.container option are also added */ .ui-keyboard-popup { display: inline-block; /* default buttons are 2em wide + .1em margin on either side (set in .ui-keyboard-button definition); so use multiples of 2.2em for a max-width if you don't want any extra white space on the sides, e.g. 5 buttons * 2.2em = 11em, 6 buttons * 2.2em = 13.2em, etc */ max-width: 22em; /* 10 buttons */ } /*** Caret extension definition ***/ /* margin-top => is added to the caret height (top & bottom) */ .ui-keyboard-caret { background: #c00; width: 1px; margin-top: 3px; } /*** Extender keyboard extension ***/ div.ui-keyboard-extender { margin-left: 5px; margin-right: 10px; } button.ui-keyboard-extender span { width: .9em; height: .9em; display: inline-block; margin-bottom: 3px; background-repeat: no-repeat; background-position: center center; background-size: contain; /* dark theme extender icon - fill: #eee */ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6I2VlZSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2VlZSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+'); } /* Import Sub Styles */ /* Style Global */ /* Html*/ html { min-height: 100%; } /* Body */ body { min-width: 720px; min-height: 100%; margin: 0; padding: 0; font-family: 'Arial', 'Arial Regular', 'Arial Bold'; font-size: 14px; background: #f5f5f5; background-size: cover; background-position: center bottom; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard */ } /* Float Left */ .left { float: left; } /* Float Right */ .right { float: right; } .hide { display: none !important; opacity: 0; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } /* Strike Through */ .strikethrough { text-decoration: line-through; } /* Icon Font */ .icon { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; -ms-word-wrap: normal; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* Loading Overlay */ #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; background: none; } .loading-small { position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; background: none; } /* Loading Icon */ .loading-icon, .loading-icon-small { position: absolute; top: 50%; left: 50%; -moz-animation: loading-animation 1s infinite ease-in-out; -o-animation: loading-animation 1s infinite ease-in-out; -webkit-animation: loading-animation 1s infinite ease-in-out; animation: loading-animation 1s infinite ease-in-out; background: #b4051f; color: #000000; background: #000000; color: #ffffff; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .loading-icon { margin: -32px 0 0 -32px; font-size: 64px; padding: 10px; border-radius: 60px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .loading-icon { font-size: 32px; margin: -16px 0 0 -16px; } } .loading-icon-small { margin: -16px 0 0 -16px; font-size: 32px; padding: 5px; border-radius: 30px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } /* Loading Animation */ @keyframes loading-animation { 0% { -moz-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } 50% { -moz-transform: scale(1.25) rotate(180deg); -ms-transform: scale(1.25) rotate(180deg); -o-transform: scale(1.25) rotate(180deg); -webkit-transform: scale(1.25) rotate(180deg); transform: scale(1.25) rotate(180deg); } 100% { -moz-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } } h1 { margin: 10px; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { h1 { margin: 5px 10px; font-size: 28px; } } h2 { color: #000000; margin: 0; padding: 0; padding-bottom: 10px; font-weight: bold; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { h2 { font-size: 18px; } } .text-warning, .content-wrapper-text-warning { display: block; margin: 5px 0; border-radius: 0; background: #a94442; color: #ffffff; clear: both; font-weight: bold; } .field-validation-error { display: block; width: auto; padding: 5px; margin: 5px 0; border-radius: 0; background-color: #ffa500; color: #ffffff; font-weight: bold; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .field-validation-error { font-weight: normal; font-size: 12px; } } .content-wrapper-text-warning { padding: 20px; } .content-wrapper-box { padding: 10px; margin-bottom: 20px; background: #f8f8f8; border-radius: 0; border: 1px solid #dedede; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); font-weight: bold; } /* Style Popup */ /* Background Overlay */ #overlay, #overlay-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0, 0, 0, 0.85); } /* Account Popup Box */ .account-popup-box { display: none; position: absolute; top: 101.2px; left: 0px; width: 247px; height: 100px; margin: 0; padding: 15px; background: #0095db; color: #000000; border-radius: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); z-index: 10; } .account-popup-box .account-popup-item { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; color: #fff; text-align: center; padding-bottom: 10px; } .account-popup-box .account-popup-item:last-child { border-bottom: none; padding-top: 10px; } /* Overlay Product Detail Z-Index */ #overlay-product-detail { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 8; background: rgba(0, 0, 0, 0.85); } .cart-overlay, .account-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 8; background: rgba(0, 0, 0, 0.85); } /* Time Out Popup */ #timeout-popup, #popup, .cart-popup, .account-popup { display: none; position: absolute; top: 50vh; left: 50vw; width: 70vw; height: 50vh; margin: -25vh -37vw; padding: 25px; background: #f8f8f8; color: #000000; border-radius: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); z-index: 10; /* Responsive */ } @media only screen and (min-height: 1919px) and (min-width: 1079px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #timeout-popup, #popup, .cart-popup, .account-popup { width: 70vw; margin: -25vh -37vw; } } .cart-popup, .account-popup { position: fixed; } /* Timeout Popup Message */ #timeout-popup-message, #popup-message { display: block; font-size: 24px; font-weight: bold; text-align: center; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #timeout-popup-message, #popup-message { font-size: 16px; } } #timeout-popup-message .content-page, #popup-message .content-page { text-align: left; height: 45vmax; overflow-y: scroll; } #timeout-popup-message .content-page .order-button-label, #popup-message .content-page .order-button-label { margin-bottom: 10px; } #timeout-popup-message .content-page .order-button-text, #popup-message .content-page .order-button-text { margin: 0 25px; } @media screen and (max-height: 969px) { #timeout-popup-message .content-page, #popup-message .content-page { height: 21vmax; } } /* Timeout Popup Counter */ #timeout-popup-message-counter { display: block; font-size: 48px; font-weight: bold; text-align: center; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #timeout-popup-message-counter { font-size: 24px; } } /* Timeout Popup Button Continue & Clear */ .popup-button, #timeout-popup-continue, #timeout-popup-clear, #popup-ok { display: inline-block; height: 60px; margin: 0; padding: 0 25px; border-radius: 0; background: #0095db; color: #ffffff; line-height: 60px; font-size: 24px; font-weight: bold; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; text-decoration: none; /* Timeout Popup Button Hover */ /* Responsive */ } .popup-button:active, #timeout-popup-continue:active, #timeout-popup-clear:active, #popup-ok:active { background: #0095db; color: #ffffff; -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .popup-button, #timeout-popup-continue, #timeout-popup-clear, #popup-ok { font-size: 18px; height: 40px; line-height: 40px; padding: 0 15px; } } #popup-ok { text-align: center; position: absolute; left: auto; right: auto; bottom: 25px; } /* Timeout Popup Continue Button Position */ .popup-button-left, #timeout-popup-continue { position: absolute; left: 25px; bottom: 25px; background: #0095db; } /* Timeout Popup Clear Button Position */ .popup-button-right, #timeout-popup-clear { position: absolute; right: 25px; bottom: 25px; } .popup-button-edit { position: absolute; left: 175px; bottom: 25px; } .cart-popup-line { width: 100%; border-bottom: 1px solid #dedede; height: 60px; } @media only screen and (min-height: 1919px) and (min-width: 1079px) { .cart-popup-line { height: 90px; } } .cart-popup-line .cart-line-image { float: left; width: 35px; height: 35px; margin: 5px; } .cart-popup-line .cart-line-image img { max-width: 100%; max-height: 100%; } .cart-popup-line .cart-line-description { margin-left: 5px; padding: 5px 0; float: left; font-size: 16px; line-height: 25px; width: calc(100% - 250px); max-height: 60px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: unset; display: -webkit-box; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-popup-line .cart-line-description { font-size: 14px; } } @media only screen and (min-height: 1919px) and (min-width: 1079px) { .cart-popup-line .cart-line-description { max-height: unset; height: auto; } } .cart-popup-line .cart-line-description .OrderRestriction { color: #a94442; line-height: 20px; } .cart-popup-line .cart-line-price { float: right; font-weight: bold; font-size: 18px; line-height: 45px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-popup-line .cart-line-price { font-size: 16px; } } .cart-popup-total, .cart-popup-product-count { width: 100%; height: 45px; } .cart-popup-total .cart-line-product-count, .cart-popup-product-count .cart-line-product-count { margin-left: 50px; font-weight: bold; line-height: 45px; } .cart-popup-total .cart-line-total, .cart-popup-product-count .cart-line-total { float: left; margin-left: 50px; font-weight: bold; font-size: 18px; line-height: 45px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-popup-total .cart-line-total, .cart-popup-product-count .cart-line-total { font-size: 16px; } } .cart-popup-total .cart-line-total-price, .cart-popup-product-count .cart-line-total-price { float: right; font-weight: bold; font-size: 24px; line-height: 45px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-popup-total .cart-line-total-price, .cart-popup-product-count .cart-line-total-price { font-size: 18px; } } .cart-popup-product-count { border-bottom: 1px solid #dedede; } .account-popup-item { float: left; width: 100%; height: 45px; line-height: 45px; border-bottom: 1px solid #dedede; color: #000000; } a.account-popup-item { text-decoration: none; font-weight: bold; } .account-popup-item:active { color: ligten(#000000, 10%); } .account-popup-item:active .account-popup-icon { -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .account-popup-item .account-popup-icon { float: right; height: 45px; font-size: 32px; line-height: 45px; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } /* Style Header */ /* Header */ header#header { position: relative; width: 100%; z-index: 3; } /* Header View */ #header-view { position: relative; width: 100%; height: 100px; background: #0095db; color: #000000; box-shadow: 0 0 15px rgba(0, 0, 0, 0.33); z-index: 7; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-view { height: 75px; } } /* Header */ .header-logo-wrapper { float: left; display: inline-block; width: 250px; height: 100px; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } .header-logo-wrapper:active { background: rgba(255, 255, 255, 0.1); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-logo-wrapper { height: 75px; } } /* Header Logo */ #header-logo { float: left; display: inline-block; width: 250px; height: 100px; background: url(/images/logo.png) center no-repeat; background-size: 95%; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Header Logo Line */ /* Responsive */ } #header-logo:after { position: absolute; top: 0; left: 250px; content: ""; height: 100px; width: 5px; background-color: #f8f8f8; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #header-logo:after { height: 75px; } } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px), only screen and (max-height: 801px) and (max-width: 1281px) { #header-logo:after { display: none; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-logo { height: 75px; background-size: 80%; background-position: 15% 50%; } } /* Header List */ ul#header-selling-point-list { float: left; display: inline-block; list-style: circle; margin: 10px 0; padding: 0 50px; /* Responsive */ } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px), only screen and (max-height: 801px) and (max-width: 1281px) { ul#header-selling-point-list { display: none; } } /* Header Store Name */ #header-store { position: absolute; margin: 0; text-align: center; color: #fff; line-height: 15px; border: 1px solid #ffffff; padding: 15px; top: 25px; bottom: auto; left: 290px; font-size: 20px; width: auto; /* Header Store Responsive */ /* Responsive */ } @media screen and (max-width: 1024px) { #header-store { top: 14px; font-size: 13px; } } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px), only screen and (max-height: 801px) and (max-width: 1281px) { #header-store { display: none; } } /* Header Button */ .header-button { position: relative; float: right; display: inline-block; height: 100px; text-decoration: none; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; color: #000000; /* background: #0095db; */ /* Header Button active */ /* Header Button Line */ /* Ipad Screen */ } .header-button:active { /* background: #0095db; */ color: #1a1a1a; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .header-button:before { position: absolute; content: ""; height: 100%; width: 5px; background-color: #f8f8f8; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-button { height: 75px; } } /* Header Button Icon */ .header-button-icon { display: inline-block; width: 80px; height: 100px; text-align: center; font-size: 48px; line-height: 2; color: #fff; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-button-icon { height: 75px; line-height: 75px; } } /* Header Button Icon Cart */ .header-button-icon-cart { background-image: url(/images/icon-cart.png); background-size: 58%; background-position: center; background-repeat: no-repeat; } /* Header Button Count */ .header-button-count { position: absolute; top: 15px; left: 45px; height: 30px; width: 30px; overflow: hidden; border-radius: 15px; font-size: 12px; font-weight: bold; text-align: center; line-height: 2.7; background: #3c3c3b; color: #ffffff; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-button-count { top: 8px; } } /* Header Button Title */ .header-button-title { float: right; height: 100px; line-height: 100px; font-size: 24px; font-weight: bold; text-align: left; margin-right: 20px; min-width: 75px; /* Cart Price Excl */ /* Cart Price Incl */ /* Responsive */ } .header-button-title .price-excl { margin-top: 24px; } .header-button-title .price-incl { font-size: 16px; font-weight: normal; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-button-title { height: 75px; line-height: 75px; font-size: 18px; } } /* Header Button Sub Title */ .header-button-subtitle { position: absolute; bottom: 5px; left: 0; width: 90%; float: right; font-size: 14px; font-weight: normal; text-align: center; margin-right: 20px; padding: 0 5%; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* Style Header */ /* wrapper */ .custom-dropdown { position: absolute; display: inline-block; background: #000000; color: #ffffff; border: 1px solid #0d0d0d; top: 10px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .custom-dropdown { top: 5px; } } .custom-dropdown-button { position: relative; width: 200px; padding: 10px; margin: 0 auto; background: #000000; color: #ffffff; outline: none; cursor: pointer; font-weight: bold; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .custom-dropdown-button { padding: 0 10px; max-height: 30px; } .custom-dropdown-button span { top: -5px; position: relative; } } .custom-dropdown-button:after { content: ""; width: 0; height: 0; position: absolute; right: 16px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #ffffff transparent; } .custom-dropdown-options { display: none; } .custom-dropdown-options ul { z-index: 1; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); list-style: none; padding: 0; margin: 0; } .custom-dropdown-options li { list-style: none; padding: 0; margin: 0; } .custom-dropdown-options a { background: #000000; color: #ffffff; padding: 12px 16px; text-decoration: none; display: block; } .custom-dropdown-options a:hover { background-color: #000000; } /* Style Breadcrumb */ /* Header Breadcrumb Bar*/ #header-breadcrumb { position: relative; height: 60px; width: auto; overflow: hidden; box-shadow: 0 0 15px rgba(0, 0, 0, 0.33); z-index: 6; background: #f8f8f8; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-breadcrumb { height: 40px; } } /* Breadcrumb Home Button */ #header-breadcrumb-home { float: left; height: 60px; margin: 0; padding: 0 5px 0 10px; overflow: hidden; font-size: 32px; text-decoration: none; line-height: 60px; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; color: #ffffff; background: linear-gradient(90deg, #ebebeb 0, #f8f8f8 50%); /* Responsive */ } #header-breadcrumb-home:after { content: ""; position: absolute; top: 0; left: auto; width: 0; height: 0; border-bottom: 30px solid transparent; border-left: 30px solid #f8f8f8; border-top: 30px solid transparent; margin-left: 5px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-breadcrumb-home:after { border-bottom: 20px solid transparent; border-left: 20px solid #f8f8f8; border-top: 20px solid transparent; margin-left: 0; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-breadcrumb-home { height: 40px; padding: 0 0 0 5px; line-height: 40px; } } /* Breadcrumb Link */ .header-breadcrumb-link { float: left; height: 60px; padding: 0 10px 0 40px; font-weight: bold; font-size: 16px; text-align: center; line-height: 3.7; text-decoration: none; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; color: #000000; background: linear-gradient(90deg, #ebebeb 0, #f8f8f8 50%); /* Breadcrumb Link active */ /* Breadcrumb Link Text*/ /* Breadcrumb Link Count */ /* Responsive */ } .header-breadcrumb-link:active { background: linear-gradient(90deg, #ebebeb 0, #f8f8f8 100%); } .header-breadcrumb-link .header-breadcrumb-link-text { display: inline-block; } .header-breadcrumb-link .header-breadcrumb-link-count { display: inline-block; height: 22px; padding: 0 10px; margin-top: 10px; font-size: 12px; font-weight: bold; line-height: 1.9; vertical-align: top; border-radius: 11px; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; color: #000000; background: #000000; color: #ffffff; /* Responsive */ } .header-breadcrumb-link .header-breadcrumb-link-count:after { content: ""; position: absolute; top: 0; left: auto; width: 0; height: 0; border-bottom: 30px solid transparent; border-left: 30px solid #f8f8f8; border-top: 30px solid transparent; margin-left: 20px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-breadcrumb-link .header-breadcrumb-link-count:after { border-bottom: 20px solid transparent; border-left: 20px solid #f8f8f8; border-top: 20px solid transparent; margin-left: 10px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-breadcrumb-link .header-breadcrumb-link-count { font-size: 11px; font-weight: normal; height: 19px; } } .header-breadcrumb-link[class~="selected"] { color:#ff9802; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-breadcrumb-link { height: 40px; line-height: 40px; font-size: 12px; padding: 0 0 0 30px; } } /* Breadcrumb Search */ #header-breadcrumb-search { float: right; margin: 10px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-breadcrumb-search { margin: 5px; } } /* Breadcrumb Search & Reset Button */ #header-breadcrumb-search-submit, #header-breadcrumb-search-reset { -moz-appearance: none; -webkit-appearance: none; float: left; color: #000000; background: #ebebeb; border: none; width: 40px; height: 40px; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Breadcrumb Search & Reset Button Focus */ /* Breadcrumb Search & Reset Button active */ /* Responsive */ } #header-breadcrumb-search-submit:focus, #header-breadcrumb-search-reset:focus { outline: none; } #header-breadcrumb-search-submit:active, #header-breadcrumb-search-reset:active { color: #000000; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-breadcrumb-search-submit, #header-breadcrumb-search-reset { height: 30px; width: 30px; font-size: 18px; } } /* Breadcrumb Search Reset Button Rounded Corners */ #header-breadcrumb-search-reset { display: none; border-radius: 0 0 0 0; } /* Breadcrumb Search Submit Button Rounded Corners */ #header-breadcrumb-search-submit { border-radius: 0 0 0 0; } /* Breadcrumb Search Input */ #header-breadcrumb-search-input { float: left; height: 40px; width: 240px; margin: 0; padding: 0; font-size: 14px; border: none; background: #ebebeb; /* Breadcrumb Search Input Focus */ /* Responsive */ } #header-breadcrumb-search-input:focus { outline: none; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-breadcrumb-search-input { height: 30px; width: 150px; font-size: 12px; } } /* Breadcrumb Search Input Rounded Corners End */ .search-input-end { border-radius: 0 0 0 0; padding-right: 40px !important; } /* Style Navigation */ /* Navigation */ #header-navigation { position: relative; height: 150px; width: auto; overflow: hidden; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.33); background: #f8f8f8; z-index: 5; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-navigation { height: 100px; } } /* Navigation Next & Previous Button */ #header-navigation-next, #header-navigation-prev { display: flex; align-items: center; position: absolute; font-size: 90px; color:#ff9802; height: 150px; width: 100px; z-index: 1; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Navigation Next & Previous Button active */ /* Responsive */ } #header-navigation-next:active, #header-navigation-prev:active { color: #0095db; -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-navigation-next, #header-navigation-prev { height: 100px; font-size: 48px; width: 50px; } } /* Navigation Previous Button Left Margin */ #header-navigation-prev { left: 0; justify-content: flex-start; background: linear-gradient(90deg, #cccccc 0, rgba(255, 255, 255, 0) 100%); } /* Navigation Previous Button Right Margin */ #header-navigation-next { right: 0; justify-content: flex-end; background: linear-gradient(-90deg, #cccccc 0, rgba(255, 255, 255, 0) 100%); } /* Navigation Slider */ #header-navigation-slider { position: absolute; left: 0; top: 0; min-width: 100%; } /* Navigation Slider Content */ #header-navigation-slider-content { width: 150%; } /* Navigation Node Animation */ .navigation-animation { -moz-animation-name: navigation-animation; -o-animation-name: navigation-animation; -webkit-animation-name: navigation-animation; animation-name: navigation-animation; -moz-animation-duration: 0.7s; -o-animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; } @keyframes navigation-animation { from { -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 0; } to { -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); -webkit-transform: rotateY(0); transform: rotateY(0); opacity: 1; } } /* Navigation Node */ .header-navigation-node { float: left; position: relative; margin: 10px 0 10px 10px; height: 130px; width: 200px; border: 1px solid #dedede; border-radius: 0; background: #ffffff; cursor: pointer; overflow: hidden; /* Navigation active */ /* Navigation Node Image */ /* Navigation Node Title */ /* Navigation Node Title Product Count */ /* Kiosk Ipad */ } .header-navigation-node:active { box-shadow: 0 0 20px rgba(0, 0, 0, 0.33); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .header-navigation-node .header-navigation-node-image { position: relative; display: block; height: 100px; line-height: 100px; width: auto; margin: 5px 5px 0; text-align: center; vertical-align: middle; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-navigation-node .header-navigation-node-image { height: 60px; line-height: unset; margin: 0; } } .header-navigation-node .header-navigation-node-image img { max-height: 100%; max-width: 100%; vertical-align: middle; text-align: center; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-navigation-node .header-navigation-node-image img { max-height: 100%; max-width: 100%; padding: 5px; height: 80px; } } .header-navigation-node .header-navigation-node-title { position: relative; margin: 5px 5px 0px; width: 100%; font-weight: bold; font-size: 16px; text-align: center; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-navigation-node .header-navigation-node-title { font-size: 12px; font-weight: bold; } } .header-navigation-node .header-navigation-node-count { position: absolute; top: 10px; right: 10px; height: 20px; margin: auto; padding: 0 8px; font-size: 12px; font-weight: bold; line-height: 20px; border-radius: 11px; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; background: #dedede; color: #ffffff; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-navigation-node .header-navigation-node-count { display: table; height: 16px; line-height: 16px; font-size: 11px; font-weight: normal; padding: 2px 6px 0px 6px; position: absolute; top: 10px; right: 5px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-navigation-node { height: 80px; width: 120px; } } /* Style Filters */ /* Header Filter Bar */ #header-filter { height: 60px; width: auto; overflow: hidden; box-shadow: 0 0 15px rgba(0, 0, 0, 0.33); background: #0095db; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter { height: 40px; line-height: 40px; } } /* Filter Title */ #header-filter-title { float: left; height: 100%; width: 200px; margin: 0 25px 0 0; background: #b4051f; color: #ffffff; cursor: pointer; overflow: hidden; /* Ipad Screen */ /* Filter Title Before */ /* Filter Title After */ /* Title Wrapper */ /* Filter Title Hover */ /* Filter Arrow Hover */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title { width: 110px; } } #header-filter-title:before { content: ""; position: absolute; left: 0; height: 60px; background: #000000; /* Ipad Screen */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title:before { height: 40px; } } #header-filter-title:after { content: ""; position: absolute; top: auto; left: 200px; height: 0; width: 0; border-bottom: 30px solid transparent; border-left: 30px solid #b4051f; border-top: 30px solid transparent; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title:after { border-bottom: 20px solid transparent; border-left: 20px solid #b4051f; border-top: 20px solid transparent; left: 110px; } } #header-filter-title .title-wrapper { display: inline-block; float: left; height: 30px; width: 200px; text-align: center; line-height: 60px; /* Title Text */ /* Products Found */ /* Responsive */ } #header-filter-title .title-wrapper .title { display: inline-block; font-size: 24px; font-weight: bold; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title .title-wrapper .title { font-size: 16px; } } #header-filter-title .title-wrapper .products-found { position: relative; top: -11px; font-size: 14px; padding: 4px 9px; border-radius: 16px; background: #000000; background: #999794; color: #ffffff; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title .title-wrapper .products-found { top: -5px; font-size: 12px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title .title-wrapper { width: 110px; line-height: 40px; height: 20px; } } #header-filter-title:active { background: #e60628; color: #ffffff; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #header-filter-title:active:after { border-left: 30px solid #e60628; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title:active:after { border-left: 20px solid #e60628; } } /* Filter Button */ .header-filter-button { float: left; height: 60px; width: auto; padding: 0 25px; border-right: 1px solid rgba(255, 255, 255, 0.15); font-weight: bold; font-size: 24px; text-align: center; line-height: 2.5; text-decoration: none; color: #ffffff; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ /* Filter Button active */ /* Filter Button Selected */ /* Filter Button Cancel*/ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-filter-button { height: 40px; font-size: 16px; line-height: 40px; padding: 0 20px; } } .header-filter-button:active { color: #ffffff; background: rgba(255, 255, 255, 0.1); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .header-filter-button.header-filter-button-selected { background: rgba(0, 0, 0, 0.2); } .header-filter-button .header-filter-button-cancel { border-radius: 16px; padding: 5px; font-size: 14px; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; background: #000000; background: #b4051f; color: #ffffff; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-filter-button .header-filter-button-cancel { font-size: 12px; } } /* Filter Button First Class (Because of the Filters Arrow) */ .header-filter-button-first { padding-left: 50px; margin-left: -25px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-filter-button-first { padding-left: 40px; } } /* Filter Drop Down */ #filters { display: none; position: absolute; left: 0; z-index: 2; width: 100%; height: 460px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.33); background: #f8f8f8; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #filters { height: 440px; } } .filter-scroll-window { width: 100%; overflow-x: auto; overflow-y: hidden; /* Scrollbar Styling */ /* Scrollbar Thumb Styling */ } .filter-scroll-window::-webkit-scrollbar { height: 2px; background-color: #dedede; } .filter-scroll-window::-webkit-scrollbar-thumb { background-color: #ababab; border-radius: 0; } /* Filter Category List */ ul#filter-category-list { float: left; width: 100%; height: 400px; overflow-x: auto; overflow-y: hidden; padding: 0; margin: 0; list-style: none; /* Hide scrollbar */ } ul#filter-category-list::-webkit-scrollbar { display: none; } ul#filter-category-list>li { float: left; margin: 5px 0 5px 5px; width: 310px; background: #ebebeb; border-radius: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Responsive */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { ul#filter-category-list>li { width: 265px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul#filter-category-list>li { width: 220px; } } ul#filter-category-list .filter-item-header { width: 100%; background: none; display: block; } ul#filter-category-list .filter-item-header h3 { color: #000000; padding: 10px; margin: 0; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul#filter-category-list .filter-item-header h3 { font-size: 16px; } } ul#filter-category-list .filter-item-list-scroll { text-align: center; height: 30px; } ul#filter-category-list .filter-item-list-scroll .icon { font-size: 35px; } /* Filter List */ ul.filter-item-list { display: block; margin: 0; padding: 0; height: 348px; overflow-y: auto; overflow-x: hidden; background: linear-gradient(0, rgba(0, 0, 0, 0) 75%, #f8f8f8 150%); border-radius: 0; /* Hide Scrollbar */ /* Filter List Item */ /* Filter Show More */ } ul.filter-item-list::-webkit-scrollbar { display: none; } ul.filter-item-list li { float: left; width: 290px; list-style: none; border: none; margin: 5px; padding: 0; /* Responsive */ /* Filter Label */ /* Filter Count */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { ul.filter-item-list li { width: 245px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul.filter-item-list li { width: 200px; } } ul.filter-item-list li label { float: left; max-width: 205px; color: #000000; font-size: 16px; font-weight: bold; line-height: 38px; white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; /* Responsive */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { ul.filter-item-list li label { max-width: 160px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul.filter-item-list li label { font-size: 14px; font-weight: normal; max-width: 140px; } } ul.filter-item-list li .count { position: relative; top: 8px; left: 5px; background: rgba(255, 255, 255, 0.33); padding: 2px 5px; font-size: 14px; font-weight: bold; text-align: center; border-radius: 12px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul.filter-item-list li .count { font-size: 12px; padding: 1px 5px; } } ul.filter-item-list li.filter-show-more { margin: 8px 10px 10px; padding: 10px; width: 270px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border-radius: 0; background: #000000; color: #000000; font-size: 18px; font-weight: bold; cursor: pointer; text-align: center; /* Filter Show More Hover */ /* Responsive */ } ul.filter-item-list li.filter-show-more:active { background: #1a1a1a; color: #1a1a1a; -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (min-height: 1919px) and (min-width: 1079px) { ul.filter-item-list li.filter-show-more { max-width: 225px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul.filter-item-list li.filter-show-more { max-width: 180px; font-size: 14px; } } ul.filter-item-list .filter-checkbox { float: left; width: 30px; height: 30px; margin-right: 5px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul.filter-item-list .filter-checkbox { width: 25px; height: 25px; margin: 5px 5px; } } /* Close Filter */ #filters-close { float: left; width: 100%; height: 60px; background: #ebebeb; text-align: center; padding: 0; margin: 0; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } #filters-close:active { background: #f3f3f3; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #filters-close .icon { color: #000000; line-height: 60px; font-size: 48px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #filters-close .icon { line-height: 40px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #filters-close { height: 40px; } } /* Filter Next & Previous Button */ #filter-navigation-next, #filter-navigation-prev { display: flex; align-items: center; position: absolute; font-size: 90px; color: #000000; height: 400px; width: 100px; z-index: 1; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Filter Next & Previous Button active */ /* Kiosk Ipad */ } #filter-navigation-next:active, #filter-navigation-prev:active { color: #1a1a1a; -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #filter-navigation-next, #filter-navigation-prev { font-size: 48px; width: 50px; } } /* Filter Previous Button Left Margin */ #filter-navigation-prev { left: 0; justify-content: flex-start; background: linear-gradient(90deg, #ebebeb 0, rgba(255, 255, 255, 0) 100%); } /* Filter Previous Button Right Margin */ #filter-navigation-next { right: 0; justify-content: flex-end; background: linear-gradient(-90deg, #ebebeb 0, rgba(255, 255, 255, 0) 100%); } .filter-navigation { width: 100px; height: 400px; position: absolute; overflow: hidden; } .filter-navigation.filter-navigation-left { left: 0; } .filter-navigation.filter-navigation-right { right: 0; } .filter-sorting-wrapper { float: right; width: 320px; height: 60px; right: 0px; position: absolute; } .filter-sorting-wrapper label { color: #b4051f; position: relative; top: 20px; padding-right: 10px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .filter-sorting-wrapper label { top: 0px; } } /* Product Catalog Styling */ .btw-incl, .btw-both { display: inline-block; } /* Products Page */ #products, .content-wrapper { position: relative; padding: 50px; overflow: hidden; display: block; z-index: 1; } /* Product */ .product { float: left; margin: 10px 0; width: 25%; } /* Product Content Container */ .product-content { position: relative; display: block; margin: 0 10px; width: auto; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border-radius: 0; border: 1px solid #dedede; background: #ffffff; color: #000000; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Product Content active */ } .product-content:active { box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } /* Product Animation */ .product-animation { -moz-animation-name: product-animation; -o-animation-name: product-animation; -webkit-animation-name: product-animation; animation-name: product-animation; -moz-animation-duration: 0.7s; -o-animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; } /* Product Animation Parameters */ @-moz-keyframes product-animation { from { opacity: 0; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } to { opacity: 1; -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); -webkit-transform: rotateY(0); transform: rotateY(0); } } @-webkit-keyframes product-animation { from { opacity: 0; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } to { opacity: 1; -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); -webkit-transform: rotateY(0); transform: rotateY(0); } } @keyframes product-animation { from { opacity: 0; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } to { opacity: 1; -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); -webkit-transform: rotateY(0); transform: rotateY(0); } } /* Product Move To Cart Animation Wrapper */ .product-move-to-cart { display: none; align-items: center; justify-content: center; position: absolute; z-index: 10; padding: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border: 1px solid #dedede; border-radius: 0; background: #ffffff; /* Product Move To Cart Image */ } .product-move-to-cart img { max-width: 100%; max-height: 100%; } /* Products Not Found Message */ #products-not-found { width: auto; margin: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border: 1px solid #dedede; border-radius: 0; background: #ffffff; color: #000000; } #products-not-found p { padding: 10px; margin: 0; font-weight: bold; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #products-not-found p { font-size: 14px; } } /* Product Icons */ .product-icons { position: absolute; top: 0; right: 0; width: 0; } /* Product Icon */ .product-content-is-ebook, .product-content-in-shopping-cart, .product-content-webnode-top, .product-content-is-bulk-promotion { position: relative; float: right; display: block; height: 30px; width: 30px; margin: 10px 10px 0 0; border-radius: 0; text-align: center; line-height: 30px; background: #b4051f; color: #000000; background: none; color: #b4051f; } .product-content-is-ebook img, .product-content-in-shopping-cart img, .product-content-webnode-top img, .product-content-is-bulk-promotion img { width: 80%; height: 80%; padding: 10%; } /* Product Discount Banner */ .product-discount { position: absolute; top: 15px; left: -45px; height: 40px; width: 90px; padding: 0 35px; overflow: hidden; background: #000000; box-shadow: inset 40px 0 20px rgba(0, 0, 0, 0.1); color: #000000; text-align: center; line-height: 40px; font-weight: bold; font-size: 16px; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } /* Product Icon In Cart Image*/ .product-content-in-shopping-cart { background-image: url(/images/icon-incart.png); background-size: 85%; background-position: center; background-repeat: no-repeat; } /* Product Image */ .product-image { position: relative; display: flex; align-items: center; justify-content: center; margin: 10px; width: auto; height: 143px; overflow: hidden; text-align: center; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-image { height: 85px; } } /* Discount image */ .discount-banner { position: absolute; top: 3px; left: 3px; z-index: 1; } /* Product Title */ .product-title { display: -webkit-box; height: 40px; margin: 0 10px; font-size: 16px; font-weight: bold; line-height: 20px; color: #000000; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-title { height: 16px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 12px; } } /* Product Subtitle */ .product-subtitle { overflow: hidden; height: 16px; margin: 0 10px 10px; font-size: 14px; color: #1a1a1a; white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-subtitle { height: 14px; line-height: 14px; font-size: 10px; } } /* Product Bottom Bar */ .product-footer { float: left; width: 100%; height: 50px; background: #000000; /* Responsive */ /* Price */ /* Price To */ /* Price From */ /* Price Incl BTW */ /* Price Excl BTW*/ /* Price Excl From */ /* BTW Incl Container */ /* BTW Both Container */ /* Product Cart Add */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-footer { height: 40px; } } .product-footer .price { display: inline-block; height: 30px; margin: 10px; font-size: 20px; font-weight: bold; color: #000000; line-height: 30px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-footer .price { height: 20px; font-size: 16px; line-height: 20px; } } .product-footer .price-to { position: absolute; bottom: 4px; left: 10px; font-size: 20px; font-weight: bold; color: #000000; line-height: 30px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-footer .price-to { font-size: 16px; line-height: 16px; } } .product-footer .price-from { position: relative; top: 4px; left: 10px; font-size: 14px; font-weight: bold; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-footer .price-from { font-size: 13px; top: 0; } } .product-footer .price-incl { float: left; width: 100%; margin: 0 10px 5px; font-size: 14px; font-weight: bold; color: #000000; } .product-footer .price-excl { float: left; width: 100%; margin: 5px 10px 0; font-size: 20px; font-weight: bold; color: #000000; } .product-footer .price-excl-from { font-size: 14px; color: #000000; } .product-footer .btw-incl { display: inline-block; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .product-footer .btw-both { display: block; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .product-footer .matrix { float: right; position: absolute; right: 0; height: 30px; margin: 10px; width: 100px; border-radius: 2px !important; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); text-decoration: none; text-align: center; line-height: 30px; background-color: #b4051f !important; color: #ffffff; /* Product Cart Add Hover */ /* Responsive */ } .product-footer .matrix:active, .product-footer .matrix:hover { -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; background-color: #000000 !important; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-footer .matrix { margin: 5px; } } .product-footer .cart-add { float: right; position: absolute; right: 0; width: 30px; height: 30px; margin: 10px; border-radius: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); text-decoration: none; text-align: center; line-height: 30px; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; background: #f27021; color: #b4051f; background-image: url(/images/icon-cart.png); background-size: 85%; background-position: center; background-repeat: no-repeat; /* Product Cart Add Hover */ /* Responsive */ } .product-footer .cart-add:active { -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-footer .cart-add { margin: 5px; } } /* Video Popup Styling */ /* Overlay Video */ #overlay-video { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.85); z-index: 100000; overflow: hidden; display: none; /* Video Player */ /* Tap Container with text + icon */ } #overlay-video .video-player-container { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000; overflow: hidden; } #overlay-video .video-player-container iframe { width: 100%; height: 100%; } #overlay-video .tap-container { position: absolute; width: 100%; height: 100%; background: none; z-index: 1200000; color: white; } #overlay-video .tap-container .tap-text { width: 100%; position: absolute; bottom: 25px; } @media only screen and (min-height: 1919px) and (min-width: 1079px) { #overlay-video .tap-container .tap-text { bottom: 25%; } .discount-bar{ height: 27px; } } #overlay-video .tap-container .tap-text p { text-align: center; font-size: 24px; font-weight: bold; animation: ease-in-out; animation-name: tap-animation-text; animation-duration: 1s; animation-iteration-count: infinite; } #overlay-video .tap-container .tap-text i { font-family: 'Material Icons'!important; width: 100%; text-align: center; font-size: 64px; animation: ease-in-out; animation-name: tap-animation; animation-duration: 1s; animation-iteration-count: infinite; } @keyframes tap-animation-text { 0% { transform: scale(1); opacity: .33; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: .33; } } @keyframes tap-animation { 0% { transform: scale(1); opacity: 0.33; } 50% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: .33; } } /* Product Detail Image Carousel*/ /* Main image */ .lSSlideOuter { width: 100%; } .lSSlideWrapper { height: 450px; width: 100%; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .lSSlideWrapper { height: 300px; } } .lSSlideWrapper ul.lightSlider { height: inherit; width: 100%; } .lSSlideWrapper ul.lightSlider li { height: 100%; position: relative; display: flex; align-items: center; justify-content: center; } .lSSlideWrapper ul.lightSlider li img { height: auto; max-width: 96%; max-height: 96%; margin: 2%; } .lSPager, .lSGallery { width: auto !important; height: 100px; margin: 0 !important; padding-left: 10px !important; float: right; } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .lSPager, .lSGallery { display: block; } } @media only screen and (max-height: 801px) and (max-width: 1281px) { .lSPager, .lSGallery { display: none; } } .lSPager li, .lSGallery li { display: block; height: 80px; width: 80px !important; margin: 10px 10px 10px 0 !important; cursor: pointer; position: relative; background: #fff; border-radius: 0; border: 1px solid #dedede; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); -moz-transition: 0.25s; -o-transition: 0.25s; -webkit-transition: 0.25s; transition: 0.25s; } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .lSPager li, .lSGallery li { width: 50px !important; height: 50px; } } .lSPager li:hover, .lSGallery li:hover { border-radius: 0 !important; } .lSPager li a, .lSGallery li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .lSPager li a img, .lSGallery li a img { max-height: 74px; max-width: 74px !important; margin: 3px auto; } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .lSPager li a img, .lSGallery li a img { max-height: 44px; max-width: 44px !important; } } .lSPager li.active, .lSGallery li.active { border-radius: 0 !important; -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); -webkit-transform: scale(1.08); transform: scale(1.08); -moz-transition: 0.25s; -o-transition: 0.25s; -webkit-transition: 0.25s; transition: 0.25s; } /* Product Detail */ /* Next & Prev Button */ #next-button, #prev-button { position: fixed; top: 50%; z-index: 1; height: 100px; width: 50px; border: 1px solid #dedede; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); background: #ffffff; color: #000000; text-align: center; font-size: 48px; line-height: 100px; cursor: pointer; opacity: 1; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Next & Prev Button active */ /* Next & Prev Button Disabled State */ /* Responsive */ } #next-button:active, #prev-button:active { box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); color: #1a1a1a; -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #next-button[disabled], #prev-button[disabled] { opacity: 0; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #next-button, #prev-button { top: 50%; margin-top: 75px; } } @media only screen and (max-height: 801px) and (max-width: 1281px) { #next-button, #prev-button { top: 50%; } } /* Next Button Positioning */ #next-button { right: 0; border-radius: 0 0 0 0; } /* Previous Button Positioning */ #prev-button { left: 0; border-radius: 0 0 0 0; } /* Product Detail Page */ #product-detail { position: fixed; left: 10%; top: 50%; z-index: 9; width: 80%; height: 550px; margin-top: -275px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border-radius: 0; overflow: hidden; background: #ffffff; /* Responsive */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { #product-detail { height: 1100px; margin-top: -550px; } } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail { height: 820px; margin-top: -400px; } } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail { height: 600px; margin-top: -300px; } } /* Product Detail Page Image */ #product-detail-image { position: relative; float: left; width: 33.33%; height: 100%; overflow: hidden; background: #ffffff; /* Responsive */ /* Product Brand Image */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { #product-detail-image { width: 100%; height: 550px; } } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-image { width: 100%; height: 370px; } } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-image { width: 275px; height: 300px; position: absolute; right: 0; z-index: 8; } } #product-detail-image #product-detail-image-brand { position: absolute; bottom: 10px; left: 10px; display: flex; align-items: center; height: 80px; width: 80px; overflow: hidden; border-radius: 0; border: 1px solid #dedede; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); background: #ffffff; /* Responsive */ } #product-detail-image #product-detail-image-brand img { max-height: 74px; max-width: 74px; margin: 3px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-image #product-detail-image-brand { width: 50px; height: 50px; } } .discount-banner { top: 2%; left: 2%; } /* Product Detail Page Content */ #product-detail-content { float: right; width: 66.66%; overflow: hidden; /* Responsive */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { #product-detail-content { width: 100%; } } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-content { width: 100%; } } /* Product Detail Header Content */ #product-detail-header-content { position: relative; height: 150px; overflow: hidden; background: #ffffff; /* Price */ /* Price To (Discount) */ /* Price From (Discount) */ /* Price Excl BTW*/ /* Price Excl BTW From*/ /* Price Incl BTW */ /* Responsive */ } #product-detail-header-content .price, #product-detail-header-content .price-to { position: absolute; right: 10px; top: 5px; font-size: 32px; font-weight: bold; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content .price, #product-detail-header-content .price-to { display: block; position: relative; right: 0; width: 100%; float: left; margin-left: 10px; } } #product-detail-header-content .price-to { top: 30px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content .price-to { top: 0; } } #product-detail-header-content .price-from { position: absolute; right: 10px; top: 5px; font-weight: bold; font-size: 18px; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content .price-from { display: block; position: relative; right: 0; width: 100%; float: left; margin-left: 10px; } } #product-detail-header-content .price-excl { position: absolute; right: 10px; top: 5px; font-weight: bold; font-size: 32px; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content .price-excl { display: block; position: static; margin-left: 10px; } } #product-detail-header-content .price-excl-from { font-size: 18px; } #product-detail-header-content .price-incl { position: absolute; right: 10px; top: 45px; font-size: 20px; font-weight: bold; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content .price-incl { position: static; margin-left: 10px; } } @media only screen and (min-height: 1919px) and (min-width: 1079px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-content { float: left; width: 100%; } } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content { float: left; width: 100%; height: 300px; } } /* Product Detail Header Content Wrapper */ #product-detail-header-content-wrapper { height: 95px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content-wrapper { height: 255px; } } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-content-wrapper { height: 105px; } } /* Product Detail Title */ #product-detail-header-content-title { width: 75%; overflow: hidden; margin: 5px 10px 0 10px; display: inline-block; font-size: 32px; font-weight: bold; white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; color: #ffffff; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content-title { margin-right: 285px; width: auto; font-size: 28px; display: block; -ms-text-overflow: clip; -o-text-overflow: clip; text-overflow: clip; white-space: normal; } } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-content-title { margin-right: 200px; width: auto; font-size: 22px; display: block; -ms-text-overflow: clip; -o-text-overflow: clip; text-overflow: clip; white-space: normal; } } /* Product Detail Subtitle */ #product-detail-header-content-subtitle { display: block; width: 75%; overflow: hidden; margin: 0 10px 0; font-size: 18px; font-weight: bold; white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; color: #e6e6e6; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-content-subtitle { margin-right: 285px; width: auto; -ms-text-overflow: clip; -o-text-overflow: clip; text-overflow: clip; white-space: normal; } } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-content-subtitle { font-size: 16px; } } /* Tab Container */ #product-detail-header-content-tabs { float: left; position: relative; margin-bottom: 1px; /* Tab Styling */ /* Tab Active Color */ } #product-detail-header-content-tabs .product-detail-header-content-tabs-tab { float: left; margin: 0 0 0 10px; padding: 15px 10px; border-radius: 0 0 0 0; background: #ffffff; color: #000000; font-weight: bold; font-size: 20px; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Tab Touch Color */ /* Responsive */ } #product-detail-header-content-tabs .product-detail-header-content-tabs-tab:active { background: #cccccc; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-content-tabs .product-detail-header-content-tabs-tab { position: relative; z-index: 9; padding: 10px; font-size: 16px; } } #product-detail-header-content-tabs .active>a>.product-detail-header-content-tabs-tab { background: #000000; color: #ffffff; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } /* Tabs */ .tabs { width: 100%; display: inline-block; } .tabs .tab-links { margin: 0; padding: 0; float: left; display: inline; overflow: hidden; } .tabs .tab-links li { min-height: 30px; padding: 0; margin: 0; float: left; list-style: none; } .tabs .tab-links a { padding: 0; display: inline-block; } .tabs .tab-links a:active { text-decoration: none; } .tab-content #productInfo ul { margin: 20px; padding: 0; } .tab-content #productInfo ul li { min-height: 30px; list-style: none; margin: 0; padding: 0; } .tab-content #productInfo ul li span.tab-product-informatie-description { display: block; float: left; width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab-content #productInfo ul li span.tab-product-informatie-content { display: block; font-weight: bold; } /* Product Detail Tab Content */ #product-detail-header-tab-content { overflow-y: auto; height: 340px; background-color: #ffffff; color: #000000; font-size: 20px; /* Responsive */ /* Scrollbar Styling */ /* Scrollbar Thumb Styling */ /* Tab Content */ /* Alternative Products Tab */ /* Voorraad Tab*/ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { #product-detail-header-tab-content { float: left; width: 100%; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-tab-content { float: left; width: 100%; height: 260px; font-size: 16px; } } #product-detail-header-tab-content::-webkit-scrollbar { background-color: #fafafa; } #product-detail-header-tab-content::-webkit-scrollbar-thumb { background-color: #f0f0f0; border-radius: 0; } #product-detail-header-tab-content .tab-content { margin: 20px; overflow: hidden; /* Video */ } #product-detail-header-tab-content .tab-content iframe { display: block; width: 534px; height: 300px; border: none; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-tab-content .tab-content iframe { width: 392px; height: 220px; } } #product-detail-header-tab-content #alternative-products { /* Init for loading*/ } #product-detail-header-tab-content #alternative-products .section-tab-content-alternative-products { height: 300px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-tab-content #alternative-products .section-tab-content-alternative-products { height: 220px; } } #product-detail-header-tab-content #documents .tab-content { margin: 0; overflow: hidden; } #product-detail-header-tab-content #documents .tab-content iframe { width: 100%; height: 340px; float: left; } #product-detail-header-tab-content #availability-map { /* Init for loading & map */ } #product-detail-header-tab-content #availability-map .tab-content { margin: 0 !important; } #product-detail-header-tab-content #availability-map .tab-content #map-canvas { height: 340px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-tab-content #availability-map .tab-content #map-canvas { height: 260px; } } #product-detail-header-tab-content #availability-map .availability-map-stores { position: relative; float: left; overflow-y: auto; width: 300px; height: 340px; background-color: #ffffff; color: #000000; z-index: 10; border-right: 1px solid #dedede; /* Responsive */ /* Scrollbar Styling */ /* Scrollbar Thumb Styling */ /* Store */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-tab-content #availability-map .availability-map-stores { width: 225px; height: 260px; } } #product-detail-header-tab-content #availability-map .availability-map-stores::-webkit-scrollbar { background-color: #fafafa; } #product-detail-header-tab-content #availability-map .availability-map-stores::-webkit-scrollbar-thumb { background-color: #f0f0f0; border-radius: 0; } #product-detail-header-tab-content #availability-map .availability-map-stores .selected { background: #f7f7f7; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #product-detail-header-tab-content #availability-map .availability-map-stores .selected h4 { color: #000000; } #product-detail-header-tab-content #availability-map .availability-map-stores .store { display: block; position: relative; width: auto; padding: 10px 10px 5px 10px; border-bottom: 1px solid #e6e6e6; font-size: 16px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-tab-content #availability-map .availability-map-stores .store { font-size: 14px; } } #product-detail-header-tab-content #availability-map .availability-map-stores .store:last-child { padding: 10px; border-bottom: none; } #product-detail-header-tab-content #availability-map .availability-map-stores .store img { float: left; width: 100%; max-height: 100px; object-fit: cover; margin-bottom: 5px; } #product-detail-header-tab-content #availability-map .availability-map-stores .store h4 { font-weight: bold; margin: 0; } /* Product Detail Navigation Bar Bottom */ #product-detail-navigation { position: absolute; right: 0; bottom: 0; width: 66.66%; height: 60px; overflow: hidden; background: #ffffff; color: #ffffff; /* Responsive */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { #product-detail-navigation { width: 100%; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation { width: 100%; height: 40px; } } #product-detail-navigation-close { float: left; height: 100%; cursor: pointer; } #product-detail-navigation-close:active #product-detail-navigation-close-icon { -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #product-detail-navigation-close #product-detail-navigation-close-icon { float: left; display: inline-block; font-size: 48px; line-height: 1.3; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-close #product-detail-navigation-close-icon { line-height: 45px; font-size: 32px; } } #product-detail-navigation-close #product-detail-navigation-close-title { float: left; display: inline-block; padding-right: 25px; line-height: 60px; font-weight: bold; font-size: 20px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-close #product-detail-navigation-close-title { line-height: 40px; font-size: 18px; } } #product-detail-navigation-order, #product-detail-navigation-noOrder { display: block; float: right; height: 100%; padding: 0 25px 0 50px; background:#f27021; color: #ffffff; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #product-detail-navigation-order:active, #product-detail-navigation-noOrder:active { color: #ffffff; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #product-detail-navigation-order:active #product-detail-navigation-order-icon, #product-detail-navigation-noOrder:active #product-detail-navigation-order-icon { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } #product-detail-navigation-order #product-detail-navigation-order-icon, #product-detail-navigation-noOrder #product-detail-navigation-order-icon { float: left; display: inline-block; font-size: 36px; line-height: 60px; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-order #product-detail-navigation-order-icon, #product-detail-navigation-noOrder #product-detail-navigation-order-icon { line-height: 40px; font-size: 28px; } } #product-detail-navigation-order #product-detail-navigation-order-title, #product-detail-navigation-noOrder #product-detail-navigation-order-title { float: left; display: inline-block; padding-right: 10px; line-height: 60px; font-weight: bold; font-size: 24px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-order #product-detail-navigation-order-title, #product-detail-navigation-noOrder #product-detail-navigation-order-title { line-height: 40px; font-size: 20px; padding: 0; } } #product-detail-navigation-quantity-wrapper { float: right; padding-right: 20px; height: 100%; /* Responsive*/ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-quantity-wrapper { padding-right: 10px; } } #product-detail-navigation-quantity-wrapper:after { content: ""; position: absolute; top: auto; left: auto; width: 0; height: 0; border-bottom: 30px solid transparent; border-left: 30px solid #ffffff; border-top: 30px solid transparent; margin-left: 20px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-quantity-wrapper:after { border-bottom: 20px solid transparent; border-left: 20px solid #ffffff; border-top: 20px solid transparent; margin-left: 10px; } } #product-detail-navigation-quantity-title, .cart-quantity { float: left; display: inline-block; padding-right: 5px; line-height: 60px; font-weight: bold; font-size: 20px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-quantity-title, .cart-quantity { line-height: 40px; font-size: 18px; } } #product-detail-navigation-quantity-add, #product-detail-navigation-quantity-remove, .cart-increment, .cart-decrement { float: left; display: inline-block; margin: 0 5px; font-size: 36px; line-height: 60px; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-quantity-add, #product-detail-navigation-quantity-remove, .cart-increment, .cart-decrement { line-height: 40px; font-size: 28px; } } #product-detail-navigation-quantity-add:active, #product-detail-navigation-quantity-remove:active, .cart-increment:active, .cart-decrement:active { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } /* Matrix Selector Bar*/ #product-detail-navigation-matrix { height: 60px; padding-right: 20px; float: right; display: flex; align-items: center; /* Responsive */ /* Matrix Title */ /* Matrix Option */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-matrix { height: 40px; } } #product-detail-navigation-matrix .matrix-title { font-size: 20px; font-weight: bold; padding-right: 5px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-matrix .matrix-title { font-size: 16px; } } #product-detail-navigation-matrix .matrix-option { float: left; margin: 5px; padding: 5px; min-width: 20px; background-color: #cccccc; border-radius: 0; font-weight: bold; text-align: center; } #product-detail-navigation-matrix .matrix-option-available { cursor: pointer; } #product-detail-navigation-matrix .matrix-option-available:active { -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #product-detail-navigation-matrix .matrix-option-not-available { background-color: red; cursor: not-allowed; } #product-detail-navigation-matrix .selected-matrix-option { background-color: #ffffff; -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } /* Style Cart */ /* Cart */ #cart-wrapper { /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #cart-wrapper { position: absolute; width: calc(100% - 100px); height: calc(100% - 215px); } } .cart-content { overflow: hidden; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-content { width: 100%; height: 100%; } } .cart-products { margin: 0 0 25px 0; padding: 0; overflow-y: auto; /* Responsive */ } .cart-products::-webkit-scrollbar { display: none; } @media only screen and (min-height: 1079px) and (min-width: 1919px) { .cart-products { max-height: 620px; } } @media only screen and (min-height: 1919px) and (min-width: 1079px) { .cart-products { max-height: 1460px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-products { position: relative; float: left; width: 100%; height: calc(100% - 116px); } } .cart-products .only-pickup { color: #ffffff; margin-left: 20px; } /* Cart Product */ .cart-product { width: auto; height: auto; margin: 0 0 25px; border: 1px solid #dedede; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border-radius: 0; background: #f8f8f8; list-style: none; overflow: hidden; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product { height: 120px; } } /* Cart Product Image */ .cart-product-image { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; float: left; width: 250px; height: 185px; background: #f8f8f8; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-image { height: 120px; width: 120px; } } .cart-product-image img { padding: 10px; max-width: 230px; max-height: 160px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-image img { max-width: 110px; max-height: 110px; } } .cart-product-image .product-icons img { width: 80%; height: 80%; padding: 10%; } /* Cart Product Content */ .cart-product-content { margin: 0; padding: 0; width: auto; } /* Cart Product Information */ .cart-product-information { position: relative; margin: 0; padding: 0; height: 125px; width: auto; overflow: hidden; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-information { height: 80px; } } .cart-product-information h3 { color: #000000; margin: 20px 20px 0 20px; font-size: 24px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-information h3 { font-size: 20px; } } .cart-product-information .product-second-description, .cart-product-information .product-discount-description { display: block; margin: 0 20px 0 20px; font-weight: bold; } .cart-product-information .product-second-description { color: #000000; font-size: 18px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-information .product-second-description { font-size: 14px; } } .cart-product-information .product-discount-description { color: #000000; font-size: 16px; } /* Cart Product Navigation */ .cart-product-navigation { height: 60px; background: #dfdfdf; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-navigation { height: 40px; } } /* Cart Quantity*/ .cart-quantity { margin-left: 20px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-quantity { line-height: 40px; font-size: 18px; } } /* Cart Product Price & Total */ .cart-product-price, .cart-product-discount, .cart-product-total, .cart-discount-linetotal { display: inline-block; padding-right: 20px; line-height: 60px; font-weight: bold; font-size: 20px; /* Responsive */ } .cart-discount-linetotal { line-height: unset; width: 70%; margin-bottom: 15px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-price, .cart-product-discount, .cart-product-total, .cart-discount-linetotal { line-height: 40px; font-size: 18px; } } .cart-product-price, .cart-product-discount { margin-left: 20px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { .cart-product-price, .cart-product-discount { margin-left: 0; } } span.cart-label-price { color: #ffffff; } span.cart-label { color: #b4051f; } span.cart-label .price-incl, span.cart-label-price .price-incl { font-size: 75%; color: #e6e6e6; } .cart-remove { position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; font-size: 36px; cursor: pointer; background: #f8f8f8; background-image: url(/images/icon-delete.png); background-size: 85%; background-position: center; background-repeat: no-repeat; border-radius: 0; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .cart-remove:active { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } /* Cart Checkout */ .cart-checkout { width: auto; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border-radius: 0; border: 1px solid #dedede; background: #f8f8f8; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-checkout { width: 100%; float: left; } } /* Cart Checkout Bar */ .cart-checkout-bar { height: 60px; background: #0095db; /* Responsive */ } .cart-checkout-bar #product-detail-navigation-order { background: #0095db; color: #ffffff; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-checkout-bar { height: 40px; } } /* Cart Checkout Arrow */ .cart-checkout-arrow { float: right; padding-right: 25px; height: 100%; /* Arrow */ } .cart-checkout-arrow:after { content: ""; position: absolute; top: auto; left: auto; width: 0; height: 0; border-bottom: 30px solid transparent; border-left: 30px solid #dfdfdf; border-top: 30px solid transparent; margin-left: 25px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-checkout-arrow:after { border-bottom: 20px solid transparent; border-left: 20px solid #dfdfdf; border-top: 20px solid transparent; } } /* Cart Checkout Price */ .cart-checkout-price { font-size: 48px; font-weight: bold; color: #ffffff; margin: 10px 20px; text-align: right; /* Responsive */ /* Price Incl BTW */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-checkout-price { font-size: 24px; } } .cart-checkout-price .price-incl { display: block; font-size: 20px; } /* Cart Checkout Price Text */ .cart-checkout-price-text { font-size: 24px; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-checkout-price-text { font-size: 18px; } } /* Style Checkout Pages */ /* Form */ .form-box h2 { margin: 0 10px; padding: 0; } .form-box button { float: right; height: 60px; width: 100%; text-align: right; border: none; background: #ff9802; color: #f8f8f8; font-size: 18px; font-weight: bold; line-height: 60px; text-transform: none; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } .form-box button:active { background: #ff9802; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .form-box button:focus { outline: none; } .form-box button .icon { float: right; font-size: 32px; line-height: 60px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .form-box button .icon { line-height: 40px; font-size: 28px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .form-box button { height: 40px; line-height: 40px; font-size: 16px; } } /* Form Split Left Alignment */ .form-split-left { display: inline-block; width: 49%; } /* Form Split Right Alignment */ .form-split-right { float: right; display: inline-block; width: 50%; } .form-content { margin: 0 10px 10px; } /* Order Confirmation Row */ .order-confirmation-row, .customer-data-row { width: 100%; min-height: 30px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); line-height: 30px; display: flex; align-items: center; /* Order Confirmation Row Title */ /* Order Confirmation Row Content */ /* Product Confirmation Row Title */ /* Product Confirmation Row Content */ } .order-confirmation-row .customer-data-row-title, .customer-data-row .customer-data-row-title { float: left; width: 25%; } .order-confirmation-row .order-confirmation-row-content, .customer-data-row .order-confirmation-row-content, .order-confirmation-row .customer-data-row-content, .customer-data-row .customer-data-row-content { width: 75%; float: left; font-weight: bold; font-size: 18px; } .order-confirmation-row .order-confirmation-row-content .price-excl-from, .customer-data-row .order-confirmation-row-content .price-excl-from, .order-confirmation-row .customer-data-row-content .price-excl-from, .customer-data-row .customer-data-row-content .price-excl-from, .order-confirmation-row .order-confirmation-row-content .price-from, .customer-data-row .order-confirmation-row-content .price-from, .order-confirmation-row .customer-data-row-content .price-from, .customer-data-row .customer-data-row-content .price-from { font-size: 14px; opacity: 0.75; } .order-confirmation-row .order-confirmation-row-content .btw-incl, .customer-data-row .order-confirmation-row-content .btw-incl, .order-confirmation-row .customer-data-row-content .btw-incl, .customer-data-row .customer-data-row-content .btw-incl { line-height: 10px; } .order-confirmation-row .order-confirmation-row-content .price-from, .customer-data-row .order-confirmation-row-content .price-from, .order-confirmation-row .customer-data-row-content .price-from, .customer-data-row .customer-data-row-content .price-from { display: block; line-height: 25px; } .order-confirmation-row .order-confirmation-row-content .price-incl, .customer-data-row .order-confirmation-row-content .price-incl, .order-confirmation-row .customer-data-row-content .price-incl, .customer-data-row .customer-data-row-content .price-incl { font-size: 14px; line-height: 14px; display: block; opacity: 0.5; } .order-confirmation-row .order-confirmation-row-title, .customer-data-row .order-confirmation-row-title { float: left; width: 66%; /* Product Row Message */ /* Product Row Warning Message */ /* Product Row Discount Message */ } .order-confirmation-row .order-confirmation-row-title .warning-message, .customer-data-row .order-confirmation-row-title .warning-message, .order-confirmation-row .order-confirmation-row-title .discount-message, .customer-data-row .order-confirmation-row-title .discount-message { display: block; font-size: 14px; line-height: 12px; margin-bottom: 5px; font-weight: bold; } .order-confirmation-row .order-confirmation-row-title .warning-message, .customer-data-row .order-confirmation-row-title .warning-message { color: #ffa500; } .order-confirmation-row .order-confirmation-row-title .discount-message, .customer-data-row .order-confirmation-row-title .discount-message { font-style: italic; } .order-confirmation-row .order-confirmation-row-content, .customer-data-row .order-confirmation-row-content { text-align: right; width: 33%; } .order-confirmation-total { background-color: rgba(0, 0, 0, 0.05); border-radius: 0; outline: 1px solid #dedede; padding: 10px; margin: 10px 0; font-weight: bold; } .order-confirmation-total .order-confirmation-row-title { color: #000000; } /* Order Confirmation */ .order-confirmation { padding: 10px; background: #f8f8f8; border-radius: 0; border: 1px solid #dedede; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); font-weight: bold; } /* Register Account*/ .account-box { float: left; width: 33%; } /* Login */ #login { width: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border: 1px solid #dedede; border-radius: 0; background: #f8f8f8; overflow: hidden; margin: 10px; } .login-content { margin: 10px; } .login-bar { height: 60px; width: 100%; background: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .login-bar { height: 40px; } } .login-next { float: right; width: 100%; height: 60px; border: none; border-radius: 0; background: #ff9802; color: #f8f8f8; text-align: right; font-weight: bold; font-size: 18px; line-height: 60px; text-transform: none; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } .login-next:active { background: #ff9802; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .login-next:focus { outline: none; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .login-next { height: 40px; line-height: 40px; } } .login-next-icon { float: right; height: 60px; font-size: 32px; line-height: 60px; color: #f8f8f8; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .login-next-icon { height: 40px; line-height: 40px; } } /* Checkout */ .column-1 { float: left; width: 100%; } .column-2 { float: left; width: 50%; } .column-3 { float: left; width: 33.33%; } .column-1, .column-2, .column-3 { /* Responsive */ } @media only screen and (max-aspect-ratio: 13/9) { .column-1, .column-2, .column-3 { width: 100%; } } .checkout-box { float: left; width: 33.33%; /* Responsive */ } .checkout-box p { margin: 0; padding: 0 0 10px; } @media only screen and (max-aspect-ratio: 13/9) { .checkout-box { width: 100%; } } .checkout-button { width: 100%; height: 60px; background: #000000; } .checkout-pickup, .checkout-with-account, .checkout-without-account, .create-account { width: auto; overflow: hidden; border-radius: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border: 1px solid #dedede; background: #f8f8f8; margin: 10px; } .checkout-pickup h2, .checkout-with-account h2, .checkout-without-account h2, .create-account h2 { margin: 10px 10px 0; } .checkout-pickup p, .checkout-with-account p, .checkout-without-account p, .create-account p { margin: 0 10px 10px; } .login-input, .checkout-input, .newsletter-input { height: 38px; width: 100%; margin: 3px 0; padding: 0; border-radius: 0; border: none; outline: 1px solid #dedede; background: #ebebeb; font-size: 14px; text-indent: 10px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .login-input, .checkout-input, .newsletter-input { height: 32px; text-indent: 5px; font-size: 12px; } } .login-input:focus, .checkout-input:focus, .newsletter-input :focus { outline-offset: 0; box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.15); } @media only screen and (min-height: 1919px) and (min-width: 1079px) { .cms-section { height: 1820px; } } .cms-section[class*="4"] .row { height: calc(25%) !important; } .cms-section[class*="3"] .row { height: calc(33.333333333333336%) !important; } .cms-section[class*="2"] .row { height: calc(50%) !important; } .cms-section[class*="1"] .row { height: 100% !important; } .cms-section .webnode-block { box-sizing: border-box; } .cms-section .webnode-block, .cms-section .webnode-image, .cms-section img { display: block; height: 100%; max-width: 100%; } .cms-section .webnode-block img { width: 100%; } .cms-section .row { width: 100%; float: left; overflow-y: hidden; } .cms-section .row .webnode-block { width: 100%; float: left; text-align: center; overflow: hidden; } .cms-section .row-2 .webnode-block { width: calc(50%); } .cms-section .row-3 .webnode-block { width: calc(33.333333333333336%); } .cms-section .row-4 .webnode-block { max-width: calc(25%); } /* *** keyboard dark theme *** for when jQuery UI themes are not being used See http://jsfiddle.net/Mottie/6dmqhLvh/ */ .ui-keyboard span { font-size: calc(1em); } .ui-keyboard-button { height: calc(3em); line-height: calc(1em); min-width: calc(3em); margin: .2em; cursor: pointer; } /* increased specificity to override repositioning style */ div.ui-keyboard button.ui-keyboard-button.ui-keyboard-actionkey>span { position: static; font-size: calc(1.5em); } .ui-keyboard { /* adjust overall keyboard size using "font-size" */ font-size: 14px; text-align: center; background: #282828; border-radius: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); padding: 4px; padding: .3em; position: absolute; left: 25px; top: 25px; z-index: 99; /* include the following setting to place the keyboard at the bottom of the browser window */ width: 99%; min-height: 250px!important; left: 0px; top: unset!important; bottom: 0px; white-space: nowrap; overflow-x: auto; } .ui-keyboard-has-focus { z-index: 99; } .ui-keyboard-button { border: 1px solid #404040; padding: 0 0.5em; margin: 1px; min-width: 3em; height: 3em; line-height: 3em; vertical-align: top; font-family: Helvetica, Arial, sans-serif; color: #eee; text-align: center; border-radius: 5px; -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5); background: #444; background-image: -webkit-linear-gradient(-90deg, #444444 0%, #333333 100%); background-image: linear-gradient(-90deg, #444444 0%, #333333 100%); cursor: pointer; overflow: hidden; -moz-user-focus: ignore; } .ui-keyboard-button.ui-state-hover { background: #ddd; background-image: -webkit-linear-gradient(-90deg, #555555 0%, #5f5f5f 100%); background-image: linear-gradient(-90deg, #555555 0%, #5f5f5f 100%); } .ui-keyboard-button:not([disabled]):hover { background: #eee; background-image: -webkit-linear-gradient(-90deg, #4f4f4f 0%, #444444 100%); background-image: linear-gradient(-90deg, #4f4f4f 0%, #444444 100%); } .ui-keyboard-button:not([disabled]):active { background: #ddd; background-image: -webkit-linear-gradient(-90deg, #555555 0%, #5f5f5f 100%); background-image: linear-gradient(-90deg, #555555 0%, #5f5f5f 100%); } .ui-keyboard-button span { display: block; width: 100%; font-size: 1.2em; text-align: center; } /* make action keys extra-wide */ .ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) { min-width: 6em; } .ui-keyboard-button.ui-state-active { color: #000000; background: #b4051f; } .ui-keyboard-space { width: 15em; } .ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) span { font-size: 0.8em; position: relative; } .ui-keyboard-placeholder { color: #888; } /* disabled or readonly inputs, or use input[disabled='disabled'] { color: #f00; } */ .ui-keyboard-nokeyboard { color: #888; border-color: #888; } .ui-keyboard-spacer { display: inline-block; width: 1px; height: 0; cursor: default; } .ui-keyboard-NBSP span, .ui-keyboard-ZWSP span, .ui-keyboard-ZWNJ span, .ui-keyboard-ZWJ span, .ui-keyboard-LRM span, .ui-keyboard-RLM span { font-size: 0.5em; line-height: 1.5em; white-space: normal; } /* combo key styling - toggles diacritics on/off */ .ui-keyboard-button.ui-keyboard-combo.ui-state-default { -webkit-box-shadow: 1px 1px 3px 0 rgba(213, 133, 18, 0.5); box-shadow: 1px 1px 3px 0 rgba(213, 133, 18, 0.5); border-color: #d58512; } .ui-keyboard-button.ui-keyboard-combo.ui-state-active { -webkit-box-shadow: 1px 1px 3px 0 rgba(38, 154, 188, 0.5); box-shadow: 1px 1px 3px 0 rgba(38, 154, 188, 0.5); border-color: #269abc; } /* (in)valid inputs */ button.ui-keyboard-accept.ui-keyboard-valid-input { -webkit-box-shadow: 1px 1px 3px 0 rgba(57, 132, 57, 0.5); box-shadow: 1px 1px 3px 0 rgba(57, 132, 57, 0.5); border-color: #398439; } button.ui-keyboard-accept.ui-keyboard-valid-input:not([disabled]):hover { border-color: #4cae4c; } button.ui-keyboard-accept.ui-keyboard-invalid-input { -webkit-box-shadow: 1px 1px 3px 0 rgba(172, 41, 37, 0.5); box-shadow: 1px 1px 3px 0 rgba(172, 41, 37, 0.5); border-color: #ac2925; } button.ui-keyboard-accept.ui-keyboard-invalid-input:not([disabled]):hover { border-color: #d43f3a; } /* unlocked icon (keyboard enabled) */ button.ui-keyboard-toggle span { width: .9em; height: .9em; display: inline-block; background-repeat: no-repeat; background-position: center center; background-size: contain; /* dark theme unlocked icon - fill: #eee */ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTguNyw0LjRINy41SDUuMHYtMS45YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40LDAtMi41LDEuMS0yLjUsMi41djEuOWgxLjIgdi0xLjljMC0wLjcsMC42LTEuMiwxLjItMS4yczEuMiwwLjYsMS4yLDEuMnYxLjljLTAuNywwLTEuMiwwLjYtMS4yLDEuMlY4LjggYzAsMC43LDAuNiwxLjIsMS4yLDEuMmg1LjBDOS40LDEwLDEwLDkuNCwxMCw4LjhWNS42QzEwLDUuMCw5LjQsNC40LDguOCw0LjR6IE02LjYsNy40djEuMCBjMCwwLjItMC4xLDAuMy0wLjMsMC4zUzYuMCw4LjYsNi4wLDguNFY3LjRjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zLDAuMy0wLjYsMC42LTAuNiBTNi45LDYuNiw2LjksNi45QzYuOSw3LjEsNi44LDcuMyw2LjYsNy40eiIvPjwvc3ZnPg=='); } /* locked icon (keyboard disabled) */ button.ui-keyboard-toggle.ui-keyboard-disabled span { /* dark theme locked icon - fill: #eee */ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTcuNCA0LjRWMi41YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40IDAtMi41IDEuMS0yLjUgMi41djEuOSBjLTAuNyAwLTEuMiAwLjUtMS4yIDEuMnYzLjFDMS4zIDkuNCAxLjggMTAgMi41IDEwaDQuOWMwLjcgMCAxLjItMC42IDEuMi0xLjJWNS42IEM4LjcgNC45IDguMSA0LjQgNy40IDQuNHogTTUuMyA3LjR2MS4wYzAgMC4yLTAuMSAwLjMtMC4zIDAuM2MtMC4yIDAtMC4zLTAuMS0wLjMtMC4zVjcuNCBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zIDAuMy0wLjYgMC42LTAuNmMwLjMgMCAwLjYgMC4zIDAuNiAwLjYgQzUuNiA3LjEgNS41IDcuMyA1LjMgNy40eiBNNi4yIDQuNEgzLjdWMi41YzAtMC43IDAuNS0xLjIgMS4yLTEuMmMwLjcgMCAxLjIgMC42IDEuMiAxLjIgVjQuNHoiLz48L3N2Zz4='); } .ui-keyboard.ui-keyboard-disabled button:not(.ui-keyboard-toggle), .ui-keyboard.ui-keyboard-disabled input { opacity: 0.5; } /*** Alt-Keys Popup extension ***/ /* clickable overlay on top of keyboard to hide the popup */ .ui-keyboard-overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); } /* the actual popup styling, class names from the css.container option are also added */ .ui-keyboard-popup { display: inline-block; /* default buttons are 2em wide + .1em margin on either side (set in .ui-keyboard-button definition); so use multiples of 2.2em for a max-width if you don't want any extra white space on the sides, e.g. 5 buttons * 2.2em = 11em, 6 buttons * 2.2em = 13.2em, etc */ max-width: 22em; /* 10 buttons */ } /*** Caret extension definition ***/ /* margin-top => is added to the caret height (top & bottom) */ .ui-keyboard-caret { background: #c00; width: 1px; margin-top: 3px; } /*** Extender keyboard extension ***/ div.ui-keyboard-extender { margin-left: 5px; margin-right: 10px; } button.ui-keyboard-extender span { width: .9em; height: .9em; display: inline-block; margin-bottom: 3px; background-repeat: no-repeat; background-position: center center; background-size: contain; /* dark theme extender icon - fill: #eee */ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6I2VlZSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2VlZSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+'); } /* Style Cart */ /* Cart */ #cart-wrapper { /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #cart-wrapper { position: absolute; width: calc(100% - 100px); height: calc(100% - 215px); } } .cart-content { overflow: hidden; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-content { width: 100%; height: 100%; } } .cart-products { margin: 0 0 25px 0; padding: 0; overflow-y: auto; /* Responsive */ } .cart-products::-webkit-scrollbar { display: none; } @media only screen and (min-height: 1079px) and (min-width: 1919px) { .cart-products { max-height: 620px; } } @media only screen and (min-height: 1919px) and (min-width: 1079px) { .cart-products { max-height: 1460px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-products { position: relative; float: left; width: 100%; height: calc(100% - 116px); } } /* Cart Product */ .cart-product { width: auto; height: auto; margin: 0 0 25px; border: 1px solid #dedede; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border-radius: 0; background: #f8f8f8; list-style: none; overflow: hidden; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product { height: 120px; } } /* Cart Product Image */ .cart-product-image { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; float: left; width: 250px; height: 185px; border-right: 1px solid #dedede; background: #f8f8f8; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-image { height: 120px; width: 120px; } } .cart-product-image img { padding: 10px; max-width: 230px; max-height: 160px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-image img { max-width: 110px; max-height: 110px; } } .cart-product-image .product-icons img { width: 80%; height: 80%; padding: 10%; } /* Cart Product Content */ .cart-product-content { margin: 0; padding: 0; width: auto; } /* Cart Product Information */ .cart-product-information { position: relative; margin: 0; padding: 0; height: 125px; width: auto; overflow: hidden; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-information { height: 80px; } } .cart-product-information h3 { color: #000000; margin: 20px 20px 0 20px; font-size: 22px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-information h3 { font-size: 20px; } } .cart-product-information .product-second-description, .cart-product-information .product-discount-description { display: block; margin: 0 20px 0 20px; font-weight: bold; } .cart-product-information .product-second-description { color: #000000; font-size: 16px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-information .product-second-description { font-size: 14px; } } .cart-product-information .product-discount-description { color: #000000; font-size: 16px; } .cart-product-information .order-restriction { color: #a94442; margin-left: 20px; } /* Cart Product Navigation */ .cart-product-navigation { height: 60px; background: #f8f8f8; color: #000000; border-top: 1px solid #dedede; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-navigation { height: 40px; } } /* Cart Quantity*/ .cart-quantity { margin-left: 20px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-quantity { line-height: 40px; font-size: 18px; } } /* Cart Product Price & Total */ .cart-product-price, .cart-product-discount, .cart-product-total { display: inline-block; padding-right: 20px; line-height: 60px; font-weight: bold; font-size: 20px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-product-price, .cart-product-discount, .cart-product-total { line-height: 40px; font-size: 18px; } } .cart-product-price, .cart-product-discount { margin-left: 20px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { .cart-product-price, .cart-product-discount { margin-left: 0; } } span.cart-label-price { color: #000000; } span.cart-label { color: #000000; } span.product-listprice { text-decoration: line-through; font-weight: normal; margin-right: 5px; } span.cart-label .price-incl, span.cart-label-price .price-incl { font-size: 75%; color: #e6e6e6; } .cart-remove { position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; font-size: 36px; cursor: pointer; background: #f8f8f8; background-image: url(/images/icon-delete.png); background-size: 85%; background-position: center; background-repeat: no-repeat; border-radius: 0; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .cart-remove:active { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } /* Cart Checkout */ .cart-checkout { width: auto; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border-radius: 0; border: 1px solid #dedede; background: #f8f8f8; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-checkout { width: 100%; float: left; } } /* Cart Checkout Bar */ .cart-checkout-bar { height: 60px; background: #0095db; /* Responsive */ } .cart-checkout-bar .pickup h2 { float: left; color: #ffffff; } .cart-checkout-bar #product-detail-navigation-order { background: #0095db; color: #ffffff; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-checkout-bar { height: 40px; } } .cart-checkout-bar .left #product-detail-navigation-order { padding: 0 50px 0 10px; } /* Cart Checkout Arrow */ .cart-checkout-arrow { float: right; padding-right: 25px; height: 100%; /* Arrow */ } .cart-checkout-arrow:after { content: ""; position: absolute; top: auto; left: auto; width: 0; height: 0; border-bottom: 30px solid transparent; border-left: 30px solid #dfdfdf; border-top: 30px solid transparent; margin-left: 25px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-checkout-arrow:after { border-bottom: 20px solid transparent; border-left: 20px solid #dfdfdf; border-top: 20px solid transparent; } } /* Cart Checkout Price */ .cart-checkout-price { font-size: 30px; font-weight: bold; color: #000000; margin: 10px 20px; text-align: right; /* Responsive */ /* Price Incl BTW */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-checkout-price { font-size: 24px; } } .cart-checkout-price .price-incl { display: block; font-size: 20px; } /* Cart Checkout Price Text */ .cart-checkout-price-text { font-size: 24px; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-checkout-price-text { font-size: 18px; } } /* Style Checkout Pages */ .content-wrapper[class*='stacked'] .form-box-item { margin: 25px 0; } #popup .search-stores { float: left; padding-right: 10px; } #popup .search-stores .stores-scroll-section { background-color: #ffffff; color: #000000; border-right: 1px solid #dedede; height: 40vh; overflow-y: scroll; /* Scrollbar Styling */ /* Scrollbar Thumb Styling */ /* Store */ } #popup .search-stores .stores-scroll-section::-webkit-scrollbar { background-color: #fafafa; } #popup .search-stores .stores-scroll-section::-webkit-scrollbar-thumb { background-color: #f0f0f0; border-radius: 0; } #popup .search-stores .stores-scroll-section .selected { background: #f7f7f7; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #popup .search-stores .stores-scroll-section .selected h4 { color: #000000; } #popup .search-stores .stores-scroll-section .store { display: block; position: relative; width: auto; padding: 10px 10px 5px 10px; border-bottom: 1px solid #e6e6e6; font-size: 16px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #popup .search-stores .stores-scroll-section .store { font-size: 14px; } } #popup .search-stores .stores-scroll-section .store:last-child { padding: 10px; border-bottom: none; } #popup .search-stores .stores-scroll-section .store.selected-store { background-color: #e6e6e6; } #popup .search-stores .stores-scroll-section .store img { float: left; width: 100%; max-height: 100px; object-fit: cover; margin-bottom: 5px; } #popup .search-stores .stores-scroll-section .store h4 { font-weight: bold; margin: 0; } #popup .search-stores .stores-scroll-section .store a { display: none; } #popup .search-stores span { position: relative; padding: 0px 0px 20px 0px; display: block; margin-bottom: -30px; } #popup .search-stores span i.icon_location_arrow { font-size: 20px; color: #000000 !important; position: absolute; right: 80px; top: 40px; } #popup .search-stores span input[type="text"] { width: 85%; height: 35px; padding-left: 10px; } #popup .search-stores span .btn-default { height: 40px; width: 9%; float: right; top: -40px; padding: 0; } #popup .search-stores span .btn-default i { left: -5px; } #popup .search-stores span form.storepicker-filters { overflow: hidden; width: 100%; height: 40px; } #popup .search-stores span form.storepicker-filters .form-group { padding-left: 0; padding-right: 15px; width: auto; float: left; margin-bottom: 0; } #popup .search-stores span form.storepicker-filters .form-group input[type="checkbox"] { margin-right: 5px; } #popup span label { display: inline; } #popup #map-canvas { margin-top: 0px; } #popup .alternative-store-select { clear: both; display: block; bottom: 20px; position: absolute; } #popup .search-stores { float: left; width: 45%; } #popup #map-canvas { height: 100%; float: right; width: 53%; } /* Form */ .form-box h2 { margin: 20px; } .form-box button { float: right; height: 60px; width: 100%; text-align: right; border: none; background: #0095db; color: #f8f8f8; font-size: 18px; font-weight: bold; line-height: 60px; text-transform: none; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } .form-box button:active { background: #0095db; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .form-box button:focus { outline: none; } .form-box button .icon { float: right; font-size: 32px; line-height: 60px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .form-box button .icon { line-height: 40px; font-size: 28px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .form-box button { height: 40px; line-height: 40px; font-size: 16px; } } /* Form Split Left Alignment */ .form-split-left { display: inline-block; width: 49%; } /* Form Split Right Alignment */ .form-split-right { float: right; display: inline-block; width: 50%; } .form-content { margin: 20px; } .form-content input { margin-bottom: 20px; } /* Order Confirmation Row */ .order-confirmation-row, .customer-data-row { width: 100%; min-height: 30px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); line-height: 30px; display: flex; align-items: center; /* Order Confirmation Row Title */ /* Order Confirmation Row Content */ /* Product Confirmation Row Title */ /* Product Confirmation Row Content */ } .order-confirmation-row .customer-data-row-title, .customer-data-row .customer-data-row-title { float: left; width: 25%; } .order-confirmation-row .order-confirmation-row-content, .customer-data-row .order-confirmation-row-content, .order-confirmation-row .customer-data-row-content, .customer-data-row .customer-data-row-content { width: 75%; float: left; font-weight: bold; font-size: 18px; } .order-confirmation-row .order-confirmation-row-content .price-excl-from, .customer-data-row .order-confirmation-row-content .price-excl-from, .order-confirmation-row .customer-data-row-content .price-excl-from, .customer-data-row .customer-data-row-content .price-excl-from, .order-confirmation-row .order-confirmation-row-content .price-from, .customer-data-row .order-confirmation-row-content .price-from, .order-confirmation-row .customer-data-row-content .price-from, .customer-data-row .customer-data-row-content .price-from { font-size: 14px; opacity: 0.75; } .order-confirmation-row .order-confirmation-row-content .btw-incl, .customer-data-row .order-confirmation-row-content .btw-incl, .order-confirmation-row .customer-data-row-content .btw-incl, .customer-data-row .customer-data-row-content .btw-incl { line-height: 10px; } .order-confirmation-row .order-confirmation-row-content .price-from, .customer-data-row .order-confirmation-row-content .price-from, .order-confirmation-row .customer-data-row-content .price-from, .customer-data-row .customer-data-row-content .price-from { display: block; line-height: 25px; } .order-confirmation-row .order-confirmation-row-content .price-incl, .customer-data-row .order-confirmation-row-content .price-incl, .order-confirmation-row .customer-data-row-content .price-incl, .customer-data-row .customer-data-row-content .price-incl { font-size: 14px; line-height: 14px; display: block; opacity: 0.5; } .order-confirmation-row .order-confirmation-row-title, .customer-data-row .order-confirmation-row-title { float: left; width: 66%; /* Product Row Message */ /* Product Row Warning Message */ /* Product Row Discount Message */ } .order-confirmation-row .order-confirmation-row-title .warning-message, .customer-data-row .order-confirmation-row-title .warning-message, .order-confirmation-row .order-confirmation-row-title .discount-message, .customer-data-row .order-confirmation-row-title .discount-message { display: block; font-size: 14px; line-height: 12px; margin-bottom: 5px; font-weight: bold; } .order-confirmation-row .order-confirmation-row-title .warning-message, .customer-data-row .order-confirmation-row-title .warning-message { color: #ffa500; } .order-confirmation-row .order-confirmation-row-title .discount-message, .customer-data-row .order-confirmation-row-title .discount-message { font-style: italic; } .order-confirmation-row .order-confirmation-row-content, .customer-data-row .order-confirmation-row-content { text-align: right; width: 33%; } .order-confirmation-total { background-color: rgba(0, 0, 0, 0.05); border-radius: 0; outline: 1px solid #dedede; padding: 10px; margin: 10px 0; font-weight: bold; } .order-confirmation-total .order-confirmation-row-title { color: #000000; } /* Order Confirmation */ .order-confirmation { padding: 10px; background: #f8f8f8; border-radius: 0; border: 1px solid #dedede; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); font-weight: bold; } .order-confirmation h2 { margin: 0; } /* Register Account*/ .account-box { float: left; width: 33%; } /* Login */ #login { width: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border: 1px solid #dedede; border-radius: 0; background: #ffffff; overflow: hidden; margin: 10px; } .login-content { margin: 10px; } .login-bar { height: 60px; width: 100%; background: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .login-bar { height: 40px; } } .login-next { float: right; width: 100%; height: 60px; border: none; border-radius: 0; background: #0095db; color: #f8f8f8; text-align: right; font-weight: bold; font-size: 18px; line-height: 60px; text-transform: none; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } .login-next:active { background: #0095db; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .login-next:focus { outline: none; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .login-next { height: 40px; line-height: 40px; } } .login-next-icon { float: right; height: 60px; font-size: 32px; line-height: 60px; color: #f8f8f8; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .login-next-icon { height: 40px; line-height: 40px; } } /* Checkout */ .column-1 { float: left; width: 100%; } .column-2 { float: left; width: 50%; } .column-3 { float: unset; width: 33.33%; margin: auto; } .column-1, .column-2, .column-3 { /* Responsive */ } @media only screen and (min-height: 1919px) and (min-width: 1079px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .column-1, .column-2, .column-3 { width: 100%; } } .checkout-box { float: left; width: 33.33%; /* Responsive */ } .checkout-box p { margin: 0; padding: 0 0 10px; } @media only screen and (min-height: 1919px) and (min-width: 1079px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .checkout-box { width: 100%; } } .checkout-button { width: 100%; height: 60px; background: #000000; } .checkout-order-option, .checkout-pickup, .checkout-with-account, .checkout-without-account, .create-account, .account-overview, .account-details { width: auto; overflow: hidden; border-radius: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border: 1px solid #dedede; background: #ffffff; margin: 10px; } .checkout-order-option h2, .checkout-pickup h2, .checkout-with-account h2, .checkout-without-account h2, .create-account h2, .account-overview h2, .account-details h2 { margin: 20px; } .checkout-order-option p, .checkout-pickup p, .checkout-with-account p, .checkout-without-account p, .create-account p, .account-overview p, .account-details p { margin: 0 10px 10px; } .checkout-order-option .account-overview-label, .checkout-pickup .account-overview-label, .checkout-with-account .account-overview-label, .checkout-without-account .account-overview-label, .create-account .account-overview-label, .account-overview .account-overview-label, .account-details .account-overview-label { width: 100px; float: left; } .create-account .field-validation-error { margin: 0 0 20px 0; } .checkout-order-option p { margin: 20px; } .checkout-pickup h2 { color: #000000; min-height: 56px; } .checkout-pickup button { position: relative; height: auto; padding: 0; } .checkout-pickup button .order-button-label { width: 100%; background-color: #0095db; color: #ffffff; float: unset; text-align: left; padding-left: 10px; } .checkout-pickup button .order-button-text { width: 100%; background-color: #ffffff; color: #000000; float: left; text-align: left; padding-left: 10px; line-height: 40px; } .checkout-pickup button .order-button-text span { font-size: inherit !important; font-family: inherit !important; color: inherit !important; } .login-input, .checkout-input { height: 38px; width: 100%; margin: 3px 0; padding: 0; border-radius: 0; border: none; outline: 1px solid #dedede; background: #ffffff; font-size: 14px; text-indent: 10px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .login-input, .checkout-input { height: 32px; text-indent: 5px; font-size: 12px; } } .login-input:focus, .checkout-input:focus { outline-offset: 0; box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.15); } .content-wrapper-text-warning .text-warning-icon { float: left; width: 50px; margin-top: -3px; } /* --- Import References --- */ /* Steps Desktop*/ #checkout-steps { margin-bottom: 30px; } #checkout-steps ul { position: relative; width: auto; height: 40px; padding-inline-start: 10px; } #checkout-steps ul li { position: relative; display: inline-block; height: 40px; width: 10.5%; padding: 0px 5px 0px 10px; margin-left: 13px; line-height: 37px; color: #ffffff; font-size: 16px; text-align: center; background-color: #d3d3d3; } #checkout-steps ul li i { position: absolute; top: 16px; right: 5px; display: none; font-size: 10px; color: #ffffff; } #checkout-steps ul li a { top: 2px; left: 30px; color: #f8f8f8; font-weight: 500; } @media screen and (max-width: 1210px) { #checkout-steps ul li { width: 11.2%; } } #checkout-steps ul li.checkout-step-done i { display: block; } #checkout-steps ul li.checkout-step-begin-end:first-child:after, #checkout-steps ul li.checkout-step:after, #checkout-steps ul li.checkout-step-active:after { position: absolute; right: -14px; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: #f5f5f5, 50%; content: ""; } @media screen and (max-width: 1005px) { #checkout-steps ul li.checkout-step-begin-end:first-child:after, #checkout-steps ul li.checkout-step:after, #checkout-steps ul li.checkout-step-active:after { display: none; } } #checkout-steps ul li.checkout-step-begin-end:last-child:before, #checkout-steps ul li.checkout-step:before, #checkout-steps ul li.checkout-step-active:before { position: absolute; left: 0; width: 0; height: 0; margin: 0px 0px 0 0px; border-top: 20px solid transparent; border-left: 15px solid #f5f5f5; border-bottom: 20px solid transparent; content: ""; } #checkout-steps ul li.checkout-step-begin-end:first-child { padding-left: 10px; margin-left: 0; } #checkout-steps ul li.checkout-step-begin-end:last-child { padding-right: 10px; } #checkout-steps ul li.checkout-step { background-color: #d3d3d3; } #checkout-steps ul li.checkout-step:after { border-left: 15px solid #d3d3d3; } @media screen and (max-width: 1024px) { #checkout-steps ul li.checkout-step { height: 3px; } } #checkout-steps ul li.checkout-step-active { background-color: #0095db; } #checkout-steps ul li.checkout-step-active a { font-weight: 700; color: #ffffff; } #checkout-steps ul li.checkout-step-active:after { border-left: 15px solid #0095db; } #checkout-steps ul li.checkout-step-done { position: relative; background-color: #636060; } #checkout-steps ul li.checkout-step-done:after { border-left: 15px solid #636060; } @media screen and (max-width: 1024px) { #checkout-steps ul li.checkout-step-done:after { border: 0px transparent solid; } } #checkout-steps ul li.checkout-step-done a { color: #ffffff; } /* Steps Mobile */ #steps-mobile { display: none; padding: 0 10px; width: 100%; margin-bottom: 50px; /* End #steps ul*/ } @media screen and (max-width: 500px) { #steps-mobile { padding-bottom: 15px; } } #steps-mobile ul, #steps-mobile li { padding: 0; margin: 0; list-style: none; } #steps-mobile ul { display: table; width: 100%; /* End #steps li*/ } #steps-mobile ul li { position: relative; display: table-cell; /* End .step*/ } #steps-mobile ul li:first-child { width: 50px; } @media screen and (max-width: 500px) { #steps-mobile ul li:first-child { width: 40px; } } #steps-mobile ul li:first-child .step { /* Hide line before first step*/ } #steps-mobile ul li:first-child .step:before { content: none; } #steps-mobile ul li:first-child .step:after { padding-left: 10px; } #steps-mobile ul li:last-child .step:after { position: relative; right: 15px; } #steps-mobile ul li a { font-weight: 400; text-transform: none; } #steps-mobile ul li .step { float: right; width: 40px; height: 40px; border: 1px solid; font-size: 15px; line-height: 42px; color: #f8f8f8; text-align: center; background-color: #b4051f; border-color: #b4051f; } @media screen and (max-width: 500px) { #steps-mobile ul li .step { width: 30px; height: 30px; font-size: 13px; line-height: 31px; } } #steps-mobile ul li .step:before { position: absolute; top: 50%; right: 42px; height: 4px; left: 0px; display: block; cursor: default; background-color: #b4051f; content: ''; } @media screen and (max-width: 500px) { #steps-mobile ul li .step:before { right: 32px; } } #steps-mobile ul li .step:after { display: block; min-width: 120px; font-size: 13px; line-height: 15px; color: #ebebeb; content: attr(data-desc); transform: translate(-42px, 10px); } @media screen and (max-width: 500px) { #steps-mobile ul li .step:after { display: none; } } #steps-mobile ul li .step.active { font-weight: 600; color: #000000; background: white; border: #000000 2px solid; } #steps-mobile ul li .step.active:before { background: linear-gradient(to right, #000000 0%, #000000 100%); } #steps-mobile ul li .step.active:after { color: #000000; font-weight: 600; } #steps-mobile ul li .step.done { color: white; background-color: #000000; border-color: #000000; } #steps-mobile ul li .step.done:after { color: #000000; } #steps-mobile ul li .step.done:before { background-color: #000000; } /* End #steps*/ /* Product Detail */ /* Next & Prev Button */ #next-button, #prev-button { position: fixed; top: 50%; z-index: 1; height: 100px; width: 50px; border: 1px solid #dedede; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); background: #b4051f; color: #3c3c3bf; text-align: center; font-size: 48px; line-height: 100px; cursor: pointer; opacity: 1; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Next & Prev Button active */ /* Next & Prev Button Disabled State */ /* Responsive */ } #next-button:active, #prev-button:active { box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); color: #1a1a1a; -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #next-button[disabled], #prev-button[disabled] { opacity: 0; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #next-button, #prev-button { top: 50%; margin-top: 75px; } } @media only screen and (max-height: 801px) and (max-width: 1281px) { #next-button, #prev-button { top: 50%; } } /* Next Button Positioning */ #next-button { right: 0; border-radius: 0 0 0 0; background: #ff9802; } /* Previous Button Positioning */ #prev-button { left: 0; border-radius: 0 0 0 0; background: #ff9802; } /* Product Detail Page */ #product-detail { position: fixed; left: 10%; top: 50%; z-index: 9; width: 80%; height: 550px; margin-top: -275px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border-radius: 0; overflow: hidden; background: #ffffff; /* Responsive */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { #product-detail { height: 1150px; margin-top: -550px; } } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail { height: 820px; margin-top: -400px; } } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail { height: 600px; margin-top: -300px; } } /* Product Detail Page Image */ #product-detail-image { position: relative; float: left; width: 33.33%; height: 100%; overflow: hidden; background: #ffffff; border-right: 1px solid #dedede; /* Responsive */ /* Product Brand Image */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { #product-detail-image { width: 100%; height: 550px; } } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-image { width: 100%; height: 370px; } } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-image { width: 275px; height: 300px; position: absolute; right: 0; z-index: 8; } } #product-detail-image .product-discount-content { position: absolute; top: 2%; right: 2%; } @media screen and (min-width: 969px) { #product-detail-image .product-discount-content { right: 9%; } } #product-detail-image .product-discount-content img { display: inline-block; position: relative; } #product-detail-image #product-detail-image-brand { position: absolute; bottom: 10px; left: 10px; display: flex; align-items: center; height: 80px; width: 80px; overflow: hidden; border-radius: 0; border: 1px solid #dedede; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); background: #ffffff; /* Responsive */ } #product-detail-image #product-detail-image-brand img { max-height: 74px; max-width: 74px; margin: 3px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-image #product-detail-image-brand { width: 50px; height: 50px; } } /* Product Detail Page Content */ #product-detail-content { float: right; width: 66.66%; overflow: hidden; /* Responsive */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { #product-detail-content { width: 100%; } } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-content { width: 100%; } } /* Product Detail Header Content */ #product-detail-header-content { position: relative; height: 150px; overflow: hidden; background: #ffffff; /* Price */ /* Price To (Discount) */ /* Price From (Discount) */ /* Price Excl BTW*/ /* Price Excl BTW From*/ /* Price Incl BTW */ /* Responsive */ } #product-detail-header-content .price, #product-detail-header-content .price-to { font-size: 32px; font-weight: bold; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content .price, #product-detail-header-content .price-to { display: block; position: relative; right: 0; width: 100%; float: left; margin-left: 10px; } } #product-detail-header-content .price-to { top: 30px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content .price-to { top: 0; } } #product-detail-header-content .price-from { font-weight: bold; font-size: 18px; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content .price-from { display: block; position: relative; right: 0; width: 100%; float: left; margin-left: 10px; } } #product-detail-header-content .price-excl { font-weight: bold; font-size: 32px; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content .price-excl { display: block; position: static; margin-left: 10px; } } #product-detail-header-content .price-excl-from { font-size: 18px; } #product-detail-header-content .price-incl { font-size: 20px; font-weight: bold; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content .price-incl { position: static; margin-left: 10px; } } #product-detail-header-content .price, #product-detail-header-content .price-to, #product-detail-header-content .price-from, #product-detail-header-content .price-excl, #product-detail-header-content .price-incl { position: relative; float: right; right: unset; top: unset; margin: 5px 10px; } @media only screen and (min-height: 1919px) and (min-width: 1079px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-content { float: left; width: 100%; } } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content { float: left; width: 100%; height: 300px; } } /* Product Detail Header Content Wrapper */ #product-detail-header-content-wrapper { height: 95px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content-wrapper { height: 255px; } } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-content-wrapper { height: 105px; } } #product-detail-header-content-wrapper .btw-incl, #product-detail-header-content-wrapper .btw-both, #product-detail-header-content-wrapper .product-listprice { position: relative; float: right; } #product-detail-header-content-wrapper .btw-incl, #product-detail-header-content-wrapper .btw-both { max-width: 20%; } #product-detail-header-content-wrapper .product-listprice { max-width: 15%; padding-top: 14px; font-size: 20px; float: right; text-decoration: line-through; margin-right: 15px; } /* Product Detail Title */ #product-detail-header-content-title { width: 70%; margin: 5px 0 0 10px; font-size: 32px; font-weight: bold; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: unset; float: left; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px) { #product-detail-header-content-title { margin-right: 285px; width: auto; font-size: 28px; display: block; -ms-text-overflow: clip; -o-text-overflow: clip; text-overflow: clip; white-space: normal; } } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-content-title { margin-right: 200px; width: auto; font-size: 22px; display: block; -ms-text-overflow: clip; -o-text-overflow: clip; text-overflow: clip; white-space: normal; } } /* Product Detail Subtitle */ #product-detail-header-content-subtitle { display: block; width: 75%; overflow: hidden; margin: 0 10px 0; font-size: 18px; font-weight: bold; white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-content-subtitle { margin-right: 285px; width: auto; -ms-text-overflow: clip; -o-text-overflow: clip; text-overflow: clip; white-space: normal; } } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-content-subtitle { font-size: 16px; } } /* Tab Container */ #product-detail-header-content-tabs { float: left; position: relative; margin-bottom: 1px; /* Tab Styling */ /* Tab Active Color */ } #product-detail-header-content-tabs .product-detail-header-content-tabs-tab { float: left; margin: 0 0 0 10px; padding: 15px 10px; border-radius: 0 0 0 0; background: #ffffff; color: #000000; border: 1px solid #dedede; border-bottom: none; font-size: 20px; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Tab Touch Color */ /* Responsive */ } #product-detail-header-content-tabs .product-detail-header-content-tabs-tab:active { background: #ffffff; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-content-tabs .product-detail-header-content-tabs-tab { position: relative; z-index: 9; padding: 10px; font-size: 16px; } } #product-detail-header-content-tabs .active>a>.product-detail-header-content-tabs-tab { background: #f8f8f8; color: #000000; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } /* Tabs */ .tabs { width: 100%; display: inline-block; } .tabs .tab-links { margin: 0; padding: 0; float: left; display: inline; overflow: hidden; } .tabs .tab-links li { padding: 0; margin: 0; float: left; list-style: none; } .tabs .tab-links a { padding: 0; display: inline-block; } .tabs .tab-links a:active { text-decoration: none; } .tab-content #productInfo ul { margin: 20px; padding: 0; } .tab-content #productInfo ul li { list-style: none; margin: 0; padding: 0; } .tab-content #productInfo ul li span.tab-product-informatie-description { display: block; float: left; width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab-content #productInfo ul li span.tab-product-informatie-content { display: block; font-weight: bold; } /* Product Detail Tab Content */ #product-detail-header-tab-content { overflow-y: auto; height: 340px; background-color: #ffffff; color: #000000; font-size: 20px; border-top: 1px solid #dedede; /* Responsive */ /* Scrollbar Styling */ /* Scrollbar Thumb Styling */ /* Tab Content */ /* Voorraad Tab*/ /*MEER = MINDER actie*/ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { #product-detail-header-tab-content { float: left; width: 100%; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-tab-content { float: left; width: 100%; height: 260px; font-size: 16px; } } #product-detail-header-tab-content::-webkit-scrollbar { background-color: #fafafa; } #product-detail-header-tab-content::-webkit-scrollbar-thumb { background-color: #f0f0f0; border-radius: 0; } #product-detail-header-tab-content .anatwine-product { font-size: 20px; font-weight: 700; padding-bottom: 20px; } #product-detail-header-tab-content .tab-content { margin: 20px; overflow: hidden; /* Video */ } #product-detail-header-tab-content .tab-content iframe { display: block; width: 534px; height: 300px; border: none; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-tab-content .tab-content iframe { width: 392px; height: 220px; } } #product-detail-header-tab-content #alternative-products { height: 340px; overflow: hidden; /* Init for loading*/ } #product-detail-header-tab-content #alternative-products .section-tab-content-alternative-products { height: 340px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-tab-content #alternative-products .section-tab-content-alternative-products { height: 220px; } } #product-detail-header-tab-content #alternative-products .lSSlideWrapper { height: unset; } #product-detail-header-tab-content #documents .tab-content { margin: 0; overflow: hidden; } #product-detail-header-tab-content #documents .tab-content iframe { width: 100%; height: 340px; float: left; } #product-detail-header-tab-content #availability-map { /* Init for loading & map */ } #product-detail-header-tab-content #availability-map .tab-content { margin: 0 !important; } #product-detail-header-tab-content #availability-map .tab-content #map-canvas { height: 340px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-tab-content #availability-map .tab-content #map-canvas { height: 260px; } } #product-detail-header-tab-content #availability-map .availability-map-stores { position: relative; float: left; overflow-y: auto; width: 300px; height: 340px; background-color: #ffffff; color: #000000; z-index: 10; border-right: 1px solid #dedede; /* Responsive */ /* Scrollbar Styling */ /* Scrollbar Thumb Styling */ /* Store */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-tab-content #availability-map .availability-map-stores { width: 225px; height: 260px; } } #product-detail-header-tab-content #availability-map .availability-map-stores::-webkit-scrollbar { background-color: #fafafa; } #product-detail-header-tab-content #availability-map .availability-map-stores::-webkit-scrollbar-thumb { background-color: #f0f0f0; border-radius: 0; } #product-detail-header-tab-content #availability-map .availability-map-stores .selected { background: #f7f7f7; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #product-detail-header-tab-content #availability-map .availability-map-stores .selected h4 { color: #000000; } #product-detail-header-tab-content #availability-map .availability-map-stores .store { display: block; position: relative; width: auto; padding: 10px 10px 5px 10px; border-bottom: 1px solid #e6e6e6; font-size: 16px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-header-tab-content #availability-map .availability-map-stores .store { font-size: 14px; } } #product-detail-header-tab-content #availability-map .availability-map-stores .store:last-child { padding: 10px; border-bottom: none; } #product-detail-header-tab-content #availability-map .availability-map-stores .store img { float: left; width: 100%; max-height: 100px; object-fit: cover; margin-bottom: 5px; } #product-detail-header-tab-content #availability-map .availability-map-stores .store h4 { font-weight: bold; margin: 0; } #product-detail-header-tab-content table { border-top: 1px solid #dedede; border-collapse: collapse; } #product-detail-header-tab-content th { text-align: left; width: 110px; } #product-detail-header-tab-content td { padding-top: 15px; vertical-align: top; } #product-detail-header-tab-content tr:first-child { border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; } #product-detail-header-tab-content tr { height: 50px; } #product-detail-header-tab-content .meerMinder { background: url("/images/icon-bulk-promotion.png") no-repeat; background-size: contain; height: 40px; width: 60px; padding-right: 20px; float: left; margin-top: 5px; } #product-detail-header-tab-content .discount-aantal { width: 150px; } /* Product Detail Navigation Bar Bottom */ #product-detail-navigation { position: absolute; right: -1px; bottom: 0; width: 66.66%; height: auto; overflow: hidden; background: #ffffff; color: #000000; border-top: 1px solid #dedede; z-index: 10; /* Responsive */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { #product-detail-navigation { width: 100%; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation { width: 100%; height: 40px; } } #product-detail-navigation-close { float: left; height: 100%; cursor: pointer; } #product-detail-navigation-close:active #product-detail-navigation-close-icon { -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #product-detail-navigation-close #product-detail-navigation-close-icon { float: left; display: inline-block; font-size: 48px; line-height: 1.3; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-close #product-detail-navigation-close-icon { line-height: 45px; font-size: 32px; } } #product-detail-navigation-close #product-detail-navigation-close-title { float: left; display: inline-block; padding-right: 25px; line-height: 60px; font-weight: bold; font-size: 20px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-close #product-detail-navigation-close-title { line-height: 40px; font-size: 18px; } } #product-detail-navigation-order, #product-detail-navigation-noOrder { display: block; float: right; height: 100%; padding: 0 0 0 50px; background: #f27021; color: #ffffff; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #product-detail-navigation-order:active, #product-detail-navigation-noOrder:active { color: #ffffff; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #product-detail-navigation-order:active #product-detail-navigation-order-icon, #product-detail-navigation-noOrder:active #product-detail-navigation-order-icon { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } #product-detail-navigation-order #product-detail-navigation-order-icon, #product-detail-navigation-noOrder #product-detail-navigation-order-icon { float: left; display: inline-block; font-size: 36px; line-height: 60px; padding-right: 10px; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-order #product-detail-navigation-order-icon, #product-detail-navigation-noOrder #product-detail-navigation-order-icon { line-height: 40px; font-size: 28px; } } #product-detail-navigation-order #product-detail-navigation-order-title, #product-detail-navigation-noOrder #product-detail-navigation-order-title { float: left; display: inline-block; padding-right: 20px; line-height: 60px; font-weight: bold; font-size: 24px; /* Responsive */ } #product-detail-navigation-order #product-detail-navigation-order-title #product-detail-navigation-close-icon, #product-detail-navigation-noOrder #product-detail-navigation-order-title #product-detail-navigation-close-icon { font-size: 48px; margin-top: 5px; margin-left: -40px; float: left; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-order #product-detail-navigation-order-title, #product-detail-navigation-noOrder #product-detail-navigation-order-title { line-height: 40px; font-size: 20px; padding: 0; } } #product-detail-navigation-order .cart-add-kiosk, #product-detail-navigation-noOrder .cart-add-kiosk { position: relative; width: 40px; height: 40px; margin: 8px 10px 10px 0; } #product-detail-navigation-order .cart-add-kiosk:active, #product-detail-navigation-noOrder .cart-add-kiosk:active, #product-detail-navigation-order .cart-add-kiosk:hover, #product-detail-navigation-noOrder .cart-add-kiosk:hover { -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; background-color: #f27021 !important; } #product-detail-navigation-quantity-wrapper { float: right; padding-right: 20px; height: 100%; /* Responsive*/ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-quantity-wrapper { padding-right: 10px; } } #product-detail-navigation-quantity-wrapper:after { content: none; position: absolute; top: auto; left: auto; width: 0; height: 0; border-bottom: 30px solid transparent; border-left: 30px solid #ffffff; border-top: 30px solid transparent; margin-left: 20px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-quantity-wrapper:after { border-bottom: 20px solid transparent; border-left: 20px solid #ffffff; border-top: 20px solid transparent; margin-left: 10px; } } #product-detail-navigation-quantity-title, .cart-quantity { float: left; display: inline-block; padding-right: 5px; line-height: 60px; font-weight: bold; font-size: 20px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-quantity-title, .cart-quantity { line-height: 40px; font-size: 18px; } } #product-detail-navigation-quantity-add, #product-detail-navigation-quantity-remove, .cart-increment, .cart-decrement { float: left; display: inline-block; margin: 0 5px; font-size: 36px; line-height: 60px; cursor: pointer; color: #f27021; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-quantity-add, #product-detail-navigation-quantity-remove, .cart-increment, .cart-decrement { line-height: 40px; font-size: 28px; } } #product-detail-navigation-quantity-add:active, #product-detail-navigation-quantity-remove:active, .cart-increment:active, .cart-decrement:active { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } /* Matrix Selector Bar*/ #product-detail-navigation-matrix { height: auto; padding-right: 20px; float: left; display: flex; align-items: center; width: 55%; min-height: 60px; /* Responsive */ /* Matrix Title */ /* Matrix Option */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-matrix { height: 40px; } } @media only screen and (min-height: 1919px) and (min-width: 1079px) { #product-detail-navigation-matrix { width: 55%; margin: 10px 0; height: auto; } } #product-detail-navigation-matrix .matrix-title { font-size: 20px; font-weight: bold; padding-right: 5px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #product-detail-navigation-matrix .matrix-title { font-size: 16px; } } #product-detail-navigation-matrix .matrix-option { float: left; margin: 5px; padding: 5px; min-width: 20px; background-color: #cccccc; border-radius: 0; font-weight: bold; text-align: center; } #product-detail-navigation-matrix .matrix-option-available { cursor: pointer; } #product-detail-navigation-matrix .matrix-option-available:active { -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #product-detail-navigation-matrix .matrix-option-not-available { background-color: red; cursor: not-allowed; } #product-detail-navigation-matrix .selected-matrix-option { background-color: #ffffff; -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .cms-section .webnode-block { box-sizing: border-box; } /* Reference color properties */ /* Header Button Icon Cart */ .header-button-icon-cart { background-image: url(/images/icon-cart.png); } /* Unique Selling Point Item List*/ .header-selling-point-item strong { color: #006cb7; } /* Logo Line */ #header-logo:after { width: 0; } /* Button Line */ .header-button:before { width: 1px; background: #fff; } /* Header Filter Title Border Left*/ #header-filter-title:before { width: 8px; background: #002655; } /* Headings Color */ /* Loading Color Mixin */ /* Header Color Mixin */ /* Breadcrumb Color Mixin */ /* Navigation Color Mixin */ /* Filter Color Mixin */ /* Product Color Mixin */ /* Cart Color Mixin */ /* Product Icon Color */ /* Product Color Detail Color Mixin */ /* Popup Color Mixin */ /* Header Button Text Color*/ .header-button-title { color: #fff; } /* Keyboard Special Button Color */ .ui-keyboard-button.ui-state-active { color: #ffffff; background: #000000; } #header-breadcrumb, #header-view, #header-navigation, #header-filter { box-shadow: 0 5px 40px rgba(0, 0, 0, 0.1); } #product-detail .product-content { border: none; } /* Bulk Promotion Icon */ .product-content-is-bulk-promotion { height: 30px; width: 45px; background: none; } .product-content-is-bulk-promotion img { width: 100%; height: 100%; padding: 0; } .stockquantity-bubble { display: inline-block; position: absolute; right: 40px; width: 35px; height: 30px; margin: 10px; border-radius: 20px; text-decoration: none; text-align: center; line-height: 30px; -moz-transition: .2s; -o-transition: .2s; -webkit-transition: .2s; transition: .2s; background: green; } .stockquantity-bubble-content { display: inline-block; font-size: 14px; color: white; } /* Style Breadcrumb */ /* Header Breadcrumb Bar*/ #header-breadcrumb { position: relative; height: 60px; width: auto; overflow: hidden; margin-left: 10px; z-index: 6; background: #f8f8f8; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-breadcrumb { height: 40px; } } #header-breadcrumb-wrapper { max-width: calc(100% - 425px); float: left; } /* Breadcrumb Home Button */ #header-breadcrumb-home, #error-home { float: left; height: 60px; margin: 0; padding: 0 10px; overflow: hidden; font-size: 32px; text-decoration: none; line-height: 60px; color: #ff9802; border-right: 1px solid #ffffff; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } #header-breadcrumb-home:after, #error-home:after { content: none; position: absolute; top: 0; left: auto; width: 0; height: 0; border-bottom: 30px solid transparent; border-left: 30px solid #f8f8f8; border-top: 30px solid transparent; margin-left: 5px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-breadcrumb-home:after, #error-home:after { border-bottom: 20px solid transparent; border-left: 20px solid #f8f8f8; border-top: 20px solid transparent; margin-left: 0; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-breadcrumb-home, #error-home { height: 40px; padding: 0 0 0 5px; line-height: 40px; } } #error-home { float: none; background-color: none; border: none; } /* Breadcrumb Link */ .header-breadcrumb-link { float: left; height: 60px; padding: 0 20px; font-weight: bold; font-size: 16px; text-align: center; line-height: 3.7; text-decoration: none; border-right: 1px solid #ffffff; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; color: #ff9802; background: none; /* Breadcrumb Link active */ /* Breadcrumb Link Text*/ /* Breadcrumb Link Count */ /* Responsive */ } .header-breadcrumb-link:active { color: #ffffff; background: rgba(255, 255, 255, 0.1); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .header-breadcrumb-link .header-breadcrumb-link-text { display: inline-block; } .header-breadcrumb-link .header-breadcrumb-link-count { display: inline-block; height: 22px; padding: 0 10px; margin: 0 0 1px 2px; font-size: 12px; font-weight: bold; line-height: 1.9; vertical-align: middle; border-radius: 11px; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; background: #3c3c3b; color: #fff; /* Responsive */ } .header-breadcrumb-link .header-breadcrumb-link-count:after { content: none; position: absolute; top: 0; left: auto; width: 0; height: 0; border-bottom: 30px solid transparent; border-left: 30px solid #f8f8f8; border-top: 30px solid transparent; margin-left: 20px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-breadcrumb-link .header-breadcrumb-link-count:after { border-bottom: 20px solid transparent; border-left: 20px solid #f8f8f8; border-top: 20px solid transparent; margin-left: 10px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-breadcrumb-link .header-breadcrumb-link-count { font-size: 11px; font-weight: normal; height: 19px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-breadcrumb-link { height: 40px; line-height: 40px; font-size: 12px; padding: 0 0 0 30px; } } /* Breadcrumb Search */ #header-breadcrumb-search { float: right; margin: 8px; border: 3px solid; width: 400px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-breadcrumb-search { margin: 3px; } } /* Breadcrumb Search & Reset Button */ #header-breadcrumb-search-submit, #header-breadcrumb-search-reset { -moz-appearance: none; -webkit-appearance: none; float: left; color: #000000; background: #ebebeb; border: none; width: 40px; height: 40px; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; font-size: 2em; /* Breadcrumb Search & Reset Button Focus */ /* Breadcrumb Search & Reset Button active */ /* Responsive */ } #header-breadcrumb-search-submit:focus, #header-breadcrumb-search-reset:focus { outline: none; } #header-breadcrumb-search-submit:active, #header-breadcrumb-search-reset:active { color: #000000; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-breadcrumb-search-submit, #header-breadcrumb-search-reset { height: 30px; width: 30px; font-size: 18px; } } /* Breadcrumb Search Reset Button Rounded Corners */ #header-breadcrumb-search-reset { display: none; border-radius: 0 0 0 0; } /* Breadcrumb Search Submit Button Rounded Corners */ #header-breadcrumb-search-submit { border-radius: 0 0 0 0; } /* Breadcrumb Search Input */ #header-breadcrumb-search-input { float: left; height: 40px; width: 320px; margin: 0; padding: 0; font-size: 14px; border: none; background: #ebebeb; /* Breadcrumb Search Input Focus */ /* Responsive */ } #header-breadcrumb-search-input:focus { outline: none; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-breadcrumb-search-input { height: 30px; width: 330px; font-size: 12px; } } /* Breadcrumb Search Input Rounded Corners End */ .search-input-end { border-radius: 0 0 0 0; padding-right: 40px !important; } /* Style Filters */ /* Header Filter Bar */ #header-filter { height: 60px; width: auto; overflow: hidden; box-shadow: 0 0 15px rgba(0, 0, 0, 0.33); background: #ff9802; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter { height: 40px; line-height: 40px; } } /* Filter Title */ #header-filter-title { float: left; height: 100%; width: 200px; margin: 0 25px 0 0; background: #ff9802; color: #fff; cursor: pointer; overflow: hidden; border-right: 1px solid #ffffff; /* Ipad Screen */ /* Filter Title Before */ /* Filter Title After */ /* Title Wrapper */ /* Filter Title Hover */ /* Filter Arrow Hover */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title { width: 110px; } } #header-filter-title:before { content: none; position: absolute; left: 0; height: 60px; background: #000000; /* Ipad Screen */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title:before { height: 40px; } } #header-filter-title:after { content: none; position: absolute; top: auto; left: 200px; height: 0; width: 0; border-bottom: 30px solid transparent; border-left: 30px solid #b4051f; border-top: 30px solid transparent; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title:after { border-bottom: 20px solid transparent; border-left: 20px solid #b4051f; border-top: 20px solid transparent; left: 110px; } } #header-filter-title .title-wrapper { display: inline-block; float: left; height: 30px; width: 200px; text-align: center; /* Title Text */ /* Products Found */ /* Responsive */ } #header-filter-title .title-wrapper .title { display: inline-block; font-size: 22px; font-weight: bold; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title .title-wrapper .title { font-size: 16px; } } #header-filter-title .title-wrapper .products-found { position: relative; top: -2px; font-size: 14px; padding: 4px 9px; border-radius: 16px; margin-left: 3px; background: #000000; background: #fff; color: #3c3c3b; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title .title-wrapper .products-found { top: -5px; font-size: 12px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title .title-wrapper { width: 110px; line-height: 40px; height: 20px; } } #header-filter-title:active { color: #ffffff; background: rgba(255, 255, 255, 0.1); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #header-filter-title:active:after { border-left: 30px solid #e60628; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; border-right: 1px solid #ffffff; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #header-filter-title:active:after { border-left: 20px solid #e60628; } } /* Filter Button */ .header-filter-button { float: left; height: 60px; width: auto; padding: 0 25px; border-right: 1px solid #ffffff; font-weight: bold; font-size: 22px; text-align: center; line-height: 2.5; text-decoration: none; color: #ffffff; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ /* Filter Button active */ /* Filter Button Selected */ /* Filter Button Cancel*/ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-filter-button { height: 40px; font-size: 16px; line-height: 40px; padding: 0 20px; } } .header-filter-button:active { color: #ffffff; background: rgba(255, 255, 255, 0.1); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .header-filter-button.header-filter-button-selected { background: rgba(0, 0, 0, 0.2); } .header-filter-button .header-filter-button-cancel { border-radius: 16px; padding: 5px; font-size: 14px; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; background: #000000; background: #b4051f; color: #ffffff; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .header-filter-button .header-filter-button-cancel { font-size: 12px; } } /* Filter Button First Class (Because of the Filters Arrow) */ /* Filter Drop Down */ #filters { display: none; position: absolute; left: 0; z-index: 2; width: 99%; margin-left: 10px; height: 420px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.33); background: #f8f8f8; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #filters { height: 440px; } } .filter-scroll-window { width: 100%; overflow-x: auto; overflow-y: hidden; /* Scrollbar Styling */ /* Scrollbar Thumb Styling */ } .filter-scroll-window::-webkit-scrollbar { height: 2px; background-color: #dedede; } .filter-scroll-window::-webkit-scrollbar-thumb { background-color: #ababab; border-radius: 0; } /* Filter Category List */ ul#filter-category-list { float: left; width: 100%; height: 400px; overflow-x: auto; overflow-y: hidden; padding: 0; margin: 0; list-style: none; /* Hide scrollbar */ } ul#filter-category-list::-webkit-scrollbar { display: none; } ul#filter-category-list>li { float: left; margin: 5px 0 5px 5px; width: 310px; background: #f8f8f8; border-radius: 0; box-shadow: none; border-left: 1px solid #dedede; /* Responsive */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { ul#filter-category-list>li { width: 265px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul#filter-category-list>li { width: 220px; } } ul#filter-category-list .filter-item-header { width: 100%; background: none; display: block; } ul#filter-category-list .filter-item-header h3 { color: #000000; padding: 10px; margin: 0; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul#filter-category-list .filter-item-header h3 { font-size: 16px; } } ul#filter-category-list .filter-item-list-scroll { text-align: center; height: 30px; } ul#filter-category-list .filter-item-list-scroll .icon { font-size: 35px; } /* Filter List */ ul.filter-item-list { display: block; margin: 0; padding: 0; height: 348px; overflow-y: auto; overflow-x: hidden; background: linear-gradient(0, rgba(0, 0, 0, 0) 75%, #f8f8f8 150%); border-radius: 0; /* Hide Scrollbar */ /* Filter List Item */ /* Filter Show More */ } ul.filter-item-list::-webkit-scrollbar { display: none; } ul.filter-item-list li { float: left; width: 290px; list-style: none; border: none; margin: 5px; padding: 0; /* Responsive */ /* Filter Label */ /* Filter Count */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { ul.filter-item-list li { width: 245px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul.filter-item-list li { width: 200px; } } ul.filter-item-list li label { float: left; max-width: 205px; color: #000000; font-size: 16px; font-weight: bold; line-height: 38px; white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; /* Responsive */ } @media only screen and (min-height: 1919px) and (min-width: 1079px) { ul.filter-item-list li label { max-width: 160px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul.filter-item-list li label { font-size: 14px; font-weight: normal; max-width: 140px; } } ul.filter-item-list li .count { position: relative; top: 8px; left: 5px; background: rgba(255, 255, 255, 0.33); padding: 2px 5px; font-size: 14px; font-weight: bold; text-align: center; border-radius: 12px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul.filter-item-list li .count { font-size: 12px; padding: 1px 5px; } } ul.filter-item-list li.filter-show-more { margin: 8px 10px 10px; padding: 10px; width: 270px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border-radius: 0; background: #000000; color: #ffffff; font-size: 18px; font-weight: bold; cursor: pointer; text-align: center; /* Filter Show More Hover */ /* Responsive */ } ul.filter-item-list li.filter-show-more:active { background: #1a1a1a; color: #1a1a1a; -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (min-height: 1919px) and (min-width: 1079px) { ul.filter-item-list li.filter-show-more { max-width: 225px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul.filter-item-list li.filter-show-more { max-width: 180px; font-size: 14px; } } ul.filter-item-list .filter-checkbox { float: left; width: 30px; height: 30px; margin-right: 5px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { ul.filter-item-list .filter-checkbox { width: 25px; height: 25px; margin: 5px 5px; } } /* Close Filter */ #filters-close { float: right; width: 200px; height: 60px; background: none; padding: 0; margin: 0; cursor: pointer; text-align: center; display: none; border-left: 1px solid #ffffff; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Responsive */ } #filters-close .title, #filters-close .icon { position: relative; font-size: 22px !important; font-weight: bold; color: #ffffff !important; } #filters-close .title { top: -4px; } #filters-close:active { background: #f3f3f3; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #filters-close .icon { color: #000000; line-height: 60px; font-size: 48px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #filters-close .icon { line-height: 40px; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #filters-close { height: 40px; } } /* Filter Next & Previous Button */ #filter-navigation-next, #filter-navigation-prev { display: flex; align-items: center; position: absolute; font-size: 90px; color: #000000; height: 45px; width: 40px; z-index: 1; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Filter Next & Previous Button active */ /* Kiosk Ipad */ } #filter-navigation-next:active, #filter-navigation-prev:active { color: #1a1a1a; -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #filter-navigation-next, #filter-navigation-prev { font-size: 48px; width: 50px; } } /* Filter Previous Button Left Margin */ #filter-navigation-prev { left: 0; justify-content: space-evenly; background: linear-gradient(90deg, #ebebeb 0, rgba(255, 255, 255, 0) 100%); } /* Filter Previous Button Right Margin */ #filter-navigation-next { right: 0; justify-content: space-evenly; background: linear-gradient(-90deg, #ebebeb 0, rgba(255, 255, 255, 0) 100%); } .filter-navigation { width: 40px; height: 45px; top: 50%; position: absolute; overflow: hidden; } .filter-navigation.filter-navigation-left { left: 0; } .filter-navigation.filter-navigation-right { right: 0; } .filter-sorting-wrapper { float: right; width: 320px; height: 60px; right: 0px; position: absolute; } .filter-sorting-wrapper label { color: #b4051f; position: relative; top: 20px; padding-right: 10px; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .filter-sorting-wrapper label { top: 0px; } } /* Product Catalog Styling */ .btw-incl, .btw-both { display: inline-block; } /* Products Page */ #products, .content-wrapper { position: relative; padding: 25px; overflow: hidden; display: block; z-index: 1; } /* Product */ .product { float: left; margin: 10px 0; width: 25%; } /* Product Content Container */ .product-content { position: relative; display: block; margin: 0 10px; width: auto; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border-radius: 0; border: 1px solid #dedede; background: #ffffff; color: #000000; cursor: pointer; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; /* Product Content active */ } .product-content:active { box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } /* Product Animation */ .product-animation { -moz-animation-name: product-animation; -o-animation-name: product-animation; -webkit-animation-name: product-animation; animation-name: product-animation; -moz-animation-duration: 0.7s; -o-animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; } /* Product Animation Parameters */ @-moz-keyframes product-animation { from { opacity: 0; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } to { opacity: 1; -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); -webkit-transform: rotateY(0); transform: rotateY(0); } } @-webkit-keyframes product-animation { from { opacity: 0; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } to { opacity: 1; -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); -webkit-transform: rotateY(0); transform: rotateY(0); } } @keyframes product-animation { from { opacity: 0; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } to { opacity: 1; -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); -webkit-transform: rotateY(0); transform: rotateY(0); } } /* Product Move To Cart Animation Wrapper */ .product-move-to-cart { display: none; align-items: center; justify-content: center; position: absolute; z-index: 10; padding: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border: 1px solid #dedede; border-radius: 0; background: #ffffff; /* Product Move To Cart Image */ } .product-move-to-cart img { max-width: 100%; max-height: 100%; } /* Products Not Found Message */ #products-not-found { width: auto; margin: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border: 1px solid #dedede; border-radius: 0; background: #ffffff; color: #000000; } #products-not-found p { padding: 10px; margin: 0; font-weight: bold; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #products-not-found p { font-size: 14px; } } /* Product Icons */ .product-icons { position: absolute; top: 0; right: 0; width: 0; } /* Product Icon */ .product-content-is-ebook, .product-content-in-shopping-cart, .product-content-webnode-top, .product-content-is-bulk-promotion { position: relative; float: right; display: block; height: 30px; width: 40px; margin: 10px 10px 0 0; border-radius: 0; text-align: center; line-height: 30px; background: #b4051f; color: #000000; background: none; color: #b4051f; } /* Product Discount Banner */ .product-discount { position: absolute; top: 15px; left: -45px; height: 40px; width: 90px; padding: 0 35px; overflow: hidden; background: #000000; box-shadow: inset 40px 0 20px rgba(0, 0, 0, 0.1); color: #000000; text-align: center; line-height: 40px; font-weight: bold; font-size: 16px; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } /* Product Icon In Cart Image*/ .product-content-in-shopping-cart { background-image: url(/images/icon-incart.png); background-size: 85%; background-position: center; background-repeat: no-repeat; } /* Product Image */ .product-image img { max-width: 100%; max-height: 100%; overflow: hidden; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-image { width: unset; } } .product-image .product-discount-content { position: absolute; top: 2%; right: 2%; } .product-image .product-discount-content img { display: inline-block; position: relative; } /* Product Title */ .product-header { height: 40px; } .product-header .product-title { display: -webkit-box; height: 40px; margin: 0 10px; font-size: 12px; font-weight: bold; line-height: 20px; color: #000000; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: unset; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-header .product-title { height: 16px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 12px; } } /* Product Subtitle */ .product-subtitle { overflow: hidden; height: 16px; margin: 0 10px 10px; font-size: 14px; color: #1a1a1a; white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-subtitle { height: 14px; line-height: 14px; font-size: 10px; } } /* Product Bottom Bar */ .product-footer { float: left; width: 100%; height: 50px; background: none; border-top: 1px solid #dedede; /* Responsive */ /* Price */ /* Price To */ /* Price From */ /* Price Incl BTW */ /* Price Excl BTW*/ /* Price Excl From */ /* BTW Incl Container */ /* BTW Both Container */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-footer { height: 40px; } } .product-footer .price { display: inline-block; height: 30px; margin: 10px; font-size: 20px; font-weight: bold; color: #000000; line-height: 30px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-footer .price { height: 20px; font-size: 16px; line-height: 20px; } } .product-footer .price-to { position: relative; top: 5px; font-size: 20px; font-weight: bold; color: #000000; line-height: 30px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-footer .price-to { font-size: 16px; line-height: 16px; } } .product-footer .price-from { position: relative; top: 4px; left: 10px; font-size: 14px; font-weight: normal; color: #000000; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-footer .price-from { font-size: 13px; top: 0; } } .product-footer .price-incl { float: left; width: 100%; margin: 0 10px 5px; font-size: 14px; font-weight: bold; color: #000000; } .product-footer .price-excl { float: left; width: 100%; margin: 5px 10px 0; font-size: 20px; font-weight: bold; color: #000000; } .product-footer .price-excl-from { font-size: 14px; color: #000000; } .product-footer .btw-incl { display: inline-block; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .product-footer .btw-both { display: block; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .product-footer .matrix { float: right; position: absolute; right: 0; height: 30px; margin: 10px; width: 100px; border-radius: 2px !important; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); text-decoration: none; text-align: center; line-height: 30px; background-color: #000000 !important; color: #ffffff; /* Product Cart Add Hover */ /* Responsive */ } .product-footer .matrix:active, .product-footer .matrix:hover { -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; background-color: #000000 !important; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .product-footer .matrix { margin: 5px; } } .product-footer .product-listprice { text-decoration: line-through; margin-left: 10px; } .cart-add-kiosk { float: right; position: absolute; right: 0; width: 30px; height: 30px; margin: 10px; border-radius: 2px !important; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); text-decoration: none; text-align: center; line-height: 30px; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; background: #b4051f; color: #000000; background: none; color: #b4051f; background-image: url(/images/icon-cart.png); background-size: 85%; background-position: center; background-repeat: no-repeat; /* background-color: #000000 !important; */ /* Product Cart Add Hover */ /* Responsive */ } .cart-add-kiosk:active, .cart-add-kiosk:hover { -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; background-color: #000000 !important; } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .cart-add-kiosk { margin: 5px; } } /* @media screen and (orientation: portrait) { .content-wrapper { width: 90vw; height: auto; position: absolute; left: 50vw; top: 50vh; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } */ /* Style Header */ /* wrapper */ .custom-dropdown { position: absolute; display: inline-block; background: #f8f8f8; color: #000000; border: 1px solid #cd0623; top: 10px; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .custom-dropdown { top: 5px; } } .custom-dropdown-button { position: relative; width: 200px; padding: 10px; margin: 0 auto; background: #f8f8f8; color: #000000; outline: none; cursor: pointer; font-weight: bold; /* Responsive */ } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { .custom-dropdown-button { padding: 0 10px; max-height: 30px; } .custom-dropdown-button span { top: -5px; position: relative; } } .custom-dropdown-button:after { content: ""; width: 0; height: 0; position: absolute; right: 16px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #000000 transparent; } .custom-dropdown-options { display: none; } .custom-dropdown-options ul { z-index: 1; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); list-style: none; padding: 0; margin: 0; } .custom-dropdown-options li { list-style: none; padding: 0; margin: 0; } .custom-dropdown-options a { background: #f8f8f8; color: #000000; padding: 12px 16px; text-decoration: none; display: block; } .custom-dropdown-options a:hover { background-color: #000000; } /* Style Header */ /* Header Logo */ #header-logo { /* background-position: top; */ background-size: contain; margin-left: 30px; } #header-view, .header-logo-wrapper, #header-logo { height: 100px; } #header-store { position: absolute; margin: 0; text-align: center; color: #fff; line-height: 15px; border: 1px solid #ffffff; padding: 15px; top: 25px; bottom: auto; left: 290px; font-size: 20px; width: auto; } @media screen and (max-width: 1024px) { #header-store { top: 14px; font-size: 13px; } } /* Header List */ ul#header-selling-point-list { float: left; display: inline-block; list-style: circle; margin: 10px 0; padding: 0 50px; columns: 2; -webkit-columns: 2; -moz-columns: 2; /* Responsive */ } ul#header-selling-point-list li { background: url('/images/listitem.png') no-repeat left center; background-size: contain; padding-left: 35px; font-size: 14px; font-weight: 500; list-style: none; margin-bottom: 5px; } @media only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px), only screen and (max-height: 801px) and (max-width: 1281px) { ul#header-selling-point-list { display: none; } } .down-icon { display: block; float: right; margin-top: 32px; overflow: hidden; width: 0; height: 0; border-width: 5px 5px; border-style: solid; border-color: #FFF transparent transparent; } .up-icon { display: block; float: right; margin-top: 22px; overflow: hidden; width: 0; height: 0; border-width: 5px 5px; border-style: solid; border-color: transparent transparent #FFF; } #alternatievenProduct { overflow-y: auto; height: 120px; border-top: 1px solid #dedede; } @media only screen and (min-height: 1919px) and (min-width: 1079px) { #alternatievenProduct { float: left; width: 100%; } } @media only screen and (max-height: 801px) and (max-width: 1281px), only screen and (max-height: 1281px) and (max-width: 1025px) and (min-height: 801px) { #alternatievenProduct { float: left; width: 100%; font-size: 16px; } } #alternatievenProduct::-webkit-scrollbar { background-color: #fafafa; } #alternatievenProduct::-webkit-scrollbar-thumb { background-color: #f0f0f0; border-radius: 0; } #alternatievenProduct .tab-content { margin: 20px; overflow: hidden; } #product-detail .product-detail-close-btn{ color: #3c3c3b; background: #fff; border: 1px solid #fff; } #product-detail-header-content-tabs li:not(.active) > a > .product-detail-header-content-tabs-tab{ color: #0095db; } #product-detail-navigation #product-detail-navigation-matrix .selected-matrix-option{ background: #fff; border: 1px solid #fff; color: #333; } #product-detail-navigation-noOrder{ background: #3c3c3b; } .ui-keyboard.ui-widget-content.ui-widget.ui-corner-all.ui-helper-clearfix.ui-keyboard-always-open{ display: none; } .ui-keyboard.ui-widget-content.ui-widget.ui-corner-all.ui-helper-clearfix.ui-keyboard-always-open.ui-keyboard-has-focus{ display: block; } /* Font */ /* Primary Color */ /* Secondary Color */ /* Primary Text Color */ /* Secondary Text Color */ /* Tertiary Color */ /* Tertiary Text Color */ /* Background */ /* Warning Color */ /* Error Color */ /* Layout */ /* Template Properties Perrysport */ /* Font */ /* Primary Color */ /* Secondary Color */ /* Primary Text Color */ /* Secondary Text Color */ /* Tertiary Color */ /* Tertiary Text Color */ /* Background */ /* Warning Color */ /* Error Color */ /* Layout */ /* Bouwmaat Orange Color */ /*! * jQuery UI CSS Framework 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/category/theming/ */ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-clearfix { min-height: 0; /* support: IE7 */ } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter: Alpha(Opacity=0); /* support: IE8 */ } .ui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } /*! * jQuery UI Accordion 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/accordion/#theming */ .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin: 2px 0 0 0; padding: .5em .5em .5em .7em; min-height: 0; /* support: IE7 */ font-size: 100%; } .ui-accordion .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-header .ui-accordion-header-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; } /*! * jQuery UI Autocomplete 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/autocomplete/#theming */ .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; } /*! * jQuery UI Button 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/button/#theming */ .ui-button { display: inline-block; position: relative; padding: 0; line-height: normal; margin-right: .1em; cursor: pointer; vertical-align: middle; text-align: center; overflow: visible; /* removes extra width in IE */ } .ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; } /* to make room for the icon, a width needs to be set here */ .ui-button-icon-only { width: 2.2em; } /* button elements seem to need a little more width */ button.ui-button-icon-only { width: 2.4em; } .ui-button-icons-only { width: 3.4em; } button.ui-button-icons-only { width: 3.7em; } /* button text element */ .ui-button .ui-button-text { display: block; line-height: normal; } .ui-button-text-only .ui-button-text { padding: .4em 1em; } .ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; } .ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; } .ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; } .ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } /* no icon support for input elements, provide padding by default */ input.ui-button { padding: .4em 1em; } /* button icon element(s) */ .ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } .ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } .ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; } .ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } /* button sets */ .ui-buttonset { margin-right: 7px; } .ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; } /* workarounds */ /* reset extra padding in Firefox, see h5bp.com/l */ input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /*! * jQuery UI Datepicker 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/datepicker/#theming */ .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } /*! * jQuery UI Dialog 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/dialog/#theming */ .ui-dialog { overflow: hidden; position: absolute; top: 0; left: 0; padding: .2em; outline: 0; } .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: .1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 20px; margin: -10px 0 0 0; padding: 1px; height: 20px; } .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin-top: .5em; padding: .3em 1em .5em .4em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } .ui-dialog .ui-resizable-se { width: 12px; height: 12px; right: -5px; bottom: -5px; background-position: 16px 16px; } .ui-draggable .ui-dialog-titlebar { cursor: move; } /*! * jQuery UI Draggable 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license */ .ui-draggable-handle { -ms-touch-action: none; touch-action: none; } /*! * jQuery UI Menu 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/menu/#theming */ .ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: none; } .ui-menu .ui-menu { position: absolute; } .ui-menu .ui-menu-item { position: relative; margin: 0; padding: 3px 1em 3px .4em; cursor: pointer; min-height: 0; /* support: IE7 */ /* support: IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } .ui-menu .ui-state-focus, .ui-menu .ui-state-active { margin: -1px; } /* icon support */ .ui-menu-icons { position: relative; } .ui-menu-icons .ui-menu-item { padding-left: 2em; } /* left-aligned */ .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: .2em; margin: auto 0; } /* right-aligned */ .ui-menu .ui-menu-icon { left: auto; right: 0; } /*! * jQuery UI Progressbar 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/progressbar/#theming */ .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } .ui-progressbar .ui-progressbar-overlay { background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); height: 100%; filter: alpha(opacity=25); /* support: IE8 */ opacity: 0.25; } .ui-progressbar-indeterminate .ui-progressbar-value { background-image: none; } /*! * jQuery UI Resizable 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license */ .ui-resizable { position: relative; } .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; -ms-touch-action: none; touch-action: none; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } /*! * jQuery UI Selectable 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license */ .ui-selectable { -ms-touch-action: none; touch-action: none; } .ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted black; } /*! * jQuery UI Selectmenu 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/selectmenu/#theming */ .ui-selectmenu-menu { padding: 0; margin: 0; position: absolute; top: 0; left: 0; display: none; } .ui-selectmenu-menu .ui-menu { overflow: auto; /* Support: IE7 */ overflow-x: hidden; padding-bottom: 1px; } .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { font-size: 1em; font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; height: auto; border: 0; } .ui-selectmenu-open { display: block; } .ui-selectmenu-button { display: inline-block; overflow: hidden; position: relative; text-decoration: none; cursor: pointer; } .ui-selectmenu-button span.ui-icon { right: 0.5em; left: auto; margin-top: -8px; position: absolute; top: 50%; } .ui-selectmenu-button span.ui-selectmenu-text { text-align: left; padding: 0.4em 2.1em 0.4em 1em; display: block; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*! * jQuery UI Sortable 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license */ .ui-sortable-handle { -ms-touch-action: none; touch-action: none; } /*! * jQuery UI Slider 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/slider/#theming */ .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; -ms-touch-action: none; touch-action: none; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } /* support: IE8 - See #6727 */ .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } /*! * jQuery UI Spinner 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/spinner/#theming */ .ui-spinner { position: relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; } .ui-spinner-input { border: none; background: none; color: inherit; padding: 0; margin: .2em 0; vertical-align: middle; margin-left: .4em; margin-right: 22px; } .ui-spinner-button { width: 16px; height: 50%; font-size: .5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; } /* more specificity required here to override default borders */ .ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; border-right: none; } /* vertically center icon */ .ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; left: 0; } .ui-spinner-up { top: 0; } .ui-spinner-down { bottom: 0; } /* TR overrides */ .ui-spinner .ui-icon-triangle-1-s { /* need to fix icons sprite */ background-position: -65px -16px; } /*! * jQuery UI Tabs 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/tabs/#theming */ .ui-tabs { position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ padding: .2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } /*! * jQuery UI Tooltip 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/tooltip/#theming */ .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa; } body .ui-tooltip { border-width: 2px; } /*! * jQuery UI CSS Framework 1.12.0 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/category/theming/ * * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&fwDefault=normal&cornerRadius=3px&bgColorHeader=e9e9e9&bgTextureHeader=flat&borderColorHeader=dddddd&fcHeader=333333&iconColorHeader=444444&bgColorContent=ffffff&bgTextureContent=flat&borderColorContent=dddddd&fcContent=333333&iconColorContent=444444&bgColorDefault=f6f6f6&bgTextureDefault=flat&borderColorDefault=c5c5c5&fcDefault=454545&iconColorDefault=777777&bgColorHover=ededed&bgTextureHover=flat&borderColorHover=cccccc&fcHover=2b2b2b&iconColorHover=555555&bgColorActive=007fff&bgTextureActive=flat&borderColorActive=003eff&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=fffa90&bgTextureHighlight=flat&borderColorHighlight=dad55e&fcHighlight=777620&iconColorHighlight=777620&bgColorError=fddfdf&bgTextureError=flat&borderColorError=f1a899&fcError=5f3f3f&iconColorError=cc0000&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=666666&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=5px&offsetTopShadow=0px&offsetLeftShadow=0px&cornerRadiusShadow=8px */ /* Component containers ----------------------------------*/ .ui-widget { font-family: Arial,Helvetica,sans-serif; font-size: 1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial,Helvetica,sans-serif; font-size: 1em; } .ui-widget.ui-widget-content { border: 1px solid #c5c5c5; } .ui-widget-content { border: 1px solid #dddddd; background: #ffffff; color: #333333; } .ui-widget-content a { color: #333333; } .ui-widget-header { border: 1px solid #dddddd; background: #e9e9e9; color: #333333; font-weight: bold; } .ui-widget-header a { color: #333333; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, /* We use html here because we need a greater specificity to make sure disabled works properly when clicked or hovered */ html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: 1px solid #c5c5c5; background: #f6f6f6; font-weight: normal; color: #454545; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button { color: #454545; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { border: 1px solid #cccccc; background: #ededed; font-weight: normal; color: #2b2b2b; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, a.ui-button:hover, a.ui-button:focus { color: #2b2b2b; text-decoration: none; } .ui-visual-focus { box-shadow: 0 0 3px 1px rgb(94, 158, 214); } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border: 1px solid #003eff; background: #007fff; font-weight: normal; color: #ffffff; } .ui-icon-background, .ui-state-active .ui-icon-background { border: #003eff; background-color: #ffffff; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #dad55e; background: #fffa90; color: #777620; } .ui-state-checked { border: 1px solid #dad55e; background: #fffa90; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #777620; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #f1a899; background: #fddfdf; color: #5f3f3f; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #5f3f3f; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #5f3f3f; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter: Alpha(Opacity=70); /* support: IE8 */ font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter: Alpha(Opacity=35); /* support: IE8 */ background-image: none; } .ui-state-disabled .ui-icon { filter: Alpha(Opacity=35); /* support: IE8 - See #6059 */ } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; } .ui-icon, .ui-widget-content .ui-icon { background-image: url("/images/ui-icons_444444_256x240.png"); } .ui-widget-header .ui-icon { background-image: url("/images/ui-icons_444444_256x240.png"); } .ui-button .ui-icon { background-image: url("/images/ui-icons_777777_256x240.png"); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, .ui-button:focus .ui-icon, .ui-state-default .ui-icon { background-image: url("/images/ui-icons_555555_256x240.png"); } .ui-state-active .ui-icon, .ui-button:active .ui-icon { background-image: url("/images/ui-icons_ffffff_256x240.png"); } .ui-state-highlight .ui-icon, .ui-button .ui-state-highlight.ui-icon { background-image: url("/images/ui-icons_777620_256x240.png"); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url("/images/ui-icons_cc0000_256x240.png"); } /* positioning */ .ui-icon-blank { background-position: 16px 16px; } .ui-icon-caret-1-n { background-position: 0 0; } .ui-icon-caret-1-ne { background-position: -16px 0; } .ui-icon-caret-1-e { background-position: -32px 0; } .ui-icon-caret-1-se { background-position: -48px 0; } .ui-icon-caret-1-s { background-position: -65px 0; } .ui-icon-caret-1-sw { background-position: -80px 0; } .ui-icon-caret-1-w { background-position: -96px 0; } .ui-icon-caret-1-nw { background-position: -112px 0; } .ui-icon-caret-2-n-s { background-position: -128px 0; } .ui-icon-caret-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -65px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -65px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 1px -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 3px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 3px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 3px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 3px; } /* Overlays */ .ui-widget-overlay { background: #aaaaaa; opacity: .3; filter: Alpha(Opacity=30); /* support: IE8 */ } .ui-widget-shadow { -webkit-box-shadow: 0px 0px 5px #666666; box-shadow: 0px 0px 5px #666666; } /*! lightslider - v1.1.5 - 2015-10-31 * https://github.com/sachinchoolur/lightslider * Copyright (c) 2015 Sachin N; Licensed MIT */ /*! lightslider - v1.1.3 - 2015-04-14 * https://github.com/sachinchoolur/lightslider * Copyright (c) 2015 Sachin N; Licensed MIT */ /** /!!! core css Should not edit !!!/**/ .lSSlideOuter { overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .lightSlider:before, .lightSlider:after { content: " "; display: table; } .lightSlider { overflow: hidden; margin: 0; } .lSSlideWrapper { max-width: 100%; overflow: hidden; position: relative; } .lSSlideWrapper > .lightSlider:after { clear: both; } .lSSlideWrapper .lSSlide { -webkit-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition: all 1s; -webkit-transition-property: -webkit-transform,height; -moz-transition-property: -moz-transform,height; transition-property: transform,height; -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .lSSlideWrapper .lSFade { position: relative; } .lSSlideWrapper .lSFade > * { position: absolute !important; top: 0; left: 0; z-index: 9; margin-right: 0; width: 100%; } .lSSlideWrapper.usingCss .lSFade > * { opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .lSSlideWrapper .lSFade > *.active { z-index: 10; } .lSSlideWrapper.usingCss .lSFade > *.active { opacity: 1; } /** /!!! End of core css Should not edit !!!/**/ /* Pager */ .lSSlideOuter .lSPager.lSpg { margin: 10px 0 0; padding: 0; text-align: center; } .lSSlideOuter .lSPager.lSpg > li { cursor: pointer; display: inline-block; padding: 0 5px; } .lSSlideOuter .lSPager.lSpg > li a { background-color: #222222; border-radius: 30px; display: inline-block; height: 8px; overflow: hidden; text-indent: -999em; width: 8px; position: relative; z-index: 99; -webkit-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a { background-color: #428bca; } .lSSlideOuter .media { opacity: 0.8; } .lSSlideOuter .media.active { opacity: 1; } /* End of pager */ /** Gallery */ .lSSlideOuter .lSPager.lSGallery { list-style: none outside none; padding-left: 0; margin: 0; overflow: hidden; transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .lSSlideOuter .lSPager.lSGallery li { overflow: hidden; -webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s; transition: border-radius 0.12s linear 0s 0.35s linear 0s; } .lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover { border-radius: 5px; } .lSSlideOuter .lSPager.lSGallery img { display: block; height: auto; max-width: 100%; } .lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after { content: " "; display: table; } .lSSlideOuter .lSPager.lSGallery:after { clear: both; } /* End of Gallery*/ /* slider actions */ .lSAction > a { width: 32px; display: block; top: 50%; height: 32px; background-image: url("/img/controls.png"); cursor: pointer; position: absolute; z-index: 99; margin-top: -16px; opacity: 0.5; -webkit-transition: opacity 0.35s linear 0s; transition: opacity 0.35s linear 0s; } .lSAction > a:hover { opacity: 1; } .lSAction > .lSPrev { background-position: 0 0; left: 10px; } .lSAction > .lSNext { background-position: -32px 0; right: 10px; } .lSAction > a.disabled { pointer-events: none; } .cS-hidden { height: 1px; opacity: 0; filter: alpha(opacity=0); overflow: hidden; } /* vertical */ .lSSlideOuter.vertical { position: relative; } .lSSlideOuter.vertical.noPager { padding-right: 0px !important; } .lSSlideOuter.vertical .lSGallery { position: absolute !important; right: 0; top: 0; } .lSSlideOuter.vertical .lightSlider > * { width: 100% !important; max-width: none !important; } /* vertical controlls */ .lSSlideOuter.vertical .lSAction > a { left: 50%; margin-left: -14px; margin-top: 0; } .lSSlideOuter.vertical .lSAction > .lSNext { background-position: 31px -31px; bottom: 10px; top: auto; } .lSSlideOuter.vertical .lSAction > .lSPrev { background-position: 0 -31px; bottom: auto; top: 10px; } /* vertical */ /* Rtl */ .lSSlideOuter.lSrtl { direction: rtl; } .lSSlideOuter .lightSlider, .lSSlideOuter .lSPager { padding-left: 0; list-style: none outside none; } .lSSlideOuter.lSrtl .lightSlider, .lSSlideOuter.lSrtl .lSPager { padding-right: 0; } .lSSlideOuter .lightSlider > *, .lSSlideOuter .lSGallery li { float: left; } .lSSlideOuter.lSrtl .lightSlider > *, .lSSlideOuter.lSrtl .lSGallery li { float: right !important; } /* Rtl */ @-webkit-keyframes rightEnd { 0% { left: 0; } 50% { left: -15px; } 100% { left: 0; } } @keyframes rightEnd { 0% { left: 0; } 50% { left: -15px; } 100% { left: 0; } } @-webkit-keyframes topEnd { 0% { top: 0; } 50% { top: -15px; } 100% { top: 0; } } @keyframes topEnd { 0% { top: 0; } 50% { top: -15px; } 100% { top: 0; } } @-webkit-keyframes leftEnd { 0% { left: 0; } 50% { left: 15px; } 100% { left: 0; } } @keyframes leftEnd { 0% { left: 0; } 50% { left: 15px; } 100% { left: 0; } } @-webkit-keyframes bottomEnd { 0% { bottom: 0; } 50% { bottom: -15px; } 100% { bottom: 0; } } @keyframes bottomEnd { 0% { bottom: 0; } 50% { bottom: -15px; } 100% { bottom: 0; } } .lSSlideOuter .rightEnd { -webkit-animation: rightEnd 0.3s; animation: rightEnd 0.3s; position: relative; } .lSSlideOuter .leftEnd { -webkit-animation: leftEnd 0.3s; animation: leftEnd 0.3s; position: relative; } .lSSlideOuter.vertical .rightEnd { -webkit-animation: topEnd 0.3s; animation: topEnd 0.3s; position: relative; } .lSSlideOuter.vertical .leftEnd { -webkit-animation: bottomEnd 0.3s; animation: bottomEnd 0.3s; position: relative; } .lSSlideOuter.lSrtl .rightEnd { -webkit-animation: leftEnd 0.3s; animation: leftEnd 0.3s; position: relative; } .lSSlideOuter.lSrtl .leftEnd { -webkit-animation: rightEnd 0.3s; animation: rightEnd 0.3s; position: relative; } /*/ GRab cursor */ .lightSlider.lsGrab > * { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lightSlider.lsGrabbing > * { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } @font-face { font-family: 'icomoon'; src: url('/fonts/icomoon.eot?s2tfrn'); src: url("/fonts/icomoon.eot?s2tfrn") format('embedded-opentype'), url('/fonts/icomoon.ttf?s2tfrn') format('truetype'), url('/fonts/icomoon.woff?s2tfrn') format('woff'), url("/fonts/icomoon.svg?s2tfrn") format('svg'); font-weight: normal; font-style: normal; } i { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon_coins:before { content: "\e9dd"; } .icon_calendar_24h_bx:before { content: "\e9dc"; color: #f3a9b3; } .icon_box_bx:before { content: "\e902"; color: #f3a9b3; } .icon_lock_bx:before { content: "\e9d5"; color: #f3a9b3; } .icon_truck_bx:before { content: "\e9d9"; color: #f3a9b3; } .icon_calendar_48h_bx:before { content: "\e9da"; color: #f3a9b3; } .icon_gift_bx:before { content: "\e9db"; color: #f3a9b3; } .icon_note:before { content: "\e901"; } .icon_edit:before { content: "\e900"; } .icon_dhl_color:before { content: "\e903"; color: #d71635; } .icon_postnl_color .path1:before { content: "\e904"; color: rgb(208, 210, 211); } .icon_postnl_color .path2:before { content: "\e905"; margin-left: -1em; color: rgb(250, 158, 25); } .icon_postnl_color .path3:before { content: "\e906"; margin-left: -1em; color: rgb(255, 255, 255); } .icon_postnl_color .path4:before { content: "\e907"; margin-left: -1em; color: rgb(255, 255, 255); } .icon_postnl_color .path5:before { content: "\e908"; margin-left: -1em; color: rgb(23, 71, 157); } .icon_postnl_color .path6:before { content: "\e909"; margin-left: -1em; color: rgb(23, 71, 157); } .icon_postnl_color .path7:before { content: "\e9d6"; margin-left: -1em; color: rgb(23, 71, 157); } .icon_postnl_color .path8:before { content: "\e9d7"; margin-left: -1em; color: rgb(23, 71, 157); } .icon_postnl_color .path9:before { content: "\e9d8"; margin-left: -1em; color: rgb(255, 255, 255); } .icon_visa_color:before { content: "\e90a"; color: #0f3d88; } .icon_ups_color .path1:before { content: "\e90b"; color: rgb(81, 54, 40); } .icon_ups_color .path2:before { content: "\e90c"; margin-left: -1em; color: rgb(253, 189, 16); } .icon_ups_color .path3:before { content: "\e90d"; margin-left: -1em; color: rgb(253, 189, 16); } .icon_ups_color .path4:before { content: "\e90e"; margin-left: -1em; color: rgb(253, 189, 16); } .icon_ups_color .path5:before { content: "\e90f"; margin-left: -1em; color: rgb(253, 189, 16); } .icon_mastercard_color_2 .path1:before { content: "\e910"; color: rgb(29, 29, 27); } .icon_mastercard_color_2 .path2:before { content: "\e911"; margin-left: -1em; color: rgb(29, 29, 27); } .icon_mastercard_color_2 .path3:before { content: "\e912"; margin-left: -1em; color: rgb(29, 29, 27); } .icon_mastercard_color_2 .path4:before { content: "\e913"; margin-left: -1em; color: rgb(29, 29, 27); } .icon_mastercard_color_2 .path5:before { content: "\e914"; margin-left: -1em; color: rgb(29, 29, 27); } .icon_mastercard_color_2 .path6:before { content: "\e915"; margin-left: -1em; color: rgb(29, 29, 27); } .icon_mastercard_color_2 .path7:before { content: "\e916"; margin-left: -1em; color: rgb(29, 29, 27); } .icon_mastercard_color_2 .path8:before { content: "\e917"; margin-left: -1em; color: rgb(29, 29, 27); } .icon_mastercard_color_2 .path9:before { content: "\e918"; margin-left: -1em; color: rgb(29, 29, 27); } .icon_mastercard_color_2 .path10:before { content: "\e919"; margin-left: -1em; color: rgb(29, 29, 27); } .icon_mastercard_color_2 .path11:before { content: "\e91a"; margin-left: -1em; color: rgb(226, 13, 23); } .icon_mastercard_color_2 .path12:before { content: "\e91b"; margin-left: -1em; color: rgb(234, 97, 10); } .icon_mastercard_color_2 .path13:before { content: "\e91c"; margin-left: -1em; color: rgb(245, 158, 0); } .icon_thuiswinkel_waarborg_color .path1:before { content: "\e91d"; color: rgb(255, 255, 255); } .icon_thuiswinkel_waarborg_color .path2:before { content: "\e91e"; margin-left: -1em; color: rgb(186, 180, 61); } .icon_thuiswinkel_waarborg_color .path3:before { content: "\e91f"; margin-left: -1em; color: rgb(201, 88, 94); } .icon_thuiswinkel_waarborg_color .path4:before { content: "\e920"; margin-left: -1em; color: rgb(44, 46, 47); } .icon_thuiswinkel_waarborg_color .path5:before { content: "\e921"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path6:before { content: "\e922"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path7:before { content: "\e923"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path8:before { content: "\e924"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path9:before { content: "\e925"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path10:before { content: "\e926"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path11:before { content: "\e927"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path12:before { content: "\e928"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path13:before { content: "\e929"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path14:before { content: "\e92a"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path15:before { content: "\e92b"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path16:before { content: "\e92c"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path17:before { content: "\e92d"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path18:before { content: "\e92e"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path19:before { content: "\e92f"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path20:before { content: "\e930"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path21:before { content: "\e931"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path22:before { content: "\e932"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_thuiswinkel_waarborg_color .path23:before { content: "\e933"; margin-left: -1em; color: rgb(35, 31, 32); } .icon_paypal_color .path1:before { content: "\e934"; color: rgb(37, 59, 128); } .icon_paypal_color .path2:before { content: "\e935"; margin-left: -1em; color: rgb(23, 155, 215); } .icon_paypal_color .path3:before { content: "\e936"; margin-left: -1em; color: rgb(34, 45, 101); } .icon_paypal_color .path4:before { content: "\e937"; margin-left: -1em; color: rgb(37, 59, 128); } .icon_mastercard_color_1 .path1:before { content: "\e938"; color: rgb(226, 13, 23); } .icon_mastercard_color_1 .path2:before { content: "\e939"; margin-left: -1em; color: rgb(234, 97, 10); } .icon_mastercard_color_1 .path3:before { content: "\e93a"; margin-left: -1em; color: rgb(245, 158, 0); } .icon_ideal_color .path1:before { content: "\e93b"; color: rgb(0, 0, 0); } .icon_ideal_color .path2:before { content: "\e93c"; margin-left: -1em; color: rgb(0, 0, 0); } .icon_ideal_color .path3:before { content: "\e93d"; margin-left: -1em; color: rgb(0, 0, 0); } .icon_ideal_color .path4:before { content: "\e93e"; margin-left: -1em; color: rgb(205, 0, 103); } .icon_ideal_color .path5:before { content: "\e93f"; margin-left: -1em; color: rgb(205, 0, 103); } .icon_ideal_color .path6:before { content: "\e940"; margin-left: -1em; color: rgb(205, 0, 103); } .icon_wallet_color .path1:before { content: "\e941"; color: rgb(158, 85, 35); } .icon_wallet_color .path2:before { content: "\e942"; margin-left: -1em; color: rgb(68, 43, 27); } .icon_wallet_color .path3:before { content: "\e943"; margin-left: -1em; color: rgb(126, 175, 138); } .icon_wallet_color .path4:before { content: "\e944"; margin-left: -1em; color: rgb(87, 140, 101); } .icon_wallet_color .path5:before { content: "\e945"; margin-left: -1em; color: rgb(67, 117, 79); } .icon_wallet_color .path6:before { content: "\e946"; margin-left: -1em; color: rgb(145, 77, 31); } .icon_wallet_color .path7:before { content: "\e947"; margin-left: -1em; color: rgb(132, 68, 25); } .icon_wallet_color .path8:before { content: "\e948"; margin-left: -1em; color: rgb(158, 85, 35); opacity: 0.3; } .icon_wallet_color .path9:before { content: "\e949"; margin-left: -1em; color: rgb(0, 147, 247); } .icon_wallet_color .path10:before { content: "\e94a"; margin-left: -1em; color: rgb(5, 128, 229); } .icon_wallet_color .path11:before { content: "\e94b"; margin-left: -1em; color: rgb(36, 209, 255); } .icon_wallet_color .path12:before { content: "\e94c"; margin-left: -1em; color: rgb(170, 93, 41); } .icon_wallet_color .path13:before { content: "\e94d"; margin-left: -1em; color: rgb(158, 85, 35); } .icon_wallet_color .path14:before { content: "\e94e"; margin-left: -1em; color: rgb(158, 85, 35); opacity: 0.3; } .icon_wallet_color .path15:before { content: "\e94f"; margin-left: -1em; color: rgb(18, 219, 85); } .icon_wallet_color .path16:before { content: "\e950"; margin-left: -1em; color: rgb(16, 193, 70); } .icon_wallet_color .path17:before { content: "\e951"; margin-left: -1em; color: rgb(41, 239, 102); } .icon_wallet_color .path18:before { content: "\e952"; margin-left: -1em; color: rgb(181, 104, 35); } .icon_wallet_color .path19:before { content: "\e953"; margin-left: -1em; color: rgb(168, 94, 32); } .icon_wallet_color .path20:before { content: "\e954"; margin-left: -1em; color: rgb(198, 118, 52); } .icon_wallet_color .path21:before { content: "\e955"; margin-left: -1em; color: rgb(198, 118, 52); } .icon_wallet_color .path22:before { content: "\e956"; margin-left: -1em; color: rgb(198, 118, 52); } .icon_wallet_color .path23:before { content: "\e957"; margin-left: -1em; color: rgb(211, 151, 84); } .icon_wallet_color .path24:before { content: "\e958"; margin-left: -1em; color: rgb(211, 151, 84); } .icon_wallet_color .path25:before { content: "\e959"; margin-left: -1em; color: rgb(211, 151, 84); } .icon_invoice_color .path1:before { content: "\e95a"; color: rgb(234, 234, 234); } .icon_invoice_color .path2:before { content: "\e95b"; margin-left: -1em; color: rgb(209, 209, 209); } .icon_invoice_color .path3:before { content: "\e95c"; margin-left: -1em; color: rgb(153, 153, 153); } .icon_invoice_color .path4:before { content: "\e95d"; margin-left: -1em; color: rgb(109, 109, 109); } .icon_invoice_color .path5:before { content: "\e95e"; margin-left: -1em; color: rgb(153, 153, 153); } .icon_invoice_color .path6:before { content: "\e95f"; margin-left: -1em; color: rgb(109, 109, 109); } .icon_invoice_color .path7:before { content: "\e960"; margin-left: -1em; color: rgb(153, 153, 153); } .icon_invoice_color .path8:before { content: "\e961"; margin-left: -1em; color: rgb(109, 109, 109); } .icon_invoice_color .path9:before { content: "\e962"; margin-left: -1em; color: rgb(153, 153, 153); } .icon_coinsValk:before { content: "\e963"; } .icon_mastercard_linear:before { content: "\e964"; } .icon_mail_color .path1:before { content: "\e965"; color: rgb(209, 209, 209); } .icon_mail_color .path2:before { content: "\e966"; margin-left: -1em; color: rgb(234, 234, 234); } .icon_mail_color .path3:before { content: "\e967"; margin-left: -1em; color: rgb(186, 186, 186); } .icon_coins_color .path1:before { content: "\e968"; color: rgb(51, 169, 224); } .icon_coins_color .path2:before { content: "\e969"; margin-left: -1em; color: rgb(0, 149, 219); } .icon_coins_color .path3:before { content: "\e96a"; margin-left: -1em; color: rgb(255, 152, 2); } .icon_coins_color .path4:before { content: "\e96b"; margin-left: -1em; color: rgb(239, 125, 0); } .icon_coins_color .path5:before { content: "\e96c"; margin-left: -1em; color: rgb(255, 255, 255); } .icon_coins_color .path6:before { content: "\e96d"; margin-left: -1em; color: rgb(60, 60, 59); } .icon_coins_color .path7:before { content: "\e96e"; margin-left: -1em; color: rgb(0, 148, 218); } .icon_coins_color .path8:before { content: "\e96f"; margin-left: -1em; color: rgb(0, 148, 218); } .icon_coins_color .path9:before { content: "\e970"; margin-left: -1em; color: rgb(0, 148, 218); } .icon_coins_color .path10:before { content: "\e971"; margin-left: -1em; color: rgb(0, 148, 218); } .icon_coins_color .path11:before { content: "\e972"; margin-left: -1em; color: rgb(0, 148, 218); } .icon_coins_color .path12:before { content: "\e973"; margin-left: -1em; color: rgb(0, 148, 218); } .icon_coins_color .path13:before { content: "\e974"; margin-left: -1em; color: rgb(0, 148, 218); } .icon_coins_color .path14:before { content: "\e975"; margin-left: -1em; color: rgb(0, 148, 218); } .icon_coins_color .path15:before { content: "\e976"; margin-left: -1em; color: rgb(0, 148, 218); } .icon_coins_color .path16:before { content: "\e977"; margin-left: -1em; color: rgb(60, 60, 59); } .icon_coins_color .path17:before { content: "\e978"; margin-left: -1em; color: rgb(60, 60, 59); } .icon_coins_color .path18:before { content: "\e979"; margin-left: -1em; color: rgb(60, 60, 59); } .icon_coins_color .path19:before { content: "\e97a"; margin-left: -1em; color: rgb(60, 60, 59); } .icon_coins_color .path20:before { content: "\e97b"; margin-left: -1em; color: rgb(60, 60, 59); } .icon_coins_color .path21:before { content: "\e97c"; margin-left: -1em; color: rgb(60, 60, 59); } .icon_giftcard_color .path1:before { content: "\e97d"; color: rgb(51, 169, 224); } .icon_giftcard_color .path2:before { content: "\e97e"; margin-left: -1em; color: rgb(0, 149, 219); } .icon_giftcard_color .path3:before { content: "\e97f"; margin-left: -1em; color: rgb(0, 142, 186); } .icon_giftcard_color .path4:before { content: "\e980"; margin-left: -1em; color: rgb(0, 142, 186); } .icon_giftcard_color .path5:before { content: "\e981"; margin-left: -1em; color: rgb(255, 152, 2); } .icon_giftcard_color .path6:before { content: "\e982"; margin-left: -1em; color: rgb(255, 152, 2); } .icon_giftcard_color .path7:before { content: "\e983"; margin-left: -1em; color: rgb(255, 134, 3); } .icon_giftcard_color .path8:before { content: "\e984"; margin-left: -1em; color: rgb(255, 134, 3); } .icon_giftcard_color .path9:before { content: "\e985"; margin-left: -1em; color: rgb(239, 125, 0); } .icon_giftcard_color .path10:before { content: "\e986"; margin-left: -1em; color: rgb(232, 99, 0); } .icon_giftcard_color .path11:before { content: "\e987"; margin-left: -1em; color: rgb(239, 125, 0); } .icon_giftcard_color .path12:before { content: "\e988"; margin-left: -1em; color: rgb(232, 99, 0); } .icon_giftcard_color .path13:before { content: "\e989"; margin-left: -1em; color: rgb(255, 140, 3); } .icon_giftcard_color .path14:before { content: "\e98a"; margin-left: -1em; color: rgb(255, 140, 3); } .icon_giftcard_color .path15:before { content: "\e98b"; margin-left: -1em; color: rgb(0, 88, 127); } .icon_giftcard_color .path16:before { content: "\e98c"; margin-left: -1em; color: rgb(0, 88, 127); } .icon_giftcard_color .path17:before { content: "\e98d"; margin-left: -1em; color: rgb(0, 88, 127); } .icon_giftcard_color .path18:before { content: "\e98e"; margin-left: -1em; color: rgb(0, 88, 127); } .icon_giftcard_color .path19:before { content: "\e98f"; margin-left: -1em; color: rgb(0, 88, 127); } .icon_giftcard_color .path20:before { content: "\e990"; margin-left: -1em; color: rgb(0, 88, 127); } .icon_giftcard_color .path21:before { content: "\e991"; margin-left: -1em; color: rgb(0, 88, 127); } .icon_giftcard_color .path22:before { content: "\e992"; margin-left: -1em; color: rgb(0, 88, 127); } .icon_list_layout:before { content: "\e993"; } .icon_grid_layout:before { content: "\e994"; } .icon_plus_round:before { content: "\e995"; } .icon_arrow_down_round:before { content: "\e996"; } .icon_star:before { content: "\e997"; } .icon_arrow_right_round:before { content: "\e998"; } .icon_arrow_up_round:before { content: "\e999"; } .icon_arrow_down:before { content: "\e99a"; } .icon_arrow_up:before { content: "\e99b"; } .icon_postnl_filled:before { content: "\e99c"; } .icon_arrow_left_round:before { content: "\e99d"; } .icon_arrow_right:before { content: "\e99e"; } .icon_filter:before { content: "\e99f"; } .icon_close_round:before { content: "\e9a0"; } .icon_menu_mobile:before { content: "\e9a1"; } .icon_star_half:before { content: "\e9a2"; } .icon_thuiswinkel_waarborg:before { content: "\e9a3"; } .icon_sort:before { content: "\e9a4"; } .icon_min_round:before { content: "\e9a5"; } .icon_serach_mobile:before { content: "\e9a6"; } .icon_paper_plane:before { content: "\e9a7"; } .icon_location_pin:before { content: "\e9a8"; } .icon_location_arrow:before { content: "\e9a9"; } .icon_calander:before { content: "\e9aa"; } .icon_creditcards_linear:before { content: "\e9ab"; } .icon_mastercard_filled:before { content: "\e9ac"; } .icon_retour_filled:before { content: "\e9ad"; } .icon_zoom:before { content: "\e9ae"; } .icon_clock:before { content: "\e9af"; } .icon_ideal:before { content: "\e9b0"; } .icon_supprt:before { content: "\e9b1"; } .icon_dhl:before { content: "\e9b2"; } .icon_visa:before { content: "\e9b3"; } .icon_paypal:before { content: "\e9b4"; } .icon_ups:before { content: "\e9b5"; } .icon_postnl_linear:before { content: "\e9b6"; } .icon_creditcards_filled:before { content: "\e9b7"; } .icon_home:before { content: "\e9b8"; } .icon_mail:before { content: "\e9b9"; } .icon_trash:before { content: "\e9ba"; } .icon_retour_linear:before { content: "\e9bb"; } .icon_truck:before { content: "\e9bc"; } .icon_smartphone:before { content: "\e9bd"; } .icon_arrow_2_right:before { content: "\e9be"; } .icon_arrow_2_left:before { content: "\e9bf"; } .icon_plus:before { content: "\e9c0"; } .icon_heart_fill:before { content: "\e9c1"; } .icon_heart_linear:before { content: "\e9c2"; } .icon_min:before { content: "\e9c3"; } .icon_user:before { content: "\e9c4"; } .icon_arrow_left:before { content: "\e9c5"; } .icon_search:before { content: "\e9c6"; } .icon_check_round:before { content: "\e9c7"; } .icon_close:before { content: "\e9c8"; } .icon_cart:before { content: "\e9c9"; } .icon_check:before { content: "\e9ca"; } .icon_instagram:before { content: "\e9cb"; } .icon_twitter:before { content: "\e9cc"; } .icon_facebook:before { content: "\e9cd"; } .icon_whatsapp:before { content: "\e9ce"; } .icon_linkedin:before { content: "\e9cf"; } .icon_pinterest:before { content: "\e9d0"; } .icon_google:before { content: "\e9d1"; } .icon_youtube:before { content: "\e9d2"; } .icon_paypal-long:before { content: "\e9d3"; } .icon_mastercard:before { content: "\e9d4"; } /* fallback */ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(/fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* color variant */ :root{ /* main color */ --gray-dark: #3e3e3d; --gray: #dfdfdf; --gray-light: #f8f8f8; --main: #4a4541; --main-dark: #002655; --secondary: #ee7b8a; --white: #ffffff; } #header-view { background-color: var(--gray-light, #f8f8f8); } .header-logo-wrapper { margin-left: 30px; } #header-logo { margin-left: 0; } /* filter item count background */ #header-filter-title .title-wrapper .products-found, #header-filter-title:active { background-color: var(--secondary, #ee7b8a); color: var(--white, #ffffff); } /* filter delete icon */ .header-filter-button .header-filter-button-cancel { background-color: var(--secondary, #ee7b8a); color: var(--white, #ffffff); } /* header store */ #header-store { color: #000; border: 1px solid #000; } /* header count */ .header-button-count { background-color: var(--secondary, #ee7b8a); color: var(--gray-light, #f8f8f8); } /* header ndoe count */ .header-navigation-node-count { background-color: var(--secondary, #ee7b8a) !important; } /* filter bar */ #header-filter, #header-filter-title { background-color: var(--main, #4a4541); } /* PLP: arrow in button product switch */ #header-navigation-next, #header-navigation-prev { color: var(--main, #4a4541); } /* PDP tab switch */ #product-detail-header-content-tabs li:not(.active) > a > .product-detail-header-content-tabs-tab { color: var(--main, #4a4541); } /* Timeout Popup Button Continue & Clear */ .popup-button, #timeout-popup-continue, #timeout-popup-clear, #popup-ok { background-color: var(--main, #4a4541); } .popup-button:active, #timeout-popup-continue:active, #timeout-popup-clear:active, #popup-ok:active { background-color: var(--secondary, #ee7b8a); } /* logo click */ .header-logo-wrapper:active { background-color: var(--secondary, #ee7b8a); } /* search icon click */ .header-button { background-color: var(--main, #4a4541); } .header-button:active { background-color: var(--secondary, #ee7b8a); } .search-dialog-button, .search-dialog-close-btn, .search-dialog-button #dialog-search-icon { background: var(--secondary, #ee7b8a) !important; color: var(--white, #ffffff) !important; } /* product popup close icon */ #product-detail .product-detail-close-btn { color: var(--secondary, #ee7b8a); } /* Next & Prev Button */ #next-button, #prev-button { background-color: var(--main, #4a4541); color: var(--white, #ffffff); } /* breadcrumb */ #header-breadcrumb-home, #error-home { background: var(--main, #4a4541); color: var(--white, #ffffff); } #header-breadcrumb-home { padding-left: 20px; padding-right: 20px; } #header-breadcrumb { background-color: var(--main, #4a4541) !important; margin-left: 0; } #header-breadcrumb-home { padding-left: 30px; } .header-breadcrumb-link, .header-breadcrumb-link[class~="selected"] { background-color: var(--main, #4a4541); color: var(--white, #ffffff); padding-right: 10px; } .header-breadcrumb-link:active, #header-breadcrumb-home:active { background-color: var(--secondary, #ee7b8a); color: var(--white, #ffffff); } .header-breadcrumb-link .header-breadcrumb-link-count { background-color: var(--secondary, #ee7b8a); } ul.filter-item-list li .count { background-color: var(--secondary, #ee7b8a); color: var(--white, #ffffff); padding: 2px 6px; border-radius: 16px; } ul.filter-item-list li.filter-show-more:active { background-color: var(--secondary, #ee7b8a); } .cart-quantity, .cart-quantity .cart-label, #product-detail-navigation-quantity-title { color: var(--secondary, #ee7b8a); } .cart-checkout-bar #product-detail-navigation-order { background-color: var(--secondary, #ee7b8a); } .cart-checkout-bar #product-detail-navigation-order:active { background-color: var(--secondary, #ee7b8a); } #checkout-steps ul li.checkout-step-active { background-color: var(--secondary, #ee7b8a); } #checkout-steps ul li.checkout-step-active:after { border-left-color: var(--secondary, #ee7b8a); } #checkout-steps ul li.checkout-step-done { background-color: var(--main, #4a4541); } #checkout-steps ul li.checkout-step-done:after { border-left-color: var(--main, #4a4541); } .product-footer .cart-add { background-color: var(--secondary, #ee7b8a); } .discount-tag { background: var(--secondary, #ee7b8a) !important; } #product-detail-navigation-quantity-add, #product-detail-navigation-quantity-remove, .cart-increment, .cart-decrement { color: var(--secondary, #ee7b8a); } #product-detail-navigation-order, #product-detail-navigation-noOrder { background: var(--secondary, #ee7b8a); } /* checkout main button */ .form-box button, .checkout-pickup button .order-button-label { background-color: var(--secondary, #ee7b8a); } .cart-checkout-bar { background-color: var(--gray, #dfdfdf); } .form-box button:active, .checkout-pickup button .order-button-label:active { background-color: var(--secondary, #ee7b8a); } /* other style fixed */ .product-image { margin: 10px; } .product-image img { max-width: 100%; max-height: 100%; overflow: hidden; }