@charset "utf-8";
/* CSS Document */
/* Colton Summers */
* {
	margin: 0;
	padding: 0;
}

.homelogo {
	font-family: unit-gothic-716, sans-serif;
	letter-spacing: 2.27vw;
	font-size: 3.78vw;
	color: #00946E;
	margin: 4% 0% 0 5%;
}

#homeportrait {
	float: right;
	margin: -18% 5% 0 0;
	width: 45%;
}

#homeportrait img {
	width: 100%;
}

h2 { 
	font-family: "franklin-gothic-urw-comp", sans-serif;
	color: #00946E;
	font-size: 24pt;
}

#homeh2 {
	display: inline-block;
	letter-spacing: .30vw;
	font-size: 2.8vw;
	float: left;
	margin-top: 5.5%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 6.5%;
	width: 40%;
}

h3 { 
	font-family: "franklin-gothic-urw", sans-serif;
	font-style: italic;
	color: #00946E;
	font-size: 14pt;
}

p { 
	font-family: "futura-pt", sans-serif;
	color: #00946E;
	font-size: 18pt;
}

a { 
	text-decoration: none;
	color: #00946E;
}

body {

}

#homenav {
	padding: 0;
	margin-left: 5%;
	display: flex;
	flex-flow: row;
	width: 39%;
	margin-top: 15%;
	justify-content: space-between;
	align-content: center;
}

#homenav li {
	list-style: none;
	font-family: "franklin-gothic-urw", sans-serif;
	font-style: italic;
	font-size: 1.25vw;
	display: inline-block;
}

#homenav li a {
	transition: ease-in-out .3s;
}


#homenav li:last-child {
	margin: 0;
}

#homep {
	display: inline-block;
	margin-top: 6%;
	margin-left: 5%;
	width: 39%;
	letter-spacing: .1vw;
	line-height: 2vw;
	font-size: 1.4vw;
}

#csymbols {
	display: flex;
	flex-flow: row wrap;
	width: 39%;
	height: 10%;
	margin-left: 5%;
	margin-top: 8%;
	justify-content: center;
	align-content: space-between;
	align-items: center;
}

#csymbol1 {
	display: inline-block;
	background-image: url("../img/index/CS_Symbols-01.svg");
	background-repeat: no-repeat;
	background-position: center;
	height: 3.5vw;
	width: 3.5vw;
	flex-basis: 25%;
	margin-bottom: 15%;
}

#csymbol2 {
	background-image: url("../img/index/CS_Symbols-02.svg");
	background-repeat: no-repeat;
	background-position: center;
	height: 3.5vw;
	width: 3.5vw;
	flex-basis: 25%;
	margin-bottom: 15%;
}

#csymbol3 {
	display: inline-block;
	background-image: url("../img/index/CS_Symbols-03.svg");
	background-repeat: no-repeat;
	background-position: center;
	height: 3.5vw;
	width: 3.5vw;
	flex-basis: 25%;
	margin-bottom: 15%;
}

#csymbol4 {
	display: inline-block;
	background-image: url("../img/index/CS_Symbols-04.svg");
	background-repeat: no-repeat;
	background-position: center;
	height: 3.5vw;
	width: 3.5vw;
	flex-basis: 25%;
	margin-bottom: 15%;
}

#csymbol5 {
	display: inline-block;
	background-image: url("../img/index/CS_Symbols-05.svg");
	background-repeat: no-repeat;
	background-position: center;
	height: 3.5vw;
	width: 3.5vw;
	flex-basis: 25%;
	margin-bottom: 15%;
}

#csymbol6 {
	display: inline-block;
	background-image: url("../img/index/CS_Symbols-06.svg");
	background-repeat: no-repeat;
	background-position: center;
	height: 3.5vw;
	width: 3.5vw;
	flex-basis: 25%;
	margin-bottom: 15%;
}

#csymbol7 {
	display: inline-block;
	background-image: url("../img/index/CS_Symbols-07.svg");
	background-repeat: no-repeat;
	background-position: center;
	height: 3.5vw;
	width: 3.5vw;
	flex-basis: 25%;
	margin-bottom: 15%;
}

#csymbol8 {
	display: inline-block;
	background-image: url("../img/index/CS_Symbols-08.svg");
	background-repeat: no-repeat;
	background-position: center;
	height: 3.5vw;
	width: 3.5vw;
	flex-basis: 25%;
	margin-bottom: 15%;
}

