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

@import url('/fonts/fonts.css');

html, body {
  font-family: 'Archivo Narrow', Arial, sans-serif;
	font-size: 16px;
	color:#3c4143;
	background:#ffffff;
	
	margin:0px;
	padding:0px;
	height:100%;
}

* {box-sizing: border-box;}
img {border:0px;}
form {height:100%;}

#layout {}
#layout > div.side {
	position:fixed;
	left:0px;
	top:0px;
	
	z-index:1000;
	
	width:160px;
	height:100%;
	
	border-right:1px solid #c4c4c4;
	
	background-color:#FFF;
	
	display:flex;
	flex-flow: column;
}

#layout > div.side div.logo {
	display:block;
	margin-left:22px;
	margin-top:30px;
	margin-bottom:30px;
}

#layout > div.side #main_menu {
	flex:1;
}

#layout > div.submenu {
	z-index:800;
}

#layout > div.side div.social {
	margin-top:30px;
	margin-bottom:30px;
	display:flex;
	flex-flow:row nowrap;
	justify-content: center;
}

#layout > div.side div.social > a {
	padding:5px;
}

/*///////////////////////*/
/*top*/
#layout > div.top {
	position:absolute;
	left:160px;
	top:0px;
	
	display:flex;
	flex-flow: row;
	justify-content: center;
	
	width:calc(100% - 160px);
	
	border-bottom:1px solid #c4c4c4;
}

div.steps_container {
	margin-top:20px;
	width:50%;
	margin-bottom:20px;
}

div.steps_container > div.steps {
	display:flex;
	flex-flow: row;
}

div.steps_container > div.steps a.step {
	display:block;
	
	flex:1;
	width:33%;
	padding:0px 5px;
	color:#dedede;
	text-decoration: none;
}

div.steps_container > div.steps a.step.sel {
	color:#3c4143;
}

div.steps_container > div.steps a.step.sel > div.line {
	background-color: #3c4143;
}

div.steps_container > div.steps span.num {
	font-size:36px;
	font-weight: bold;
}

div.steps_container > div.steps span.title {
	font-size:18px;
	font-weight: bold;
}

div.steps_container > div.steps a.step > div.line {
	width:100%;
	height:5px;
	background-color:#dedede;
	border-radius: 3px;
}

div.steps_container > div.step_description {
	display:flex;
	flex-flow: row;
	align-items: center;
}

div.steps_container > div.step_description > div.left {
	font-size:45px;
	color:#dedede;
	font-weight: bold;
	white-space: nowrap;
	padding-right:20px;
}

div.steps_container > div.step_description > div.right {
	padding-top:4px;
}
/*top*/
/*///////////////////////*/

/*///////////////////////*/
/*main*/
#layout > #layout_main {
	margin-left:190px;
	
	width:calc(100% - 190px);
	
	padding:30px 0px;
	padding-top:200px;
}

/*///////////////*/
/*pattern item*/
#layout_main > a.pattern-item {
	display: block;
	position:relative;
	float:left;
	
	margin:2%;
	/*border:1px solid #FF0000;*/
	
	width:16%;
	transition: transform ease 0.3s;
}

#layout_main > a.pattern-item:hover {
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
	text-decoration: none;
}

#layout_main > a.pattern-item > div.tile {
	position:relative;
	background-color: #FFF;
	padding: 10%;
	text-align: center;
}

#layout_main > a.pattern-item > div.tile > div.title,
#layout_main > a.pattern-item > div.tile > div.subtitle {
	font-size: 16px;
	color:#3c4143;
	font-weight: bold;
	text-align: center;
}

#layout_main > a.pattern-item > div.tile > div.subtitle {
	color:#8f8f8f;
	font-weight: normal;
}

#layout_main > a.pattern-item > div.tile > img {
	width:100%;
	max-width: 200px;
	
	margin:30px auto 0px auto;
}

#layout_main > a.pattern-item > div.tile > div.button {
	display:none;
}

#layout_main > a.pattern-item:hover > div.tile > div.button {
	/*display:block;*/
}

#layout_main > a.pattern-item > div.tile > div.button span {
	padding:8px 22px;
	background-color:#3c4143;
	color:#FFF;
	border-radius: 5px;
	margin:auto;
}

#layout_main > a.pattern-item > span.shadow {	
	position:absolute;
	left:0px;
	bottom:0px;
		
	width:100%;
	height:300px;
	opacity: 0;
	
	filter: drop-shadow(-1px 20px 13px rgba(0, 0, 0, 0.25));
	/*-webkit-filter: drop-shadow(-1px 20px 13px rgba(0, 0, 0, 0.25));*/
	
	/*box-shadow:-1px 20px 13px rgba(0, 0, 0, 0.25);*/
	transition: opacity ease 0.3s;
}

#layout_main > a.pattern-item > span.shadow > span.shape {
	display:block;
	background-color:#FFF;
	width:100%;
	height:300px;
	clip-path: polygon(7px 30%, calc(100% - 7px) 30%, 100% 100%, 0% 100%);
}

#layout_main > a.pattern-item:hover > span.shadow {
	opacity: 1;
}
/*pattern item*/
/*///////////////*/

/*main*/
/*///////////////////////*/

