html {
	height: 100%;
	margin: 0;
	margin-top: 0%;
	padding: 0;
} 

body.light-mode {
	height: 100%;
	width: 100%;
	font-size: 100%;
	background-color: white;
	margin: 0;
	padding: 0;
	line-height: 1;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
} body.light-mode

#buttons {
	text-align: center;
	position: relative;
	padding-top: 30px;
	padding-bottom: 20px;
	display: block;
	height: auto;
	width: 100%;
	z-index: 9999;
} body.light-mode

.btn-toggle {
	width: 150px;
	height: 45px;
	display: block;
  margin-left: auto;
  margin-right: auto;
	bottom: 10px;
	text-align: center;
	position: relative;
	background-color: rgb(34, 34, 34);
	cursor: pointer;
	border: solid white 2px;
	border-radius: 6px;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	color: white;
		font-weight: 400;
		font-family: "Josefin Sans", sans-serif;
		font-size: 1.1em;
} body.light-mode

.btn-toggle:hover {
	background-color: rgb(75, 75, 75);
	box-shadow:rgba(255, 255, 255, 0.5); 
	transform: translateY(-2px);
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
	
}

.btn-toggle:active {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
	box-shadow:rgba(255, 255, 255, 1); 
	transform: translateY(0px);
  }

  .btn-toggle:before {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
} body.light-mode

.btn-toggle:after {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
} body.light-mode


input {
	text-decoration: none;
	background: none;
	color: gray;
	border: none;
	font-family: "Josefin Sans", sans-serif;
	font-size: 0.8em;
	width: 10em;
	cursor: pointer;
	position: absolute;
} body.light-mode

#blue {
	position: relative;
	
} body.light-mode

#pink {
	position: relative;
} body.light-mode

h1 {
	font-size: 3em;
	font-family: "EB Garamond", serif;
	font-weight: 100;
	color: black;
	text-align: center;
	margin-bottom: -10px;
	line-height: 1.2em;
} body.light-mode

#header {
	color: black;
	text-decoration: none;
} body.light-mode

h2 {
	color: #4d4d4d;
	font-size: 1.7em;
	font-weight: 100;
	text-align: center;
	font-family: "Baskerville", serif;
} body.light-mode

#nav {
	color: #000000;
	text-align: center;
	margin-bottom: 50px;
	margin-top: 40px;
	margin-left: -10px;
} body.light-mode

#nav a {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	margin-left: 30px;
	margin-right: 30px;
	
	text-decoration: none;
	position: relative;
	color: #000000;
	padding-bottom: 3px;
} body.light-mode

#nav a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #000000;
	transition: 0.2s;
} body.light-mode

#nav a:hover:after {
	width: 100%;
} body.light-mode

#nav2 {
	color: #000000;
	text-align: center;
	margin-bottom: 40px;
	
} body.light-mode

#nav2 #contact {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	margin-left: 30px;
	margin-right: 30px;
	text-decoration: none;
	position: relative;
	color: #000000;
} body.light-mode

#nav2 #contact:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #000000;
	transition: 0.2s;
} body.light-mode

#nav2 #contact:hover:after {
	width: 100%;
} body.light-mode

.dropdown {
  display: inline-block;
  position: relative;
  font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	
	
	text-decoration: none;
	color: #000000;
	padding-bottom: 3px;

} body.light-mode

.dropdown button {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	width: 100%;
	background: none; 
	border: none;
	text-decoration: none;
	position: relative;
	color: #000000;
	padding: 0;
	margin-left: 0px;
	margin-right: 0px;
} body.light-mode



.dropdown-content {
  display: none;
  position: absolute;
  width: auto;
  text-align: center;
  overflow: visible;
  margin: 0;
	padding-top: 0;
	left: 0;
	z-index: 999;
} body.light-mode
.dropdown:hover .dropdown-content {
  display: block;
} body.light-mode
.dropdown-content a {
  display: block;
  font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 1em!important;
	text-decoration: none;
	overflow: visible;
	color: #000000;
 width: 0;
	margin-bottom: 1em;
	background: rgba(255, 255, 255, 0.5); 
	position: absolute;
	bottom: 0;
	left: 0;


} body.light-mode

.dropdown-content a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #000000;
	transition: 0.2s;
	padding: 0;
} body.light-mode

.dropdown-content a:hover {
  width: auto;
  position: absolute;
} body.light-mode


#about {
	overflow: hidden;
	position: relative;
	background-color: transparent;
	top: 27px;
    left: 0;
    right: 0;
    bottom: 0;
	margin: 0 auto 0 auto;
	display: block;
	width: 60%;
	z-index: 99;
	
	-webkit-transition-duration: 3s;
	transition-duration: 3s;
	-webkit-transform: translate(0px, 0);
    -webkit-transition: -webkit-transform 4s ease;
    -moz-transform: translate(0px, 0);
    -moz-transition: -webkit-transform 4s ease;
    transform: translate(0px, 0);
    transition: -webkit-transform 4s ease;
} body.light-mode

#about p {
	border-width: 5px 5px 0 5px;
	margin-top: 5px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	line-height: 1.5em;
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	padding: 10px 10px 9px 10px;
	text-align: justify;
} body.light-mode

a {
	text-decoration: none;
	color: black;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transform: translate(0px, 0);
} body.light-mode

#about a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #000000;
	transition: 0.5s;
} body.light-mode

#about a:hover:after {
	width: 100%;
} body.light-mode

a:hover {
	color: gray;
} body.light-mode

#a1 {
	border-bottom: 1px dashed #000000!important;
} body.light-mode

#a1 a:hover:after {
	width: 0%;
} body.light-mode

div {
		-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
} body.light-mode

#slideshow {
	height: 600px;
	width: 70%;
	overflow: hidden;
	text-align: center;
    position: relative;
    top: 8em;
	margin: auto;
	margin-bottom: 100px;
	display: block;
} body.light-mode

#slideshow img {
	position: absolute;
	top: -50px; 
    left: 0px; 
    max-width: 100%;
    min-width: 100%;
    -webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
} body.light-mode 

/*porfolio page*/
#portfolio {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	margin-left: 30px;
	margin-right: 30px;
	text-decoration: none;
	position: relative;
	color: #000000;
	border-bottom: 1px dashed #000000;
} body.light-mode

ul {
	margin: 0;
	padding: 2.5%;
	text-align: center;
} body.light-mode

ul.rig {
	list-style: none;
	font-size: 0px;
	margin-left: -2.5%; /* should match li left margin */
} body.light-mode
ul.rig li {
	display: inline-block;
	margin: 0 0 2.5% 2.5%;
	font-size: 16px;
	font-size: 1rem;
	vertical-align: top;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	z-index: 101;
} body.light-mode
ul.rig li img {
	max-width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
} body.light-mode

