/* ========================================================================== FONTS ========================================================================== */ @font-face{font-family:gotham;src:url(../fonts/gothamhtf-bold-webfont.woff2) format('woff2'),url(../fonts/gothamhtf-bold-webfont.woff) format('woff');font-weight:400;font-style:normal}@font-face{font-family:gothamlight;src:url(../fonts/gothamhtf-light-webfont.woff2) format('woff2'),url(../fonts/gothamhtf-light-webfont.woff) format('woff');font-weight:400;font-style:normal}@font-face{font-family:gothambold;src:url(../fonts/gothamhtf-book-webfont.woff2) format('woff2'),url(../fonts/gothamhtf-book-webfont.woff) format('woff');font-weight:400;font-style:normal}@font-face{font-family:icomoon;src:url(../fonts/icomoon.eot?e2f2my);src:url(../fonts/icomoon.eot?e2f2my#iefix) format('embedded-opentype'),url(../fonts/icomoon.ttf?e2f2my) format('truetype'),url(../fonts/icomoon.woff?e2f2my) format('woff'),url(../fonts/icomoon.svg?e2f2my#icomoon) format('svg');font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* ========================================================================== Reset & Clearfix (normalize.css v3.0.2) ========================================================================== */ html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}body {margin: 0;}article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;}audio, canvas, progress, video {display: inline-block; vertical-align: baseline;}audio:not([controls]) {display: none; height: 0;}[hidden], template {display: none;}a {background-color: transparent;}a:active, a:hover {outline: 0;}abbr[title] {border-bottom: 1px dotted;}b, strong {font-weight: 700;}dfn {font-style: italic;}h1 {margin: .67em 0; font-size: 2em;}mark {background: #ff0; color: #323137;}small {font-size: 80%;}sub, sup {font-size: 75%; line-height: 0; vertical-align: baseline; position: relative;}sup {top: -.5em;}sub {bottom: -.25em;}img {border: 0;}svg:not(:root) {overflow: hidden;}figure {margin: 1em 40px;}hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}pre {overflow: auto;}code, kbd, pre, samp {font-family: monospace,monospace; font-size: 1em;}button, input, optgroup, select, textarea {margin: 0; font: inherit; color: inherit;}button {overflow: visible;}button, select {text-transform: none;}button, html input[type=button], input[type=reset], input[type=submit] {cursor: pointer; -webkit-appearance: button;}button[disabled], html input[disabled] {cursor: default;}button::-moz-focus-inner, input::-moz-focus-inner {padding: 0; border: 0;}input {line-height: normal;}input[type=checkbox], input[type=radio] {box-sizing: border-box; padding: 0;}input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {height: auto;}input[type=search] {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield;}input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {-webkit-appearance: none;}fieldset {margin: 0 2px; padding: .35em .625em .75em; border: 1px solid silver;}legend {padding: 0; border: 0;}textarea {overflow: auto;}optgroup {font-weight: 700;}table {border-spacing: 0; border-collapse: collapse;}td, th {padding: 0;} *, *:before, *:after {box-sizing: border-box;} .clearfix:before, .clearfix:after {display: table;content: " ";} .clearfix:after {clear: both;} .clear{clear:both;display:block;height:0;overflow:hidden;visibility:hidden;width:0} button {border-radius: 0px;} /* ========================================================================== GRID ========================================================================== */ [class*='grid'],[class*='col-'],[class*='mobile-'],.grid:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}[class*='col-']{float:left;min-height:1px;padding-right:36px}[class*='col-'] [class*='col-']:last-child{padding-right:0}.grid{width:100%;margin:0 auto;overflow:hidden}.grid:after{content:"";display:table;clear:both}.grid-pad{padding-top:0px;padding-left:36px;padding-right:0}.push-right{float:right}.col-1-1{width:100%}.col-2-3,.col-8-12{width:66.66%}.col-1-2,.col-6-12{width:50%}.col-1-3,.col-4-12{width:33.33%}.col-1-4,.col-3-12{width:25%}.col-1-5{width:20%}.col-2-5{width:40%}.col-1-6,.col-2-12{width:16.667%}.col-1-7{width:14.28%}.col-1-8{width:12.5%}.col-1-9{width:11.1%}.col-1-10{width:10%}.col-1-11{width:9.09%}.col-1-12{width:8.33%}.col-11-12{width:91.66%}.col-10-12{width:83.333%}.col-9-12{width:75%}.col-5-12{width:41.66%}.col-7-12{width:58.33%}.push-2-3,.push-8-12{margin-left:66.66%}.push-1-2,.push-6-12{margin-left:50%}.push-1-3,.push-4-12{margin-left:33.33%}.push-1-4,.push-3-12{margin-left:25%}.push-1-5{margin-left:20%}.push-1-6,.push-2-12{margin-left:16.667%}.push-1-7{margin-left:14.28%}.push-1-8{margin-left:12.5%}.push-1-9{margin-left:11.1%}.push-1-10{margin-left:10%}.push-1-11{margin-left:9.09%}.push-1-12{margin-left:8.33%}@media handheld,only screen and (max-width: 767px){.grid{width:100%;min-width:0;margin-left:0;margin-right:0;padding-left:20px;padding-right:10px}[class*='col-']{width:auto;float:none;margin:10px 0;padding-left:0;padding-right:10px}[class*='col-'] [class*='col-']{padding-right:0}[class*='mobile-col-']{float:left;margin:0 0 10px;padding-left:0;padding-right:10px;padding-bottom:0}.mobile-col-1-1{width:100%}.mobile-col-2-3,.mobile-col-8-12{width:66.66%}.mobile-col-1-2,.mobile-col-6-12{width:50%}.mobile-col-1-3,.mobile-col-4-12{width:33.33%}.mobile-col-1-4,.mobile-col-3-12{width:25%}.mobile-col-1-5{width:20%}.mobile-col-1-6,.mobile-col-2-12{width:16.667%}.mobile-col-1-7{width:14.28%}.mobile-col-1-8{width:12.5%}.mobile-col-1-9{width:11.1%}.mobile-col-1-10{width:10%}.mobile-col-1-11{width:9.09%}.mobile-col-1-12{width:8.33%}.mobile-col-11-12{width:91.66%}.mobile-col-10-12{width:83.333%}.mobile-col-9-12{width:75%}.mobile-col-5-12{width:41.66%}.mobile-col-7-12{width:58.33%}.hide-on-mobile{display:none !important;width:0;height:0}} /* ========================================================================== Base styles ========================================================================== */ html {font-family: 'gothamlight', Arial, sans-serif; font-size: 12px; color:rgba(0, 0, 0, 0.85); line-height: 1.4; font-weight: 300} body {background: rgba(0, 0, 0, 0.05)} ::-moz-selection {background: #b3d4fc; text-shadow: none;} ::selection {background: #b3d4fc; text-shadow: none;} hr {display: block; height: 1px; margin: 36px 36px 18px 36px; padding: 0; border: 0; border-top: 1px solid #e6e7e8;} .wrapper {margin: 0px auto;} .wrapper.smaller{max-width: 800px; margin: 0px auto} .padding {padding: 36px;} .doublepadding {padding: 36px 72px;} .main {overflow: hidden; position: relative; min-height: calc(100vh - 318px);} .margin-top {margin-top: 36px!important;} .margin-bottom {margin-bottom: 36px!important;} .border-top {border-top: 1px solid #ddd;} .center {text-align: center;} .light {color: rgba(0, 0, 0, 0.35)} a {color: #222; text-decoration: none; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;} a:hover {color: #999;} h1, h1 a{font-weight: 400; font-size: 18px; text-transform: uppercase; font-family: 'gotham'; letter-spacing: 1px;} h2, h2 a {text-transform: uppercase; color: rgba(0, 0, 0, 0.85); text-transform: uppercase; font-size: 12px; font-weight: 300;} h3, h3 a {text-transform: uppercase; color: rgba(0, 0, 0, 0.85); text-transform: uppercase; font-size: 12px; font-weight: 300;} .contain {-webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;} .contain.pushed {-webkit-transform: translateX(-346px); -ms-transform: translateX(-346px); transform: translateX(-346px);} strong {font-family: 'gotham'; font-weight: normal!important} .no-desktop {display: none;} .cc_cookies_page h2{margin-top: 20px;} .cc_main_text {margin-bottom: 60px;} .lightbox_confirm{ position: fixed; width: 100%; height: 100vh; background: #00000059; top: 0px; left: 0px; display: flex; justify-content: center; align-items: center; z-index: 999999; } .lightbox_confirm .lightbox_confirm_content { background: #fff; padding: 30px; box-sizing: border-box; border-radius: 4px; max-width: 700px; font-size: 12px; text-align: center; font-size: 15px!important; max-width: 90%; } .lightbox_confirm .lightbox_confirm_content p { margin: 0px; } .lightbox_confirm .button { display: inline-block; background: #eaeaea; color: #000; padding: 8px 20px; border-radius: 2px; border: 1px solid #737373; margin: 20px 0px 0px 0px; font-weight: normal; cursor: pointer; transition: all 1s ease; } .lightbox_confirm .button:hover{ opacity: 0.7; } .lightbox_confirm .account_del_button { background: #000; color: #fff; margin-right: 5px; border: 0px none; } .lightbox_confirm .account_cancel_button { background: #7b7a7a; color: #fff; margin-left: 5px; border: 0px none; } .lightbox_confirm .lightbox_info{ margin: 20px 0px 0px 0px; } .downloaduserdata.button, .deleteaccount.button{ border: 1px solid #000; border-radius: 2px; padding: 5px 10px; display: inline-block; margin-bottom: 40px; transition: all 0.5s ease; cursor: pointer; } .downloaduserdata.button:hover, .deleteaccount.button:hover{ background: #000; color: #fff; } .privacy_agree {text-align: left; padding-left: 16px;} .privacy_agree a {text-decoration: underline!important} .consent_check{width: auto!important; padding: 0px!important; margin: 0px 5px 0px 0px;} .jconfirm .jconfirm-box div.content{max-height: 100vh!important; overflow: auto!important;} .jconfirm .jconfirm-box div.closeIcon{z-index: 999999!important} /* ========================================================================== Header ========================================================================== */ header {padding: 36px 0px 0px 0px; position: relative; text-align: center; height: 110px;} header .logo {position: absolute; z-index: 9990; left: 50%; top:26px; transform: translateX(-50%); -webkit-transition: all 1.6s ease-out; -moz-transition: all 1.6s ease 0s; -o-transition: all 1.6s ease 0s; transition: all 1.6s ease 0s;} header .logo img {width: 300px;} body.welcome header .logo.visible {display: block; opacity: 1} body.welcome .main .wrapper.padding {padding-top: 0px;} body header .statement {font-size: 12px; text-align: center; display: block; letter-spacing: 1px; } .menu-toggle {position: absolute; left: 36px; top: 33px; font-size: 36px; z-index: 9999; cursor: pointer;} header nav {text-align: center; position: absolute; top:0px; left: 0px; width: 100%; background: #fff; padding-bottom: 72px; z-index: 998; font-family: 'gotham'; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } header nav.pushed { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1} header nav .nav-container {display: inline-block} header nav ul {list-style: none; margin: 0px; padding: 0px;} header nav ul.primary {margin-top: 100px;} header nav ul li {display: block; border-top: 1px solid rgba(0, 0, 0, 0.85); padding: 10px; font-family: 'gotham'; font-size: 16px; font-weight: normal;} header nav ul.primary>li:first-of-type {border-top: 0px;} header nav ul li a {text-transform: uppercase; letter-spacing: 1px;} header nav ul.primary li:last-of-type {border-bottom: 1px solid rgba(0, 0, 0, 0.85)} header nav ul.collections li a {color: rgba(0, 0, 0, 0.35)} header nav ul.collections li:first-of-type a {color: rgba(0, 0, 0, 0.85)} header nav ul.collections li {border-top: 0px none;} header nav ul.collections li:first-of-type {border-bottom: 1px solid rgba(0, 0, 0, 0.85)} header .basket {position: absolute; top: 42px; right: 110px; z-index: 999; cursor: pointer} header .basket span {display: block; width: 100%; font-size: 10px; text-align: center; position: absolute; top: 9px; pointer-events: none} header .account {font-size: 23px; position: absolute; top: 40px; right: 166px; z-index: 999} header .langs {position: absolute; top: 46px; right: 36px; font-size: 12px; z-index: 999} header .langs a {color: rgba(0, 0, 0, 0.35)} header .langs a.active {color: #000;} header .search {position: absolute; top: 44px; right: 217px; z-index: 999; cursor: pointer;} .search-container {position: absolute; top: 40px; right: 260px; z-index: 9999; display: none;} .icon-search:before {content: "\e900"; font-size: 23px;} .icon-user:before {content: "\e901"; font-size: 23px; font-weight: bold;} .icon-cart:before {content: "\e902"; font-size: 23px;} .collectionsmenu{position: absolute; position: absolute; left: 47px; top: 16px; font-size: 12px; text-align: left; width: 200px; text-transform: uppercase; } .pages-container {padding-top: 0px;} .pages-grid {display: grid; grid-template-columns: 1fr 2fr; grid-column-gap: 72px; background: #fff;} .pages-grid>div:first-of-type {display: flex; flex-flow: column; justify-content: center; padding: 72px;} .pages-grid>div img.mainphoto {max-width: 100%; width: 100%; height: calc(100vh - 140px); object-fit: cover; display: block;} .pages-grid a.button {display: inline-block; width: auto; padding: 10px 20px; margin-top: 36px;} @media only screen and (max-width: 736px) { .pages-grid {display: grid; grid-template-columns: 1fr; grid-column-gap: 0; background: none} .pages-grid>div:first-of-type {padding: 20px 0px 0px 0px; order: 2} .pages-grid>div:last-of-type {order: 1} .pages-grid>div img.mainphoto {height: auto} } /* ========================================================================== Footer ========================================================================== */ footer {background: #fff; overflow: hidden; font-size: 12px; padding: 36px 0px 18px 0px;} footer a {color: rgba(0, 0, 0, 0.35); margin-bottom: 6px; display: block} footer a:hover {} footer .right-align {text-align: right} footer h4 {margin: 0; text-transform: uppercase; font-weight: 300;} footer hr {margin: 26px 36px 18px 36px;} footer form {margin-top: 10px;} footer input[type="text"] {width: 80%; float: left; height: 39px;} footer button {width: 15%; float: left; clear: none; border:1px solid rgba(0, 0, 0, 0.15); border-left: 0px none!important; height: 39px; padding: 5px;} footer button i {font-size: 18px;} footer .footer-social a { display: inline-block; margin-right: 10px; font-size: 21px; margin-top: 5px; color: #a6a6a6;} footer .icon {margin: 0 5px; color: #FFF; font-size: 20px; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;} footer .facebook .icon:hover {color: #3B5998;} footer .twitter .icon:hover {color: #00ACED;} footer .instagram .icon:hover {color: #3F729B;} .payment span {display: inline-block; padding: 4px; border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 4px; font-size: 18px;} footer .col-1-2:last-of-type a {display: inline;} /* ========================================================================== Products ========================================================================== */ .product {position:relative; margin-bottom: 36px; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;} .product a {display: inline-block; } .product a:hover img {opacity: 0.3;} .product:nth-child(4n+1) { clear: both; } .product img {width: 100%; margin-bottom: 10px; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;} .product .content .price, .discountprice {margin-left: 0px; font-size: 12px; float:right; color: rgba(0, 0, 0, 0.35)} .product .subtitle {display: none;} .oldprice {display: block; text-decoration: line-through;} .product .theprice {float: right;} .product .prod-overlay {position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; pointer-events: none; opacity: 0} .product .view-more {margin-left: -36px; margin-top: -36px; border: 1px solid rgba(0, 0, 0, 0.85); letter-spacing: 1px; padding:11px 34px; pointer-events: none; text-transform: uppercase;} .product a:hover .prod-overlay {opacity: 1} .product a:hover .view-more {color: #000000!important;} .product-wrapper {max-width: 1350px; margin: 30px auto 0px auto; overflow: hidden;} .product-image img {width: 100%; background: rgba(156, 160, 153, 0.04); margin-bottom: 30px;} .product-image ul {margin: 0; padding: 0; list-style: none;} .product-info .price {font-size: 18px;} .product-info .price_right{float: right; text-align: right;} .add-to-bag {margin: 36px auto; width: auto;} .product-info .more-info{padding-top: 36px; line-height: 190%;} .product-info .more-info strong {color: rgba(0, 0, 0, 0.65);} .product-info .product .content .price, .discountprice {color: rgba(0, 0, 0, 0.85); float: none;} .back-to-collection {display: block; margin-bottom: 20px; text-transform: uppercase;} .bannerhome {height: 700px; } .bannerhome .col-1-2{height: 100%; position: relative; background-size: cover!important} .bannerhome .col-1-2 .imgcontent {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; align-items: flex-end; justify-content: center; display: flex; padding-bottom: 30px;} .bannerhome .col-1-2 .imgcontent h1 {font-size: 70px; letter-spacing: 5px; margin: 0px; line-height: 100%;} .bannerhome .col-1-2 .imgcontent h2 {text-align: center; font-family: 'gotham'; font-size: 15px;} /* ========================================================================== HOME ========================================================================== */ .banner {position: relative; isplay: flex; flex-flow: column; justify-content: center; align-items: center;} .banner .slide {display: none; width: 100%; height: 700px; background-position: center center; background-repeat: no-repeat; background-size: cover; cursor: pointer;} .banner .first-slide {display: block;} .banner .text {display: flex; width: 100%; height: 100%; font-size: 70px; text-align: center; line-height: 110%;; align-items: center; justify-content: center; font-weight: 300; flex-flow: column; } .banner .text img {width: 80%;} .banner .smaller, .info p.smaller {font-size: 30px; margin-top: -30px;} .banner img {width: 100%;} .cycle-pager {text-align: center; position: absolute; right: 0; bottom: 0; left: 0; z-index: 999;} .cycle-pager span {display: inline-block; width: 10px; height: 10px; margin: 0 5px; background: rgba(20, 20, 20, 0.15); border-radius: 100%; text-indent: -9999px; cursor: pointer;} .cycle-pager .cycle-pager-active {background: #000;} .banner .banner-container {position: relative} .banner h1 {margin: 0px; width:100%; text-align: center; letter-spacing: 2px; font-size: 70px} .productsbanner h1 {position: static; font-size: 90px; letter-spacing: 10px; color: #fff;} .productsbanner h2 {position: static; font-size: 30px; text-align: center; font-family: 'gotham'; font-weight: bold; letter-spacing: 5px; margin: 0px; color: #fff;} .flexslider:hover .zoomslide {opacity: 0} .zoomslide{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);z-index:9999;display:inline-none;opacity:0;-webkit-transition:all .6s ease-out;-moz-transition:all .6s ease 0s;-o-transition:all .6s ease 0s;transition:all .6s ease 0s;font-size:32px;background:rgba(255,255,255,.63);padding-top:20px;border-radius:80px;width:80px;height:80px;text-align:center;vertical-align:middle;pointer-events:none} #zoomContainer {background: #FFF; position: fixed; overflow: hidden; cursor: url(../img/zoom_out.png?v=2),crosshair; height: 100%; width: 100%; top:0px; left:0px; z-index:9999; display:none; margin:0px; padding:0px;} #imagePan {position:relative; margin:0px; padding:0px;} #imagePan img{margin:0px; padding:0px;} /* ========================================================================== PAGES ========================================================================== */ .pages-container {font-size: 13px; line-height: 170%;} .pages-container h1 {text-align: center; margin-bottom: 72px;} .pages-container h1 span {text-align: center; padding: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.85)} /* ========================================================================== CLIENT'S AREA ========================================================================== */ .clientsarea h1 {text-align: center; margin-bottom: 36px;} .clientsarea h1 span {text-align: center; padding: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.85)} .clientsarea {min-height: calc(100vh - 296px);} .clientsarea .custom-select.country { border: 1px solid rgba(0, 0, 0, 0.15)!important; width: 100vW;} nav.clientsarenav{text-align: center;} nav.clientsarenav ul {list-style-type: none; padding: 0px; margin: 0px;} nav.clientsarenav ul li {display: block; margin: 10px 0px; font-size: 18px; font-family: 'gotham'; text-transform: uppercase; color: rgba(0, 0, 0, 0.35)} nav.clientsarenav ul li a {color: rgba(0, 0, 0, 0.35);} nav.clientsarenav ul li a.active{border-bottom: 1px solid rgba(0, 0, 0, 0.35); letter-spacing: 1px;} .order-history {margin-top: 36px;} .order-history-item{border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding: 18px 0px;} .order-history-item h3.date{ margin: 6px 0px 0px 0px; text-transform: none;} .order-history-item .info{text-transform: uppercase} .order-history-item .status, .order-history-item .total {text-transform: uppercase; color: rgba(0, 0, 0, 0.35)} .order-history-item .status span, .order-history-item .total span{display: block; text-transform: none; color: rgba(0, 0, 0, 0.85)} .order-history-item .details{text-transform: uppercase;} .order-history-item .view-order-details {width: 80%; margin: 0px;} .order-details-address {margin-top: 30px;} .order-items {width:100%; margin-top: 60px; padding-right: 20px; border-bottom: 1px solid #000; border-collapse: separate;} .order-items th {padding-bottom: 20px; font-size: 13px; font-weight: normal; text-transform: uppercase;} .order-items td {padding-bottom: 20px;} .order-items td td {padding-bottom: 0;} .order-items td img {border:4px solid #FFF} .order-items td.img {width:90px;} .order-items h3 {margin: 0; font-size: 13px; text-transform: uppercase;} .order-info {margin-top: 30px; border-collapse: separate;} .order-info table {padding: 20px; background: #FFF; border-collapse: separate;} .order-status{float: right; width: auto!important;} table.order-items-list.small-table {width: 300px;float: right;} table.order-items-list.small-table td{text-align: right; border-bottom: 1px solid #000; padding: 20px 0px;} .change-password {margin-top: 20px; clear: both;} .change-password p {font-size: 13px;} .change-password button {margin-top: 40px;} /* ========================================================================== QUICK BASKET ========================================================================== */ .basket-overlay {width: 346px; padding: 36px; background: #FFF; top: 0px; right: 0px; z-index: 9999; height: 100vh; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; position: fixed; overflow-y: scroll; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); opacity: 0} .basket-overlay.pushed {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1} .basket-overlay h1 {margin: 0 0 20px; font-size: 23px; font-weight: 300; text-align: center; text-transform: uppercase;} .quickcart .basket-item-delete {display: none;} .quickcart .basket-total-value {font-size: 12px;} .quickcart .basket-quantity {width: 120px; margin-top: 15px; overflow: hidden; float: left;} .quickcart .basket-item-img {width: 90px; height: 90px; margin-right:20px; background-size: cover; background-repeat: no-repeat; overflow: hidden; position: relative; float: left; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.15)} .quickcart .basket-item-content {width: 120px; float: left;} .quickcart .basket-item-content h3 {margin: 0; font-size: 12px; text-transform: uppercase;} .quickcart .basket-item-content p, .basket-item-content .price {margin: 0; font-size: 12px;} .quickcart .basket-item {margin-bottom: 20px; position: relative; overflow: hidden;} .quickcart .basket-item-img img {width: 100%;} .quickcart .basket-total-text {float:left; text-transform: none; letter-spacing: 1px;} .quickcart .basket-total-value {text-transform: none; float:right} .quickcart .totals-container {border-bottom: 1px solid rgba(0, 0, 0, 0.15); margin: 20px 0px; padding: 20px 0px;} .basket-bt-continue {display: block; width: 100%; margin-bottom: 10px; padding: 11px 14px; background: #FFF; font-weight: normal; text-transform: uppercase; text-align: center; float: left; border: 1px solid rgba(0, 0, 0, 0.85); font-size: 12px; letter-spacing: 1px;} .basket-bt-continue.empty-cart-bt{ position: absolute; bottom: 20px; width: calc(100% - 72px);} .basket-bt-checkout {display: block; width: 100%; padding: 11px 14px; font-weight: normal; text-transform: uppercase; text-align: center; float: left; border: 1px solid rgba(0, 0, 0, 0.85); font-size: 12px; letter-spacing: 1px;} /* ========================================================================== FULL BASKET ========================================================================== */ .order .basket-content {margin-bottom: 36px;} .order .basket-products {padding: 10px 0 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.85);} .order .basket-item {margin-bottom: 36px; overflow: hidden; position: relative;} .basket-item-delete {font-size: 17px; color: #000; position: absolute; top: -2px; right: 0;} .order .basket-item-img {width: 120px; height: 120px; margin-right: 20px; background-size: cover; background-repeat: no-repeat; overflow: hidden; position: relative; float: left; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.15)} .order .basket-item-img img {width: 100%;} .order .basket .basket-product {display: table-cell; width: 270px; vertical-align: middle;} .order .basket .basket-quantity {display: table-cell; width: 140px; padding-left: 40px; vertical-align: middle;} .order .basket-total-text {} .order .basket-total-value {text-transform: none;} .order button.basket-bt-process-preorder {width:25%; float: right; background: none transparent; margin-top: 36px;} .order .basket-header .col-1-4 {padding-left: 140px!important} .quantity-container {margin-left: -10px;} .quantity-container span.quantity-add, .quantity-container span.quantity-remove {min-width: 18px; padding: 0 8px; text-align: center; cursor: pointer; float: left; -webkit-transition: all 2s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;} .quantity-container span.quantity-add:hover, .quantity-container span.quantity-remove:hover {} .quantity-container span.quantity {min-width: 18px; padding: 0; border-left: 1px solid rgba(0, 0, 0, 0.35); border-right: 1px solid rgba(0, 0, 0, 0.35); font-size: 12px; text-align: center; float: left;} .order .basket-header {text-transform: uppercase; letter-spacing: 1px; padding-bottom: 36px;} .order .basket-products{} .order .basket-item {display: table;} .order .basket-item-content {width: calc(100% - 140px)} .order .basket-item-content h3{text-transform: uppercase; letter-spacing: 1px;} .order .basket-item .col-1-3, .order .basket-item .basket-item-content {padding-top: 36px;} .order .basket-item .basket-unit {color: rgba(0, 0, 0, 0.35)} .order .basket-bt-refresh {display: block; width: 200px; margin-top: 30px; padding: 8px; background: #FFF; font-size: 13px; font-weight: normal; text-align: center; float: right;} .order .basket-aside {} .order .basket-aside h2 {margin: 0 0 10px; display: none} .order .basket-aside h3 {margin: 0 0 10px; font-size: 12px; display: none;} .basket-shipping-costs {padding-bottom:10px; text-transform: uppercase} .basket-shipping-costs span {text-transform: none;} .basket-shipping-costs a {display: block; padding: 2px 0 2px 0; font-size: 12px; font-weight: normal;} .basket-shipping-costs a span {display: block; width: 215px; float: left;} .basket-shipping-costs a:after {content: "\f372"; margin-left: 15px; padding-right: 10px; font-family: 'Ionicons';} .basket-shipping-costs a.clicked:after {content: "\f374";} .order .basket-total-text {color: #000;} .order .basket-bt-checkout {width: 100%;} span.stock-error{font-size: 12px; display: block; padding-top: 10px; float: none; clear: both; margin-right: 10px;} /* ========================================================================== ORDER ========================================================================== */ #mainCartContent {margin-top: 36px;} .order {overflow: hidden;} .order .voucher {padding-right: 72px;} .order .voucher h2 {margin: 0 0px 10px 0px} .order .voucher h3 {margin: 0 0 10px; font-size: 13px;} .order .voucher input {padding: 13px 14px; background: #fff;} .order .voucher input.error {border: 1px solid red} .order .voucher .col-1-2 {padding-right: 10px;} ul.checkout-bar {margin: 0px; padding: 0px; position: relative;} ul.checkout-bar li {color: rgba(0, 0, 0, 0.35); display: inline-block; font-size: 10px; padding: 0; text-align: center; text-transform: uppercase; letter-spacing: 1px;} ul.checkout-bar li.active {color: rgba(0, 0, 0, 0.85);} ul.checkout-bar li.visited a{color: rgba(0, 0, 0, 0.35);} ul.checkout-bar li:nth-child(1):after {content: " >"; color: rgba(0, 0, 0, 0.35);} ul.checkout-bar li:nth-child(2):after {content: " >"; color: rgba(0, 0, 0, 0.35);} ul.checkout-bar li:nth-child(3):after {content: " >"; color: rgba(0, 0, 0, 0.35);} ul.checkout-bar a {text-decoration: none;} /* ========================================================================== CART LOGIN PAGE ========================================================================== */ #loginForm h2, #quickregister h2 {margin-bottom: 20px;} #basket_aside {padding: 0px 0px 0px 40px} #basket_aside .basket-item-img{overflow: hidden; position: relative; width: 90px; height: 90px} #basket_aside .basket-item {border: 0px none; padding: 0px; display: block;} #basket_aside .basket-item-content{margin-top: 0px!important; padding: 0px;} #basket_aside .basket-item-content h3 {margin-bottom: 5px;} #basket_aside .basket-estimated-shipping, #basket_aside .basket-payment-costs, #basket_aside .voucher-discount{padding: 10px; text-transform: uppercase} #basket_aside .basket-estimated-shipping span, #basket_aside .basket-payment-costs span, #basket_aside .voucher-discount span{float: right; text-align: right; text-transform: none;} #basket_aside .basket-total-costs {padding:10px; background: #fff; text-transform: uppercase;} #basket_aside .basket-total-costs span{float: right; text-align: right} /* ========================================================================== CHECKOUT ========================================================================== */ .checkout-container .client-info{line-height: 170%;} .order input{display: block; width: 80%} .order input {display: block; margin-bottom: 20px;} .order label {display: block; margin-bottom: 5px;} #processorder-btn {width: auto; margin: 20px 0px 0px;} .product-info .more-info{padding-top: 36px;} .order input[type="checkbox"], .order input[type="radio"]{display: inline-block; margin-bottom: 0px; width: auto; margin-right: 10px;} button span{display: none;} button.loading span{display: block;} .custom-select.country, .custom-select.ptzone {width: 312px; margin-bottom: 20px;} .custom-select.country select, .custom-select.ptzone select {padding: 11px 14px; font-size: 12px;} .custom-select.country::after, .custom-select.ptzone::after {margin-top: -10px; font-size: 15px; right: 10px;} .client-info form, .shipping-info form {margin: 20px 0px; overflow: hidden;} .client-info input, .shipping-info input{display: inline-block; width: 230px;} .client-info label, .shipping-info label{display: inline-block; width:100px} .client-info button, .shipping-info button {} .client-info .custom-select.country, .shipping-address .custom-select.country, .custom-select.ptzone {display: inline-block; width: 100%; margin-top: -3px;} .client-info .custom-select.country select, .shipping-address .custom-select.country select, .custom-select.ptzone select {padding: 11px 14px; border: 1px solid rgba(0, 0, 0, 0.15)!important;} .collapsible {border-top: 1px solid rgba(0, 0, 0, 0.35); padding: 16px 0px;} .collapsible.no-border{border-top: 0px none} #user-address{padding: 0px 0px 20px 0px; position: relative} #user-address a{position: absolute; top: 0px; right:0px; width: auto;} .billing-address, .shipping-address {padding: 0px 0px 20px 0px; position: relative} .shipping-address .billing-check {display: inline-block; width:30px; margin-bottom: 0px;} .showShippingAddressForm{position: absolute; top: -20px; right:0px; width: auto!important;} .shipping-method ul{margin: 0px; padding: 0px;} .shipping-method {padding: 0px 0px 20px 0px; position: relative} .shipping-method li{margin-right: 10px; list-style-type: none; float: left;} .shipping-method li span{display: block; margin-left: 0px;} .shipping-method li span:last-of-type{margin-top: 5px; color: rgba(0, 0, 0, 0.35)} .payment-method ul{margin: 0px; padding: 0px;} .payment-method {padding: 0px 0px 20px 0px; position: relative} .payment-method li{margin-right: 30px; list-style-type: none; float: left;} #payment-method{margin-top: 20px; width: 450px;} #payment-method label{margin-bottom:6px; display: block;} #payment-method ul.cards li{ float: left;margin: 0 4px 0 0; list-style-type: none; box-sizing: border-box;} #payment-method ul.cards li span{background-image: url("../img/credit-cards-@2x.png"); background-size: 300px 31px; background-position:0 0; float: left; width: 47px; height: 31px; text-indent: -9999px;opacity: 0.6; box-sizing: border-box; } #payment-method ul.cards {margin-bottom: 20px;} #payment-method ul.cards li span.card.visa {background-position: 0 0} #payment-method ul.cards li span.card.master-card {background-position: -100px 0} #payment-method ul.cards li span.card.american-express {background-position: -50px 0} #payment-method ul.cards li span.card.discover {background-position: -150px 0} #payment-method ul.cards li span.card.jcb {background-position: -200px 0} #payment-method ul.cards li span.card.diners-club {background-position: -250px 0} #payment-method ul.cards li span.card-selected {opacity: 1} #payment-method ul.cards li.text {font-size: 11px; line-height: 31px; color: #767676;} #payment-method .col-1-4 {margin-right: 10px; overflow: hidden;} .my-hosted-fields-container {height: 25px; width:300px; margin-bottom: 1em; padding: 0 0.5em;} #my-credit-card-field, #my-security-code-field, #my-expiration-field {border:1px solid #000;} #my-security-code-field, #my-expiration-field {border:1px solid #000; width:100px;} .my-hosted-fields-left {height: 25px; width:100px; margin-bottom: 1em; padding: 0 0.5em; border: 1px solid #000;} .my-hosted-fields-container.braintree-hosted-fields-invalid {background-color: rgba(242, 102, 102, 0.31)!important} .my-hosted-fields-container.braintree-hosted-fields-valid {border-color: limegreen;} .radio-col {width: 100px; display: inline-block; margin-bottom: 20px;} .gift-message-box{margin-bottom: 20px;} .gift-message-box img {max-width: 90%;} .gift-info textarea {width: 100%; height: 120px; border: 1px solid #ddd; margin-bottom: 4px; margin-top: 10px; box-sizing: border-box; padding: 10px;} .gift-chars-info {font-size: 13px;} .gift-message-box.normal .photo-normal-gift{display: block;} .gift-message-box.normal .photo-gift-gift{display: none;} .gift-message-box.gift .photo-normal-gift{display: none;} .gift-message-box.gift .photo-gift-gift{display: block;} ul.order_mbref{width: 240px; margin: 20px auto; list-style-type: none; text-align: left} ul.order_mbref li {padding: 5px 0px; border-bottom:1px solid #ddd;} ul.order_mbref li span {width:100px; display: inline-block} /* ---------------------------------------------------------------------- */ /* Select /* ---------------------------------------------------------------------- */ .s-hidden {padding-right: 10px;visibility: hidden;} .select {display: inline-block; width: 100%; padding: 4px; color: black; text-align: left; cursor: pointer; position: relative; top: 1px;} .styledSelect {padding: 4px 6px; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} .styledSelect:after {content: ''; width: 0; height: 0; border: 5px solid transparent; border-color: black transparent transparent transparent; position: absolute; top: 10px; right: 6px;} .styledSelect:active, .styledSelect.active {background-color: none;} .options {display: none; min-width: 210px; max-height: 300px; margin: 0; padding: 0; background-color: #f2f2f2; border-top: 1px solid rgba(0, 0, 0, 0.15); list-style: none; overflow-y: scroll; position: absolute; top: 100%; right: 0; left: -1px; z-index: 999; margin-top: 2px;} .options li {margin: 0 0; padding: 4px 6px; border: 1px solid rgba(0, 0, 0, 0.15); border-top: none; font-weight: normal;} .options li:hover {background: rgba(0, 0, 0, 0.10);} .items-per-page.full-custom-select {display: inline-block; width: 60px;} .items-per-page .options {min-width: 62px;} .order-by.full-custom-select {display: inline-block; width: 120px;} .order-by .options {min-width: 122px;} .productoptions {margin-top: 36px;} .productoptions .block {display: table; width: auto; min-width: 300px; border: 1px solid rgba(0, 0, 0, 0.15); margin: 0px auto} .productoptions .block:last-child {} .productoptions .block label {display: table-cell; width: 50%; padding: 11px 14px; border-right: 1px solid rgba(0, 0, 0, 0.15); font-size: 12px; font-weight: normal; text-transform: uppercase; letter-spacing: 1px;} .productoptions .block .button {border: 0px none!important; padding: 0px;} .productoptions .full-custom-select .select {padding: 8px; top: 0;} .productoptions .full-custom-select .styledSelect {padding: 10px 20px;} .productoptions .full-custom-select .styledSelect:after {top: 14px; right: 10px;} .productoptions .full-custom-select .options {min-width: 117px; } .productoptions .full-custom-select .options li {padding: 11px 14px;} .sizeguide {display: block; margin: 0px 0px 15px 0px; font-size: 14px; cursor: pointer;} .grey{background: #dce8e1; margin-top: 30px;} .grey .info {margin-top: 0px; padding: 30px 0px 10px 0px; margin-bottom: 0px;} .prod20 .productoptions .block {width:383px;} .prod20 .productoptions .block label {width: 45%; font-size: 13px;} .smalltext {font-size: 16px;} /* ========================================================================== FORMS ========================================================================== */ input::-webkit-input-placeholder {color: rgba(0, 0, 0, 0.35);} input::-moz-placeholder {color: rgba(0, 0, 0, 0.35);} input:-ms-input-placeholder {color: rgba(0, 0, 0, 0.35);} input:-moz-placeholder {color: rgba(0, 0, 0, 0.35);} textarea:focus, input:focus{outline: none!important} *:focus {outline: none!important} input[type="text"], form input[type="password"], input {width: 100%; margin-bottom: 18px; padding: 11px 14px; font-size: 12px!important; background: none; border: 1px solid rgba(0, 0, 0, 0.15)!important; font-family: 'gothamlight';} input[type="submit"] {padding: 8px 12px; background-color: #000; border: none; color: #FFF; font-size: 14px; line-height: 16px; -webkit-transition: all 2s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;} input[type="submit"]:hover {background: #828282;} form input.error, form textarea.error{background-color: rgba(242, 102, 102, 0.31)!important} form span.error{display: none!important;} div.errorFeedback{padding: 11px 14px; background-color: rgba(242, 102, 102, 0.31); box-sizing: border-box; width: 100%; margin-bottom: 10px;} button, .button {display: block; width: 100%; padding: 11px 14px; letter-spacing: 1px; text-transform: uppercase; text-align: center; font-size: 12px; text-shadow: none !important; border: 1px solid rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85); box-shadow: none !important; margin: 0px auto; background: none transparent; -webkit-transition: all 2s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;} button .white, .button.white {background: #FFF;} button:hover, a.button:hover {background: rgba(0, 0, 0, 0.10)!important;} form.contact-form input, form.contact-form textarea {width: 100%; margin-bottom: 10px; padding: 6px 10px; background: none; border: 1px solid #000; font-size: 20px;} form.contact-form button {background: #000; border: none; font-weight: bold; color: #FFF; font-size: 20px;} form.contact-form button:hover {background: #828282;} form.contact-form label.error {display: none!important;} .page {padding: 15px 15px 0; overflow: hidden;} .page:last-child {padding-bottom: 15px;} .page h2 {margin-top: 30px; font-size: 35px; font-weight: 600; color: rgb(21, 21, 21); line-height: 30px; text-transform: uppercase; text-align: center;} .page .img-right {width: 50%; padding: 30px 30px 30px 40px; float: right;} .page .img-left {width: 50%; padding: 30px 40px 30px 30px; float: left;} .page .small {width: 25%;} .page .text {display: block;} .page .text a {color: #000;} .map {height: 400px;} /* ========================================================================== POPUP ========================================================================== */ #popup {width: 700px; padding:20px; box-sizing: border-box; background: #fff; overflow: hidden; text-align: center} #popup img {width: 100%;} #popup h1 {font-size:50px; margin: 0px 0px 10px 0px; padding: 0px; color: #fff;} #popup h2 {font-size:23px; margin: 0px 0px 10px 0px; padding: 0px; color: #fff;} #popup h5, #popup h6 {font-weight: normal; margin: 0px;} #popup p {font-size: 20px; margin-bottom: 0px; } #popup .popup_imagecontainer {width: 100%; height: 450px; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; background: #000;} #popup .popup_imagecontainer:before { content : ""; display: block; position: absolute; top: 0; left: 0; width: calc(100% - 40px); height: calc(100% - 40px); opacity : 0.5; background-repeat: no-repeat; background-size: cover; margin: 20px; } #popup .popup_imagecontainer .pop_content {opacity: 1; position: absolute; transform: translateX(-50%) translateY(-50%); left: 50%; top: 50%; width: 100%; padding: 40px; box-sizing: border-box} #popup .popup_imagecontainer .pop_content p {padding: 20px;} #popup .pop_content_single {padding: 20px} #popup .col-1-2.pop_content_single {display: flex; justify-content: center; align-items: center; height: 400px;} /* ========================================================================== MODAL ========================================================================== */ #modal, .modal{width:400px; height:auto; min-height:200px; background:#FFF; position:fixed; z-index:10000; top: 120px; left: 50%; margin-left:-200px; border:1px solid #DDD; padding:30px; box-shadow:-2px 4px 12px 0px #666; font-size:12px; box-sizing:border-box; -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } /* ========================================================================== MODAL ========================================================================== */ .jconfirm {text-align: center; font-size: 12px;} .jconfirm h2{margin-top: 0px; margin-bottom: 20px;} .jconfirm label{display: inline-block; width:100px} .jconfirm input {width: 100%; margin-bottom: 18px; padding: 11px 14px!important; font-size:12px!important; background: none!important; border: 1px solid rgba(0, 0, 0, 0.15)!important} .jconfirm button{display: block; width: 100%; padding:11px 14px; letter-spacing:1px; text-transform: uppercase; text-align: center; font-size:12px; text-shadow:none !important; border:1px solid rgba(0, 0, 0, 0.85); color:rgba(0, 0, 0, 0.85); box-shadow:none !important; margin: 0px auto; background: #fff; -webkit-transition: all 2s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;} .jconfirm button:hover {background: rgba(0, 0, 0, 0.10);} .jconfirm .smallinfo{opacity: 0.7; font-size: 12px;} .jconfirm div.errorFeedback{width:90%; margin: 0px auto 10px} .jconfirm .loginbox {} .register .custom-select.country {display: block; width: 100%; margin: 0 auto 18px; border: 1px solid rgba(0, 0, 0, 0.15)!important} .resetpasswordbox {text-align: center; min-height: calc(100vh - 348px);} #resetpassword{width: 50%; margin: 0px auto; text-align: center;} #resetpassword input{width:80%; margin: 0px auto; float: none; margin-bottom: 20px; } #resetpassword button {margin: 0px auto;} /* ========================================================================== 404 PAGE NOT FOUND ========================================================================== */ .error404 {height: 100%; text-align: center;} .error404:before {content: ''; display: inline-block; height: 100%; margin-right: -0.25em; vertical-align: middle;} .error404 .centered {display: inline-block; width: 420px; vertical-align: middle; max-width: 90%;} .error404 .centered > a {display: block; border-bottom: 2px solid #000;} .error404 .logo {width: 340px; max-width: 80%;} .error404 .center {width: 430px; margin: 30px auto 0; max-width: 90%;} .error404 h1, .error404 h1 a {margin: 0; padding: 20px 0 10px; font-size: 16px; text-transform: uppercase; font-weight: 300; font-family: 'gothamlight';} /*! * jquery-confirm v1.7.5 (http://craftpip.github.io/jquery-confirm/) * Author: boniface pereira * Website: www.craftpip.com * Contact: hey@craftpip.com * * Copyright 2013-2015 jquery-confirm * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE) */ .jconfirm .container {} .jconfirm-box-container {width: 700px; margin: 0px auto;} .jconfirm-box-container.large-modal {width: 700px;} .jconfirm-box-container.personalization-modal {width: 900px;} .personalization-modal .jconfirm-box {background: #fff!important;} body.jconfirm-noscroll{overflow:hidden!important}@-webkit-keyframes jconfirm-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes jconfirm-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.jconfirm{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999999;font-family:inherit;overflow:hidden}.jconfirm .jconfirm-bg{position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;-webkit-transition:all .4s;transition:all .4s}.jconfirm .jconfirm-bg.seen{opacity:1}.jconfirm .jconfirm-scrollpane{position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto}.jconfirm .jconfirm-box{background:#FFF;position:relative}.jconfirm .jconfirm-box div.closeIcon{height:20px;width:20px;position:absolute;top:6px;right:12px;cursor:pointer;opacity:.6;text-align:center;display:none;font-size:29px;z-index: 9999;}.jconfirm .jconfirm-box div.closeIcon:hover{opacity:1}.jconfirm .jconfirm-box div.title{font-size:24px;font-weight:bold;padding:30px 30px 0px 30pxs}.jconfirm .jconfirm-box div.content{padding:30px}.jconfirm .jconfirm-box div.content:empty{height:40px;position:relative;opacity:.6}.jconfirm .jconfirm-box div.content:empty:before{content: "\f29c";height:20px;width:20px;font-family:'Ionicons';position:absolute;left:50%;margin-left:-45px;-webkit-animation:jconfirm-rotate 1s infinite;animation:jconfirm-rotate 1s infinite}.jconfirm .jconfirm-box div.content:empty:after{content:'...';position:absolute;left:50%;margin-left:-15px}.jconfirm .jconfirm-box .buttons{padding:10px 15px}.jconfirm .jconfirm-box .buttons button+button{margin-left:5px}.jconfirm .jquery-clear{clear:both}.jconfirm.white .jconfirm-bg{background-color:rgba(0,0,0,0.2)}.jconfirm.white .jconfirm-box .buttons{float:right}.jconfirm.white .jconfirm-box .buttons button{border:0;background-image:none;text-transform:uppercase;font-size:14px;font-weight:bold;text-shadow:none;-webkit-transition:background .1s;transition:background .1s;color:white}.jconfirm.white .jconfirm-box .buttons button.btn-default{box-shadow:none;color:#333}.jconfirm.white .jconfirm-box .buttons button.btn-default:hover{background:#ddd}.jconfirm.black .jconfirm-bg{background-color:rgba(0,0,0,0.5)}.jconfirm.black .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.2);background:#444;border-radius:5px;color:white}.jconfirm.black .jconfirm-box .buttons{float:right}.jconfirm.black .jconfirm-box .buttons button{border:0;background-image:none;text-transform:uppercase;font-size:14px;font-weight:bold;text-shadow:none;-webkit-transition:background .1s;transition:background .1s;color:white}.jconfirm.black .jconfirm-box .buttons button.btn-default{box-shadow:none;color:#fff;background:0}.jconfirm.black .jconfirm-box .buttons button.btn-default:hover{background:#828282}.jconfirm.hololight .jconfirm-bg{background-color:rgba(0,0,0,0.5)}.jconfirm.hololight .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.4);border-radius:2px;overflow:hidden}.jconfirm.hololight .jconfirm-box div.title{font-weight:inherit;border-bottom:solid 2px #76cfdf;color:#76cfdf}.jconfirm.hololight .jconfirm-box .buttons{border-top:solid 2px #e7e7e7;width:100%;float:none;padding:0}.jconfirm.hololight .jconfirm-box .buttons button{margin:0;border:0;background:#fff;border-radius:0;width:50%;padding:13px;font-size:16px;font-weight:bold;color:#666}.jconfirm.hololight .jconfirm-box .buttons button+button{border-left:solid 2px #e7e7e7}.jconfirm.holodark .jconfirm-bg{background-color:rgba(0,0,0,0.5)}.jconfirm.holodark .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.4);border-radius:2px;background:#333;overflow:hidden}.jconfirm.holodark .jconfirm-box div.closeIcon{color:white}.jconfirm.holodark .jconfirm-box div.title{font-weight:inherit;border-bottom:solid 2px #76cfdf;color:#76cfdf}.jconfirm.holodark .jconfirm-box div.content{color:white}.jconfirm.holodark .jconfirm-box .buttons{border-top:solid 2px rgba(255,255,255,0.2);width:100%;float:none;padding:0}.jconfirm.holodark .jconfirm-box .buttons button{margin:0;border:0;background:#333;border-radius:0;width:50%;padding:13px;font-size:16px;font-weight:bold;color:#fff;text-shadow:none}.jconfirm.holodark .jconfirm-box .buttons button+button{border-left:solid 2px rgba(255,255,255,0.2)}.jconfirm .jconfirm-box.hilight{box-shadow:0 0 20px red}.jconfirm{-webkit-perspective:400px;perspective:400px}.jconfirm .jconfirm-box{opacity:1;-webkit-transition-property:-webkit-transform,opacity,box-shadow;transition-property:transform,opacity,box-shadow}.jconfirm .jconfirm-box.anim-top,.jconfirm .jconfirm-box.anim-left,.jconfirm .jconfirm-box.anim-right,.jconfirm .jconfirm-box.anim-bottom,.jconfirm .jconfirm-box.anim-opacity,.jconfirm .jconfirm-box.anim-zoom,.jconfirm .jconfirm-box.anim-scale,.jconfirm .jconfirm-box.anim-none,.jconfirm .jconfirm-box.anim-rotate,.jconfirm .jconfirm-box.anim-rotatex,.jconfirm .jconfirm-box.anim-rotatey,.jconfirm .jconfirm-box.anim-scaley,.jconfirm .jconfirm-box.anim-scalex{opacity:0}.jconfirm .jconfirm-box.anim-rotate{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.jconfirm .jconfirm-box.anim-rotatex{-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-rotatey{-webkit-transform:rotatey(90deg);-ms-transform:rotatey(90deg);transform:rotatey(90deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-scaley{-webkit-transform:scaley(1.5);-ms-transform:scaley(1.5);transform:scaley(1.5);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-scalex{-webkit-transform:scalex(1.5);-ms-transform:scalex(1.5);transform:scalex(1.5);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-top{-webkit-transform:translate(0px,-100px);-ms-transform:translate(0px,-100px);transform:translate(0px,-100px)}.jconfirm .jconfirm-box.anim-left{-webkit-transform:translate(-100px,0px);-ms-transform:translate(-100px,0px);transform:translate(-100px,0px)}.jconfirm .jconfirm-box.anim-right{-webkit-transform:translate(100px,0px);-ms-transform:translate(100px,0px);transform:translate(100px,0px)}.jconfirm .jconfirm-box.anim-bottom{-webkit-transform:translate(0px,100px);-ms-transform:translate(0px,100px);transform:translate(0px,100px)}.jconfirm .jconfirm-box.anim-zoom{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.jconfirm .jconfirm-box.anim-scale{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.jconfirm .jconfirm-box.anim-none{display:none}.jconfirm.supervan .jconfirm-bg{background-color:rgba(54,70,93,0.95)}.jconfirm.supervan .jconfirm-box{background-color:transparent}.jconfirm.supervan .jconfirm-box div.closeIcon{color:white}.jconfirm.supervan .jconfirm-box div.title{text-align:center;color:white;font-size:28px;font-weight:normal}.jconfirm.supervan .jconfirm-box div.content{text-align:center;color:white}.jconfirm.supervan .jconfirm-box .buttons{text-align:center}.jconfirm.supervan .jconfirm-box .buttons button{font-size:16px;border-radius:2px;background:#303f53;text-shadow:none;border:0;color:white;width:25%;padding:10px} /* ========================================================================== LIGHTBOX ========================================================================== */ .mfp-bg,.mfp-wrap{position:fixed;left:0;top:0}.mfp-bg,.mfp-container,.mfp-wrap{height:100%;width:100%}.mfp-container:before,.mfp-figure:after{content:''}.mfp-bg{z-index:1042;overflow:hidden;background:#0b0b0b;opacity:.8;filter:alpha(opacity=80)}.mfp-wrap{z-index:1043;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;left:0;top:0;padding:0 8px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-container:before{display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-close,.mfp-preloader{text-align:center;position:absolute}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#CCC;top:50%;width:auto;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#CCC}.mfp-close,.mfp-preloader a:hover{color:#FFF}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;-webkit-box-shadow:none;box-shadow:none}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;right:0;top:0;text-decoration:none;opacity:.65;filter:alpha(opacity=65);padding:0 0 18px 10px;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1;filter:alpha(opacity=100)}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#FFF;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#CCC;font-size:12px;line-height:18px;white-space:nowrap}.mfp-figure,img.mfp-img{line-height:0}.mfp-arrow{position:absolute;opacity:.65;filter:alpha(opacity=65);margin:-55px 0 0;top:50%;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1;filter:alpha(opacity=100)}.mfp-arrow .mfp-a,.mfp-arrow .mfp-b,.mfp-arrow:after,.mfp-arrow:before{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:inset transparent}.mfp-arrow .mfp-a,.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow .mfp-b,.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left .mfp-a,.mfp-arrow-left:after{border-right:17px solid #FFF;margin-left:31px}.mfp-arrow-left .mfp-b,.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3F3F3F}.mfp-arrow-right{right:0}.mfp-arrow-right .mfp-a,.mfp-arrow-right:after{border-left:17px solid #FFF;margin-left:39px}.mfp-arrow-right .mfp-b,.mfp-arrow-right:before{border-left:27px solid #3F3F3F}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-image-holder .mfp-content,img.mfp-img{max-width:100%}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;box-shadow:0 0 8px rgba(0,0,0,.6);background:#000}.mfp-figure:after,img.mfp-img{width:auto;height:auto;display:block}img.mfp-img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure:after{position:absolute;left:0;top:40px;bottom:40px;right:0;z-index:-1;box-shadow:0 0 8px rgba(0,0,0,.6);background:#444}.mfp-figure small{color:#BDBDBD;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#F3F3F3;word-wrap:break-word;padding-right:36px}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(.75);transform:scale(.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}.mfp-ie7 .mfp-img{padding:0}.mfp-ie7 .mfp-bottom-bar{width:600px;left:50%;margin-left:-300px;margin-top:5px;padding-bottom:5px}.mfp-ie7 .mfp-container{padding:0}.mfp-ie7 .mfp-content{padding-top:44px}.mfp-ie7 .mfp-close{top:0;right:0;padding-top:0} /* ----------------------------------------------- FlexSlider ----------------------------------------------- */ /* * jQuery FlexSlider v2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ html[xmlns] .slides {display: block;} .flexslider {margin: 0; padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; float: left;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides > li:first-child {display: none; overflow: hidden; max-width: 100%;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider {position: relative; zoom: 1;} #flexslider {overflow: hidden;} #carousel.flexslider {margin: 0 0 10px; position: relative; zoom: 1; height: 120px; overflow: hidden;} .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;} .loading .flex-viewport {max-height: 300px;} .flexslider .slides {zoom: 1;} .product-thumbnails {margin-top: -20px; height: 120px; overflow: hidden;} .product-thumbnails .flex-direction-nav {display: none} #carousel li {margin-right: 10px} #carousel img {display: block; opacity: .5; cursor: pointer; width: 120px; height: 120px;} #carousel img:hover {opacity: 1;} #carousel .flex-active-slide img {opacity: 1; cursor: default; width: 120px; height: 120px;} #carousel .flex-viewport{max-height:120px;} #slider{margin-bottom:10px!important;} #slider .flex-viewport{max-height:685px;} /* Direction Nav */ .flex-direction-nav {*height: 0;} .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; font-family: 'Ionicons'; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;} .flex-direction-nav .flex-next {right: 5px;} .flex-direction-nav .flex-next:after {content: "\f125"; width: 30px; height: 30px; background: #FFF; text-align: center; line-height: 30px; text-indent: 0; float: left;} .flex-direction-nav .flex-prev {left: 5px;} .flex-direction-nav .flex-prev:after {content: "\f124"; width: 30px; height: 30px; background: #FFF; text-align: center; line-height: 30px; text-indent: 0; float: left;} .flexslider:hover .flex-next {opacity: 0.8; right: 5px;} .flexslider:hover .flex-prev {opacity: 0.8; left: 5px;} .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;} .flex-direction-nav .flex-disabled {opacity: .0!important; filter:alpha(opacity=0); cursor: default;} /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;} .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #828282; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);} .flex-control-paging li a:hover {background: #333; background: rgba(0,0,0,0.7);} .flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; } .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} .flex-control-thumbs li {width: 25%; float: left; margin: 0;} .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev {opacity: 1; left: 0;} .flex-direction-nav .flex-next {opacity: 1; right: 0;} } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (max-width: 1024px) { video{max-height: 720px;} } @media only screen and (max-width: 736px) { .lity-container {max-width: 90%!important;} #popup {width: 100%; min-width: 90vw} #popup .col-1-2 {width: 100%; float: none;} #popup .col-1-2.pop_content_single {height: auto; display: inline;} #popup h1 {font-size: 30px;} #popup h2 {font-size: 20px;} #popup p {font-size: 16px;} .padding {padding: 18px;} .doublepadding {padding: 18px;} .no-mobile {display: none!important;} .no-desktop {display: block!important;} header {height: 120px; padding: 18px 0px} header .logo {display: block!important; opacity: 1!important; width: 100%; padding: 18px 18px 0px 18px;} header .logo img {width: 100%;} .menu-toggle {left: 18px; top:0px;} header .langs {right: 18px; top:18px;} header .basket {top: 14px; right: 80px; } header .account {top: 14px; right: 116px;} header .search {top: 14px; right: 147px;} header .basket span {font-size: 8px; top:6px;} header .search, header .account, header .basket {font-size: 12px;} .icon-search:before, .icon-user:before, .icon-cart:before {font-size: 18px;} header .statement-mobile {margin-top: 6px; width: 100%; font-size: 10px; letter-spacing: 1px;} .search-container {width: 100%; height: 100vh; background: #fff; left: 0px; top: 0px; z-index: 998; opacity: 0.8; } .search-container form { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; padding: 30px; box-sizing: border-box;} .search-container form input {border: 1px solid #000!important} .search-container form input::-webkit-input-placeholder {color: rgba(0, 0, 0, 0.85);} .search-container form input::-moz-placeholder {color: rgba(0, 0, 0, 0.85);} .search-container form input:-ms-input-placeholder {color: rgba(0, 0, 0, 0.85);} .search-container form input:-moz-placeholder {color: rgba(0, 0, 0, 0.85);} .logo.dummy-logo{opacity: 1!important; display: block!important; position: static; transform: translateX(0px); margin-top: 12px;} header nav ul.primary {padding-top: 60px;} footer .right-align{text-align: left;} .bannerhome {height: auto;} .bannerhome .col-1-2 {width: 100%; display: block; margin-bottom: 20px; height: 350px;} .bannerhome .col-1-2 h1 {font-size: 30px;} .bannerhome .col-1-2 .imgcontent {align-items:center; padding-bottom: 0px} .bannerhome .col-1-2 .imgcontent h1 {font-size: 30px; margin-bottom: 10px;} .bannerhome .col-1-2 .imgcontent h2 {margin: 0px;} .banner {margin-top: -18px;} .banner .slide {height: calc(100vh - 150px); } .productsbanner .slide {height: 250px;} .banner h1 {font-size: 30px; line-height: 100%; margin: 0px} .banner h2 {font-size: 14px; line-height: 100%; margin: 10px 0px 0px;} .product-thumbnails {display: none;} .basket-overlay {padding: 18px; width: 100vW;} #mainCartContent {margin-top: 18px;} #mainCartContent .grid {padding: 0px;} #mainCartContent .basket-content .col-1-2, #mainCartContent .basket-content .col-1-3 {float:left; width: 50%;} .order .basket-header .col-1-4 {padding-left: 0px!important;} .order .basket-item .col-1-3, .order .basket-item .basket-item-content {padding-top: 0px;} .order .basket-item {border-bottom: 1px solid rgba(0, 0, 0, 0.08); margin-bottom: 18px;} .order .basket-item:last-of-type{border-bottom: 0px;} .order .basket-header {padding-bottom: 0px;} .order .basket-item h3 {margin: 0px;} .order .voucher {padding: 0px;} .order .voucher .col-1-2 {width: 50%; float: left;} .order .basket-aside .col-1-2, .order .basket-aside .col-1-3 {width: 50%; float: left;} .order .basket-aside .basket-shipping-costs:first-of-type{width: 70%!important; float: left;} .order .basket-aside .basket-shipping-costs:last-of-type{width: 30%!important} .order button.basket-bt-process-preorder {width: 100%; float:none;} .order .grid {padding: 0px;} #user-address a, .showShippingAddressForm {right: -10px; padding: 4px; font-size: 9px; top: -39px; width: 110px!important;} #payment-method, .my-hosted-fields-container {width: 100%;} #basket_aside {display: none;} #quickregister {margin-top: 36px;} .order-history {width: 100%;} .product {margin-bottom: 18px;} .related-products > h3 {margin-bottom: 20px;} .related-products .product {width: 100%;} .related-products .product:nth-child(2n+1) {clear: both;} .related-products .product .content {padding: 20px 0;} .related-products .product .content h3 {font-size: 20px; line-height: 25px;} .related-products .product .content .price {font-size: 16px;} .basket-bt-continue.empty-cart-bt{ position: absolute; bottom: 72px; width: calc(100% - 36px);} .jconfirm-box-container.large-modal {width: 100%;} .jconfirm .jconfirm-box {margin: 0!important;} .jconfirm .col-1-2 {width: 100%; float: none;} .jconfirm .loginbox {margin-top: 0;} .register {margin-top: 20px;} .jconfirm .jconfirm-box div.content {padding: 20px;} .jconfirm .jconfirm-box {margin: 0!important;} .jconfirm .col-1-2 {width: 100%; padding: 0 0 20px;} .jconfirm .register {padding: 0!important;} .jconfirm-box-container.large-modal, .jconfirm-box-container {width: 100%;} .register .custom-select.country {width: 100%;} .jconfirm form input[type="text"], .jconfirm form input[type="password"], .jconfirm button {width: 100%;} input[type="text"], input[type="password"] {-webkit-appearance: none; border-radius: 0;} footer {} } @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: http://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ @media print { *, *:before, *:after {background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important;} a, a:visited {text-decoration: underline;} a[href]:after {content: " (" attr(href) ")";} abbr[title]:after {content: " (" attr(title) ")";} a[href^="#"]:after, a[href^="javascript:"]:after {content: "";} pre, blockquote {border: 1px solid #999; page-break-inside: avoid;} thead {display: table-header-group;} tr, img {page-break-inside: avoid;} img {max-width: 100% !important;} p, h2, h3 {orphans: 3; widows: 3;} h2, h3 {page-break-after: avoid;} } /* ========================================================================== SELECTS ========================================================================== */ /* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */ .custom-select {display: table-cell; width: 440px; padding: 0; position: relative;} /* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */ .custom-select select {width: 100%; margin: 0; padding: .6em 1.9em .5em .8em; background: none; border: 1px solid transparent; border-radius: 0; line-height: 1.3; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; appearance: none; -webkit-appearance: none; cursor: pointer;} /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */ .custom-select::after {content: "\f3d0"; width: 9px; height: 8px; margin-top: -12px; font-family: 'Ionicons'; font-size: 19px; font-weight: bold; position: absolute; top: 50%; right: 1em; z-index: 2; pointer-events:none;} /* Focus style */ .custom-select select:focus {background-color: transparent; border: none; color: #222; outline: none;} /* Set options to normal weight */ .custom-select option {font-weight:normal;} /* ------------------------------------ */ /* START OF UGLY BROWSER-SPECIFIC HACKS */ /* ---------------------------------- */ /* OPERA - Pre-Blink nix the custom arrow, go with a native select button to keep it simple. Targeted via this hack http://browserhacks.com/#hack-a3f166304aafed524566bc6814e1d5c7 */ x:-o-prefocus, .custom-select::after {display:none;} /* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */ /* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .custom-select select::-ms-expand {display: none;} .custom-select select:focus::-ms-value {background: transparent; color: #222;} } /* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container. The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex. You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */ /* Show only the native arrow */ @-moz-document url-prefix() { .custom-select {overflow: hidden;} .custom-select select {width: 120%; width: -moz-calc(100% + 3em); width: calc(100% + em);} } /* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */ .custom-select select:-moz-focusring {color: transparent; text-shadow: 0 0 0 #000;} /* ------------------------------------ */ /* END OF UGLY BROWSER-SPECIFIC HACKS */ /* ------------------------------------ */ /*! Lity - v2.2.2 - 2017-07-17 * http://sorgalla.com/lity/ * Copyright (c) 2015-2017 Jan Sorgalla; Licensed MIT */ .lity { z-index: 9990; position: fixed; top: 0; right: 0; bottom: 0; left: 0; white-space: nowrap; background: #0b0b0b; background: rgba(0, 0, 0, 0.7); outline: none !important; opacity: 0; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .lity.lity-opened { opacity: 1; } .lity.lity-closed { opacity: 0; } .lity * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .lity-wrap { z-index: 9990; position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: center; outline: none !important; } .lity-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .lity-loader { z-index: 9991; color: #fff; position: absolute; top: 50%; margin-top: -0.8em; width: 100%; text-align: center; font-size: 14px; font-family: Arial, Helvetica, sans-serif; opacity: 0; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .lity-loading .lity-loader { opacity: 1; } .lity-container { z-index: 9992; position: relative; text-align: left; vertical-align: middle; display: inline-block; white-space: normal; max-width: 100%; max-height: 100%; outline: none !important; } .lity-content { z-index: 9993; width: 100%; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; -o-transition: -o-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease, -o-transform 0.3s ease; } .lity-loading .lity-content, .lity-closed .lity-content { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } .lity-content:after { position: absolute; left: 0; top: 0; bottom: 0; display: block; right: 0; width: auto; height: auto; z-index: -1; } .lity-close { z-index: 9994; width: 35px; height: 35px; position: fixed; right: 20px; top: 10px; -webkit-appearance: none; cursor: pointer; text-decoration: none; text-align: center; padding: 0; color: #fff; font-style: normal; font-size: 35px; font-family: Arial, Baskerville, monospace; line-height: 35px; border: 0; background: none; outline: none; -webkit-box-shadow: none; box-shadow: none; } .lity-close::-moz-focus-inner { border: 0; padding: 0; } .lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited { text-decoration: none; text-align: center; padding: 0; color: #fff; font-style: normal; font-size: 35px; font-family: Arial, Baskerville, monospace; line-height: 35px; border: 0; background: none; outline: none; -webkit-box-shadow: none; box-shadow: none; } /* Image */ .lity-image img { max-width: 100%; display: block; line-height: 0; border: 0; } /* iFrame */ .lity-iframe .lity-container, .lity-youtube .lity-container, .lity-vimeo .lity-container, .lity-facebookvideo .lity-container, .lity-googlemaps .lity-container { width: 90%; max-width: 964px; } .lity-iframe-container { width: 100%; height: 0; padding-top: 56.25%; overflow: auto; pointer-events: auto; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-overflow-scrolling: touch; } .lity-iframe-container iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } .lity-hide { display: none; }