/* ==========================================================================
   page-obs.css — sections of the "Office-Based Surgery" page (node/243):
   hero, two-column intro, patient benefits, surgery day steps,
   advantages table and closing CTA.
   Source: imageworks Drupal theme (style.css).
   ========================================================================== */

/* ---------- Hero (#paragraph-118) ---------- */

#paragraph-118 {
	background: url('../images/obs-bg2.jpg') no-repeat 50% 50%;
	background-size: cover;
	padding: 200px 0 215px;
	color: #fff;
}

#paragraph-118 .text-formatted {
	width: 700px;
	max-width: 100%;
}

#paragraph-118 .section, #paragraph-119 .section, #paragraph-123 .section {
	width: 1400px;
	max-width: 93%;
}

#paragraph-118 h1 {
	font-weight: bold;
	font-size: 62px;
	color: #fff;
}

#paragraph-118 p {
	font-size: 20px;
}

#paragraph-118 p.candidate {
	color: #ccdeea;
	font-size: 24px;
	font-weight: 500;
	width: 500px;
	max-width: 100%;
	line-height: 1.2;
}

/* ---------- Two-column intro (#paragraph-119) ---------- */

#paragraph-119 {
	padding: 100px 0;
}

#paragraph-119 .left, #paragraph-119 .right {
	display: inline-block;
	width: 45%;
}

#paragraph-119 .left {
	padding-right: 2%;
	margin-right: 6%;
	border-right: 1px solid #3a484c;
}

.left.align-middle, .right.align-middle {
	vertical-align: middle;
}

#paragraph-119 h2, #paragraph-122 h2, #paragraph-123 h2 {
	color: #3a484c;
	font-weight: bold;
	font-size: 40px;
}

#paragraph-119 p, #paragraph-121 p {
	font-size: 18px;
}

/* ---------- Patient benefits (#paragraph-120) ---------- */

#paragraph-120 {
	background: url('../images/patient-benefits-bg-flipped.jpg') no-repeat 50% 0;
	padding: 50px 0;
	color: #fff;
	text-align: right;
	background-size: cover;
}

#paragraph-120 .section {
	width: 1400px;
}

#paragraph-120 .text-formatted {
	width: 620px;
	max-width: 100%;
	display: inline-block;
	text-align: left;
}

#paragraph-120 h2, #paragraph-121 h2 {
	color: #fff;
	font-weight: bold;
	font-size: 40px;
}

#block-imageworks-content #paragraph-120 ul li {
	font-size: 18px;
	padding-left: 25px;
}

#block-imageworks-content #paragraph-120 ul li.x {
	background: url('../images/bullet-x.png') no-repeat 0 7px;
}
#block-imageworks-content #paragraph-120 ul li.up {
	background: url('../images/bullet-up.png') no-repeat 0 6px;
}
#block-imageworks-content #paragraph-120 ul li.down {
	background: url('../images/bullet-down.png') no-repeat 0 6px;
}

/* ---------- Surgery day steps (#paragraph-121) ---------- */

#paragraph-121 {
	padding: 110px 0 90px;
	background: #014f85;
	text-align: center;
	color: #fff;
}

#block-imageworks-content #surgery-ol li {
	font-size: 18px;
	margin-bottom: 35px;
	display: inline-block;
	vertical-align: top;
	width: 47%;
}

#block-imageworks-content #surgery-ol li:nth-child(odd) {
	margin-right: 5%;
}

#block-imageworks-content #surgery-ol {
	margin-top: 45px;
}

#surgery-ol {
	list-style: none;
	counter-reset: otheritem;
	padding: 0 !important;
}

#surgery-ol li {
	counter-increment: otheritem;
	line-height: 1.3 !important;
}

#surgery-ol li span {
	display: inline-block;
	vertical-align: middle;
	font-size: 1em !important;
	width: 75%;
}

#surgery-ol li::before {
	margin-right: 20px;
	content: counter(otheritem);
	background: #fff;
	border-radius: 50%;
	color: #3a484c;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	display: inline-block;
	font-weight: bold;
	font-size: 24px;
	vertical-align: middle;
}

/* ---------- Advantages table (#paragraph-122) ---------- */

#paragraph-122 {
	padding: 100px 0;
	background-color: #f4f5f5;
}

#paragraph-122 h2 {
	text-align: center;
	margin-bottom: 50px;
}

#surgery-advantages {
	background: #fff;
	width: 100%;
	max-width: 100%;
}

#surgery-advantages td {
	padding: 20px;
	font-size: 16px;
	line-height: 1.3;
}

#surgery-advantages td p {
	font-size: 16px;
	margin: 0;
}

#surgery-advantages tr td:nth-child(2) {
	color: #fff;
	background: #6b006b;
	text-align: center;
}

#surgery-advantages tr td:nth-child(3) {
	color: #fff;
	background: #00497b;
	text-align: center;
}

#surgery-advantages tr.heading-row {
	background: #daddde;
}

#surgery-advantages tr.heading-row td:nth-child(2) {
	background: #8d438e;
}

#surgery-advantages tr.heading-row td:nth-child(3) {
	background: #427699;
}

#surgery-advantages tbody tr:first-child td:first-child {
	background: #f4f5f5;
}

#paragraph-122 .section {
	width: 900px;
}

/* ---------- Closing CTA (#paragraph-123) ---------- */

#paragraph-123 {
	padding: 100px 0;
}

#paragraph-123 h2 {
	margin-bottom: 40px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 1023px) {

	#paragraph-118, #paragraph-119, #paragraph-120, #paragraph-121, #paragraph-122, #paragraph-123 {
		padding: 60px 0;
	}

	#paragraph-118 h1 {
		font-size: 40px;
	}

	#paragraph-118 p, #paragraph-119 p, #paragraph-121 p {
		font-size: 16px;
	}

	#paragraph-119 .left, #paragraph-119 .right {
		display: block;
		margin: 0 auto 30px;
		width: 100%;
		border: none;
		padding: 0;
	}

	#paragraph-119 h2, #paragraph-122 h2, #paragraph-123 h2, #paragraph-120 h2, #paragraph-121 h2 {
		font-size: 27px;
	}

	#paragraph-120 {
		background: #6b006b;
	}

	#paragraph-120 .text-formatted {
		width: 100%;
	}

	#block-imageworks-content #surgery-ol li {
		display: block;
		width: 100% !important;
		margin: 0 auto 30px !important;
	}

	#surgery-advantages td {
		padding: 15px;
	}

	#surgery-advantages td,
	#surgery-advantages td p {
		font-size: 14px;
	}

}

@media screen and (max-width: 767px) {

	#paragraph-118 h1 {
		font-size: 27px;
	}

	#paragraph-118 p.candidate {
		font-size: 20px;
	}

}