/* BASIC */

body{
	font-family: 'Raleway', sans-serif;
	color: #333;
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,h5,p{
	margin: 0 auto 16px auto;
	max-width: 600px;
}

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, p:last-child{
	margin: 0 auto;
}

h1{
	font-size: 32px;
	font-weight: 500;
	margin-bottom: 32px;
}

h2{
	font-size: 28px;
	font-weight: 500;
	text-align: center;
	margin-bottom: 28px;
}

h3{
	font-size: 20px;
	font-weight: 500;
}

.h3-margin-top{
	margin-top: 32px;
}

p{
	font-size: 16px;
	line-height: 165%;
	color: #666;
}

blockquote{
	margin: 0 auto;
	text-align: center;
}

blockquote p{
	font-size: 36px;
	font-weight: 200;
	max-width: 800px;
}

.blockquote-attribution{
	font-size: 14px;
	text-transform: uppercase;
}

img{
	width: 100%;
}

.shadow{
	box-shadow: 0 2px 60px -5px rgba(0, 0, 0, 0.15);
}


/* GLOBAL STYLING */

.blue{
	background-color: #22abf3;
}

.gray{
	background-color: #f8f8f8;
}

.dark-gray{
	background-color: #333;
}

.coral{
	background-color: #FD5D4B;
}

.eggplant{
	background-color: #702B77;
}

.spinach{
	background-color: #227C31;
}

.frost{
	background-color: #A8F1F3;
}

.norway{
	background-color: #495B91;
}

.grape{
	background-color: #EA80F4;
}

.blue blockquote p, .coral blockquote p, .frost blockquote p{
	color: black;
}

.eggplant blockquote p, .spinach blockquote p{
	color: white;
}

.flex-container{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.full-width-project.grape p, .full-width-project.grape h2, .full-width-project.grape h3{
	color: black;
}


/* ABOUT PAGE STYLING */

.full-width-about{
	width: 100%;
	padding: 48px 0;
}

.full-width-about p{
	color: white;
}

.full-width-about h1{
	margin-top: 24px;
	color: #495B91;
}

.about-text{
	flex-grow: 1;
	flex-basis: 0;
	margin: 0 96px 0 64px;
}

.about-pic{
	flex-grow: 2;
	flex-basis: 0;
	min-width: 500px;
	margin-left: 96px;
}

.first-section-about{
	max-height: 48px;
}



/* HOME PAGE STYLING */


.full-width-home{
	width: 100%;
	padding: 0;
	max-height: 600px;
	overflow: hidden;
}

.text{
	flex-grow: 2;
	flex-basis: 0;
	margin: 0 96px;
}

.image{
	flex-grow: 5;
	flex-basis: 0;
	line-height: 0;
}

.full-width-home.coral h2, .full-width-home.coral p, .full-width-home.blue h2, .full-width-home.blue p, .full-width-home.grape h2, .full-width-home.grape p{
	color: black;
}

.full-width-home h2{
	text-align: left;
	font-size: 28px;
	margin-bottom: 12px;
}

.full-width-home p{
	font-size: 18px;
	line-height: 140%;
	margin-bottom: 32px;
}

.confetti-design-system .text{
	margin-right: 0;
}

.admin-reward-catalog .text{
	margin-left: 32px;
}

.admin-reward-catalog img{
}

.full-width-home a{
	text-decoration: none;
	color: black;
	background-color: rgba(0, 0, 0, 0.10);
	transition: background-color 0.5s;
	padding: 12px 18px;
	font-weight: 500;
}

.full-width-home a:hover{
	background-color: rgba(0, 0, 0, 0.15);
}




/* PROJECT PAGE STYLING */

.full-width-project{
	width: 100%;
	padding: 96px 0;
}


.flex-row-reverse{
	flex-direction: row-reverse;
}

.flex-row{
	margin-bottom: 96px;
}

.flex-row:last-child{
	margin-bottom: 0;
}


.fifty-fifty-container{
	width: 100%;
}

.fifty-fifty{
	flex-grow: 1;
	padding: 96px 128px;
	flex-basis: 0;
}


.whole{
	flex-grow: 1;
	max-width: 1000px;
	margin: 0 auto;
}

.whole-800{
	max-width: 800px;
	margin: 0 auto;
	flex-grow: 1;
}

.one-half{
	flex-grow: 1;
	flex-basis: 0;
	margin-right: 96px;
	max-width: 350px;
}

.one-half-wrapper{
	justify-content: center;
}

.one-third{
	flex-grow: 1;
	flex-basis: 0;
	margin-right: 64px;
}

.two-thirds{
	flex-grow: 2;
	flex-basis: 0;
}

.one-third:first-child, .two-thirds:first-child, .one-fourth:first-child, .three-fourths:first-child, .one-half:first-child{
	margin-left: 96px;
	margin-right: 64px;
}

.one-third:last-child, .two-thirds:last-child, .one-fourth:last-child, .three-fourths:last-child, .one-half:last-child{
	margin-right: 96px;
}

.project-intro-container{
	max-width: 1000px;
	margin: 0 auto;
	align-items: flex-start;
}

.project-intro{
	flex-grow: 3;
	flex-basis: 0;
	margin-right: 32px;
}

.project-intro p{
	font-size: 20px;
}

.role{
	padding: 24px;
	background-color: #f8f8f8;
	flex-grow: 1;
	flex-basis: 0;
}

.role .category{
	margin-bottom: 0;
	font-weight: 500;
	color: #333;
}

.all-centered{
	text-align: center;
}

.flex-start-align{
	align-items: flex-start;
}


.hero-bg{
	padding: 0;
	width: 100%;
}

.hero-wrapper{
	margin: 0 auto;
}

.reward-catalog-hero{
	background-image: url('../img/reward-catalog-admin/reward-catalog-hero-graphic.png');
	background-repeat: no-repeat;
	background-position: right;
	background-size: auto 100%;
}


.reward-catalog-hero img, .report-scheduler-hero img{
	max-width: 940px;
}

.confetti-design-system-hero{
	justify-content: flex-end;
}

.confetti-design-system-hero .hero-wrapper{
	line-height: 0;
	margin: 0;
}

.confetti-design-system-hero img{
	max-width: 1200px;
}










/* NAV */

nav{
	padding: 32px 48px;
}

nav ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
	text-align: right;
}

nav li{
	display: inline;
	margin-left: 32px;
}

nav li a{
	text-decoration: none;
	color: #666;
}

nav li a:hover{
	color: black;
}

nav li#home a{
	margin-left: 0;
	font-weight: 600;
	float: left;
	color: #333;
}