#csymbol9 {
	display: inline-block;
	background-image: url("../img/index/CS_Symbols-09.svg");
	background-repeat: no-repeat;
	background-position: center;
	height: 3.5vw;
	width: 3.5vw;
	flex-basis: 25%;
	margin-bottom: 15%;
}

#csymbol10 {
	display: inline-block;
	background-image: url("../img/index/CS_Symbols-10.svg");
	background-repeat: no-repeat;
	background-position: center;
	height: 3.5vw;
	width: 3.5vw;
	flex-basis: 25%;
	margin-bottom: 15%;
}

#homecopyright {
	display: inline-block;
	margin-top: 1.75%;
	margin-left: 5%;
	width: 37.5%;
	text-align: center;
	
}

#homecopyright p {
	margin: 0;
	font-size: 1vw;
}

footer {
	display: block;
	padding: 2.5%;
}

footer p {
	margin-top: -2px;
	float: right;
	font-size: 12pt;
}

#footer-soc-icons {
	float: left;
}

.footer-behance-icon {
	display: inline-block;
	margin-right: 16px;
	width: 16px;
	height: 16px;
	background-image: url("../img/icons/cs_behance_icon_green.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.footer-instagram-icon {
	display: inline-block;
	margin-right: 16px;
	width: 16px;
	height: 16px;
	background-image: url("../img/icons/cs_instagram_icon_green.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.footer-youtube-icon {
	display: inline-block;
	margin-right: 16px;
	width: 16px;
	height: 16px;
	background-image: url("../img/icons/cs_youtube_icon_green.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.footer-spotify-icon {
	display: inline-block;
	margin-right: 16px;
	width: 16px;
	height: 16px;
	background-image: url("../img/icons/cs_spotify_icon_green.svg");
	background-repeat: no-repeat;
	background-position: center;
}

header {
	display: flex;
	margin: 1.5% 2.5% 0 2.5%;
	height: 50px;
	width: 95%;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	z-index: 999;
}

.header-elements-desktop {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 95%;
	height: 5%;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0;
	margin: 1.5% 2.5% 0 2.5%;
	z-index: 999;
}

.logo {
}

.logo h1 {
	font-family: unit-gothic-716, sans-serif;
	letter-spacing: 1.5vw;
	font-size: 2vw;
	color: #00946E;
}

nav li {
	display: inline-block;
	font-family: "franklin-gothic-urw-comp", sans-serif;
	text-align: center;
	font-size: 1.5vw;
	padding-left: 3vw;
	letter-spacing: .1vw;
}

nav a {
	display: block;
	-o-transition: all ease-in-out .5s;
	-ms-transition: all ease-in-out .5s;
	-moz-transition: all ease-in-out .5s;
	-webkit-transition: all ease-in-out .5s;
	transition: all ease-in-out .5s;
	color: #00946E;
	padding: 0.5vw 1vw;

}


/*Portfolio Grid*/

.main-content {
	display: grid;
	padding: 2.5%;
	min-height: 100vh;
}

.portfolio {
	padding: 0;
	margin: 0;
	display: grid;
	height: 300vh;
	grid-template-rows: repeat(7, 1fr);
	grid-template-columns: repeat(9, 1fr);
	grid-gap: 2% 2.5%;
}

.portfolio-item {
	position: relative;
	overflow: hidden;
	color: #00946E;
	display: flex;
	justify-content: center;
	align-items: center;
}

.portfolio-item.six-col {
	grid-row: span 2;
	grid-column: span 6;
}

.portfolio-item.three-col {
	grid-row: span 2;
	grid-column: span 3;
}

.portfolio-item.nine-col {
	grid-row: span 2;
	grid-column: span 9;
}

.portfolio-item.seven-col {
	grid-row: span 2;
	grid-column: span 7;
}

.portfolio-item.two-col-two-row {
	grid-row: span 2;
	grid-column: span 2;
}

.portfolio-item.nine-col-one-row {
	grid-row: span 1;
	grid-column: span 9;
}

.portfolio-item img {
	opacity: 1;
	-o-transition: all ease-in-out .5s;
	-ms-transition: all ease-in-out .5s;
	-moz-transition: all ease-in-out .5s;
	-webkit-transition: all ease-in-out .5s;
	transition: all ease-in-out .5s;
	min-height: 100%;	
}


.thumb-img {
	display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	height: 100%;
	width: 100%;
	
}

.thumb-overlay {
	position: absolute;
	top: 600px;
	left: 0;
	width: 100%;
	height: 100%;
	-o-transition: all ease-in-out .5s;
	-ms-transition: all ease-in-out .5s;
	-moz-transition: all ease-in-out .5s;
	-webkit-transition: all ease-in-out .5s;
	transition: all ease-in-out .5s;
}

#project1 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/rvhs/RVHS_Logo.png");
	background-size: 20%;
	background-repeat: no-repeat;
	background-position: center;
}

#project2 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/indigo/IndigoRemedies_Symbol.png");
	background-size: 20%;
	background-repeat: no-repeat;
	background-position: center;
}

#project3 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/griffs/Griffs_Logo.png");
	background-size: 25%;
	background-repeat: no-repeat;
	background-position: center;
}


