@charset "utf-8";

/* CSS Reset */

* {

	margin: 0;

	padding: 0;

}



input:required, textarea:required, select:required {

    box-shadow: none;

}



input:invalid, textarea:invalid, select:invalid {

    box-shadow: none;

}



html {

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}





/* Default Setting for Font and Link */

a img {

	border: none;

}



a {

	text-decoration: none;

    color: inherit;

	outline: none;

}



.title {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 20px;

	color: #603C3A;

}



.subtitle {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #603C3A;

	font-weight: bold;

}



.text {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #603C3A;

}



.banner-title {

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	-webkit-transform: translateY(-50%);

	-moz-transform: translateY(-50%);

	-o-transform: translateY(-50%);

	-ms-transform: translateY(-50%);

	text-align: center;

	font-family: helvetica condensed;

	font-size: 60px;

	color: #603C3A;

	font-weight: bold;

}

	

.banner-title .banner-subtitle {

	font-family: helvetica condensed;

	font-size: 28px;

	color: #603C3A;

	line-height: 1.5;

}


.banner-title .banner-inform {

	font-family: helvetica condensed;

	font-size: 20px;

	font-style: italic;

	color: #603C3A;

	line-height: 1.5;

}



.right {

	right: 100px;

}



.left {

	left: 100px;

}



.clear-both {

	clear: both;

}



.inform {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: italic;

	color: #603c3a;

}



.txt-copyright {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	color: #603C3A;

}



#tbl-wrapper {

	margin: 0 auto;

}



.err {

	text-align: left;

	font-family: Geneva, Arial, Helvetica, sans-serif;

	font-size : 13px;

	color: red;

}





.md {

	width: 100%;

	display: block;

	margin-top: 20px auto 0;

	padding-top: 30px;

	text-align: center;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 13px;

	color: #603C3A;

}

.md a {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 13px;

	color: #603C3A;

}

.md a:hover {

	color: #603C3A;

}



.loader-form {

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0;

	background: url('https://www.expressboxindo.com/Images/loader.gif');

	background-color: rgba(255,255,255,0.5);

	background-position: center center;

	background-repeat: no-repeat;

	background-size: 36px auto;

	display: none;

}







/* Header */

.container-header {

	width: 100%;

	margin: 0 auto;

}



header {

	width: 888px;

	height: 90px;

	margin: 10px auto 20px;

}



.logo {

	width: 30%;

	height: 90px;

	float: left;

}



.logo img {

	max-height: 90px;

}



.wrapper-info {

	width: 70%;

	height: 90px;

	float: right;

}



.sosmed {

	height: 20px;

	margin-bottom: 50px;

	text-align: right;

	display: inline-block;

	float: right;

}



.fb {

	margin-bottom: 0;

	width: 23px;

	height: 20px;

	background: url(../Images/Sosmed/fb.png);

	background-position: center;

	background-size: 23px 20px;

	cursor: pointer;

	float: right;

}

.fb:hover {

	background: url(../Images/Sosmed/fb%20roll.png);

	background-size: 23px 20px;

}

.ig {

	margin-bottom: 0;

	margin-right: 4px;

	width: 23px;

	height: 20px;

	background: url(../Images/Sosmed/ig.png);

	background-position: center;

	background-size: 23px 20px;

	cursor: pointer;

    float: right;

}

.ig:hover {

	background: url(../Images/Sosmed/ig%20roll.png);

	background-size: 23px 20px;

}

.tw {

	margin-bottom: 0;

	width: 23px;

	height: 20px;

	background: url(../Images/Sosmed/tw.png);

	cursor: pointer;

	float: right;

}

.tw:hover {

	background: url(../Images/Sosmed/tw%20roll.png);

}



.lang-switch {

	padding: 0;

	height: 22px;

	line-height: 22px;

	list-style: none;

	float: right;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #D0DBEB;

	margin-right: 10px;

	border-right: 1px solid #603C3A;

}



.lang-switch li {

	width: 20px;

	height: 20px;

	border: 1px solid #603C3A;

	border-radius: 5px;

	margin-right: 5px;

	display: inline-block;

	cursor: pointer;

	opacity: 0.5;

	transition: all 0.5s;

}



.lang-switch li:hover {

	opacity: 1;

	transition: all 0.5s;

}



.lang-switch li:first-child {

	background: url(../Images/Logo/eng-flag.png);

	background-position: center center;

	background-repeat: no-repeat;

	background-size: auto 25px;

}



.lang-switch li:last-child {

	margin-right: 15px;

	background: url(../Images/Logo/id-flag.png);

	background-position: center center;

	background-repeat: no-repeat;

	background-size: auto 25px;

}



.lang-switch li.active {

	cursor: default;

	color: #603C3A;

	opacity: 1;

}



.mail {

	width: 250px;

	height: 20px;

	line-height: 20px;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #603C3A;

	float: left;

	margin-left: 100px;

}



.mail img {

	height: 15px;

	margin-bottom: -3px;

}