ul.rig li figure {
	overflow: hidden;
	position: relative;
	background: black;
} body.light-mode

ul.rig li figcaption {
	color: white;
	display: table;
	height: 100%;
	width: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;

	-webkit-transition: all 100ms;
	-moz-transition: all 100ms;
	transition: all 100ms;
	-webkit-transition-delay: 100ms;
	-moz-transition-delay: 100ms;
	transition-delay: 100ms;
} body.light-mode

ul.rig li figcaption p {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	color: white;
	text-shadow: 1px 1px 8px #000000;
	display: table-cell;
	font-size: 1.2em;
	padding: 30px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 100%;
	text-align: center;
	
} body.light-mode

ul.rig li figcaption .charity {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	color: white;
	text-shadow: 1px 1px 8px #000000;
	display: table-cell;
	font-size: 1.4em!important;
	padding: 60px;
	padding-top: 0;
	position: relative;
	top: 50%;
	transform: translateY(-55%);
	width: 100%;
	height: 100%;
	text-align: center!important;
	
} body.light-mode

ul.rig li:hover figcaption {
	opacity: 1;
} body.light-mode

ul.rig li:hover img {
	opacity: 0.7;
} body.light-mode

ul.rig li h3 {
	margin: 0 0 5px;
} body.light-mode
ul.rig li p {
	font-size: .9em;
	line-height: 1.5em;
	color: #999;
} body.light-mode
/* class for 2 columns */
ul.rig.columns-2 li {
	width: 47.5%; /* this value + 2.5 should = 50% */
} body.light-mode
/* class for 3 columns */
ul.rig.columns-3 li {
	width: 30.83%; /* this value + 2.5 should = 33% */
} body.light-mode
/* class for 4 columns */
ul.rig.columns-4 li {
	width: 22.5%; /* this value + 2.5 should = 25% */
} body.light-mode

@media (max-width: 1500px) {
	ul.grid-nav li {
		display: block;
		margin: 0 0 5px;
	} body.light-mode
	ul.grid-nav li a {
		display: block;
	} body.light-mode
	ul.rig {
		margin-left: 0;
	} body.light-mode
	ul.rig li {
		width: 30.83% !important; /* over-ride all li styles */
		margin: 0 0 20px;
	} body.light-mode
} body.light-mode

@media (max-width: 680px) {
	ul.grid-nav li {
		display: block;
		margin: 0 0 5px;
	} body.light-mode
	ul.grid-nav li a {
		display: block;
	} body.light-mode
	ul.rig {
		margin-left: 0;
	} body.light-mode
	ul.rig li {
		width: 100% !important; /* over-ride all li styles */
		margin: 0 0 20px;
	} body.light-mode
} body.light-mode

li img {
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-moz-transform: rotate(0);
	-webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
} body.light-mode
/*porfolio page*/

/*friends/collab/charity pages*/ 
#text {
	margin-top: 5em;
} body.light-mode

#text #credit {
	width: 60%;
	margin-top: 4em;
	margin-left: 20%;
	margin-right: 20%;
	height: 30em;
	text-align: center;
} body.light-mode

#text #credittext {
	float: left;
	margin: auto;
	width: 33.33%;
	height: 10em;
} body.light-mode

#text h3 {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.5em;
	color: white;
	text-shadow: 1.5px 2px 1px #333333;
	line-height: 1.5em;
	top: 0;
	left: 0;
	text-align: center;
	width: auto;
	max-width: 60%;
	margin: auto;
	margin-bottom: 2em;
} body.light-mode 

#text h4 {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.5em;
	color: black;
	line-height: 1.5em;
	top: 0;
	left: 0;
	text-align: center;
	width: auto;
	max-width: 60%;
	margin: auto;
	margin-bottom: 2em;
} body.light-mode

#text h5 {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.2em;
	color: gray;
	line-height: 1em;
	top: 0;
	left: 0;
	text-align: center;
	width: auto;
	max-width: 30%;
	margin: auto;
	margin-bottom: 1em;
	padding-bottom: 2em;
} body.light-mode 

#text h6 {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	color: gray;
	line-height: 1.5em;
	top: 0;
	left: 0;
	text-align: center;
	width: auto;
	max-width: 30%;
	margin: auto;
	margin-bottom: 2em;
	margin-top: -2em;
} body.light-mode

#friendimg {
	top: 0;
	left: 0;
	max-height: 800px;
	max-width: 100%;
	margin: auto;
	text-align: center;
} body.light-mode

#text p {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.1em;
	line-height: 1.5em;
	top: 0;
	left: 0;
	width: auto;
	max-width: 60%;
	margin: auto;
	margin-top: 2em;
	text-align: justify;
	margin-bottom: 1em;
} body.light-mode
/*friends/collab/charity pages*/

/*contact page*/
#contactinfo {
	text-align: center;
	font-family: "Josefin Sans", sans-serif;
	color: #000;
	font-size: 1em;
	font-weight: 300;
	margin-bottom: 7em;
} body.light-mode

#contactinfo p {
	text-align: justify;
	line-height: 1.5em;
	
} body.light-mode

#email {
	position: absolute;
	top: -10px;
	width: 100%;
	
} body.light-mode

li {
	position: relative;
	list-style: none;
	text-align: center;
	margin: auto;
	max-width: 600px;
} body.light-mode

#links {
	
	text-decoration: none;
	text-align: center;
	position: relative;
	top: -20px;
	left: 0;
	margin: auto;
	margin-top: 50px;
} body.light-mode

#links p {
	font-weight: 600;
	font-family: "Josefin Sans", sans-serif;
	color: #000000;
	font-size: 1.1em;
	line-height: 1.5em;
	text-decoration: none;
	text-align: center;
	
} body.light-mode

#links p a {
	color: #000000;
	text-decoration: none;
} body.light-mode

#links p a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #000000;
	transition: 0.2s;
} body.light-mode

#links p a:hover:after {
	width: 100%;
} body.light-mode
/*contact page*/

/*project pages*/#fmptitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/fmp/0.jpg");
} body.light-mode

#origamititle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/origami/cover.jpg");
} body.light-mode 

#reflectivetitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/reflective/12.jpg");
} body.light-mode 

#brandtitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/brand/1.jpg");
} body.light-mode

#jeanstitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/jeans/2.jpg");
} body.light-mode

#industrytitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/industry/cover.jpg");
} body.light-mode

#graduatetitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/graduate/cover.jpg");
} body.light-mode

#eventstitle {
	width: 100%;
	height: 500px;
	padding-top: 2.5em;
	background-image: url("images/events/covergreenman2.png");
} body.light-mode

#eventstitle2 {
	width: 100%;
	height: 100px;
	padding-top: 2.5em;
	background-image: url("images/events/covergreenman.jpg");
} body.light-mode

