/* CSS for website: AndreOkolowitz */



/************* GLOBAL ********************/

:root {
	--black: #0D0A0B;
	--gray: #454955;
	--lightgray: #a4a4a9;
	--white: #F3EFF5;
	--green: #72B01D;
	--darkgreen: #3F7D20;
	--blue: #1789FC;
	--darkblue: #296EB4;
	}
	
html, body {
	height: 100%;
	width: 100%;
	background-color: var(--white);
	color: var(--lightgray);
	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	margin: 0em;
	padding: 0em;
	overflow-x: hidden; /* Prevents horizonal scroll bar from showing */
	-webkit-overflow-scrolling: touch;     /* Makes website scroll faster on mobile devices */
	}

a {
	color: var(--darkblue);
	text-decoration: none;
	}

	a:hover {
		color: var(--lightgray);
		}

ul {
	list-style-position: outside;
	padding-left: 1em;
	}
	
button, .button {
	margin: 1em auto;
	background-color: var(--blue);
	color: var(--white);
	height: 2.5em;
	font-size: 18px;
	border: none;
	border-radius: 5px;
	display: inline;
	width: auto;
	padding: 12px;
	-webkit-appearance: none;
	transition: 0.4s;
	}

	button:hover, .button:hover {
		background-color: var(--darkblue);
		}

.button-outline {
	margin: 1em auto;
	border: 1px solid var(--darkblue);
	background-color: transparent;
	color: var(--darkblue);
	height: 2.5em;
	font-size: 18px;
	border-radius: 5px;
	display: inline;
	width: auto;
	padding: 12px;
	-webkit-appearance: none;
	transition: 0.4s;
	}
	
	.button-outline:hover {
		color: var(--white);
		background-color: var(--darkblue);
		}
		
.mini-button {
	margin: 1em auto;
	background-color: var(--blue);
	color: white;
	height: 2em;
	font-size: 10px;
	border: none;
	border-radius: 3px;
	display: inline;
	width: auto;
	padding: 0px 10px 0px 10px;
	-webkit-appearance: none;
	transition: 0.4s;
	}

	.mini-button:hover {
		background-color: var(--darkblue);
		}

blockquote {
	font-family: Georgia, serif;
	font-size: 28px;
	font-style: italic;
	margin: 0.25em 0;
	padding: 0.35em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
	}

	blockquote:before {
		display: block;
		padding-left: 10px;
		content: "\201C";
		font-size: 80px;
		position: absolute;
		left: -20px;
		top: -20px;
		color: #7a7a7a;
		}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
	}
 
	blockquote cite:before {
		content: "\2014 \2009";
		}

figure {
    display: inline-block;
    margin: 20px; /* adjust as needed */
	}

	figure img {
	    vertical-align: top;
		}
	
	figure figcaption {
	    text-align: center;
		}

.hero {
	padding: 0px;
	max-width: 100%;
	height: auto;
	}


.page-title {
	color: var(--darkblue);
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-size: 3em;
	text-transform: uppercase;
	}
	
.page-subtitle {
	color: var(--gray);
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 1.25em;
	text-transform: uppercase;
	margin-top: -40px;
	padding-bottom: 50px;
	}
		

.selfy {
	position: relative;
	width: 200px;
	height: 200px;
	overflow: hidden;
	border-radius: 50%;
	border: 5px solid var(--lightgray);
	box-shadow: 2px 3px 2px rgba(0.3, 0.3, 0.3, 0.5);
	display: inline;
	float: right;
	}

	.selfy img {
		width: 100%;
		height: auto;
		margin-top: -1.3em;
		}

.spot {
	width: 12px;
	height: 12px;
}

.center {
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
}

.recaptcha-wrapper {
}


.g-recaptcha {
    transform:scale(0.85);
    transform-origin:0 0;
}

/**************** HEADER ********************/
header {
	background-color: var(--black);
	padding: 0.5em;
	position: fixed;
	width: 100%;
	z-index: 100;
	}

.logo {
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	display: block;
	float: left;
	margin: 0.5em 0em 0em 0.7em;
	font-size: 1.5em;
	line-height: 1em;
	font-weight: 300;
	color: var(--lightgray);
	}

.logo span {
	color: var(--white);
	font-weight: 400;
	}

.logo-text {
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 24px;
	color: gray;
	line-height: 70px;
	margin: 0px;
	text-decoration: none;
	}

nav {
	float: right;
	margin: 0em 1em 0em 0em;
	}

nav a:hover {
	color: white;
	}



/* Responsive Menu BEGIN */

.current a {
	color: white !important;
	font-weight: 700;
}

#menu ul {
  margin: 0;
  padding: 0;
}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}

#menu li, 
#toggle-menu {
  border-style: solid;
  border-color: rgba(0, 0, 0, .05);
}

