body {
	font-family:"helveticaneue-light", sans-serif;
	margin:0;
	padding:0;
	padding-bottom:20px;
    max-width: 100%;
}

a {
	text-decoration:none;
	color:rgb(63,163,160);
}

a:hover{
	text-decoration:none;
	color:rgb(124, 129, 190);
}

.clear {
	clear: both;
}

/* !!!!!!! Landing Page !!!!!!! */

header {
	padding:5px 10px;
	display:inline;
	font-size:28px;
	font-weight:normal;
}

header small {
	font-size:18px;
	padding-left:10px;
}

header a {
	font-size:16px; 
	text-decoration:none;
	font:green;
	padding-right:20px;
}

#nav {
	display:inline;
	float:right;
}

#tree {
	background-image: url("tree.png");
	background-repeat:no-repeat;
	background-position:top center;
	max-height:640px;
	width: 750px;
	height:90vh;
	margin-left:auto;
	margin-right:auto;
	opacity:.8;
	-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#home {
	background:gainsboro;
	height:90vh;
}


#desc {
	float:right;
	clear:all;
	margin-top:400px;
	margin-right:5px;
	width:30%;
	font-size:1.6vw;
}

small {
	color:darkslategray;
}

@media (max-width: 320px) {
	#tree {
		-webkit-clip-path: polygon(50% 100%, 10% 0, 90% 0);
	}
}


.logo {
	width:30%;
	padding:0;
	margin-top:360px;
	margin-left:10px;
	float:left;
}



/* !!!!! sprites !!!!!*/

#gd a {
	display:block;
	width:100%;
	height:100%;
}

#gd {
	background-image: url("Untitled-3.png");
	width:250px;
	min-width:250px;
	height:230px;
	background-position: -250px 230px;
	display:inline-block;
	padding:0;
	margin:0;
	-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
	clip-path: polygon(50% 100%, 0 0, 100% 0);

}



#gd:hover {
	background-image: url("Untitled-3.png");
	width:250px;
	min-width:250px;
	height:230px;
	background-position: 0 230px;
}



#photo a {
	display:block;
	width:100%;
	height:100%;
}

#photo {
	background-image: url("Untitled-3.png");
	width:250px;
	min-width:250px;
	height:230px;
	background-position: 0 -5px;
	display:inline-block;
	padding:0;
	-webkit-clip-path: polygon(50% 0%, 0% 92%, 100% 92%);
	clip-path: polygon(50% 0%, 0% 92%, 100% 92%);
}

#photo:hover {
	background-image: url("Untitled-3.png");
	width:250px;
	min-width:250px;
	height:230px;
	background-position: -250px -5px;
}

#photo:active {
	background-image: url("Untitled-3.png");
	width:250px;
	min-width:250px;
	height:230px;
	background-position: 0 -5px;
}

#misc a {
	display:block;
	width:100%;
	height:100%;
}

#misc {
	background-image: url("Untitled-3.png");
	width:250px;
	min-width:250px;
	height:230px;
	background-position: 500px -5px;
	display:inline-block;
	padding:0;
	margin:0;
	-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
	clip-path: polygon(50% 100%, 0 0, 100% 0);
}

#misc:hover {
	background-image: url("Untitled-3.png");
	width:250px;
	min-width:250px;
	height:230px;
	background-position: 250px -5px;
	
}



#center{
	text-align:center;
	padding-top:100px;
}

#cat {
	padding:10px 30px;
	height:600px;
	font-size:24px;
}

#cat small {
	font-size:16px;
	padding-left:10px;
}

@media (max-width:850px){
	#gd, #photo, #misc {
		display:block;
		margin-right:auto;
		margin-left:auto;
	}
	#cat {
		height:100%;
	}
}
/* !!!!!!! about page !!!!!!!!! */
/*


#title {
	font-size:24px;
	padding:10px 30px;
}

#about p {
	width:630px;
	line-height:24px;
	font-size:18px;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
}

#about img {
	padding-top:20px;
	margin:0;
	width:100vw;
}

.aboutnav {
    li a {
    color:color:rgb(63,163,160);
}

li a:hover {
    color:rgb(124, 129, 190);
}
    
}
*/

/* !!!!!! category pages !!!!! */

#overflow img {
      max-width: 100%;
      max-height: 100%;

}


#overflow {
    padding-right:20px;
    padding-bottom:0px;
    padding-top:0px;
    margin:0px;
    max-height:400px;
}

#grid {
    padding-top:20px;
}

#overflow:hover{
	opacity: .7;
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: ease-out;	
}

#text {
	position:relative;
    top:-250px;
    left:15px;
	padding:10px;
	opacity: 0;
	width:80%;
	background:rgba(250, 250, 250, 0.6);
	transition-duration: .5s;
	transition-timing-function: ease-out;
}

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