#title {
	display: table;
	height: 200px;
	max-width: 100%;
	left: 0;
	text-align: center;
	margin: auto;
	position: relative;
	right: 0;
	top: 25%;
} body.light-mode

#title h3 {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 4em;
	color: white;
	text-shadow: 1.5px 2px 1px #333333;
	line-height: 1.5em;
	display: table-cell;
	padding: 30px;
	position: relative;
	top: 75%;
	transform: translateY(-50%);
	width: 100%;
	height: auto;
	text-align: center;
	z-index: 999;
} body.light-mode

#text p {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.1em;
	line-height: 1.5em;
	top: 0;
	left: 0;
	width: auto;
	max-width: 60%;
	margin: auto;
	margin-top: 2em;
	text-align: justify;
	margin-bottom: 1em;
} body.light-mode

#portfolio {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	margin-left: 30px;
	margin-right: 30px;
	text-decoration: none;
	position: relative;
	color: #000000;
	border-bottom: 1px dashed #000000;
} body.light-mode

#things {
	left: 0;
	position: relative;
	width: 100%;
	height: 25%;
	text-align: center;
	top: 80%;
	margin-left: auto;
	margin-right: auto;
} body.light-mode

#pics {
	position: relative;
	width: 60%;
	margin: 0 auto;
	height: auto;
	left: 0;
	text-align: center;
} body.light-mode

#pics img {
	margin-left: 10px;
	margin-bottom: 50px;
	padding: 20px;
} body.light-mode


#vid {
	margin: 0 0 0 0;
	padding-top: 120px;
} body.light-mode

iframe {
} body.light-mode

#wrapper {
	min-height: 100%;
	position: relative;
} body.light-mode

#stuff {
	padding-bottom: 100px;
	margin-bottom: 0;
} body.light-mode

/*project pages*/


/*events page*/ 
#eventstitle {
	height: 0;
	padding-top: 2.5em;
	background-image: url("");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
} body.light-mode

#eventstitle2 {
	width: 100%;
	height: 100px;
	padding-top: 2.5em;
	background-image: url("images/events/covergreenman.jpg");
} body.light-mode/*events page*/



/*social page*/
.crt-post-text {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.1em;
} body.light-mode

.crt-post-fullname {
	font-weight: 300;
	font-family: "EB Garamond", serif;
	color: black;
	font-size: 1em;
} body.light-mode

.crt-grid-post .crt-post-fullname {
	margin-bottom: 12px!important;
     
} body.light-mode

.crt-widget .crt-grid-post .crt-post-hover a {
    color: rgb(0, 0, 0)!important;
	font-weight: normal!important;
} body.light-mode

/*social page*/
@media (max-width: 800px) {
	#slideshow {
		display: block;
		width: 100% !important; /* over-ride all li styles */
		height: 500px !important;
		margin: 0;
		top: 50px;
		margin-bottom: -100px;
	} body.light-mode
	
	#slideshow a img {
		top: 20px;
	} body.light-mode
	
	#about {
		top: 3%;
		font-size: 0.8em;
		width: 90% !important;
	} body.light-mode 
	
	#about p {
		
	} body.light-mode
	
	#nav {
		
	} body.light-mode
	
	#pics {
		
	width: auto;
	} body.light-mode
	
	#text p {
		max-width: 80%;
	} body.light-mode
	
	#text #credit {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 30em;
    text-align: center;
	} body.light-mode
	
	#text #credittext {
    width: 100%;
	} body.light-mode
	
	#text h5 {
	   max-width: 60%!important;
	   width: auto;
   } body.light-mode
	
	#text h6 {
	   max-width: 60%!important;
	   width: auto;
   } body.light-mode
	
	#title {
		font-size:4vw;
	} body.light-mode
	
	.dropdown {
		
	} body.light-mode
	
	.dropdown-content {
		
		background: white;
		width: 100%;
		text-align: left;
	} body.light-mode
	
	
} body.light-mode

#wrapper {
	min-height: 100%;
	position: relative;
} body.light-mode




span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } body.light-mode
span.dropt span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:gray; border-width:1px; z-index: 6;} body.light-mode
span.dropt:hover span {left: 2%; background: #ffffff;} body.light-mode 
span.dropt span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
  border-style:dashed; border-color:gray; border-width:1px; font-family:'Courier'; color:gray; font-size:0.8em;} body.light-mode
span.dropt:hover span {margin: 20px 0 0 60%; background: #ffffff; z-index:6;} body.light-mode 

#footer {
	position: relative;
	left: 0;
	bottom: 2%;
	padding-top: 100px;
	padding-bottom: 50px;
	height: 150px;
	width: 100%;
	line-height: 1.2em;
	display: block;
	font-family: "Josefin Sans", sans-serif;
	text-align: center;
	font-size: 0.8em;
} body.light-mode



::selection {
	color: #f2f2f2;
	background: #cccccc; /* WebKit/Blink Browsers */
} 












body.dark-mode {
	height: 100%;
	width: 100%;
	font-size: 100%;
	background-color: black!important;
	margin: 0;
	padding: 0;
	line-height: 1;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	
} body.dark-mode

#buttons {
	text-align: center;
	position: relative;
	padding-top: 30px;
	padding-bottom: 20px;
	display: block;
	height: auto;
	width: 100%;
	z-index: 9999;
} body.dark-mode

.btn-toggle {
	width: 150px;
	height: 45px;
	display: block;
  margin-left: auto;
  margin-right: auto;
	bottom: 10px;
	text-align: center;
	position: relative;
	background-color: rgb(34, 34, 34);
	cursor: pointer;
	border: solid white 2px;
	border-radius: 6px;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	color: white;
		font-weight: 400;
		font-family: "Josefin Sans", sans-serif;
		font-size: 1.1em;
} body.dark-mode

.btn-toggle:hover {
	background-color: rgb(75, 75, 75);
	box-shadow:rgba(255, 255, 255, 0.5); 
	transform: translateY(-2px);
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
	
} body.dark-mode

.btn-toggle:active {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
	box-shadow:rgba(255, 255, 255, 1); 
	transform: translateY(0px);
  } body.dark-mode

  .btn-toggle:before {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
} body.dark-mode

.btn-toggle:after {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
} body.dark-mode

input {
	text-decoration: none;
	background: none;
	color: gray;
	border: none;
	font-family: "Josefin Sans", sans-serif;
	font-size: 0.8em;
	width: 10em;
	cursor: pointer;
	position: absolute;
} body.dark-mode

#blue {
	position: relative;
	
} body.dark-mode

#pink {
	position: relative;
} body.dark-mode

h1 {
	font-size: 3em;
	font-family: "EB Garamond", serif;
	font-weight: 100;
	color: white!important;
	text-align: center;
	margin-bottom: -10px;
	line-height: 1.2em;
} body.dark-mode