#project4 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/trademarks/Trademark_Symbol.png");
	background-size: 40%;
	background-repeat: no-repeat;
	background-position: center;
}

#project5 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/yumberry/YBB_Symbol.png");
	background-size: 15%;
	background-repeat: no-repeat;
	background-position: center;
}

#project6 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/printable-portfolio/Printable_Portfolio_Text.png");
	background-size: 25%;
	background-repeat: no-repeat;
	background-position: center;
}

#project6 img {
	position: absolute;
	bottom: 0;
	width: 100%;
}

.portfolio-caption {
	display: block;
	position: absolute;
	top: 93%;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #CEDFD7;
	padding: 1% 0;
	font-family: "franklin-gothic-urw", sans-serif;
	font-style: italic;
	font-size: 1.25vw;
	letter-spacing: 1pt;
	color: #3D4543;
}

#project1 .portfolio-caption {	
	top: 94%;
	padding: 1% 0;
}

#project2 .portfolio-caption {	
	top: 94%;
	padding: 2% 0;
}

#project3 .portfolio-caption {	
	top: 94%;
	padding: .5% 0;
}

#project4 .portfolio-caption {	
	top: 94%;
	padding: 2% 0;
}

#project5 .portfolio-caption {	
	top: 94%;
	padding: .5% 0;
}

#project6 .portfolio-caption {	
	top: 86%;
	padding: .35% 0;
}

.btt {
	position: fixed;
	bottom: 9%;
	right: 2.5%;
	width: 40px;
	height: 50px;
	background-image: url("../img/icons/CS_BTT_Icon_Normal.png");
	background-size: 100%;
	background-repeat: no-repeat;
	cursor: pointer;
	display: none;
}


#contact-h3 {
	font-size: 22vw;
	word-break: break-all;
	line-height: 17vw;
	letter-spacing: -.25vw;
}

#contact-h3 a {
	-o-transition: all ease-in-out .5s;
	-ms-transition: all ease-in-out .5s;
	-moz-transition: all ease-in-out .5s;
	-webkit-transition: all ease-in-out .5s;
	transition: all ease-in-out .5s;
}

.project-explanation {
	margin-top: 5%;
	margin-bottom: 10%;
	font-size: 60pt;
}

.tableh2 {
	font-size: 3vw;
	margin-bottom: 1%;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th {
	font-family: franklin-gothic-urw, sans-serif;
	font-style: italic;
	font-size: 1.5vw;
	text-decoration: none;
	color: #00946E;
}

th, td {
	padding: 1%;
	border: solid 3px #00946E;
	text-align: center;
}

td {
	font-family: futura-pt, sans-serif;
	font-size: 1.5vw;
	color: #00946E;
}

 .iframe-container {
	 position: relative;
	 width: 75%;
	 padding-bottom: 56.25%;
	 height: 0;
	 margin: auto;
	 margin-top: 10%;
} 

.iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 75%;
} 

