@keyframes rotate
{
	from
	{
		transform: rotate(0deg);
	}

	to
	{
		transform: rotate(360deg);
	}
}

@keyframes shake
{
	0%
	{
		transform: translateX(0);
	}

	30%
	{
		transform: translateX(-20%);
	}

	60%
	{
		transform: translateX(20%);
	}

	100%
	{
		transform: translateX(0);
	}
}

#virtual_try_on_container
{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	height: 0;
	padding-top: 56.4%;
	width: calc(100% - 30px);
	max-width: 1580px;
	margin: 0 auto;
	overflow: hidden;
	border: 10px solid #353535;
	transition: all 200ms;
	touch-action: manipulation;
}

@media screen and (max-width:1200px)
{
	#virtual_try_on_container
	{
		padding-top: 100%;
	}
}

@media screen and (max-width:768px)
{
	#virtual_try_on_container
	{
		padding-top: 250%;
	}
}

#virtual_try_on_container #image_container
{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 68%;
	height: 100%;
	background-color: #ffffff;
}

#virtual_try_on_container #image_container .canvas-container
{
	position: absolute !important;
	z-index: 3 !important;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none;
}

@media screen and (max-width:1200px)
{
	#virtual_try_on_container #image_container
	{
		width: 100%;
		height: 50%;
	}
}

#virtual_try_on_container #image_container > img.placeholder
{
	z-index: 1;
}

#virtual_try_on_container #image_container > img.selfie
{
	z-index: 4;
}

#virtual_try_on_container.step-2 #image_container > img.selfie
{
	cursor: move;
}

#virtual_try_on_container #image_container > img.placeholder,
#virtual_try_on_container #image_container > img.selfie
{
	position: absolute;
	top: 0;
	left: 0;
}

#virtual_try_on_container #image_container > img.placeholder
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	opacity: 1;
	cursor: default;
}

#virtual_try_on_container #image_container > img.selfie
{
	touch-action: none;
	user-select: none;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}

#virtual_try_on_container #image_container > .try-on-image
{
	position: absolute;
	z-index: 5;
	top: 30%;
	left: 30%;
	display: block;
	height: 100px;
	width: 100px;
	border: 3px dashed transparent;
	touch-action: none;
	object-fit: contain;
	user-select: none;
	transition: border 200ms;
}