#header {
	color: white!important;
	text-decoration: none;
} body.dark-mode

h2 {
	color: #fff!important;
	font-size: 1.7em;
	font-weight: 100;
	text-align: center;
	font-family: "Baskerville", serif;
} body.dark-mode

#nav {
	color: #fff!important;
	text-align: center;
	margin-bottom: 50px;
	margin-top: 40px;
	margin-left: -10px;
} body.dark-mode

#nav a {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	margin-left: 30px;
	margin-right: 30px;
	
	text-decoration: none;
	position: relative;
	color: #fff!important;
	padding-bottom: 3px;
} body.dark-mode

#nav a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #fff!important;
	transition: 0.2s;
} body.dark-mode

#nav a:hover:after {
	width: 100%;
} body.dark-mode

#nav2 {
	color: #fff!important;
	text-align: center;
	margin-bottom: 40px;
	
} body.dark-mode

#nav2 #contact {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	margin-left: 30px;
	margin-right: 30px;
	text-decoration: none;
	position: relative;
	color: #fff!important;
} body.dark-mode

#nav2 #contact:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #fff!important;
	transition: 0.2s;
} body.dark-mode

#nav2 #contact:hover:after {
	width: 100%;
} body.dark-mode

.dropdown {
  display: inline-block;
  position: relative;
  font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	
	
	text-decoration: none;
	color: #fff!important;
	padding-bottom: 3px;

} body.dark-mode

.dropdown button {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	width: 100%;
	background: none; 
	border: none;
	text-decoration: none;
	position: relative;
	color: #fff!important;
	padding: 0;
	margin-left: 0px;
	margin-right: 0px;
} body.dark-mode



.dropdown-content {
  display: none;
  position: absolute;
  width: auto;
  text-align: center;
  overflow: visible;
  margin: 0;
	padding-top: 0;
	left: 0;
	z-index: 999;
} body.dark-mode
.dropdown:hover .dropdown-content {
  display: block;
} body.dark-mode
.dropdown-content a {
  display: block;
  font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 1em!important;
	text-decoration: none;
	overflow: visible;
	color: #fff!important;
 width: 0;
	margin-bottom: 1em;
	background: rgba(255, 255, 255, 0.5); 
	position: absolute;
	bottom: 0;
	left: 0;


} body.dark-mode

.dropdown-content a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #fff!important;
	transition: 0.2s;
	padding: 0;
} body.dark-mode

.dropdown-content a:hover {
  width: auto;
  position: absolute;
} body.dark-mode


#about {
	overflow: hidden;
	position: relative;
	background-color: transparent;
	top: 27px;
    left: 0;
    right: 0;
    bottom: 0;
	margin: 0 auto 0 auto;
	display: block;
	width: 60%;
	z-index: 99;
	
	-webkit-transition-duration: 3s;
	transition-duration: 3s;
	-webkit-transform: translate(0px, 0);
    -webkit-transition: -webkit-transform 4s ease;
    -moz-transform: translate(0px, 0);
    -moz-transition: -webkit-transform 4s ease;
    transform: translate(0px, 0);
    transition: -webkit-transform 4s ease;
} body.dark-mode

#about p {
	border-width: 5px 5px 0 5px;
	margin-top: 5px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	line-height: 1.5em;
	font-weight: 300;
	color: #fff!important;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	padding: 10px 10px 9px 10px;
	text-align: justify;
} body.dark-mode

a {
	text-decoration: none;
	color: #fff!important;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transform: translate(0px, 0);
} body.dark-mode

#about a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #fff!important;
	transition: 0.5s;
} body.dark-mode

#about a:hover:after {
	width: 100%;
} body.dark-mode

a:hover {
	color: gray;
} body.dark-mode

#a1 {
	border-bottom: 1px dashed #fff!important;
} body.dark-mode

#a1 a:hover:after {
	width: 0%;
} body.dark-mode

div {
		-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
} body.dark-mode

#slideshow {
	height: 600px;
	width: 70%;
	overflow: hidden;
	text-align: center;
    position: relative;
    top: 8em;
	margin: auto;
	margin-bottom: 100px;
	display: block;
} body.dark-mode

#slideshow img {
	position: absolute;
	top: -50px; 
    left: 0px; 
    max-width: 100%;
    min-width: 100%;
    -webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
} body.dark-mode 


#portfolio {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	margin-left: 30px;
	margin-right: 30px;
	text-decoration: none;
	position: relative;
	color: #fff;
	border-bottom: 1px dashed #000;
} body.dark-mode

ul {
	margin: 0;
	padding: 2.5%;
	text-align: center;
} body.dark-mode

ul.rig {
	list-style: none;
	font-size: 0px;
	margin-left: -2.5%; /* should match li left margin */
} body.dark-mode
ul.rig li {
	display: inline-block;
	margin: 0 0 2.5% 2.5%;
	font-size: 16px;
	font-size: 1rem;
	vertical-align: top;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	z-index: 101;
} body.dark-mode
ul.rig li img {
	max-width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
} body.dark-mode

ul.rig li figure {
	overflow: hidden;
	position: relative;
	background: black;
} body.dark-mode

ul.rig li figcaption {
	color: white;
	display: table;
	height: 100%;
	width: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;

	-webkit-transition: all 100ms;
	-moz-transition: all 100ms;
	transition: all 100ms;
	-webkit-transition-delay: 100ms;
	-moz-transition-delay: 100ms;
	transition-delay: 100ms;
} body.dark-mode

ul.rig li figcaption p {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	color: white;
	text-shadow: 1px 1px 8px #000000;
	display: table-cell;
	font-size: 1.2em;
	padding: 30px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 100%;
	text-align: center;
	
} body.dark-mode

ul.rig li figcaption .charity {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	color: white;
	text-shadow: 1px 1px 8px #000000;
	display: table-cell;
	font-size: 1.4em!important;
	padding: 60px;
	padding-top: 0;
	position: relative;
	top: 50%;
	transform: translateY(-55%);
	width: 100%;
	height: 100%;
	text-align: center!important;
	
} body.dark-mode

ul.rig li:hover figcaption {
	opacity: 1;
} body.dark-mode

ul.rig li:hover img {
	opacity: 0.7;
} body.dark-mode

ul.rig li h3 {
	margin: 0 0 5px;
} body.dark-mode
ul.rig li p {
	font-size: .9em;
	line-height: 1.5em;
	color: #999;
} body.dark-mode
/* class for 2 columns */
ul.rig.columns-2 li {
	width: 47.5%; /* this value + 2.5 should = 50% */
} body.dark-mode
/* class for 3 columns */
ul.rig.columns-3 li {
	width: 30.83%; /* this value + 2.5 should = 33% */
} body.dark-mode
/* class for 4 columns */
ul.rig.columns-4 li {
	width: 22.5%; /* this value + 2.5 should = 25% */
} body.dark-mode

