/* ========================================================================== 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}} .masonry .grid-sizer{width:33.33%;} [class*='col-'] img {max-width: 100%;} * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================================== Base styles ========================================================================== */ html {font-family: 'Montserrat', Arial, sans-serif; font-size: 13px; color:rgba(0, 0, 0, 0.85); line-height: 1.4; font-weight: 400} body {background: #fff} ::-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: 900px; 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)} .full {width: 100%;} 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: 500; font-size: 40px; text-transform: uppercase; font-family: 'Montserrat'; letter-spacing: 1px;} h2, h2 a {text-transform: none; color: #000; font-size: 34px; font-weight: 400; font-family: 'Cormorant'; font-style: italic; margin: 20px 0px; line-height: 110%;} h3, h3 a {text-transform: uppercase; color: rgba(0, 0, 0, 0.85); text-transform: uppercase; font-size: 12px; font-weight: 300;} h4, h4 a {text-transform: uppercase; color: rgba(0, 0, 0, 0.85); text-transform: uppercase; font-size: 14px; font-weight: 500; text-align: center} h5, h5 a {text-transform: uppercase; font-weight: 300; margin: 0px 0px 10px 0px;} body.info h2 {font-size: 14px; font-weight: 500; font-family: 'Montserrat'; font-style: normal; text-transform: uppercase} .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: 'Montserrat'; font-weight: 500} .no-desktop {display: none;} .text{font-size: 15px; line-height: 190%; font-weight: 300} /* ========================================================================== Header ========================================================================== */ header {padding: 36px 0px 0px 0px; position: relative; text-align: center; height: 92px; width: 100%;} header .logo {position: absolute; z-index: 9990; left: 36px; top: 36px;} header .logo img {width: 200px;} body header .statement {display: none} body.welcome header .statement {font-size: 12px; text-align: center; display: block; letter-spacing: 1px;} .menu-toggle {position: absolute; left: 36px; top: 18px; font-size: 36px; z-index: 99999; cursor: pointer; display: none;} header nav {position: absolute; left: 306px; top:43px; z-index: 9999} header nav.pushed { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1} header nav ul {list-style: none; margin: 0px; padding: 0px;} header nav ul li {display: inline-block; padding: 10px; font-size: 13px; font-weight: 500; text-transform: uppercase;} header .right-header {position: absolute; right: 36px; top:22px; z-index: 99999} header .basket, header .account, header .search, header .langs {display: inline-block} header .basket span {display: block; width: 100%; font-size: 10px; text-align: center; position: absolute; top: 9px; pointer-events: none; display: none} header .basket, header .account, header .search{cursor: pointer} header .langs {margin-left: 20px;} header .langs a {opacity: 0.3} header .langs a.active {opacity: 1} .search-container {position: absolute; top: 30px; right: 260px; z-index: 9999; display: none;} @font-face { font-family: "Flaticon"; src: url("../fonts/Flaticon.eot"); src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"), url("../fonts/Flaticon.woff") format("woff"), url("../fonts/Flaticon.ttf") format("truetype"), url("../fonts/Flaticon.svg#Flaticon") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: "Flaticon"; src: url("../fonts/Flaticon.svg#Flaticon") format("svg"); } } [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-family: Flaticon; font-size: 16px; font-style: normal; margin-left: 20px; } .flaticon-search:before { content: "\f100"; } .flaticon-user:before { content: "\f101"; } .flaticon-bag:before { content: "\f102"; } /* ========================================================================== Footer ========================================================================== */ footer {background: #393939; overflow: hidden; font-size: 12px; padding: 36px 0px 18px 0px; color: rgba(255, 255, 255, 0.80);} footer a {color: rgba(255, 255, 255, 0.80); margin-bottom: 6px; display: block} footer .right-align {text-align: right} footer h4 {margin: 0; text-transform: uppercase; font-weight: 300; color: rgba(255, 255, 255, 0.80)} footer hr {margin: 26px 36px 18px 36px;} footer form {margin-top: 10px;} footer input[type="text"] {width: 80%; float: left; height: 39px; border: 1px solid #fff!important; color: #fff} footer button {width: 15%; float: left; clear: none; border:1px solid #fff; border-left: 0px none!important; height: 39px; padding: 5px; margin-top: 0px} footer button i {font-size: 18px; color: #fff;} footer input::-webkit-input-placeholder {color:rgba(255, 255, 255, 0.7);} footer input::-moz-placeholder {color: rgba(255, 255, 255, 0.7);} footer input:-ms-input-placeholder {color: rgba(255, 255, 255, 0.7);} footer input:-moz-placeholder {color: rgba(255, 255, 255, 0.7);} footer .footer-social a { display: inline-block; margin-right: 10px; font-size: 16px; margin-top: 5px; color: #fff;} 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 {opacity: 0.8} .payment span {display: inline-block; padding: 4px; border: 1px solid #fff; border-radius: 4px; font-size: 18px;} footer .col-1-2:last-of-type a {display: inline;} /* ========================================================================== Products ========================================================================== */ .products-header {text-align: center; margin: 0px auto; max-width: 70%;} .products-header h1 {margin: 40px 0px 0px;} .products-header h2 {margin: 30px 0; font-family: Montserrat; font-size: 15px; font-weight: 300; font-style: normal; line-height: 1.7;} .products-header h1.subcat-title {margin: 0px 0px 0px;} .products-header h4.cat-title {margin: 40px 0px 0px;} .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%; -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; float:right; color: rgba(0, 0, 0, 0.35)} .product .subtitle {display: none;} .oldprice {display: block; text-decoration: line-through; color: rgba(175, 174, 174, 0.6)} .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 {margin: 36px auto 0px auto; overflow: hidden;} .product-image.col-1-2 {padding-right:54px;} .product-info.col-1-2 {padding-left: 18px;} .product-image img {width: 100%; } .product-image ul {margin: 0; padding: 0; list-style: none;} .product-info .available_in {font-size: 12px;} .product-info .price {font-size: 18px;} .product-info .price_right{float: right; text-align: right;} .add-to-bag {margin: 36px 0px 0px 0px; width: auto;} .product-info .more-info{padding-top: 18px; line-height: 190%; font-size: 15px; font-weight: 300} .product-info .more-info strong {color: rgba(0, 0, 0, 0.65);} .product-info .more-info p {max-width: 90%;} .product-info .more-info .details { font-size: 13px; line-height: 1.2; margin: 50px 0px; } .product-info .discountprice {float: none;} .product-info .discountprice .oldprice {color: rgba(0, 0, 0, 0.60)!important; display: inline-block; float: none; font-size: 14px; margin-right: 4px} .product-info .discountprice .price {color: rgba(0, 0, 0, 0.85)!important; display: inline-block; float: none} .back-to-collection {display: block; margin-bottom: 20px; text-transform: uppercase;} .product-main-image-container {display: flex; } .product-thumbnails {flex:0 0 121px} .product-main-image {flex:1; width: calc(100% - 121px)} .slider-nav {height: 80%; -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; overflow: hidden;} .slider-nav .slick-slide img {margin-bottom: 1px; opacity: .5} .slick-vertical .slick-slide:hover img {opacity: 1} .slick-vertical .slick-slide {border: 0px none!important;} /*VARIANTS*/ .variants {margin-top: 36px} .variants .variant {margin-bottom: 18px} .variants .variant ul { margin: 0px; padding: 0px; list-style-type: none} .variants .variant ul li {border: 1px solid #e3e3e3; display: inline-block; text-transform: uppercase; font-weight: 300; line-height: 40px; text-align: center; font-size: 11px; min-width: 40px; height: 40px; padding: 0px 8px; cursor: pointer; overflow: hidden} .variants .variant ul li.hasphoto {padding: 4px;} .variants .variant ul li.hasphoto span {width: 100%; height: 100%; display: inline-block} .variants .variant ul li:hover, .variants .variant ul li.active {border: 1px solid #333} .variants .variant ul li input {display: none;} /*category page*/ .product.subcat-item .overlay {position: absolute; } .product.subcat-item .overlay.color_white {color: #fff} .product.subcat-item .overlay.pos_top-left {top: 0px; left:0px} .product.subcat-item .overlay.pos_top-right {top: 0px; right:36px} .product.subcat-item .overlay.pos_down-left {bottom: 0px; left:0px} .product.subcat-item .overlay.pos_down-right {bottom: 0px; right:36px} .product.subcat-item .overlay h2 { text-transform: uppercase; font-weight: 500; font-size: 14px; font-family: 'Montserrat'; font-style: normal; line-height: 120%; margin: 0px; padding: 26px} .sidebar-drawer {width: 346px; padding: 36px; background: #efeff169; 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} .sidebar-drawer.pushed {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1} .sidebar-drawer h1 {margin: 0 0 20px; font-size: 14px; text-transform: uppercase;} .sidebar-drawer button {margin: 0px;} .form-feedback {display: none;} /* ========================================================================== HOME ========================================================================== */ .banner {position: relative;} .banner .slide {display: none; width: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover;} .banner .slide:hover {color: #000;} .welcome .banner .slide {height: 600px;} .banner .first-slide {display: block;} .banner .text {display: flex; width: 100%; height:100%; text-align: center; align-items: center; } .banner .text img {width: 80%;} .banner .smaller, .info p.smaller {font-size: 30px; margin-top: -30px;} .banner img {width: 100%;} .cycle-pager {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; padding-left: 100px; text-align: left;} .banner h1 {margin: 0px; text-align: left; font-size: 50px;} .banner h2 {margin:0px 0px 0px; text-align: left; font-size: 40px;} .banner h2 p {margin: 0px;} .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;} .home-highlights {display: flex; width: 100%; height: 700px; padding: 15px; flex-flow: column wrap; font-weight: 300} .highlight {display: flex; width: calc((100% - 15px * 6) / 3); height: calc((100% - 15px * 4) / 2); margin: 15px; padding: 20px 25px; background-size: cover; background-position: center; font-size: 30px; line-height: 42px; text-transform: uppercase; align-items: flex-end;} .highlight.pos_top {align-items: flex-start} .highlight.height-2-3 {height: calc((100% - 15px * 4) / 3 * 2);} .highlight.height-1-3 {height: calc((100% - 15px * 4) / 3);} .highlight.height-6-10 {height: calc((100% - 15px * 4) / 10 * 6);} .highlight.height-4-10 {height: calc((100% - 15px * 4) / 10 * 4);} .highlight.green {background: #393939; color: #fff; align-items: center; justify-content: flex-start; text-transform: none; font-size: 26px; line-height: 140%;} .highlight.pink {background: #f5e4e2; align-items: center; justify-content: center; text-transform: none;} .highlight.text-right {justify-content: flex-end;} .highlight h2 {text-transform: uppercase; font-weight: 500; font-size: 14px; font-family: 'Montserrat'; font-style: normal; line-height: 120%; margin: 0px;} .highlight h3 {text-transform: uppercase; font-weight: 300; font-size: 12px; font-family: 'Montserrat'; font-style: normal; line-height: 120%; margin: 4px 0px 0px 0px;} .highlight p {margin: 10px 0 0; font-size: 14px; line-height: 1.6;} .highlight .color_white h2, .highlight .color_white h3 {color: #fff;} /* ========================================================================== PRESS ========================================================================== */ .press .item {margin-bottom: 40px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .press .item:hover{opacity: 0.7;} .press .item:nth-child(4n+1) {clear: left;} .press .photo img {display: block; width: 100%;} .press .item h3 {font-size: 20px; font-weight: 500;} .press .item .text {margin-top: 20px; text-align: left;} .press .text p{margin-top: 10px; line-height: 130%;} /* ========================================================================== 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)} a.viewmap {display: inline-block; padding: 16px 28px; letter-spacing: 1px; text-transform: uppercase; text-align: center; font-size: 12px; text-shadow: none !important; border: 1px solid #393939; color: #393939; box-shadow: none !important; margin: 20px 0px 0px 0px; background: none; -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; line-height: 100%; font-weight: 300;} /* ========================================================================== 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;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: #efeff169; 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-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 {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-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 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;} .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 .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 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, textarea {width: 100%; margin-bottom: 18px; padding: 11px 14px; font-size: 12px!important; background: none; border: 1px solid rgba(0, 0, 0, 0.15)!important; } 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: inline-block; padding: 16px 28px; letter-spacing: 1px; text-transform: uppercase; text-align: center; font-size: 12px; text-shadow: none !important; border: 0px none; color: #fff; box-shadow: none !important; margin: 36px 0px 0px 0px; background:#393939; -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; line-height: 100%; font-weight: 300; cursor: pointer;} button .white, .button.white {background: #FFF;} button:hover, .button:hover {background: rgba(0, 0, 0, 0.10)!important;} .button-invert {background: #FFF; border: 1px solid #000; color: #000;} .button-invert:hover {background: #000!important; color: #FFF;} form.contact-form input[type="text"], form.contact-form textarea {display: block; width: 100%; } form.contact-form label.error {display: none!important;} form.contact-form button {margin-top: 0px} .col-1-2.rightpad {padding-right: 54px;} .col-1-2.leftpad {padding-right:18px;;} .pages-container strong {font-weight: 500!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} .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; } /*! * 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-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;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} /* ========================================================================== 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) { h1 {font-size: 25px; line-height: 1;} .products-header h1 {margin: 0;} .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;} .wrapper.margin-top {margin-top: 0!important;} header {height: auto; padding: 18px 0px} .welcome header {z-index: 999;} header .logo {display: block!important; opacity: 1!important; width: 80%; margin: 50px 10% 30px; position: static;} header .logo img {width: 100%;} header nav {width: 100%; height: 100%; background: #FFF; position: fixed; top: 0; right: 0; left: auto; z-index: 9999; transform: translateX(-100%); transition: all 0.6s ease 0s; overflow-y: auto;} body.nav-is-open {height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;} header nav ul.primary {margin-top: 60px; border-top: 1px solid #DCDCDC;} header nav ul li {display: block; width: 100%; padding: 0; border-bottom: 1px solid #DCDCDC; text-align: left;} header nav ul a {display: block; width: 100%; padding: 15px 10%;} header nav ul a:hover {background: #DCDCDC;} .nav-info {padding: 20px 10%; text-align: left;} .nav-info .menu-social {font-size: 20px; letter-spacing: 5px;} .nav-info .nav-secondary {margin: 20px 0;} .nav-info .nav-secondary a {display: block;} .menu-toggle {display: block; top: 8px;} 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;} footer .right-align{text-align: left;} .banner {margin-top: -18px;} .banner h1 {font-size: 14px; top:-20px;} .banner .slide {height: auto;} .welcome .banner .slide {height: calc(100vh - 100px);} .banner .text {align-items: flex-end; padding-bottom: 20px;} .banner .banner-container {padding-left: 10%;} .home-highlights {display: block; height: auto;} .highlight {width: 100%; height: 250px!important; margin: 0 0 15px;} .products-header h4.cat-title {margin-top: 0;} .product-thumbnails {display: none;} .product-main-image {width: 100%;} .product-image.col-1-2 {padding-right: 10px;} .product-info.col-1-2 {padding-left: 0;} .product-info .more-info p {max-width: 100%;} .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;} } @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; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Slider */ .slick-loading .slick-list { /*background: #fff url('./ajax-loader.gif') center center no-repeat;*/ } /* Icons */ /*@font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('./fonts/slick.eot'); src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); }*/ /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; margin: 0; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; z-index: 999; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent!important; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: 15px; } [dir='rtl'] .slick-prev { right: 15px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: 15px; } [dir='rtl'] .slick-next { right: auto; left: 15px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: black; }