@media (min-width: 769px) and (max-width: 1170px) {
	#layout_main > a.pattern-item {
		width: 46%;
	}
}

@media (min-width:581px) and (max-width: 768px) {
	#layout_main > a.pattern-item {
		width: 100%;
	}
}

@media (min-width:0px) and (max-width: 580px) {
	#layout > div.side {
		display:none;
	}
	
	#layout_main > a.pattern-item {
		width: 46%;
	}
}

/*///////////////////////*/
/*configurator*/
#container3d {
	position:absolute;
	right:0px;
	
	width:calc(100% - 160px);
	height:100%;
}

#layout > div.top.configurator {
	border:0px;
}

#layout > div.side.configurator {
	border:0px;
}

div.left_placeholder {
	flex:1;
}

div.steps_container {
}

#layout > div.top.configurator div.step {
	opacity:0.75;
}

div.options_container {
	flex:1;
	
	display:flex;
	align-items: center;
	justify-content: flex-end;
}

div.options_container > a {	
	margin:5px;
	text-decoration: none;
	
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	opacity:0.75;
}

div.options_container > a:hover,
div.options_container > a.sel {
	opacity:1;
}

div.options_container > a > div.image {
	display:block;
	width: 42px;
	height: 42px;
	
	background-repeat: no-repeat;
}

div.options_container > a > div.image.pattern.lock {
	background-image: url("/images/configurator/icon_lock.png");
}

div.options_container > a > div.image.pattern.unlock {
	background-image: url("/images/configurator/icon_unlock.png");
}

div.options_container > a > div.image.save {
	background-image: url("/images/configurator/icon_save.png");
}

div.options_container > a > div.image.share {
	background-image: url("/images/configurator/icon_share.png");
}

div.options_container > a > div.image.background {
	background-image: url("/images/configurator/icon_background.png");
}

div.options_container > a > div.title {
	visibility: hidden;
	overflow:hidden;
	
	white-space: nowrap;
	
	font-size:15px;
	padding-bottom:5px;
	padding-left:5px;
	color:#3c4143;
	
	width:auto;
	max-width:0;
	opacity: 0;
	
	transition: all ease 0.3s;
}

div.options_container > a:hover > div.title,
div.options_container > a.sel > div.title {
	visibility: visible;
	max-width: 150px;
	opacity: 1;
}

#main_menu {
	display:flex;
}

#main_menu a {	
	display:block;
	width:100%;
	
	text-align: center;
	background-color:#FFF;
	
	margin-top:1px;
	margin-bottom:1px;
	
	font-size:12px;
	color:#3c4143;
	text-decoration: none;
	
	transition: all ease 0.3s;
}

#main_menu a:first-child:before {
	content:'';
	display:block;
	height: 1px;
	margin-top:-1px;
	margin-left:8px;
	margin-right:8px;
	background-color:#c4c4c4;
}

#main_menu a::after { /*button divider*/
	content:'';
	display:block;
	height: 1px;
	margin-bottom:-1px;
	margin-left:12px;
	margin-right:12px;
	background-color:#c4c4c4;
}

#main_menu a > div.icon {
	display:block;
	width:70px;
	height:70px;
	overflow: hidden;
	
	margin:auto;
	
	background-image:url("/images/configurator/cat_icon_sizing.png");
	background-position:top;
	background-repeat: no-repeat;
}

#main_menu a:hover,
#main_menu a.sel {
	background-color:rgba(60,65,67,0.9); /*#3c4143*/;
	color:#FFF;
}

#main_menu a:hover > div.icon,
#main_menu a.sel > div.icon {
	background-position:bottom;
}

div.configurator > a.proceed {
	position:fixed;
	bottom:120px;
	right: 60px;
	
	display:block;
	padding-top:12px;
	padding-bottom: 12px;
	padding-left:32px;
	padding-right:51px;
	border-radius: 5px;
	
	margin:auto;
	
	background-color:#3264a9;
	background-image:url("/images/button_arrow.png");
	background-repeat: no-repeat;
	background-position: right 10px center;
	
	font-size:18px;
	color:#FFF;
	text-decoration: none;
	
	transition: all ease 0.3s;
}

/* Two */
div.configurator > a.proceed:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgba(255,255,255,0.4);
	
	border-radius: 3px;
	
	transition: all 0.4s ease-in-out;
}
div.configurator > a.proceed:hover:after {
  width: 100%;
  background-color: rgba(255,255,255,0);
}

div.configurator > a.proceed:hover {
  transform: scale(1.1);
}

div.configurator > div.product_logo {
	position:fixed;
	bottom:110px;
	left:220px;
	
	opacity: 0.65;
	
	transition: all ease 0.3s;
}

/*//////////////////*/
/*submenus*/
#submenus {
	position: fixed;
	z-index:500;
}

div.submenu {
	position:fixed;
	top:0px;
	left:-330px;
	
	width:330px;
	/*width:20%;
	min-width:270px;
	max-width:330px;*/
	height:100%;
	
	padding-top:147px;
	padding-bottom:30px;
	
	background-color:rgba(60,65,67,0.9); /*#3c4143*/
	
	display:flex;
	flex-direction:column;
}

div.submenu > div.submenu_title {
	padding:30px 10px;
	
	font-size:20px;
	color:#FFFFFF;
	font-weight: bold;
	text-align: center;
	
	background-color:#3264a9;
}