@media (max-width: 1500px) {
	ul.grid-nav li {
		display: block;
		margin: 0 0 5px;
	} body.dark-mode
	ul.grid-nav li a {
		display: block;
	} body.dark-mode
	ul.rig {
		margin-left: 0;
	} body.dark-mode
	ul.rig li {
		width: 30.83% !important; /* over-ride all li styles */
		margin: 0 0 20px;
	} body.dark-mode
} body.dark-mode

@media (max-width: 680px) {
	ul.grid-nav li {
		display: block;
		margin: 0 0 5px;
	} body.dark-mode
	ul.grid-nav li a {
		display: block;
	} body.dark-mode
	ul.rig {
		margin-left: 0;
	} body.dark-mode
	ul.rig li {
		width: 100% !important; /* over-ride all li styles */
		margin: 0 0 20px;
	} body.dark-mode
} body.dark-mode

li img {
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-moz-transform: rotate(0);
	-webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
} body.dark-mode
/*porfolio page*/

/*friends/collab/charity pages*/ 
#text {
	margin-top: 5em;
} body.dark-mode

#text #credit {
	width: 60%;
	margin-top: 4em;
	margin-left: 20%;
	margin-right: 20%;
	height: 30em;
	text-align: center;
} body.dark-mode

#text #credittext {
	float: left;
	margin: auto;
	width: 33.33%;
	height: 10em;
} body.dark-mode

#text h3 {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.5em;
	color: white;
	text-shadow: 1.5px 2px 1px #333333;
	line-height: 1.5em;
	top: 0;
	left: 0;
	text-align: center;
	width: auto;
	max-width: 60%;
	margin: auto;
	margin-bottom: 2em;
} body.dark-mode 

#text h4 {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.5em;
	color: white;
	line-height: 1.5em;
	top: 0;
	left: 0;
	text-align: center;
	width: auto;
	max-width: 60%;
	margin: auto;
	margin-bottom: 2em;
} body.dark-mode

#text h5 {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.2em;
	color: gray;
	line-height: 1em;
	top: 0;
	left: 0;
	text-align: center;
	width: auto;
	max-width: 30%;
	margin: auto;
	margin-bottom: 1em;
	padding-bottom: 2em;
} body.dark-mode 

#text h6 {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	color: gray;
	line-height: 1.5em;
	top: 0;
	left: 0;
	text-align: center;
	width: auto;
	max-width: 30%;
	margin: auto;
	margin-bottom: 2em;
	margin-top: -2em;
} body.dark-mode

#friendimg {
	top: 0;
	left: 0;
	max-height: 800px;
	max-width: 100%;
	margin: auto;
	text-align: center;
} body.dark-mode

#text p {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.1em;
	line-height: 1.5em;
	top: 0;
	left: 0;
	width: auto;
	max-width: 60%;
	margin: auto;
	margin-top: 2em;
	text-align: justify;
	margin-bottom: 1em;
} body.dark-mode
/*friends/collab/charity pages*/

/*contact page*/
#contactinfo {
	text-align: center;
	font-family: "Josefin Sans", sans-serif;
	color: #fff;
	font-size: 1em;
	font-weight: 300;
	margin-bottom: 7em;
} body.dark-mode

#contactinfo p {
	text-align: justify;
	line-height: 1.5em;
	
} body.dark-mode

#email {
	position: absolute;
	top: -10px;
	width: 100%;
	
} body.dark-mode

li {
	position: relative;
	list-style: none;
	text-align: center;
	margin: auto;
	max-width: 600px;
} body.dark-mode

#links {
	
	text-decoration: none;
	text-align: center;
	position: relative;
	top: -20px;
	left: 0;
	margin: auto;
	margin-top: 50px;
} body.dark-mode

#links p {
	font-weight: 600;
	font-family: "Josefin Sans", sans-serif;
	color: #fff;
	font-size: 1.1em;
	line-height: 1.5em;
	text-decoration: none;
	text-align: center;
	
} body.dark-mode

#links p a {
	color: #fff;
	text-decoration: none;
} body.dark-mode

#links p a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #fff;
	transition: 0.2s;
} body.dark-mode

#links p a:hover:after {
	width: 100%;
} body.dark-mode
/*contact page*/

/*project pages*/#fmptitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/fmp/0.jpg");
} body.dark-mode

#origamititle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/origami/cover.jpg");
} body.dark-mode 

#reflectivetitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/reflective/12.jpg");
} body.dark-mode 

#brandtitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/brand/1.jpg");
} body.dark-mode

#jeanstitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/jeans/2.jpg");
} body.dark-mode

#industrytitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/industry/cover.jpg");
} body.dark-mode

#graduatetitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/graduate/cover.jpg");
} body.dark-mode

#eventstitle {
	width: 100%;
	height: 500px;
	padding-top: 2.5em;
	background-image: url("images/events/covergreenman2.png");
} body.dark-mode

#eventstitle2 {
	width: 100%;
	height: 100px;
	padding-top: 2.5em;
	background-image: url("images/events/covergreenman.jpg");
} body.dark-mode

#title {
	display: table;
	height: 200px;
	max-width: 100%;
	left: 0;
	text-align: center;
	margin: auto;
	position: relative;
	right: 0;
	top: 25%;
} body.dark-mode

#title h3 {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 4em;
	color: white;
	text-shadow: 1.5px 2px 1px #333333;
	line-height: 1.5em;
	display: table-cell;
	padding: 30px;
	position: relative;
	top: 75%;
	transform: translateY(-50%);
	width: 100%;
	height: auto;
	text-align: center;
	z-index: 999;
} body.dark-mode

#text p {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.1em;
	line-height: 1.5em;
	top: 0;
	left: 0;
	width: auto;
	max-width: 60%;
	margin: auto;
	margin-top: 2em;
	text-align: justify;
	margin-bottom: 1em;
	color: #fff;
} body.dark-mode



#portfolio {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	margin-left: 30px;
	margin-right: 30px;
	text-decoration: none;
	position: relative;
	color: #fff;
	border-bottom: 1px dashed #fff;
} body.dark-mode

#things {
	left: 0;
	position: relative;
	width: 100%;
	height: 25%;
	text-align: center;
	top: 80%;
	margin-left: auto;
	margin-right: auto;
} body.dark-mode

#pics {
	position: relative;
	width: 60%;
	margin: 0 auto;
	height: auto;
	left: 0;
	text-align: center;
} body.dark-mode

#pics img {
	margin-left: 10px;
	margin-bottom: 50px;
	padding: 20px;
} body.dark-mode


#vid {
	margin: 0 0 0 0;
	padding-top: 120px;
} body.dark-mode

iframe {
} body.dark-mode