@media (max-width: 768px) {
	
	/*Home*/
	
	.homelogo {
		letter-spacing: 4vw;
		font-size: 7vw;
		color: #00946E;
		text-align: center;
		line-height: 8vw;
	}

	#homeportrait {
		float: none;
		width: 100%;
		position: absolute;
		z-index: -1;
		visibility: hidden;
	}
	
	#homeh2 {
		letter-spacing: .7vw;
		font-size: 6vw;
		float: none;
		margin: 10% 0 -5% 0;
		width: 100%;
		text-align: center;
		color: #00946E;
	}
	
	#homenav {
		display: flex;
		flex-flow: row wrap;
		width: 85%;
		justify-content: space-between;
		align-content: center;
		padding: 0 2.5%;
		
	}

	#homenav li {
		list-style: none;
		font-family: "franklin-gothic-urw", sans-serif;
		font-style: italic;
		font-size: 3vw;
		display: inline-block;
	}

	#homenav li a {
		color: #00946E;
	}


	#homep {
		margin-top: 10%;
		padding: 2.5%;
		width: 85%;
		letter-spacing: .25vw;
		line-height: 5vw;
		font-size: 4vw;
	}

	#csymbols {
		display: flex;
		flex-flow: row wrap;
		width: 100%;
		height: 20%;
		margin-left: 0;
		margin-top: 15%;
		justify-content: center;
		align-content: space-between;
		align-items: center;
	}

	#csymbol1 {
		height: 8vw;
		width: 8vw;
	}

	#csymbol2 {
		height: 8vw;
		width: 8vw;
	}

	#csymbol3 {
		height: 8vw;
		width: 8vw;
	}

	#csymbol4 {
		height: 8vw;
		width: 8vw;
	}

	#csymbol5 {
		height: 8vw;
		width: 8vw;
	}

	#csymbol6 {
		height: 8vw;
		width: 8vw;
	}

	#csymbol7 {
		height: 8vw;
		width: 8vw;
	}

	#csymbol8 {
		height: 8vw;
		width: 8vw;
	}

	#csymbol9 {
		height: 8vw;
		width: 8vw;
	}

	#csymbol10 {
		height: 8vw;
		width: 8vw;
	}

	#homecopyright {
		margin-top: 2.5%;
		margin-left: 0;
		width: 100%;
	}

	#homecopyright p {
		margin: 10px;
		font-size: 2vw;
	}

	/*A-Master*/
	header {
		display: flex;
		position: fixed;
		top: 0;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0;
		z-index: 999;
		margin: 0;
	}
	
	.header-elements {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 5%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 2.5% 0;
		margin: 1.25% 0 0 0;
		z-index: 999;
	}
	
	.header-elements-desktop {
		padding: 0;
		margin: 0;
	}	
	
	.logo {
		display: flex;
		position: relative;
		height: 100%;
		padding: 5%;
		align-items: center;
	}
	
	.logo h1 {
		font-size: 3vw;
		letter-spacing: 1.5vw;
		
	}

	nav {
		position: fixed;
		top: 0;
		width: 100%;
		background-color: #CEDFD7;
		height: 100vh;
		opacity: 0;
		transition: 400ms ease-in-out;
		margin: 0;
		z-index: 998;
		visibility: hidden;

		/*-webkit-transition: opacity .5s, visibility .5s;
		transition: opacity .5s, visibility .5s;*/
	}
	
	nav ul{
		position: relative;
		width: 100%;
		height: 100%;
		margin-top: 15%;
	}


	nav li {
		font-family: "franklin-gothic-urw-comp", sans-serif;
		text-align: center;
		font-size: 20vw;
		background-color: #CEDFD7;
		width: 100%;
		border-top: solid 3px #00946E;
		margin-top: 0;
		top: 5px;
		left: -40px;
		letter-spacing: .35vw;
		transform: scale(0, 1);
		transform-origin: right;
		transition: transform 400ms ease-in-out 300ms;
		
	}

	nav a {
		display: block;
		position: relative;
		color: #00946E;
		letter-spacing: -0.5vw;
		padding-top: 40px;
		padding-bottom: 40px;
		opacity: 0;
		transform: translate(0, 50px);
		transition: 400ms ease-in-out 600ms;
		
	}

	.nav-open {
		opacity: 1;
		visibility: visible;	
	}
	
	.nav-li-open {
		transform: scale(1, 1);
	}
	
	.nav-a-open {
		opacity: 1;
		transform: translate(0, 0);
	}
	
	
	.menu-toggle {
		position: relative;
		display: flex;
		flex-direction: row;
		align-self: center;
		align-items: center;
		padding: 5%;
		cursor: pointer;
		height: 100%;
	}

	.hamburger, .hamburger::before, .hamburger::after {
		content: '';
		display: block;
		background: #00946E;
		height: 2px;
		width: 35px;
		transition: all ease 500ms;
	}


	.hamburger::before {
		transform: translateY(-8px);
	}

	.hamburger::after {
		transform: translateY(6px);
	}

	.open .hamburger {
		transform: rotate(45deg);
	}

	.open .hamburger::before {
		transform: translateY(-50px) translateX(-75px) rotate(220deg);
		transition-delay: 120ms;
	}

	.open .hamburger::after {
		transform: translateY(-2px) rotate(-90deg);

	}

	footer {
			margin: 4%;
		}

	footer p {
		float: none;
		text-align: center;
		margin-top: 25px;
		font-size: 8pt;
	}
	
	#footer-soc-icons {
		display: flex;
		flex-flow: row nowrap;
		float: none;
		width: 100%;
		justify-content: center;
	}
	
	.footer-instagram-icon, .footer-youtube-icon, .footer-behance-icon, .footer-spotify-icon {
		width: 8vw;
		height: 8vw;
		margin: 4vw;
	}
	
	.main-content {
		margin-top: 15%;
		padding: 5%;
	}

	.portfolio {
		padding: 0;
		margin: 0;
		display: grid;
		height: 300vh;
		grid-template-rows: repeat(6, 1fr);
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 1.5% 0;
	}
	
	.portfolio-item.six-col {
		grid-row: span 1;
		grid-column: span 1;
	}

	.portfolio-item.three-col {
		grid-row: span 1;
		grid-column: span 1;
	}

	.portfolio-item.nine-col {
		grid-row: span 1;
		grid-column: span 1;
	}

	.portfolio-item.seven-col {
		grid-row: span 1;
		grid-column: span 1;
	}

	.portfolio-item.two-col-two-row {
		grid-row: span 1;
		grid-column: span 1;
	}

	.portfolio-item.nine-col-one-row {
		grid-row: span 1;
		grid-column: span 1;
	}
	
	#project6 img {
		position: absolute;
		bottom: 0;
		width: auto;
		height: 150%;
	}
	
	#project1 .overlay-content {
		background-size: 25%;

	}

	#project2 .overlay-content {
		background-size: 15%;

	}

	#project3 .overlay-content {
		background-size: 45%;

	}

	#project4 .overlay-content {
		background-size: 30%;

	}

	#project5 .overlay-content {
		background-size: 20%;
	}

	#project6 .overlay-content {
		background-size: 50%;
	}

	.portfolio-caption {
		font-size: 2.5vw;
		letter-spacing: 1pt;
	}

	#project1 .portfolio-caption {	
		top: 93%;
		padding: 1% 0;
	}

	#project2 .portfolio-caption {	
		top: 93%;
		padding: 1% 0;
	}

	#project3 .portfolio-caption {	
		top: 93%;
		padding: 1% 0;
	}

	#project4 .portfolio-caption {	
		top: 93%;
		padding: 1% 0;
	}

	#project5 .portfolio-caption {	
		top: 93%;
		padding: 1% 0;
	}

	#project6 .portfolio-caption {	
		top: 93%;
		padding: 1% 0;
	}
	
	#btt {
		bottom: 5%;
		right: 5%;

	}
	
	#contact-h3 {
		font-size: 29vw;
		line-height: 23vw;
	}
	 
	.iframe-container {
		 width: 100%;
	} 

	.iframe-container iframe {
		height: 100%;
	} 
	
}