#menu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#menu li, 
#toggle-menu, 
#menu a {
  position: relative;
  display: block;
  color: var(--lightgray);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}

#menu, 
#toggle-menu {
  background-color: var(--black);
}

#toggle-menu, 
#menu a {
  padding: 1em 1.5em;
}

#menu a {
  transition: all .125s ease-in-out;
  -webkit-transition: all .125s ease-in-out;
}

#menu a:hover {
  color: white;
}

#menu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#toggle-menu:hover {
	text-rendering: optimizeLegibility;
	color: white;
}


@media only screen and (max-width: 64em) and (min-width: 64.01em) {
  #menu li {
    width: 33.333%;
  }
}

@media only screen and (min-width: 64em) {
  #menu .main-menu {
    display: block;
  }

  #toggle-menu {
    display: none;
  }

  #menu li {
    float: left;
    border-width: 0 1px 0 0;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
}
/* Responsive Menu END */



/**************** HOMEPAGE ******************/

#grid-container-homepage {
	width: 100%;
	display: grid;
	grid-template-areas: 
    'hero-home hero-home hero-home hero-home hero-home hero-home'
    'intro intro intro intro companies companies' 
    'expertise expertise expertise expertise expertise expertise'
    'expertise1 expertise1a expertise2 expertise2a expertise3 expertise3a'
    'expertise4 expertise4a expertise5 expertise5a expertise6 expertise6a'
    'expertise7 expertise7a expertise8 expertise8a expertise9 expertise9a'
    'subscribe subscribe subscribe subscribe subscribe subscribe'
    'news news news news premiums premiums'
    'contact contact contact headshot headshot headshot'
    'footer footer footer footer footer footer';
	grid-column-gap: 0px;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: minmax(auto, auto);
	grid-template-columns: minmax(auto, auto);
	grid-row-gap: 0px;
	margin-top: 4.4em;
	}

#hero-home, #intro, #companies, #expertise,
#expertise1, #expertise1a,
#expertise2, #expertise2a,
#expertise3, #expertise3a,
#expertise4, #expertise4a,
#expertise5, #expertise5a,
#expertise6, #expertise6a,
#expertise7, #expertise7a,
#expertise8, #expertise8a,
#expertise9, #expertise9a,
#subscribe, #posts, #premiums, #contact, #headshot, footer  {
	padding: 40px;
	}

#hero-home {
	grid-area: hero-home;
	background-image: url('../images/banners/hero.jpg');
	background-attachment: fixed; /* Added to make parallax */
	background-repeat: no-repeat; 
	background-size: cover;
	-moz-background-size: cover;
	padding: 0px;
	height: 900px;
	}
	

	#hero-home-text p, #hero-home-text h1, #hero-home-text a, #hero-home-text .title {
		padding-left: 25px;
	}
	
	#hero-home-text {
		display: inline;
		color: #53627C;
		font-size: 2em;
		font-family: 'Open Sans', sans-serif;
		line-height: 1.5em;
		}
		
	#hero-home-text h1 {
		font-family: 'Montserrat', sans-serif; 
		font-weight: 900; 
		font-size: 2em; 
		color: #53627C; 
		margin-top: -0.5em;
		}
		
	#hero-home-text .title {
		margin-top: -35px;
	}
	
	#hero-home-text .statement {
		position: relative;
		margin-top: 3em;
		left: 20%;
		width: 15.5em;
		font-size: 26px; 
		line-height: 40px; 
		color:#53627C;
		border-left: 3px solid #53627C;
		padding: 0px 10px 0px 10px;
	}
	
	#hero-home-text button, #hero-home-text img {
		position: relative;
		left: 20%;
	}
		

#intro {
	grid-area: intro;
	background-color: var(--gray);
	width: 100%;
	justify-self: center;
	}
	
	#intro div {  /* Used to center column within assigned grid section */
		max-width: 40em;
		margin: 0 auto;
		padding: 40px;
		}

#companies {
	grid-area: companies;
	font-size: smaller;
	background-color: var(--gray);
	justify-self: center;
	width: 100%;
	}
	
	#companies div {  /* Used to center column within assigned grid section */
		max-width: 20em;
		margin: 0 auto;
		padding: 40px;
		}
	

#expertise {
	grid-area: expertise;
	text-align: center;
	justify-self: center;
	}
	
section[id^="expertise"] {
    padding: 10px; 
    max-width: 300px;
    font-size: smaller;
    color: var(--gray);
    justify-self: center;
	}
	
#expertise1 {
	grid-area: expertise1;
	text-align: center;
	}

#expertise1a {
	grid-area: expertise1a;	
	}

#expertise2 {
	grid-area: expertise2;
	text-align: center;
	}

#expertise2a {
	grid-area: expertise2a;	
	}

#expertise3 {
	grid-area: expertise3;
	text-align: center;	
	}

#expertise3a {
	grid-area: expertise3a;	
	}