.phone {

	width: 250px;

	height: 20px;

	line-height: 20px;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #603C3A;

	text-align: right;

	float: right;

}



.phone img {

	height: 15px;

	margin-bottom: -2px;

}



.nav {

	width: 100%;

	height: 45px;

	background: #D0DBEB;

	margin-bottom: 20px;

}



.menu {

	list-style: none;

	width: 888px;

	height: 45px;

	line-height: 45px;

	margin: 0 auto;

}



.menu li {

	width: 125px;

	margin-left: 27px;

	text-align: center;

	float: left;

}



.menu li:first-child {

	margin-left: 0;

}



.menu li a {

	text-decoration: none;

	font-family: helvetica condensed;

	font-size: 24px;

	color: #603C3A;

}



.menu li a:hover {

	font-weight: bold;

}



.menu li a.active {

	font-weight: bold;

}







/* Footer */

footer {

	width: 888px;

	margin: 30px auto 8px;

	padding-top: 10px;

	border-top: 5px solid #D0DBEB;

}



.copyright {

	width: 45%;

	height: 20px;

	line-height: 20px;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	color: #603C3A;

	float: left;

}



.nav-footer {

	list-style: none;

	width: 41%;

	height: 20px;

	line-height: 20px;

	float: right;

}



.nav-footer li {

	padding-left: 15px;

	float: left;

}



.nav-footer li:first-child {

	padding-left: 0px;

}



.nav-footer li a {

	text-decoration: none;

	font-family: helvetica condensed;

	font-size: 14px;

	color: #603C3A;

}



.nav-footer li a:hover {

	font-weight: bold;

}





/* Banner */

.slider-wrapper {

	position: relative;

	width: 888 px;

	height: 400 px;

	margin-top: 0;

	margin-right: auto;

	margin-bottom: 0;

	margin-left: auto;

}



.slider-nav {

	width: 888px;

	height: 35px;

	display: block;

	position: absolute;

	top: 0;

	margin-top: 0px;

	z-index: 1000;

}



.prev {

	background-image: url(../js/Navigation/arrow-hover.png);

	float: left;

	position: absolute;

	z-index: 13;

	top: 200px;

	left: 10px;

	height: 35px;

	width: 35px;

}



.prev:hover {

	background-image: url(../js/Navigation/prev-hover.png);

	float: left;

	position: absolute;

	top: 200px;

	left: 10px;

	z-index: 13;

	height: 35px;

	width: 35px;

}



.next {

	background-image: url(../js/Navigation/arrow-next.png);

	position: absolute;

	z-index: 13;

	float: right;

	clear: right;

	top: 200px;

	right: 10px;

	height: 35px;

	width: 35px;

}



.next:hover {

	background-image: url(../js/Navigation/next-hover.png);

	position: absolute;

	float: right;

	clear: right;

	top: 200px;

	right: 10px;

	z-index: 13;

	height: 35px;

	width: 35px;

}





/* Thumbnail Slider */

.content-slider {

	list-style: none outside none;

	padding-left: 0;

    margin: 0;

}

.content-slider li {

	text-align: center;

	color: #FFF;

	height: 190px;

	position: relative;

	top: 0;

	left: 0;

}



.content-slider li .cover {

	width: 169.6px;

	height: 170px;

	position: relative;

}



.content-slider li .cover img {

	max-width: 90%;

	max-height: 90%;

	position: absolute;

	bottom: 0;

	left: 50%;

	-webkit-transform: translateX(-50%);

	-moz-transform: translateX(-50%);

	-o-transform: translateX(-50%);

	-ms-transform: translateX(-50%);

	transform: translateX(-50%);

}



.content-slider h3 {

	position: absolute;

	margin: 0;

	width: 100%;

	bottom: 0;

	text-align: center;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #603C3A;

}

.thumbnail-slider{

	width: 888px;

	margin: 25px auto 15px;

	border-top: 5px solid #D0DBEB;

	padding: 10px 0 0;

}





/* Order Now Button */

#center-button {

	text-align: center;

	width: 105px;

	overflow: hidden;

	margin: 20px auto 0;

}

.order-now {

	width: 100px;

	height: 30px;

	line-height: 30px;

	border: 2px solid #321F1E;

	background: #603C3A;

	text-align: center;

	position: relative;

	transition: ease .5s;

	-webkit-transition: ease .5s;

	-moz-transition: ease .5s;

	-o-transition: ease .5s;

	-ms-transition: ease .5s;

}



.order-now .text {

	color: #fff;

	display: inline-block;

	transition: ease .5s;

	-webkit-transition: ease .5s;

	-moz-transition: ease .5s;

	-o-transition: ease .5s;

	-ms-transition: ease .5s;

}



.order-now:hover {

	background: white;

	border: 2px solid #603C3A;

	transition: ease .5s;

	-webkit-transition: ease .5s;

	-moz-transition: ease .5s;

	-ms-transition: ease .5s;

}



