@charset "UTF-8";
/* CSS Document */
/*!
* mrcppr.design
* Copyright 2020
*/
/*!
 * Bootstrap v4.5.0 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
.body {
	margin: 0;
	padding: 0;
}
.container {
	margin: auto;
}

p { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 16.00px;}

a { color: #cb1518;}
a:hover { color: #cb1518; }

h1 {font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 47.12px; text-transform: uppercase; }
h2 {font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 29.12px; text-transform: uppercase; }
h3 {font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 18px; text-transform: uppercase; }

.red {background-color: #E5110D;}
.red a { color: #efefef;}
.red h1 {color: #efefef;}
.red h2 {color: #efefef;}
.red h3 {color: #efefef;}
.red h4 {color: #efefef;}
.red p { color: #efefef;}

.pink {background-color: #F29391;}
.pink a { color: #000000;}
.pink a:hover { color: #000000;}
.pink h1 {color: #000000;}
.pink h2 {color: #000000;}
.pink h3 {color: #000000;}
.pink h4 {color: #000000;}
.pink p { color: #000000;}

.orange {background-color: #ec9736;}
.orange a { color: #000000;}
.orange h1 {color: #000000;}
.orange h2 {color: #000000;}
.orange h3 {color: #000000;}
.orange h4 {color: #000000;}
.orange p { color: #000000;}

.black {background-color: #000000;}
.black h1 {color: #efefef;}
.black h2 {color: #efefef;}
.black h3 {color: #efefef;}
.black h4 {color: #efefef;}
.black p { color: #efefef;}

.brand-img {display: none;}
.brand-img-mob {display: initial; }

.nav-lrg {display: none;}
.nav-mob {display: initial; }

.grid-container-index {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 1rem 1rem;
  grid-template-areas:
	"navbar"
    "masthead"
	"work-list"
	"footer-about"
	"footer";
}

/*Grid Index Sections*/

.mastead {
	grid-area: masthead;
}

.work-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 0.75rem 0.75rem;
  grid-template-areas:
    "project-a-home project-b-home"
    "project-c-home project-d-home"
	"project-e-home project-f-home"
	"project-g-home project-h-home"
	"work-cta none";
  grid-area: work-list;
}

.project-a-home {
  grid-area: project-a-home;
}
.project-b-home {
  grid-area: project-b-home;
}
.project-c-home {
  grid-area: project-c-home;
}
.project-d-home {
  grid-area: project-d-home;
}
.project-e-home {
  grid-area: project-e-home;
}
.project-f-home {
  grid-area: project-f-home;
}
.project-g-home {
  grid-area: project-g-home;
}
.project-h-home {
  grid-area: project-h-home;
}
.work-cta {
  grid-area: work-cta;
}

/*Footer*/

.footer-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 1.5rem 1.5rem;
  grid-template-areas:
	"bio bio"
	"pastjobs skills";
  grid-area: footer-about;
}
/*FOOTER ON ABOUT PAGE*/
.footer-about-bioless {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 1.5rem 1.5rem;
  grid-template-areas:
	"pastjobs skills";
  grid-area: footer-about;
}
.bio { grid-area: bio; }
.pastjobs { grid-area: pastjobs; }
.skills { grid-area: skills; }
.contact { margin: 0; padding: 0; list-style: none; }
.contact a { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase;}

.footer { 
	grid-area: footer;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 1rem;
	grid-template-areas:
	  "footer-copyright"
	  "footer-up";
}

.footer-copyright {
	grid-area:footer-copyright;
}

.footer-up {
	grid-area:footer-up;
	float: right;
	align-items: flex-end;
	align-content: flex-end;
}