#expertise4 {
	grid-area: expertise4;
	text-align: center;
	}

#expertise4a {
	grid-area: expertise4a;	
	}

#expertise5 {
	grid-area: expertise5;
	text-align: center;
	}

#expertise5a {
	grid-area: expertise5a;	
	}

#expertise6 {
	grid-area: expertise6;
	text-align: center;
	}

#expertise6a {
	grid-area: expertise6a;	
	}

#expertise7 {
	grid-area: expertise7;
	text-align: center;
	}

#expertise7a {
	grid-area: expertise7a;	
	}

#expertise8 {
	grid-area: expertise8;
	text-align: center;
	}

#expertise8a {
	grid-area: expertise8a;	
	}

#expertise9 {
	grid-area: expertise9;
	text-align: center;
	}

#expertise9a {
	grid-area: expertise9a;	
	}

#subscribe {
	grid-area: subscribe;
	background-color: var(--darkblue);
	color: var(--white);
	padding: 50px;
	text-align: center;
	}
	
	#subscribe input {
		width: 20em;
		height: 25px;
		margin: 10px;
	}

#news {
	grid-area: news;
	justify-self: center;
	align-self: center;
	color: var(--gray);
	}
	
	#news div {  /* Used to center column within assigned grid section */
		max-width: 700px;
		margin: 0 auto;
		padding: 40px;
		}
		
	#news img {
		max-width: 700px;
		width: 100%; /* To make image responsive */
		height: auto; /* To make image responsive */
		}

#premiums {
	grid-area: premiums;
	}
	
	#premiums div {  /* Used to center column within assigned grid section */
		max-width: 250px;
		margin: 0 auto;
		}

#contact {
	grid-area: contact;
	background-color: var(--gray);
	width: 100%;
	justify-self: normal;
	}
	
	#contact div {  /* Used to center column within assigned grid section */
		max-width: 15em;
		margin: 0 auto;
		border-left: 1px solid var(--gray);
		}
	
#headshot {
	grid-area: headshot;
	background-color: var(--gray);
	width: 100%;
	justify-self: normal;
	}
	
	#headshot div {  /* Used to center column within assigned grid section */
		max-width: 200px;
		margin: 0 auto;
		}

	#headshot img {
		width: 200px;
		height: 200px;
		border-radius: 50%;
		border: 5px solid #494949;
		box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
		}
		
/* Responsive layout */
@media (max-width: 1200px) {
	#grid-container-homepage  {
	grid-template-areas: 
		'hero-home hero-home hero-home hero-home hero-home hero-home'
		'intro intro intro intro intro intro' 
		'companies companies companies companies companies companies' 
		'expertise expertise expertise expertise expertise expertise'
		'expertise1 expertise1a expertise1a expertise2 expertise2a expertise2a'
		'expertise3 expertise3a expertise3a expertise4 expertise4a expertise4a'
		'expertise5 expertise5a expertise5a expertise6 expertise6a expertise6a'
		'expertise7 expertise7a expertise7a expertise8 expertise8a expertise8a'
		'expertise9 expertise9a expertise9a expertise9a expertise9a expertise9a'
		'subscribe subscribe subscribe subscribe subscribe subscribe'
		'news news news news news news'
		'premiums premiums premiums premiums premiums premiums'
		'contact contact contact headshot headshot headshot'
		'footer footer footer footer footer footer';
		}
  	}


@media (max-width: 800px) {
	#grid-container-homepage  {
	grid-template-areas: 
		'hero-home hero-home hero-home hero-home hero-home hero-home'
		'intro intro intro intro intro intro' 
		'companies companies companies companies companies companies' 
		'expertise expertise expertise expertise expertise expertise'
		'expertise1 expertise1 expertise1 expertise1 expertise1 expertise1'
		'expertise1a expertise1a expertise1a expertise1a expertise1a expertise1a'
		'expertise2 expertise2 expertise2 expertise2 expertise2 expertise2'
		'expertise2a expertise2a expertise2a expertise2a expertise2a expertise2a'
		'expertise3 expertise3 expertise3 expertise3 expertise3 expertise3'
		'expertise3a expertise3a expertise3a expertise3a expertise3a expertise3a'
		'expertise4 expertise4 expertise4 expertise4 expertise4 expertise4'
		'expertise4a expertise4a expertise4a expertise4a expertise4a expertise4a'
		'expertise5 expertise5 expertise5 expertise5 expertise5 expertise5'
		'expertise5a expertise5a expertise5a expertise5a expertise5a expertise5a'
		'expertise6 expertise6 expertise6 expertise6 expertise6 expertise6'
		'expertise6a expertise6a expertise6a expertise6a expertise6a expertise6a'
		'expertise7 expertise7 expertise7 expertise7 expertise7 expertise7'
		'expertise7a expertise7a expertise7a expertise7a expertise7a expertise7a'
		'expertise8 expertise8 expertise8 expertise8 expertise8 expertise8'
		'expertise8a expertise8a expertise8a expertise8a expertise8a expertise8a'
		'expertise9 expertise9 expertise9 expertise9 expertise9 expertise9'
		'expertise9a expertise9a expertise9a expertise9a expertise9a expertise9a'
		'subscribe subscribe subscribe subscribe subscribe subscribe'
		'news news news news news news'
		'premiums premiums premiums premiums premiums premiums'
		'headshot headshot headshot headshot headshot headshot'
		'contact contact contact contact contact contact'
		'footer footer footer footer footer footer';
		}
  
	.logo {
		margin: 1em 0em 0em 0.7em;
		font-size: 1.1em;
		}
	
	nav {
		float: right;
		margin: 0em 0em 0em 0em;
		}
		
	#hero-home-text {
		font-size: 2em;
		}
		
	#hero-home-text h1 {
		font-size: larger; 
		}
		
	#hero-home-text .title {
		margin-top: -15px;
		}
	
	#hero-home-text .statement {
		left: 20%;
		font-size: large; 
		}
	    
	section[id^="expertise"] h3 {
		text-align: center;
		}
	#mc_embed_signup {
		width: 15em;
		}
	
	#hero-home {
		background-attachment: fixed; /* Turning off parallax since some phones have difficult time with it */
		}	
	}