.order-now:hover .text {

	transition: ease .5s;

	-webkit-transition: ease .5s;

	-moz-transition: ease .5s;

	-o-transition: ease .5s;

	-ms-transition: ease .5s;

	color: #603C3A;

}









/* Finishing Page */

main {

	width: 858px;

	margin: 0 auto;

	padding: 20px 15px;

	background: #FFF;

}



.fns {

	list-style: none;

	width: 100%;

	margin: 20px 0;

}



.fns li {

	width: 23%;

	padding-bottom: 23%;

	margin-right: 20px;

	margin-bottom: 45px;

	float: left;

	position: relative;

}



.fns li:nth-child(4n+0) {

	margin-right: 0;

}



.fns .cover {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	overflow: hidden;

	border-radius: 50%;

}



.fns .cover img {

	max-height: 100%;

}



.fns .cover img#first {

	margin-top: 10px;

	margin-left: -50px;

	transform: rotate(40deg) scale(1.2,1.2);

	-webkit-transform: rotate(40deg) scale(1.2,1.2);

	-moz-transform: rotate(40deg) scale(1.2,1.2);

	-o-transform: rotate(40deg) scale(1.2,1.2);

	-ms-transform: rotate(40deg) scale(1.2,1.2);

}



.fns .cover img#grooving {

	margin-left: -130px;

	margin-top: -15px;

	transform: rotate(40deg) scale(1.5,1.5);

	-webkit-transform: rotate(40deg) scale(1.5,1.5);

	-moz-transform: scale(1.5,1.5) rotate(40deg);

	-o-transform: scale(1.5,1.5) rotate(40deg);

	-ms-transform: scale(1.5,1.5) rotate(40deg);

}



.fns .text {

	position: absolute;

	display: block;

	bottom: -30px;

	width: 100%;

	height: 20px;

	line-height: 20px;

	text-align: center;

}

	





.support-mch {

	list-style: none;

	width: 100%;

	margin: 20px 0;

}



.support-mch li {

	width: 23%;

	height: 170px;

	margin-right: 15px;

	float: left;

	position: relative;

	overflow: hidden;

}



.support-mch li img {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	margin: auto;

	padding-bottom: 20px;

	max-width: 100%;

	max-height: 150px;

}



.support-mch li .text {

	display: block;

	width: 100%;

	height: 20px;

	line-height: 20px;

	text-align: center;

	position: absolute;

	bottom: 0;

}







/* How to Order */

::-webkit-input-placeholder { /* WebKit, Blink, Edge */

    color:    #603C3A;

}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

   color:    #603C3A;

   opacity:  1;

}

::-moz-placeholder { /* Mozilla Firefox 19+ */

   color:    #603C3A;

   opacity:  1;

}

:-ms-input-placeholder { /* Internet Explorer 10-11 */

   color:    #603C3A;

}

:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */

  color:    #603C3A;

}



#name, #email, #phone-number, #quantity, #model, #board, #paper, #accessories, #msg, #finishing {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #603C3A;

	width: 80%;

	padding-left: 5px;

	padding-bottom: 2px;

	padding-top: 2px;

}

#model {

	cursor: pointer;

}

#size {

	width: 20%;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #603C3A;

	padding-left: 5px;

	padding-bottom: 2px;

	padding-top: 2px;

}

#msg {

	height: 120px;

	resize: none;

}

textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus, select:focus {   

    border-color: 1px #603C3A;

	outline: 0 none;

}

#button {

	width: 80px;

	height: 35px;

	line-height: 30px;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #fff;

	background: #603C3A;

	border: solid 1px #603C3A;

	margin-right: 5px;

	cursor: pointer;

}

#button:hover {

	background: transparent;

	color: #603C3A;

	-webkit-transition: all 0.6s;

	-moz-transition: all 0.6s;

	-o-transition: all 0.6s;

	-ms-transition: all 0.6s;

	transition: all 0.6s;

}



.container-popup {

	width: 100%;

	height: 100%;

	background: rgba(0,0,0,0.5);

	position: fixed;

	top: 0;

	left: 0;

	z-index: 100;

	font-family: helvetica condensed;

	display: none;

}



.container-popup .wrapper-popup {

	width: 960px;

	height: 632px;

	padding: 22px 0 22px 22px;

	margin: 0;

	background: #fff;

	position: relative;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

	color: #603C3A;

}



.container-popup .wrapper-popup .wrapper-list {

	width: 100%;

	height: 600px;

	overflow-y: scroll;

}



.container-popup .wrapper-popup .select-item {

	width: 100%;

	padding: 15px 22px;

	background: #D0DBEB;

	position: fixed;

	left: 0;

	bottom: 0;

	box-sizing: border-box;

	display: none;

}



.container-popup .wrapper-popup .select-item p {

	width: 100%;

	font-size: 20px;

	font-weight: bold;

	line-height: 39px;

	text-align: center;

}