.overhead-dark {padding-top:4px; border-top: solid #ffffff 1px;}
.overhead-light {padding-top:4px; border-top: solid #000000 1px;}

.date {font-family: 'Rubik', sans-serif; font-style: italic;}
.workplace {font-family: 'Rubik', sans-serif; font-weight: 600; text-transform: uppercase;}
.service { font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 21.33px; text-transform: uppercase; border-top:3px solid #000000;}
.footerheading { font-family: 'Rubik', sans-serif; font-weight: 600; font-size:16px; text-transform: uppercase;}
.experience { font-family: 'Lato', sans-serif; font-weight: 500; font-size: 14px; list-style: none; margin: 0; padding: 0 0 0 5px;}
.jobname {font-weight: 800; line-height:10px;}
.jobtitle {font-weight: 200; line-height: 5px; font-size: 12px}
.skill { font-family: 'Lato', sans-serif; font-weight: 500; font-size: 14px; list-style: none; margin: 0; padding: 0 0 0 5px;}
.clients { font-family: 'Lato', sans-serif; font-weight: 500; font-size: 14px; list-style: none; margin: 0; padding: 0 0 0 5px;}

/*GRID WORK*/
.grid-container-work {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 1rem 1rem;
  grid-template-areas:
	"navbar"
	"work"
	"footer-about"
	"footer";
}

.work {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 1rem 1rem;
  grid-template-areas:
    "project-a"
    "project-b"
    "project-c"
    "project-d"
	"project-e"
	"project-f"
	"project-g"
	"project-h";
  grid-area: work;
}

.card-custom {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	border-radius: 0.25rem;
	margin-bottom: 2rem;
}

.card-body-custom {
	flex: 1 1 auto;
	min-height: 1px;
	padding-top: 10px;
}

.project-a {
  display: grid;
  grid-template-columns: 1fr ;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-gap: 1rem 1rem;
  grid-template-areas:
	"a-protitle a-protitle"
    "a-hero-image a-hero-image"
    "a-sec-image a-sec-image-2"
    "a-sec-image-3 a-sec-image-4"
	"a-sec-image-5 none";
  grid-auto-flow: row;
  grid-area: project-a;
}

.a-protitle {
	grid-area: a-protitle;
}

.a-hero-image { 
	grid-area: a-hero-image;
}

.a-sec-image { 
	grid-area: a-sec-image;
}

.a-sec-image-2 { 
	grid-area: a-sec-image-2; 
}

.a-sec-image-3 { 
	grid-area: a-sec-image-3; 
}

.a-sec-image-4 { 
	grid-area: a-sec-image-4; 
}

.a-sec-image-5 { 
	grid-area: a-sec-image-5; 
}

.a-casestudy {
	grid-area: a-casestudy;
}

.project-b {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: .25rem .25rem;
  grid-template-areas:
	"b-protitle b-protitle"
    "b-hero-image b-hero-image"
    "b-sec-image b-sec-image-2"
    "b-sec-image-3 b-sec-image-4";
  grid-auto-flow: row;
  grid-area: project-b;
}

.b-protitle {
	margin-top: 60px;
	grid-area: b-protitle;
}

.b-hero-image { 
	grid-area: b-hero-image;
}

.b-sec-image { 
	grid-area: b-sec-image;
}

.b-sec-image-2 { 
	grid-area: b-sec-image-2; 
}

.b-sec-image-3 { 
	grid-area: b-sec-image-3; 
}

.b-sec-image-4 { 
	grid-area: b-sec-image-4; 
}

.b-sec-image-5 { 
	grid-area: b-sec-image-5; 
}
.b-casestudy {
	grid-area: b-casestudy;
}

.project-c {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: .25rem .25rem;
  grid-template-areas:
	"c-protitle c-protitle"
    "c-hero-image c-hero-image"
    "c-sec-image c-sec-image-2"
    "c-sec-image-3 c-sec-image-4"
	"c-sec-image-5 none";
  grid-auto-flow: row;
  grid-area: project-c;
}

.c-protitle {
	margin-top: 60px;
	grid-area: c-protitle;
}

.c-hero-image { 
	grid-area: c-hero-image;
}

.c-sec-image { 
	grid-area: c-sec-image;
}

.c-sec-image-2 { 
	grid-area: c-sec-image-2; 
}

.c-sec-image-3 { 
	grid-area: c-sec-image-3; 
}

.c-sec-image-4 { 
	grid-area: c-sec-image-4; 
}

.c-sec-image-5 { 
	grid-area: c-sec-image-5; 
}
.c-casestudy {
	grid-area: c-casestudy;
}

.project-d {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: .25rem .25rem;
  grid-template-areas:
	"d-protitle d-protitle"
    "d-hero-image d-hero-image"
    "d-sec-image d-sec-image-5"
    "d-sec-image-3 d-sec-image-4"
	"d-sec-image-2 d-sec-image-2";
  grid-auto-flow: row;
  grid-area: project-d;
}

.d-protitle {
	margin-top: 60px;
	grid-area: d-protitle;
}

.d-hero-image { 
	grid-area: d-hero-image;
}

.d-sec-image { 
	grid-area: d-sec-image;
}

.d-sec-image-2 { 
	grid-area: d-sec-image-2; 
}

.d-sec-image-3 { 
	grid-area: d-sec-image-3; 
}

.d-sec-image-4 { 
	grid-area: d-sec-image-4; 
}

.d-sec-image-5 { 
	grid-area: d-sec-image-5; 
}
.d-casestudy {
	grid-area: d-casestudy;
}
.project-e {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-gap: .25rem .25rem;
  grid-template-areas:
	"e-protitle e-protitle"
    "e-hero-image e-hero-image"
    "e-sec-image e-sec-image-2"
    "e-sec-image-3 e-sec-image-4"
	"e-sec-image-5 none";
  grid-auto-flow: row;
  grid-area: project-e;
}

.e-protitle {
	margin-top: 60px;
	grid-area: e-protitle;
}

.e-hero-image { 
	grid-area: e-hero-image;
}

.e-sec-image { 
	grid-area: e-sec-image;
}

.e-sec-image-2 { 
	grid-area: e-sec-image-2; 
}

.e-sec-image-3 { 
	grid-area: e-sec-image-3; 
}

.e-sec-image-4 { 
	grid-area: e-sec-image-4; 
}

.e-sec-image-5 { 
	grid-area: e-sec-image-5; 
}
.e-casestudy {
	grid-area: e-casestudy;
}

.project-f {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-gap: .25rem .25rem;
  grid-template-areas:
	"f-protitle f-protitle"
    "f-hero-image f-hero-image"
    "f-sec-image f-sec-image-2"
    "f-sec-image-3 f-sec-image-4"
	"f-sec-image-5 none";
  grid-auto-flow: row;
  grid-area: project-f;
}

.f-protitle {
	margin-top: 60px;
	grid-area: f-protitle;
}

.f-hero-image { 
	grid-area: f-hero-image;
}

.f-sec-image { 
	grid-area: f-sec-image;
}

.f-sec-image-2 { 
	grid-area: f-sec-image-2; 
}

.f-sec-image-3 { 
	grid-area: f-sec-image-3; 
}

.f-sec-image-4 { 
	grid-area: f-sec-image-4; 
}

.f-sec-image-5 { 
	grid-area: f-sec-image-5; 
}
.f-casestudy {
	grid-area: f-casestudy;
}


.project-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-gap: .25rem .25rem;
  grid-template-areas:
	"g-protitle g-protitle"
    "g-hero-image g-hero-image"
    "g-sec-image g-sec-image-2";
  grid-auto-flow: row;
  grid-area: project-g;
}

.g-protitle {
	margin-top: 60px;
	grid-area: g-protitle;
}

.g-hero-image { 
	grid-area: g-hero-image;
}

.g-sec-image { 
	grid-area: g-sec-image;
}

.g-sec-image-2 { 
	grid-area: g-sec-image-2; 
}

.g-sec-image-3 { 
	grid-area: g-sec-image-3; 
}

.g-sec-image-4 { 
	grid-area: g-sec-image-4; 
}

.g-sec-image-5 { 
	grid-area: g-sec-image-5; 
}
.g-casestudy {
	grid-area: g-casestudy;
}

.project-h {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-gap: .25rem .25rem;
  grid-template-areas:
	"h-protitle h-protitle"
    "h-hero-image h-hero-image"
    "h-sec-image h-sec-image-2";
  grid-auto-flow: row;
  grid-area: project-h;
}

.h-protitle {
	margin-top: 60px;
	grid-area: h-protitle;
}

.h-hero-image { 
	grid-area: h-hero-image;
}

.h-sec-image { 
	grid-area: h-sec-image;
}

.h-sec-image-2 { 
	grid-area: h-sec-image-2; 
}

.h-sec-image-3 { 
	grid-area: h-sec-image-3; 
}

.h-sec-image-4 { 
	grid-area: h-sec-image-4; 
}

.h-sec-image-5 { 
	grid-area: h-sec-image-5; 
}
.h-casestudy {
	grid-area: h-casestudy;
}

/*GRID ABOUT*/
.grid-container-about {
	display: grid;
  	grid-template-columns: 1fr;
  	grid-template-rows: auto;
  	grid-gap: 1rem 1rem;
  	grid-template-areas:
	    "navbar"
    	"about-masthead"
		"about-process"
		"about-balance"
		"about-CTA"
		"footer-about"
		"footer";
}

.grid-container-about h1 {font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 29.12px; text-transform: uppercase; }
.grid-container-about h2 {font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 29.12px; text-transform: uppercase; }
.grid-container-about h3 {font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 29.12px; text-transform: uppercase; }

/*Grid About Sections*/
.about-masthead {
	display: grid;
	grid-template-columns:1fr;
	gird-template-rows: auto;
	grid-gap: 1rem 1rem;
	grid-template-areas:
		"about-headshot"
		"about-intro"
		"about-bio";
	grid-area:about-masthead;
}

.about-headshot {grid-area: about-headshot;}
.about-intro {grid-area: about-intro;}
.about-bio {
	display: grid;
	grid-template-columns:1fr 2fr;
	gird-template-rows: auto;
	grid-gap: 1rem 1rem;
	grid-template-areas:
		"none about-bio-content";
	grid-area: about-bio;}
.about-bio-content{grid-area:about-bio-content;}

.about-process{
	display: grid;
	grid-template-columns:1fr 2fr;
	gird-template-rows: auto;
	grid-gap: 1rem 1rem;
	grid-template-areas:
		"none process-title"
		"none process-content-1"
		"none process-content-2";
	grid-area: about-process;
}
.process-title {grid-area:process-title;}
.process-content-1 {grid-area:process-content-1;}
.process-content-2{ grid-area:process-content-2;}

.about-balance {
	display: grid;
	grid-template-columns:1fr 2fr;
	gird-template-rows: auto;
	grid-gap: 1rem 1rem;
	grid-template-areas:
		"none balance-content";
	grid-area: about-balance;
}

.balance-content {
	display: grid;
	grid-template-columns:1fr;
	gird-template-rows: auto;
	grid-gap: 1rem 1rem;
	grid-template-areas:
		"balance-title" 
		"balance-breakdown";
	grid-area:balance-content;}

.balance-title {grid-area:balance-title;}
.balance-breakdown {grid-area:balance-breakdown;}

.about-CTA {
	display: grid;
	grid-template-columns:1fr 4fr;
	gird-template-rows: auto;
	grid-gap: 1rem 1rem;
	grid-template-areas:
		"none cta-content-1" 
		"cta-content-2 cta-content-2";
	grid-area: about-CTA;}

.cta-content-1 {grid-area:cta-content-1;}

.cta-content-2 {
	display: grid;
	grid-template-columns:1fr 2fr;
	gird-template-rows: auto;
	grid-gap: 1rem 1rem;
	grid-template-areas:
		"none cta-2-content";
	grid-area:cta-content-2;
}
.cta-2-content {
	grid-area:cta-2-content;
}

/*GRID SELL SHEET - generic*/
.grid-container-sellsheet {
	display: grid;
  	grid-template-columns: 1fr;
  	grid-template-rows: auto;
  	grid-gap: 1rem 1rem;
  	grid-template-areas:
	    "navbar"
    	"about-masthead"
		"about-process"
		"about-balance"
		"about-client"
		"about-experience"
		"about-CTA"
		"footer";
  	grid-area: grid-container-sellsheet;
}

.grid-container-sellsheet h1 {font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 29.12px; text-transform: uppercase; }
.grid-container-sellsheet h2 {font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 29.12px; text-transform: uppercase; }
.grid-container-sellsheet h3 {font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 29.12px; text-transform: uppercase; }

/*Grid Sell Sheet Sections*/
.about-client{
	display: grid;
  	grid-template-columns: 2fr 1fr 1fr 1fr;
  	grid-template-rows: auto;
  	grid-gap: 1rem 1rem;
  	grid-template-areas:
	    "about-client-intro about-client-1 about-client-2 about-client-3"
		"about-client-intro about-client-4 about-client-5 about-client-6"
		"about-client-intro about-client-7 about-client-8 about-client-9"
		"about-client-intro about-client-10 about-client-11 about-client-12";
	grid-area: about-client;}

.about-client-intro {grid-area: about-client-intro;}
.about-client-1 {grid-area: about-client-1;}
.about-client-2 {grid-area: about-client-2;}
.about-client-3 {grid-area: about-client-3;}
.about-client-4 {grid-area: about-client-4;}
.about-client-5 {grid-area: about-client-5;}
.about-client-6 {grid-area: about-client-6;}
.about-client-7 {grid-area: about-client-7;}
.about-client-8 {grid-area: about-client-8;}
.about-client-9 {grid-area: about-client-9;}
.about-client-10 {grid-area: about-client-10;}
.about-client-11 {grid-area: about-client-11;}
.about-client-12 {grid-area: about-client-12;}

.about-experience{
	display: grid;
  	grid-template-columns: 2fr 1fr 1fr 1fr;
  	grid-template-rows: auto;
  	grid-gap: 1rem 1rem;
  	grid-template-areas:
		"none about-experience-intro about-experience-intro about-experience-intro"
		"none about-xp-1 about-xp-2 about-xp-3"
		"none about-xp-4 about-xp-5 about-xp-6"
		"none about-xp-7 about-xp-8 about-xp-9";
	grid-area: about-experience:}

.about-experience-intro {grid-area:about-experience-intro;}
.about-xp-1 {grid-area: about-xp-1;}
.about-xp-2 {grid-area: about-xp-2;}
.about-xp-3 {grid-area: about-xp-3;}
.about-xp-4 {grid-area: about-xp-4;}
.about-xp-5 {grid-area: about-xp-5;}
.about-xp-6 {grid-area: about-xp-6;}
.about-xp-7 {grid-area: about-xp-7;}
.about-xp-8 {grid-area: about-xp-8;}
.about-xp-9 {grid-area: about-xp-9;}

/*GRID SINGLE*/
.grid-container-single-1 {
	display: grid;
  	grid-template-columns:1fr;
  	grid-template-rows: auto;
  	grid-gap: 1rem 1rem;
  	grid-template-areas:
		"single-hero"
		"single-welcome"
		"single-content"
		"footer-about"
		"footer";
	grid-area: grid-container-single-1:}

}
/*Grid Single Sections*/

/*UNIVERSAL*/

/*navbar sections*/
.navbar {
	grid-area: navbar;
}
.navbarinner {
	display: grid;
  	grid-template-columns: 1fr 1fr;
  	grid-template-rows: auto;
  	grid-gap: 1rem 1rem;
  	grid-template-areas:
    	"brand information";
}
.brand {width: 25%; margin-bottom: 10px; grid-area: brand;}

.information {
	color:#000000;
	float: right;
	margin-top: 10px;
	grid-area: information;
}

.navbar-custom {
	position: relative;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.navbar-toggler-custom {
	font-size: 1.25rem;
	line-height: 1;
	float: right;
}


/*Nav bar text*/
.name { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; }
.title { font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 14px; text-transform: uppercase; }
.menuitem { font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 14px; text-transform: uppercase; }
.activepage {font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 14px; text-transform: uppercase; text-decoration: underline;}


.btn-custom {
	font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 14px; color: #444444;
	background-color: white;
	border:2px solid #cb1518;
	color: #cb1518;
}

.btn-custom:hover {
	color: #fff;
	background-color: #E25658;
	border-color: #cb1518;
	align-items: flex-end;
}

.btn-custom:active {
	color: #fff;
	background-color: #56090A; 
	border-color: #391001;
}

.btn-custom-red {
	font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 14px;
	border:2px solid #fff;
	color: #ffffff;
}

.btn-custom-red:hover {
	color: #fff;
	background-color: #E25658;
	border-color: #fff;
	align-items: flex-end;
}

.btn-custom-orange {
	font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 14px;
	border:2px solid #000000;
	color: #000000;
}

.btn-custom-orange:hover {
	
	color: #000000;
	background-color: #924F03;
	border-color: #000;
	align-items: flex-end;
}
.btn-custom-pink {
	font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 14px;
	border:2px solid #000000;
	color: #000000;
}

.btn-custom-pink:hover {
	color: #ffffff;
	background-color: #4A2524;
	border-color: #000;
	align-items: flex-end;
}




@media (min-width: 600px) {}


@media (min-width: 768px) {
	
.grid-container-about h1 {font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 47.12px; text-transform: uppercase; }
.grid-container-about h2 {font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 29.12px; text-transform: uppercase; }
.grid-container-about h3 {font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 29.12px; text-transform: uppercase; }
	
.project-a {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"a-protitle a-protitle"
    "a-hero-image a-sec-image"
    "a-sec-image-2 a-sec-image-3"
    "a-sec-image-4 a-sec-image-5"
	"none a-casestudy";
  grid-area: project-a;
}
	
.project-b {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"b-protitle b-protitle"
    "b-hero-image b-sec-image"
    "b-sec-image-2 b-sec-image-3"
    "b-sec-image-4 none";
  grid-area: project-b;
}

.project-c {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"c-protitle c-protitle"
    "c-hero-image c-sec-image"
    "c-sec-image-2 c-sec-image-3"
    "c-sec-image-4 c-sec-image-5"
	"none c-casestudy";
  grid-area: project-c;
}

.project-d {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"d-protitle d-protitle"
    "d-hero-image d-sec-image"
    "d-sec-image-2 d-sec-image-3"
    "d-sec-image-4 d-sec-image-5"
	"none d-casestudy";;
  grid-area: project-d;
}
	
.project-e {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"e-protitle e-protitle"
    "e-hero-image e-sec-image"
    "e-sec-image-2 e-sec-image-3"
    "e-sec-image-4 e-sec-image-5"
	"none e-casestudy";
  grid-area: project-e;
}
	
.project-f {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"f-protitle f-protitle"
    "f-hero-image f-sec-image"
    "f-sec-image-2 f-sec-image-3"
    "f-sec-image-4 f-sec-image-5"
	"none f-casestudy";
  grid-area: project-f;
}
	
.project-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"g-protitle g-protitle g-protitle"
    "g-hero-image g-sec-image g-sec-image-2"
	"none none g-casestudy";
  grid-area: project-g;
}
	
.project-h {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"h-protitle h-protitle h-protitle"
    "h-hero-image h-sec-image h-sec-image-2"
	"none none h-casestudy";
  grid-area: project-h;
}
	
}
@media (min-width: 992px) {	
.brand-img {display: initial;}
.brand-img-mob {display: none; }

.nav-lrg {display: initial;}
.nav-mob {display: none; }
	
}

@media (min-width: 1200px) {

p { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 18.00px;}
	
h1 {font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 76.24px; color: #cb1518; text-transform: uppercase; }
h2 {font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 47.12px; color: #444444; text-transform: uppercase; }
h3 {font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 29.12px; color: #444444; text-transform: uppercase; }

.brand {width: 25%; margin-bottom: 10px; grid-area: brand;}

	
/*HOME PAGE*/	
.mastead {
		width: 50%;
		grid-area: masthead;
}
.project-a {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"a-protitle a-protitle a-protitle"
    "a-hero-image a-hero-image a-sec-image"
    "a-hero-image a-hero-image a-sec-image-2"
    "a-sec-image-3 a-sec-image-4 a-sec-image-5"
	"none none a-casestudy";
  grid-area: project-a;
}
	
.project-b {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"b-protitle b-protitle b-protitle"
    "b-hero-image b-hero-image b-sec-image"
    "b-hero-image b-hero-image b-sec-image-2"
    "b-sec-image-3 b-sec-image-4 b-sec-image-5"
	"none none b-casestudy";
  grid-area: project-b;
}

.project-c {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"c-protitle c-protitle c-protitle"
    "c-hero-image c-hero-image c-sec-image"
    "c-hero-image c-hero-image c-sec-image-2"
    "c-sec-image-3 c-sec-image-4 c-sec-image-5"
	"none none c-casestudy";
  grid-area: project-c;
}

.project-d {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"d-protitle d-protitle d-protitle"
    "d-hero-image d-hero-image d-sec-image"
    "d-hero-image d-hero-image d-sec-image-2"
    "d-sec-image-3 d-sec-image-4 d-sec-image-5"
	"none none d-casestudy";
  grid-area: project-d;
}
	
.project-e {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"e-protitle e-protitle e-protitle"
    "e-hero-image e-hero-image e-sec-image"
    "e-hero-image e-hero-image e-sec-image-2"
    "e-sec-image-3 e-sec-image-4 e-sec-image-5"
	"none none e-casestudy";
  grid-area: project-e;
}
	
.project-f {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"f-protitle f-protitle f-protitle"
    "f-hero-image f-hero-image f-sec-image"
    "f-hero-image f-hero-image f-sec-image-2"
    "f-sec-image-3 f-sec-image-4 f-sec-image-5"
	"none none f-casestudy";
  grid-area: project-f;
}
	
.project-g {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"g-protitle g-protitle g-protitle"
    "g-hero-image g-hero-image g-sec-image"
    "g-hero-image g-hero-image g-sec-image-2"
	"none none g-casestudy";
  grid-area: project-f;
}
	
.project-h {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-gap: 0.25rem 0.25rem;
  grid-template-areas:
	"h-protitle h-protitle h-protitle"
    "h-hero-image h-hero-image h-sec-image"
    "f-hero-image h-hero-image h-sec-image-2"
	"none none h-casestudy";
  grid-area: project-h;
}
	
.footer-about {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 1.5rem 1.5rem;
  grid-template-areas:
    "none bio pastjobs skills";
  grid-area: footer-about;
}
	
	
/*ABOUT PAGE*/	
.about-masthead {
	display: grid;
	grid-template-columns:2fr 1fr;
	gird-template-rows: auto;
	grid-gap: 1rem 1rem;
	grid-template-areas:
		"about-headshot about-intro"
		"about-bio about-bio";
	grid-area:about-masthead;
}

.about-process {
	display: grid;
	grid-template-columns:1fr 2fr;
	gird-template-rows: auto;
	grid-gap: 1rem 1rem;
	grid-template-areas:
		"process-title process-content-1"
		"none  process-content-2";
	grid-area: about-process;
}
.about-balance {
	display: grid;
	grid-template-columns:1fr 2fr;
	gird-template-rows: auto;
	grid-gap: 1rem 1rem;
	grid-template-areas:
		"balance-content balance-content";
	grid-area: about-balance;
}
.balance-content {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gird-template-rows: auto;
	grid-gap: 1rem 1rem;
	grid-template-areas:
		"balance-title balance-breakdown";
	grid-area:balance-content;}	
	
	
}