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

#loading {
	display: flex;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 100vh;
	width: 100vw;
	background-color: black;
	justify-content: center;
	align-items: center;
	z-index: 999;
	visibility: visible;
	
	
}

.loadgo-container {
	position: relative;
	display: flex;
	width: 20%;
	height: 40%;
	overflow: hidden;
	
}

#loadgo1 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30%;
	height: 30%;
	background-image: url("../img/index/CS_Symbols-03.svg");
	background-repeat:no-repeat;
	background-size: contain;
	animation: loading 1s 1;
	transform: translate(-1000px, -50%);
}

#loadgo2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 35%;
	height: 35%;
	background-image: url("../img/index/CS_Symbols-09.svg");
	background-repeat:no-repeat;
	background-size: contain;
	animation: loading 1s 1s 1;
	transform: translate(-1000px, -50%);
}

#loadgo3 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 35%;
	height: 35%;
	background-image: url("../img/index/CS_Symbols-06.svg");
	background-repeat:no-repeat;
	background-size: contain;
	animation: loading 1s 2s 1;
	transform: translate(-1000px, -50%);
}

#loadgo4 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30%;
	height: 30%;
	background-image: url("../img/index/CS_Symbols-01.svg");
	background-repeat:no-repeat;
	background-size: contain;
	animation: loading 1s 3s 1;
	transform: translate(-1000px, -50%);
}

#loadgo5 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 35%;
	height: 35%;
	background-image: url("../img/index/CS_Symbols-08.svg");
	background-repeat:no-repeat;
	background-size: contain;
	animation: loading 1s 4s 1;
	transform: translate(-1000px, -50%);
}

#loadgo6 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30%;
	height: 30%;
	background-image: url("../img/index/CS_Symbols-02.svg");
	background-repeat:no-repeat;
	background-size: contain;
	animation: loading 1s 5s 1;
	transform: translate(-1000px, -50%);
}

#loadgo7 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30%;
	height: 30%;
	background-image: url("../img/index/CS_Symbols-07.svg");
	background-repeat:no-repeat;
	background-size: contain;
	animation: loading 1s 6s 1;
	transform: translate(-1000px, -50%);
}

#loadgo8 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30%;
	height: 30%;
	background-image: url("../img/index/CS_Symbols-10.svg");
	background-repeat:no-repeat;
	background-size: contain;
	animation: loading 1s 7s 1;
	transform: translate(-1000px, -50%);
}

#loadgo9 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30%;
	height: 30%;
	background-image: url("../img/index/CS_Symbols-04.svg");
	background-repeat:no-repeat;
	background-size: contain;
	animation: loading 1s 8s 1;
	transform: translate(-1000px, -50%);
}

#loadgo10 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30%;
	height: 30%;
	background-image: url("../img/index/CS_Symbols-05.svg");
	background-repeat:no-repeat;
	background-size: contain;
	animation: loading 1s 9s 1;
	transform: translate(-1000px, -50%);
}



@keyframes loading {
	0% {
		transform: translate(-200%, -100%);
	}
	
	50% {
		transform: translate(-50%, 0);
	}
	
	100% {
		transform: translate(200%, -100%);
	}
	
}


::-moz-selection { 
background-color: black; 
color: #00946E;
}

::selection {
background-color: black;
color: #00946E;
}




.symbol {
		display: none;
	}


.header-elements {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: .8% 1.3%;
	width: 100%;
	padding: 0;
}

.logo {
	display: block;
	grid-column: span 3;
	margin: .2vw 0;
}

.logo h1 {
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	font-size: 3vw;
	color: black;
	line-height: 2.4vw;
	letter-spacing: -.25vw;
	
}


h2 {
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	font-size: 2.5vw;
	color: black;
	line-height: 2.4vw;
	letter-spacing: -.15vw; 
	
}

.dark h2 h3 {
	color: white;
}

header {
	margin: 1%;
	margin-top: .5%;
}

.page-margin-container {
	margin: 0 1%;
}




nav {
	display: flex;
	flex-flow: row;
	align-content: flex-end;
	justify-content: flex-end;
	grid-column: 12;
	
	
}


nav ul {
	margin-left: 15%;
	display: inline-block;
	display: flex;
	align-content: space-between;
	justify-content: space-between;
	flex-flow: column;
}


nav a {
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	font-size: 1.25vw;
	-o-transition: all ease-in-out .7s;
	-ms-transition: all ease-in-out .7s;
	-moz-transition: all ease-in-out .7s;
	-webkit-transition: all ease-in-out .7s;
	transition: all ease-in-out .7s;
	color: black;
	
}

nav a:hover {
	color: #00946E;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

nav li {
	list-style: none;
	display: inline-block;
}





/*landing-desktop*/

#landing-portrait-mobile {
	display: none;
}

#landing-portrait {
	width: 98%;
	margin: 1%;
	position: absolute;
    top: 6.5vw;
    bottom: 0;
	overflow: hidden;
	background-color: white;
}

#landing-portrait img {
	height: 145vh;
	position: absolute;
	left: -30vh;
	bottom: -2vw;
}

#landing-h2 {
	font-size: 3vw;
	line-height: 2.4vw;
	color: black;
	grid-column: span 3;
	letter-spacing: -.2vw;
}

#landing-p {
	letter-spacing: .025vw;
	line-height: 1.25vw;
	font-size: 1vw;
	color: black;
	grid-column: span 4;
	padding-right: 5%;
}

























#homeportrait {
	position: absolute;
	top: 0;
	right: -50px;
	width: 80%;
	z-index: -999;
	height: 100vh;
	overflow: hidden;
}

#homeportrait img {
	width: 100%;
	position: relative;
	top: -13vw;
}


#homeportrait2 {
	position: absolute;
	top: 0;
	right: 0;
	width: 80vw;
	z-index: -999;
	height: 100vh;
	overflow: hidden;
}

#homeportrait2 img {
	width: 100%;
	position: relative;
	top: -15vw;
}

h2 { 
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	color: black;
}

#homeh2 {
	position: absolute;
	bottom: .25%;
	right: -2%;
	font-size: 11.8vw;
	line-height: 9vw;
	color: black;
	width: 86%;
}

h3 { 
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	color: black;
	font-size: 1.75vw;
	letter-spacing: -.1vw;
}

p { 
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	color: black;
	font-size: 18pt;
}

a { 
	text-decoration: none;
	color: black;
}

body {
	background-color: white;
	
}



#landing-body {
	overflow: auto;
	background-color: white;
	
}



hr {
	display: block;
	border: 0;
	border-top: 1px solid black;
	margin-top: .5%;
	
}




#homep {
	letter-spacing: .05vw;
	line-height: 1.3vw;
	font-size: 1vw;
	width: 13%;
	position: absolute;
	left: 16.5%;
	bottom: 45%;
	color: black;
}


footer {
	display: flex;
	align-content: space-between;
	justify-content: space-between;
	padding: 1%;
}

footer p {
	font-size: .9vw;
	color: black;
}

#copyright-black {
	color: black;
}

.copyright-dark {
		color: white;
	}

.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-dribbble-icon {
	display: inline-block;
	margin-right: 16px;
	width: 16px;
	height: 16px;
	background-image: url("../img/icons/cs_dribbble_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;
}


/*dark mode*/
#body-dark {
	background-color: black;
}

#body-light {
	background-color: white;
}

#body-color {
	background-color: #00946E;
}

.hr-dark {
	border-color: white;
}

#logo-dark h1{
	color: white;
}

#nav-dark a {
	color: white;
}

#nav-dark a:hover {
	color: #00946E;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

#hamburger-dark, #hamburger-dark::before, #hamburger-dark::after {
	background: white;
}

/*end dark mode*/





















/*scroll animation*/

.scroll-animation {
	opacity: 0;
	-moz-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
	-moz-transform: translate3d(0px, 100px, 0px);
	-webkit-transform: translate3d(0px, 100px, 0px);
	-o-transform: translate(0px, 100px);
	-ms-transform: translate(0px, 100px);
	transform: translate3d(0px, 100px, 0px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	transition-delay: .1s;

}

.scroll-animation.in-view {
	opacity: 1;
	-moz-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
	-moz-transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	transition-delay: .1s;
}

#landing-wrapper {
	display: flex;
	flex-flow: column;
	height: 100vh;
}




.main-content-landing {
	position: relative;
	margin: 0 1% 1% 1%;
	width: 98%;
	flex: 1 1 auto;
	overflow: hidden;
	
}

.main-content-landing video{
	position: absolute;
  	top: 50%; 
  	left: 50%;
  	-webkit-transform: translateX(-50%) translateY(-50%);
  	transform: translateX(-50%) translateY(-50%);
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    overflow: hidden;
}

#landing-p-mobile {
		display: none;
	}

#timeless {display: none;}
/*Portfolio Grid*/

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

.portfolio {
	padding: 0;
	margin: 0;
	display: grid;
	height: 125vw;
	grid-template-rows: repeat(15, 1fr);
	grid-template-columns: repeat(12, 1fr);
	grid-gap: .8% 1.3%;
}

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

}

.portfolio-item:hover {
	cursor: pointer;
}

.portfolio-item.trademarks {
	grid-row: span 3;
	grid-column: span 3;
}

.portfolio-item.yumberry {
	grid-row: span 4;
	grid-column: span 9;
}

.portfolio-item.indigo {
	grid-row: span 5;
	grid-column: span 3;
}

.portfolio-item.rvhs {
	grid-row: span 4;
	grid-column: span 5;
}

.portfolio-item.print {
	grid-row: span 4;
	grid-column: span 4;
}

.portfolio-item.griffs {
	grid-row: span 3;
	grid-column: span 7;
}


.portfolio-item.rit {
	grid-row: span 3;
	grid-column: span 5;
}

.portfolio-item.experimentation {
	grid-row: span 4;
	grid-column: span 12;
}




/*Project 1*/

#project1 .thumb-overlay {
	width: 100%;
	height: 100%;
	-o-transition: all ease-in-out .2s .15s;
	-ms-transition: all ease-in-out .2s .15s;
	-moz-transition: all ease-in-out .2s .15s;
	-webkit-transition: all ease-in-out .2s .15s;
	transition: all ease-in-out .2s .15s;
	background-color: white;
	opacity: 0;
}

#project1 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/yumberry/YBB_LogoAnimation.gif");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 0;
	left: 0;
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;		
}

#project1 {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	background-image: url("../img/portfolio/yumberry/CS_YBB_BowlMockup_1080.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
}

#project1:hover .overlay-content {
	top: 0;
	-o-transition: all ease-in-out .25s .15s;
	-ms-transition: all ease-in-out .25s .15s;
	-moz-transition: all ease-in-out .25s .15s;
	-webkit-transition: all ease-in-out .25s .15s;
	transition: all ease-in-out .25s .15s;	
}

#project1:hover .thumb-overlay {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	opacity: 1;
}




/*Project 2*/

#project2 .thumb-overlay {
	width: 100%;
	height: 100%;
	-o-transition: all ease-in-out .2s .15s;
	-ms-transition: all ease-in-out .2s .15s;
	-moz-transition: all ease-in-out .2s .15s;
	-webkit-transition: all ease-in-out .5s .15s;
	transition: all ease-in-out .2s .15s;
	background-color: #A2C5D3;
	opacity: 0;
}

#project2 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/indigo/indigo-logo-animation.gif");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 600px;
	left: 0;
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;		
}

#project2 {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	background-image: url("../img/portfolio/indigo/indigo_product_photo_6.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
}