.container-popup .wrapper-popup .select-item #confirm-item {

	box-shadow: none;

	padding: 5px 15px;

	margin-left: 20px;

	margin-bottom: 2px;

	border: solid 1px #603C3A;

	background: #603C3A;

	color: #fff;

	cursor: pointer;

}



.container-popup .wrapper-popup .select-item #confirm-item:focus {

	box-shadow: none;

}



.container-popup .wrapper-popup .select-item #confirm-item:hover {

	background: transparent;

	color: #603C3A;

	transition: ease-in-out .5s;

}



.container-popup .wrapper-popup .pu-title {

	position: relative;

	width: 100%;

	margin-bottom: 15px; 

	font-size: 20px;

	font-weight: bold;

	text-align: center;

}



.container-popup .wrapper-popup .pu-title .close-btn {

	width: 30px;

	height: 30px;

	line-height: 30px;

	text-align: center;

	cursor: pointer;

	position: absolute;

	top: -5px;

	right: 20px;

}



.container-popup .list-model {

	list-style: none;

	width: 100%;

}



.container-popup .list-model p {

	margin: 20px 0 10px;

	font-size: 18px;

	font-weight: bold;

}



.container-popup .list-model li {

	width: 160px;

	height: 170px;

	display: inline-block;

	margin: 0 22px 22px 0;

	border: 1px solid #D0DBEB;

	cursor: pointer;

	position: relative;

}



.container-popup .list-model li.selected {

	border: 1px solid #603C3A;

}



.container-popup .list-model li img {

	max-width: 150px;

	max-height: 110px;

	position: absolute;

	bottom: 45px;

	left: 50%;

	transform: translate(-50%,0);

}



.container-popup .list-model li div {

	display: table;

	width: 95%;

	height: 40px;

	margin-bottom: 5px;

	text-align: center;

	position: absolute;

	left: 50%;

	bottom: 0;

	transform: translateX(-50%);

}



.container-popup .list-model li p {

	font-size: 16px;

	display: table-cell;

	vertical-align: middle;

}





	





/* Contact-us */

#subject, #name, #phone, #email, #captcha, #message {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #603C3A;

	width: 80%;

	padding-left: 5px;

	padding-bottom: 2px;

	padding-top: 2px;	

}

#message {

	height: 100px;

	resize: none;

}







/* Materials */

.outer {

	position: relative;

	display: block;

}

.outer img {

	position: absolute;

	left: 0;

	top: 0;

}

.second {

	-webkit-transition: opacity 0.8s ease-in-out;

    -moz-transition: opacity 0.8s ease-in-out;

    -o-transition: opacity 0.8s ease-in-out;

    transition: opacity 0.8s ease-in-out;

    opacity: 0;

	filter: alpha(opacity=0);

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    behavior: url(../Jquery/PIE/PIE.htc);

}

.second:hover {

    -webkit-transition: opacity 0.8s ease-in-out;

    -moz-transition: opacity 0.8s ease-in-out;

    -o-transition: opacity 0.8s ease-in-out;

    transition: opacity 0.8s ease-in-out;

    opacity: 1;

	filter: alpha(opacity=100);

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    behavior: url(../Jquery/PIE/PIE.htc);

}





/* Product */

#tabs {

	display: block;

	float: none;

	width: 120px;

	height: 55px;

	top: 0px;

	clip: rect(0px,210px,auto,210px);

	margin: 0 auto;

}

.panel {

	font-family: Verdana, Geneva, sans-serif;

	font-size: 14px;

	width: 300px;

	overflow: hidden;

	height: 300px;

	z-index: 3;

	top: 0px;

	clip: rect(0px,auto,auto,auto);

	border-top-color: #D8D8D8;

	border-right-color: #D8D8D8;

	border-bottom-color: #D8D8D8;

	border-left-color: #D8D8D8;

	margin: 0 auto;

}

.tab_bdr {

	padding: 0px;

	width: 50px;

	border: 0px;

	border: 1px solid #CCCCCC;

	height: 4px;

	margin: 0px;

	background: #CCCCCC;

	clear: left;

	font-size: 0px;

	float: none;

}

.tab {

	font-family: Verdana, Geneva, sans-serif;

	font-size: 12px;

	color: #FFFFFF;

	cursor: pointer;

	border: 1px solid #FFECE9;

	height: 50px;

	width: 50px;

	float: left;

	text-decoration: none;

	background-color: #FFFFFF;

	padding-left: 5px;

}

.tab_sel {

	font-family: Verdana, Geneva, sans-serif;

	font-size: 12px;

	color: #FFFFFF;

	cursor: pointer;

	border: 2px solid #603C3A;

	height: 50px;

	margin: 0px;

	width: 50px;

	float: left;

	text-decoration: none;

}



h3.title {

	margin-bottom: 15px;

}



.text p.des {

	margin-bottom: 25px;

}



.text span.des {

	margin-bottom: 5px;

	display: block;

}









/* Subscribe */