div.submenu > div.submenu_wrapper {
	display:flex;
}

div.submenu div.submenu_container {
}

div.submenu div.options_title {
	font-size:16px;
	color:#FFF;
	font-weight: bold;
	text-transform: uppercase;
	
	padding-left: 25px;
	padding-right: 25px;
	
	padding-top:25px;
}

div.submenu div.options_fields {
	padding:0px 25px;
	padding-top:10px;
}

div.submenu div.options_fields > div {
	padding:5px 0px;
	border-bottom:1px solid #4f5051;
}

div.submenu div.options_fields > div:last-child {
	border-bottom:0;
}

div.submenu div.options_fields > div.notes {
	padding-top:20px;
	color:#FFFFFF;
	
	font-size:13px;
}

div.submenu div.options_fields > div.notes a {
	color:#FFFFFF;
	text-decoration: underline;
}

div.submenu div.options_fields > div.notes a:hover {
	color:#FFFFFF;
	text-decoration: none;
}

div.submenu div.options_fields > div.notes li {

}

div.submenu div.options_fields div.colors {	
	display:flex;
	flex-flow: row;
	flex-wrap: wrap;
	
	width:100%;
	
	margin-bottom:18px;
	border:none;
}

div.submenu div.options_fields div.colors > div {	
	margin-top:8px;
	
	transform-origin: center;
	transform:rotate(20deg);
}
/*submenus*/
/*//////////////////*/

/*//////////////////*/
/*embroidery submenu*/
#embroidery_submenu {
	position: fixed;
	z-index:200;
	/*left:490px;*/
	left:-650px;
}

#embroidery_submenu * {
	transition:all 0.3s;
}

div.embroidery_container {
	position:fixed;
	
	display:flex;
	flex-flow:column nowrap;
	
	width:40%;
	min-width:550px;
	max-width:650px;
	height:100%;
	
	padding-top:147px;
	padding-bottom:30px;
	
	background-color:rgba(255,255,255,0.9); /*#3c4143*/
}

div.embroidery_container > div.thumbs_container {	
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;
	
	position:relative;
	
	width:100%;
	height:88px;
		
	background-color:#dedede;
}

div.thumbs_container > div.thumb_strip {
	position:absolute;
	left:32px;
	right:32px;
	
	width:auto;
	height:88px;
	padding:0 5px;
	
	white-space: nowrap;
	overflow: hidden;
}

div.thumbs_container > div.thumb_strip > span {
	display:inline-block;
	/*justify-content: center;*/
	/*align-items: center;*/
	
  width: 80px;
  height: 80px;
  margin: 4px 2px;
	padding:2px;
	
	border-width:2px;
	border-style:solid;
	border-color:#FFFFFF;
	border-radius: 4px;
	
	background-color:#FFF;
	
	cursor:pointer;
	transition: all ease 0.3s;
}

div.thumbs_container > div.thumb_strip > span > img {
	width: 100%;
  height: 100%;
}

div.thumbs_container > div.thumb_strip > span.sel {
	border-color:#3264a9;
}

div.thumbs_container > div.thumb_strip > span:hover {
	-webkit-transform:scale(1.075);
	transform:scale(1.075);
}

div.thumbs_container > div.arrow {
	position:absolute;
	
	width: 30px;
	height: 88px;
  	
	cursor: pointer;
}

div.thumbs_container > div.arrow::after {	
	content:'';
	
	position:absolute;
	top:32px;
	
	display: inline-block;
	opacity:0.7;
		
	border: solid #3c4143;
  border-width: 0 3px 3px 0;
  padding: 3px;
	margin-top:8px;
		
	transition: opacity ease 0.3s;
}

div.thumbs_container > div.arrow:hover::after {
	opacity:1;
}

div.thumbs_container > div.arrow.left {
	left: 0;
}