@media (max-width: 500px) {
	
	#homeh2 {
		margin-top: 50px;
	}
	
	#homep {
		margin-top: 9%;
		padding: 2.5%;
		width: 85%;
		letter-spacing: .3vw;
		line-height: 7vw;
		font-size: 5vw;
	}
	
	#homenav {
		display: flex;
		flex-flow: row wrap;
		width: 83%;
		justify-content: space-around;
		align-content: center;
		padding: 0 2.5%;
		margin-top: 12%;
		
	}

	#homenav li {
		list-style: none;
		font-family: "franklin-gothic-urw", sans-serif;
		font-style: italic;
		font-size: 6vw;
		display: inline-block;
		padding: 3% 0;
		text-align: center;
	}

	
	#homecopyright p {
		font-size: 3vw;
	}
	
	.logo h1 {
		font-size: 4vw;
	}
	
	.portfolio-caption {
		font-size: 3.5vw;
		letter-spacing: 1pt;
	}
	
	#contact-h3 {
		font-size: 31vw;
		line-height: 26vw;
	}

}


/* Animations */
.btnEntrance {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: btnEntrance;
}
/* zoomIn */
/* @keyframes btnEntrance { 
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }    
} */

/* fadeInUp */
@keyframes btnEntrance {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.btnExit {
  animation-duration: 0.25s;
  animation-fill-mode: both;  
  animation-name: btnExit;
}
/* zoomOut */
/* @keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
} */

/* fadeOutDown */
@keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}