.luar {

	width: 100%;

	height: 100vh;

	overflow: hidden;

	position: fixed;

	top: 0;

	left: 0;

	background: rgba(255, 255, 255, 0.5);

	display: none;

	z-index: 9000;

}

.pop-up {

	width: 700px;

	height: 500px;

	position: relative;

	top: 50%;

	left: 50%;

	margin-top: -250px;

	margin-left: -350px;

	background: #D0DBEB;

	border-radius: 15px;

	-webkit-border-radius: 15px;

	-moz-border-radius: 15px;

	-o-border-radius: 15px;

	-ms-border-radius: 15px;

	z-index: 9001;

	overflow: hidden;

}

.tutup {

	width: 30px;

	height: 30px;

	position: absolute;

	top: 5px;

	right: 5px;

	display: block;

	cursor: pointer;

	background: url("https://www.expressboxindo.com/Images/Library/close.png") no-repeat;

	background-size: 20px 20px;

	background-position: center center;

	z-index: 9003;

}

.success-b {

	width: 600px;

	border: 1px solid #090;

	background: rgba(0,255,0, 0.5);

	padding: 10px;

	margin: 10px auto 5px;

	font-size: 1.4em;

	color: #090;

	display: none;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

}

.error-b {

	width: 600px;

	border: 1px solid #C00;

	background: rgba(255,0,0, 0.5);

	padding: 10px;

	margin: 10px auto 5px;

	font-size: 1.4em;

	color: #C00;

	display: none;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

}

#email-scr {

	width: 500px;

	height: 33px;

	padding: 0 7px;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #603C3A;

}

.animated {

	margin: 10px auto 0;

	display: block;

	width: 550px;

	height: 200px;

	background: url("https://www.expressboxindo.com/Content-NL/Image/Animate-Newsletter.gif") no-repeat;

	background-size: auto 200px;

	background-position: center center;

}

.log-sub {

	margin: 30px auto 0;

	width: 100%;

	height: 68px;

	display: block;

	background: url("https://www.expressboxindo.com/Images/Logo/logo.png") no-repeat;

	background-size: 120px auto;

	background-position: center center;

}

.loader {

	display: none;

	width: 80px;

	height: 36px;

	position: absolute;

	top: 0;

	left: 0;

	background: url("https://www.expressboxindo.com/Images/loader.gif") no-repeat;

	background-size: auto 35px;

	background-position: center center;

	background-color: rgba(255,255,255, 0.2);

	z-index: 9003;

}























/* Special Offers */

.container-offer {

	width: 888px;

	min-height: 550px;

	padding: 0;

	font-family: Arial, Helvetica, sans-serif;

	display: flex;

}



.container-offer .list-offer {

	list-style: none;

	width: 100%;

}



.container-offer .list-offer li {

	width: 18%;

	height: 270px;

	padding: 10px 5px;

	border: 1px solid #fff;

	margin-right: 2.5%;

	margin-bottom: 15px;

	float: left;

	box-sizing: border-box;

}



.container-offer .list-offer li:hover {

	border: 1px solid #E5E5E5;

	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);

	transition: ease-in-out 0.5s;

}



.container-offer .list-offer li:nth-child(5n) {

	margin-right: 0;

}



.container-offer .list-offer li a .wrapper-img {

	width: 100%;

	height: 150px;

	position: relative;

	top: 0;

	left: 0;

}



.container-offer .list-offer li a .wrapper-img img {

	max-width: 100%;

	max-height: 130px;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

}



.container-offer .list-offer li a .wrapper-title {

	width: 100%;

	height: 40px;

	padding: 0 5px;

	position: relative;

	top: 0;

	left: 0;

	display: table-cell;

	vertical-align: top;

	text-align: left;

	font-size: 14px;

	color: #603C3A;

}



.container-offer .list-offer li a .price {

	width: 100%;

	padding: 0 5px;

	position: relative;

	bottom: 0;

	left: 0;

	display: table;

	vertical-align: middle;

	color: #603C3A;

	font-size: 20px;

	font-weight: bold;

}



.container-offer .list-offer li a .price .disc {

	display: block;

	font-size: 14px;

	color: #666;

	text-decoration: line-through;

	font-weight: normal;

}



.container-offer .list-offer li a .price .disc .save {

	text-decoration: none;

	display: inline-block;

	padding: 3px 5px;

	background: #997674;

	color: #fff;

}



.container-offer .list-offer li a .price .disc .save:before {

	content: 'Save ';

}













/* Detail Offers */

.wrapper-left {

	width: 50%;

	padding-right: 3%;

	padding-bottom: 2%;

	border-right: 3px solid #603C3A;

	float: left;

}



.wrapper-right {

	width: 50%;

	margin-left: 3%;

	box-sizing: border-box;

	float: right;

	color: #603C3A;

}



.wrapper-left .wrapper-panel {

	width: 100%;

	margin-bottom: 20px;

	border-bottom: 3px solid #603C3A;

	position: relative;

}



