@charset "utf-8";

.x-rays {
	background-image: url(../Monica/backgrounds/x-rays.jpg);
 }
 
 .clouds {
	background-image: url(../Monica/backgrounds/clouds.jpg);
 }
 
 .pageWrapper {
	padding-left: 10%;
	padding-right: 10%;
 }

.intro {
	width: 100%;
	background-color: hsla(213,27%,92%,0.90);
	padding-left: 60px;
	padding-top: 40px;
	padding-right: 60px;
	margin-left: auto;
	margin-right: auto;
	max-width: 2000px;
	margin-top: 60px;
	border-top-right-radius: 30px;
	border-top-left-radius: 30px;
	padding-bottom: 20px;
	border-bottom: 4px solid hsla(139,73%,36%,1.00);
}

.intro h1 {
	font-family: dancing-script;
	font-style: normal;
	font-weight: 700;
	color: hsla(220,100%,33%,1);
	font-size: 60px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 20px;
}

.intro figure {
	float: right;
	margin-left: 80px;
	margin-bottom: 30px;
	width: 33%;
	max-width: 300px;
}
.intro figure img {
	width: 100%;
	height: auto;
	border-radius: 30px;
}
.intro p {
	font-size: 22px;
}

.letter p {
	font-size: 22px;
}


.letter {
	width: 100%;
	background-color: hsla(213,27%,92%,0.90);
	padding-left: 60px;
	padding-right: 60px;
	padding-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
	max-width: 2000px;
	margin-bottom: 60px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	padding-top: 20px;
	margin-top: 10px;
	border-top: 4px solid hsla(199,97%,35%,1.00);
}

