/*modals*/
@media screen and (max-width: 500px) {
	section.outer_modal {
		background-color: rgba(0, 0, 0, 0.8);
		height: 100vh;
		width: 100vw;
		box-sizing: border-box;
		position: absolute;
		z-index: 100000;
		top: 0;
		display: none;
		position: fixed;
		font-family: 'Nunito', sans-serif;
	}
	section.prod_view_modal .inner_modal {
		height: 95vh;
		width: 90%;
		background-color: white;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		border: 1px solid blue;
	}
	section.prod_view_modal .inner_modal .close {
		position: absolute;
		top: 0px;
		right: 0px;
		font-weight: bold;
		font-size: 30px;
		line-height: 30px;
		background-color: blue;
		height: 30px;
		width: 30px;
		color: white;
		text-align: center;
		cursor: pointer;
		z-index: 1;
	}
	section.prod_view_modal .inner_modal>.wrap {
		width: 100%;
		height: 100%;
		padding: 5px;
		box-sizing: border-box;
		border-bottom: 10px solid blue;
	}
	section.prod_view_modal .inner_modal .images {
		width: 80%;
		height: 40%;
		margin: 0 auto;
		border-bottom: 1px solid blue;
		box-sizing: border-box;
	}
	section.prod_view_modal .inner_modal .images .large_image {
		width: 100%;
		height: 75%;
		padding: 5px;
		box-sizing: border-box;
	}
	section.prod_view_modal .inner_modal .images .large_image .innr {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 80%;
	}
	section.prod_view_modal .inner_modal .images .variant_images {
		width: 100%;
		height: 25%;
		padding: 0 10px;
		box-sizing: border-box;
	}
	section.prod_view_modal .inner_modal .images .variant_images .item {
		width: 25%;
		height: 100%;
		overflow: auto;
		padding: 5px;
		box-sizing: border-box;
		float: left;
	}
	section.prod_view_modal .inner_modal .images .variant_images .item .innr {
		height: 100%;
		width: 100%;
		background-color: #ffffff;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 90%;
		box-sizing: border-box;
		border-radius: 5px;
		cursor: pointer;
	}
	section.prod_view_modal .inner_modal .images .variant_images .item:first-of-type .innr {
		border: #001e6f 1px solid;
	}
	section.prod_view_modal .inner_modal .info {
		float: left;
		width: 100%;
		height: 60%;
		position: relative;
		padding: 10px;
		box-sizing: border-box;
	}
	section.prod_view_modal .inner_modal .info>p {
		font-weight: bold;
		font-size: 15px;
		margin: 0px 0 0px 0;
	}
	section.prod_view_modal .inner_modal .info>p .brand {
		font-weight: bold;
	}
	section.prod_view_modal .inner_modal .info .variant_desc {
		overflow: auto;
		width: 100%;
		font-size: 15px;
		max-height: 70%;
	}
	section.prod_view_modal .inner_modal .info .variant_desc p {
		margin: 10px 0;
	}
	section.prod_view_modal .inner_modal .info .social {
		width: 100%;
		overflow: auto;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
	}
	section.prod_view_modal .inner_modal .info .social>.wrap {
		margin: 0 auto;
		width: 100%;
		height: 100%;
		overflow: auto;
		max-width: 1000px;
	}
	section.prod_view_modal .inner_modal .info .social .social_text {
		font-size: 14px;
		line-height: 18px;
		box-sizing: border-box;
		padding: 0 10px;
		margin: 0 0 10px 0;
		text-align: center;
		font-weight: bold;
	}
	section.prod_view_modal .inner_modal .info .social .scl_lks {
		width: 80%;
		margin: auto;
		overflow: auto;
	}
	section.prod_view_modal .inner_modal .info .social .scl_lks .box {
		width: 33.3333%;
		float: left;
		height: auto;
		padding: 0 5px;
		box-sizing: border-box;
		display: block;
	}
	section.prod_view_modal .inner_modal .info .social .scl_lks .box a {
		height: 20px;
		width: 100%;
		display: block;
		background-color: #0000fe;
		border: solid 1px white;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 14px;
		border-radius: 0px;
		border-radius: 100px;
	}
	section.prod_view_modal .inner_modal .info .social .scl_lks .box a:hover {
		-webkit-transform: skewX(0deg);
		transform: skewX(0eg);
	}
	section.prod_view_modal .note-editor {
		max-height: 70%;
		overflow: auto;
	}
}
@media screen and (min-width: 501px) and (max-width: 800px) {
	section.outer_modal {
		background-color: rgba(0, 0, 0, 0.8);
		height: 100vh;
		width: 100vw;
		box-sizing: border-box;
		position: absolute;
		z-index: 100000;
		top: 0;
		display: none;
		position: fixed;
		font-family: 'Nunito', sans-serif;
	}
	section.prod_view_modal .inner_modal {
		height: 95vh;
		width: 90%;
		max-width: 600px;
		background-color: white;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		border: 1px solid blue;
	}
	section.prod_view_modal .inner_modal .close {
		position: absolute;
		top: 0px;
		right: 0px;
		font-weight: bold;
		font-size: 30px;
		line-height: 30px;
		background-color: blue;
		height: 30px;
		width: 30px;
		color: white;
		text-align: center;
		cursor: pointer;
		z-index: 1;
	}
	section.prod_view_modal .inner_modal>.wrap {
		width: 100%;
		height: 100%;
		padding: 5px;
		box-sizing: border-box;
		border-bottom: 10px solid blue;
	}
	section.prod_view_modal .inner_modal .images {
		width: 80%;
		height: 40%;
		margin: 0 auto;
		border-bottom: 1px solid blue;
		box-sizing: border-box;
	}
	section.prod_view_modal .inner_modal .images .large_image {
		width: 100%;
		height: 75%;
		padding: 5px;
		box-sizing: border-box;
	}
	section.prod_view_modal .inner_modal .images .large_image .innr {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 80%;
	}
	section.prod_view_modal .inner_modal .images .variant_images {
		width: 100%;
		height: 25%;
		padding: 0 10px;
		box-sizing: border-box;
	}
	section.prod_view_modal .inner_modal .images .variant_images .item {
		width: 25%;
		height: 100%;
		overflow: auto;
		padding: 5px;
		box-sizing: border-box;
		float: left;
	}
	section.prod_view_modal .inner_modal .images .variant_images .item .innr {
		height: 100%;
		width: 100%;
		background-color: #ffffff;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 90%;
		box-sizing: border-box;
		border-radius: 5px;
		cursor: pointer;
	}
	section.prod_view_modal .inner_modal .images .variant_images .item:first-of-type .innr {
		border: #001e6f 1px solid;
	}
	section.prod_view_modal .inner_modal .info {
		float: left;
		width: 100%;
		height: 60%;
		position: relative;
		padding: 10px;
		box-sizing: border-box;
	}
	section.prod_view_modal .inner_modal .info>p {
		font-weight: bold;
		font-size: 15px;
		margin: 0px 0 0px 0;
	}
	section.prod_view_modal .inner_modal .info>p .brand {
		font-weight: bold;
	}
	section.prod_view_modal .inner_modal .info .variant_desc {
		overflow: auto;
		width: 100%;
		font-size: 15px;
		max-height: 70%;
	}
	section.prod_view_modal .inner_modal .info .variant_desc p {
		margin: 10px 0;
	}
	section.prod_view_modal .inner_modal .info .social {
		width: 100%;
		overflow: auto;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
	}
	section.prod_view_modal .inner_modal .info .social>.wrap {
		margin: 0 auto;
		width: 100%;
		height: 100%;
		overflow: auto;
		max-width: 1000px;
	}
	section.prod_view_modal .inner_modal .info .social .social_text {
		font-size: 14px;
		line-height: 18px;
		box-sizing: border-box;
		padding: 0 10px;
		margin: 0 0 10px 0;
		text-align: center;
		font-weight: bold;
	}
	section.prod_view_modal .inner_modal .info .social .scl_lks {
		width: 80%;
		margin: auto;
		overflow: auto;
	}
	section.prod_view_modal .inner_modal .info .social .scl_lks .box {
		width: 33.3333%;
		float: left;
		height: auto;
		padding: 0 5px;
		box-sizing: border-box;
		display: block;
	}
	section.prod_view_modal .inner_modal .info .social .scl_lks .box a {
		height: 20px;
		width: 100%;
		display: block;
		background-color: #0000fe;
		border: solid 1px white;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 14px;
		border-radius: 0px;
		border-radius: 100px;
	}
	section.prod_view_modal .inner_modal .info .social .scl_lks .box a:hover {
		-webkit-transform: skewX(0deg);
		transform: skewX(0eg);
	}
	section.prod_view_modal .note-editor {
		max-height: 70%;
		overflow: auto;
	}
}
@media screen and (min-width: 801px) {
	section.outer_modal {
		background-color: rgba(0, 0, 0, 0.8);
		height: 100%;
		width: 100%;
		box-sizing: border-box;
		position: absolute;
		z-index: 100000;
		top: 0;
		display: none;
		position: fixed;
		font-family: 'Nunito', sans-serif;
	}
	section.prod_view_modal .inner_modal {
		height: 90%;
		width: 90%;
		max-height: 700px;
		max-width: 1200px;
		background-color: white;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		border: 1px solid blue;
	}
	section.prod_view_modal .inner_modal .close {
		position: absolute;
		top: 0px;
		right: 0px;
		font-weight: bold;
		font-size: 30px;
		line-height: 30px;
		background-color: blue;
		height: 30px;
		width: 30px;
		color: white;
		text-align: center;
		cursor: pointer;
		z-index: 1;
	}
	section.prod_view_modal .inner_modal>.wrap {
		width: 100%;
		height: 100%;
		padding: 5px;
		box-sizing: border-box;
		border-bottom: 10px solid blue;
	}
	section.prod_view_modal .inner_modal .images {
		width: 50%;
		height: 100%;
		float: left;
		border-right: 1px solid blue;
		box-sizing: border-box;
	}
	section.prod_view_modal .inner_modal .images .large_image {
		width: 100%;
		height: 80%;
		padding: 5px;
		box-sizing: border-box;
	}
	section.prod_view_modal .inner_modal .images .large_image .innr {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 80%;
	}
	section.prod_view_modal .inner_modal .images .variant_images {
		width: 100%;
		height: 20%;
		padding: 0 10px;
		box-sizing: border-box;
	}
	section.prod_view_modal .inner_modal .images .variant_images .item {
		width: 25%;
		height: 100%;
		overflow: auto;
		padding: 5px;
		box-sizing: border-box;
		float: left;
	}
	section.prod_view_modal .inner_modal .images .variant_images .item .innr {
		height: 100%;
		width: 100%;
		background-color: #ffffff;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 90%;
		box-sizing: border-box;
		border-radius: 5px;
		cursor: pointer;
	}
	section.prod_view_modal .inner_modal .images .variant_images .item:first-of-type .innr {
		border: #001e6f 1px solid;
	}
	section.prod_view_modal .inner_modal .info {
		float: left;
		width: 50%;
		height: 100%;
		position: relative;
		padding: 20px;
		box-sizing: border-box;
	}
	section.prod_view_modal .inner_modal .info>p {
		font-weight: bold;
		font-size: 30px;
		margin: 0px 0 10px 0;
	}
	section.prod_view_modal .inner_modal .info>p .brand {
		font-weight: bold;
	}
	section.prod_view_modal .inner_modal .info .variant_desc {
		overflow: auto;
		max-height: 65%;
	}
	section.prod_view_modal .inner_modal .info .social {
		width: 100%;
		overflow: auto;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
	}
	section.prod_view_modal .inner_modal .info .social>.wrap {
		margin: 0 auto;
		width: 100%;
		height: 100%;
		overflow: auto;
		max-width: 1000px;
	}
	section.prod_view_modal .inner_modal .info .social .social_text {
		font-size: 22px;
		line-height: 22px;
		box-sizing: border-box;
		padding: 0 20px;
		margin: 0 0 20px 0;
		text-align: center;
		font-weight: bold;
	}
	section.prod_view_modal .inner_modal .info .social .scl_lks {
		width: 80%;
		margin: auto;
		overflow: auto;
	}
	section.prod_view_modal .inner_modal .info .social .scl_lks .box {
		width: 33.3333%;
		float: left;
		height: auto;
		padding: 0 5px;
		box-sizing: border-box;
		display: block;
	}
	section.prod_view_modal .inner_modal .info .social .scl_lks .box a {
		height: 30px;
		width: 100%;
		display: block;
		background-color: #0000fe;
		border: solid 1px white;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 20px;
		border-radius: 0px;
	}
	section.prod_view_modal .inner_modal .info .social .scl_lks .box a:hover {
		-webkit-transform: skewX(0deg);
		transform: skewX(0eg);
	}
	section.prod_view_modal .note-editor {
		max-height: 70%;
		overflow: auto;
	}
}