#wrapper {
	min-height: 100%;
	position: relative;
} body.dark-mode

#stuff {
	padding-bottom: 100px;
	margin-bottom: 0;
} body.dark-mode

/*project pages*/


/*events page*/ 
#eventstitle {
	height: 0;
	padding-top: 2.5em;
	background-image: url("");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
} body.dark-mode

#eventstitle2 {
	width: 100%;
	height: 100px;
	padding-top: 2.5em;
	background-image: url("images/events/covergreenman.jpg");
} body.dark-mode/*events page*/



/*social page*/
.crt-post-text {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.1em;
} body.dark-mode

.crt-post-fullname {
	font-weight: 300;
	font-family: "EB Garamond", serif;
	color: white;
	font-size: 1em;
} body.dark-mode

.crt-grid-post .crt-post-fullname {
	margin-bottom: 12px!important;
     
} body.dark-mode

.crt-widget .crt-grid-post .crt-post-hover a {
    color: rgb(0, 0, 0)!important;
	font-weight: normal!important;
} body.dark-mode

/*social page*/
@media (max-width: 800px) {
	#slideshow {
		display: block;
		width: 100% !important; /* over-ride all li styles */
		height: 500px !important;
		margin: 0;
		top: 50px;
		margin-bottom: -100px;
	} body.dark-mode
	
	#slideshow a img {
		top: 20px;
	} body.dark-mode
	
	#about {
		top: 3%;
		font-size: 0.8em;
		width: 90% !important;
	} body.dark-mode 
	
	#about p {
		
	} body.dark-mode
	
	#nav {
		
	} body.dark-mode
	
	#pics {
		
	width: auto;
	} body.dark-mode
	
	#text p {
		max-width: 80%;
	} body.dark-mode
	
	#text #credit {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 30em;
    text-align: center;
	} body.dark-mode
	
	#text #credittext {
    width: 100%;
	} body.dark-mode
	
	#text h5 {
	   max-width: 60%!important;
	   width: auto;
   } body.dark-mode
	
	#text h6 {
	   max-width: 60%!important;
	   width: auto;
   } body.dark-mode
	
	#title {
		font-size:4vw;
	} body.dark-mode
	
	.dropdown {
		
	} body.dark-mode
	
	.dropdown-content {
		
		background: white;
		width: 100%;
		text-align: left;
	} body.dark-mode
	
	
} body.dark-mode

#wrapper {
	min-height: 100%;
	position: relative;
	background-color: #000;
} body.dark-mode




span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } body.dark-mode
span.dropt span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:gray; border-width:1px; z-index: 6;} body.dark-mode
span.dropt:hover span {left: 2%; background: #ffffff;} body.dark-mode 
span.dropt span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
  border-style:dashed; border-color:gray; border-width:1px; font-family:'Courier'; color:gray; font-size:0.8em;} body.dark-mode
span.dropt:hover span {margin: 20px 0 0 60%; background: #ffffff; z-index:6;} body.dark-mode 

#footer {
	position: relative;
	left: 0;
	bottom: 2%;
	padding-top: 100px;
	padding-bottom: 50px;
	height: 150px;
	width: 100%;
	line-height: 1.2em;
	display: block;
	font-family: "Josefin Sans", sans-serif;
	text-align: center;
	font-size: 0.8em;
	color: #f2f2f2;
} body.dark-mode

::selection {
	color: #000;
	background: #cccccc; /* WebKit/Blink Browsers */
}












body {
	height: 100%;
	width: 100%;
	font-size: 100%;
	background-color: white;
	margin: 0;
	padding: 0;
	line-height: 1;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
} body

#buttons {
	text-align: center;
	position: relative;
	padding-top: 30px;
	padding-bottom: 20px;
	display: block;
	height: auto;
	width: 100%;
	z-index: 9999;
} body

.btn-toggle {
	width: 150px;
	height: 45px;
	display: block;
  margin-left: auto;
  margin-right: auto;
	bottom: 10px;
	text-align: center;
	position: relative;
	background-color: rgb(34, 34, 34);
	cursor: pointer;
	border: solid white 2px;
	border-radius: 6px;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	color: white;
		font-weight: 400;
		font-family: "Josefin Sans", sans-serif;
		font-size: 1.1em;
} body

.btn-toggle:hover {
	background-color: rgb(75, 75, 75);
	box-shadow:rgba(255, 255, 255, 0.5); 
	transform: translateY(-2px);
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
	
}

.btn-toggle:active {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
	box-shadow:rgba(255, 255, 255, 1); 
	transform: translateY(0px);
  }

  .btn-toggle:before {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
} body

.btn-toggle:after {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
} body


input {
	text-decoration: none;
	background: none;
	color: gray;
	border: none;
	font-family: "Josefin Sans", sans-serif;
	font-size: 0.8em;
	width: 10em;
	cursor: pointer;
	position: absolute;
} body

#blue {
	position: relative;
	
} body

#pink {
	position: relative;
} body

h1 {
	font-size: 3em;
	font-family: "EB Garamond", serif;
	font-weight: 100;
	color: black;
	text-align: center;
	margin-bottom: -10px;
	line-height: 1.2em;
} body

#header {
	color: black;
	text-decoration: none;
} body

h2 {
	color: #4d4d4d;
	font-size: 1.7em;
	font-weight: 100;
	text-align: center;
	font-family: "Baskerville", serif;
} body

#nav {
	color: #000000;
	text-align: center;
	margin-bottom: 50px;
	margin-top: 40px;
	margin-left: -10px;
} body

#nav a {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	margin-left: 30px;
	margin-right: 30px;
	
	text-decoration: none;
	position: relative;
	color: #000000;
	padding-bottom: 3px;
} body

#nav a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #000000;
	transition: 0.2s;
} body

#nav a:hover:after {
	width: 100%;
} body

#nav2 {
	color: #000000;
	text-align: center;
	margin-bottom: 40px;
	
} body

#nav2 #contact {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	margin-left: 30px;
	margin-right: 30px;
	text-decoration: none;
	position: relative;
	color: #000000;
} body

#nav2 #contact:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #000000;
	transition: 0.2s;
} body

#nav2 #contact:hover:after {
	width: 100%;
} body

.dropdown {
  display: inline-block;
  position: relative;
  font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	
	
	text-decoration: none;
	color: #000000;
	padding-bottom: 3px;

} body

.dropdown button {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	width: 100%;
	background: none; 
	border: none;
	text-decoration: none;
	position: relative;
	color: #000000;
	padding: 0;
	margin-left: 0px;
	margin-right: 0px;
} body



