case studies

_includes/case-study-styles.html

@@ -1,7 +1,7 @@
 <style>
-	/*#caseStudies body.fixed {*/
-		/*padding-bottom: 201px;*/
-	/*}*/
+	#caseStudyTitle {
+		margin-top: 1em !important;
+	}
 	
 	#caseStudies p {
 		color: rgb(26,26,26) !important;
@@ -14,6 +14,10 @@
 		padding: 0;
 	}
 
+	#caseStudies #mainContent .content {
+		padding-top: 0;
+	}
+
 	#caseStudies main {
 		max-width: 1100px !important;
 	}
@@ -21,13 +25,22 @@
 	#caseStudies .content {
 		position: relative;
 		margin: 0 auto 50px;
-		max-width: 96%;
+		max-width: 90%;
+	}
+
+	#caseStudies .content p {
+		line-height: 24px !important;
 	}
 
 	#caseStudies .content h3 {
 		padding: 0 !important;
 	}
 	
+	#caseStudies #hero h5 {
+		padding-left: 20px;
+		margin: 0;
+	}
+	
 	.case-studies {
 		position: relative;
 		display: flex;
@@ -40,7 +53,7 @@
 		position: relative;
 		width: 50%;
 		padding: 0 40px 0 242px;
-		margin-bottom: 100px;
+		margin-bottom: 60px;
 		min-height: 152px;
 	}
 	
@@ -72,21 +85,32 @@
 	
 	#caseStudies #video main {
 		position: relative;
-		max-width: 1100px;
+		max-width: 900px !important;
 		height: 100%;
 		display: flex;
-		justify-content: space-between;
+		justify-content: center;
 		align-items: center;
 		padding: 50px 20px;
 	}
 
+	#caseStudies #video main > div {
+		width: 50%;
+	}
+
+	#caseStudies #video main #zulilyLogo {
+		width: 100px;
+	}
+
 	#caseStudies #video main img {
 		max-width: 100%;
 	}
 
 	#caseStudies #video h3 {
-		max-width: 60%;
-		margin: 1em 0;
+		font-size: 32px;
+		font-weight: 300;
+		line-height: 38px;
+		max-width: 80%;
+		margin: 0 0 1em 0;
 	}
 
 	#caseStudies #video p {
@@ -151,7 +175,7 @@
 	
 	#caseStudies .feature {
 		position: relative;
-		padding: 20px 0 20px 220px;
+		padding: 20px 0 20px 242px;
 	}
 	
 	#caseStudies .feature img {
@@ -201,6 +225,11 @@
 		margin-bottom: 0.5em;
 	}
 	
+	#caseStudies .feature p.quote {
+		font-size: 20px;
+		line-height: 28px !important;
+	}
+	
 	@media screen and (max-width: 1024px){
 		.case-study {
 			padding: 0 10%;
@@ -209,7 +238,6 @@
 
 		.case-study img {
 			position: relative;
-			width: 100%;
 		}
 
 		.case-study p.quote {
@@ -223,13 +251,16 @@
 
 	@media screen and (max-width: 900px){
 		#caseStudies #video main {
-			flex-wrap: wrap;
-			justify-content: center;
+			flex-direction: column;
+			align-items: center;
 		}
 
-		#caseStudies #video main > * {
-			width: 100%;
-			text-align: center;
+		#caseStudies #video main > div {
+			width: 400px;
+		}
+
+		#caseStudies #video main > div + div {
+			margin-top: 30px;
 		}
 
 		#caseStudies #video h3 {
@@ -241,20 +272,39 @@
 		.case-study {
 			width: 100%;
 		}
-	}
 
-	@media screen and (max-width: 480px){
+		.case-study:nth-child(3) {
+			margin-bottom: 60px;
+		}
+
+		.case-study img {
+			left: 50%;
+			transform: translateX(-50%);
+		}
+
 		#caseStudies .feature {
 			margin-top: 50px;
 			padding: 180px 0 0;
 		}
-		
+
 		#caseStudies .feature img {
 			top: 0;
 			left: 50%;
 			transform: translateX(-50%);
 		}
-		
+	}
+
+	@media screen and (max-width: 480px){
+		#caseStudies #hero {
+			padding-right: 20px;
+			padding-left: 20px;
+		}
+
+		#caseStudies #video main > div {
+			width: 80%;
+			min-width: 280px;
+		}
+
 		.bullet {
 			width: 100%;
 		}