#project2:hover .overlay-content {
	top: 0;
	-o-transition: all ease-in-out .25s .15s;
	-ms-transition: all ease-in-out .25s .15s;
	-moz-transition: all ease-in-out .25s .15s;
	-webkit-transition: all ease-in-out .25s .15s;
	transition: all ease-in-out .25s .15s;
}

#project2:hover .thumb-overlay {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	opacity: 1;
}




/*Project 3*/

#project3 .thumb-overlay {
	width: 100%;
	height: 100%;
	-o-transition: all ease-in-out .25s .15s;
	-ms-transition: all ease-in-out .25s .15s;
	-moz-transition: all ease-in-out .25s .15s;
	-webkit-transition: all ease-in-out .25s .15s;
	transition: all ease-in-out .25s .15s;
	background-color: #ebe59a;
	opacity: 0;
}


#project3 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/griffs/GriffsLogoAnimation.gif");
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 600px;
	left: 0;
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;		
}

#project3 {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	background-image: url("../img/portfolio/griffs/Griff's_OTB_Storefront_Mockup (1).jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
}

#project3:hover .overlay-content {
	top: 0;
	-o-transition: all ease-in-out .25s .15s;
	-ms-transition: all ease-in-out .25s .15s;
	-moz-transition: all ease-in-out .25s .15s;
	-webkit-transition: all ease-in-out .25s .15s;
	transition: all ease-in-out .25s .15s;
}

#project3:hover .thumb-overlay {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	opacity: 1;
}




/*Project 4*/

#project4 .thumb-overlay {
	width: 100%;
	height: 100%;
	-o-transition: all ease-in-out .2s .15s;
	-ms-transition: all ease-in-out .2s .15s;
	-moz-transition: all ease-in-out .2s .15s;
	-webkit-transition: all ease-in-out .2s .15s;
	transition: all ease-in-out .2s .15s;
	background-color: white;
	opacity: 0;
}


#project4 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/trademarks/Trademarks-Thumbnail-Hover.gif");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	left: 0;
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;		
}

#project4 {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	background-image: url("../img/portfolio/trademarks/Trademarks-Thumbnail.gif");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
}

#project4:hover .overlay-content {
	-o-transition: all ease-in-out .25s .15s;
	-ms-transition: all ease-in-out .25s .15s;
	-moz-transition: all ease-in-out .25s .15s;
	-webkit-transition: all ease-in-out .25s .15s;
	transition: all ease-in-out .25s .15s;
}

#project4:hover .thumb-overlay {
	-o-transition: all ease-in-out .2s;
	-ms-transition: all ease-in-out .2s;
	-moz-transition: all ease-in-out .2s;
	-webkit-transition: all ease-in-out .2s;
	transition: all ease-in-out .2s;
	opacity: 1;
}



/*Project 5*/

#project5 .thumb-overlay {
	width: 100%;
	height: 100%;
	-o-transition: all ease-in-out .25s .15s;
	-ms-transition: all ease-in-out .25s .15s;
	-moz-transition: all ease-in-out .25s .15s;
	-webkit-transition: all ease-in-out .25s .15s;
	transition: all ease-in-out .25s .15s;
	background-color: white;
	opacity: 0;
}

#project5 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/rvhs/RVHS_Thumbnail_Symbol.gif");
	background-size: 25%;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 600px;
	left: 0;
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
}

#project5 {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	background-image: url("../img/portfolio/rvhs/RVHS_BusinessCard_Mockup.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
}



#project5:hover .overlay-content {
	top: 0;
	-o-transition: all ease-in-out .25s .15s;
	-ms-transition: all ease-in-out .25s .15s;
	-moz-transition: all ease-in-out .25s .15s;
	-webkit-transition: all ease-in-out .25s .15s;
	transition: all ease-in-out .25s .15s;
}

#project5:hover .thumb-overlay {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	opacity: 1;
}



/*Project 6*/

#project6 .thumb-overlay {
	width: 100%;
	height: 100%;
	-o-transition: all ease-in-out .25s .15s;
	-ms-transition: all ease-in-out .25s .15s;
	-moz-transition: all ease-in-out .25s .15s;
	-webkit-transition: all ease-in-out .25s .15s;
	transition: all ease-in-out .25s .15s;
	background-color: #ffc20e;
	opacity: 0;
}


#project6 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/rit/rit-logo-animation.gif");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	left: 0;
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;		
}

#project6 {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	background-image: url("../img/portfolio/rit/CS_RIT_Sticker.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
}

#project6:hover .overlay-content {
	-o-transition: all ease-in-out .25s .15s;
	-ms-transition: all ease-in-out .25s .15s;
	-moz-transition: all ease-in-out .25s .15s;
	-webkit-transition: all ease-in-out .25s .15s;
	transition: all ease-in-out .25s .15s;
}

#project6:hover .thumb-overlay {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	opacity: 1;
}


/*Project 7*/

#project7 .thumb-overlay {
	width: 100%;
	height: 100%;
	-o-transition: all ease-in-out .25s .15s;
	-ms-transition: all ease-in-out .25s .15s;
	-moz-transition: all ease-in-out .25s .15s;
	-webkit-transition: all ease-in-out .25s .15s;
	transition: all ease-in-out .25s .15s;
	background-color: none;
	opacity: 0;
}

#project7 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/print/Summers_Print_Thumbnail_Alz.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	left: 0;
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
}

#project7 {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	background-image: url("../img/portfolio/print/Print_Thumbnail.gif");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
}

#project7:hover .overlay-content {
	-o-transition: all ease-in-out .25s .15s;
	-ms-transition: all ease-in-out .25s .15s;
	-moz-transition: all ease-in-out .25s .15s;
	-webkit-transition: all ease-in-out .25s .15s;
	transition: all ease-in-out .25s .15s;
}

#project7:hover .thumb-overlay {
	-o-transition: all ease-in-out .2s;
	-ms-transition: all ease-in-out .2s;
	-moz-transition: all ease-in-out .2s;
	-webkit-transition: all ease-in-out .2s;
	transition: all ease-in-out .2s;
	opacity: 1;
}

/*Project 8*/

#project8 .thumb-overlay {
	width: 100%;
	height: 100%;
	-o-transition: all ease-in-out .25s .15s;
	-ms-transition: all ease-in-out .25s .15s;
	-moz-transition: all ease-in-out .25s .15s;
	-webkit-transition: all ease-in-out .25s .15s;
	transition: all ease-in-out .25s .15s;
	background-color: none;
	opacity: 0;
}

#project8 .overlay-content {
	width: 100%;
	height: 100%;
	background-image: url("../img/portfolio/experimentation/Experimentation_Thumbnail_Hover.gif");
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 1000px;
	left: 0;
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;		
}

#project8 {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	background-image: url("../img/portfolio/experimentation/Experimentation_Thumbnail.gif");
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
	
}

#project8:hover .overlay-content {
	top: 0;
	-o-transition: all ease-in-out .25s .15s;
	-ms-transition: all ease-in-out .25s .15s;
	-moz-transition: all ease-in-out .25s .15s;
	-webkit-transition: all ease-in-out .25s .15s;
	transition: all ease-in-out .25s .15s;
}

#project8:hover .thumb-overlay {
	-o-transition: all ease-in-out .25s;
	-ms-transition: all ease-in-out .25s;
	-moz-transition: all ease-in-out .25s;
	-webkit-transition: all ease-in-out .25s;
	transition: all ease-in-out .25s;
	opacity: 1;
}



.portfolio-caption {
	display: block;
	position: absolute;
	top: 93%;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	padding: 1% 0;
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	font-size: 1vw;
	color: white;
}

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

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

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

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

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

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

#project7 .portfolio-caption {	
	top: 95%;
	padding: 0;
}

#project8 .portfolio-caption {	
	top: 95%;
	padding: 0;
}

.btt {
	position: fixed;
	bottom: 15%;
	right: 1%;
	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;
}

.btt:hover, .btt:focus {
}






/*shop*/
body {
	-o-transition: background 1s ease;
	-ms-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-webkit-transition: background 1s ease;
	transition: background 1s ease;
}



/* panel styles */
.panel {
  /* min height incase content is higher than window height */
	width: 100%;
	height: 35vw;
	padding: 1% 0;
	border-bottom: solid medium black;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 1.3%;
  /*outline: 10px solid hotpink;*/
  /* turn above on to see the edge of panels */
}

.panel:first-child {
	border-top: solid medium black;
}

.panel:last-child {
	border: none;
}

/* colors */
.color-orange {
  background-color: #F79A20;
}

.color-blue {
  background-color: blue;
}

.color-white {
  background-color: white;
}

.color-red {
	background-color: #e11900;
}

.color-purple {
	background-color: #8b587a;
	
}

.color-pink {
	background-color: #ed1164;
	
}

.shop-item-title {
	font-family: acumin-pro, sans-serif;
	font-size: 2vw;
	margin-top: -.75vw;
	
}

.shop-item-price {
	font-family: acumin-pro, sans-serif;
	font-size: 1.4vw;
	margin-top: -.5vw;
}

.shop-item-info {
	grid-column: span 4;
	
}

.shop-item-photo {
	grid-column: span 8;
	
}


.shop-item-photo figure {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url("../img/store/hanford/Hanford_RightAligned.png");
	-webkit-transition: none;
	transition: none;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	
}
  

.shop-item-photo figure:hover {
	-webkit-transition: none;
	transition: none;
	overflow: hidden;
	-webkit-animation: item-one-hover 3s infinite; /* Chrome, Safari, Opera */ 
	animation: item-one-hover 3s infinite;
	animation-timing-function: step-start;
	background-repeat: no-repeat;
}

#item-one {
	background-image: url("../img/store/hanford/Hanford_RightAligned.png");
}

#item-one:hover {
	-webkit-transition: none;
	transition: none;
	overflow: hidden;
	-webkit-animation: item-one-hover 2s infinite; /* Chrome, Safari, Opera */ 
	animation: item-one-hover 2s infinite;
	animation-timing-function: step-start;
	background-repeat: no-repeat;
}

@-webkit-keyframes item-one-hover {
    0% {background-image: url("../img/store/hanford/Hanford_RightAligned.png");}
    33.33% {background-image: url("../img/store/hanford/Hanford_Optical.png");}
    66.66% {background-image: url("../img/store/hanford/Hanford_Grid.jpg");}
    100% {background-image: url("../img/store/hanford/Hanford_RightAligned.png");}
}





#item-two {
	background-image: url("../img/store/toolbox/Toolbox_AllStickers.jpg");
}

#item-two:hover {
	-webkit-transition: none;
	transition: none;
	overflow: hidden;
	-webkit-animation: item-two-hover 3s infinite; /* Chrome, Safari, Opera */ 
	animation: item-two-hover 3s infinite;
	animation-timing-function: step-start;
	background-repeat: no-repeat;
}

@-webkit-keyframes item-two-hover {
    0% {background-image: url("../img/store/toolbox/Toolbox_AllStickers.jpg");}
    20% {background-image: url("../img/store/toolbox/Toolbox_Cover.jpg");}
    40% {background-image: url("../img/store/toolbox/Toolbox_Hangtown.jpg");}
    60% {background-image: url("../img/store/toolbox/Toolbox_Bumper.jpg");}
    80% {background-image: url("../img/store/toolbox/Toolbox_Flower.jpg");}
    100% {background-image: url("../img/store/toolbox/Toolbox_AllStickers.jpg");}
}



#item-three {
	background-image: url("../img/store/stampedges/CSStampEdges_Cover.jpg");
}

