From e26fd03ea5bcf428fc33782f5a29b608a0c6532b Mon Sep 17 00:00:00 2001
From: rayelliott <rayelliott@git.rayelliott.dev>
Date: Thu, 4 Jun 2020 09:32:53 +0000
Subject: [PATCH] update hero css

---
 src/scss/_hero.scss         | 74 +++++++++++++++++++++++++++++++++----
 src/scss/_social-proof.scss | 38 +++++++++++++++++++
 src/scss/style.scss         |  1 +
 3 files changed, 105 insertions(+), 8 deletions(-)
 create mode 100644 src/scss/_social-proof.scss

diff --git a/src/scss/_hero.scss b/src/scss/_hero.scss
index db17d29..c15abac 100644
--- a/src/scss/_hero.scss
+++ b/src/scss/_hero.scss
@@ -30,6 +30,7 @@ body.rwavw-custom {
 			}
 
 			> .section-top {
+				max-width: 1600px;
 				flex: 0 0 auto;
 			}
 
@@ -46,19 +47,26 @@ body.rwavw-custom {
 			}
 
 			.hero-cta {
-				margin: 66px 0 44px;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-around;
+				align-items: center;
+				margin: 22px 0;
 				text-shadow: none;
+
 				a {
-					margin: 0 11px;
-					padding: 11px 22px;
-					font-size: 22px;
+					margin: 0 22px;
+					padding: 11px;
+					font-size: 16px;
 					font-weight: 600;
+					min-width: 18ch;
 
 					border: 3px solid #fff;
 
 					&:first-child {
 						color: #000;
 						background-color: #fff;
+						margin-bottom: 22px;
 					}
 
 					&:last-child {
@@ -74,19 +82,21 @@ body.rwavw-custom {
 			}
 
 			h1 {
-				margin: 44px 0;
-				font-size: 90px;
+				margin: 11px;
+				font-size: 36px;
+				line-height: 1.2;
 				font-weight: 400;
 			}
 
 			.heading-col-title {
-				font-size: 32px;
+				font-size: 22px;
+				line-height: 1.2;
 				font-weight: 400;
 			}
 
 			p {
 				margin-bottom: 22px;
-				font-size: 22px;
+				font-size: 16px;
 			}
 
 			.header-details {
@@ -95,6 +105,54 @@ body.rwavw-custom {
 
 		}
 
+		@media (max-width: 63.98em) {
+			#home {
+				justify-content: center;
+				align-items: center;
+				padding: 55px 11px 22px !important;
+
+				h1 {
+					text-align: center;
+					margin-bottom: 22px;
+				}
+
+				p {
+					text-align: center !important;
+				}
+			}
+		}
+
+		@media (min-width: 767px) {
+			#home {
+				h1 {
+					margin: 55px 0;
+					font-size: 60px;
+				}
+			}
+		}
+
+		@media (min-width: 64em) {
+			#home {
+				padding: 55px 11px 55px !important;
+
+				h1 {
+					font-size: 90px;
+				}
+
+				.hero-cta {
+					margin: 66px 0 66px;
+					flex-direction: row;
+
+					a {
+						margin: 0 11px;
+
+						&:first-child {
+							margin-bottom: 0;
+						}
+					}
+				}
+			}
+		}
 
 	}
 }
diff --git a/src/scss/_social-proof.scss b/src/scss/_social-proof.scss
new file mode 100644
index 0000000..81ebfef
--- /dev/null
+++ b/src/scss/_social-proof.scss
@@ -0,0 +1,38 @@
+body.rwavw-custom {
+	.testimonials-widget {
+
+		// display: flex;
+		// flex-direction: row;
+		// flex-wrap: wrap;
+		// justify-content: center;
+		// align-items: center;
+
+		> .image {
+			order: 2;
+			flex: 1 1 auto;
+			width: 4em;
+			height: 4em;
+			border-radius: 50%;
+			background-color: #999;
+			overflow: hidden;
+
+			> img {
+				width: 100%;
+				height: auto;
+			}
+		}
+
+		> blockquote {
+			order: 1;
+			flex: 0 0 100%;
+			background-color: rgba(red, 0.1);
+		}
+
+		> .credit {
+			order: 3;
+			flex: 0 1 100%;
+			background-color: rgba(orange, 0.1);
+		}
+	}
+}
+
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 593a475..bc62565 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -3,6 +3,7 @@
 @import "feature-sunset";
 @import "contact";
 @import "faq";
+@import "social-proof";
 @import "footer";
 
 #top-nav .ext-nav-toggle,