/**************** ABOUT ******************/

#grid-container-about {
	width: 100%;
	display: grid;
	grid-template-areas: 
    'hero-about hero-about hero-about hero-about hero-about hero-about'
    'title-about title-about title-about title-about title-about title-about' 
    'facts facts story story story story'
    'methodology methodology methodology methodology methodology methodology'
    'phase1 phase2 phase3 phase4 phase5 phase6'
    'cta cta cta cta cta cta'
    'footer footer footer footer footer footer';
	grid-column-gap: 0px;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: minmax(auto, auto);
	grid-template-columns: minmax(auto, auto);
	grid-row-gap: 0px;
	margin-top: 4.4em;
	}

#title-about, #facts, #story {
	padding: 40px;
	}

#hero-about {
	grid-area: hero-about;
	justify-self: center;
	}

#title-about {
	grid-area: title-about;
	text-align: center;
	justify-self: center;
	}

#facts {
	grid-area: facts;
	max-width: 200px;
	font-size: 15px;
	padding-right: 100px;
	color: var(--gray);
	justify-self: center;
	}
	
	#facts p {
		margin-top: -10px;
		}
	
	#facts table {
		margin-left: 1em;
		}
		
	#facts div {  /* Used to center column within assigned grid section */
		max-width: 200px;
		margin: 0 auto;
		}
		
#story {
	grid-area: story;	
	max-width: 500px;
	padding-right: 50px;
	padding-bottom: 5em;
	justify-self: start;
	color: var(--gray);
	}
	
	#story div {  /* Used to center column within assigned grid section */
		max-width: 500px;
		margin: 0 auto;
		}
		
	#story li {
		margin-left: 0.25em;
		}
		
	#story h2 {
		color: var(--darkblue);
	}
		
#methodology {
	grid-area: methodology;
	justify-self: center;
	text-align: center;
	background-color: var(--black);
	width: 100%;
	}
	
section[id^="phase"] {
    padding: 40px; 
    font-size: smaller;
    background-color: var(--gray);
    justify-self: center;
    width: 100%;
	}
		
	section[id^="phase"] div {
    	max-width: 250px;
		margin: 0 auto;
		padding: 20px 40px 20px 40px;
		}
		
	section[id^="phase"] ul li {
		padding: 5px 0px;
		}
		
	section[id^="phase"] h4 {
		text-align: center;
		}
		
.circle {
   	width: 10px;
   	height: 20px;
   	color: white;
    background-color: var(--green);
    border-radius: 50%;
    font-size: 2em;
    padding: 40px;    
	}
	
	.circle p {
		margin-top: -0.3em;
		margin-right: auto;
		margin-left: -0.1em;
		text-align: center;
	}
	
#phase1 {
	grid-area: phase1;
	justify-self: center;
	}
	
	#phase1 div {  /* Used to center column within assigned grid section */
		}
	
#phase2 {
	grid-area: phase2;
	justify-self: center;
	}
	
	phase2 div {  /* Used to center column within assigned grid section */
		}
	
#phase3 {
	grid-area: phase3;
	justify-self: center;
	}
	
	phase3 div {  /* Used to center column within assigned grid section */
		}
	
#phase4 {
	grid-area: phase4;
	justify-self: center;
	}
	
	phase4 div {  /* Used to center column within assigned grid section */
		}
	
#phase5 {
	grid-area: phase5;
	justify-self: center;
	}
	
	phase5 div {  /* Used to center column within assigned grid section */
		}
	
