/* Procedure Snapshot */

.content .procedure-snapshot {
	border        : 1px solid #e1e1e1;
	margin-bottom : 38px;
	margin-left   : -8px;
	margin-top    : 25px;
	padding       : 58px 13px 23px;
	position      : relative;
	width         : calc(100% + 16px); }

.content .procedure-snapshot:before {
	background     : #fffaf1;
	color          : #524a43;
	content        : 'Procedure Snapshot';
	font-family    : 'ProximaNovaMedium', Arial, sans-serif;
	font-size      : 14px;
	font-weight    : 500;
	left           : 0;
	letter-spacing : 0.03em;
	line-height    : 150%;
	padding        : 6px 10px 5px;
	position       : absolute;
	text-transform : uppercase;
	top            : 0;
	width          : 100%; }

.content .procedure-snapshot .sep {
	border        : 0;
	border-bottom : 4px double #e1e1e1;
	height        : 0; }

.content .procedure-snapshot .content-wrap {
	width : 100%; }

.content .procedure-snapshot .heading {
	color         : #336db5;
	font-size     : 28px;
	line-height   : 120%;
	margin-bottom : 3px;
	margin-top    : 3px; }

.content .procedure-snapshot .description {
	margin-top : 0; }

.content .procedure-snapshot .view-gallery {
	display   : block;
	margin    : 0 auto -13px;
	max-width : 441px;
	width     : 100%; }

.content .procedure-snapshot .view-gallery {
	text-decoration : none; }

.content .procedure-snapshot .view-gallery:after {
	background     : #336db5;
	border-radius  : 3px;
	box-shadow     : inset 0 -3px 0 rgba(0, 0, 0, 0.2);
	color          : #ffffff;
	content        : 'View Our Gallery \00BB';
	display        : block;
	font-family    : 'ProximaNovaMedium', Arial, sans-serif;
	font-size      : 17px;
	height         : 44px;
	left           : calc((100% - 187px) / 2);
	letter-spacing : 0.02em;
	line-height    : 120%;
	padding        : 12px 0;
	position       : relative;
	text-align     : center;
	text-transform : uppercase;
	top            : -29px;
	width          : 187px; }

.content .procedure-snapshot .view-gallery.nudity-overlay:after { display: none; }

.content .procedure-snapshot .wishlist-link {
	background           : url('../img/icons/wishlist-icon.svg') no-repeat;
	color                : #336db5;
	font-family          : 'ProximaNovaMedium', Arial, sans-serif;
	font-size            : 14px;
	font-style           : normal;
	letter-spacing       : 0.03em;
	line-height          : 150%;
	padding-left         : 21px;
	position             : absolute;
	right                : 16px;
	text-align           : right;
	text-decoration-line : underline;
	text-transform       : uppercase;
	top                  : 5px; }

.content .procedure-snapshot .subheading {
	color          : #336db5;
	font-family    : 'ProximaNovaMedium', Arial, sans-serif;
	font-size      : 17px;
	letter-spacing : 0.02em;
	line-height    : 150%;
	margin         : 7px 0;
	text-transform : uppercase; }

.content .procedure-snapshot .info-box {
	display        : inline-block;
	vertical-align : top; }

.content .procedure-snapshot .info-box .details {
	float   : left;
	margin  : 0;
	padding : 10px 0 0 30px; }

.content .procedure-snapshot .info-box .detail {
	letter-spacing : 0;
	list-style     : none;
	margin-bottom  : 15px;
	position       : relative; }

.content .procedure-snapshot .info-box .detail:before {
	color       : #336db5;
	content     : '\E807';
	font-family : 'fontello';
	font-size   : 14px;
	left        : -21px;
	line-height : 1em;
	position    : absolute;
	top         : 3px; }

.content .procedure-snapshot .info-box-1 {
	width : 100%; }

.content .procedure-snapshot .info-box-1 .detail {
	width : 100%; }

.content .procedure-snapshot .info-box-2 {
	border-top  : 4px double #e1e1e1;
	margin-top  : 13px;
	padding-top : 18px;
	width       : 100%; }

.content .procedure-snapshot .stats-disclaimer {
	clear          : both;
	color          : #524a43;
	display        : block;
	font-size      : 14px;
	letter-spacing : 0.02em;
	line-height    : 150%;
	padding-top    : 8px; }

@media (min-width : 376px) {

	.content .procedure-snapshot {
		margin-left : 3px;
		padding     : 58px 17px 23px;
		width       : calc(100% - 6px); }

}

@media (min-width : 415px) {

	.content .procedure-snapshot {
		background  : #ffffff;
		margin-left : -30px;
		padding     : 58px 30px 23px;
		width       : calc(100% + 60px); }

}

@media (min-width : 600px) {

	.content .procedure-snapshot .info-box-1 .detail {
		width : calc((100% - 60px) / 2) }

	.content .procedure-snapshot .info-box-1 .detail:nth-of-type(1),
	.content .procedure-snapshot .info-box-1 .detail:nth-of-type(3) {
		clear : left;
		float : left; }

	.content .procedure-snapshot .info-box-1 .detail:nth-of-type(2),
	.content .procedure-snapshot .info-box-1 .detail:nth-of-type(4) {
		clear : right;
		float : right; }

}

@media (min-width : 800px) {

	.content .procedure-snapshot .content-wrap {
		float : left;
		width : calc(50% - 20px); }

	.content .procedure-snapshot .view-gallery {
		float : right;
		width : 50%; }

	.content .procedure-snapshot .info-box-1 {
		width : calc(100% - 230px); }

	.content .procedure-snapshot .info-box-2 {
		border-left  : 4px double #e1e1e1;
		border-top   : 0;
		float        : right;
		margin-top   : 0;
		padding-left : 13px;
		padding-top  : 0;
		width        : 221px; }

}

@media (min-width : 1020px) {

	.page-template-page-procedure-template .content ol,
	.page-template-page-procedure-template .content ul {
		margin  : 16px 0 30px;
		padding : 0 0 0 71px; }

	.page-template-page-procedure-template .page-body:before {
		background          : url(../img/bg-p-logo.png) repeat-y; /* If you use an SVG it looks pixelated in chrome WTF? */
		background-position : top center;
		background-size     : 1870px 2376px;
		content             : ' ';
		display             : block;
		height              : 100%;
		left                : -310px;
		position            : absolute;
		top                 : 486px;
		width               : calc(100vw + 500px);
		z-index             : -1; }

}