#item-three:hover {
	-webkit-transition: none;
	transition: none;
	overflow: hidden;
	-webkit-animation: item-three-hover 2s infinite; /* Chrome, Safari, Opera */ 
	animation: item-three-hover 2s infinite;
	animation-timing-function: step-start;
	background-repeat: no-repeat;
}

@-webkit-keyframes item-three-hover {
    0% {background-image: url("../img/store/stampedges/CSStampEdges_Cover.jpg");}
    33.33% {background-image: url("../img/store/stampedges/CSStampEdges_WaveStamp.png");}
    66.66% {background-image: url("../img/store/stampedges/CSStampEdges_CircleStamp.png");}
    100% {background-image: url("../img/store/stampedges/CSStampEdges_Cover.jpg");}
}

#item-four {
	background-image: url("../img/store/immersion/Immersion_ProductPhoto_PileWide.jpg");
}

#item-four:hover {
	-webkit-transition: none;
	transition: none;
	overflow: hidden;
	-webkit-animation: item-four-hover 2s infinite; /* Chrome, Safari, Opera */ 
	animation: item-four-hover 2s infinite;
	animation-timing-function: step-start;
	background-repeat: no-repeat;
}

@-webkit-keyframes item-four-hover {
    0% {background-image: url("../img/store/immersion/Immersion_ProductPhoto_PileWide.jpg");}
    33.33% {background-image: url("../img/store/immersion/Immersion_ProductPhoto_Single.jpg");}
    66.66% {background-image: url("../img/store/immersion/Immersion_ProductPhoto_PileAngle.jpg");}
    100% {background-image: url("../img/store/immersion/Immersion_ProductPhoto_PileWide.jpg");}
}

#item-five {
	background-image: url("../img/store/immersion/Immersion_ProductPhoto_Black.png");
}

#item-five:hover {
	-webkit-transition: none;
	transition: none;
	overflow: hidden;
	-webkit-animation: item-five-hover 2s infinite; /* Chrome, Safari, Opera */ 
	animation: item-five-hover 2s infinite;
	animation-timing-function: step-start;
	background-repeat: no-repeat;
}

@-webkit-keyframes item-five-hover {
    0% {background-image: url("../img/store/immersion/Immersion_ProductPhoto_Black.png");}
    33.33% {background-image: url("../img/store/immersion/Immersion_ProductPhoto_White.png");}
    66.66% {background-image: url("../img/store/immersion/Immersion_ProductPhoto_Pink.png");}
    100% {background-image: url("../img/store/immersion/Immersion_ProductPhoto_Black.png");}
}


/*hanford*/

#body-hanford {
	background-color: #F79A20;
}

#body-toolbox {
	background-color: #e11900;
}

#body-stamp {
	background-color: #8a5779;
}

.main-content-product {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 1.3%;
	min-height: 80vh;
	margin-top: 3.5%;
}


.prod-gallery {
	grid-column: span 8;
	height: 35vw;
	width: 100%;
	
}

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

.imgBox img {
	width: 100%;
}

.thumbnails {
	margin-top: 1%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-flow: row wrap;

}

.thumbnail:first-child {
	margin-left: 0;
}

.thumbnail:last-child {
	margin-right: 0;
}

.thumbnail {
	margin: 1% 2% 1% 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 128px;
	height: 70px;
  	vertical-align: middle;
  	-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
  	-webkit-transition-property: transform;
  	transition-property: transform;
  	-webkit-transition-timing-function: ease-out;
  	transition-timing-function: ease-out;
}

.thumbnail img { 
	width: 100%;
}

.thumbnail:hover, .thumbnail:focus, .thumbnail:active {
  -webkit-transform: translateY(-1.3vw);
  transform: translateY(-1.3vw);
}



.prod-info {
	position: relative;
	grid-column: 9 / span 4;
	height: 35vw;
}

.prod-info-alignment {
	display: block;
	position: absolute;
	bottom: 0;
}

.prod-title {
	margin-bottom: 7%;
	font-size: 3vw;
	line-height: 2.5vw;
	color: black;
	width: 100%;
}

.price {
	font-size: 1.6vw;
	line-height: 1.2pt;
	margin: 7% 0;
	width: 100%;
	height: 100%;
}

.prod-desc {
	margin: 7% 0 5%;
	width: 100%;
}

.prod-desc p {
	display: inline-block;
	position: relative;
	font-size: .98vw;
	line-height: 1.25vw;
	color: black;
}



.paypal_btn {
	display: inline-block;
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	font-size: 1.25vw;
	color: #CEDFD7;
	text-align: center;
	padding: 10px 14px;
	border: solid medium black;
	cursor: pointer;
	outline: none;
	background: none black;
	-o-transition: all ease-in-out .7s;
	-ms-transition: all ease-in-out .7s;
	-moz-transition: all ease-in-out .7s;
	-webkit-transition: all ease-in-out .7s;
	transition: all ease-in-out .7s;
	border-radius: 0!important;
}
.paypal_btn:hover {
	background: none;
	border: solid medium black;
	color: black;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

#paypal_btn_hanford {
	color: #F79A20;
}

#paypal_btn_hanford:hover {
	color: black;
}


#paypal_btn_toolbox {
	color: #e11900;
	
}

#paypal_btn_toolbox:hover {
	color: black;
}

#paypal_btn_stamp {
	color: #8a5779;
	
}

#paypal_btn_stamp:hover {
	color: black;
}

#paypal_btn_immersion {
	color: #ed1164;
	
}

#paypal_btn_immersion:hover {
	color: black;
}
.download-btn {
	position: absolute;
	bottom: -6vw;
	left: -.75vw;
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	color: white;
	font-size: 25.15vw;
	letter-spacing: -2.25vw;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.download-btn:hover {
	color: black;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.paypal-opt {
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	color: black;
	font-size: .98vw;
	line-height: 1.25vw;
	
}

.paypal-list {
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	color: black;
	font-size: .98vw;
	line-height: 1.25vw;
	width: 15vw;
   height: 1.25vw;
   overflow: hidden;
   background: url("../img/icons/CS_Dropdown_Icon_Normal.png") no-repeat right;
	background-size: contain;
	margin-bottom: 3%;
	
}

.paypal-list select {
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	color: black;
	font-size: .98vw;
	line-height: 1.25vw;
	background: transparent;
	width: 15vw;
	height: 1.25vw;	
	border: 0;
	border-radius: 0;
	margin-left: -.2vw;
	-webkit-appearance: none;
}

.paypal-list select:hover {
	color: white;
	cursor: pointer;
	
}

.paypal-list:hover {
background: url("../img/icons/CS_Dropdown_Icon_Hover.png") no-repeat right;
	background-size: contain;
}


.paypal_cart {
	display: inline-block;
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	font-size: .98vw;
	color: black;
	text-align: center;
	padding-top: .75vw;
	border: none;
	cursor: pointer;
	outline: none;
	background: none;
	-o-transition: all ease-in-out .7s;
	-ms-transition: all ease-in-out .7s;
	-moz-transition: all ease-in-out .7s;
	-webkit-transition: all ease-in-out .7s;
	transition: all ease-in-out .7s;
	border-radius: 0!important;
}

.paypal_cart:hover {
	color: white;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

#body-immersion {
	background-color: #ed1164;
}

.thanks {
	position: absolute;
	top: 8vw;
	right: 1vw;
	width: 32vw;
}

.thanks p {
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	font-size: 3vw;
	line-height: 3vw;
	letter-spacing: -.25vw;
	color: white;
}















#contact-wrapper {
	height: 100vh;
	overflow: hidden;
}


#contact-h3 {
	position: fixed;
	bottom: 2.5%;
	right: 12%;
	width: 19%;
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	font-size: 4vw;
	word-break: break-all;
	line-height: 3vw;
}

#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;
	color: white;
}

#contact-h3 a:hover{
	-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;
}


#error-h3 {
	font-size: 15vw;
	line-height: 12vw;
	letter-spacing: -.25vw;
	color: white;
}

#error-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;
	color: white;
}

#error-h3 a:hover{
	-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;
}




/*projects beginning*/


.img-container img{
	display: block;
	width: 100%;
}

.main-content-project {
	min-height: 100vh;
}


.proj-info-columns {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 10% 1%;
	margin: .5% 1%;
}

.proj-desc {
	grid-column: span 4;
}

.proj-desc p {
	font-family: acumin-pro, sans-serif;
	font-weight: 400;
	font-size: 1vw;
	line-height: 1.25vw;
	letter-spacing: 0;
	color: black;
}

.proj-services {
	grid-column: 11 / span 2;
	display: flex;
	justify-content: flex-end;
}

.proj-services ul{
	list-style-position: inside;
	font-family: acumin-pro, sans-serif;
	font-weight: 400;
	font-size: 1vw;
	line-height: 1.25vw;
	letter-spacing: 0;
	color: black;
}

.proj-services li {
	list-style-position: inside;
	list-style-type: disc;
}

.proj-desc-two-col {
	
	-webkit-column-count: 2;
	-moz-column-count: 2;
    column-count: 2;

   -webkit-column-gap: 20px;
   -moz-column-gap: 20px;
   column-gap: 1%;
}

.proj-desc-two-col p {
	letter-spacing: 0.05vw;
}


.large-margin-top {
	margin-top: 25% !important;
}

.medium-margin-top {
	margin-top: 10% !important;
}

.small-margin-top {
	margin-top: 3% !important;
}

.no-margin-top {
	margin-top: 0 !important;
}

.no-margin-bottom {
	margin-bottom: 0 !important;
}

.large-margin-bottom {
	margin-bottom: 25% !important;
}
/*rvhs*/

#rvhs-body {
	background-color: #FFB607;
}


.rvhs-logos img {
	display: block;
	width: 100%;
}

.rvhs-logotype-stack {
	grid-column: span 2;

}

.rvhs-logotype {
	grid-column: 6 / span 7;
}

.six-col-right {
	grid-column: 6 / span 7;
}

.rvhs-logo-desc {
	grid-column: 6 / span 7;
}

.rvhs-typeface {
	grid-column: 6 / span 7;
}

.rvhs-symbol {
	grid-column: span 3;
}

.rvhs-combination {
	grid-column: 11 / span 2;
}

.proj-desc-three-col {
	grid-column: span 3;
}

.rvhs-illustration-bg {
	background-color: black;
	padding: 10%;
	grid-gap: 1.5% 1%;
}

.rvhs-illustration-process {
	grid-column: span 6;
}

.small-margin-bottom {
	margin-bottom: 5%;
}

.proj-full-width {
	width: 100%;
	margin: 2.5% 0;
}

.proj-full-width img {
	display: block;
	width: 100%;
}

.proj-full-width-margin {
	display: inline-block;
	width: 98%;
	margin: .5% 1%;
}

.proj-full-width-margin img {
	display: block;
	width: 100%;
}


.proj-threequarter-width {
	width: 75%;
	margin: auto;
}

.proj-threequarter-width img {
	display: block;
	width: 100%;
}

.proj-half-width {
	width: 50%;
	margin: 1% auto;
}

.proj-half-width img {
	display: block;
	width: 100%;
}


.proj-quarter-width {
	width: 25%;
	margin: 25% auto;
}

.proj-quarter-width img {
	display: block;
	width: 100%;
}

.trademark-full-width {
	width: 100%;
	margin: 0;
}

.trademark-full-width img {
	display: block;
	width: 100%;
}

.proj-logo {
	width: 33.3%;
	margin: 25% auto;
}

.proj-logo img {
	display: block;
	width: 100%;
}

#rvhs-header {
	width: 98%;
	margin: 3% 1%;
	background-image: url("../img/portfolio/rvhs/RVHS_Postcards_2.jpg");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	height: 79vh;
	z-index: -999;
}