#phase6 {
	grid-area: phase6;
	justify-self: center;
	}
	
	phase6 div {  /* Used to center column within assigned grid section */
		}
		
#cta {
	grid-area: cta;
	justify-self: center;
	text-align: center;
	background-color: var(--gray);
	width: 100%;
	}
	


@media (max-width: 1500px) {
	#grid-container-about  {
	grid-template-areas: 
		'hero-about hero-about hero-about hero-about hero-about hero-about'
	    'title-about title-about title-about title-about title-about title-about' 
	    'facts facts story story story story'
	    'methodology methodology methodology methodology methodology methodology'
		'phase1 phase1 phase2 phase2 phase3 phase3'
		'phase4 phase4 phase5 phase5 phase6 phase6'
		'cta cta cta cta cta cta'
		'footer footer footer footer footer footer';
		}
	}


@media (max-width: 825px) {
	#grid-container-about  {
	grid-template-areas: 
		'hero-about hero-about hero-about hero-about hero-about hero-about'
		'title-about title-about title-about title-about title-about title-about' 
		'facts facts facts facts facts facts' 
		'story story story story story story'
		'methodology methodology methodology methodology methodology methodology'
		'phase1 phase1 phase1 phase1 phase1 phase1'
		'phase2 phase2 phase2 phase2 phase2 phase2'
		'phase3 phase3 phase3 phase3 phase3 phase3'
		'phase4 phase4 phase4 phase4 phase4 phase4'
		'phase5 phase5 phase5 phase5 phase5 phase5'
		'phase6 phase6 phase6 phase6 phase6 phase6'
		'cta cta cta cta cta cta'
		'footer footer footer footer footer footer';
		}
		
	}


/**************** SKILLS ******************/

#grid-container-skills {
	width: 100%;
	display: grid;
	grid-template-areas: 
    'hero-skills hero-skills'
    'title-skills title-skills' 
    'quote skills'
    'footer footer';
	grid-column-gap: 0px;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(auto, auto);
	grid-template-columns: minmax(auto, auto);
	grid-row-gap: 0px;
	margin-top: 4.4em;
	}

#title-skills, #quote, #skills {
  padding: 40px;
}

#hero-skills {
	grid-area: hero-skills;
	justify-self: center;
	}

#title-skills {
	grid-area: title-skills;
	text-align: center;
	justify-self: center;
	}
	
#quote {
	grid-area: quote;
	max-width: 250px;
	text-size: 5px;
	padding-right: 100px;
	justify-self: end;
	}

#skills {
	grid-area: skills;	
	max-width: 500px;
	padding-right: 50px;
	padding-bottom: 5em;
	justify-self: start;
	}

#skillsbox {
	max-width: 40em;
	height: auto;
	}

table { 
	empty-cells: show;
	}

table td {
	vertical-align: top;
	}

.table-category {
	color: var(--darkblue);
	}

progress {
	border-radius: 2px; 
	width: 12em;
	height: 10px;
	margin-left: 0em;
	background-color: transparent;
	padding-right: 5px;
	padding-left: 25px;
	}
 
progress::-webkit-progress-bar {
	background-color: transparent;
	border-radius: 2px;
	}
	
progress::-webkit-progress-value {
	border-radius: 2px; 
	background-color: var(--lightgray);
	}
	
progress::-moz-progress-bar {
	background-color: transparent;
	}

@media (max-width: 950px) {
	#grid-container-skills  {
	grid-template-areas: 
		'hero-skills hero-skills'
		'title-skills title-skills' 
		'quote quote' 
		'skills skills'
		'footer footer';
		}
	#skillsbox {
	    margin: 0em 0em 0em -1em;
		}
	table, th, td {
	  	border-bottom: 1px solid gray;
		}
	#skillbox {
		margin: 0em;
		}
	}


/**************** SUCCESSES ******************/

#grid-container-successes {
	width: 100%;
	display: grid;
	grid-template-areas: 
    'hero-successes hero-successes hero-successes'
    'title-successes title-successes title-successes' 
    'highlights highlights-wins highlights-wins'
    'mcgraw mcgraw-wins mcgraw-wins'
    'acco acco-wins acco-wins'
    'digitalriver digitalriver-wins digitalriver-wins'
    'wsi wsi-wins wsi-wins'
    'others others others'
    'footer footer footer';
	grid-column-gap: 0px;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(auto, auto);
	grid-template-columns: minmax(auto, auto);
	grid-row-gap: 0px;
	margin-top: 4.4em;
	}

#title-successes, 
#highlights, #highlights-wins, 
#mcgraw, #mcgraw-wins, 
#acco, #acco-wins, 
#digitalriver, #digitalriver-wins,
#wsi, #wsi-wins, #others {
	padding: 40px;
	}

#hero-successes {
	grid-area: hero-successes;
	justify-self: center;
	}

