@charset "utf-8";

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

.intro {
	width: 100%;
	background-color: hsla(224,100%,88%,0.40);
	padding: 30px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1800px;
	margin-top: 20px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	margin-bottom: 20px;
}

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

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


.letter {
	width: 100%;
	background-color: hsla(0,0%,100%,0.90);
	padding-top: 20px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1800px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	margin-bottom: 40px;
	border-top: 5px solid hsla(78,75%,57%,1.00);
}

.videoMaxWidth {
	text-align: center;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -60px;
}


.letter h2 {
	font-family: dancing-script;
	font-style: normal;
	font-weight: 700;
	color: hsla(221,95%,32%,1.00);
	font-size: 40px;
	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(221,95%,32%,1.00);
	font-size: 30px;
	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(0,0%,100%,0.80);
	padding-top: 20px;
	padding-bottom: 30px;
	padding-left: 12%;
	padding-right: 12%;
	text-align: center;
	border-top: 8px solid hsla(77,100%,66%,1.00);
}

.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: 27.33333333333333%;
	float: left;
	margin-left: 3%;
	margin-right: 3%;
	margin-bottom: 20px;
}
.pre-op figure img {
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.quotes {
	background-color: hsla(221,71%,39%,0.50);
	text-align: center;
	padding-top: 60px;
	padding-bottom: 40px;
	padding-left: 8%;
	padding-right: 8%;
	border-top: 8px solid hsla(77,100%,66%,1.00);
	border-bottom: 8px solid hsla(77,100%,66%,1.00);
}
.quotes h1 {
	color: hsla(77,100%,66%,1.00);
	margin-top: 0px;
	margin-bottom: 60px;
	font-size: 42px;
	font-weight: 700;
}

.quotes h2 {
	color: hsla(0,0%,100%,1.00);
	margin-top: 0px;
	margin-bottom: 60px;
	font-size: 30px;
	font-weight: 700;
}

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

.photos figure {
	width: 100%;
	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);
}


.post-op {
	background-color: hsla(208,64%,47%,0.70);
	padding-top: 60px;
	padding-bottom: 60px;
	padding-left: 12%;
	padding-right: 12%;
	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: 60px;
}

.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:2000px){

.videoMaxWidth {
	margin-top: 0px;
}
}

@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 {
	padding-left: 14%;
	padding-right: 14%;
}

}


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

.quotes {
	padding-left: 8%;
	padding-right: 8%px;
}

.pre-op {
	padding-left: 1%;
	padding-right: 1%;
}

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

}

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

.pre-op figure {
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
	margin-bottom: 20px;
}

.pre-op figure img {
	border-radius: 10px;
}

.post-op {
	padding-bottom: 30px;
}
.post-op figure {
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
	margin-bottom: 20px;
}

.post-op figure img {
	border-radius: 10px;
}

.photos {
	padding-left: 7%;
	padding-right: 7%;
}
}

@media screen and (max-width:767px){
.letter figure {
	width: 30%;
}

.pre-op {
	padding-left: 30px;
	padding-right: 30px;
}

.post-op {
	padding-left: 30px;
	padding-right: 30px;
}

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

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

.photos {
	padding-left: 30px;
	padding-right: 30px;
} 


.quotes h1 {
	margin-bottom: 40px;
}
.quotes h2 {
	font-size: 24px;
	margin-bottom: 40px;
}
}

@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%;
}


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