.wrapper-left .wrapper-panel:after {

  content: "";

  display: block;

  padding-bottom: 100%;

}



.wrapper-left .panel {

	width: 100%;

	height: 100%;

	display: none;

}



.wrapper-left .panel img {

	max-width: 90%;

	max-height: 90%;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	-webkit-transform: translate(-50%, -50%);

	-moz-transform: translate(-50%, -50%);

	-o-transform: translate(-50%, -50%);

	-ms-transform: translate(-50%, -50%);

}



.wrapper-left .icon {

	width: 100%;

	height: 66px;

	text-align: center;

	position: relative;

}



.wrapper-left .icon img {

	max-width: 95%;

	max-height: 95%;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	-webkit-transform: translate(-50%, -50%);

	-moz-transform: translate(-50%, -50%);

	-o-transform: translate(-50%, -50%);

	-ms-transform: translate(-50%, -50%);

}



.wrapper-left .tab, .wrapper-left .tab_sel {

	width: 62px;

	height: 62px;

	padding: 0;

	border: 1px solid #D0DBEB;

	cursor: pointer;

	float: left;

	position: relative;

}



.wrapper-left .tab_sel {

	border: 2px solid #603C3A;

}









.thumbelina {

    padding: 0px;

    margin-left: 25px;

    position: absolute;

    white-space: nowrap;

    font-size: 0;

    -webkit-touch-callout: none; 

    -webkit-user-select: none;     

}



.thumbelina li {

	margin-right: 30.6px;

}



.thumbelina li:last-child {

	margin-right: 0px;

}



.thumbelina-but {

    background-color: #ccc;

    border:1px solid #aaa;

    box-shadow: 0px 0px 8px rgba(0,0,0,0.25);

    z-index: 1;

    cursor:pointer;   

    color:#888;

    text-align:center;

    vertical-align:middle;

    font-size:14px;

    font-weight: bold;

    font-family:monospace;

}

   

.thumbelina-but:hover {

    color:#fff;

    box-shadow: 0px 0px 8px rgba(0,0,0,0.5);

}



.thumbelina-but.disabled,

.thumbelina-but.disabled:hover {

    background-color: #efefef;

    color: #ccc;

    cursor:default;

    box-shadow:none;

}



.thumbelina-but.horiz {

    width: 20px;

    height: 100%;

	line-height: 62px;

}



.thumbelina-but.horiz.left {

	position: absolute;

    left: -32px;

    border-radius: 5px 0px 0px 5px;

}



.thumbelina-but.horiz.right {

    position: absolute;

	right: -32px;

    border-radius: 0px 5px 5px 0px;

}



.thumbelina-but.vert {

    height: 20px;

    line-height: 20px;

    width: 52px;

}



.thumbelina-but.vert.top {

	position: absolute;

    top: -30px;

    border-radius: 5px 5px 0px 0px;

}



.thumbelina-but.vert.bottom {

	position: absolute;

    bottom: -30px;

    border-radius: 0px 0px 5px 5px;

}





.wrapper-right h2 {

	font-size: 20px;

	margin-bottom: 25px;

}



.wrapper-right .block {

	width: 100%;

	padding-bottom: 15px;

	margin-bottom: 20px;

	border-bottom: 1px solid #603C3A;

	font-size: 15px;

	overflow: hidden;

}



.wrapper-right .block-option {

	width: 100%;

	padding-bottom: 20px;

	margin-bottom: 15px;

	border-bottom: 1px solid #603C3A;

	font-size: 15px;

	overflow: hidden;

}



.wrapper-right .last {

	padding-bottom: 0;

	margin-bottom: 0;

	border-bottom: none;

	position: relative;

}



.wrapper-right .desc-offer {

	width: 100%;

	list-style: disc;

	margin-left: 4%;

	padding-right: 15px;

	white-space: normal;

	box-sizing: border-box;

}



.wrapper-right .desc-offer li {

	margin-bottom: 8px;

	line-height: 1.5;

}



.wrapper-right .block-option p {

	font-weight: bold;

	margin-bottom: 8px;

}



.qtt-list {

	width: 100%;

}



.qtt-list li {

	padding: 8px 10px;

	border: 1px solid #603C3A;

	margin-right: 10px;

	display: inline-block;

	cursor: pointer;

}



.qtt-list li:last-child {

	margin-right: 0;

}



.qtt-list li.selected {

	background: #603C3A;

	color: #fff;

}



.color-list {

	width: 100%;

	margin-bottom: 30px;

}



.color-list li {

	width: 30px;

	height: 30px;

	border: 1px solid #603C3A;

	margin-right: 15px;

	display: inline-block;

	cursor: pointer;

	position: relative;

}



.color-list li:last-child {

	margin-right: 0;

}



.color-list li.selected {

	border: 2px solid #603C3A;

}



.color-list li.selected:after {

	content: "\f058";

	font-family: FontAwesome;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

	color: rgba(0,255,0,0.7);

}