#title-successes {
	grid-area: title-successes;
	text-align: center;
	justify-self: center;
	}

#highlights {
	grid-area: highlights;
	font-size: 15px;
	justify-self: center;
	width: 100%;
	}
	
	#highlights ul li {
		padding-bottom: 15px;
		}
	
	#highlights div {  /* Used to center column within assigned grid section */
		max-width: 20em;
		margin: 0 auto;
		padding: 40px;
		}

	
#highlights-wins {
	grid-area: highlights-wins;	
	justify-self: center;
	width: 100%;
	}
	
	#highlights-wins ul li {
		padding-bottom: 15px;
		}
		
	#highlights-wins div {  /* Used to center column within assigned grid section */
		max-width: 40em;
		margin: 0 auto;
		padding: 40px;
		}


#mcgraw {
	grid-area: mcgraw;
	font-size: 15px;
	justify-self: center;
	width: 100%;
	}
	
	#mcgraw ul li {
		padding-bottom: 15px;
		}
	
	#mcgraw div {  /* Used to center column within assigned grid section */
		max-width: 20em;
		margin: 0 auto;
		padding: 40px;
		}
		
#mcgraw-wins {
	grid-area: mcgraw-wins;	
	justify-self: center;
	width: 100%;
	}
	
	#mcgraw-wins ul li {
		padding-bottom: 15px;
		}
		
	#mcgraw-wins div {  /* Used to center column within assigned grid section */
		max-width: 40em;
		margin: 0 auto;
		padding: 40px;
		}
	
#acco {
	grid-area: acco;
	font-size: 15px;
	justify-self: center;
	width: 100%;
	}
	
	#acco ul li {
		padding-bottom: 15px;
		}
		
	#acco div {  /* Used to center column within assigned grid section */
		max-width: 20em;
		margin: 0 auto;
		padding: 40px;
		}
		
#acco-wins {
	grid-area: acco-wins;	
	justify-self: center;
	width: 100%;
	}
	
	#acco-wins ul li {
		padding-bottom: 15px;
		}
		
	#acco-wins div {  /* Used to center column within assigned grid section */
		max-width: 40em;
		margin: 0 auto;
		padding: 40px;
		}
	
#digitalriver {
	grid-area: digitalriver;
	font-size: 15px;
	justify-self: center;
	width: 100%;
	}
	
	#digitalriver ul li {
		padding-bottom: 15px;
		}
		
	#digitalriver div {  /* Used to center column within assigned grid section */
		max-width: 20em;
		margin: 0 auto;
		padding: 40px;
		}
		
#digitalriver-wins {
	grid-area: digitalriver-wins;	
	justify-self: center;
	width: 100%;
	}
	
	#digitalriver-wins ul li {
		padding-bottom: 15px;
		}
		
	#digitalriver-wins div {  /* Used to center column within assigned grid section */
		max-width: 40em;
		margin: 0 auto;
		padding: 40px;
		}
	
#wsi {
	grid-area: wsi;
	font-size: 15px;
	justify-self: center;
	width: 100%;
	}
	
	#wsi ul li {
		padding-bottom: 15px;
		}
		
	#wsi div {  /* Used to center column within assigned grid section */
		max-width: 20em;
		margin: 0 auto;
		padding: 40px;
		}
		
#wsi-wins {
	grid-area: wsi-wins;	
	justify-self: center;
	width: 100%;
	}
	
	#wsi-wins ul li {
		padding-bottom: 15px;
		}
		
	#wsi-wins div {  /* Used to center column within assigned grid section */
		max-width: 40em;
		margin: 0 auto;
		padding: 40px;
		}

#others {
	grid-area: others;
	display: inline block;
	font-size: 15px;
	justify-self: center;
	text-align: center;
	padding: 40px 40px 40px 40px;
	width: 100%;
	}
	
.gray-theme {
	background-color: var(--gray);
	color: var(--white);
}

.white-theme {
	background-color: var(--white);
	color: var(--gray);
}

.company-logo {
	max-width: 100px;
	height: auto;
}


@media (max-width: 800px) {
	#grid-container-successes  {
	grid-template-areas: 
		'hero-successes hero-successes'
		'title-successes title-successes' 
		'highlights highlights'
		'highlights-wins highlights-wins'
		'mcgraw mcgraw'
		'mcgraw-wins mcgraw-wins'
		'acco acco'
		'acco-wins acco-wins'
		'digitalriver digitalriver'
		'digitalriver-wins digitalriver-wins'
		'wsi wsi'
		'wsi-wins wsi-wins'
		'others others'	
		'footer footer';
		}
	}


/**************** FAQ ******************/

#grid-container-faq {
	width: 100%;
	display: grid;
	grid-template-areas: 
	'hero-faq hero-faq'
	'title-faq title-faq' 
    'column1 column2'
    'footer footer';
	grid-column-gap: 0px;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(auto, auto);
	grid-template-columns: minmax(auto, auto);
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	margin-top: 4.4em;
	}
	
	#grid-container-faq blockquote {
		font-size: smaller;
		}