.letter h2 {
	font-family: dancing-script;
	font-style: normal;
	font-weight: 700;
	color: hsla(26,100%,53%,1.00);
	font-size: 60px;
	margin-bottom: 30px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

.letter h3 {
	font-family: dancing-script;
	font-style: normal;
	font-weight: 700;
	color: hsla(220,100%,37%,1.00);
	font-size: 48px;
	margin: 0px;
}

.letter figure {
	float: left;
	margin-right: 30px;
	margin-bottom: 30px;
	width: 33%;
	max-width: 800px;
}
.letter figure img {
	width: 100%;
	height: auto;
}
.pre-op {
	background-color: hsla(222,65%,92%,1.00);
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 3%;
	padding-right: 3%;
	text-align: center;
}

.pre-op h1 {
	font-weight: 700;
	color: hsla(220,100%,33%,1);
	font-size: 42px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 40px;
}

.pre-op figure {
	width: 14.66666666666667%;
	float: left;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 40px;
}
.pre-op figure img {
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.keyTerms {
	background-color: hsla(221,71%,39%,0.50);
	text-align: center;
	padding-top: 40px;
	padding-bottom: 20px;
	padding-left: 3%;
	padding-right: 3%;
}
.keyTerms h1 {
	color: hsla(0,0%,100%,1.00);
	margin-top: 0px;
	margin-bottom: 40px;
	font-size: 42px;
	font-weight: 700;
}

.keyTerms h2 {
	color: hsla(50,100%,50%,1.00);
	margin-top: 0px;
	margin-bottom: 10px;
	font-size: 36px;
	font-weight: 700;
}

.keyTerms p {
	font-size: 24px;
}

.keyTerms .column {
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 20px;
	width: 23%;
	float: left;
	clear: none;
	padding: 30px;
	background-color: hsla(221,71%,39%,0.50);
	color: hsla(0,0%,100%,1.00);
	border-radius: 20px;
	min-height: 500px;
}
.keyTerms .column figure img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	margin-bottom: 10px;
}
.keyTerms .column figure figcaption a {
	font-size: 14px;
	font-weight: 700;
	color: hsla(0,0%,100%,0.70);
}

.keyTerms .column figure figcaption a:hover {
	color: hsla(0,0%,100%,1.0);
}

.photos {
	width: 100%;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 120px;
	padding-bottom: 60px;
}

.photos figure {
	width: 29.33333333333333%;
	margin-left: 2%;
	margin-right: 2%;
	float: left;
}

.photos figure img {
	width: 100%;
	height: auto;
	border-radius: 20px;
	-webkit-box-shadow: 1px 1px 6px 1px hsla(229,100%,15%,0.30);
	box-shadow: 1px 1px 6px 1px hsla(229,100%,15%,0.30);
	margin-bottom: 15px;
}

.photos figure figcaption {
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: hsla(226,100%,28%,1.00);
	margin-bottom: 30px;
	height: 80px;
}


.post-op {
	background-color: hsla(208,64%,47%,0.70);
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 22%;
	padding-right: 22%;
	text-align: center;
}

.post-op h1 {
	font-weight: 700;
	color: hsla(0,0%,100%,1.00);
	font-size: 42px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 40px;
}

.post-op figure {
	width: 27.33333333333333%;
	float: left;
	margin-left: 3%;
	margin-right: 3%;
	margin-bottom: 40px;
}
.post-op figure img {
	width: 100%;
	height: auto;
	border-radius: 20px;
}


@media screen and (max-width:1700px){
.keyTerms {
	padding-left: 30px;
	padding-right: 30px;
}

.keyTerms .column {
	margin-left: .5%;
	margin-right: .5%;
	width: 24%;
	padding: 20px;
}

.keyTerms h2 {
	font-size: 30px;
}
.photos {
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 50px;
	padding-bottom: 30px;
}
.photos figure {
	width: 31.33333333333333%;
	margin-left: 1%;
	margin-right: 1%;
}

.intro p {
	font-size: 18px;
}

.letter p {
	font-size: 18px;
}
}

@media screen and (max-width:1500px){
 .pageWrapper {
	padding-left: 30px;
	padding-right: 30px;
 }
 
.intro {
	padding-left: 30px;
	padding-right: 30px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.letter {
	padding-left: 30px;
	padding-right: 30px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.letter figure {
	width: 50%;
}

.intro h1 {
	font-size: 50px;
}

.letter h2 {
	font-size: 44px;
}

.letter h3 {
	font-size: 34px;
}

.photos figure {
	width: 48%;
}

.post-op {
	padding-left: 12%;
	padding-right: 12%;
}
}

@media screen and (max-width:1400px){
.intro figure {
	margin-left: 40px;
}
.keyTerms .column {
	margin-left: 1%;
	margin-right: 1%;
	width: 48%;
	min-height: 280px;
}

}

@media screen and (max-width:1300px){
.pre-op h1 {
	font-size: 36px;
	margin-bottom: 20px;
}
.pre-op figure {
	width: 48%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 20px;
}

.pre-op figure img {
	border-radius: 10px;
}
.post-op {
	padding-left: 30px;
	padding-right: 30px;
}

.post-op h1 {
	font-size: 36px;
	margin-bottom: 20px;
}
}

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

.keyTerms .column {
	min-height: 360px;
}

}

@media screen and (max-width:767px){
.intro h1 {
	font-size: 40px;
}

.letter h2 {
	font-size: 38px;
}
.letter h3 {
	font-size: 28px;
}
.letter figure {
	width: 30%;
}
.keyTerms h1 {
	font-size: 30px;
	margin-bottom: 20px;
}
.keyTerms .column {
	margin-left: 0%;
	margin-right: 0%;
	width: 100%;
	min-height: 0px;
}
.photos figure {
	width: 100%;
	margin-left: 0%;
	margin-right: 0%;
}
}

@media screen and (max-width:600px){
 .pageWrapper {
	padding-left: 0px;
	padding-right: 0px;
 }
 
 .intro {
	margin-top: 0px;
	border-radius: 0px;
}
 
.intro figure {
	float: left;
	width: 100%;
	max-width: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 30px;
	border-radius: 0px;
}

.letter figure {
	float: left;
	width: 100%;
	max-width: none;
	margin-top: 5px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 30px;
	border-radius: 0px;
}

.intro h1 {
	font-size: 44px;
}

.letter h2 {
	font-size: 36px;
}

.letter h3 {
	font-size: 32px;
}

.pre-op figure {
	width: 100%;
	margin-left: 0%;
	margin-right: 0%;
}

.keyTerms p {
	font-size: 18px;
}

.post-op figure {
	width: 100%;
	margin-left: 0%;
	margin-right: 0%;
}
}