#overflow:hover #text{
	opacity:1;
}


#grid .span4 {
    padding:0;
    margin:0;
}

/*
#grid .row-fluid {
    margin-bottom: 20px;
}
*/

/* !!!!! nav !!!!! */

ul {
	list-style-type:none;
	padding-left:10px;
	line-height:35px;
    height:100vh;
}

li {
    border-bottom: white solid 1px;
    padding-left: 0px;
}

.main a {
    color:white;
}

li a:hover {
   color:rgb(63,163,160);
}

ul > ul {
	display:none;
	padding-left:25px;
	font-size:14px;
	line-height:18px;
}

ul:hover > ul {
	display:block;
	position:absolute;
	
}




/* !!!!!!! PROJECT PG  !!!!!!! */

img.proj {
	max-width:1200px;
	width:55%;
	padding-left:170px;
	padding-top:50px;
	min-width:325px;
}

video {
        max-width:1200px;
	width:55%;
	padding-left:170px;
	padding-top:50px;
	min-width:325px;
}

.instagram-media {
	padding-left:170px;
	padding-top:50px;
}

#info {
	float:right;
	position:fixed;
	top:0;
	right:0;
	width:19%;
	min-width:150px;
	padding:10px;
	padding-left:80px;
	vertical-align:top;
/* 	background:gainsboro; */
	color:darkslategray;
	-webkit-clip-path: polygon(100% 0%, 100% 100%, 20% 100%, 0% 50%, 20% 0%);
	clip-path: polygon(100% 0%, 100% 100%, 20% 100%, 0% 50%, 20% 0%);
	background: -moz-linear-gradient(left,  rgba(220,220,220,1) 0%, rgba(239,239,239,0.9) 53%, rgba(255,255,255,0.9) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(220,220,220,1)), color-stop(53%,rgba(239,239,239,0.9)), color-stop(100%,rgba(255,255,255,0.9))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(220,220,220,1) 0%,rgba(239,239,239,0.9) 53%,rgba(255,255,255,0.9) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(220,220,220,1) 0%,rgba(239,239,239,0.9) 53%,rgba(255,255,255,0.9) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(220,220,220,1) 0%,rgba(239,239,239,0.9) 53%,rgba(255,255,255,0.9) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(220,220,220,1) 0%,rgba(239,239,239,0.9) 53%,rgba(255,255,255,0.9) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#e6ffffff',GradientType=1 ); /* IE6-9 */
}

#info a {
	padding-right: 10px;
}

#inccat {
	padding-top:50px;
	text-align:center;
}


/*
@media (max-width:970px) {
	#info {
	-webkit-clip-path: polygon(100% 0%, 100% 100%, 0 100%, 0 0);
	padding:10px;
	padding-left:25px;
}
*/

@media (max-width: 800px) {
	#info {
		float:none;
		width:200px;
		margin-right:auto;
		margin-left:auto;
		position:static;
	}
}


img.photo {
	max-width:1000px;
	width:60%;
	padding-left:4%;
	padding-top:100px;
	min-width:325px;
}
    
   
    
/* !!!! ABOUT  !!!!!*/
    .about, .contact{ 
    background: #586BB2; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top, #9676B5, #586BB2, #22AC9B, #0085B3); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left top, #9676B5, #586BB2, #22AC9B, #0085B3); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left top, #9676B5, #586BB2, #22AC9B, #0085B3); /* For Firefox 3.6 to 15 */
    background: linear-gradient(left top, #9676B5, #586BB2, #22AC9B, #0085B3); /* Standard syntax */
    margin:0;
    padding:50px;
    padding-left:200px;
    color:white; 
    line-height:25px;
}
.contact {
    height:90vh;
}

.about object {
    padding-top:50px;
}

/*    SIDE NAV */
nav {
    background: #586BB2;  /*For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top, #9676B5, #586BB2, #22AC9B, #0085B3);  /*For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left top, #9676B5, #586BB2, #22AC9B, #0085B3); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left top, #9676B5, #586BB2, #22AC9B, #0085B3); /* For Firefox 3.6 to 15 */
    background: linear-gradient(left top, #9676B5, #586BB2, #22AC9B, #0085B3); /* Standard syntax */
    position:fixed;
    width:150px;
}

nav img {
    width:150px;
}

.aboutnav {
    background:white;
}

.aboutnav li {
    color:rgb(63,163,160); 
    
}

.aboutnav {
    color:rgb(63,163,160);
    
}

.aboutnav li a:hover {
    color:rgb(124, 129, 190);
}

.test {
    padding:0px;
    margin:0px;
    width:95%;
    
}

.container {
    padding-left:150px;
    margin:0px;
    display:inline-block;
}