#title-faq, #column1, #column2 {
  padding: 40px;
}

#hero-faq {
	grid-area: hero-faq;
	justify-self: center;
	}

#title-faq {
	grid-area: title-faq;
	text-align: center;
	justify-self: center;
	}
	
#column1 {
	grid-area: column1;
	justify-self: center;
	}
	
	#column1 p, #column1 h3 {
		color: var(--gray);
		}
		
	#column1 div {  /* Used to center column within assigned grid section */
		max-width: 30em;
		margin: 0 auto;
		}
	
#column2 {
	grid-area: column2;
	justify-self: center;
	}
	
	#column2 p, #column2 h3 {
		color: var(--gray);
		}
		
	#column2 div {  /* Used to center column within assigned grid section */
		max-width: 30em;
		margin: 0 auto;
		}
		
	
@media (max-width: 800px) {
	#grid-container-faq  {
	grid-template-areas: 
		'hero-faq hero-faq'
		'title-faq title-faq' 
		'column1 column1'
		'column2 column2'
		'footer footer';
		}
		
	#column1 div, #column2 div { 
		padding: 0px 20px 0px 10px;
		}
		


	}


/**************** BLOG ******************/

#grid-container-blog {
	width: 100%;
	display: grid;
	grid-template-areas: 
    'hero-blog hero-blog hero-blog'
    'title-blog title-blog title-blog' 
    'articles articles sidebar'
    'footer footer footer';
	grid-column-gap: 0px;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: minmax(auto, auto);
	grid-template-columns: minmax(auto, auto);
	grid-row-gap: 0px;
	margin-top: 4.4em;
	}

#title-blog, 
#articles, #sidebar {
	padding: 40px;
	}

#hero-blog {
	grid-area: hero-blog;
	justify-self: center;
	}
	
#title-blog {
	grid-area: title-blog;
	justify-self: center;
	}

#articles {
	grid-area: articles;
	justify-self: center;
	color: var(--gray);
	}
	
	#articles div {  /* Used to center column within assigned grid section */
		max-width: 700px;
		margin: 0 auto;
		padding: 40px;
		}
		
	#articles img {
		max-width: 700px;
		width: 100%; /* To make image responsive */
		height: auto; /* To make image responsive */
	}

#sidebar {
	grid-area: sidebar;
	justify-self: center;
	color: var(--gray);
	}
	
	#sidebar div {  /* Used to center column within assigned grid section */
		max-width: 10em;
		margin: 0 auto;
		}
		
	#sidebar ul {
		list-style: none;
		margin-left: -1em;
		}

		
/*--------------- Search Bar ----------------*/
.search {
  width: 100%;
  position: relative
}

.searchTerm {
  float: left;
  width: 100%;
  border: 1px solid var(--lightgray);
  padding: 5px;
  height: 20px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: var(--gray);
}

.searchButton {
  position: absolute;  
  right: -43px;
  top: -20px;
  width: 31px;
  height: 31px;
  background: var(--lightgray);
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  text-align: center;
  line-height: 50%;
}

.searchButton img {
	position: absolute;
    top: 50%;
    left: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
    height: 13px;
    display: block;
}

/*Resize the wrap to see the search bar change!*/
.search-wrapper{
	width: 10em;
	position: relative;
}


/*-------------- Search Bar END ------------*/


.comment-form input {
	width: 400px;
	min-height: 20px;
	}

.comment-form textarea {
	width: 400px;
	border: 1px dotted gray;
	}

figure img {
	float: left;
	}

figure figcaption {
	text-align: left !important;
	margin-top: -2.7em;
	}
		
.comment-body {
	padding: 40px;
	}

@media (max-width: 800px) {
	#grid-container-blog  {
	grid-template-areas: 
		'hero-blog hero-blog hero-blog'
		'title-blog title-blog title-blog' 
		'articles articles articles'
		'sidebar sidebar sidebar'
		'footer footer footer';
		}
		
		.comment-form input, .comment-form textarea {
			width: 250px;
			}
	
	}


/**************** CONTACT ******************/

#grid-container-contact {
	width: 100%;
	display: grid;
	grid-template-areas: 
    'hero-contact hero-contact hero-contact'
    'title-contact  title-contact title-contact'
    'contact-form contact-form direct-contact' 
    'footer footer footer';
	grid-column-gap: 0px;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: minmax(auto, auto);
	grid-template-columns: minmax(auto, auto);
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	margin-top: 4.4em;
	}

#title-contact, #contact-form, #direct-contact {
  padding: 40px;
}

#hero-contact {
	grid-area: hero-contact;
	justify-self: center;
	}

#title-contact {
	grid-area: title-contact;
	text-align: center;
	justify-self: center;
	}
	