.color-list li img {

	max-width: 110%;

	max-height: 110%;

}



.color-list li.more {

	width: 100%;

	height: 20px;

	line-height: 20px;

	margin-top: 5px;

	border: none;

	font-size: 14px;

	color: #603C3A;

	text-decoration: none;

	cursor: default;

}



.color-list li.more a {

	cursor: pointer;

}



.color-list li a:hover {

	text-decoration: underline;

}





.wrapper-price {

	width: 50%;

	float: left;

	font-size: 15px;

}



.wrapper-price li {

	margin-bottom: 5px;

}



.wrapper-price li:first-child {

	font-size: 26px;

	font-weight: bold;

	margin-bottom: 5px;

}



.wrapper-price li .before {

	text-decoration: line-through;

	text-decoration-color: red;

}



.wrapper-price li .save {

	display: inline-block;

	text-decoration: none;

	padding: 3px 5px;

	background: #997674;

	color: #fff;

}





.order-so {

	width: 30%;

	height: 45px;

	line-height: 45px;

	background: #603C3A;

	border: none;

	color: #fff;

	text-align: center;

	font-size: 20px;

	cursor: pointer;

	position: absolute;

	top: 50%;

	right: 0;

	transform: translate(0,-50%);

	outline: none;

}





/* Form Order Special Offer */

.container-overlay {

	width: 100%;

	height: 100%;

	background: rgba(0,0,0,0.5);

	position: fixed;

	top: 0;

	left: 0;

	z-index: 100;

	font-family: helvetica condensed;

	display: none;

}



.container-overlay .wrapper-order {

	padding: 22px;

	margin: 0;

	background: #D0DBEB;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

	color: #603C3A;

	display: none;

}



.container-overlay .wrapper-order h2 {

	margin-bottom: 20px;

	text-decoration: underline;

	text-align: center;

	position: relative;

}



.container-overlay .wrapper-order h2 .close-btn {

	width: 30px;

	height: 30px;

	line-height: 30px;

	text-align: center;

	position: absolute;

	top: 0;

	right: 0;

	cursor: pointer;

}



.container-overlay .wrapper-order h2 .close-btn i {

	line-height: 30px;

}



.container-overlay .wrapper-order p {

	margin-bottom: 15px;

}



.container-overlay .wrapper-order p.space {

	margin-bottom: 25px;

}



.container-overlay .wrapper-order p label {

	display: block;

	margin-bottom: 5px;

	font-weight: bold;

}



.container-overlay .wrapper-order p #product-so, #quantity-so, #material-so, #total-so, #name-so, #email-so, #phone-so, #msg-so {

	width: 500px;

	padding: 10px 8px;

	border: 1px solid #ccc;

	background-color: #fff;

	font-size: 13px;

	color: #603C3A;	

}



#msg-so {

	resize: none;

	min-height: 120px;

	font-family: Arial;

}



.button-so {

	width: 80px;

	height: 40px;

	border: solid 1px #603C3A;

	float: right;

	line-height: 40px;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #fff;

	background: #603C3A;

	cursor: pointer;

}



.container-overlay .wrapper-order .result {

	width: 70%;

	float: left;

}



.container-overlay .wrapper-order .result p.success {

	color: #060;

}



.container-overlay .wrapper-order .result p.fail {

	color: #f00;

}

















.container-overlay .wrapper-material {

	padding: 22px;

	margin: 0;

	background: #FFF;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

	color: #603C3A;

	display: none;

}



.container-overlay .wrapper-material h2 {

	margin-bottom: 20px;

	text-decoration: underline;

	text-align: center;

	position: relative;

}



.container-overlay .wrapper-material h2 .close-btn {

	width: 30px;

	height: 30px;

	line-height: 30px;

	text-align: center;

	position: absolute;

	top: 0;

	right: 0;

	cursor: pointer;

}



.container-overlay .container-list {

	width: 800px;

	height: 500px;

	overflow-y: auto;

}



.container-overlay .container-list .list-material {

	width: 100%;

	margin-bottom: 25px;

	list-style: none;

	box-sizing: border-box;

}



.container-overlay .container-list .list-material li {

	width: 18%;

	height: 170px;

	margin-right: 2%;

	margin-bottom: 15px;

	border: 1px solid #D0DBEB;

	position: relative;

	float: left;

	text-align: center;

	cursor: pointer;

}



.container-overlay .container-list .list-material li.selected {

	border: 1px solid #603C3A;

}



.container-overlay .container-list .list-material li:first-child {

	width: 100%;

	height: 20px;

	line-height: 20px;

	border: none;

	font-size: 18px;

	font-weight: bold;

	text-align: left;

}



.container-overlay .container-list .list-material li p {

	width: 100%;

	position: absolute;

	left: 0;

	bottom: 5px;

}



.container-overlay .container-list .list-material li img {

	width: 90%;

	position: absolute;

	top: 10px;

	left: 5%;

	text-align: center;

}