div.thumbs_container > div.arrow.left::after {
  left:12px;
	
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

div.thumbs_container > div.arrow.right {
	right: 0;
}

div.thumbs_container > div.arrow.right::after {
  right:12px;
	
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

div.embroidery_container > div.preview_container {
	flex:1;
	
	display:flex;
	flex-flow:row nowrap;
}

div.embroidery_container > div.preview_container > div.custom {	
	width:195px;
	overflow: hidden;
	
	display:flex;
	align-items: flex-end;
}

div.embroidery_container > div.preview_container > div.custom div.title {
	white-space: nowrap;
}

div.embroidery_container > div.preview_container > div.custom > div.custom_container {
	margin:15px;
	width:195px;
}

div.embroidery_container div.preview {
	flex:1;
	
	position: relative;
	
	width:100%;
	/*height:1px; /*hack for svg height auto adjustment*/
	height:calc(100vh - 420px);
	padding:15px;
	
	background-image:
		linear-gradient(45deg, #cccccc 25%, transparent 25%),
		linear-gradient(-45deg, #cccccc 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #cccccc 75%),
		linear-gradient(-45deg, transparent 75%, #cccccc 75%);
	
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

div.embroidery_container div.preview > div#svg-container {
	display: flex;
	justify-content: center;
	align-items: center;
	
	width:100%;
	height:100%;
}

div.embroidery_container div.preview svg {
	height:100%;
	width:100%;
}

div.embroidery_container div.preview svg * {
	transition: 0.2s fill;
}

div.embroidery_container div.preview div.em_angle_option {
	position:absolute;
	right:10px;
	bottom:10px;
}

div.embroidery_colors_wrapper {
	padding: 5px 20px;
}

div.embroidery_colors_wrapper > div.title_wrapper {
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	
	margin-bottom:13px;
}

/*div.embroidery_colors_wrapper > div.title {
	margin-bottom:13px;
}*/


div.embroidery_colors {
	position:relative;
	
	display:flex;
	flex-flow: row;
	flex-wrap: wrap;
	
	width:100%;
	
	transition: filter 0.3s ease;
}

div.embroidery_colors > div.color {
	margin-top:8px;
	
	transform-origin: center;
	transform:rotate(20deg);
}

div.embroidery_colors > div.overlay {
	display:none;
	
	position:absolute;
	left:-5px;
	top:-5px;
	
	width:calc(100% + 10px);
	height:calc(100% + 10px);
}

div.embroidery_colors.disabled {
	filter:grayscale(100%);
}

div.embroidery_colors.disabled > div.overlay {
	display: block;
}


div.embroidery_buttons {
	display:flex;
	justify-content: center;
	align-items: center;
	padding-top:15px;
}

div.embroidery_buttons > a.apply {
	width:200px;
	margin-left:15px;
}

div.embroidery_buttons > a {
	
}

div.embroidery_buttons > a:hover {
	color:#000;
}
/*embroidery submenu*/
/*//////////////////*/

#colors_menu {
	position:fixed;
	bottom:0px;
	right:0px;
	
	width:calc(100% - 160px);
	
	display:flex;
	flex-flow:column nowrap;
}

#colors_menu div.tabs {
	margin: 0px;
	padding:0px;
	
	display:flex;
	flex-flow:row nowrap;
	/*justify-content: flex-end;*/
	justify-content: center;
}

#colors_menu div.tabs > a {
	display:block;

	width:11%;
	padding:5px 20px;
	margin-right:1px;
	
	background-color:rgba(60,65,67,0.5);
	
	color:#9fa1a4;
	text-decoration: none;
	white-space: nowrap;
	
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	
	transition:all ease 0.3s;
}

#colors_menu div.tabs > a.sel {
	color:#FFFFFF;
	background-color:rgba(60,65,67,0.9);
}

#colors_menu div.tabs > a:hover {
	color:#FFFFFF;
}

#colors_menu div.tabs > a.hide {
	display:none;
}

#colors_menu div.colors_holder {
	position:relative;
	
	padding-left: 20px;
	padding-right: 20px;
	width:100%;
	height:80px;
	
	background-color:rgba(60,65,67,0.9); /*#3c4143*/
}

#colors_menu div.colors {	
	padding-left: 20px;
	padding-right: 20px;
	height:80px;
	
	display:flex;
	flex-flow:row nowrap;
	align-items: center;
	/*justify-content: flex-end;*/
	justify-content: center;
}

#colors_menu div.colors.hide {
	display:none;
}

#colors_menu div.colors > div {	
	margin-top:10px;
	
	transform-origin: center;
	transform:rotate(20deg);
}
/*configurator*/
/*///////////////////////*/

/*//////////////////*/
/*colors menu*/
input.menu-color-select {
	display:none;
}

input.menu-color-select + label {
	position:relative;
	display:flex;
	flex-flow:row nowrap;
	align-items: center;
	
	cursor:pointer;
}

input.menu-color-select + label span.color-box {	
	position:relative;
	z-index:201;
	
	display:block;
	width:22px;
	height:60px;
	
	border-radius: 3px;
	margin-right:10px;
	
	background-position: center;
	background-repeat: no-repeat;
	bacgkround-size:contain;
	
	transition: all ease 0.3s;
}

input.menu-color-select:hover + label span.color-box {	
	/*width:30px;*/
	height:70px;
}

input.menu-color-select + label span.title {	
	display:block;
	
	position:absolute;
	top:75px;
	/*width:100px;*/
	height:22px;
	visibility: hidden;
	
	z-index:200;
	
	margin: auto;
	
	padding-left:14px;
	padding-right:8px;
	padding-top:3px;
	
	font-size:12px;
	color:#3c4143;
	opacity:0;
	
	background-color:rgba(60,65,67,0.9); /*#3c4143*/	
	/*background-color:#FFFFFF;*/
	border-radius: 3px;
	
	transform-origin: top left;
	transform:rotate(-90deg);
	
	white-space: nowrap;
	
	transition: all ease 0.3s;
}

input.menu-color-select:hover + label span.title {
	visibility: visible;
	background-color:#FFFFFF;
	top:5px;
	opacity:1;
}

input.menu-color-select:checked + label span.title {
	/*color:#FFFFFF;*/
}

input.menu-color-select:checked + label span.color-box {
	border-style: solid;
	border-width: 2px;
	border-color:#FFFFFF;
}
/*colors menu*/
/*//////////////////*/

/*//////////////////*/
/*side menu colors*/
input.side-color-select {
	display:none;
}

input.side-color-select + label {
	position:relative;
	display:flex;
	flex-flow:row nowrap;
	align-items: center;
	
	cursor:pointer;
}