#contact-form {
	grid-area: contact-form;
	justify-self: end;
	padding: 10px 125px 100px 10px;
	}
	
	#contact-form div {  /* Used to center column within assigned grid section */
		max-width: 400px;
		margin: 0 auto;
		}
	
	#contact-form input {
		width: 400px;
		height: 25px;
		border: none;
		}
	
	#contact-form textarea {
		width: 400px;
		border: none;
		}
	
	#contact-form form .button {
		background-color: var(--blue);
		height: 45px;
		line-height: 0px;
		}
	
	#contact-form form input[type="checkbox"] {
	    display: inline-block;
	    width: 15px;
	    vertical-align: top;
	    margin-top: -3px;
		}

	#contact-form form .label-text {
	    display: inline-block;
	    width: 150px;
	    vertical-align: top;
	    font-size: 13px;
		}
			
#direct-contact {
	grid-area: direct-contact;
	justify-self: start;
	border-left: 1px solid var(--lightgray);
	padding-top: 0px;
	}
	
	#direct-contact div {  /* Used to center column within assigned grid section */
		max-width: 15em;
		margin: 0 auto;
		}

@media (max-width: 800px) {
	#grid-container-contact  {
	grid-template-areas: 
		'hero-contact hero-contact hero-contact'
		'title-contact  title-contact title-contact'
		'direct-contact direct-contact direct-contact' 
		'contact-form contact-form contact-form'
		'footer footer footer';
		}
	#contact-form {
		justify-self: center;
		padding: 0px 20px 50px 20px;
		}
	
	#contact-form div {  /* Used to center column within assigned grid section */
		max-width: 300px;
		}
	
	#contact-form input {
		width: 300px;
		}
	
	#contact-form textarea {
		width: 300px;
		}
	}
	

/*************** TERMS  *******************/

#grid-container-terms {
	width: 100%;
	display: grid;
	grid-template-areas: 
    'title-terms'
    'terms' 
    'footer';
	grid-column-gap: 0px;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(auto, auto);
	grid-template-columns: minmax(auto, auto);
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	margin-top: 4.4em;
	}

#title-terms, #terms {
  	padding: 40px;
	}
	
#title-terms {
	grid-area: title-terms;
	text-align: center;
	justify-self: center;
	}

#terms {
	grid-area: terms;
	justify-self: center;
	color: var(--gray);
	}
	
	#terms div {  /* Used to center column within assigned grid section */
		max-width: 40em;
		margin: 0 auto;
		}
		
	#terms h2 {
		padding-top: 40px;
		color: var(--darkblue);
	}
	
	
/*************** PRIVACY *******************/

#grid-container-privacy {
	width: 100%;
	display: grid;
	grid-template-areas: 
    'title-privacy'
    'privacy' 
    'footer';
	grid-column-gap: 0px;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(auto, auto);
	grid-template-columns: minmax(auto, auto);
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	margin-top: 4.4em;
	}

#title-privacy, #privacy {
  	padding: 40px;
	}
	
#title-privacy {
	grid-area: title-privacy;
	text-align: center;
	justify-self: center;
	}

#privacy {
	grid-area: privacy;
	justify-self: center;
	color: var(--gray);
	}
	
	#privacy div {  /* Used to center column within assigned grid section */
		max-width: 40em;
		margin: 0 auto;
		}
		
	#privacy h2 {
		padding-top: 40px;
		color: var(--darkblue);
	}



/**************** FOOTER ******************/
footer {
	grid-area: footer;
	background-color: var(--black);
	}

	footer p {
		text-align: center;
		background: var(--black);
		/*color: #383838;*/
		}
		
	footer img {
		padding: 5px;
		text-align: center;
		}
	
	footer a {
		color: var(--lightgray);
		font-size: x-small;
		}
		
		footer a:hover {
			color: var(--white);
		}




/**************** COLOR ********************/

.black {
	width: 20em;
	height: 4em;
	margin-left: 3em;
	background-color: var(--black);
	}

.gray {
	width: 20em;
	height: 4em;
	margin-left: 3em;
	background-color: var(--gray);
	}

.lightgray {
	width: 20em;
	height: 4em;
	margin-left: 3em;
	background-color: var(--lightgray);
	}

.white {
	width: 20em;
	height: 4em;
	margin-left: 3em;
	background-color: var(--white);
	}

.green {
	width: 20em;
	height: 4em;
	margin-left: 3em;
	background-color: var(--green);
	}

.darkgreen {
	width: 20em;
	height: 4em;
	margin-left: 3em;
	background-color: var(--darkgreen);
	}

.blue {
	width: 20em;
	height: 4em;
	margin-left: 3em;
	background-color: var(--blue);
	}

.darkblue {
	width: 20em;
	height: 4em;
	margin-left: 3em;
	background-color: var(--darkblue);
	}