.container-overlay .container-list .list-material li:nth-child(5n+1) {

	margin-right: 0;

}





















/* Products */

main.products {

	width: 888px;

}



main.products h2 {

	margin-bottom: 30px;

	font-size: 20px;

	color: #603C3A;

	text-align: center;

	font-family: Arial, Helvetica, sans-serif;

}



.list-products {

	list-style: none;

	width: 100%;

	margin: 0 auto 50px;

	font-family: Arial, Helvetica, sans-serif;

	color: #603C3A;

}



.list-products h3 {

	margin-bottom: 15px;

	font-size: 18px;

	text-align: left;

}



.list-products li {

	width: 18%;

	height: 200px;

	padding: 10px 5px;

	border: 1px solid #fff;

	margin-right: 2.5%;

	margin-bottom: 15px;

	float: left;

	box-sizing: border-box;

}



.list-products li:hover {

	border: 1px solid #E5E5E5;

	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);

	transition: ease-in-out 0.5s;

}



.list-products li:nth-child(5n+1) {

	margin-right: 0;

}



.list-products li a .wrapper-img {

	width: 100%;

	height: 150px;

	position: relative;

	top: 0;

	left: 0;

}



.list-products li a .wrapper-img img {

	max-width: 100%;

	max-height: 130px;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

}



.list-products li a .wrapper-title {

	width: 100%;

	height: 40px;

	padding: 0 5px;

	position: relative;

	top: 0;

	left: 0;

	vertical-align: top;

	text-align: center;

	font-size: 14px;

	color: #603C3A;

}



main.products .wrapper-pkg {

	width: 100%;

	display: flex;

}



main.products .wrapper-pkg .img-pkg {

	width: 48%;

	padding-right: 2%;

	margin-right: 2%;

	border-right: 1px solid #603C3A;

	float: left;

}



main.products .wrapper-pkg .content-pkg {

	width: 48%;

	float: right;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #603C3A;

	line-height: 1.5;

}



main.products .wrapper-pkg .content-pkg p {

	margin-bottom: 30px;

}



main.products .wrapper-pkg .content-pkg p.subtitle {

	margin-bottom: 10px;

	font-size: 16px;

}



main.products .wrapper-pkg .content-pkg ul {

	list-style: disc;

	margin-left: 1em;

	padding: 0;

}



main.products .wrapper-panel {

	width: 80%;

	padding: 10px;

	margin: 0 auto 20px;

	border-bottom: 1px solid #603C3A;

}



main.products .panel {

	width: 100%;

	height: auto;

	padding-bottom: 100%;

	position: relative;

	display: none;

}



main.products .panel img {

	max-width: 100%;

	max-height: 100%;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	-webkit-transform: translate(-50%, -50%);

	-moz-transform: translate(-50%, -50%);

	-o-transform: translate(-50%, -50%);

	-ms-transform: translate(-50%, -50%);

}



main.products .icon {

	width: 100%;

	height: 66px;

	text-align: center;

	position: relative;

}



main.products .icon img {

	max-width: 95%;

	max-height: 95%;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	-webkit-transform: translate(-50%, -50%);

	-moz-transform: translate(-50%, -50%);

	-o-transform: translate(-50%, -50%);

	-ms-transform: translate(-50%, -50%);

}



main.products .tab, main.products .tab_sel {

	width: 62px;

	height: 62px;

	padding: 0;

	border: 1px solid #D2D3D5;

	cursor: pointer;

	overflow: hidden;

	position: relative;

}



main.products .tab_sel {

	border: 2px solid #603C3A;

}



main.products .thumbelina li {

	margin-right: 24px;

}



main.products .thumbelina li:last-child {

	margin-right: 0px;

}







/*Materials*/

.group-paper {

	margin-bottom: 35px;

}



.cov-title, .cat-title {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 20px;

	font-weight: normal;

	color: #603C3A;

	margin-bottom: 15px;

}



.cat-title {

	margin-left: 20px;

}



.paper {

	list-style: none;

	margin: 0 0 0 20px;

}



.paper li {

	width: 128px;

	height: 158px;

	margin: 0 10px 20px 0;

	display: inline-block;

}



.paper li:nth-child(6n+1) {

	margin-right: 0;

}



.paper li:first-child {

	display: block;

	width: 100%;

	height: 30px;

	line-height: 30px;

	margin-bottom: 15px;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 20px;

	font-weight: normal;

	color: #603C3A;

}



.paper li .wrapper-img {

	width: 128px;

	height: 128px;

	display: block;

	overflow: hidden;

}



.paper li img {

	max-width: 128px;

	transform: scale(1,1);

	transition: all 0.5s;

}



.paper li .wrapper-img:hover img {

	transform: scale(1.5);

	transition: all 0.5s;

}



.paper li p.text {

	display: block;

	height: 30px;

	line-height: 30px;

	text-align: center;

	font-size: 14px;

	color: #603C3A;

}