input.side-color-select + label span.color-box {	
	position:relative;
	z-index:201;
	
	display:block;
	width:22px;
	height:22px;
	
	border-radius: 3px;
	margin-right:8px;
	
	background-position: center;
	background-repeat: no-repeat;
	bacgkround-size:contain;
	
	transition: all ease 0.3s;
}
/*input.side-color-select:hover + label span.color-box {	
	height:30px;
}*/

input.side-color-select + label span.title {	
	display:block;
	
	position:absolute;
	top:28px;
	/*width:100px;*/
	height:22px;
	visibility: hidden;
	
	z-index:200;
	
	margin: auto;
	
	padding-left:14px;
	padding-right:8px;
	padding-top:3px;
	
	font-size:12px;
	color:#3c4143;
	opacity:0;
	
	background-color:rgba(60,65,67,0.9); /*#3c4143*/	
	/*background-color:#FFFFFF;*/
	border-radius: 3px;
	
	transform-origin: top left;
	transform:rotate(-90deg);
	
	white-space: nowrap;
	
	transition: all ease 0.3s;
}

input.side-color-select:hover + label span.title {
	visibility: visible;
	background-color:#FFFFFF;
	top:5px;
	opacity:1;
}

input.side-color-select:checked + label span.title {
	/*color:#FFFFFF;*/
}

input.side-color-select:checked + label span.color-box {
	border-style: solid;
	border-width: 2px;
	border-color:#FFFFFF;
}
/*side menu colors*/
/*//////////////////*/

/*//////////////////*/
/*backgrounds*/
#backgrounds {
	position:fixed;
	right:-120px;
	top:100px;
		
	display:flex;
	flex-flow:column nowrap;
	align-items: flex-end;
}

#backgrounds > a {
	display:block;	
	margin-bottom:5px;
	margin-right:-20px;
	
	width:120px;
	height:70px;
	
	padding:2px;
	background-color:#FFF;
	
	border-radius: 3px;
	
	background-repeat: no-repeat;
	background-position:right;
	background-size:cover;
	
	transition: all ease 0.2s;
}

#backgrounds > a:hover {
	margin-right:-10px;
}

#backgrounds > a.sel {
	margin-right:0px;
}
/*backgrounds*/
/*//////////////////*/

/*///////////////////////*/
/*loader*/
	#loader {
		display:none;
		
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -125px;
		margin-top: -125px;

		width: 250px;
		height:250px;

		z-index:90001;

		font-size:16px;
		color: #000;
		text-align:center;

		padding-top:45px;
		/*padding-bottom:10px;*/

		background-color:#FFF;

		border-radius: 50%;
	}
	
	#loader > div.box {		
		position:relative;
		width:100%;
		height:100px;
	}
	
	#loader > div.box > div.empty {
		position:absolute;
		top:0px;
		left:50%;
		margin-left: -62px;
		
		overflow: hidden;
		width:125px;
		height:80px;
		
		background-image: url("images/loader_empty.png");
		background-repeat: no-repeat;
		background-position: top;
	}
	
	#loader > div.box > div.full {
		position:absolute;
		bottom:0px;
		left:50%;
		margin-left: -62px;
		
		overflow: hidden;
		width:125px;
		height:20px;
		
		background-image: url("images/loader_full.png");
		background-repeat: no-repeat;
		background-position: bottom;
	}
	
	#loader > div.title {
		margin:10px 0px 5px 0px;
	}
/*loader*/
/*///////////////////////*/

/*///////////////////////*/
/*no click overlay*/
#noclick_overlay {
	display:block;
	
	position:fixed;
	top:0;
	left:0;
	
	width:100%;
	height:100%;
	
	z-index:90000;
	
	background-color:#FFFFFF;
	background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(156,156,156,0.005) 35%, rgba(0,0,0,0.9) 90%);
}

/** html #noclick_overlay { 
	position: absolute;
	top: 0px;
	left: 0px;
}

body > #noclick_overlay { 
	position:fixed;
	top:0px;
	left:0px;
}*/
/*///////////////////////*/

/*///////////////////////*/
/*embroidery menu*/
div.embroidery-menu-button {
	position:relative;
	display:block;
	
	line-height:24px;
	font-size:17px;
	min-height:24px;
	
	cursor:pointer;
}

div.embroidery-menu-button > span.title {
	display:inline-block;
	padding:0px;
	color:#7b7b7d;
}

div.embroidery-menu-button:hover > span.title,
div.embroidery-menu-button.sel > span.title,
div.embroidery-menu-button.em_assign > span.title {
	color:#FFFFFF;
}

div.embroidery-menu-button > span.arrow {
	position:absolute;
	top:6px;
	right:0px;
	
	display: inline-block;
	opacity: 0;
		
	border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  padding: 3px;
	margin-top:8px;
	
	-webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
	
	transition: opacity ease 0.3s;
}

div.embroidery-menu-button:hover > span.arrow,
div.embroidery-menu-button.sel > span.arrow {
	opacity: 1;
}

div.embroidery-menu-button > span.dot {	
	display:none;
	
	width: 10px;
  height: 10px;
  border-radius: 50%;
  /*background-color: #3264a9;*/
	background-color: #FFF;
	
	margin-right:10px;
}
div.embroidery-menu-button.em_assign > span {
	display:inline-block;
}