.dropdown-content {
  display: none;
  position: absolute;
  width: auto;
  text-align: center;
  overflow: visible;
  margin: 0;
	padding-top: 0;
	left: 0;
	z-index: 999;
} body
.dropdown:hover .dropdown-content {
  display: block;
} body
.dropdown-content a {
  display: block;
  font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 1em!important;
	text-decoration: none;
	overflow: visible;
	color: #000000;
 width: 0;
	margin-bottom: 1em;
	background: rgba(255, 255, 255, 0.5); 
	position: absolute;
	bottom: 0;
	left: 0;


} body

.dropdown-content a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #000000;
	transition: 0.2s;
	padding: 0;
} body

.dropdown-content a:hover {
  width: auto;
  position: absolute;
} body


#about {
	overflow: hidden;
	position: relative;
	background-color: transparent;
	top: 27px;
    left: 0;
    right: 0;
    bottom: 0;
	margin: 0 auto 0 auto;
	display: block;
	width: 60%;
	z-index: 99;
	
	-webkit-transition-duration: 3s;
	transition-duration: 3s;
	-webkit-transform: translate(0px, 0);
    -webkit-transition: -webkit-transform 4s ease;
    -moz-transform: translate(0px, 0);
    -moz-transition: -webkit-transform 4s ease;
    transform: translate(0px, 0);
    transition: -webkit-transform 4s ease;
} body

#about p {
	border-width: 5px 5px 0 5px;
	margin-top: 5px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	line-height: 1.5em;
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	padding: 10px 10px 9px 10px;
	text-align: justify;
} body

a {
	text-decoration: none;
	color: black;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transform: translate(0px, 0);
} body

#about a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #000000;
	transition: 0.5s;
} body

#about a:hover:after {
	width: 100%;
} body

a:hover {
	color: gray;
} body

#a1 {
	border-bottom: 1px dashed #000000!important;
} body

#a1 a:hover:after {
	width: 0%;
} body

div {
		-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
} body

#slideshow {
	height: 600px;
	width: 70%;
	overflow: hidden;
	text-align: center;
    position: relative;
    top: 8em;
	margin: auto;
	margin-bottom: 100px;
	display: block;
} body

#slideshow img {
	position: absolute;
	top: -50px; 
    left: 0px; 
    max-width: 100%;
    min-width: 100%;
    -webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
} body 

/*porfolio page*/
#portfolio {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	margin-left: 30px;
	margin-right: 30px;
	text-decoration: none;
	position: relative;
	color: #000000;
	border-bottom: 1px dashed #000000;
} body

ul {
	margin: 0;
	padding: 2.5%;
	text-align: center;
} body

ul.rig {
	list-style: none;
	font-size: 0px;
	margin-left: -2.5%; /* should match li left margin */
} body
ul.rig li {
	display: inline-block;
	margin: 0 0 2.5% 2.5%;
	font-size: 16px;
	font-size: 1rem;
	vertical-align: top;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	z-index: 101;
} body
ul.rig li img {
	max-width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
} body

ul.rig li figure {
	overflow: hidden;
	position: relative;
	background: black;
} body

ul.rig li figcaption {
	color: white;
	display: table;
	height: 100%;
	width: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;

	-webkit-transition: all 100ms;
	-moz-transition: all 100ms;
	transition: all 100ms;
	-webkit-transition-delay: 100ms;
	-moz-transition-delay: 100ms;
	transition-delay: 100ms;
} body

ul.rig li figcaption p {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	color: white;
	text-shadow: 1px 1px 8px #000000;
	display: table-cell;
	font-size: 1.2em;
	padding: 30px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 100%;
	text-align: center;
	
} body

ul.rig li figcaption .charity {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	color: white;
	text-shadow: 1px 1px 8px #000000;
	display: table-cell;
	font-size: 1.4em!important;
	padding: 60px;
	padding-top: 0;
	position: relative;
	top: 50%;
	transform: translateY(-55%);
	width: 100%;
	height: 100%;
	text-align: center!important;
	
} body

ul.rig li:hover figcaption {
	opacity: 1;
} body

ul.rig li:hover img {
	opacity: 0.7;
} body

ul.rig li h3 {
	margin: 0 0 5px;
} body
ul.rig li p {
	font-size: .9em;
	line-height: 1.5em;
	color: #999;
} body
/* class for 2 columns */
ul.rig.columns-2 li {
	width: 47.5%; /* this value + 2.5 should = 50% */
} body
/* class for 3 columns */
ul.rig.columns-3 li {
	width: 30.83%; /* this value + 2.5 should = 33% */
} body
/* class for 4 columns */
ul.rig.columns-4 li {
	width: 22.5%; /* this value + 2.5 should = 25% */
} body

@media (max-width: 1500px) {
	ul.grid-nav li {
		display: block;
		margin: 0 0 5px;
	} body
	ul.grid-nav li a {
		display: block;
	} body
	ul.rig {
		margin-left: 0;
	} body
	ul.rig li {
		width: 30.83% !important; /* over-ride all li styles */
		margin: 0 0 20px;
	} body
} body

@media (max-width: 680px) {
	ul.grid-nav li {
		display: block;
		margin: 0 0 5px;
	} body
	ul.grid-nav li a {
		display: block;
	} body
	ul.rig {
		margin-left: 0;
	} body
	ul.rig li {
		width: 100% !important; /* over-ride all li styles */
		margin: 0 0 20px;
	} body
} body

li img {
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-moz-transform: rotate(0);
	-webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
} body
/*porfolio page*/

/*friends/collab/charity pages*/ 
#text {
	margin-top: 5em;
} body

#text #credit {
	width: 60%;
	margin-top: 4em;
	margin-left: 20%;
	margin-right: 20%;
	height: 30em;
	text-align: center;
} body

#text #credittext {
	float: left;
	margin: auto;
	width: 33.33%;
	height: 10em;
} body

#text h3 {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.5em;
	color: white;
	text-shadow: 1.5px 2px 1px #333333;
	line-height: 1.5em;
	top: 0;
	left: 0;
	text-align: center;
	width: auto;
	max-width: 60%;
	margin: auto;
	margin-bottom: 2em;
} body 

#text h4 {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.5em;
	color: black;
	line-height: 1.5em;
	top: 0;
	left: 0;
	text-align: center;
	width: auto;
	max-width: 60%;
	margin: auto;
	margin-bottom: 2em;
} body

#text h5 {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.2em;
	color: gray;
	line-height: 1em;
	top: 0;
	left: 0;
	text-align: center;
	width: auto;
	max-width: 30%;
	margin: auto;
	margin-bottom: 1em;
	padding-bottom: 2em;
} body 

#text h6 {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	color: gray;
	line-height: 1.5em;
	top: 0;
	left: 0;
	text-align: center;
	width: auto;
	max-width: 30%;
	margin: auto;
	margin-bottom: 2em;
	margin-top: -2em;
} body

#friendimg {
	top: 0;
	left: 0;
	max-height: 800px;
	max-width: 100%;
	margin: auto;
	text-align: center;
} body