video {
	display: block;
	margin: auto;
	width: 100%;
}

.rvhs-video-size {
	width: 50%;
}

.indigo-video-size {
	width: 50%;
}


.btw-hr {
	margin: 0 1%;
}

.btw-wrapper {
	display: flex;
	flex-flow: row;
	align-items: stretch;
	justify-content: space-between;
	width: 98%;
	margin: 0 1% .25%;
}

.btw {
	align-self: flex-start;
	display: block;
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	font-size: 1.6vw;
	color: black;
	-o-transition: all ease-in-out .7s;
	-ms-transition: all ease-in-out .7s;
	-moz-transition: all ease-in-out .7s;
	-webkit-transition: all ease-in-out .7s;
	transition: all ease-in-out .7s;
}

.btw:hover {
	color: #00946E;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.next-project {
	align-self: flex-end;
	display: block;
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	font-size: 1.6vw;
	color: black;
	-o-transition: all ease-in-out .7s;
	-ms-transition: all ease-in-out .7s;
	-moz-transition: all ease-in-out .7s;
	-webkit-transition: all ease-in-out .7s;
	transition: all ease-in-out .7s;
}

.next-project:hover {
	color: #00946E;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

/*indigo remedies*/

#indigo-body {
	background-color: #A2C5D3;
}

#indigo-header {
	width: 98%;
	margin: 3% 1%;
	background-image: url("../img/portfolio/indigo/indigo_product_photo_4.jpg");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	height: 79vh;
	z-index: -999;
}

#proj-desc-wide {
	grid-column: span 8;
}

#proj-desc-wide p {
	letter-spacing: 0 !important;
}

#indigo-proj-desc {
	grid-column: span 5;
}

#indigo-proj-desc p {
	letter-spacing: .05vw;
}

#rvhs-proj-desc {
	grid-column: span 6;
}

#rvhs-proj-desc p {
	letter-spacing: .025vw;
}


#proj-desc-right {
	grid-column: 5 / span 8;
}

.proj-desc-margin {
	margin-top: 3%;
}

#proj-desc-gap {
	grid-gap: 2.5vw 1%;
	margin-bottom: 1%;
}

.indigo-multi-photo-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 1%;
	margin: 25% 1%;
}

.indigo-multi-photo img {
	display: block;
	width: 100%;
}

#indigo-multi-1 {
	grid-column: 2 / span 8;
}

#indigo-multi-2 {
	grid-column: 8 / span 5;
}

#indigo-multi-3 {
	grid-column: 1 / span 10;
}

#indigo-multi-4 {
	grid-column: 1 / span 5;
}

#indigo-multi-5 {
	grid-column: 8 / span 5;
}

#indigo-multi-6 {
	grid-column: 5 / span 8;
}


#indigo-symbol-desc {
	grid-column: 1 / span 3;
}

#indigo-symbol-desc p {
	letter-spacing: .025vw;
}

#indigo-symbol-1 {
	grid-column: 5 / span 2;
}

#indigo-symbol-2 {
	grid-column: 8 / span 2;
}

#indigo-symbol-3 {
	grid-column: 11 / span 2;
}

.indigo-symbols img {
	display: block;
	width: 100%;
}

#indigo-symbol-grid {
	margin: 25% 1%;
}

#indigo-labels-grid {
	margin: 25% 1%;
}

#indigo-label-desc-grid {
	margin-bottom: 25%;
}

#indigo-label-desc {
	grid-column: 7 / span 3;
}

#indigo-logoroundup-margin {
	margin-bottom: 25%;
}

.indigo-labels {
	grid-column: 2 / span 10;
}

.indigo-labels img {
	display: block;
	width: 100%;
}



/*griffs*/

.proj-desc-right-margin {
	margin-top: 25%;
}

#griffs-body {
	background-color: #ebe59b;
}
#griffs-header {
	width: 98%;
	margin: 3% 1%;
	background-image: url("../img/portfolio/griffs/Griff's_OTB_Storefront_Mockup.jpg");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	height: 79vh;
	z-index: -999;
}

#griffs-title {
	color: #017574;
}

#griffs-desc-one {
	margin-bottom: 0;
}

#griffs-desc-two {
	margin-bottom: 5%;
}

.griffs-multi {
	grid-column: 2 / span 10;
}

.griffs-illustration-process {
	grid-column: span 4;
}

.griffs-illustration-process img {
	display: block;
	width: 100%;
}

.griffs-pattern-desc p {
	letter-spacing: -.007vw;
}		

/*increase*/

.proj-desc-dark p{
	color: white;
}

.proj-services-dark li {
	color: white;
}

.btw-dark {
	color: white;
}

#increase-body {
	background-color: black;
}

#increase-header {
	width: 98%;
	margin: 3% 1%;
	background-image: url("../img/portfolio/increase/Increase_Cover.jpg");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	height: 79vh;
	z-index: -999;
}

#increase-title {
	color: gray;
}

#increase-desc {
	margin-bottom: 10%;
}

#increase-desc p{
	color: white;
}

#increase-playlist {
	width: 98%;
	height: 1100px;
	margin: 1%;
}



/*trademarks*/

#trademarks-body {
	background-color: white;
}

/*#trademarks-header {
	width: 98%;
	margin: 3% 1%;
	background-image: url("../img/portfolio/trademarks/Trademarks_Thumbnail.jpg");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	height: 79vh;
	z-index: -999;
}*/

.trademarks-desc-margin {
	margin-top: 10%;
}

#proj-desc-five-col {
	grid-column: span 5;
}

#trademarks-desc {
	grid-column: 4 / span 3;
}

.trademarks-grid {
	display: flex;
	margin: 10% 1%;
	width: 98%;
	align-content: space-around;
	align-items: flex-start;
	justify-content: space-around;
	flex-flow: wrap;
	
}

.trademarks-item {
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	width: 20vw;
	height: 20vw;
	margin: 2vw;
}

.trademarks-item img {
	display: block;
	max-height: 100%;
}




.trademarks-vertical-rule {
	display: block;
	background-color: black;
	width: 1px;
	height: 24vw;
}

.trademarks-hr {
	margin: 0;
	width: 100%;
	z-index: 500;
	
}

.trademarks-hr-mobile {
		display: none;
	}




/*yumberry bowl*/

#ybb-body {
	background-color: white; 
}

#ybb-header {
	width: 98%;
	margin: 3% 1%;
	background-image: url("../img/portfolio/yumberry/CS_YBB_BowlMockup_1080.jpg");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	height: 79vh;
	z-index: -999;
}


.ybb-sxs-left img {
	display: block;
	width: 100%;
}

.ybb-sxs-right img {
	display: block;
	width: 100%;
}


.ybb-sxs-left {
	grid-column: 5 / span 4;
}

.ybb-sxs-right {
	grid-column: 9 / span 4;
}

#ybb-sxs-margin {
	margin-top: 25%;
}


.ybb-real-bowls {
	grid-column: 1 / span 6;
}

.ybb-illustrated-bowls {
	grid-column: 7 / span 6;
}

.ybb-real-bowls img {
	display: block;
	width: 100%;
}

.ybb-illustrated-bowls img {
	display: block;
	width: 100%;
}

#ybb-behind-website {
	position: absolute;
	z-index: -100;
	margin-top: -750px;
	width: 100%;
	height: 375%;
	background-color: #FFB71B; 
}

#proj-desc-eight-col {
	grid-column: span 8;
}

#ybb-logo-desc {
	grid-column: 5 / span 4;
}

.logo-animation {
	background-image: url("../img/portfolio/yumberry/YBB_LogoAnimation.gif");
	display: block;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 1080px;
	margin-top: 5%;
	
	
}



.ybb-punchcards img {
	display: block;
	width: 100%;
}



.ybb-punchcards {
	grid-column: span 6;
}

#ybb-punchcards-margin {
	margin: .5% 1%;
}

#ybb-shirt {
	width: 33.3%;
	margin: .5% 17%;
	float: right;
}




#ybb-before-mobile {
	display: none;
}



/*poster collection*/
.tiny-margin-top {
	margin-top: 2.5%;
}

.under-header-padding {
	padding-top: 2.5%;
}

.poster-panel {
	padding: 1% 0;
	border-bottom: solid thin white;
	grid-gap: 1.5% 1%;
}

.poster-panel:first-child {
	
	border-top: solid thin white;
}


#dw-panel {
	height: 133vw;
	grid-gap: .5% 1%;
}

#mp-panel {
	height: 222vw;
	grid-gap: .5% 1%;
}



.poster {
	grid-column: span 4;

}

.patch {
	grid-column: span 3;
}

.spread {
	grid-column: span 6;
}

.multi-spread {
	grid-column: 1 / span 6;
}


.six-col-right {
	grid-column: 7 / span 6;
}


.nine-col-right {
	grid-column: 5 / span 8;
}

.three-col {
	grid-column: span 2;
}

.four-col {
	grid-column: span 3;
}

.align-bottom {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}

.posters-desc {
	margin-top: -.5vw;
	grid-column: 9 / span 4;
	
}

.posters-desc p {
	color: white;
	
}

.black-poster {
	border: 1px solid #333;
}

.no-margin-top-bottom {
	margin-top: 0;
	margin-bottom: 0;
}

/*experimentation*/
#website-panel {
	height: 58vw;
	grid-gap: 2% 1%;
}

.website-desc {
	grid-row: span 3;
}

.painting-desc {
		grid-row: 1 / span 5;
}

.website-width-desktop {
	grid-column: span 3;
}

.website-width-mobile {
	grid-column: span 1;
}

#website-mobile-first {
	grid-column: 1;
}

.proj-h2 {
	grid-column: span 3;
}

.proj-h3 {
	grid-column: 9 / span 4;
}

.dark h2, h3 {
	color: white;
}

#painting-panel {
	height: 145vw;
	grid-gap: .61% 1%;
}

#drawing-panel {
	height: 200vw;
	grid-gap: .5% 1%;
}

.drawing-desc {
	grid-row: span 7;
}

#photography-panel {
	height: 347vw;
	grid-gap: .34% 1%;
}

.photography-desc {
	grid-row: span 10;
}

.vertical-photo {
	grid-column: span 3;
}

.experiments-desc p {
	letter-spacing: -.01vw;
}



/*Rit*/



#rit-header {
	width: 98%;
	margin: 3% 1%;
	background-image: url("../img/portfolio/rit/CS_RIT_Sticker.jpg");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	height: 79vh;
	z-index: -999;
}

.rit-sketches {
	grid-column: span 3;
}

.rit-sketches img {
	display: block;
	width: 100%;
}

.exploration-container {
	margin: 1%;
	width: 97vw;
	display: flex;
	align-items: space-between;
	justify-content: space-between;
	overflow: hidden;
}

.exploration{
    width: 44vw;
    height: 44vw;
	border: solid 2vw #e6e6e6;
	background-color: #e6e6e6;
	
  }

.exploration-img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform .5s ease-out;
	
  }


.rit-presentation-grid {
	padding: 2%;
	background-color: #E6e6e6;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(6, 1fr);
	grid-gap: 1%;
	margin: 1% 1.5%;
	height: 80vw;
}

.rit-presentation {
	grid-column: span 3;
	grid-row: span 1;
}

.rit-presentation img {
	display: block;
	width: 100%;
	
}

.rit-sketch-desc {
	width: 24%;
	
}

.rit-sketch-desc p {
	letter-spacing: .01vw;
	
}

.rit-presentation-desc {
	grid-column: 7 / span 3;
}

.rit-symbol {
	grid-column: span 6;

}