div.embroidery-menu-button.em_assign {

}

div.embroidery-menu-button.disabled {
	cursor:default;
	opacity:0.5;
}

div.embroidery-menu-button.disabled:hover > span.arrow {
	opacity: 0;
}

div.embroidery-menu-button.disabled > span.title,
div.embroidery-menu-button.disabled:hover > span.title {
	text-decoration: line-through;
	text-decoration-color: #7b7b7d;
	color:#7b7b7d !important;
}
/*embroidery menu*/
/*///////////////////////*/

/*///////////////////////*/
/*radios*/
input.radio-select {
	display:none;
}

input.radio-select + label {
	position:relative;
	display:block;
	
	line-height:24px;
	font-size:17px;
	min-height:24px;
	
	cursor:pointer;
}

input.radio-select:disabled + label {
	cursor:default;
	opacity:0.5;
	text-decoration: line-through;
	text-decoration-color: #7b7b7d;
}

input.radio-select + label span.title {
	display:block;
	padding:0px 0px 0px 26px;
	color:#7b7b7d;
}

input.radio-select:checked + label span.title {
	color:#FFFFFF;
}

input.radio-select:disabled:checked + label span.title {
	color:#7b7b7d !important;
}

input.radio-select + label:hover span.title {
	color:#FFFFFF;
}

input.radio-select:disabled + label:hover span.title {
	color:#7b7b7d !important;
}

input.radio-select + label span.circle {
	position:absolute;
	top:6px;
	left:0px;
	
	display:block;
	width:13px;
	height:13px;
	
	border:1px solid #7b7b7d;
	background-color:#7b7b7d;
	border-radius: 50%;
}

input.radio-select:checked + label span.circle {
	border-color:#FFFFFF;
}

input.radio-select:checked + label span.mark {
 	position:absolute;
	top:9px;
	left:3px;
	
	display:block;
	width:7px;
	height:7px;
	
	border-radius:50%;
	background: #FFFFFF;
}

/*fake unselect*/
input.radio-select:disabled:checked + label span.circle,
input.radio-select:disabled:checked + label span.mark {
	background: #7b7b7d !important;
	border-color:#7b7b7d !important;
}

input.em-radio-select {
	display:none;
}

input.em-radio-select + label {
	position:relative;
	display:block;
	
	line-height:24px;
	font-size:17px;
	min-height:24px;
	
	cursor:pointer;
}

input.em-radio-select + label span.title {
	display:block;
	padding:0px 0px 0px 26px;
	color:#959596;
}

input.em-radio-select:checked + label span.title {
	color:#3c4143;
}

input.em-radio-select + label:hover span.title {
	color:#3c4143;
}

input.em-radio-select + label span.circle {
	position:absolute;
	top:6px;
	left:0px;
	
	display:block;
	width:13px;
	height:13px;
	
	border:1px solid #959596;
	background-color:#959596;
	border-radius: 50%;
}

input.em-radio-select:checked + label span.circle {
	/*border-color:#3c4143;*/
}

input.em-radio-select:checked + label span.mark {
 	position:absolute;
	top:9px;
	left:3px;
	
	display:block;
	width:7px;
	height:7px;
	
	border-radius:50%;
	background: #FFFFFF;
}
/*radios*/
/*///////////////////////*/

/*///////////////////////*/
/*checkboxes*/
input.checkbox-select {
	display:none;
}

input.checkbox-select + label {
	position:relative;
	display:block;
	
	line-height:24px;
	font-size:17px;
	min-height:24px;
	
	cursor:pointer;
}

input.checkbox-select:disabled + label {
	cursor:default;
	opacity:0.5;
	text-decoration: line-through;
	text-decoration-color: #7b7b7d;
}

input.checkbox-select + label span.title {
	display:block;
	padding:0px 0px 0px 26px;
	color:#7b7b7d;
}

input.checkbox-select:checked + label span.title {
	color:#FFFFFF;
}

input.checkbox-select:disabled:checked + label span.title {
	color:#7b7b7d !important;
}

input.checkbox-select:disabled + label:hover span.title {
	color:#7b7b7d !important;
}

input.checkbox-select + label:hover span.title {
	color:#FFFFFF;
}

input.checkbox-select + label span.box {
	position:absolute;
	top:6px;
	left:0px;
	
	display:block;
	width:13px;
	height:13px;
	border-radius: 2px;
	
	border:1px solid #7b7b7d;
	background-color:#7b7b7d;
}

input.checkbox-select:checked + label span.box {
	border-color:#FFFFFF;
	background-color:#FFFFFF;
}