#text p {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.1em;
	line-height: 1.5em;
	top: 0;
	left: 0;
	width: auto;
	max-width: 60%;
	margin: auto;
	margin-top: 2em;
	text-align: justify;
	margin-bottom: 1em;
} body
/*friends/collab/charity pages*/

/*contact page*/
#contactinfo {
	text-align: center;
	font-family: "Josefin Sans", sans-serif;
	color: #000;
	font-size: 1em;
	font-weight: 300;
	margin-bottom: 7em;
} body

#contactinfo p {
	text-align: justify;
	line-height: 1.5em;
	
} body

#email {
	position: absolute;
	top: -10px;
	width: 100%;
	
} body

li {
	position: relative;
	list-style: none;
	text-align: center;
	margin: auto;
	max-width: 600px;
} body

#links {
	
	text-decoration: none;
	text-align: center;
	position: relative;
	top: -20px;
	left: 0;
	margin: auto;
	margin-top: 50px;
} body

#links p {
	font-weight: 600;
	font-family: "Josefin Sans", sans-serif;
	color: #000000;
	font-size: 1.1em;
	line-height: 1.5em;
	text-decoration: none;
	text-align: center;
	
} body

#links p a {
	color: #000000;
	text-decoration: none;
} body

#links p a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 1px dashed #000000;
	transition: 0.2s;
} body

#links p a:hover:after {
	width: 100%;
} body
/*contact page*/

/*project pages*/#fmptitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/fmp/0.jpg");
} body

#origamititle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/origami/cover.jpg");
} body 

#reflectivetitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/reflective/12.jpg");
} body 

#brandtitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/brand/1.jpg");
} body

#jeanstitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/jeans/2.jpg");
} body

#industrytitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/industry/cover.jpg");
} body

#graduatetitle {
	max-width: 100%;
	height: 800px;
	position: relative;
	margin: auto;
	padding-top: 5%;
	background-image: url("images/graduate/cover.jpg");
} body

#eventstitle {
	width: 100%;
	height: 500px;
	padding-top: 2.5em;
	background-image: url("images/events/covergreenman2.png");
} body

#eventstitle2 {
	width: 100%;
	height: 100px;
	padding-top: 2.5em;
	background-image: url("images/events/covergreenman.jpg");
} body

#title {
	display: table;
	height: 200px;
	max-width: 100%;
	left: 0;
	text-align: center;
	margin: auto;
	position: relative;
	right: 0;
	top: 25%;
} body

#title h3 {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 4em;
	color: white;
	text-shadow: 1.5px 2px 1px #333333;
	line-height: 1.5em;
	display: table-cell;
	padding: 30px;
	position: relative;
	top: 75%;
	transform: translateY(-50%);
	width: 100%;
	height: auto;
	text-align: center;
	z-index: 999;
} body

#text p {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.1em;
	line-height: 1.5em;
	top: 0;
	left: 0;
	width: auto;
	max-width: 60%;
	margin: auto;
	margin-top: 2em;
	text-align: justify;
	margin-bottom: 1em;
} body

#portfolio {
	font-weight: 400;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1em;
	line-height: 3em;
	margin-left: 30px;
	margin-right: 30px;
	text-decoration: none;
	position: relative;
	color: #000000;
	border-bottom: 1px dashed #000000;
} body

#things {
	left: 0;
	position: relative;
	width: 100%;
	height: 25%;
	text-align: center;
	top: 80%;
	margin-left: auto;
	margin-right: auto;
} body

#pics {
	position: relative;
	width: 60%;
	margin: 0 auto;
	height: auto;
	left: 0;
	text-align: center;
} body

#pics img {
	margin-left: 10px;
	margin-bottom: 50px;
	padding: 20px;
} body


#vid {
	margin: 0 0 0 0;
	padding-top: 120px;
} body

iframe {
} body

#wrapper {
	min-height: 100%;
	position: relative;
} body

#stuff {
	padding-bottom: 100px;
	margin-bottom: 0;
} body

/*project pages*/


/*events page*/ 
#eventstitle {
	height: 0;
	padding-top: 2.5em;
	background-image: url("");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
} body

#eventstitle2 {
	width: 100%;
	height: 100px;
	padding-top: 2.5em;
	background-image: url("images/events/covergreenman.jpg");
} body/*events page*/



/*social page*/
.crt-post-text {
	font-weight: 300;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.1em;
} body

.crt-post-fullname {
	font-weight: 300;
	font-family: "EB Garamond", serif;
	color: black;
	font-size: 1em;
} body

.crt-grid-post .crt-post-fullname {
	margin-bottom: 12px!important;
     
} body

.crt-widget .crt-grid-post .crt-post-hover a {
    color: rgb(0, 0, 0)!important;
	font-weight: normal!important;
} 

/*social page*/
@media (max-width: 800px) {
	#slideshow {
		display: block;
		width: 100% !important; /* over-ride all li styles */
		height: 500px !important;
		margin: 0;
		top: 50px;
		margin-bottom: -100px;
	} body
	
	#slideshow a img {
		top: 20px;
	} body
	
	#about {
		top: 3%;
		font-size: 0.8em;
		width: 90% !important;
	} body 
	
	#about p {
		
	} body
	
	#nav {
		
	} body
	
	#pics {
		
	width: auto;
	} body
	
	#text p {
		max-width: 80%;
	} body
	
	#text #credit {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 30em;
    text-align: center;
	} body
	
	#text #credittext {
    width: 100%;
	} body
	
	#text h5 {
	   max-width: 60%!important;
	   width: auto;
   } body
	
	#text h6 {
	   max-width: 60%!important;
	   width: auto;
   } body
	
	#title {
		font-size:4vw;
	} body
	
	.dropdown {
		
	} body
	
	.dropdown-content {
		
		background: white;
		width: 100%;
		text-align: left;
	} body
	
	
}

#wrapper {
	min-height: 100%;
	position: relative;
} body




span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } body
span.dropt span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:gray; border-width:1px; z-index: 6;} body
span.dropt:hover span {left: 2%; background: #ffffff;} body 
span.dropt span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
  border-style:dashed; border-color:gray; border-width:1px; font-family:'Courier'; color:gray; font-size:0.8em;} body
span.dropt:hover span {margin: 20px 0 0 60%; background: #ffffff; z-index:6;} body 

#footer {
	position: relative;
	left: 0;
	bottom: 2%;
	padding-top: 100px;
	padding-bottom: 50px;
	height: 150px;
	width: 100%;
	line-height: 1.2em;
	display: block;
	font-family: "Josefin Sans", sans-serif;
	text-align: center;
	font-size: 0.8em;
} body



::selection {
	color: #f2f2f2;
	background: #cccccc; /* WebKit/Blink Browsers */
}