/*------------------------RESET---------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;} article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; } /*------------------------------------------------------*/ html, body, form {width: 100%; height: 100%; font-size: 46px;} body {background: white; font-family: 'Kanit', sans-serif; overflow-x: hidden; overflow-y: auto;} @media screen and (max-width: 1200px) {html {font-size: 44px;}} @media screen and (max-width: 1150px) {html {font-size: 42px;}} @media screen and (max-width: 1100px) {html {font-size: 40px;}} @media screen and (max-width: 1050px) {html {font-size: 38px;}} @media screen and (max-width: 1000px) {html {font-size: 36px;}} @media screen and (max-width: 950px) {html {font-size: 34px;}} @media screen and (max-width: 900px) {html {font-size: 32px;}} @media screen and (max-width: 850px) {html {font-size: 30px;}} @media screen and (max-width: 800px) {html {font-size: 28px;}} @media screen and (max-width: 750px) {html {font-size: 26px;}} @media screen and (max-width: 700px) {html {font-size: 24px;}} @media screen and (max-width: 650px) {html {font-size: 22px;}} @media screen and (max-width: 600px) {html {font-size: 20px;}} @media screen and (max-width: 550px) {html {font-size: 18px;}} @media screen and (max-width: 500px) {html {font-size: 16px;}} @media screen and (max-width: 450px) {html {font-size: 14px;}} @media screen and (max-width: 400px) {html {font-size: 12px;}} .wrapper {display: flex; margin-left: auto; margin-right: auto; width: 1248px; height: 100%; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; flex-wrap: wrap;} .content {display: block; width: 100%; height: 100%; min-height: 500px; box-sizing: border-box; position: relative;} @media screen and (max-width: 1386px) { .wrapper {margin: 0 5%; width: 90%;} } /* HEADER ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #header {display: block; height: 80px; width: 100%; background: white; position: fixed; top: 0; right: 0; z-index: 1000; border-bottom: solid 1px #dfdfdf; box-sizing: border-box; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} #header.scroll-down {top: -90px;} #header .logo {display: flex; width: auto; height: calc(100% - 30px); position: absolute; left: 18px; top: 12px; z-index: 1002;} #header .logo img {width: auto; height: 100%;} #header #navicon {display: none; width: 30px; height: 30px; background: URL('images/navicon2.png') no-repeat center top; background-size: 100%; position: absolute; right: 24px; top: 24px; z-index: 1001; cursor: pointer} #header #navicon:hover {background-position: center top -30px;} #header.show #navicon {background-position: center top -60px;} #header.show #navicon:hover {background-position: center top -90px;} #header nav {display: flex; height: 100%; align-items: center; align-content: center; position: absolute; right: 32px; top: 0; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} #header nav a {display: flex; width: auto; height: 100%; align-items: center; font-size: 16px; font-weight: 300; color: #828282; margin-left: 0.8rem; box-sizing: border-box; -webkit-transition:.15s ease-in-out; transition: .15s ease-in-out;} #header nav a:hover {color: #1e71a6;} #header nav a.active {color: #1e71a6; border-bottom: solid 2px #1e71a6;} #header.show nav {top: 0;} #header.show .header-categories {top: -200px;} #header .header-arrow {display: none;} .hp #header {display: block; height: 100%; width: auto; background: none; position: absolute; border-bottom: none;} .hp #header #navicon {display: block; background-image: URL('images/navicon.png'); right: 30px; top: 30px;} .hp #header .logo {display: none;} .hp #header nav, .hp #header .header-categories {display: flex; width: 190px; height: 100%; align-items: center; align-content: center; flex-wrap: wrap; background: none; text-align: right; position: absolute; right: -420px; top: 0; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .hp #header .header-categories {width: 160px; top: 0; right: 0;} .hp #header nav a, .hp #header .header-categories a {display: block; width: 100%; height: auto; font-size: 17px; font-weight: 200; color: #dbdbdb; margin: 0; padding: 1px 30px 1px 0; white-space: nowrap;box-sizing: border-box; -webkit-transition:.15s ease-in-out; transition: .15s ease-in-out;} .hp #header .header-categories a {padding-right: 0; margin-right: 30px;} .hp #header nav a:hover, .hp #header .header-categories a:hover {color: white;} .hp #header nav a.active, .hp #header .header-categories a.active {color: white; border-right: solid 2px #1e71a6; border-bottom: none;} .hp #header .header-categories > a:nth-child(2) {padding-bottom: 20px; margin-bottom: 18px; border-bottom: solid 1px rgba(255,255,255,0.15);} .hp #header.show nav {top: 0; right: 0;} .hp #header.show .header-categories {top: 0; right: -340px;} .hp #header .header-arrow {display: block; width: 30px; height: 30px; background: URL('images/header-arrow.png') no-repeat center top; background-size: 100%; position: absolute; right: 30px; bottom: 30px; z-index: 1001; cursor: pointer} .hp #header .header-arrow:hover {background-position: center top -30px;} @media screen and (max-width: 1280px) { .hp #header #navicon {right: 25px; top: 25px;} .hp #header .header-categories {width: 150px;} .hp #header .header-categories a {font-size: 16px; padding: 1px 25px 1px 0;} .hp #header .header-categories a {padding: 1px 0; margin-right: 25px;} .hp #header .header-categories a:nth-child(2) {padding-bottom: 9px; margin-bottom: 6px;} .hp #header .header-arrow {right: 25px; bottom: 25px;} } @media screen and (max-width: 1080px) { #header .logo {height: calc(100% - 40px); left: 16px; top: 16px;} .page #header nav a {font-size: 16px;} } @media screen and (max-width: 768px) { .hp #header nav, .hp #header .header-categories {height: auto; top: 100px !important;} .hp #header .header-categories {width: 140px;} .hp #header nav a, .hp #header .header-categories a {font-size: 15px; padding-top: 1px; padding-bottom: 1px;} } @media screen and (max-width: 768px) { #header #navicon {display: flex;} .page #header nav {display: block; width: 100%; height: auto; top: -700px; right: 0; background: white; border-bottom: solid 1px #dadada; padding: 80px 0 20px; box-sizing: border-box;} .page #header nav a {display: block; width: auto; font-size: 17px; margin: 5px 15px; padding: 12px 0;} .page #header.show nav {top: 0;} } @media screen and (max-height: 640px) { .hp #header {min-height: 640px; height: 640px;} .hp #header .header-categories {height: auto; top: 70px !important;} } /* FOOTER */ #footer {display: flex; align-items: center; width: 100%; height: 5rem; position: relative; background: URL("images/slide1.jpg") repeat-x center center; background-size: cover; background-attachment: fixed;} #footer .wrapper {justify-content: space-between; position: relative; z-index: 1;} #footer ul {display: flex; align-items: center; flex-wrap: wrap;} #footer ul li {display: flex; margin-right: 20px;} #footer ul li:last-child {margin-right: 0;} #footer ul li a {display: inline-block; color: #e3e3e3; font-size: 18px; font-weight: 300; -webkit-transition:.15s ease-in-out; transition: .15s ease-in-out;} #footer ul li a:hover {color: #1e71a6;} #footer ul li a img {display: block; width: auto; height: 40px; margin-right: 15px;} #footer .copyright {display: block; color: #1e71a6; font-size: 18px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out} #footer .copyright:hover {color: white;} @media screen and (min-width: 960px) and (max-width: 1280px){ #footer ul li a {font-size: 16px;} #footer ul li a img {height: 34px; margin-right: 10px;} #footer .copyright {font-size: 16px;} } @media screen and (max-width: 960px) { #footer {height: auto; padding: 70px 0;} #footer .wrapper {justify-content: center;} #footer ul {width: 100%; justify-content: center;} #footer ul li {margin: 0 10px;} #footer ul li:first-child {width: 100%; justify-content: center; margin-bottom: 20px; margin-right: 0;} #footer .copyright {margin-top: 30px; font-size: 14px;} } @media screen and (max-width: 640px) { #footer .wrapper {display: block; text-align: center;} #footer ul {display: block; width: 100%; text-align: center;} #footer ul li {display: flex; justify-content: center; margin: 5px 0;} #footer ul li a img {height: 40px; margin-right: 0px; margin-bottom: 20px;} } /* GENERAL ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .section {display: block; width: 100%; height: auto; padding: 140px 0;} .page .section {padding: 90px 0;} .section.paragraph article {justify-content: space-between; align-items: flex-start; align-content: flex-start; position: relative; z-index: 1;} .section.paragraph article .left {display: block; width: 340px;} .section.paragraph article .right {display: block; width: calc(100% - 380px);} .section.paragraph article h2 {display: block; width: 100%; font-size: 60px; line-height: 1em; font-weight: 200; color: #17407a; margin-bottom: 15px;} .section.paragraph article ul {display: block;} .section.paragraph article ul li {display: block; width: 100%; margin-bottom: 6px; padding-left: 16px; box-sizing: border-box; font-size: 14px; font-weight: 300; line-height: 1.3em; position: relative;} .section.paragraph article ul li:before {display: inline-block; width: 16px; content: " \f105 \f105"; font-family: fontawesome; color: #17407a; position: absolute; left: 0; top: 0;} .section.paragraph article ul li:last-child {margin-bottom: 0;} .section.paragraph article ul li a {display: inline-block; color: #17407a;} .section.paragraph article ul li a:hover {text-decoration: underline;} .section.paragraph article p {display: block; width: 100%; font-size: 16px; line-height: 1.7em; font-weight: 300; color: #323232; text-align: justify; margin-bottom: 20px;} .section.paragraph article p:last-of-type {margin-bottom: 0;} .section.paragraph article p a {color: #17407a; text-decoration: underline;} .section.paragraph article p a:hover {text-decoration: none;} .categories-grid {display: block; width: 100%;} .categories-grid .wrapper {background: black;} .categories-grid a {display: block; width: 50%; height: auto; overflow: hidden; position: relative;} .categories-grid a img {display: block; width: 100%; height: auto; opacity: 0.5; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .categories-grid a:hover img {opacity: 0.2; -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);} .categories-grid a p {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 38px; color: #d1d1d1; font-weight: 200; line-height: 1em; text-align: center; position: absolute; left: 0; top: 0; z-index: 1; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .categories-grid a:hover p {color: white; -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);} .pg-heading {display: block; width: 100%; margin: 80px 0 0; padding: 60px 0; position: relative; background: URL("images/slide1.jpg") no-repeat center center; background-size: cover; background-attachment: fixed;} .pg-heading .wrapper {justify-content: space-between; align-items: center;} .pg-heading h1 {display: block; color: white; font-size: 70px; line-height: 1.1em; font-weight: 200; position: relative; z-index: 1; margin-right: 20px;} .pg-heading .tiny-nav {display: flex; flex-wrap: wrap; position: relative; z-index: 1;} .pg-heading .tiny-nav a {display: block; font-size: 16px; color: #dedede; margin-right: 14px; font-weight: 300; line-height: 1em; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .pg-heading .tiny-nav a:hover {color: #17407a;} .pg-heading .tiny-nav a:before {display: inline-block; margin-right: 14px; content: "\f105"; font-family: fontawesome;} .pg-heading .tiny-nav a:hover:before {color: #dedede;} .pg-heading .tiny-nav a:first-child:before {display: none;} .link {color: #17407a; text-decoration: underline;} .link:hover {text-decoration: none;} .button {display: block; font-size: 15px; line-height: 1em; font-weight: 300; text-align: center; padding: 8px 15px; box-sizing: border-box; border: none; outline: none; cursor: pointer; font-family: 'Kanit', sans-serif; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .button.border {border: solid 1px #17407a; color: #17407a;} .button.border:hover {background: #17407a; color: white } .button.color {background: #17407a; color: white; border: solid 1px #17407a;} .button.color:hover {background: none; color: #17407a;} .swiper-button-disabled {display: none !important;} @media screen and (max-width: 1280px) { .section {padding: 120px 0;} .page .section {padding: 80px 0;} .section.paragraph article .left {width: 300px;} .section.paragraph article .right {width: calc(100% - 330px);} .section.paragraph article p {font-size: 15px;} .pg-heading h1 {font-size: 64px;} } @media screen and (max-width: 960px) { .section {padding: 100px 0;} .page .section {padding: 70px 0;} .section.paragraph article .left {width: 100%;} .section.paragraph article .right {width: 100%;} .pg-heading {display: block;} .pg-heading h1 {font-size: 58px;} .pg-heading .tiny-nav {display: none;} } @media screen and (max-width: 768px) { .section {padding: 80px 0;} .page .section {padding: 60px 0;} .section.paragraph article p {font-size: 14px;} .categories-grid a {width: 100%;} .pg-heading h1 {font-size: 54px;} } @media screen and (max-width: 640px) { .pg-heading h1 {font-size: 48px;} } @media screen and (max-width: 480px) { .pg-heading h1 {font-size: 42px;} } @media screen and (min-width: 640px) and (max-width: 960px){ .section.paragraph article ul {display: flex; justify-content: space-between;} .section.paragraph article ul li {width: auto;} } .products {display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;} .products .wrapper {display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;} .products h2 {display: block; width: 100%; text-align: center; color: #17407a; font-size: 44px; font-weight: 200; line-height: 1em; margin-bottom: 10px;} .products .items {display: flex; width: 100%; height: auto; flex-wrap: wrap;} .products .product {display: flex; width: 25%; height: auto; flex-wrap: wrap; padding: 1.5rem 30px 0; margin-right: 1px; box-sizing: border-box; position: relative; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .products .product:after {display: block; width: 1px; min-height: 100%; background: URL('images/product-separator.png') no-repeat center center; background-size: 100% 100%; content: ""; position: absolute; right: 0; top: 0;} .products .product:last-child:after {display: none;} .products .product .img {display: block; width: 100%; height: auto; padding: 0px 40px 10px; margin-bottom: 13px; border-radius: 5px; box-sizing: border-box; overflow: hidden; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .products .product .img img {display: block; width: 100%; height: 100%;} .products .product:hover .img {-ms-transform: scale(1.05,1.05); -webkit-transform: scale(1.05,1.05); transform: scale(1.05,1.05);} .products .product h3 {display: flex; width: 100%; justify-content: center;} .products .product h3 a {display: inline-block; width: auto; height: auto; font-size: 20px; line-height: 0.8em; font-weight: 300; letter-spacing: -0.02em; color: #191919; box-sizing: border-box;} .products .product h3 a:hover {text-decoration: underline;} .products .product p {display: block; width: 100%; height: auto; font-size: 13px; color: #9a9a9a; font-weight: 300; margin-top: 3px; letter-spacing: 1px; text-align: center; box-sizing: border-box;} .products .product .button {width: 90px; margin: 16px calc(50% - 45px) 1px; font-size: 13px; padding: 8px 0;} .products .swiper-button-prev, .products .swiper-button-next {display: block; opacity: 0.25; position: absolute; top: calc(50% - 13px); width: 26px; height: 26px; z-index: 500; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .products .swiper-button-prev {left: -5%; background: URL('images/arrow-l.svg') no-repeat center center; background-size: auto 100%;} .products .swiper-button-next {right: -5%; background: URL('images/arrow-r.svg') no-repeat center center; background-size: auto 100%;} .products .swiper-button-prev:hover, .products .swiper-button-next:hover {opacity: 1; cursor: pointer;} @media screen and (max-width: 1124px) { .products h2 {font-size: 36px; font-weight: 300;} .products .product {width: 33.33%;} .products .swiper-button-prev {left: -1rem;} .products .swiper-button-next {right: -1rem;} } @media screen and (max-width: 768px) { .products .wrapper {padding: 1rem 0;} .products h2 {font-size: 28px;} .products .product {width: 50%;} .products .product h3 a {font-size: 23px;} .products .product p {font-size: 14px;} } @media screen and (max-width: 560px) { .products .product {width: 100%; padding: 2.4rem 3.2rem;} .products .product:after {display: none;} } @media screen and (max-width: 420px) { .products .product {padding: 2.4rem 1rem;} } /* HOMEPAGE ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .hp {background: URL("images/bg-skewed2.png") no-repeat right top 1000px, white; background-size: 600px 600px;} -hp .categories-grid {background: URL("images/bg-skewed1.png") no-repeat left top; background-size: 400px 400px;} .hp .seller.right:after {display: block; width: 400px; height: 400px; background: URL("images/bg-skewed4.png") no-repeat right top; background-size: 100% 100%; content: ""; position: absolute; right: 0; top: 100%;} .hp #footer:before {display: block; width: 600px; height: 600px; background: URL("images/bg-skewed3.png") no-repeat left bottom; background-size: 100% 100%; content: ""; position: absolute; left: 0; bottom: 100%;} @media screen and (max-width: 768px) { .hp .seller.right:after {width: 250px; height: 250px;} .hp #footer:before {width: 400px; height: 400px;} } .slider {display: block; width: 100%; height: 100%; position: relative; background: black; overflow: hidden;} .slider .swiper-slide {display: flex; width: 100%; height: 100%; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; position: relative;} .slider .swiper-slide.slide1 {background: URL("images/slide1.jpg") no-repeat center center; background-size: cover; background-attachment: fixed;} .slider .slider-watches {display: block; width: auto; height: 110%; position: absolute; left: 0; top: -5%; z-index: 1;} .slider .logo-brand {display: block; width: auto; height: 82px; position: absolute; left: 330px; top: calc(50% - 35px); z-index: 2;} @media screen and (min-width: 1280px) { .slider .logo-brand {left: 21%;} } @media screen and (max-width: 1280px) { .slider .slider-watches {height: 90%; top: 5%;} .slider .logo-brand {height: 70px; left: 240px; top: calc(50% - 30px);} } @media screen and (max-width: 960px) { .slider .slider-watches {height: 70%; top: 15%;} .slider .logo-brand {height: 60px; left: 200px; top: calc(50% - 25px);} } @media screen and (max-width: 768px) { .slider .logo-brand {height: 46px; left: auto; right: 25px; top: auto; bottom: 100px;} } @media screen and (max-width: 640px) { .slider .logo-brand {height: 41px;} } @media screen and (max-width: 480px) { .slider .logo-brand {height: 38px;} } @media screen and (max-height: 640px) { .slider {height: 640px;} } .seller {display: flex; width: 100%; height: 74px; padding-right: calc(50% - 10px); box-sizing: border-box; position: relative; z-index: 1;} .seller .text {display: flex; width: 100%; height: 100%; justify-content: flex-end; align-items: center; font-size: 16px; line-height: 1em; font-weight: 400; color: white; padding-right: 100px; background: URL("images/seller-bg.png") no-repeat right center; background-size: auto 100%; box-sizing: border-box;} .seller .text .img {display: inline-block; width: auto; height: 36px; margin-right: 18px;} .seller .text .img img {display: block; width: auto; height: 100%;} .seller .text a {color: white; text-decoration: underline;} .seller .text a:hover {text-decoration: none;} .seller.right {padding-left: calc(50% - 10px); padding-right: 0;} .seller.right .text {justify-content: flex-start; padding-right: 0; padding-left: 100px; background-position: left center;} @media screen and (max-width: 1280px) { .seller {height: 66px;} .seller .text {font-size: 15px; padding-right: 75px;} .seller .text .img {height: 34px; margin-right: 14px;} .seller.right .text {padding-left: 75px;} } @media screen and (max-width: 1124px) { .seller {width: 100%; padding-right: 0;} .seller .text {width: auto; justify-content: flex-start; padding-left: 5%;} .seller.right {justify-content: flex-end; padding-left: 0;} .seller.right .text {justify-content: flex-end; padding-right: 5%;} } @media screen and (max-width: 768px) { .seller {height: 60px;} .seller .text {font-size: 14px; padding-right: 65px;} .seller .text .img {height: 30px; margin-right: 12px;} .seller.right .text {padding-right: 65px;} } @media screen and (max-width: 540px) { .seller .text {font-size: 12px; padding-right: 60px;} .seller .text .img {height: 26px; margin-right: 11px;} .seller.right .text {padding-right: 60px;} } @media screen and (max-width: 480px) { .seller .text {font-size: 11px; padding-right: 55px;} .seller .text .img {height: 24px; margin-right: 10px;} .seller.right .text {padding-right: 55px;} } .hp-reviews {display: block; width: 100%; height: auto; padding-top: 0;} .hp-reviews .swiper-container {display: block; width: calc(100% + 240px); margin: -60px; height: 100%; position: relative;} .hp-reviews .swiper-slide {display: flex; width: 50%; min-height: 100%; justify-content: space-between; align-content: flex-start; flex-wrap: wrap; color: #2c2c2c; padding: 60px; margin-right: 2px; box-sizing: border-box; position: relative; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .hp-reviews .swiper-slide:after {display: block; width: 1px; min-height: 100%; background: URL('images/product-separator.png') no-repeat center center; background-size: 100% 100%; content: ""; position: absolute; right: 0; top: 0;} .hp-reviews .swiper-slide h2 {display: block; width: 100%; font-size: 17px; font-weight: 300; text-transform: uppercase; line-height: 0.9em; margin-bottom: 16px;} .hp-reviews .swiper-slide h2 span {display: inline-block; margin-left: 15px; padding-left: 15px; border-left: solid 1px #c9c9c9;} .hp-reviews .swiper-slide ul {display: block; width: calc(50% - 12px);} .hp-reviews .swiper-slide ul li, .hp-reviews .swiper-slide p.text {display: block; font-size: 14px; font-weight: 300; } .hp-reviews .swiper-slide ul li {padding-left: 15px; box-sizing: border-box;} .hp-reviews .swiper-slide p.text {margin-top: 15px; font-style: italic;} .hp-reviews .swiper-slide p.text a {color: #0e6fa0;} .hp-reviews .swiper-slide p.text a:hover, .hp-reviews .swiper-slide ul.pros li {color: #507080;} .hp-reviews .swiper-slide ul.pros li:before {content: "+ ";} .hp-reviews .swiper-slide ul.cons li:before {content: "- ";} .hp-reviews .swiper-slide ul li:before {display: inline-block; width: 15px; margin-left: -15px;} .hp-reviews .swiper-slide.last {justify-content: center; align-items: center; align-content: center;} .hp-reviews .swiper-slide.last img {display: block; width: 90px; height: auto;} .hp-reviews .swiper-slide.last p {display: block; width: 100%; text-align: center; font-size: 36px; line-height: 1.2em; font-weight: 200; color: #2c2c2c; margin: 8px 0 14px;} .hp-reviews .swiper-slide.last a {width: 120px; font-size: 15px; text-transform: uppercase; padding: 8px 0px;} .hp-reviews .swiper-button-prev, .hp-reviews .swiper-button-next {display: block; opacity: 0.25; position: absolute; top: calc(50% - 13px); width: 26px; height: 26px; z-index: 500; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .hp-reviews .swiper-button-prev {left: 0; background: URL('images/arrow-l.svg') no-repeat center center; background-size: auto 100%;} .hp-reviews .swiper-button-next {right: 0; background: URL('images/arrow-r.svg') no-repeat center center; background-size: auto 100%;} .hp-reviews .swiper-button-prev:hover, .hp-reviews .swiper-button-next:hover {opacity: 1; cursor: pointer;} @media screen and (max-width: 1280px) { .hp-reviews .swiper-container {width: calc(100% + 180px); margin: -45px;} .hp-reviews .swiper-slide {padding: 45px;} .hp-reviews .swiper-slide ul {width: calc(50% - 6px);} } @media screen and (max-width: 1080px) { .hp-reviews .swiper-slide {width: 100%; justify-content: flex-start; margin-right: 0;} .hp-reviews .swiper-slide:after {display: none;} .hp-reviews .swiper-slide ul {width: auto; max-width: 340px; margin-right: 20px;} } @media screen and (max-width: 960px) { .hp-reviews {} .hp-reviews .swiper-container {width: 100%; margin: 0; padding-top: 50px;} .hp-reviews .swiper-slide {padding: 0;} .hp-reviews .swiper-button-prev, .hp-reviews .swiper-button-next {top: 0; opacity: 0.5;} .hp-reviews .swiper-button-prev {left: -5px;} .hp-reviews .swiper-button-next {left: 26px; right: auto;} .hp-reviews .swiper-button-disabled {display: block !important; opacity: 0.15 !important;} } @media screen and (max-width: 540px) { .hp-reviews .swiper-slide ul li:before {display: inline-block; width: 13px; margin-left: -15px;} } /* ABOUT US ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .pg-about article.wrapper {display: flex; height: auto; justify-content: space-between; align-items: flex-start;} .pg-about .left {display: block; width: calc(100% - 380px);} .pg-about .right {display: block; width: 320px;} .pg-about strong {font-weight: 500;} .pg-about h2 {display: block; width: 100%; font-size: 56px; line-height: 1.03em; font-weight: 200; color: #17407a; margin: 70px 0 20px;} .pg-about h2:first-of-type, .pg-about .right h2:first-of-type {margin-top: 0;} .pg-about p {display: block; font-size: 17px; font-weight: 300; text-align: justify; margin-bottom: 30px;} .pg-about p .link.e-shop {font-size: 26px; font-weight: 300; text-decoration: none;} .pg-about p .link.e-shop:before {display: inline-block; content: "\f07a"; font-family: 'fontawesome'; margin-right: 15px; font-size: 0.8em;} .pg-about p .link.e-shop:hover {text-decoration: underline; color: #3276a2;} .pg-about .style-box {display: block; width: 100%; height: auto; color: black; font-weight: 300; padding: 1rem; border: solid 1px #17407a; box-sizing: border-box;} .pg-about .gallery {display: block; width: 100%; height: auto; overflow: hidden; margin-bottom: 30px;} .pg-about .gallery a.swiper-slide {display: block; width: auto; height: 3rem; min-height: 120px; cursor: pointer; box-sizing: border-box; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .pg-about .gallery a.swiper-slide img {display: block; width: auto; height: 100%;} .pg-about .gallery .swiper-button-prev, .pg-about .gallery .swiper-button-next {display: flex; width: 30px; height: 100%; justify-content: center; align-items: center; opacity: 0.7; position: absolute; top: 0; z-index: 500; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .pg-about .gallery .swiper-button-prev {left: -1px; background: URL('images/arrow2-l.svg') no-repeat center center, URL('images/arrow2-bg.png') repeat center center; background-size: 36% auto, cover;} .pg-about .gallery .swiper-button-next {right: -1px; background: URL('images/arrow2-r.svg') no-repeat center center, URL('images/arrow2-bg.png') repeat center center; background-size: 36% auto, cover;} .pg-about .gallery .swiper-button-prev:hover, .pg-about .gallery .swiper-button-next:hover {opacity: 1; cursor: pointer;} .pg-about .gallery .swiper-button-disabled {opacity: 0 !important;} .pg-about .img-width100 {display: block; width: 100%; height: auto; margin-bottom: 40px;} .pg-about .img-width100 img {display: block; width: 100%; height: auto;} .pg-about .right .img-width100 {margin-bottom: 15px;} .pg-about .video {display: block; width: 100%; height: auto; margin-bottom: 15px;} .pg-about #map {display: block; width: 100%; height: 8rem; min-height: 300px;} @media screen and (min-width: 1280px) { .pg-about .right h2 {font-size: 22px; font-weight: 300; margin-top: 40px;} .pg-about .right p {font-size: 15px;} } @media screen and (max-width: 1280px) { .pg-about .left {width: 100%;} .pg-about .right {width: 100%; margin-top: 30px;} .pg-about h2 {font-size: 48px;} } @media screen and (max-width: 768px) { .pg-about h2 {font-size: 42px; font-weight: 200; margin: 60px 0 20px;} .pg-about p {font-size: 16px;} .pg-about .style-box {padding: 1.8rem;} .pg-about p .link.e-shop {font-size: 22px;} } @media screen and (max-width: 540px) { .pg-about h2 {font-size: 38px;} .pg-about p {font-size: 15px;} } /* contact US ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .pg-contact article.wrapper {display: flex; height: auto; justify-content: space-between; align-items: flex-start;} .pg-contact .left {display: block; width: calc(100% - 380px);} .pg-contact .right {display: block; width: 320px;} .pg-contact strong {font-weight: 500;} .pg-contact h2 {display: block; width: 100%; font-size: 56px; line-height: 1.03em; font-weight: 200; color: #17407a; margin: 70px 0 20px;} .pg-contact .right h2:first-of-type {margin-top: 0;} .pg-contact p {display: block; font-size: 17px; font-weight: 300; text-align: justify; margin-bottom: 30px;} .pg-contact .style-box {display: block; width: 100%; height: auto; color: black; font-weight: 300; padding: 1rem; border: solid 1px #17407a; box-sizing: border-box;} .pg-contact .left ul {display: inline-block; width: auto; margin-right: 25px;} .pg-contact .right ul {display: block; width: 100%;} .pg-contact .left ul li, .pg-contact .right ul li {display: block; width: 100%; font-size: 18px; font-weight: 300; color: black;} .pg-contact .right ul li {font-size: 15px;} .pg-contact .left ul li a, .pg-contact .right ul li a {color: #17407a;} .pg-contact .left ul li a:hover, .pg-contact .right ul li a:hover {text-decoration: underline;} .pg-contact .left .img-width100 {display: block; width: 100%; height: auto; margin-top: 80px;} .pg-contact .left .img-width100 img {display: block; width: 100%; height: auto;} .pg-contact .form {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;} .pg-contact .form .input {display: block; width: 100%; margin-bottom: 9px;} .pg-contact .form label {display: block; width: 100%; font-size: 13px; color: #b0b0b0; margin-bottom: 3px;} .pg-contact .form input {display: block; width: 100%; height: 36px; padding: 0 10px; background: #fafafa; border: none; border-bottom: solid 1px rgba(0,0,0,0.2); box-sizing: border-box; outline: none; font-family: 'Kanit', serif; font-weight: 300;} .pg-contact .form textarea {display: block; width: 100%; height: 200px; padding: 10px; background: #fafafa; border: none; border-bottom: solid 1px rgba(0,0,0,0.2); box-sizing: border-box; outline: none; font-family: 'Kanit', serif; font-weight: 300;} .pg-contact .form button {width: 100%; margin-top: 5px;} .pg-contact .map {display: block; width: 100%; height: auté;} .pg-contact .map img {display: block; width: 100%;} @media screen and (min-width: 1080px) { .pg-contact .right h2 {font-size: 22px; font-weight: 300; margin-top: 40px;} .pg-contact .right p {font-size: 15px;} } @media screen and (max-width: 1080px) { .pg-contact .left {width: 100%;} .pg-contact .right {width: 100%; margin-top: 60px;} .pg-contact h2 {font-size: 48px;} .pg-contact .form .input {width: calc(33% - 5px); margin-bottom: 12px;} .pg-contact .form label {font-size: 16px;} } @media screen and (max-width: 768px) { .pg-contact h2 {font-size: 42px; font-weight: 200; margin: 60px 0 20px;} .pg-contact p {font-size: 16px;} .pg-contact .style-box {padding: 1.8rem;} .pg-contact .form .input {width: 100%; margin-bottom: 10px;} .pg-contact .form label {font-size: 13px;} } @media screen and (max-width: 540px) { .pg-contact h2 {font-size: 38px;} .pg-contact p {font-size: 15px;} } /* ESHOP ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .label1 {display: flex; width: 100%; align-items: center; flex-wrap: wrap; color: #8c8c8c; box-sizing: border-box; font-size: 15px; line-height: 1.2em; position: relative;} .label1:hover {color: #5b5b5b;} .input1, select, .chkselect {display: block; width: 160px; height: 46px; background: white; border: solid 1px #e0e0e0; padding: 0 16px; font-size: 20px; font-family: 'Kanit', serif; font-weight: 300; box-sizing: border-box; outline: none;} select {padding-right: 40px; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; position: relative; background: URL('images/arrow-down.png') no-repeat center right 12px; background-size: 10px auto;} select::-ms-expand {display: none;} .input1:focus, select:focus, .chkselect:focus, .input1:hover, select:hover, .chkselect:hover {border-color: #a0a0a0;} .chkselect {padding-right: 34px; background: URL('images/arrow-down.png') no-repeat right 16px top 19px, #fafafa; background-size: 13px auto, cover; position: relative;} .chkselect p {display: flex; width: 100%; height: 100%; align-items: center; font-size: 15px; color: #8f8f8f; text-transform: uppercase; padding-top: 1px; box-sizing: border-box; cursor: pointer; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .chkselect.sel p {color: #17407a; font-weight: 400;} .chkselect:hover p {color: #17407a;} .chkselect .options {display: none; width: calc(100% + 2px); height: auto; max-height: 280px; padding: 16px; position: absolute; top: 44px; left: -1px; z-index: 5; overflow: auto; background: white; border-left: solid 1px #e0e0e0; border-right: solid 1px #e0e0e0; border-top: solid 1px #e0e0e0; box-sizing: border-box; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .chkselect .options .note {display: block; width: 100%; font-size: 15px; color: #747474; margin-bottom: 15px;} .chkselect.show {background: URL('images/arrow-up.png') no-repeat right 16px top 19px, #fafafa; background-size: 13px auto, cover;} .chkselect.show .options {display: block;} input.chk1:not(:checked), input.chk1:checked {position: absolute; left: -9999px;} input.chk1:not(:checked) + label, input.chk1:checked + label {padding-left: 20px; margin-top: 8px; cursor: pointer;} input.chk1:not(:checked) + label:before, input.chk1:checked + label:before {content: ""; display: block; width: 12px; height: 12px; position: absolute; left: 0; top: 3px; background-image: URL('images/checkbox.png'); background-size: auto 300%; background-repeat: no-repeat;} input.chk1:not(:checked) + label:before {background-position: left top;} input.chk1:not(:checked) + label:hover:before {background-position: left center;} input.chk1:checked + label:before {background-position: left bottom;} input.chk1:checked + label {color: #00507c;} .eshop .filters {display: block; width: 100%; background: #fafafa; border: solid 1px #e0e0e0; padding: calc(40px + 0.6rem) 0;} .eshop .filters .box {display: block;} .eshop .filters .filter-inputs {justify-content: flex-start; align-items: flex-start; align-content: flex-start;} .eshop .filters .gender {justify-content: center; flex-wrap: wrap; margin-bottom: 35px;} .eshop .filters .gender a {display: block; font-size: 18px; font-weight: 300; color: #8a8a8a; text-align: center; border: solid 1px #c5c5c5; padding: 14px 30px;} .eshop .filters .gender a:first-child {border-radius: 3px 0 0 3px;} .eshop .filters .gender a:last-child {border-radius: 0 3px 3px 0;} .eshop .filters .gender a.sel {color: white !important; background: #17407a !important; border-color: #17407a;} .eshop .filters .gender a:hover {color: #17407a; border-color: #17407a;} .eshop .filters .chkselect {width: 25%; border: none; border-top: solid 1px #d9d9d9; border-right: solid 1px #d9d9d9;} .eshop .filters .chkselect.show {background: URL('images/arrow-up.png') no-repeat right 16px top 19px, white; background-size: 13px auto, cover; border-top: solid 1px #d9d9d9 !important;} .eshop .filters .chkselect.empty {background: none;} .eshop .filters .chkselect .options {z-index: 1000;} .eshop .filters .price-buttons {display: flex; width: 100%; flex-wrap: wrap; margin-top: 10px;} .eshop .filters .price {display: flex; width: calc(100% - 360px); margin-right: 20px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 20px;} .eshop .filters .price .price-slider {display: block; width: calc(100% - 330px); height: 6px; background: #17407a;} .eshop .filters .price .inputs {display: flex; width: 300px; justify-content: space-between; align-items: center; flex-wrap: wrap;} .eshop .filters .price .inputs input {width: 120px; font-size: 16px;} .eshop .filters .price .inputs p {display: block; font-size: 18px; font-weight: 300; color: #8f8f8f;} .eshop .filters .buttons {display: flex; width: 340px; justify-content: flex-end; margin-top: 20px;} .eshop .filters .buttons button {display: inline-block; padding: 9px 14px; font-size: 16px; text-transform: uppercase; font-weight: 300; border-width: 1px; letter-spacing: 0.01em; border-style: solid; font-family: 'Kanit', serif; cursor: pointer; outline: none; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .eshop .filters .buttons button:first-child {color: #6e6e6e; background: #ededed; border-color: #ededed;} .eshop .filters .buttons button:last-child {color: white; background: #17407a; border-color: #17407a; margin-left: 5px;} .eshop .filters .buttons button:first-child:hover {background: none; border-color: #cecece;} .eshop .filters .buttons button:last-child:hover {background: none; color: #17407a;} .eshop .product {margin-right: 0;} @media screen and (min-width: 1124px) { .eshop .filters .chkselect:nth-child(1), .eshop .filters .chkselect:nth-child(2), .eshop .filters .chkselect:nth-child(3), .eshop .filters .chkselect:nth-child(4) {border-top: none;} .eshop .filters .chkselect:nth-child(4), .eshop .filters .chkselect:nth-child(8), .eshop .filters .chkselect:nth-child(12), .eshop .filters .chkselect:nth-child(16), .eshop .filters .chkselect:nth-child(20) {border-right: none;} } @media screen and (max-width: 1124px) { .eshop .filters .gender a {font-size: 16px; padding: 12px 26px;} .eshop .filters .price {width: 100%; margin-right: 0px;} .eshop .filters .price .inputs input {height: 34px; font-size: 15px;} .eshop .filters .buttons {width: 100%; justify-content: flex-start;} .eshop .filters .buttons button {padding: 8px 12px; font-size: 15px;} } @media screen and (min-width: 768px) and (max-width: 1124px){ .eshop .filters .chkselect {width: 33.33%;} .eshop .filters .chkselect:nth-child(1), .eshop .filters .chkselect:nth-child(2), .eshop .filters .chkselect:nth-child(3) {border-top: none;} .eshop .filters .chkselect:nth-child(3), .eshop .filters .chkselect:nth-child(6), .eshop .filters .chkselect:nth-child(9), .eshop .filters .chkselect:nth-child(12), .eshop .filters .chkselect:nth-child(15), .eshop .filters .chkselect:nth-child(18), .eshop .filters .chkselect:nth-child(21) {border-right: none;} } @media screen and (max-width: 768px) { .eshop .filters .gender a {width: 45%; padding: 10px 0; font-size: 14px;} .eshop .filters .price .price-slider {width: 100%} .eshop .filters .price .inputs {width: 100%; justify-content: flex-start; margin-top: 25px;} .eshop .filters .price .inputs p {margin: 0 8px;} } @media screen and (min-width: 600px) and (max-width: 768px){ .eshop .filters .chkselect {width: 50%;} .eshop .filters .chkselect:nth-child(1), .eshop .filters .chkselect:nth-child(2) {border-top: none;} .eshop .filters .chkselect:nth-child(even) {border-right: none;} .eshop .filters .chkselect.empty {display: none;} } @media screen and (max-width: 680px) { .eshop .filters .gender {display: block;} .eshop .filters .gender a {width: auto; padding: 10px 0; font-size: 14px;} .eshop .filters .gender a:first-child {border-radius: 3px 3px 0 0;} .eshop .filters .gender a:last-child {border-radius: 0 0 3px 3px;} } @media screen and (max-width: 600px) { .eshop .filters .chkselect {width: 100%; border-right: none;} .eshop .filters .chkselect:nth-child(1) {border-top: none;} .eshop .filters .chkselect.empty {display: none;} } @media screen and (max-width: 600px) { .eshop .filters .price .inputs input {width: 100px; font-size: 14px;} } .ordering {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; padding: 0 0.9rem; margin: 20px 0; box-sizing: border-box;} .ordering > div {display: flex;} .ordering a, .ordering p {display: inline-block; color: #9b9b9b; font-size: 17px; font-weight: 300; margin: 0 7px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .ordering a:first-child {margin-left: 0;} .ordering a:hover, .ordering a.active {color: #17407a; cursor: pointer;} .ordering .count p {margin-right: 8px;} .pagination {display: flex; width: 100%; flex-wrap: wrap; margin: 100px 0 0;} .pagination a {display: block; color: #9b9b9b; font-size: 20px; font-weight: 300; padding: 4px 8px; margin: 0 1px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .pagination a.first:before {display: inline-block; content: "\f100"; font-family: 'fontawesome'; font-weight: 300;} .pagination a.prev:before {display: inline-block; content: "\f104"; font-family: 'fontawesome'; font-weight: 300;} .pagination a.next:after {display: inline-block; content: "\f105"; font-family: 'fontawesome'; font-weight: 300;} .pagination a.last:after {display: inline-block; content: "\f101"; font-family: 'fontawesome'; font-weight: 300;} .pagination a:hover {color: #17407a;} .pagination a.active {color: #17407a;} .pagination a.disabled {display: none;} @media screen and (max-width: 1080px) { .ordering a, .ordering p {font-size: 18px;} .ordering .count p {margin-right: 6px;} } @media screen and (max-width: 768px) { .ordering, .pagination {justify-content: center;} .ordering .types {display: flex; width: 100%; justify-content: center;} .ordering .count {border-top: solid 1px #e0e0e0; padding-top: 10px; margin-top: 10px;} } @media screen and (max-width: 480px) { .ordering a, .ordering p {font-size: 14px; margin: 0 6px;} .ordering .count p {margin-right: 7px;} } .eshop .products {padding-top: 0;} /* DETAIL */ .detail .modal {display: none; width: 100%; height: 100%; justify-content: center; align-items: center; background: rgba(0,0,0,0.7); position: fixed; top: 0; left: 0; z-index: 2000;} .detail .modal .window {display: flex; width: 100%; max-width: 500px; justify-content: center; align-items: flex-start; flex-wrap: wrap; padding: 1rem 1.5rem; box-sizing: border-box; background: white; -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.35); -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.35); box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.35);} .detail .modal .window img {display: block; width: 120px; margin-bottom: 30px;} .detail .modal .window p {display: block; width: 100%; text-align: center; font-size: 18px; line-height: 1.2em; font-weight: 300; color: #3d3d3d;} .detail .modal .window .button {margin-top: 25px; padding: 15px 30px; font-size: 16px;} .detail .modal.show {display: flex;} .detail .upper {display: block; width: 100%; padding: calc(40px + 0.6rem) 0; margin-bottom: 30px; box-sizing: border-box;} .detail .upper .wrapper {justify-content: space-between; align-items: flex-start; align-content: flex-start;} .detail .upper .left {display: block; width: 35%; padding-left: 0.9rem; box-sizing: border-box;} .detail .image {display: block; width: 100%; position: relative;} .detail .image.n2 {display: none;} .detail .image:after {display: block; width: 100%; height: 40px; background: URL('images/detail-shadow.png') no-repeat center center; background-size: auto 100%; content: "";} .detail .image .cover {display: flex; width: 100%; height: 14rem;} .detail .image .cover .swiper-slide {display: flex; width: 100%; height: 14rem; justify-content: center; align-items: center; overflow: hidden; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .detail .image .cover .swiper-slide img {display: block; width: auto; height: 14rem;} .detail .image .thumbs {display: flex; width: 34px; height: 300px; box-sizing: border-box; position: absolute; left: -1.5rem; top: calc(50% - 150px);} .detail .image .thumbs:after, .detail .image .thumbs:before {display: block; width: 100%; height: 26px; background: white; position: absolute; left: 0; z-index: 30; content: "";} .detail .image .thumbs:after {top: 0;} .detail .image .thumbs:before {bottom: 0;} .detail .image .thumbs .swiper-slide {opacity: 0.3; display: block; width: 100%; height: auto; margin: 0; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .detail .image .thumbs .swiper-slide:hover, .detail .image .thumbs .swiper-slide-active {opacity: 1;} .detail .image .thumbs .swiper-slide img {height: auto; width: 100%; cursor: pointer;} .detail .image .swiper-button-prev, .detail .image .swiper-button-next {display: block; opacity: 0.35; position: absolute; left: 0; right: auto; top: auto; width: 100%; height: 26px; z-index: 500; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .detail .image .swiper-button-prev {top: 0; background: URL('images/arrow-up.png') no-repeat center top; background-size: auto 44%;} .detail .image .swiper-button-next {bottom: 0 !important; background: URL('images/arrow-down.png') no-repeat center bottom; background-size: auto 44%;} .detail .image .swiper-button-prev:hover, .detail .image .swiper-button-next:hover {opacity: 1; cursor: pointer;} .detail .last-viewed {display: block; width: 70%; height: auto; margin: 0px 15% 0;} .detail .last-viewed.lv2 {display: none;} .detail .last-viewed h2 {display: block; width: 100%; font-size: 18px; font-weight: 300; text-align: center; margin-bottom: 16px; color: #848484;} .detail .last-viewed .last {width: 100%; height: 70px; padding: 0 40px; box-sizing: border-box; position: relative;} .detail .last-viewed .last:after, .detail .last-viewed .last:before {display: block; width: 40px; height: 100%; background: white; position: absolute; top: 0; z-index: 10; content: "";} .detail .last-viewed .last:after {right: -1px;} .detail .last-viewed .last:before {left: -1px;} .detail .last-viewed .last a {display: block; width: auto; height: 100%; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .detail .last-viewed .last a img {display: block; width: auto; height: 100%;} .detail .last-viewed .swiper-button-prev2, .detail .last-viewed .swiper-button-next2 {display: block; opacity: 0.35; position: absolute; top: 0; width: 20px; height: 100%; z-index: 500; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .detail .last-viewed .swiper-button-prev2 {left: -1px; background: URL('images/arrow-l.svg') no-repeat center; background-size: auto 35%;} .detail .last-viewed .swiper-button-next2 {right: -1px; background: URL('images/arrow-r.svg') no-repeat right center; background-size: auto 35%;} .detail .last-viewed .swiper-button-prev2:hover, .detail .last-viewed .swiper-button-next2:hover {opacity: 1; cursor: pointer;} .detail .upper .right {display: block; width: 65%; padding-left: 0.9rem; box-sizing: border-box;} .detail .upper .right .info {padding: 0;} .detail .upper .right .info h1 {display: block; width: 100%; font-size: 56px; line-height: 1em; font-weight: 200;} .detail .upper .right .info p {display: block; width: 100%; font-size: 15px; font-weight: 300;} .detail .upper .right .info .status {display: flex; width: 100%; align-items: center; flex-wrap: wrap; margin: 5px 0 20px;} .detail .upper .right .info .status .box {display: inline-block; padding: 5px 10px; margin-right: 12px; color: white; font-size: 13px; font-weight: 500;} .detail .upper .right .info .status.out-of-stock .box {background: #d0a43a;} .detail .upper .right .info .status.in-stock .box {background: #58c400;} .detail .upper .right .info .status .text {display: block; font-size: 15px; line-height: 1.2em; color: #7c7c7c;} .detail .upper .right .extras {display: flex; align-items: center; flex-wrap: wrap; margin-top: 25px;} .detail .upper .right .guarantee {display: flex; align-items: center; font-weight: 300; font-size: 15px; line-height: 1.3em; margin-right: 50px; margin-bottom: 15px; box-sizing: border-box;} .detail .upper .right .guarantee span {display: block; font-size: 40px; font-weight: 200; border-right: solid 1px #d7d7d7; padding-right: 12px; margin-right: 12px;} .detail .upper .right .original {display: flex; align-items: center; font-size: 12px; line-height: 1.3em; font-weight: 600; padding: 13px 0; color: #286579; margin-bottom: 15px; background: URL('images/badge.png') no-repeat left center; background-size: auto 100%; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .detail .upper .right .original span {display: block; text-align: center; margin-right: 16px; color: #39565f; line-height: 1em; background: white; padding: 2px 1px 3px; border-top: solid 1px #aabdc3; border-bottom: solid 1px #aabdc3; box-sizing: border-box;} .detail .upper .right .original:after {display: block; margin-left: 16px; font-size: 1.6em; font-weight: 300; content: "\f105"; font-family: fontawesome; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .detail .upper .right .original:hover {color: #257f9d;} .detail .upper .right .original:hover:after {margin-left: 19px;} .detail .upper .right .parameters {display: block; width: 100%; padding: 15px 0 30px; box-sizing: border-box;} .detail .upper .right .parameters .line {display: block; width: 100%; padding: 6px 0; color: #7d7d7d; font-weight: 300;font-size: 15px; line-height: 1.30em; border-bottom: solid 1px #d7d7d7;} .detail .upper .right .parameters .line:first-child {border-top: solid 1px #d7d7d7;} .detail .upper .right .parameters .line.hidden {display: none;} .detail .upper .right .parameters .line span:first-child {display: inline-block; font-weight: 400; margin-right: 8px; color: black;} .detail .upper .right .parameters .line i {display: inline-block; font-family: fontawesome; font-size: 14px; margin-left: 8px; color: #d0a43a; cursor: pointer;} .detail .upper .right .parameters .line .hint {display: none; width: 100%; height: auto; cursor: auto; padding: 20px 60px 20px 20px; font-size: 15px; font-style: italic; position: fixed; left: 0px; bottom: 0; text-align: left; z-index: 500; background: rgb(33,33,33); color: white; box-sizing: border-box;} .detail .upper .right .parameters .line.showhint .hint{display: block;} .detail .upper .right .parameters .line .hint .close {opacity: 0.4; display: block; width: 16px; height: 16px; position: absolute; right: 20px; top: calc(50% - 8px); background: URL('images/cross2.png') no-repeat center center; background-size: 100%; cursor: pointer;} .detail .upper .right .parameters .line .hint .close:hover {opacity: 0.8;} .detail .upper .right .parameters .bt {display: block; font-size: 14px; color: #17407a; font-weight: 600; cursor: pointer; margin-top: 15px;} .detail .upper .right .parameters .bt span {display: none;} .detail .upper .right .parameters .bt.v1 span.show {display: block;} .detail .upper .right .parameters .bt.v1 span.hide {display: none;} .detail .upper .right .parameters .bt span.hide {display: block;} .detail .upper .right .parameters .bt span:before {display: inline-block; content: "\f105"; font-family: fontawesome; margin-right: 8px;} .detail .upper .right .parameters .bt span.hide:before{content: "\f106";} .detail .upper .right .parameters .bt:hover {text-decoration: underline;} .detail .upper .right .colors {display: flex; width: 100%; height: auto; flex-wrap: wrap; position: relative; box-sizing: border-box;} .detail .upper .right .colors .color {display: block; width: auto; height: 68px; margin: 0 5px 5px 0; padding: 6px 17px; border: solid 1px #d7d7d7; box-sizing: border-box; position: relative;} .detail .upper .right .colors .color:hover {border-color: #a6a6a6;} .detail .upper .right .colors .color img {display: block; width: auto; height: 100%;} .detail .upper .right .colors .color .check {display: block; width: 18px; height: 18px; position: absolute; left: -1px; bottom: -1px;} .detail .upper .right .colors .red .check {background: #de3019;} .detail .upper .right .colors .blue .check {background: #1e9cab;} .detail .upper .right .colors .green .check {background: #6dab1e;} .detail .upper .right .colors .color .check:after {display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: URL('images/check.svg') no-repeat center center; background-size: 100% auto; content: "";} .detail .upper .right .colors .color.sel {border-color: #3c3c3c;} .detail .upper .right .colors .color.sel .check:after {display: block;} .detail .upper .right .colors .color .name {display: none; width: auto; height: auto; position: absolute; bottom: -26px; left: 0px; z-index: 5; color: white; background: black; padding: 4px 7px; font-size: 13px; border-radius: 3px; box-sizing: border-box; -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.35); -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.35); box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.35);} .detail .upper .right .colors .color:hover .name {display: block;} .detail .upper .right .price {display: flex; width: 100%; flex-wrap: wrap; box-sizing: border-box; font-weight: 400; margin-top: 20px;} .detail .upper .right .price p:first-child {display: block; width: 100%; color: #21.0321; font-size: 36px; font-weight: 300; line-height: 1em;} .detail .upper .right .price p:last-child {display: block; color: #848484; font-size: 20px; font-weight: 400; text-decoration: line-through; line-height: 1em;} .detail .upper .right .price p.discount {display: block; padding: 2px 6px; background: #d0a43a; color: white; font-size: 13px; letter-spacing: 0.02em; line-height: 1.2em; font-weight: bold; margin-right: 8px;} .detail .upper .right .buy {display: flex; width: 100%; align-items: center; flex-wrap: wrap; box-sizing: border-box; margin-top: 20px;} .detail .upper .right .buy button {font-size: 20px; padding: 15px 40px; margin: 0 15px 8px 0;} .detail .upper .right .buy p {display: block; font-size: 15px; font-weight: 300; line-height: 1.2em; margin-bottom: 8px;} .detail .bottom {display: block; width: 100%;} .detail .bottom .bigimage {display: block; width: 100%; height: auto; max-height: 14rem; position: relative; overflow: hidden;} .detail .bottom .bigimage:after {display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.8); position: absolute; left: 0; top: 0; content: "";} .detail .bottom .bigimage img {display: block; width: 100%; height: auto;} .detail .bottom .bigimage .text {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; position: absolute; left: 0; top: 0; z-index: 1; padding: 2rem; box-sizing: border-box;} .detail .bottom .bigimage .text h2 {display: block; width: 100%; text-align: center; color: white; font-size: 1.5rem; line-height: 1.02em; font-weight: 200;} .detail .bottom .bigimage .text p {display: block; width: 100%; text-align: center; color: #17407a;; font-size: 18px; line-height: 1.4em; font-weight: 300; margin-top: 20px;} .detail .bottom .products {padding: 100px 0;} @media screen and (max-width: 1300px) { .detail .upper .right .info h1 {font-size: 50px;} .detail .upper .right .status {display: block; margin-bottom: 15px;} .detail .upper .right .status .box {margin: 0 0 5px;} } @media screen and (max-width: 1124px) { .detail .upper .left {width: 45%;} .detail .image .cover, .detail .image .cover .swiper-slide, .detail .image .cover .swiper-slide img {height: 12rem;} .detail .image .thumbs {width: 28px; height: 260px; top: calc(50% - 130px);} .detail .image .thumbs:after, .detail .image .thumbs:before {height: 22px;} .detail .image .swiper-button-prev, .detail .image .swiper-button-next {height: 22px;} .detail .last-viewed h2 {font-size: 17px; margin-bottom: 12px;} .detail .last-viewed .last {height: 54px;} .detail .upper .right {width: 55%;} .detail .bottom .bigimage .text p {font-size: 16px; margin-top: 16px;} } @media screen and (max-width: 860px) { .detail .upper .right .info h1 {font-size: 44px;} .detail .upper .right .status .box {padding: 5px 6px; margin-right: 10px; font-size: 13px;} .detail .upper .right .status .text {font-size: 14px;} .detail .upper .right .guarantee {font-size: 13px;} .detail .upper .right .guarantee span {font-size: 30px;} .detail .upper .right .original {font-size: 12px; padding: 13px 0;} .detail .upper .right .original span {padding-bottom: 2px;} .detail .upper .right .parameters {padding: 25px 0 25px;} .detail .upper .right .parameters .line {padding: 5px 0; font-size: 14px;} .detail .upper .right .parameters .line i {font-size: 13px;} .detail .upper .right .parameters .bt {font-size: 13px;} .detail .upper .right .colors .color {height: 58px; margin: 0 4px 4px 0; padding: 5px 15px;} .detail .upper .right .colors .color .check {width: 16px; height: 16px;} .detail .upper .right .price p:first-child {font-size: 35px;} .detail .upper .right .price p:last-child {font-size: 17px;} .detail .upper .right .price p.discount {font-size: 12px;} .detail .upper .right .buy button {font-size: 17px; padding: 12px 34px;} .detail .upper .right .buy p {font-size: 13px;} } @media screen and (max-width: 768px) { .detail .bottom .bigimage .text p {font-size: 13px; margin-top: 10px;} } @media screen and (max-width: 680px) { .detail .modal .window {width: 90%; max-width: 300px; padding: 1.5rem;} .detail .modal .window img {width: 100px; margin-bottom: 25px;} .detail .modal .window p {font-size: 15px;} .detail .modal .window .button {margin-top: 20px; padding: 13px 25px; font-size: 14px;} .detail .upper .left {width: 100%;} .detail .upper .right {width: 100%; padding-left: 0;} .detail .image:after {position: absolute; left: 0; bottom: 80px;} .detail .image .cover, .detail .image .cover .swiper-slide, .detail .image .cover .swiper-slide img {height: 30rem;} .detail .image .thumbs {width: 100%; height: 50px; padding: 0 40px; position: relative; left: auto; top: auto; margin-top: 30px;} .detail .image .thumbs:after, .detail .image .thumbs:before {height: 100%; width: 40px;;} .detail .image .thumbs .swiper-slide {width: auto; height: 100%;} .detail .image .thumbs .swiper-slide img {width: auto; height: 100%;} .detail .image .thumbs .swiper-button-prev, .detail .image .thumbs .swiper-button-next {top: 0; bottom: auto; width: 20px; height: 100%;} .detail .image .thumbs .swiper-button-prev {left: 0px; background: URL('images/arrow-l.svg') no-repeat left center; background-size: auto 24px;} .detail .image .thumbs .swiper-button-next {right: 0px; left: auto; background: URL('images/arrow-r.svg') no-repeat right center; background-size: auto 24px;} .detail .image.n1 {display: none;} .detail .image.n2 {display: block; margin-top: 30px;} .detail .last-viewed.lv1 {display: none;} .detail .last-viewed.lv2 {display: block; width: 100%; margin: 30px 0 0; padding: 30px 0 0; border-top: solid 1px rgba(0,0,0,0.1);} } /* PG REVIEWS ------------------------------------------------------------------------------------------------------------------------------------------------------------ */ .reviews .wrapper {justify-content: space-between; align-items: flex-start;} .reviews .review {display: flex; width: 50%; min-height: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; color: #2c2c2c; padding: 50px 0; box-sizing: border-box; position: relative;} .reviews .review:nth-child(odd) {padding-right: 40px;} .reviews .review:nth-child(even) {padding-left: 40px;} .reviews .review:nth-child(odd):after {display: block; width: 1px; min-height: 100%; background: URL('images/product-separator.png') no-repeat center center; background-size: 100% 100%; content: ""; position: absolute; right: 0; top: 0;} .reviews .review h2 {display: block; width: 100%; font-size: 18px; text-transform: uppercase; line-height: 0.9em; margin-bottom: 16px;} .reviews .review h2 span {display: inline-block; margin-left: 15px; padding-left: 15px; border-left: solid 1px #c9c9c9;} .reviews .review ul {display: block; width: calc(50% - 12px);} .reviews .review ul li, .reviews .review p.text {display: block; font-size: 15px;} .reviews .review ul li {padding-left: 15px; box-sizing: border-box;} .reviews .review p.text {margin-top: 15px; font-style: italic;} .reviews .review p.text a {color: #0e6fa0;} .reviews .review p.text a:hover, .reviews .review ul.pros li {color: #507080;} .reviews .review ul.pros li:before {content: "+ ";} .reviews .review ul.cons li:before {content: "- ";} .reviews .review ul li:before {display: inline-block; width: 15px; margin-left: -15px;} .reviews .review.empty {height: 1px; visibility: hidden; padding: 0 !important;} @media screen and (max-width: 1080px) { .reviews .review {width: 100%; padding: 40px 0 !important;} .reviews .review:nth-child(odd):after {display: none;} } @media screen and (max-width: 960px) { .reviews .review h2 {font-size: 17px;} .reviews .review ul li, .reviews .review p.text {font-size: 14px;} } /* PG FAQ -----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .pg-faq {display: block; width: 100%;} .pg-faq .questions {display: block; width: 100%; box-sizing: border-box;} .pg-faq .questions .topic {display: block; width: 100%; margin-bottom: 40px;} .pg-faq .questions .topic:last-child {margin-bottom: 0px;} .pg-faq .questions .topic h2 {display: block; width: 100%; font-size: 42px; font-weight: 200; color: #454545; margin-bottom: 20px;} .pg-faq .questions .topic .question {display: block; width: 100%; margin-bottom: 5px; border-bottom: solid 1px #ebebeb; padding: 9px; box-sizing: border-box;-webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .pg-faq .questions .topic .question a {display: block; width: auto; font-size: 18px; font-weight: 300; color: #17407a; line-height: 1.3em; padding-left: 20px; box-sizing: border-box; position: relative; cursor: pointer;} .pg-faq .questions .topic .question a:hover {text-decoration: underline;} .pg-faq .questions .topic .question:hover, .pg-faq .questions .topic .question.sel {background: #fafafa;} .pg-faq .questions .topic .question a:before {display: inline-block; width: 20px; content: "\f105"; font-family: fontawesome; text-align: center; margin-left: -20px;} .pg-faq .questions .topic .question.sel a:before {content: "\f107";} .pg-faq .questions .topic .question p {display: none; width: 100%; font-size: 17px; font-weight: 300; color: #454545; margin: 8px 0; line-height: 1.4em; padding-left: 20px; box-sizing: border-box;} .pg-faq .questions .topic .question.sel p {display: block;} @media screen and (max-width: 1080px) { .pg-faq .questions .topic h2 {font-size: 36px; margin-bottom: 16px;} .pg-faq .questions .topic .question {margin-bottom: 8px;} .pg-faq .questions .topic .question a {font-size: 17px; padding-left: 18px;} .pg-faq .questions .topic .question a:before {width: 18px; margin-left: -18px;} .pg-faq .questions .topic .question p {font-size: 15px; margin: 7px 0 13px; padding-left: 18px;} } @media screen and (max-width: 768px) { .pg-faq .questions .topic h2 {font-size: 30px; margin-bottom: 15px;} .pg-faq .questions .topic .question {margin-bottom: 7px;} .pg-faq .questions .topic .question a {font-size: 16px; padding-left: 16px;} .pg-faq .questions .topic .question a:before {width: 16px; margin-left: -16px;} .pg-faq .questions .topic .question p {font-size: 14px; margin: 6px 0 11px; padding-left: 16px;} } /* ARTICLE */ .article {display: block; width: 100%;} .article article h2 {display: block; width: 100%; font-size: 34px; font-weight: 300; color: #17407a; margin: 30px 0 0;} .article article h2:first-of-type {margin-top: 0;} .article article h3 {display: block; width: 100%; font-size: 24px; font-weight: 300; color: #454545; margin: 20px 0 0;} .article article p {display: block; width: 100%; font-size: 17px; font-weight: 300; color: #454545; margin: 3px 0 12px; text-align: justify; line-height: 1.4em;} @media screen and (max-width: 1080px) { .article article h2 {font-size: 30px;} .article article h3 {font-size: 22px;} .article article p {font-size: 16px;} } @media screen and (max-width: 768px) { .article article h2 {font-size: 27px;} .article article h3 {font-size: 20px;} .article article p {font-size: 15px;} }