input.checkbox-select:checked + label span.mark {
 	position:absolute;
	top:7px;
	left:4px;
	
	display:block;	
	width:6px;
	height:9px;
	
	border-style:solid;
	border-color:#3c4143;
	border-width: 0 2px 2px 0;
	
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*fake unselect*/
input.checkbox-select:disabled:checked + label span.box,
input.checkbox-select:disabled:checked + label span.mark {
	background: #7b7b7d !important;
	border-color:#7b7b7d !important;
}

input.em-checkbox-select {
	display:none;
}

input.em-checkbox-select + label {
	position:relative;
	display:block;
	
	line-height:24px;
	font-size:17px;
	min-height:24px;
	
	cursor:pointer;
}

input.em-checkbox-select + label span.title {
	display:block;
	padding:0px 0px 0px 26px;
	color:#959596;
}

input.em-checkbox-select + label:hover span.title {
	color:#3c4143;
}

input.em-checkbox-select + label span.box {
	position:absolute;
	top:6px;
	left:0px;
	
	display:block;
	width:13px;
	height:13px;
	border-radius: 2px;
	
	border:1px solid #4a5153;
	background-color:#4a5153;
}

input.em-checkbox-select:checked + label span.title {
	color:#4a5153;
}

input.em-checkbox-select:checked + label span.box {
	border-color:#7b7b7d;
	background-color:#7b7b7d;
}

input.em-checkbox-select:checked + label span.mark {
 	position:absolute;
	top:7px;
	left:4px;
	
	display:block;	
	width:6px;
	height:9px;
	
	border-style:solid;
	border-color:#FFFFFF;
	border-width: 0 2px 2px 0;
	
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
/*checkboxes*/
/*///////////////////////*/

/*///////////////////////*/
/*inputs*/
div.em-input-select-container {
	position:relative;
}

div.em-input-select-container input {
	box-sizing: border-box;
	padding:2px 4px;
	margin-top:5px;
	
	border:1px solid #d2d3d2;
	
	color: #3c4143;
	font-size: 16px;
	line-height: 30px;
	border-radius: 6px;
	
	width:100%;
}

div.em-input-select-container input + label {
	position:absolute;
	left:0px;
	top:4px;
	
	color: #a1a1a1;
}

div.em-input-select-container input + label span.title {
	display:block;
	
	color: #dedede;
	line-height:24px;
	font-size:16px;
}

div.em-input-select-container input:hover {
	border-color:#4a5153;
}

div.em-input-select-container input:focus {
	border-color:#4a5153;
}

/*div.em-input-select-container input:hover + label span.title {
	color:#232b3e;
}

div.em-input-select-container input:focus + label span.title {
	color:#0072bb;
}*/
/*inputs*/
/*///////////////////////*/

/*///////////////////////*/
/* sizing */
#layout_sizing {
	width:100%;
	
	display:flex;
	flex-flow:row nowrap;
}

#layout_sizing > div.layout_3d {
	width:30%;
	min-width:400px;
	
	position:relative;
}

#layout_sizing > div.layout_3d > div.rotate360 {
	width:100%;
	
	margin-top:-115px;
}

#layout_sizing > div.layout_3d > div.rotate360 > div.spiral {
	display:block;
	width:100%;
	height:96px;
	
	background-repeat: no-repeat;
	background-position: center center;
	background-image:url("/images/configurator/sizing/360spiral.png");
}

#layout_sizing > div.layout_3d > div.rotate360 > div.text {
	font-size:20px;
	font-weight: bold;
	text-align: center;
}

#figure3d {
	width:100%;
	height: 700px;
}

#layout_sizing > div.layout_data {
	flex:1;
	margin-right:30px;
}

#layout_sizing > div.layout_data > div.data_wrapper {
	display:flex;
	flex-flow:row nowrap;
}

#layout_sizing > div.layout_data > div.data_wrapper > div {
	flex:1;
	width:50%;
}

div.infobox_wrapper {
	/*display:flex;
	justify-content:center;*/
	width:30%;
	padding:30px;
	padding-bottom:0px;
	position: relative;
}

#layout_sizing > div.layout_data > div.data_wrapper > div.input_box {
	
}

/*//////////////*/
/*infobox*/
#layout_sizing div.infobox{
	display: none;
	position:relative;
	
	
	border:2px solid #d0d0d3;
	
	width:90%;
	border-radius:5px;
	overflow: hidden;
}

#layout_sizing div.infobox > div.tile,
#layout_sizing div.infobox > div.tile2{
	position:relative;
	background-color: #FFFFFF;
	
	padding:30px;
	/*height:605px;*/
	
	background-repeat: no-repeat;
	background-position: center bottom 40px;
	/*background-size: 90%;*/
}

#layout_sizing div.infobox > div.tile2{
	position: absolute;
	left:0px;
	top:0px;
	z-index:2;
	display: none;
}

#layout_sizing div.infobox > div.tile div.title_wrapper,
#layout_sizing div.infobox > div.tile2 div.title_wrapper{
	padding:0px 0px;
}

.infobox #thumb_img_output{
	background:url(/e_files/content_header/torso_male.jpg) center center no-repeat;
	background-size: contain;
	height:380px;
	margin-bottom:30px;
}

#layout_sizing div.infobox > div.tile div.title,
#layout_sizing div.infobox > div.tile2 div.title{
	font-size: 30px;
	line-height: 24px;
	
	color:#3c4143;
	font-weight: bold;
}

#layout_sizing div.infobox > div.tile div.desc,
#layout_sizing div.infobox > div.tile2 div.desc{
	margin-top:20px;
	/*min-height:207px;*/
	line-height: 27px;
	font-size:16px;
}

#layout_sizing div.infobox > span.shadow {	
	position:absolute;
	left:0px;
	
	width:100%;
}

#layout_sizing div.infobox > span.shadow.up {
	top:0px;
	filter: drop-shadow(0px -7px 13px rgba(0, 0, 0, 0.25));
}