/* FOOTER */

footer{
	padding: 48px 48px 24px 48px;
}

footer ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

footer li{
	display: block;
	margin-bottom: 8px;
	color: #666;
	font-size: 14px;
}

footer li a{
	text-decoration: none;
	color: #666;
}

footer li a:hover{
	color: black;
}


/* RESPONSIVE */


@media (max-width: 1048px) {
	.whole{
		margin: 0 48px;
	}

	.one-third:first-child, .two-thirds:first-child, .one-fourth:first-child, .three-fourths:first-child, .one-half:first-child{
		margin-left: 48px;
		margin-right: 64px;
	}

	.one-third:last-child, .two-thirds:last-child, .one-fourth:last-child, .three-fourths:last-child, .one-half:last-child{
		margin-right: 48px;
	}

	.text:first-child{
		margin-left: 48px;
		margin-right: 64px;
	}

	.text:last-child{
		margin-right: 48px;
		margin-left: 64px;
	}

	.project-intro{
		margin-left: 48px;
	}

	.role{
		margin-right: 48px;
	}

	.full-width-about h1{
		margin-top: 48px;
	}

	.about-text{
		flex-basis: 100%;
		margin: 0 48px 0 48px;
	}

	.about-pic{
		flex-basis: 100%;
		max-width: 600px;
		min-width: 20px;
		margin: 0 auto;
	}

	.first-section-about{
		max-height: none;
	}


}



@media (max-width: 900px) {
	.fifty-fifty{
		padding: 48px 24px;
	}

	blockquote p{
		font-size: 28px;
	}

	.whole-800{
		margin: 0 48px;
	}
}


@media (max-width: 800px) {
	.full-width-home{
		max-height: none;
	}

	.text{
		flex-basis: 100%;
		padding: 48px;
		background-color:white;
	}

	.text:first-child{
		margin-left: 0;
		margin-right: 0;
	}

	.text:last-child{
		margin-right: 0;
		margin-left: 0;
	}

	.image{
		flex-basis: 100%;
	}

	.text h2, .text p{
		margin-left: 0;
		margin-right: 0;
	}
}



@media (max-width: 600px) {
	.fifty-fifty{
		flex-basis: 100%;
	}

	blockquote p{
		font-size: 24px;
	}

	.whole, .whole-800{
		margin: 0 24px;
	}

	.one-third, .two-thirds, .one-half{
		flex-basis: 100%;
		margin-left: 24px;
		margin-right: 24px;
		margin-bottom: 48px;
	}

	.two-thirds{
		flex-basis: 100%;
	}

	.one-third:first-child, .two-thirds:first-child, .one-fourth:first-child, .three-fourths:first-child, .one-half:first-child{
		margin-left: 24px;
		margin-right: 24px;
	}

	.one-third:last-child, .two-thirds:last-child, .one-fourth:last-child, .three-fourths:last-child, .one-half:last-child{
		margin-right: 24px;
	}

	.full-width{
		padding: 64px 0;
	}

	.flex-row{
		margin-bottom: 48px;
	}

	.project-intro, .role{
		flex-basis: 100%;
		margin-left: 24px;
		margin-right: 24px;
	}

	.project-intro{
		margin-bottom: 48px;
	}

	nav{
		padding: 24px 24px;
		font-size: 14px;
	}

	nav li{
		margin-left: 16px;
	}

	blockquote p{
		font-size: 24px;
	}

	.text{
		padding: 48px 24px;
	}

	.about-text{
		margin: 0 24px 0 24px;
	}


}