test for header and hero image

app/assets/scss/base/_fonts.scss

@@ -0,0 +1,19 @@
+@font-face {
+  font-family: "CocogooseNormal";
+  src: url("../media/fonts/cocogoose/Cocogoose_medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "CocogooseLight";
+  src: url("../media/fonts/cocogoose/Cocogoose_light.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "CocogooseBold";
+  src: url("../media/fonts/cocogoose/Cocogoose_bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "CocogooseExtra";
+  src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype");
+}

app/assets/scss/modules/_large-hero.scss

@@ -0,0 +1,61 @@
+.large-hero {
+	border-bottom: 10px solid white;
+	text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
+	position: relative;
+
+	&__image{
+		display: block;
+	}
+
+	&__text-content {
+		padding-top: 88px;
+		position: absolute;
+		top: 50%;
+		left: 0px;
+		width: 100%;
+		transform: translateY(-50%);
+		text-align: center;
+
+		@include atMedium(){
+			padding-top: 60px;
+		}
+	}
+
+	&__title {
+		font-family: "CocogooseBold";
+		color: white;
+		font-size: 2.4rem;
+		margin: 0;
+
+		@include atSmall(){
+			font-size: 4.8rem;
+		} 
+
+	}
+
+	&__subtitle {
+		font-family: "CocogooseNormal";
+		color: white;
+		font-size: 1.5rem;
+		margin: 0;
+
+		@include atSmall(){
+			font-size: 2.9rem;
+		}
+	}
+
+	&__description {
+		color: #FFF;
+		font-weight: 00;
+		font-size: 1.1rem; 
+		max-width: 50rem;
+		margin-left: auto;
+		margin-right: auto;
+
+		@include atSmall(){
+			font-size: 1.875rem;
+		}
+	}
+
+
+}

app/assets/scss/modules/_primary-nav.scss

@@ -2,7 +2,7 @@
 	padding-top: 10px;
 	
 	@include atMedium(){
-		padding-top: 0;
+		padding: 31px 0px;
 	}
 
 	&--pull-right{
@@ -40,8 +40,8 @@
 	}
 
 	a{
-		color:  #000;
-		font-weight: 300;
+		color:  #fff;
+		font-weight: 400;
 		text-decoration: none;
 		display: block;
 		padding: 5px 8px;
@@ -50,7 +50,7 @@
 
 		@include atMedium(){
 			background:transparent;
-			font-size: 1rem;
+			font-size: 1.10rem;
 			padding: 12px 0;
 
 			&.is-current-link {

app/assets/scss/modules/_site-header.scss

@@ -1,5 +1,4 @@
 .site-header{
-	padding: 10px 0;
 	position: absolute;
 	width: 100%;
 	z-index: 2;
@@ -7,7 +6,7 @@
 	
 	@include atMedium(){
 		position: fixed;
-		background-color: #cdf691;
+		background-color: rgba(#000, 0.4);
 	}
 
 	&__btn-container{
@@ -42,6 +41,8 @@
 		transition: transform .3s ease-out;
 
 		@include atMedium(){
+			position: relative;
+			float: left;
 			left: auto;
 			transform: translateX(0);
 		}

app/assets/scss/modules/_wrapper.scss

@@ -2,7 +2,7 @@
 	overflow: hidden;
 	padding-left: 18px;
 	padding-right: 18px;
-	max-width: 1236px;
+	max-width: 1300px;
 	margin-left: auto;
 	margin-right: auto;
 

app/assets/scss/style.scss

@@ -1,10 +1,12 @@
 @import './base/_normalize';
 @import './base/variables';
+@import './base/fonts';
 @import './base/global';
 @import './base/mixins';
 @import './modules/site-header';
 @import './modules/primary-nav';
 @import './modules/wrapper';
+@import './modules/large-hero';