#layout_sizing div.infobox > span.shadow.down {
	bottom:0px;
	filter: drop-shadow(0px 7px 13px rgba(0, 0, 0, 0.25));
}

#layout_sizing div.infobox > span.shadow > span.shape {
	display:block;
	background-color:#FF00FF;
	width:100%;
	height:150px;
}

#layout_sizing div.infobox > span.shadow.down > span.shape {
	clip-path: polygon(7px 0, calc(100% - 7px) 0%, 100% 100%, 0% 100%);
}

#layout_sizing div.infobox > span.shadow.up > span.shape {
	clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 7px 100%);
}

#layout_sizing div.infobox > div.tile div.thumb {
	
}

#layout_sizing div.input_box input {
	line-height:40px;
	
	border:none;
	border:1px solid #d2d3d2;
	background:#fff;
	
	font-size:16px;
	color:#757575;
	border-radius:6px;
	padding-left:15px;
	padding-right:15px;
}

#layout_sizing div.input_box input:focus {
	color:#3c4143;
}

#layout_sizing div.input_box select {
	/*margin:7px 0px 30px 0px;*/
	padding-right:25px;
	
	color:#3c4143;
	font-size:16px;
	line-height:40px;

	background: url('/images/dropdown_arrow_big.png') no-repeat #fff;
	background-position: right top 5px;
	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance:none;
	border-radius:6px;
	border:1px solid #d2d3d2;
	
	padding-left:15px;
}

#layout_sizing div.input_box select.focus {
	color:#3c4143;
	background-position: right bottom;
}

/*infobox*/
/*///////////////*/

/*//////////////*/
/* measurements */
#layout_sizing table.tbl_measurements {
	width:100%;
	border-collapse: collapse;
	
	margin-top:30px;
}

#layout_sizing table.tbl_measurements td {
	height: 50px;
	padding:5px 15px;
	
	background-color:#f9f9f9;
}

table.tbl_measurements tr:nth-child(1) td{
	border-top-left-radius: 10px !important;
	border-top-right-radius: 10px !important;
	padding-top:20px !important;
}

table.tbl_measurements tr.head:nth-child(1) td{
	padding-top:0px !important
}

table.tbl_measurements tr:nth-last-child(1) td{
	border-bottom-left-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}

#layout_sizing table.tbl_measurements tr.head {
	
}

#layout_sizing table.tbl_measurements tr.head > td {
	color:#3164a7;
	border-left:5px solid #3164a7;
	background-color: #fff;
	font-size:30px;
	font-weight: bold;
	padding-top:0px;
	padding-bottom:0px;
	line-height:20px;
}

#layout_sizing table.tbl_measurements tr > td.title {
	width:20%;
	border-right:5px solid #fff;
}
/* measurements */
/*//////////////*/

/*//////////////*/
/* notes */
#layout_sizing div.notes {
	margin-left:0px;
	margin-top:20px;
}

#layout_sizing div.notes > div.title {
	font-size:18px;
	font-weight: bold;
	margin-bottom:15px;
}

#layout_sizing div.notes textarea {
	width:100%;
	height:120px;
	
	font-size:16px;
	color:#757575;
	line-height:22px;
	
	border-radius: 5px;
	border:1px solid #757575;
	
	padding:10px;
}

#layout_sizing div.notes textarea:focus {
	border-color:#3c4143;
	color:#3c4143;
}
/* notes */
/*//////////////*/

/*//////////////*/
/*pattern item*/


.serial_container{
	margin-top:30px;
}

.serial_container .title{
	border-left:5px solid #3164a7;
	padding-left:10px;
	color:#757575;
	font-size:16px;
	margin-bottom:20px;
	font-weight: bold;
}

.serial_container input{
	background-color: #fff !important;
	border:2px solid #cac9cd !important;
	border-radius:5px !important;
	height:39px !important;
	vertical-align:top !important;
	width:50% !important;
}

.input_box .tbl_measurements input:disabled,
.serial_container input:disabled,
#adjustable_size:disabled{
	background-color: #f2f2f2!important
}
.serial_container .button.check{
	width:39px;
	height:39px;
	background-color:#f0eded;
	border-radius:5px;
	padding:10px 0px !important;
	min-width:0px;
	display:inline-block;
	vertical-align:top;
}

.warning_text{
	margin-top:20px;
	margin-bottom:0px;
	float:left;
}

.gender_select{
	text-align: center;
	margin-top:50px;
}

.gender_select a{
	display: inline-block;
	color:#3a3a3a;
	font-size:16px;
	width:80px;
	text-align:center;
}

.gender_select a::before{
	content: '';
  display:none;
  width: 2px;
  height: 2px;
  border-style: solid;
  border-width: 0 3px 3px 0;
  padding: 3px;
  margin-bottom: 2px;
  vertical-align: middle;
  transform: rotate(-45deg);
  transition:border-color ease-in-out 0.3s;
  margin-left:10px;
	border-color:#3a3a3a;
	margin-right:10px;
}

.gender_select a.sel{
	font-weight: bold;
}

.gender_select a.sel::before{
  display:inline-block;
}

/*pattern item*/
/*///////////////*/

/* sizing */
/*///////////////////////*/