/* ---------- Media queries ---------- */ /*Rules For m and large min-width: 320px */ @media only screen and (min-width: 320px) { .single-products .single-product .single-option{line-height: 32px; height: 34px; } .single-products .single-product .single-option span{font-size: 14px; font-weight: 400; line-height: 34px;} .single-products .single-product .single-option ul {height: 32px;} .single-products .single-product .single-option ul li{display: inline-block; /*width: 26px;*/ vertical-align: middle; height: 100%; margin-right: 6px; /*line-height: 30px;*/} .single-products .single-product .single-option ul li img{display: inline-block; vertical-align: middle;} .single-products .single-product .single-option ul li.arrow{background-position-y: -54px;} } /*Rules For m and large min-width: 960px */ @media only screen and (min-width: 960px) { /*#pageFront #banners{width: 910px; margin: 0 auto; margin-top: 18px;}*/ /*#pageFront #banners div.corousel-wrapper{width: 800px; float: right;}*/ #pageFront .corousel-wrapper a.control{display: none;} #pageFront .corousel-wrapper:hover a.control{display: block;} .single-product .name {/*min-height: 44px;*/ max-height: 66px;} .single-product .name b, .single-product .name p{font-size: 16px; line-height: 22px;} .csstransforms #banners div.corousel-wrapper { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .single-product-image:hover .data{display: block;} .single-product-image:hover .addToCartFeedProduct {display: block; font-size: 15px; color: white; background-color: #ab7414;} /* .single-products:not(.side-image) .single-product .single-option{line-height: 32px; height: 34px; } .single-products:not(.side-image) .single-product .single-option span{font-size: 14px; font-weight: 400; line-height: 34px;} .single-products:not(.side-image) .single-product .single-option ul {height: 32px;} .single-products:not(.side-image) .single-product .single-option ul li{display: inline-block; vertical-align: middle; height: 100%; margin-right: 6px;} .single-products:not(.side-image) .single-product .single-option ul li img{display: inline-block; vertical-align: middle;} .single-products:not(.side-image) .single-product .single-option ul li.arrow{background-position-y: -54px;}*/ } /*Rules For large min-width: 1221px */ @media only screen and (min-width: 1221px) { #christmasSliderWrap{margin-left: 5%; margin-right: 5%;} #frontpageLastViewed{padding-left: 5%; padding-right: 5%;} #header .page, #pageFront .page, #pageCategory .page {padding-left: 25px; padding-right: 25px;} #categoryTile {width: 24%; margin: 0;} #categoryTileRow{ background-color: #f3f3f3; padding-right: 5%; padding-left: 5%; width: 100%; margin-top: 35px; margin-bottom: 10px; justify-content: space-between; }} .single-product-image{width: 290px; height: 290px;} .single-product-image .data > a.info span.name{font-size: 18px;} .single-product-image:hover .addToCartFeedProduct {display: block; font-size: 16px; color: white; background-color: #ab7414;} } /*Rules For large min-width: 1500px */ @media only screen and (min-width: 1500px) { .col-xl-5 .column{width: 20%;} .col-xl-4 .column{width: 25%;} .col-xl-3 .column{width: 33.333%;} .col-xl-2 .column{width: 50%;} .col-xl-1 .column{width: 100%;} } /*Rules For M, S and XS max-width: 1220px */ @media only screen and (max-width: 1220px) { #categoryTile{width: 46%;} #pageFront #secureShopping > .page > .row .column p{font-size: 0.9375rem; background-size: 50px; padding-left: 62px;} #pageFront #frontpageLowerBanners .page{padding-left: 15px;} #pageFront #frontpageLowerBanners div.banners div.item{margin-top: 15px; } #pageFront #frontpageLowerBanners div.banners div.item.half{padding-right: 15px;} } @media only screen and (max-width: 850px) { #categoryTile{width: 48%;} #categoryTileRow{padding: 0; padding-bottom: 25px;} #footer #esmaspaevRiba{display: none;} #christmasSliderWrap{max-width: 100%; margin-left: 0; margin-right: 0;} } /*Rules For S and XS and XXS max-width: 959px */ @media only screen and (max-width: 959px) { #header{height: 115px;} .maskAfterHeader{top: 115px;} #header .headerWrapper a.mobileMainMenu{position: absolute; top: 17px; left: 0; display: block !important; width: 28px; height: 20px; line-height: 20px; background: url("/shoppa/gfx/new/menu-blue.svg") no-repeat left top; background-size: 28px 20px;} .no-svg #header .headerWrapper a.mobileMainMenu{background: url("/shoppa/gfx/new/menu-blue.png") no-repeat left top;} #header #navigation{display: none;} #header #searchBox{width: 100%; top: 55px; left: 0; } #header #logo, #header #searchBox, #header #userBox{position: absolute; float: none;} #header #logo{top: 13px; left: 43px; width: 108px;} #header #logo h1, #header #logo h3{height: 27px; line-height: 27px;} #header #userBox{top: 5px; right: 0;} #header #userBox > li.account > a > span.icon{display: block;} #header #userBox > li.account > a > span.text{display: none;} #header #userBox > li.account > a > span.drop{display: none;} body.mobileMainMenuOpen{position: relative; overflow: hidden;} body.mobileMainMenuOpen div.canvas{position: absolute; left: 270px; top: 0; right: -270px;} body.mobileMainMenuOpen div.canvasMaskWrapper{display: block;} body.mobileMainMenuOpen #mobileMainMenu{display: block;} #banners{ margin-bottom: 0;} #banners > div.page{padding: 0;} #banners > div.page > div.left{display: none} #banners > div.page > div.right{min-height: 0; height: auto;} #banners div.corousel-wrapper{margin-top: 0;} #pageFront #banners .corousel-wrapper{margin-bottom: 0;} #mobileMenuBlock{display: block;} #mobileMenuBlock ol li{width: 25%;} #pageFront #secureShopping{padding-top: 33px;} #pageFront #secureShopping .center {text-align: left; padding-left: 2em;} #pageFront #secureShopping > .page > .row{margin-top: 22px;} #pageFront #secureShopping > .page > .row .column{width: 50%; padding: 0 0 0 2em;} #pageFront #secureShopping > .page > .row .column > div{display: block;} #pageFront #secureShopping > .page > .row .column p{background-size: 46px; padding-left: 56px;} #shoppaDeals .page{padding: 0;} #shoppaDeals .page > div.row{padding: 20px; padding-bottom: 40px; padding-top: 40px; border-top: 0; border-left: 0; border-right: 0;} #shoppaDeals .column {display: inline-block; float: none; vertical-align: top;} #shoppaDeals .column.single-product{width: 50%;} #shoppaDeals .column.single-product:nth-child(6){display: none;} #pageFront #frontpageLowerBanners .page{padding: 0;} #pageFront #frontpageLowerBanners div.banners div.item.half{width: 100%; padding-right: 0;} .single-product-image .data{background: none;} .single-product-image .data > a.info{display: none;} .single-product-image .data > a.info.mobile{display: block;} .single-product-image:hover .data{display: block;} .single-product-image:hover .addToCartFeedProduct {display: block; font-size: 11px; color: white; background-color: #ab7414; position: absolute; top: } #brands .row .search-wrapper{ width: 100%; } #brands .row .index{width: 100%; padding-left: 0; margin-top: 0.5rem;} #brands .row .index h4{padding-left: 0;} #brands .row .index ol{margin-left: -0.5rem;} #brands .row .index ol li a{font-size: 0.9375rem;} #facebookBox{display: none;} #pageCartPaymentContinue #content > div.page div.left {overflow: visible; width: 100%;} #pageCartPaymentContinue #content > div.page div.right {display: none;} #pageCartThankYou #content > div.page div.left {overflow: visible; width: 100%;} #pageCartThankYou #content > div.page div.right {display: none;} #pageCartThankYou #thankYou{border: none; padding: 0;} } /*M - Medium screens (min-width: 960px) and (max-width: 1220px) */ @media only screen and (min-width: 960px) and (max-width: 1220px) { .page{width: 940px;} #categoryTileRow { background-color: #f3f3f3; padding-right: 5.7%; padding-left: 9.1%; width: 100%; margin-top: 35px; margin-bottom: 10px; } .corousel-wrapper .corousel-items .item .content h2{font-size: 30px; line-height: 35px;} .corousel-wrapper .corousel-items .item .content p{font-size: 18px;} .corousel-wrapper .corousel-items .item .content a.button {height: 40px; line-height: 40px; font-size: 16px; padding: 0 30px;} #pageFront .corousel-wrapper .corousel-items .item div.secureShopping{height: 75px; width: 75px; right: 30px; top: 30px;} #navigation #menu > div > ul > li .submenu{width: 725px;} #navigation #menu > div > ul > li .submenu .col{padding-left: 10px;} #navigation #menu > div > ul > li .submenu .col > ul >li.title > a{font-size: 15px;} #navigation #menu > div > ul > li .submenu .col > ul >li a{font-size: 12px; } #pageFront #secureShopping .row .column p{background-size: 50px; padding-left: 62px; font-size: 1em;} #pageFront #secureShopping > .page > .row .column{padding: 0 0.5rem;} #shoppaDeals .column.single-product{width: 25%;} #shoppaDeals .column.single-product:nth-child(6){display: none;} #newsletter{height: 303px;} #newsletter h2{padding-top: 50px;} #newsletter .row input{width: 350px;} .col-m-5 .column{width: 20% !important;} .col-m-4 .column{width: 25% !important;} .col-m-3 .column{width: 33.333% !important;} .col-m-2 .column{width: 50% !important;} .col-m-1 .column{width: 100% !important;} #footer .menu .footerLinks ul{width: 32%;} } /* S - Tablets and small screens (min-width: 740px) and (max-width: 959px)*/ @media only screen and (min-width: 740px) and (max-width: 959px) { .page{width: 100%;} .corousel-wrapper .corousel-items .item .content h2{font-size: 30px; line-height: 32px; } .corousel-wrapper .corousel-items .item .content p{font-size: 22px; } .corousel-wrapper .corousel-items .item .content a.button {margin-top: 10px; height: 45px; line-height: 45px;} #pageFront .corousel-wrapper .corousel-items .item div.secureShopping{height: 94px; width: 94px; right: 50px; top: 25px;} #newsletter{height: 243px;} #newsletter h2{font-size: 24px; line-height: 28px; padding-top: 38px;} #newsletter .row{margin-top: 0px;} #newsletter .row input{width: 275px; margin-right: 0.5rem; font-size: 1.125rem;} #newsletter p {font-size: 0.75rem; margin-top: 13px;} .col-s-5 .column{width: 20% !important;} .col-s-4 .column{width: 25% !important;} .col-s-3 .column{width: 33.333% !important;} .col-s-2 .column{width: 50% !important;} .col-s-1 .column{width: 100% !important;} #footer .menu .footerLinks{width: 100%;} #footer .menu .footerLinks ul{width: 32%;} #footer .menu .right{display: none;} /* div.modal.modalAccountMoney .modal-dialog{width: 705px;} #modalAccountMoney10.modal.modalAccountMoney .modal-dialog, #modalAccountMoney20.modal.modalAccountMoney .modal-dialog{background-size: contain;} div.modal.modalAccountMoney .modal-content{margin-top:5px;} div.modal.modalAccountMoney .modal-content h2{font-size: 30px; line-height: 36px;} div.modal.modalAccountMoney .modal-content h4{font-size: 18px; margin-top: 50px;} div.modal.modalAccountMoney .modal-content .inputArea{margin-top: 35px;}*/ /* #modalParfumeGift .modal-dialog{width: 705px; background-size: contain;} #modalParfumeGift .modal-content div.mainModal{padding-left: 25px;} #modalParfumeGift .modal-content h2{font-size: 36px; line-height: 42px;} #modalParfumeGift .modal-content h4{margin-top: 50px;} #modalParfumeGift .modal-content div.parfumeSelection div.selection div.image{height: 90px; width: 90px;} #modalParfumeGift .modal-content div.parfumeForm{width: 270px; margin-right: 20px;} #modalParfumeGift .modal-content div.parfumeGiftRules{margin-top: 70px;}*/ .single-product:hover div.addButtonWrapper{display: none;} } /* XS - Mobiles max-width: 739px*/ @media screen and (max-width: 739px) { .page{width: 100%;} #christmasFeedWrapper {max-width: 100%;} #christmasSliderWrap {margin-bottom: 35px;max-width: 100%; margin-left: auto; margin-right: auto;} #categoryTile {width: 48% !important;} #incompletePaymentBlock > div.page > div p{display: block; line-height: 28px; margin-top: -7px;} #incompletePaymentBlock > div.page > div a.button{display: block; height: 35px; line-height: 35px; font-size: 15px; margin-left: 0;} #header #userBox > li#compare > a > span.text{display: none;} #header #userBox > li#cart > a > span.text{display: none;} #header #userBox > li#compare{display: none;} #header #userBox > li#cart > a{border-left: 0;} .single-product a.compare, #addToComparision{display: none !important;} .corousel-wrapperousel-indicators{display: none;} .corousel-wrapper .control span{height: 23px; width: 14px; background-size: 100%; margin-top: -12px;} .corousel-wrapper .control.previous:hover span, .corousel-wrapper .control.next:hover span{background-position: 0 -24px;} .corousel-wrapper .corousel-items .item .content{bottom: 26px; left: 5%; right: 5%;} .corousel-wrapper .corousel-items .item .content h2{font-size: 20px; line-height: 20px; margin-bottom: 10px;} .corousel-wrapper .corousel-items .item .content p{font-size: 15px; line-height: 15px; } .corousel-wrapper .corousel-items .item .content a.button{/*width: 100%;*/ /*text-align: center;*/ font-size: 20px; margin-top: 15px;} #pageFront .corousel-wrapper .corousel-items .item div.secureShopping{display: none;} #mobileMenuBlock ol li{width: 33.33333%;} #newsletter{height: 192px;} #newsletter h2{font-size: 18px; line-height: 21px; padding-top: 32px;} #newsletter .row{margin-top: -6px;} #newsletter .row input{width: 205px; margin-right: 0; height: 38px; font-size: 16px;} #newsletter .row button{height: 40px; font-size: 16px; line-height: 16px;} #newsletter p {margin-top: 8px;} .col-xs-5 .column{width: 20% !important;} .col-xs-4 .column{width: 25% !important;} .col-xs-3 .column{width: 33.333% !important;} .col-xs-2 .column{width: 50% !important;} .col-xs-1 .column{width: 100% !important;} #footer .menu .footerLinks{width: 100%;} #footer .menu .footerLinks ul{width: 40%;} #footer .menu .right{display: none;} #modalSignUpNewsletter{display: none !important;} div.attention{text-align: left; padding-left: 10px;} #pageCartThankYou #content #thankYouBottom{display: none;} #pageCartPaymentContinue .selectionData div.prepaymentBlock{border: none !important;} #pageCartPaymentContinue div.paymentSelect{padding: 50px 0px 0px !important;} .shoppa-form .row .column.name, .shoppa-form .row .column.input{width: 100% !important;} .shoppa-form .row.error .column.name{padding-top: 8px;} .shoppa-form .row .column.name.empty{height: 0; margin:0; padding:0;} .shoppa-form .row .column.input div.input-wrap, .shoppa-form .row .column.input div.select-menu, .shoppa-form .row .column.input input.common.lenght-full, .shoppa-form .row .column.input input.common.lenght-mth {width: 90% !important;} .single-product .single-product-container {padding: 0 10px; padding-top: 10px;} .single-products .single-product .single-product-container{border: none; padding: 0;} .single-product-image{width: 230px; height: 230px;} .single-product-image .data > a.info span.name{font-size: 15px;} ul.pager > li.go.first, ul.pager > li.go.last{display: none;} /* div.modal.modalAccountMoney .modal-dialog{width: 450px;} #modalAccountMoney10.modal.modalAccountMoney .modal-dialog, #modalAccountMoney20.modal.modalAccountMoney .modal-dialog{background-size: cover;} div.modal.modalAccountMoney .modal-content{margin-top:10px;} div.modal.modalAccountMoney .modal-content h2{font-size: 23px; line-height: 30px;} div.modal.modalAccountMoney .modal-content h4{font-size: 18px; width: 80%; margin: 0 auto; margin-top: 40px; margin-bottom: 10px;} div.modal.modalAccountMoney .modal-content .inputArea{margin-top: 0px;}*/ /* #modalParfumeGift .modal-dialog{width: 450px;} #modalParfumeGift .modal-content{background: #fff; padding-bottom: 0;} #modalParfumeGift .modal-content div.mainModal{padding-top: 10px; padding-left: 0; padding-right: 0x;} #modalParfumeGift .modal-content h2{font-size: 34px; line-height: 40px; width: 100%; text-align: center;} #modalParfumeGift .modal-content div.lastWinner{display: none;} #modalParfumeGift .modal-content div.selectAndForm{float: left; width: 100%; background: #ffbd31; padding-left: 25px; padding-right: 25px; margin-top: 20px;} #modalParfumeGift .modal-content h4{margin-top: 25px; text-align: center;} #modalParfumeGift .modal-content div.parfumeSelection{width: 100%;} #modalParfumeGift .modal-content div.parfumeSelection div.selection{padding: 25px 25px 15px;} #modalParfumeGift .modal-content div.parfumeSelection div.selection div.image{height: 90px; width: 90px;} #modalParfumeGift .modal-content div.parfumeForm{ clear: both; margin-right: 0; width: 400px; margin-top: 20px;} #modalParfumeGift .modal-content div.parfumeForm label.shoppa-checkbox{width: 100%;} #modalParfumeGift .modal-content div.parfumeGiftRules{margin-top: 70px;} #modalParfumeGift .modal-content div.parfumeForm a.notInterested{display: inline-block; width: 100%; margin-bottom: 20px;} #modalParfumeGift .modal-content div.parfumeGiftRules{margin-top: 30px; padding-left: 25px; margin-bottom: 20px;}*/ #modalProductAddedToCart .modal-dialog{width: 100%;} #modalProductAddedToCart .modal-content h2{font-size: 22px;} #modalProductAddedToCart .modal-content div.buttons a.button{height: 40px; line-height: 40px; font-size: 14px;} #modalProductAddedToCart .modal-content div.buttons a.commonph {margin-right: 20px;} .single-product:hover div.addButtonWrapper{display: none;} .single-products.side-image a.compare{display: none !important;} .single-products.side-image a.similarProducts{display: none !important;} } /* XXS - Mobiles max-width: 480px*/ @media screen and (max-width: 480px) { #categoryTile{width: 100% !important;} #categoryTileRow{padding-left: 0 !important; padding-right: 0 !important;} #christmasSliderWrap {margin-bottom: 35px;max-width: 100%; margin-left: auto; margin-right: auto;} #christmasFeedWrapper{max-width: 100%; margin-left: auto; margin-right: auto;} #incompletePaymentBlock > div.page > div{background-image: none; padding-left: 0; margin-right: 15px; min-width: 256px;} #incompletePaymentBlock > div.page > div p{font-size: 15px;} #incompletePaymentBlock > div.page > div a.button{margin-left: 0;} .corousel-wrapper .corousel-items .item .content a.button{width: 100%; text-align: center; font-size: 20px; margin-top: 15px;} .col-xxs-5 .column{width: 20% !important;} .col-xxs-4 .column{width: 25% !important;} .col-xxs-3 .column{width: 33.333% !important;} .col-xxs-2 .column{width: 50% !important;} .col-xxs-1 .column{width: 100% !important;} .col-xxs-1 .column.single-product .single-product-container{overflow: hidden; padding-top: 3px; padding-bottom: 3px;} .col-xxs-1 .column.single-product .imageWrapper{width: 35%; margin: 0; float: left;} .col-xxs-1 .column.single-product .single-product-container .data{width: 65%; float: left; padding-left: 20px; height: auto; margin-top: 10px;} .col-xxs-1 .column.single-product .imageWrapper .single-option{display: none;} .col-xxs-1 .column.single-product .mobile-single-option{display: block; width: 100%; float: left; margin-top: 15px; margin-bottom: 15px;} .col-xxs-1 .column.single-product .mobile-single-option .single-option{margin-left: 0; position: initial; bottom: auto;} .single-product .single-top{ width: 40px; height: 40px; top: 0; left:2px; border-radius: 40px; line-height: 40px;} .single-product .similarProducts{position: relative; margin-top: 15px; bottom: 3px; width: 100%;} #mobileMenuBlock ol li a{padding-top: 100%;} #mobileMenuBlock ol li a span{font-size: 12px; padding: 0 5px; line-height: 13px; bottom: auto; top: 72%;} #shoppaDeals .column.info h2 span{font-size: 26px; line-height: 26px;} #shoppaDeals .column{width: 100%;} #shoppaDeals .column.info{padding: 0;} #shoppaDeals .column.single-product{width: 100%; border-bottom: 1px solid #eaeaea; padding-bottom: 15px;} #shoppaDeals .column.single-product:nth-child(5), #shoppaDeals .column.single-product:nth-child(6){display: none;} #shoppaDeals .column.single-product:nth-child(4){border-bottom: 0;} .single-product-image{width: 150px; height: 200px; margin-right: 0px;} .single-product-image .data > a.info span.name{font-size: 14px;} .single-product-image .data > a.button{font-size: 11px;} .single-product-image:hover .addToCartFeedProduct {display: block; font-size: 11px; color: white; background-color: #ab7414;} #frontpageLastViewed .titleBar > a{clear: both; float: left; margin-top: 10px;} #frontpageLastViewed{padding-top: 0;} #pageFront #secureShopping h2{font-size: 28px; line-height: 36px; text-align: left;} #pageFront #secureShopping h2 span.secure{vertical-align: sub;} #pageFront #secureShopping > .page > .row .column{width: 100%; padding: 0 0 0 15px;} #pageFront #secureShopping > .page > .row .column p{font-size: 18px; line-height: 24px; background-size: 50px; padding-left: 62px;} #pageFront #secureShopping .center{padding-left: 15px;} #pageFront #frontpageLowerBanners div.banners div.item{margin-top: 12px; } #dayOffers .titleBar > h2 {width: 100%; text-align: center; } #dayOffers .titleBar a.linkForward{display: none;} #newsletter { background: url("../gfx/new/newslettwer-m.jpg") no-repeat scroll center center / cover #f89500; height: 630px;} #newsletter .page{position: relative;} #newsletter h2{font-size: 20px; line-height: 26px; position: relative; top:40px; padding-top: 0;} #newsletter .row{position: relative; top: 355px;} #newsletter .row input{width: 100%; height: 50px; font-size: 18px;} #newsletter .row button{margin-top: 13px; font-size: 20px; height: 50px; line-height: 50px;} #newsletter p{position: relative; top: 370px; width: 180px; margin: 0 auto;} #footer .page{text-align: center;} #footer .clientServiceFooter{display: inline-block; color: #ffa200; ; font-size: 15px; vertical-align: top; line-height: 15px; margin-bottom: 25px;} #footer .clientServiceFooter a{display: inline-block; color: #fff; margin-left: 5px; padding-left: 20px; background: url("../gfx/new/phone-white.svg") no-repeat center left; background-size: 15px 15px; font-weight: 500; font-size: 15px;} .no-svg #footer .clientServiceFooter a{background: url("../gfx/new/phone-white.png") no-repeat center left;} #footer .menu .footerLinks{text-align: left;} #footer .menu .footerLinks ul{width: 100%; margin-bottom: 10px; text-align: center;} #footer .menu .footerLinks ul li{display: none; font-size: 14px;} #footer .menu .footerLinks ul li.title{display: block; cursor: pointer;} #footer .menu .footerLinks ul.open li{display: block} #footer div.partners{display: none;} #footer div.epilogue p{line-height: 19px; font-size: 12px;} ul.pager > li{display: none;} /*ul.pager > li.go.prev, ul.pager > li.go.next, ul.pager > li.active{display: inline-block;}*/ ul.pager{overflow: hidden;} ul.pager > li.go.prev, ul.pager > li.go.next{display: inline-block;} ul.pager > li.go.prev{float: left;} ul.pager > li.go.next{float: right;} div.attention > div{padding-left: 0px; padding-top: 50px; background-position: top center; width: 100%;} div.attention p{text-align: center; width: 100%;} #page404 #content.noSearchResult div.missingContent .searchTips{padding-top: 20px; padding-bottom: 20px; margin-top: 30px;} #modalProductAddedToCart .modal-content div.buttons{text-align: center;} #modalProductAddedToCart .modal-content div.buttons a.commonph {margin-right: 0; margin-bottom: 20px; height: 30px; line-height: 30px;} #modalProductAddedToCart .modal-content div.buttons a.greenForward {width: 100%; height: 40px; line-height: 40px; font-size: 16px;} #modalProductAddedToCart .modal-content div.popupRelatedProducts .single-products .single-product{height: 310px; width: 210px;} }