.rit-symbol img {
	display: block;
	width: 100%;
}

.rit-desc-tracking p {
	letter-spacing: -.015vw;
}




@media (max-width: 1100px) {
	
	#landing-body {
		overflow: auto;
	}
	
	.main-content-landing video {
		position: absolute;
	  	top: 50%; 
	  	left: 50%;
	  	-webkit-transform: translateX(-50%) translateY(-50%);
	  	transform: translateX(-50%) translateY(-50%);
	    min-width: 100%; 
	    min-height: 105%;
	    width: auto; 
	    height: auto; 
	    z-index: -100;
	    overflow: hidden;
	}
	
	
	.indigo-video-size {
		width: 95%;
	}

	
	.four-col {
		grid-column: span 2;
	}
	
	
	.loadgo-container {
		width: 100%;
		height: 100%;
	}


	#main-content-stamp {
		grid-template-rows: repeat(2, 73vw);
		grid-gap: 2.5%;
	}
	
	#main-content-immersionsticker {
		grid-template-rows: repeat(2, 79vw);
		grid-gap: 2.5%;
	}
	
	/*Home*/
	
	
	#header-elements-landing h1 {
		color: white;
	}
	
	#header-elements-landing a {
		color: white;
	}
	
	#hr-home {
		border-color: white;
	}
	
	#landing-h2, #landing-p {
		display: none;
	}
	
	
	.header-elements {
		display: flex;
		flex-direction: row;			
		justify-content: space-between;				
		height: 100%;
		width: 100%;
		padding: 0;
	}

	.logo {
		display: block;
		margin: .4vw 0;
	}





	nav {
		display: flex;
		flex-flow: row;
		align-content: flex-end;
		justify-content: flex-end;
	}


	nav ul {
		margin-left: 8%;
		display: flex;
		align-content: space-between;
		justify-content: space-between;
		flex-flow: column;
		
	}
	
	
	
	
	
	
	
	
	
	header {
		margin: 2.5%;
		margin-top: 1.5%;
	} 
	
	
	.logo h1{
		font-size: 6vw;
		line-height: 4.75vw;
		letter-spacing: -.5vw;
	}

	nav a {
		font-size: 2.5vw;
	}
	
	
	
	

	
	#landing-portrait {
		width: 95%;
		margin: 2.5%;
		position: absolute;
    	top: 60vw;
    	bottom: 0;
		overflow: hidden;
		background-color: white;
	}
	
	#landing-portrait img {
		height: 85vh;
		position: absolute;
		right: -45vw;
		top: -40vw;
	}
	
	.main-content-landing {
		margin: 0 2.5% 2.5% 2.5%;
		width: 95%;
		flex: 1 1 auto;
		overflow: hidden;
		
	}
	
	
	#timeless {
		display: block;
		position: absolute;
		bottom: 33vw;
		left: 2.2%;
		font-size: 13.5vw;
		color: white;
		letter-spacing: -1.4vw;
		
	}
	
	#landing-p-mobile {
		display: none;
		background-color: white;
		width: 100%;
		position: relative;
		right: 0;
		bottom: 0;
		
		
	}
	
	#landing-p-mobile p {
		line-height: 3vw;
		font-size: 2.75vw;
		color: black;
		letter-spacing: -0.125vw;
		padding: 2.5%;
		width: 66%;
	}

	/*A-Master*/
	

	footer {
		display: flex;
		align-content: flex-start;
		justify-content: flex-start;
		margin: 2.5%;
		padding: 0;
	}

	footer p {
		text-align: left;
		margin-top: 25px;
		font-size: 1vw;
		letter-spacing: .05vw;
		color: black;
	}
	
	.copyright-dark {
		color: white;
	}
	

	
	#footer-soc-icons {
		display: none;
		/*flex-flow: row nowrap;
		float: none;
		width: 100%;
		justify-content: center;*/
	}
	
	.footer-instagram-icon, .footer-youtube-icon, .footer-dribbble-icon, .footer-behance-icon, .footer-spotify-icon {
		width: 8vw;
		height: 8vw;
		margin: 4vw;
	}
	

	
	.btt {
		width: 60px;
		height: 80px;
		bottom: 15%;
		right: 2.5%;
	}
	
	#contact-h3 {
		right: 13%;
		width: 38%;
		bottom: 2.5%;
			
	}
	
	#contact-h3 a {
		
		font-size: 8vw;
		line-height: 6vw;
	}
	
	
	
	
	
	
	
	
	
		/*Portfolio Grid*/

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

	.portfolio {
		padding: 0;
		margin: 0;
		display: grid;
		height: 200vw;
		grid-template-rows: repeat(16, 1fr);
		grid-template-columns: repeat(8, 1fr);
		grid-gap: 1% 2.5%;
	}

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

	}

	.portfolio-item:hover {
		cursor: pointer;
	}
	
	
	
	.portfolio-item.trademarks {
		grid-row: span 3;
		grid-column: span 3;
	}

	.portfolio-item.yumberry {
		grid-row: span 5;
		grid-column: span 5;
	}

	.portfolio-item.indigo {
		grid-row: 4 / span 5;
		grid-column: 1 / span 3;
		
	}

	.portfolio-item.rvhs {
		grid-row: span 3;
		grid-column: span 5;
	}

	.portfolio-item.print {
		grid-row: 9 / span 5;
		grid-column: 1 / span 4;
	}

	.portfolio-item.griffs {
		grid-row: span 2;
		grid-column: span 4;
	}
	
	.portfolio-item.rit {
		grid-row: span 3;
		grid-column: span 4;
	}

	
	.portfolio-item.experimentation {
		grid-row: span 3;
		grid-column: span 8;
	}
	
	.portfolio-caption {
		font-size: 1.25vw;
	}

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

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

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

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

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

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

	#project7 .portfolio-caption {	
		top: 97%;
		padding: 0;
	}
	
	
	

	/*shop*/

	.panel {
	  /* min height incase content is higher than window height */
		width: 100%;
		height: 100vw;
		padding: 1% 0;
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: repeat(14, 1fr);
		grid-gap: 2%;
	  /*outline: 10px solid hotpink;*/
	  /* turn above on to see the edge of panels */
	}
	
	
	/* colors */
	.color-orange {
	  background-color: #F79A20;
	}
	
	.color-white {
	  background-color: white;
	}
	
	.shop-item-title {
		font-family: acumin-pro, sans-serif;
		font-size: 4vw;
		margin-top: -.5vw;
		
	}
	
	.shop-item-price {
		font-family: acumin-pro, sans-serif;
		font-size: 2.5vw;
		margin-top: 0.25vw;
	}
	
	.shop-item-info {
		grid-column: span 5;
		grid-row: span 4;
		
	}
	
	.shop-item-photo {
		grid-column: span 6;
		grid-row: 7 / span 8;
	}
	
	
	.shop-item-photo figure {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-image: url('http://placeskull.com/1050/668/158409/13');
		transition: all 1s ease-in-out;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: bottom;
		
	}
	  
	
	.shop-item-photo figure:hover {
		overflow: hidden;
		-webkit-animation: switch 5s infinite; /* Chrome, Safari, Opera */ 
		animation: switch 5s infinite;
		background-repeat: no-repeat;
	}
		
	
	/*hanford*/

	.main-content-product {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: repeat(4, 50vw);
		grid-gap: 2%;
		min-height: 100vh;
		margin-top: 0;
	}


	.prod-gallery {
		margin-top: 2%;
		grid-column: span 8;
		grid-row: 2;
		height: 40%;
		width: 100%;

	}

	.imgBox {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50vw;
		width: 100%;
		overflow: hidden;
	}

	.imgBox img {
		width: 100%;
	}

	.thumbnails {
		margin-top: 1%;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-flow: row wrap;

	}

	.thumbnail:first-child {
		margin-left: 0;
	}

	.thumbnail:last-child {
		margin-right: 0;
	}

	.thumbnail {
		margin: 1% 2% 1% 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		width: 167px;
		height: 93px;
		vertical-align: middle;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-webkit-transition-property: transform;
		transition-property: transform;
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
	}

	.thumbnail img { 
		width: 100%;
	}

	.thumbnail:hover, .thumbnail:focus, .thumbnail:active {
	  -webkit-transform: translateY(-2vw);
	  transform: translateY(-2vw);
	}



	.prod-info {
		position: relative;
		grid-column: 1 / span 8;
		grid-row: 1;
		height: auto;
	}

	.prod-info-alignment {
		display: block;
		position: relative;
	}

	.prod-title {
		margin-bottom: 4%;
		font-size: 7.4vw;
		line-height: 6.4vw;
		color: black;
		width: 100%;
	}

	.price {
		font-size: 4vw;
		line-height: 4vw;
		margin: 4% 0;
		width: 100%;
	}

	.prod-desc {
		margin: 4% 0 5%;
		width: 100%;
	}

	.prod-desc p {
		display: inline-block;
		position: relative;
		font-size: 2.5vw;
		line-height: 3.5vw;
		color: black;
	}
	
	#prod-desc-toolbox p {
		letter-spacing: -.05vw;
	}



	.paypal_btn {
		display: inline-block;
		font-family: "acumin-pro", sans-serif;
		font-weight: 600;
		font-size: 2.5vw;
		color: #CEDFD7;
		text-align: center;
		padding: 10px 14px;
		border: solid medium black;
		cursor: pointer;
		outline: none;
		background: linear-gradient(black, black) black;
		-o-transition: all ease-in-out .7s;
		-ms-transition: all ease-in-out .7s;
		-moz-transition: all ease-in-out .7s;
		-webkit-transition: all ease-in-out .7s;
		transition: all ease-in-out .7s;
		border-radius: 0!important;
	}
	.paypal_btn:hover {
		background: none;
		border: solid medium black;
		color: black;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}

	#paypal_btn_hanford {
		color: #F79A20;
	}

	#paypal_btn_hanford:hover {
		color: black;
	}
	
	
	
	
	.download-btn {
		position: absolute;
		bottom: -6vw;
		left: -1vw;
		font-family: "acumin-pro", sans-serif;
		font-weight: 600;
		color: white;
		font-size: 25.15vw;
		letter-spacing: -2.25vw;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.paypal-opt {
		font-size: 2.5vw;
		line-height: 3.5vw;
		
	}
	
	.paypal-list {
		font-size: 2.5vw;
		line-height: 3.5vw;	
		width: 30vw;
		height: 3vw;
		margin-bottom: 3%;
		
	}
	
	.paypal-list select {
		font-size: 2.5vw;
		line-height: 3.5vw;
		width: 30vw;
		height: 3vw;	
		margin-left: -.2vw;
	}

	
	
	.paypal_cart {
		font-size: 2.5vw;
		line-height: 3.5vw;
		padding-top: 2.5vw;
	}

	
	.thanks {
		position: absolute;
		top: 17vw;
		right: 2vw;
		width: 33vw;
	}

	.thanks p {
		font-family: "acumin-pro", sans-serif;
		font-weight: 600;
		font-size: 3vw;
		line-height: 3vw;
		letter-spacing: -.25vw;
		color: white;
	}
	
	
	/*projects start*/
	
	.proj-logo {
		width: 75%;
		margin: 25% auto;
	}
	
	.proj-info-columns {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		grid-gap: 5% 2.5%;
		margin: 2.5%;
	}
	
	#proj-desc-wide {
		grid-column: 1 / span 5;
	}
	
	#rvhs-proj-desc {
		grid-column: span 5;
	}

	#rvhs-proj-desc p {
		letter-spacing: .075vw;
	}
	
	.proj-desc {
		grid-column: 1 / span 5;
	}

	.proj-desc p {
		font-family: acumin-pro, sans-serif;
		font-weight: 500;
		font-size: 1.75vw;
		line-height: 2.25vw;
		letter-spacing: .035em;
		color: black;
	}
	
	.proj-desc-two-col {
	
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;

	   -webkit-column-gap: 20px;
	   -moz-column-gap: 20px;
	   column-gap: 1%;
	}

	.proj-desc-two-col p {
		letter-spacing: normal;
	}

	.proj-services {
		grid-column: 7 / span 2;
		grid-row: 1;
	}

	.proj-services ul{
		list-style-position: inside;
		font-family: acumin-pro, sans-serif;
		font-weight: 500;
		font-size: 1.75vw;
		line-height: 2.25vw;
		letter-spacing: .025em;
		color: black;
	}

	.proj-services li {
		list-style-position: inside;
		list-style-type: disc;
	}


	.proj-full-width {
		width: 100%;
		margin: 2.5% 0;
	}

	.proj-full-width-margin {
		display: inline-block;
		width: 95%;
		margin: 1% 2.5%;
	}
	
	
	
	.btw-hr {
		margin: 0 2.5%;
	}



	.btw-wrapper {
		width: 95%;
		margin: 0 2.5% .5%;
		
		
	}

	.btw {
		font-size: 4vw;
	}

	.next-project {
		font-size: 4vw;
	}
	
	/*rvhs*/
	
	.rvhs-logotype-stack {
		grid-column: span 2;

	}

	.rvhs-logotype {
		grid-column: 5 / span 4;
	}

	.six-col-right {
		grid-column: 5 / span 4;
	}

	.rvhs-typeface {
		grid-column: 5 / span 4;
	}

	.rvhs-symbol {
		grid-column: span 3;
	}

	.rvhs-combination {
		grid-column: 7 / span 2;
	}

	.proj-desc-three-col {
		grid-column: span 3;
	}

	.rvhs-illustration-bg {
		background-color: black;
		padding: 10%;
		grid-gap: 1.5% 1%;
	}

	.rvhs-illustration-process {
		grid-column: span 4;
	}
	
	
	
	
	
	
	
		
	.rvhs-logo-desc {
		grid-column: 5 / span 4;
	}
	
	
	
	
	
	
	
	
	
	#rvhs-header {
		background-attachment: scroll;
		background-image: url("../img/portfolio/rvhs/RVHS_BusinessCard_Mockup.jpg");
		margin: 5% 2.5%;
		width: 95%;
	}
	
	#indigo-header {
		background-attachment: scroll;
		margin: 5% 2.5%;
		width: 95%;
	}
	
	#griffs-header {
		background-attachment: scroll;
		margin: 5% 2.5%;
		width: 95%;
	}
	
	#trademarks-header {
		background-attachment: scroll;
		margin: 5% 2.5%;
		width: 95%;
	}
	
	
	#increase-header {
		background-attachment: scroll;
		margin: 5% 2.5%;
		width: 95%;
	}
	
	#ybb-header {
		background-attachment: scroll;
		margin: 5% 2.5%;
		width: 95%;
	}
	
	#rit-header {
		background-attachment: scroll;
		margin: 5% 2.5%;
		width: 95%;
	}
	
	.trademark-full-width {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 0;
		overflow: hidden;
	}

	.trademark-full-width img {
		display: block;
		position: relative;
		min-width: 175vw;
	}



	

	video {
		width: 95%;
		margin: 1% 2.5%;
	}
	
	.rvhs-video-size {
		width: 95%;
	}
	
	
	.proj-half-width {
		width: 75%;
	}
	
	#indigo-half-width {
		width: 50%;
	}
	
		
	.proj-quarter-width {
		width: 100%;
		margin: 0;
	}
	
	
	/*indigo remedies*/
	
	#proj-desc-right {
		grid-column: 2 / span 7;
	}
	
	#proj-desc-gap {
		margin-top: 0.5%;
	}

	.indigo-multi-photo-grid {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		grid-gap: 2.5%;
		margin: 25% 2.5%;
	}
	
	#indigo-multi-1 {
		grid-column: 1 / span 6;
	}
	
	#indigo-multi-2 {
		grid-column: 5 / span 4;
	}
	
	#indigo-multi-3 {
		grid-column: 3 / span 4;
	}
	
	#indigo-multi-4 {
		grid-column: 1 / span 8;
	}
	
	#indigo-multi-5 {
		grid-column: 1 / span 4;
	}
	
	#indigo-multi-6 {
		grid-column: 3 / span 6;
	}
	
	
	#indigo-symbol-desc {
		grid-column: 1 / span 5;
		grid-row: 2;
	}
	
	
	#indigo-symbol-1 {
		grid-column: 1 / span 2;
		grid-row: 1;
	}
	
	#indigo-symbol-2 {
		grid-column: 4 / span 2;
		grid-row: 1;
	}
	
	#indigo-symbol-3 {
		grid-column: 7 / span 2;
		grid-row: 1;
	}
	
	#indigo-symbol-grid {
		margin: 25% 2.5%;
		grid-gap: 25% 2.5%;
		
	}
	
	#indigo-labels-grid {
		margin: 25% 2.5%;
		
	}
	
	#indigo-label-desc-grid {
		margin-bottom: 25%;
		margin-top: 25%;
	}
	
	#indigo-label-desc {
		grid-column: span 4;
	}
	
	#indigo-logoroundup-margin {
		margin-top: 40%;
		margin-bottom: 25%;
	}
	
	.indigo-labels {
		grid-column: 1 / span 8;
	}
	
	.indigo-illustration-margin {
		margin-top: 25%;
	}
		
		
	
	/*Yumberry Bowl*/
	
	#ybb-before {
		margin-top: 100px;
	}
	
	#ybb-exploration {
		margin-top: 50px;
	}
	
	#ybb-behind-website {
		display: none;
	}
	
	#ybb-website {
		width: 100%;
	}
	
	#proj-desc-eight-col {
		grid-column: span 5;
	}
	
	#ybb-logo-desc {
		grid-column: 5 / span 4;
	}
	
	#proj-desc-eight-col p {
		letter-spacing: .05em;
	}


	.ybb-sxs-left {
		grid-column: 1 / span 4;
	}

	.ybb-sxs-right {
		grid-column: 5 / span 4;
	}

	#ybb-sxs-margin {
		margin-top: 25%;
	}

	.ybb-real-bowls {
		grid-column: 1 / span 4;
	}

	.ybb-illustrated-bowls {
		grid-column: 5 / span 4;
	}
	
	#ybb-punchcards-margin {
		margin: 1% 2.5%;
	}


	.ybb-punchcards {
		grid-column: span 4;
	}

	#ybb-shirt {
		width: 50%;
		margin: 1% 10%;
		float: right;
	}

	/*end Yumberry Bowl*/
	
	.proj-desc-dark p {
		color: white;
	}
	
	
	/*griffs start*/
	.griffs-illustration-process {
		grid-column: 3 / span 4;
	}
	
	#griffs-illustration-process-margin {
		margin-top: 30%;
		margin-bottom: 30%;
	}
	
	.griffs-multi {
		grid-column: 2 / span 6;
	}
	
	.griffs-pattern-desc p {
		letter-spacing: 0.02vw;
	}	
	
	/*griffs end*/
	
	/*trademarks*/
	.trademarks-desc-margin {
		margin-top: 10% !important;
	}
	
	#proj-desc-five-col {
		grid-column: span 4;
	}
	
	#trademarks-desc {
		grid-column: span 4;
	}
	
	/*poster collection*/
	.poster {
		grid-column: span 3;

	}

	.spread {
		grid-column: span 5;
	}


	.multi-spread {
		grid-column: 1 / span 5;
	}
	
	.posters-desc {
		grid-column: 6 / span 3;
	}
	
	.posters-desc p {
		color: white;
		font-size: 1.5vw;
		line-height: 2vw;
	}
	
	.experiments-desc p {
		font-size: 1.5vw;
		line-height: 2vw;
		
	}
	
	#dw-panel {
		height: 165vw;
		grid-gap: .5% 1%;
	}

	#mp-panel {
		height: 275vw;
		grid-gap: .5% 1%;
	}
	
	.poster-panel {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	
	.tiny-margin-bottom {
		margin-bottom: 1%;
	}
	
	
	
	
	
	
	/*experimentation*/
	#website-panel {
		height: 230vw;
		grid-gap: .5% 1%;
	}
	
	.website-desc {
		grid-row: 1 / span 6;
	}
	.website-width-desktop {
		grid-column: span 5;
	}
	
	.website-width-mobile {
		grid-column: span 1;
	}
	
	#website-mobile-first {
		grid-column: 1;
	}
	
	/*.proj-h2 {
		grid-column: span 3;
	}
	
	.proj-h3 {
		grid-column: 9 / span 4;
	}*/
	
	#painting-panel {
		height: 740vw;
		grid-gap: .2% 1%;
	}
	
	.painting-desc p {
		letter-spacing: 0;
	}
	
	#drawing-panel {
		height: 985vw;
		grid-gap: .15% 1%;
	}
	
	.drawing-desc {
		grid-row: 1 / span 5;
	}
	
	#photography-panel {
		height: 405vw;
		grid-gap: .2% 1%;
	}
	
	.photography-desc {
		grid-row: 1 / span 10;
	}

	.vertical-photo {
		grid-column: span 2;
	}
	
	
	/*Rit*/


	.rit-sketch-container {
		grid-gap: .5%;
	}


	.rit-sketches {
		grid-column: span 4;
	}

	.rit-sketches img {
		display: block;
		width: 100%;
	}

	.exploration-container {
		margin: 2.5%;
		width: 95vw;
		display: block;
		overflow: hidden;
	}

	.exploration{
		width: 90vw;
		height: 90vw;
		border: solid 2.5vw #e6e6e6;
		background-color: #e6e6e6;

	  }

	.exploration-img {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		transition: transform .5s ease-out;

	  }


	.rit-presentation-grid {
		padding: 2%;
		background-color: #E6e6e6;
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: repeat(6, 1fr);
		grid-gap: 1%;
		margin: 2% 2.5%;
		height: 80vw;
	}

	.rit-presentation {
		grid-column: span 2;
		grid-row: span 1;
	}

	.rit-presentation img {
		display: block;
		width: 100%;

	}

	.rit-sketch-desc {
		width: 50%;
		margin-top: 5vw;
		margin-bottom: 15vw;

	}

	.rit-sketch-desc p {
		letter-spacing: .03vw;

	}

	.rit-presentation-desc {
		grid-column: 5 / span 2;
	}

	.rit-symbol {
		grid-column: span 4;

	}

	.rit-symbol img {
		display: block;
		width: 100%;
	}

	.rit-desc-tracking p {
		letter-spacing: -.015vw;
	}
	
	.rit-apperal {
		width: 50%;
		margin: 25% auto;
	}

	
	
	
	.proj-threequarter-width {
		width: 95%;
		margin: inherit 2.5%;
	}
	
	.symbol {
		display: none;
	}

	
	
	
}