#virtual_try_on_container #image_container > .try-on-image img
{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media screen and (max-width:768px)
{
	#virtual_try_on_container #image_container > .try-on-image img
	{
		padding-bottom: 50px;
	}
}

#virtual_try_on_container .button-container
{
	position: absolute;
	z-index: 1;
	left: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 70px;
	width: calc(68% - 20px);
	transition: bottom 400ms;
}

#virtual_try_on_container #image_scale_button_container
{
	position: absolute;
	z-index: 0;
	top: 10px;
	left: 10px;
	width: calc(68% - 20px);
	height: 70px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#virtual_try_on_container.step-2 #image_scale_button_container
{
	z-index: 10;
}

@media screen and (min-width:1201px)
{
	#virtual_try_on_container .button-container
	{
		bottom: -100%;
		width: calc(68% - 20px);
	}

	#virtual_try_on_container.step-2 .button-container,
	#virtual_try_on_container.step-3 .button-container
	{
		bottom: 10px;
	}
}

@media screen and (max-width:1200px)
{
	#virtual_try_on_container #image_scale_button_container
	{
		width: calc(100% - 20px);
	}

	#virtual_try_on_container .button-container
	{
		bottom: calc(50% - 70px);
		width: calc(100% - 20px);
	}

	#virtual_try_on_container.step-2 .button-container,
	#virtual_try_on_container.step-3 .button-container
	{
		bottom: calc(50% + 10px);
	}
}



#virtual_try_on_container .button-container button,
#virtual_try_on_container #image_scale_button_container button
{
	display: flex;
	flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
	height: 70px;
    width: 70px;
    border: none;
    font-family: 'SourceSans3', sans-serif;
	font-size: 10pt;
	font-weight: 700;
    padding: 0;
	border-radius: 50%;
	background-color: #ffffff;
	border: 1px solid #353535;
    color: #353535;
}

#virtual_try_on_container #image_scale_button_container button:hover,
#virtual_try_on_container .button-container button:hover
{
	color: #000000 !important;
	background-color: #ffffff !important;
}

@media screen and (min-width:1201px)
{
	#virtual_try_on_container .button-container .erase-button
	{
		transform: translateY(calc(100% + 10px));
		transition: transform 400ms;
	}

	#virtual_try_on_container.step-3 .button-container .erase-button
	{
		transform: translateY(0);
	}
}

@media screen and (max-width:1200px)
{
	#virtual_try_on_container .button-container .erase-button
	{
		transform: translateY(calc(100% + 10px));
		transition: transform 400ms;
	}

	#virtual_try_on_container.step-3 .button-container .erase-button
	{
		transform: translateY(0);
	}
}

#virtual_try_on_container .button-container button i
{
	font-size: 14pt;
}

#virtual_try_on_container .button-container .restart-button:hover i
{
	color: #000000 !important;
	background-color: transparent !important;
	animation-name: rotate;
	animation-duration: 1000ms;
	animation-iteration-count: 1;
}

#virtual_try_on_container .button-container .erase-button:hover i
{
	color: #000000 !important;
	background-color: transparent !important;
	animation-name: shake;
	animation-duration: 800ms;
	animation-iteration-count: 1;
}

#virtual_try_on_container .step-1
{
	z-index: 1;
}

#virtual_try_on_container .step-2
{
	z-index: 2;
}

#virtual_try_on_container .step-3
{
	z-index: 3;
}

#virtual_try_on_container .interface-container
{
	position: absolute;
	z-index: 2;
	bottom: 0;
	right: 0;
	padding: 2.2vw;
	height: 100%;
	width: 32%;
	background-color: #ffffff;
	border-left: 4px solid #000000;
	overflow-y: auto;
	transform: translateX(100%);
	transition: all 600ms ease-out;
}

@media screen and (max-width:1200px)
{
	#virtual_try_on_container .interface-container
	{
		border-left: none;
		border-top: 4px solid #000000;
	}
}

#virtual_try_on_container .interface-container.active
{
	transform: translateX(0);
}

@media screen and (min-width:1580px)
{
	#virtual_try_on_container .interface-container
	{
		padding: 45px;
	}
}

@media screen and (max-width:1200px)
{
	#virtual_try_on_container .interface-container
	{
		height: 50%;
		width: 100%;
	}
}

#virtual_try_on_container .interface-container h2
{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: calc(20px + (36 - 20) * ((100vw - 400px) / (1580 - 400)));
	font-weight: 500;
}

@media screen and (min-width:1580px)
{
	#virtual_try_on_container .interface-container h2
	{
		font-size: 36px;
	}
}

#virtual_try_on_container .interface-container h2 img
{
	padding-left: 10px;
}

#virtual_try_on_container .interface-container .ww_p_call_out
{
	font-size: calc(16px + (24 - 16) * ((100vw - 400px) / (1580 - 400)));
	color: #474747;
}

@media screen and (min-width:1580px)
{
	#virtual_try_on_container .interface-container .ww_p_call_out
	{
		font-size: 24px;
	}
}

#virtual_try_on_container .interface-container .ww_p
{
	font-size: calc(14px + (17 - 14) * ((100vw - 400px) / (1580 - 400)));
	color: #474747;
}

@media screen and (min-width:1580px)
{
	#virtual_try_on_container .interface-container .ww_p
	{
		font-size: 17px;
	}
}

#virtual_try_on_container .interface-container hr
{
	height: 2px;
	background-color: #DCDCDC;
	margin-top: 18px;
    margin-bottom: 18px;
}

#virtual_try_on_container .step-3.interface-container hr
{
	margin-top: 15px;
}

@media screen and (max-width:1200px)
{
	#virtual_try_on_container .interface-container hr
	{
		margin-top: 15px;
    	margin-bottom: 15px;
	}
}

#virtual_try_on_container .interface-container .img-row
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15px;
}

#virtual_try_on_container .interface-container button
{
    font-family: 'SourceSans3', sans-serif;
	font-size: 13pt;
	font-weight: 600;
	color: #1D1D1D;
	padding: 8px 15px;
	border: 2px solid #1D1D1D;
	background-color: #ffffff;
	transition: all 200ms;
}

@media screen and (max-width:480px)
{
	#virtual_try_on_container .interface-container button
	{
		font-size: 11pt;
		padding: 5px 15px;
	}
}

#virtual_try_on_container .interface-container button:hover
{
	background-color: #1D1D1D;
	color: #ffffff;
}

#virtual_try_on_container .interface-container button#launch_button
{
	margin-top: 32px;
}

@media screen and (max-width:480px)
{
	#virtual_try_on_container .interface-container button#launch_button
	{
		margin-top: 15px;
	}
}

#virtual_try_on_container .interface-container #disclaimer_form
{
	position: relative;
	margin-top: 15px;
	margin-bottom: 45px;
}

#virtual_try_on_container .interface-container #disclaimer_form .disclaimer-alert
{
	position: absolute;
	bottom: -30px;
    left: 10px;
	font-size: 11pt;
    font-weight: 700;
    color: #d92231;
    opacity: 0;
    transition: opacity 200ms;
}

@media screen and (max-width:480px)
{
	#virtual_try_on_container .interface-container #disclaimer_form .disclaimer-alert
	{
		font-size: 11pt;
	}
}

#virtual_try_on_container .interface-container #disclaimer_form.prompt-to-check .disclaimer-alert
{
	opacity: 1
}

#virtual_try_on_container .interface-container .file-alert
{
	margin-top: 10px;
    font-weight: 700;
	padding: 10px;
    border: 1px solid #d92231;
    text-align: center;
    color: #d92231;
	opacity: 0;
	transition: opacity 200ms;
}

#virtual_try_on_container .interface-container.file-alert-error .file-alert
{
	opacity: 1;
}

#virtual_try_on_container .interface-container #disclaimer_form label
{
	position: relative;
	z-index: 2;
    display: block;
    font-family: 'SourceSans3', sans-serif;
	font-size: 13pt;
	font-weight: 400;
	border: 1px solid #DCDCDC;
    padding: 10px;
	background-color: transparent;
	transition: all 200ms;
}

#virtual_try_on_container .interface-container #disclaimer_form label:hover
{
	background-color: #eaeaea;
}

#virtual_try_on_container .interface-container #disclaimer_form.prompt-to-check label
{
	border-color: #d92231;
}

@media screen and (max-width:768px)
{
	#virtual_try_on_container .interface-container button#upload_button
	{
		margin-top: 15px;
	}
}

/* Accordion */
.ui-accordion .ui-accordion-header
{
	position: relative;
	font-family: "Oswald", sans-serif;
    font-size: calc(20px + (26 - 20) * ((100vw - 400px) / (1580 - 400)));
    color: #474747;
    border: none;
    border-bottom: 2px solid #DCDCDC;
    background-color: transparent;
    padding: 0 0 10px 0;
    margin-bottom: 10px;
}

@media screen and (min-width:1580px)
{
	.ui-accordion .ui-accordion-header
	{
		font-size: 26px;
	}
}

.ui-accordion .ui-accordion-header::after
{
	content: "";
	position: absolute;
	top: 10px;
	right: 10px;
	display: block;
	width: 10px;
	height: 10px;
	background: url("/widgets/renderers/WIDGET_VIRTUAL_TRY_ON/images/plus.svg") center center no-repeat;
	background-size: contain;
}

.ui-accordion .ui-accordion-header.ui-accordion-header-active::after
{
	background: url("/widgets/renderers/WIDGET_VIRTUAL_TRY_ON/images/minus.svg") center center no-repeat;
}

.ui-accordion .ui-accordion-header-icon
{
	display: none;
}

.ui-accordion .ui-accordion-content
{
	border: none;
	padding: 0;
	margin-bottom: 50px;
}

.accordion > div
{
	position: relative;
	overflow: hidden !important;
}

.accordion > div > div > .swiper-wrapper > .swiper-slide
{
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	width: 200px !important;
}

.accordion > div > div > .swiper-wrapper > .swiper-slide > .image-container
{
	display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
	height: 185px;
    width: 185px;
    cursor: pointer;
    border: 1px solid #dcdcdc;
    text-align: center;
	margin-bottom: 30px;
	padding: 10px;
	background-color: #ffffff;
	transition: background-color 200ms;
}

.accordion > div > div > .swiper-wrapper > .swiper-slide > .image-container:hover
{
	background-color: #eaeaea;
}

.accordion > div > div > .swiper-wrapper > .swiper-slide > .image-container img
{
	max-width: 100px;
    max-height: 100px;
	object-fit: contain;
}

.accordion > div > div > .swiper-wrapper > .swiper-slide > .image-container .name
{
    font-family: 'SourceSans3', sans-serif;
	font-weight: bold;
	font-size: 10pt;
	margin-top: 5px;
}

.accordion > div > div > .swiper-wrapper > .swiper-slide > .image-container .dimensions
{
    font-family: 'SourceSans3', sans-serif;
	font-weight: normal;
	font-size: 10pt;
	margin-top: 5px;
}

.accordion > div > div > .swiper-scrollbar
{
	background-color: #DCDCDC;
}

.accordion > div > div > .swiper-scrollbar .swiper-scrollbar-drag
{
	background-color: #393939;
	border-radius: 0;
}

#product_link_container
{
	display: flex;
	flex-flow: row wrap;
}

#buy_now_heading
{
	margin-top: 40px;
	margin-bottom: 15px;
}

#product_link_container a
{
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
    font-family: 'SourceSans3', sans-serif;
	font-size: 10pt;
	font-weight: 700;
	color: #1D1D1D;
	text-decoration: none;
	background-color: #ffffff;
	padding: 8px 15px;
	margin: 0 10px 10px 0;
	border: 1px solid #1D1D1D;
	text-align: center;
	transition: all 0.2s;
	-webkit-tap-highlight-color: transparent;
}

#product_link_container a:hover
{
	color: #ffffff;
	background-color: #1D1D1D;
}