@charset "utf-8";
/* CSS Document */

/* ------- webfonts ------- */
@font-face {
    font-family: 'sharp-grotesk-25';
    src: url('fonts/SharpGrotesk-Bold25.eot');
    src: url('fonts/SharpGrotesk-Bold25.eot?#iefix') format('embedded-opentype'),
        url('fonts/SharpGrotesk-Bold25.woff2') format('woff2'),
        url('fonts/SharpGrotesk-Bold25.woff') format('woff'),
        url('fonts/SharpGrotesk-Bold25.ttf') format('truetype'),
        url('fonts/SharpGrotesk-Bold25.svg#SharpGrotesk-Bold25') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ------- STYLES ------- */

/* GENERAL */
.columns-guide{width:calc(100% - 80px)!important;position:fixed;height:100%;top:0;left:40px;z-index:100;pointer-events:none;grid-template-rows:1fr}

*{outline:none;margin:0;padding:0;font-family:'sharp-grotesk-25';box-sizing:border-box;font-size:20px;font-weight:500;line-height:24px;text-transform:uppercase}
body{-webkit-font-smoothing:antialiased!important;font-smoothing:antialiased!important;overflow-x:hidden;position:relative;margin:0 auto}
body.modal-opened{overflow:hidden}
body[modal-opened="login-modal"] .modal.login-modal{display:block}
body[modal-opened="signup-modal"] .modal.signup-modal{display:block}
body[modal-opened="delete-modal"] .modal.delete-modal{display:block}
body[modal-opened="status-modal"] .modal.status-modal{display:block}
body.modal-opened .overlay{display:grid!important}

::-webkit-input-placeholder{color:inherit}
:-moz-placeholder{color:inherit;opacity:1}
::-moz-placeholder{color:inherit;opacity:1}
:-ms-input-placeholder{color:inherit}
::-ms-input-placeholder{color:inherit}
input[type="submit"]{border:0;appearance:none;-webkit-appearance:none;border-radius:0;padding:5px 0;background:transparent;width:100%;text-align:left}
input[type="submit"].border{border-bottom:1px solid;border-top:1px solid;padding:20px 0}
input[type="submit"]:hover{cursor:pointer;opacity:.7}
input[type="text"]{font-size:inherit;background:transparent;font-weight:normal;appearance:none;-webkit-appearance:none;-moz-appearance:textfield;border-radius:0;border:0;width:100%;border-bottom:1px solid;padding-bottom:5px}
input[type="email"]{font-size:inherit;background:transparent;font-weight:normal;appearance:none;-webkit-appearance:none;-moz-appearance:textfield;border-radius:0;border:0;width:100%;border-bottom:1px solid;padding-bottom:5px}
input[type="password"]{font-size:inherit;background:transparent;font-weight:normal;appearance:none;-webkit-appearance:none;-moz-appearance:textfield;border-radius:0;border:0;width:100%;border-bottom:1px solid;padding-bottom:5px}
input[type="number"]{font-size:inherit;background:transparent;font-weight:normal;appearance:none;-webkit-appearance:none;-moz-appearance:textfield;border-radius:0;border:0;width:100%;border-bottom:1px solid;padding-bottom:5px}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance:none}
textarea{font-size:inherit;background:transparent;font-weight:normal;appearance:none;-webkit-appearance:none;-moz-appearance:textfield;border-radius:0;border:0;width:100%;border-bottom:1px solid;border-top:1px solid;padding:5px 0;resize:none;height:240px}
.select-wrapper{overflow:hidden;border:none;position:relative}
.select-wrapper span{background:none repeat scroll 0 0 #FFF;bottom:0;width:30px;position:absolute;right:0;text-align:center;z-index:1;pointer-events:none}
.select-wrapper select{border:0;background:transparent;width:100%;font-size:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;border-radius:0}

h1,h2,h3,h4,h5{font-weight:500;font-size:inherit}
p{font-size:inherit}
a{cursor:pointer;text-decoration:none;color:inherit;font-size:inherit}
a:hover{opacity:.7}
li{list-style:none}
img{width:100%;display:block}

.color-grey{color:#777}

.fs-s{font-size:12px;line-height:16px}
.fs-l{font-size:30px;line-height:36px}
.fs-xl{font-size:52px;line-height:56px}
.uppercase{text-transform:uppercase}
.underlined{text-decoration:underline}
.display-block{display:block}
.ta-left{text-align:left}
.ta-right{text-align:right}
.right{float:right}
.ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.position-relative{position:relative}
.margin-top-40{margin-top:40px}
.margin-top-80{margin-top:80px}
.margin-top-160{margin-top:160px}
.margin-bottom-80{margin-bottom:80px}
.margin-bottom-160{margin-bottom:160px}
.margin-bottom-40{margin-bottom:40px}
.padding-bottom-40{padding-bottom:40px}
.border-bottom{border-bottom:1px solid}
.border-bold{border-width:5px}
.padding-table{padding:8px 0}

/* modal */
.overlay{position:fixed;top:0;bottom:0;left:0;right:0;background:#ffffff70;z-index:100;display:none!important;align-items:center}
.modal{border:1px solid;display:none;padding:0 30px;max-height:80vh;position:relative}
.modal.on{transition:opacity .4s linear;-webkit-transition:opacity .4s linear;-moz-transition:opacity .4s linear;-ms-transition:opacity .4s linear;opacity:1}
.modal .content{padding:30px 0;display:table;width:100%}
.modal header{display:table;position:relative;width:100%;margin-bottom:60px}
.modal header .btn-close{position:absolute;right:0;opacity:1;transition:all .2s linear;top:0;font-size:22px}
.modal header .btn-close:hover{opacity:.7;cursor:pointer}
.modal form ul li{margin-bottom:20px}
.modal footer{margin-top:60px}

/* .slider */
.slider{width:100%;height:100%}
.slider div.slide{position:relative;height:100%}
.slider div.slide .img{width:100%;height:100%;background-position:center;background-size:auto 100%;background-repeat:no-repeat;overflow:hidden}
.slider div.slide.slide-video video{background:transparent;width:100%}
	section.full .slider .slide{margin:0 40px}
.slider-wrapper{position:relative}
.slider-wrapper .slider{height:100%;position:absolute;top:0;left:0}

/* columns */
.grid{display:grid;justify-content:center;width:100%;grid-template-columns:minmax(140px,1fr) repeat(6, 1fr)}
.grid > *{grid-column-end:span 7}
.fit-content{height:fit-content}
.align-center{align-content:center;align-items:center;justify-items:center}

.grid .c-1{grid-column-end:span 1}
.grid .c-1:not(.grid) > *{grid-column-end:span 1}
.grid .c-2{grid-column-end:span 2}
.grid .c-2:not(.grid) > *{grid-column-end:span 2}
.grid .c-3{grid-column-end:span 3}
.grid .c-3:not(.grid) > *{grid-column-end:span 3}
.grid .c-4{grid-column-end:span 4}
.grid .c-4:not(.grid) > *{grid-column-end:span 4}
.grid .c-5{grid-column-end:span 5}
.grid .c-5:not(.grid) > *{grid-column-end:span 5}

.grid-5{grid-template-columns:repeat(5,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.grid .p-2{grid-column-start:2}
.grid .p-3{grid-column-start:3}
.grid .p-4{grid-column-start:4}
.grid .p-5{grid-column-start:5}
.grid .p-6{grid-column-start:6}
.grid .p-7{grid-column-start:7}

.column-gap-40{column-gap:40px}
.row-gap-20{row-gap:20px}
.row-gap-80{row-gap:80px}

/* .btn */
.btn{border-top:1px solid;border-bottom:1px solid;padding:20px 0;width:100%;display:block}
.btn.box{border:none;padding:14px;text-align:center}

/* .lazy-img */
.thumb{background-color:transparent;position:relative}
.aspect{opacity:0;visibility:hidden}
.lazy{opacity:0;visibility:hidden;transition:opacity .3s ease, transform .3s ease;transform:translateY(20px)}
.lazy.visible{opacity:1;visibility:visible;transform:translateY(0)}
.lazy-img-wrapper{position:relative;overflow:hidden;background-color:transparent;transition:background .2s ease}
.lazy-img-wrapper .img{position:absolute;top:0;left:0;bottom:0;width:100%;opacity:0;transition:opacity .2s ease;background-position:center;background-size:cover;background-repeat:no-repeat}
.lazy-img-wrapper .fade{display:none;width:100%;height:220px;position:absolute;left:0;top:-100px;z-index:1}
.lazy-img-wrapper.loaded .img{opacity:1}
.img.thumb a{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2}
.img.thumb a .overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:rgba(45, 45, 45, 0.6);opacity:0;padding:20px;color:#FFF}
.img.thumb a:hover .overlay{opacity:1}

/* .master-wrapper */
.master-wrapper{margin:0 40px;width:calc(100% - 80px)}
.master-wrapper > section{margin-bottom:160px}

header.master{position:fixed;left:40px;top:40px;width:calc(100% - 80px);z-index:10}
header.master .dropdown-cart{border:1px solid;width:calc((100vw - 80px)/7*3);padding:20px;position:fixed;right:40px;top:100px;display:none}
header.master .dropdown-cart.opened{display:block}
header.master .dropdown-cart .items ul.item{display:grid;grid-template-columns:minmax(60px,100px) 1fr minmax(120px,160px);padding-bottom:20px;border-bottom:1px solid;margin-bottom:20px}
header.master nav.profile-nav{margin-top:20px}

main{padding:40px 0;align-content:space-between;position:relative}
main .scroll-h{position:absolute;left:0;bottom:40px}

section.products ul{grid-template-columns:repeat(2, 1fr);grid-gap:1px}
section.products ul li{outline:1px solid;grid-column-end:span 1;padding:40px}

section.gallery .slider{height:80vh}

section.order .unit{border-top:5px solid;padding-top:20px}
section.order .unit ul li{display:table;width:100%;margin-bottom:15px}
section.order .unit ul li:last-child{margin-bottom:0}
section.order .unit ul li > *{float:left}
section.order .unit ul li > *:not(.short){width:70%;padding-right:20px}
section.order .unit ul li > *.short{width:30%}
section.order .unit ul li input{border-top:1px solid;padding:10px 0}
section.order .unit ul li a.btn-add{border-top:1px solid;border-bottom:1px solid;padding:10px 0}

section.order-detail li.row ul{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid;padding:10px 0}
section.order-detail li.row.total ul{border-top:5px solid}

footer.master{margin-bottom:40px}

/* .page-index */
.page-index main{height:100vh}

/* .page-checkout */
.page-checkout main{height:calc(100vh - 160px)}


/* .section-profile */

/* .page-profile-information */
.page-profile-information .additional-emails{position:relative}
.page-profile-information .additional-emails input{padding-right:160px}
.page-profile-information .additional-emails a{position:absolute;right:0;bottom:5px}


@media (max-width: 900px){
	.columns-guide{width:calc(100% - 40px)!important;left:20px}
	.ta-right{text-align:left}

	.grid{grid-template-columns:repeat(1, 1fr)}
	.grid .c-2{grid-column-end:span 1}
	.grid .c-2:not(.grid) > *{grid-column-end:span 1}
	.grid .c-3{grid-column-end:span 1}
	.grid .c-3:not(.grid) > *{grid-column-end:span 1}
	.grid .c-5{grid-column-end:span 1}
	.grid .c-5:not(.grid) > *{grid-column-end:span 1}

	.grid .p-2{grid-column-start:1}
	.grid .p-3{grid-column-start:1}

	.modal{padding:0 20px;width:calc(100% - 40px);max-width:600px;justify-self:center}
	.modal .content{padding:20px 0}

	header.master{top:20px;left:20px;width:calc(100% - 40px)}
	header.master .cart-content{margin-left:20px}
	header.master .dropdown-cart{width:calc(100% - 40px);right:20px;top:60px}

	.master-wrapper{margin:0 20px;width:calc(100% - 40px)}
	.master-wrapper > section{margin-bottom:80px}

	main{padding:80px 0 20px;background-size:80%}

	section.order-detail .c-3{grid-column-end:span 3}
	section.order-detail .c-3 > *{grid-column-end:span 1}
	section.order-detail .c-2{grid-column-end:span 2}
	section.order-detail .c-2 > *{grid-column-end:span 2}

	footer.master{margin-bottom:20px}

	/* .section-profile */

	/* .page-order */
	.page-order .total-data{padding-top:8px}
}

@media (max-width: 720px){
	*{font-size:16px;line-height:24px}
	.fs-l{font-size:24px;line-height:30px}
	.fs-xl{font-size:34px;line-height:40px}

	section.products ul{grid-template-columns:1fr;grid-gap:0}
	section.products ul li{padding:20px}
	section.gallery .slider{height:50vh}

	header.master .dropdown-cart .items ul.item{grid-template-columns:minmax(40px,60px) 1fr minmax(60px,80px)}

	/* .section-profile */
	.section-profile main{padding-top:120px}

	.slick-slide{background-size:contain!important}
	.slider div.slide .img{background-size:contain!important}
}

@media (max-width: 540px){
	*{font-size:12px;line-height:16px}
	.fs-l{font-size:18px;line-height:21px}
	.fs-xl{font-size:21px;line-height:24px}

	.row-gap-80{row-gap:40px}

	.margin-top-80{margin-top:40px}
	.margin-top-160{margin-top:40px}
	.margin-bottom-80{margin-bottom:40px}
	.margin-bottom-160{margin-bottom:40px}

	.page-index main{height:85vh}
	body:not(.page-index) main{margin-top:0}
	main .scroll-h{bottom:0}
}

@media print{
    *{color:#000!important;font-size:12px;line-height:16px}
    body{margin:0;padding:0}

    .ta-right{text-align:right!important}

    /* columns */
	.grid{display:grid;justify-content:center;width:100%;grid-template-columns:repeat(7, 1fr)}
	.grid > *{grid-column-end:span 7}
	.fit-content{height:fit-content}
	.align-center{align-content:center;align-items:center;justify-items:center}

	.grid .c-1{grid-column-end:span 1}
	.grid .c-1:not(.grid) > *{grid-column-end:span 1}
	.grid .c-2{grid-column-end:span 2}
	.grid .c-2:not(.grid) > *{grid-column-end:span 2}
	.grid .c-3{grid-column-end:span 3}
	.grid .c-3:not(.grid) > *{grid-column-end:span 3}
	.grid .c-4{grid-column-end:span 4}
	.grid .c-4:not(.grid) > *{grid-column-end:span 4}
	.grid .c-5{grid-column-end:span 5}
	.grid .c-5:not(.grid) > *{grid-column-end:span 5}

	.grid-5{grid-template-columns:repeat(5,1fr)}
	.grid-4{grid-template-columns:repeat(4,1fr)}

	.grid .p-2{grid-column-start:2}
	.grid .p-3{grid-column-start:3}
	.grid .p-4{grid-column-start:4}
	.grid .p-5{grid-column-start:5}
	.grid .p-6{grid-column-start:6}
	.grid .p-7{grid-column-start:7}

	.column-gap-40{column-gap:40px}
	.row-gap-20{row-gap:20px}
	.row-gap-80{row-gap:40px}
}



/* SLICK PLUG IN */
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; height: 100%;}
.slick-list:focus { outline: none; }
.slick-loading .slick-list { background: #fff url("./ajax-loader.gif") center center no-repeat; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track { -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; left: 0; top: 0; display: block; height: 100%;}
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; background-position: center center;background-size: auto 100%; background-repeat:no-repeat;}
[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; }

/* Icons */
@font-face { font-family: "slick"; src: url("./hm_fonts/slick.eot"); src: url("./hm_fonts/slick.eot?#iefix") format("embedded-opentype"), url("./hm_fonts/slick.woff") format("woff"), url("./hm_fonts/slick.ttf") format("truetype"), url("./hm_fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; }
/* Arrows */
.slick-prev,.slick-next{position:absolute;display:block;line-height:30px;cursor:pointer;background:transparent;color:transparent;padding:0;border:none;outline:none;z-index:1;font-family:'Work Sans';font-size:50px;font-weight:500;overflow:hidden;width:50%;height:calc(100% - 120px);top:0}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }

.slick-prev:before, .slick-next:before {font-size: 40px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

[dir="rtl"] .slick-prev { left: auto; right: 0; }
[dir="rtl"] .slick-next { left: 0; right: auto; }

/* Dots */
.slick-dots { position: absolute; bottom: 30px; left:50%; transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%); list-style: none; display: block; text-align: left; padding: 0; z-index: 2 }
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 2px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; }
.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 { position: absolute; top: 0; left: 0;  font-family:"Arial"; content: "•"; width: 20px; height: 20px;font-size: 36px; line-height: 20px; text-align: center; color: #FFF; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: .3}
.slick-dots li.slick-active button:before { color: #FFF; opacity: 1;}