@media (max-width: 500px) {
	
	
	.main-content-landing {
		margin-top: 2.5%;
	}
	
	#header-elements-landing a {
		color: black;
	}
	
	.portland-poster {
		display: none;
	}
	
	#landing-portrait {
		display: none;
	}
	
	#landing-portrait-mobile {
		display: block;
		width: 95%;
		margin: 2.5%;
		position: absolute;
    	top: 85vw;
    	bottom: 0;
		overflow: hidden;
		background-color: white;
	}
	
	#landing-portrait-mobile img {
		height: 90vh;
		position: absolute;
		left: -46vh;
		top: -62vw;
	}
	
	
	#timeless {
		display: block;
		position: absolute;
		top: 79vw;
		left: 2.2%;
		font-size: 13.5vw;
		color: white;
		letter-spacing: -1.4vw;
		
	}
	

	
	#landing-p-mobile {
		display: none;
		background-color: white;
		width: 100%;
		position: relative;
		right: 0;
		bottom: 0;
		
		
	}
	
	#landing-p-mobile p {
		line-height: 5.75vw;
		font-size: 4.75vw;
		color: black;
		letter-spacing: -0.125vw;
		padding: 2.5%;
		width: 95%;
	}
	

	
	
	
	
	
	
	#indigo-logopath {
		margin-top: 25vw;
	}
	
	.tiny-margin-top {
		margin-top: 5%;
	}

	.four-col {
		grid-column: span 1;
	}
	
	
	.btt {
		bottom: 15%;
		right: 2.5%;
		width: 40px;
		height: 50px;
	}


	header {
		margin: 0;
	}

	.logo {
		margin-left: 2.5%;
		margin-bottom: 0;
		display: none;
	}

	.logo h1 {
		font-size: 7vw;
		line-height: 5.75vw;
		letter-spacing: -.6vw;
	}
	
	.symbol {
		display: block;
		margin-left: 2.5%;
		height: 6.4vw;
		width: 6.4vw;
		overflow: hidden;
	}


	hr {
		margin: 0 2.5%;
	}

	.header-elements {
		display: flex;
		width: 100%;
		height: 80%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 1% 0;
		z-index: 999;
	}
	
	#nav-dark a {
		letter-spacing: -1vw;
		color: black;
	}

	#nav-dark a:hover {
		color: #00946E;
	}
	
	nav {
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		background-color: white;
		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: 95%;
		height: 100px;
		margin: 30% 2.5% 0 2.5%;
	}



	nav li {
		position: relative;
		background-color: white;
		width: 100%;
		margin-top: 0;
		top: 5px;
		left: 0;
		transform: scale(0, 1);
		transform-origin: right;
		transition: transform 400ms ease-in-out 300ms;
		padding: 0;
		padding-left: 0;
	}

	nav li:last-child {
		padding-bottom: 10px;
		border-bottom: solid 1px black;
	}


	nav li:hover {
		-o-transition: all ease-in-out 400ms;
		-ms-transition: all ease-in-out 400ms;
		-moz-transition: all ease-in-out 400ms;
		-webkit-transition: all ease-in-out 400ms;
		transition: all ease-in-out 400ms;
		background-color: white;
	}

	nav a {
		letter-spacing: -1vw;
		display: block;
		position: relative;
		font-family: "acumin-pro", sans-serif;
		font-weight: 600;
		text-align: left;
		font-size: 12vw;
		color: black;
		padding-top: 0;
		padding-bottom: 0;
		opacity: 0;
		left: 0;
		transform: translate(0, 25px);
		transition: 400ms ease-in-out 600ms;
	}

	nav a:hover {
		transform: translate(50px, 0);
		color: #00946E;
	}

	nav a:focus {
		transform: translate(50px, 0);
		color: #00946E;
	}

	.nav-open {
		opacity: 1;
		visibility: visible;	
	}

	.nav-li-open {
		transform: scale(1, 1);
	}

	.nav-a-open {
		opacity: 1;
		transform: translate(0, 0);
	}


	.menu-toggle {
		z-index: 999;
		position: relative;
		display: flex;
		flex-direction: row;
		align-self: center;
		align-items: center;
		padding: 5% 2.5%;
		cursor: pointer;
		height: 100%;
	}
	
	nav a {
		margin: -5vw 0;
		
	}
	
	nav li {
		margin: -5vw 0;
		
	}

	.hamburger, .hamburger::before, .hamburger::after {
		content: '';
		display: block;
		background: black;
		height: 1px;
		width: 7vw;
		transition: all ease 500ms;
	}

	.open #hamburger-dark {
		background: black;
	}
	
	.open #hamburger-dark::before {
		background: black;
	}
	
	.open #hamburger-dark::after {
		background: black;
	}
		


	.hamburger::before {
		transform: translateY(-2.45vw);
	}

	.hamburger::after {
		transform: translateY(2.25vw);
	}

	.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);
	}
	
	
	#homeh2 {
		left: auto;
		right: -1%;
		font-size: 21.6vw;
		line-height: 17vw;
		color: white;
		width: 79%;
		word-break: break-all;
	}
	
	
	#homep {
		letter-spacing: 0;
		line-height: 4vw;
		font-size: 3vw;
		width: 30%;
		position: absolute;
		left: 23%;
		bottom: 55%;
	}

	footer p {
		font-size: 2vw;
		letter-spacing: .1vw;
	
	}
	
	#contact-h3 {
		right: 10%;
		width: 55%;
		bottom: 2.5%;
			
	}
	
	#contact-h3 a {
		
		font-size: 11vw;
		line-height: 9vw;
	}


	.main-content {
		
		padding: 2.5%;
	}

	.portfolio {
		padding: 0;
		margin: 0;
		display: grid;
		height: 800vw;
		grid-template-rows: repeat(8, 1fr);
		grid-template-columns: repeat(1, 1fr);
		grid-gap: .5% 0;
	}
	
	.portfolio-item.trademarks {
		grid-row: span 1;
		grid-column: span 1;
	}

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

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

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

	.portfolio-item.print {
		grid-row: 4 / span 1;
		grid-column: span 1;
	}

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

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

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


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

	}

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

	}

	#project4 .overlay-content {
		background-size: cover;

	}

	#project5 .overlay-content {
		background-size: 35%;
	}
	
	#project7 .overlay-content {
		background-size: 100%;
	}
	
	#project8 .overlay-content {
		background-size: 125%;
	}
	
	#project6 .overlay-content {
		background-size: 100%;
	}
	
	.portfolio-caption {
		font-size: 3.5vw;
	}

	#project1 .portfolio-caption {	
		top: 95%;
		
	}

	#project2 .portfolio-caption {	
		top: 95%;
	}

	#project3 .portfolio-caption {	
		top: 95%;
	}

	#project4 .portfolio-caption {	
		top: 95%;
	}

	#project5 .portfolio-caption {	
		top: 95%;
	}

	#project6 .portfolio-caption {	
		top: 95%;
	}
	#project7 .portfolio-caption {	
		top: 95%;
	}
	
	
	
	
	
	/*shop*/
	.shop-item-title {
		font-family: acumin-pro, sans-serif;
		font-size: 6vw;
		line-height: 5.5vw;
		margin-top: -.75vw;

	}

	.shop-item-price {
		font-family: acumin-pro, sans-serif;
		font-size: 4vw;
	}
	
	
	
	
	
	/*hanford*/

	.main-content-product {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 132vw);
		grid-gap: 2.5%;
		min-height: 100vh;
	}
	
	#main-content-toolbox {
		grid-template-rows: repeat(2, 140vw);
		grid-gap: 2.5%;
	}
	
	#main-content-stamp {
		grid-template-rows: repeat(2, 170vw);
		grid-gap: 2.5%;
	}
	
	#main-content-immersionsticker {
		grid-template-rows: repeat(2, 165vw);
		grid-gap: 2.5%;
	}

	.prod-gallery {
		margin-top: 2%;
		grid-column: span 4;
		grid-row: 2;
		height: 40%;
		width: 100%;

	}

	.imgBox {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50vw;
		width: 100%;
		overflow: hidden;
	}

	.imgBox img {
		width: 100%;
	}

	.thumbnails {
		margin-top: 2.5%;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-column: span 4;
		grid-gap: 2.5%;

	}

	.thumbnail:first-child {
		margin-left: 0;
	}

	.thumbnail:last-child {
		margin-right: 0;
	}

	.thumbnail {
		width: auto;
		height: 25vw;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		grid-column: span 2;
		vertical-align: middle;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-webkit-transition-property: transform;
		transition-property: transform;
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
	}

	.thumbnail img { 
		width: 100%;
	}

	.thumbnail:hover, .thumbnail:focus, .thumbnail:active {
	  -webkit-transform: translateY(-2.5vw);
	  transform: translateY(-2.5vw);
	}



	.prod-info {
		position: relative;
		grid-column: 1 / span 4;
		grid-row: 1;
		height: auto;
	}

	.prod-info-alignment {
		display: block;
		position: relative;
	}

	.prod-title {
		margin-bottom: 6%;
		font-size: 10vw;
		line-height: 9vw;
		color: black;
		width: 100%;
	}

	.price {
		font-size: 7vw;
		line-height: 6vw;
		margin: 6% 0;
		width: 100%;
	}

	.prod-desc {
		margin: 6% 0;
		width: 100%;
	}

	.prod-desc p {
		display: inline-block;
		position: relative;
		font-size: 5vw;
		line-height: 6.5vw;
		color: black;
	}



	.paypal_btn {
		display: inline-block;
		font-family: "acumin-pro", sans-serif;
		font-weight: 600;
		font-size: 5vw;
		color: #CEDFD7;
		text-align: center;
		padding: 10px 14px;
		border: solid medium black;
		cursor: pointer;
		outline: none;
		background: linear-gradient(black, black) black;
		-o-transition: all ease-in-out .7s;
		-ms-transition: all ease-in-out .7s;
		-moz-transition: all ease-in-out .7s;
		-webkit-transition: all ease-in-out .7s;
		transition: all ease-in-out .7s;
		border-radius: 0!important;
	}
	.paypal_btn:hover {
		background: none;
		border: solid medium black;
		color: black;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}

	#paypal_btn_hanford {
		color: #F79A20;
	}

	#paypal_btn_hanford:hover {
		color: black;
	}
	
	.paypal-opt {
		font-size: 5vw;
		line-height: 6.5vw;
		
	}
	
	.paypal-list {
		font-size: 5vw;
		line-height: 6.5vw;	
		width: 65vw;
		height: 6vw;
		margin-bottom: 7%;
		
	}
	
	.paypal-list select {
		font-size: 5vw;
		line-height: 6.5vw;
		width: 65vw;
		height: 6vw;	
		margin-left: -.5vw;
	}

	
	
	.paypal_cart {
		font-size: 5vw;
		line-height: 6.5vw;
		padding-top: 6.5vw;
	}
	
	
	.thanks {
		position: absolute;
		top: 20vw;
		right: -3vw;
		width: 50vw;
	}

	.thanks p {
		font-family: "acumin-pro", sans-serif;
		font-weight: 600;
		font-size: 7vw;
		line-height: 7vw;
		letter-spacing: -.25vw;
		color: white;
	}
	
	
	
		/*projects start*/
	
	.proj-logo {
		width: 95%;
		margin: 25% auto;
	}
	
	.proj-info-columns {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 1% 2.5%;
		margin: 5% 2.5%;
	}
	
	#proj-desc-gap {
		grid-gap: 5vw 2.5%;
		margin-bottom: 3%;
	}
	
	#proj-desc-wide {
		grid-column: 1 / span 1;
	}
	
	#rvhs-proj-desc {
		grid-column: span 1;
	}
	
	#indigo-proj-desc {
		grid-column: span 1;
	}

	.proj-desc {
		grid-column: span 1;
	}

	.proj-desc p {
		font-family: acumin-pro, sans-serif;
		font-weight: 500;
		font-size: 5vw;
		line-height: 6.5vw;
		letter-spacing: .035em;
		color: black;
	}

	.proj-services {
		grid-column: span 1;
		grid-row: auto;
		justify-content: flex-start;
	}

	.proj-services ul{
		list-style-position: inside;
		font-family: acumin-pro, sans-serif;
		font-weight: 500;
		font-size: 5vw;
		line-height: 6.5vw;
		letter-spacing: .025em;
		color: black;
		
	}

	.proj-services li {
		list-style-position: inside;
		list-style-type: disc;
	}


	.proj-full-width {
		width: 100%;
		margin: 2.5% 0;
	}

	.proj-full-width-margin {
		display: inline-block;
		width: 95%;
		margin: 1% 2.5%;
	}
	
	.btw-wrapper {
		width: 95%;
		margin: 0 2.5% .5%;
	
	}


	.btw {
		font-size: 5vw;
	}

	.next-project {
		font-size: 5vw;
	}
	
	/*rvhs*/
	.large-padding {
		padding: 25%;
	}
	
		/*griffs start*/
	#griffs-illustration-process-grid {
		grid-template-columns: repeat(8, 1fr);
	}
	
	.griffs-illustration-process {
		grid-column: 2 / span 6;
	}

	#griffs-illustration-process-margin {
		margin-top: 30%;
		margin-bottom: 30%;
		grid-template-columns: repeat(8, 1fr);
	}

	.griffs-multi {
		grid-column: 1 / span 8;
	}
		/*griffs end*/
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		/*rvhs*/

	.rvhs-logotype-stack {
		grid-column: span 1;

	}

	.rvhs-logotype {
		grid-column: span 1;
	}

	.six-col-right {
		grid-column: span 1;
	}

	.rvhs-typeface {
		grid-column: span 1;
	}

	.rvhs-symbol {
		grid-column: span 1;
	}

	.rvhs-combination {
		grid-column: span 1;
	}

	.proj-desc-three-col {
		grid-column: span 1;
	}

	.rvhs-illustration-bg {
		height: 210vw;
	}

	.rvhs-illustration-process {
		grid-column: span 1;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	#griffs-header {
		background-position: right;
	}
	
	
	
	
	
	
	
		/*indigo remedies*/
	
	#proj-desc-right {
		grid-column: 1 / span 1;
	}
	
	#proj-desc-gap {
		margin-top: 3%;
	}

	.indigo-multi-photo-grid {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		grid-gap: 2.5%;
		margin: 25% 2.5%;
	}
	
	#indigo-multi-1 {
		grid-column: 1 / span 6;
	}
	
	#indigo-multi-2 {
		grid-column: 5 / span 4;
	}
	
	#indigo-multi-3 {
		grid-column: 3 / span 4;
	}
	
	#indigo-multi-4 {
		grid-column: 1 / span 8;
	}
	
	#indigo-multi-5 {
		grid-column: 1 / span 4;
	}
	
	#indigo-multi-6 {
		grid-column: 3 / span 6;
	}
	
	.align-bottom {
		justify-content: flex-start;
		align-items: flex-start;
	}
	
	
	#indigo-symbol-desc {
		grid-column: 1 / span 1;
		grid-row: 4;
	}
	
	#indigo-symbol-1 {
		grid-column: 1 / span 1;
		grid-row: 1;
	}
	
	#indigo-symbol-2 {
		grid-column: 1 / span 1;
		grid-row: 2;
	}
	
	#indigo-symbol-3 {
		grid-column: 1 / span 1;
		grid-row: 3;
	}
	
	#indigo-symbol-grid {
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(4, 1fr);
		margin: 25% 2.5%;
		grid-gap: 2.5% 2.5%;
		min-height: 500vw; 
	}
	
	#indigo-labels-grid {
		margin: 25% 2.5%;
		
	}
	
	#indigo-label-desc-grid {
		margin-bottom: 25%;
		margin-top: 25%;
	}
	
	#indigo-label-desc {
		grid-column: span 1;
	}
	
	#indigo-logoroundup-margin {
		display: none;
		margin-top: 40%;
		margin-bottom: 40%;
	}
	
	.indigo-labels {
		grid-column: 1 / span 8;
	}
	
	.indigo-illustration-margin {
		margin-top: 25%;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*Yumberry bowl*/

	#ybb-before {
		margin-top: 100px;
	}
	
	#ybb-exploration {
		margin-top: 50px;
	}
	
	#ybb-behind-website {
		display: none;
	}
	
	#ybb-website {
		width: 100%;
	}
	
	#proj-desc-eight-col {
		grid-column: span 5;
	}
	
	#ybb-logo-desc {
		grid-column: span 1;
	}
	
	#proj-desc-eight-col p {
		letter-spacing: .05em;
	}


	.ybb-sxs-left {
		grid-column: span 1;
	}

	.ybb-sxs-right {
		grid-column: span 1;
	}

	#ybb-sxs-margin {
		margin-top: 5%;
	}

	.ybb-real-bowls {
		grid-column: span 1;
		overflow: hidden;
	}


	.ybb-illustrated-bowls {
		margin-top: -20%;
		grid-column: span 1;
		overflow: hidden;
	}
	
	#ybb-punchcards-margin {
		grid-gap: 1.75%;
		margin: 1% 2.5% 4%;
	}


	.ybb-punchcards {
		grid-column: span 1;
	}

	#ybb-shirt {
		width: 95%;
		margin: 1% 2.5% 2%;
		float: right;
	}
	
	.logo-animation {
		background-image: url("../img/portfolio/yumberry/YBB_LogoAnimation.gif");
		display: block;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		width: 100%;
		height: 40em;
	}

	#ybb-sign {
		overflow: hidden;
	}
	
	
	#ybb-sign img {
		width: 300%;
		position: relative;
		right: 100%;
		overflow: hidden;
	}
	
		/*end Yumberry Bowl*/
	
	.proj-desc-dark p {
		color: white;
	}
	
	/*trademarks*/
	.trademarks-hr-mobile {
		display: block;
		margin: 0;
		width: 100%;
		z-index: 500;
	}
	
	.trademarks-vertical-rule {
		display: none;
	}
	
	
	.trademarks-grid {
		display: flex;
		margin: 25% 2.5%;
		width: 95%;
		align-content: space-around;
		align-items: flex-start;
		justify-content: space-around;
		flex-flow: wrap;

	}

	.trademarks-item {
		display: flex;
		align-content: center;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		width: 80vw;
		height: 80vw;
		margin: 5vw;
	}
	
	.trademarks-desc-margin {
		margin-top: 25% !important;
	}
	
	#proj-desc-five-col {
		grid-column: span 1;
	}
	
	#trademarks-desc {
		grid-column: span 1;
	}
	
	
	
	/*poster collection*/
	
	.posters-desc p {
		color: white;
		letter-spacing: -.005vw;
		font-size: 4vw;
		line-height: 5vw;
		margin-top: 5vw;
		margin-bottom: 5vw;
		
	}

	.poster {
		grid-column: span 1;

	}
	
	.patch {
		grid-column: span 1;
	}

	.spread {
		grid-column: span 1;
	}


	.multi-spread {
		grid-column: span 1;
	}
	
	.posters-desc {
		grid-column: span 1;
	}
	
	#dw-panel {
		height: 285vw;
		grid-gap: .5% 1%;
	}

	#mp-panel {
		height: 460vw;
		grid-gap: .5% 1%;
	}
	
	.poster-panel {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.poster-panel:first-child {
	
		border-top: none;
	}
	
	#dw-desc {
		grid-row: 6;
	}
	
	#mp-desc {
		grid-row: 7;
	}
	
	.tiny-margin-bottom {
		margin-bottom: 5vw;
	}
	
	
	/*experimentation*/
	#website-panel {
		height: 657vw;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: .5% 3%;
	}
	
	.website-desc {
		grid-row: 10 / span 1;
		grid-column: span 2;
	}
	
	
	.website-desc p {
		margin-top: 1%;
	}
	
	.website-width-desktop {
		grid-column: span 2;
	}
	
	.website-width-mobile {
		grid-column: span 1;
	}
	
	#website-mobile-first {
		grid-column: 1;
	}
	

	#painting-panel {
		height: 1250vw;
		grid-gap: .25% 1%;
	}
	
	#drawing-panel {
		height: 1660vw;
		grid-gap: .2% 1%;
	}
	
	.drawing-desc {
		grid-row: 15 / span 1;
	}
		
	.drawing-desc p {
		margin-top: 1%;
		letter-spacing: -.025vw;
	}
	
	.painting-desc {
		grid-row: 13 / span 1;
	}
	
	.painting-desc p {
		margin-top: 1%;
		letter-spacing: -.05vw;
	}
	
	#photography-panel {
		height: 1173vw;
		grid-gap: .3% 1%;
	}
	
	.photography-desc {
		grid-row: 13 / span 1;
	}
	
	.photography-desc p {
		margin-top: 1%;
		letter-spacing: .03vw;
	}
	

	.vertical-photo {
		grid-column: span 1;
	}
	
	h2 {
		font-size: 8vw;
	}
	
	h3 {
		font-size: 5vw;
	}
	
	.proj-h2 {
		grid-column: span 1;
		margin-bottom: 2%;
	}
	
	.proj-h3 {
		grid-column: span 1;
	}
	
	.experiments-desc p {
		font-size: 4vw;
		line-height: 5vw;
		
	}
	
	
	
	
		/*Rit*/


	.rit-sketch-container {
		grid-gap: .5%;
	}


	.rit-sketches {
		grid-column: span 4;
	}

	.rit-sketches img {
		display: block;
		width: 100%;
	}

	.exploration-container {
		margin: 2.5%;
		width: 95vw;
		display: block;
		overflow: hidden;
		margin-bottom: 50vw;
	}

	.exploration{
		width: 90vw;
		height: 90vw;
		border: solid 2.5vw #e6e6e6;
		background-color: #e6e6e6;

	  }

	.exploration-img {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		transition: transform .5s ease-out;

	  }


	.rit-presentation-grid {
		padding: 5%;
		background-color: #E6e6e6;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(24, 1fr);
		grid-gap: .25%;
		margin: 5% 2.5%;
		height: 1245vw;
	}

	.rit-presentation {
		grid-column: span 1;
		grid-row: span 1;
	}

	.rit-presentation img {
		display: block;
		width: 100%;

	}

	.rit-sketch-desc {
		width: 50%;
		margin-top: 5vw;
		margin-bottom: 15vw;

	}

	.rit-sketch-desc p {
		letter-spacing: .03vw;

	}

	.rit-presentation-desc {
		grid-column: span 1;
	}

	.rit-symbol {
		grid-column: span 4;

	}

	.rit-symbol img {
		display: block;
		width: 100%;
	}

	.rit-desc-tracking p {
		letter-spacing: -.015vw;
	}
	
	.rit-apperal {
		width: 95%;
		margin: 25% 2.5;
	}

	
	
	
	.proj-threequarter-width {
		width: 95%;
		margin: inherit 2.5%;
	}
	
	
}








@media (max-height: 450px) {
	#timeless {
		display: none;
	}
	
	#landing-portrait-mobile {
		display: none;
	}
	
	#landing-p-mobile {
		display: none;
	}
	
}



@media (max-height: 1500px) {
	
	#rvhs-header {
		background-attachment: scroll;
	}
	
	#indigo-header {
		background-attachment: scroll;
	}
	
	#griffs-header {
		background-attachment: scroll;
	}
	
	#trademarks-header {
		background-attachment: scroll;
	}
	
	
	#increase-header {
		background-attachment: scroll;
	}
	
	#ybb-header {
		background-attachment: scroll;
	}
	
	#rit-header {
		background-attachment: scroll;
	}
	
	
	
}




/* 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);
  }
}