#container{
	margin-left:auto;
	margin-right:auto;
}

/*///////////////// Navigation Bar /////////////////*/

	header{
		width:100%;
		margin-top: 25px;
	}

	.logo{
		padding-left:25px;
		padding-right:25px; 

		font-family: 'Lato', serif;
		font-weight: bold;
		font-size: 11pt;
		letter-spacing: 2px;
		text-decoration: none;
		color:rgba(180,180,180,1.00);

		line-height: 25px;

		border-style: solid;
	    border: initial solid rgba(180,180,180,1.00);
	    border-width: 3px;
	}

	nav a{
		display: inline-block;
		font-family: 'Lato', serif;
		font-weight: bold;
		font-size: 11pt;
		letter-spacing: 2px;
		text-decoration: none;
		color:rgba(180,180,180,1.00);
		
		line-height: 25px;

		border-style: solid;
	    border-bottom: initial solid rgba(180,180,180,1.00);
	    border-bottom-width: 3px;	

	    transition: color 500ms ease-in;
	}

	nav a:hover{
		color:rgba(90,90,90,1.00);

		transition: color 500ms ease-out;

	}

/*///////////////// Gallery /////////////////*/

	#Gallery{
	 	overflow: auto
	}

	#Gallery li{
		float: left;
		background-size: cover;
		background-position: center; 
	}

	#Gallery a{
		position: relative;
		text-align: center;
		line-height: 100%;

		display: block;
		background-color: rgba(255,255,255,.0);

		transition: background-color 500ms ease-out;
	}

	#Gallery a:hover {
		background-color: rgba(255,255,255,.95);
		
	}

	#Gallery a:hover .title{
		opacity: 1;
		transition: opacity 1000ms ease-in;
	}

	.title{
		font-size: 16pt;
		text-decoration: none;
		text-align: center;

		color: rgba(26,26,26,1);

		font-family: 'Lato', serif;
		font-weight: bold;


		position: absolute;
	    top: 50%;
	    left: 0;
	    transform: translateY(-50%);
	    width: 100%;

	    opacity: 0;
	    transition: opacity 500ms ease-out;

	}

	.subtitle{
		font-size: 11pt;
		text-decoration: none;

		color: rgba(100,100,100,1);

		font-family: 'PT Serif', serif;
		font-weight: lighter;


		display: inline-block;
		margin-top: 15px;
	}


	#park{
		background-image: url(../images/PleistoceneCover.jpg);
	}

	#affinity{
		background-image: url(../images/AffinityCover.jpg);
	}

	#bardiches{
		background-image: url(../images/BardichesCover.jpg);	
	}

	#queen{
		background-image: url(../images/QueenCover.jpg);
	}

/*	#poster{
		background-image: url(../images/OffensiveCover.jpg);
		
	}*/

	#kindeva{
		background-image: url(../images/KindevaCover.jpg);
	}

	#bind{
		background-image: url(../images/BindCover.jpg);
	}

	#panda{
		background-image: url(../images/PandaCover.jpg);
	}

	#various{
		background-image: url(../images/VariousCover.jpg);
	}


	/*/disabled; remove once forest in finished/*/

	/*.disabled{
	    
	}*/


/*///////////////// About /////////////////*/

	hr{
		border: 2px solid rgba(240,240,240,1.00);
	}

	#About{
		overflow: hidden;
		margin-left:2%; 
		margin-right:2%;
		clear: both;

		margin-bottom: 160px;
		display: flex;

	}

	#AboutPortrait{
		background-image: url(../images/Portrait.jpg);
		background-position: bottom center;
		background-size: auto 100%;
		background-repeat: no-repeat;

		width:30%;
		min-height: 100%;
		display: inline-block;

		margin-right: 10%;
	}

	#AboutText{
		width: 60%;
		display: inline-block;
	}

	#AboutText h2,h3{
		font-family: 'Lato', serif;
		font-weight: bold;
		font-size: 12pt;
		letter-spacing: 2px;
		color:rgba(180,180,180,1.00);

		margin-bottom: 20px;
	}

	#About p{
		line-height: 30px;
		font-family: 'Lato', serif;
		font-weight: thin;
		font-size: 12pt;
		word-spacing: 2px;
		letter-spacing: .6px;
		color:rgba(80,80,80,1.00);
	}

	.AboutLink {
		text-decoration: none;
		letter-spacing: 1px;
		font-weight: bold;


		padding-bottom: 5px;
	    border-bottom: 3px solid rgba(180,180,180,1.00);
		color:rgba(80,80,80,1.00);
	}

	.AboutLists{
		display: inline-block;
		vertical-align:top;
	}

	.AboutLists.Margin{
		/*min-width: 14px;*/
		width: 10%;
	}

	.AboutLists h3{
		font-family: 'Lato', serif;
		font-weight: bold;
		font-size: 12pt;
		letter-spacing: 2px;
		color:rgba(180,180,180,1.00);

		margin-bottom: 20px;
	}

	.AboutLists li{
		line-height: 30px;
		font-family: 'Lato', serif;
		font-weight: thin;
		font-size: 12pt;
		color:rgba(80,80,80,1.00);

		text-decoration: none;
	}

	.AboutLists a{
		color:rgba(80,80,80,1.00);
		text-decoration: none;
		 transition: color 200ms ease-out;
	}

	.AboutLists a:hover{
		color:rgba(20,20,20,1.00);
		 transition: color 200ms ease-in;
	}

/*///////////////// Footer /////////////////*/

	#Footer{
		height:60px;
		width: 100%;
		background-color:rgba(240,240,240,1.00);

		clear: both;
	}

/*///////SLASH////////SLASH!!11!!/////GALLERY CAROUSEL/////slash\\\\//\//\/\/*/


	.owl-carousel{
		/*background-color: blue;*/
	}

	/*#portfolio-gallery-close-button{
		
	}*/

	/*.gallery-previous-project {
		text-transform: uppercase;
		font-family: 'Lato', serif;
	    font-weight: bold;
	    font-size: 12pt;
	    letter-spacing: 2px;
	    color: rgba(180,180,180,1.00);
		display: inline-block;
	}*/

	/*.gallery-next-project {
		text-transform: uppercase;
		font-family: 'Lato', serif;
	    font-weight: bold;
	    font-size: 12pt;
	    letter-spacing: 2px;
	    color: rgba(180,180,180,1.00);
		display: inline-block;
	}*/

	#portfolio-gallery-carousel h2{ 
		text-transform: uppercase;
	    font-family: 'Lato', serif;
	    font-weight: bold;
	    font-size: 15pt;
	    letter-spacing: 2px;
	    color: rgba(180,180,180,1.00);
	}

	#portfolio-gallery-carousel span{
		font-size: 11pt;
	    text-decoration: none;
	    color: rgba(100,100,100,1);
	    font-family: 'PT Serif', serif;
	    font-weight: lighter;

	    margin-top: 20px;

	    display: block;
	}

	#portfolio-gallery-carousel p{
		line-height: 30px;
	    font-family: 'Lato', serif;
	    font-weight: thin;
	    font-size: 12pt;
	    word-spacing: 2px;
	    letter-spacing: .6px;
	    color: rgba(80,80,80,1.00);
	}

	.owl-carousel-title{
		width: 35%;
		margin-right: 4.5%;
		vertical-align: top;
		display: inline-block;

		/*there is a problem with the width of the p tag, phantom width on left*/
	}

	.owl-carousel-description{
		width: 60%;
		display: inline-block; 
	}

	#owl-carousel-text{
		margin-bottom: 10vh;
	}

	.GalleryLink{
		text-decoration: none;
		letter-spacing: 1px;
		font-weight: bold;


		padding-bottom: 5px;
	    border-bottom: 3px solid rgba(180,180,180,1.00);
		color:rgba(80,80,80,1.00);
	}


	#portfolio-gallery-carousel-container{
		margin-left: 2%;
		margin-right: 2%; 
	}

	.gallery-previous-image {
		display: inline-block;
	}

	.gallery-next-image {
		display: inline-block;
	}

	.gallery-navigation {
		margin-top:6vh;
		text-align: center;
	}

	.gallery-navigation-dots {
		display: inline-block;
	}

	/** Element that contains the dot **/
	.gallery-navigation-dot {
		display: inline-block;
	}

	/** The dot itself **/
	.gallery-navigation-dot span {
		width: 8px;
		height: 8px;
		margin-right: 20px;
		margin-left: 20px;

		border: 3px solid #D6D6D6;

		display: block;
		-webkit-backface-visibility: visible;
		transition: opacity 200ms ease;
		border-radius: 30px;
	}

	/** Active/hover dot **/
	.gallery-navigation-dot.active span, .gallery-navigation-dot:hover span {
		background: #D6D6D6;
	}

	


/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 834px){
	#container{
		width:100%;
	}

	header{
		width:100%;
		margin-bottom:25px;
		margin-top: 25px;
		text-align: center;
	}

	#MiddleNav{
	}

	#logo{
		display: inline-block;
	}

	.logo{
		position: relative;
		display: block;
		padding-left:25px;
		padding-right:25px;

		margin: 0 auto;

		width: auto; 
	}

	nav{
		opacity: 0;
		margin-left: auto;
		margin-right: 25px;
		width: 60px;

		-webkit-transition: opacity 500ms;
	    -moz-transition: opacity 500ms;
	    -o-transition: opacity 500ms;
	    transition: opacity 500ms;
	}

	nav a{
		line-height: 0px;
		margin-top: 0px;
		border-bottom-width: 0px;
		pointer-events:none;	

		display: block;

		-webkit-transition: line-height 500ms ease-out;
	    -moz-transition: line-height 500ms ease-out;
	    -o-transition: line-height 500ms ease-out;
	    transition: line-height 500ms ease-out;

	    -webkit-transition: margin-top 500ms ease-out;
	    -moz-transition: margin-top 500ms ease-out;
	    -o-transition: margin-top 500ms ease-out;
	    transition: margin-top 500ms ease-out;

	    -webkit-transition: line-height 500ms ease-out;
	    -moz-transition: line-height 500ms ease-out;
	    -o-transition: line-height 500ms ease-out;
	    transition: line-height 500ms ease-out;
	}

	nav.show{
		opacity:1;

		-webkit-transition: opacity 500ms ease-out 100ms;
	    -moz-transition: opacity 500ms ease-out 100ms;
	    -o-transition: opacity 500ms ease-out 100ms;
	    transition: opacity 500ms ease-out 100ms;

	}

	nav a.expand{
		line-height: 25px;
		margin-top: 20px;
		border-bottom-width: 3px;
		pointer-events:auto;

		-webkit-transition: line-height 500ms ease-out;
	    -moz-transition: line-height 500ms ease-out;
	    -o-transition: line-height 500ms ease-out;
	    transition: line-height 500ms ease-out;

	    -webkit-transition: margin-top 500ms ease-out;
	    -moz-transition: margin-top 500ms ease-out;
	    -o-transition: margin-top 500ms ease-out;
	    transition: margin-top 500ms ease-out;

	    -webkit-transition: line-height 500ms ease-out;
	    -moz-transition: line-height 500ms ease-out;
	    -o-transition: line-height 500ms ease-out;
	    transition: line-height 500ms ease-out;
	}



	#menuButton{
		display: inline-block;

		float: right;
		text-decoration: none;

		z-index: 100000;

		-webkit-transition: all 500ms ease;
	    -moz-transition: all 500ms ease;
	    -o-transition: all 500ms ease;
	    transition: all 500ms ease;
	}

	#menuButton span{
		position: absolute;
		right: 25px;
		display: block;
		font-family: 'Lato', serif;
		font-weight: bold;
		font-size: 25pt;
		text-align:center;
		color: rgba(180,180,180,1.00);
	}

	#menuButton span.rotate{
		-ms-transform: rotate(45deg); /* IE 9 */
	    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
	    transform: rotate(45deg);

	    -webkit-transition: all 400ms ease;
	    -moz-transition: all 800ms ease;
	    -o-transition: all 400ms ease;
	    transition: all 400ms ease;

	}

/*///////////////////GALLERY///////////////////*/

	#Gallery li{
		width: 100%;
		margin-bottom: 10px;
		margin-left: 0px;
    	margin-right: 0px;
	}

	#Gallery li:nth-child(4n){
		margin-right:0px;
	}

	#Gallery a{
		height:100%;
		padding-bottom: 60%;	
	}

	hr{

	}

	.SectionDivide {

		margin-bottom: 15vh;
		margin-top: 5vh;

		margin-left:5%; 
		margin-right:5%;
	}

	#AboutText hr{
		text-align: center;
		width: 10%;

		margin-bottom: 10vh;
	}




/*///////////////////ABOUT///////////////////*/

	#About{
		overflow: hidden;
		margin-left:5%; 
		margin-right:5%;
		clear: both;

		margin-bottom: 10vh;
	}

	#AboutPortrait{

		display: none;
	}

	#AboutText{
		width: 100%;
		display: inline-block;

		text-align: center;
	}

	#AboutText h2{
		font-size: 9pt;
		letter-spacing: 2px;

		margin-bottom: 3vh;
	}

	#About p{
		line-height: 25px;
		font-size: 9pt;
		margin-bottom: 10vh;
	}

	.AboutLists{
		display: block;
		vertical-align:top;
	}


	.AboutLists.Margin{
		margin-right: 0%;
	}

	.AboutLists h3{
		font-size: 9pt;
		letter-spacing: 2px;
		color:rgba(180,180,180,1.00);

		margin-bottom: 1.5vh;
	}

	.AboutLists ul{
		margin-bottom: 5vh;
	}

	.AboutLists li{
		font-size: 9pt;
		color:rgba(80,80,80,1.00);

		margin-right: 2%;

		display: inline-block;
	}

	.AboutLists li:last-child{
		margin-right: 0%;
	}

/*///////////////////FOOTER///////////////////*/

	#Footer p{

		color:rgba(80,80,80,.30);
		line-height: 60px;

		font-family: 'Lato', serif;
		font-weight: thin;
		text-align:center;
		font-size: 9pt;
	}

/*///////SLASH////////SLASH!!11!!/////GALLERY CAROUSEL/////slash\\\\//\//\/\/*/
	#portfolio-gallery-carousel-container{
		margin-left: 0%;
		margin-right: 0%; 
	}

	#owl-carousel-text{
		margin-bottom: 10vh;
		text-align: center;

		margin-left: 5%;
    	margin-right: 5%;
	}

	#portfolio-gallery-carousel h2{ 
		font-size: 9pt;	    
	}

	#portfolio-gallery-carousel .owl-carousel-category{
		font-size: 9pt;

	    margin-top: 10px;
	    margin-bottom: 3vh;
	}

	#portfolio-gallery-carousel p{
		line-height: 25px;
    	font-size: 9pt;
    	margin-bottom: 0vh;
	}

	.owl-carousel-title{
		width: 100%;
		margin-right: 0%;
	}

	.owl-carousel-description{
		width: 100%;
		display: inline-block; 
	}

	.GalleryLink{
		text-decoration: none;
		letter-spacing: 1px;
		font-weight: bold;

		padding-bottom: 3px;
	    border-bottom: 3px solid rgba(180,180,180,1.00);
		color:rgba(80,80,80,1.00);
	}

	.gallery-navigation {
		margin-top:6vh;
		text-align: center;
	}

	.gallery-previous-image {
		width: 8px;
	}

	.gallery-next-image {
		width: 8px;
	}

	.gallery-navigation-dots {
		display: inline-block;
	}

	/** Element that contains the dot **/
	.gallery-navigation-dot {

		display: inline-block;
	}

	/** The dot itself **/
	.gallery-navigation-dot span {
		width: 5px;
		height: 5px;
		margin-right: 8px;
		margin-left: 8px;

		border: 3px solid #D6D6D6;

		display: block;
		-webkit-backface-visibility: visible;
		transition: opacity 200ms ease;
		border-radius: 30px;
	}

	.gallery-previous-project{
		display: none;
	}

	.gallery-next-project {
		display: none;
	}

	#portfolio-gallery-close-button{
		display: block;
		position:absolute;
		right:25px;
		margin-top: -56px;


		cursor: pointer;	
	}


}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 835px) and (max-width: 1030px){

	

	/*///////////////////ABOUT///////////////////*/

	#AboutPortrait{
		width:35%;
		margin-right: 10%;
	}

	#AboutText{
		width: 55%;
		display: inline-block;
	}

	#AboutText h2,h3{
		font-size: 10pt;
		letter-spacing: 2px;
	}

	#About p{
		line-height: 30px;
		font-size: 10pt;
		word-spacing: 2px;
		letter-spacing: .6px;
	}

	.AboutLists.Margin{
		width: 10%;
	}

	.AboutLists h3{
		font-size: 10pt;
		letter-spacing: 2px;
	}

	.AboutLists li{
		line-height: 30px;
		font-size: 10pt;
	}

/*///////SLASH////////SLASH!!11!!/////GALLERY CAROUSEL/////slash\\\\//\//\/\/*/

	#portfolio-gallery-carousel-container{
		margin-left: 0%;
		margin-right: 0%; 
	}

	#owl-carousel-text{
		margin-bottom: 10vh;
		text-align: center;

		margin-left: 5%;
    	margin-right: 5%;
	}

	.owl-carousel-title{
		width: 100%;
		margin-right: 0%;
	}

	.owl-carousel-description{
		width: 100%;
		display: inline-block; 
	}

	#portfolio-gallery-carousel h2{ 
		font-size: 10pt;	    
	}

	#portfolio-gallery-carousel .owl-carousel-category{
		font-size: 10pt;

	    margin-top: 10px;
	    margin-bottom: 3vh;
	}

	#portfolio-gallery-carousel p{
		line-height: 25px;
    	font-size: 9pt;
    	margin-bottom: 0vh;
	}


	.gallery-previous-image {
		width: 8px;
	}

	.gallery-next-image {
		width: 8px;
	}

	.gallery-navigation-dots {
		display: inline-block;
	}

	/** Element that contains the dot **/
	.gallery-navigation-dot {

		display: inline-block;
	}

	/** The dot itself **/
	.gallery-navigation-dot span {
		width: 5px;
		height: 5px;
		margin-right: 15px;
		margin-left: 15px;

		border: 3px solid #D6D6D6;

		display: block;
		-webkit-backface-visibility: visible;
		transition: opacity 200ms ease;
		border-radius: 30px;
	}


	.gallery-previous-project {
	    font-size: 10pt;
		display: inline-block;
	}

	.gallery-next-project {

	    font-size: 10pt;
	}




}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 835px) {
	#container {
		width: 80%;
	}

	header {
		height: 70px;
		margin-bottom: 80px;
	}

	.logo {
		display: inline-block;
		text-decoration: none;
		line-height: 25px;
		margin-left: 2%;
		float: left;
	}

	#menuButton {
		text-decoration: none;
	}

	#menuButton span {
		display: none;
	}

	nav {
		float: right;
		margin-right: 2%;
		margin-left: 2%;
	}

	nav a {
		margin-left: 50px;
	}

	/*///////////////////GALLERY///////////////////*/
	#Gallery li {
		width: 46%;
		margin-bottom: 5.5vh;
		margin-left: 2%;
		margin-right: 2%;
	}

	#Gallery li:nth-child(4n) {
		margin-right: 0px;
	}

	#Gallery a {
		height: 100%;
		padding-bottom: 60%;
	}

	/*///////////////////ABOUT///////////////////*/
	.SectionDivide {
		margin-left: 2%;
		margin-right: 2%;
		margin-bottom: 15vh;
		margin-top: 10vh;
	}

	#AboutText hr {
		margin-left: -30px;
		width: 6%;

		margin-bottom: 8vh;
		margin-top: 8vh;
	}

	/*///////////////////FOOTER///////////////////*/
	#Footer p {

		color: rgba(80, 80, 80, .30);
		line-height: 60px;

		font-family: 'Lato', serif;
		font-weight: thin;
		text-align: center;
		font-size: 9pt;
	}



	/*///////////////////OWL.CAROUSEL STUFF///////////////////*/


	.gallery-container{
		position:relative;
	}

	.gallery-previous-project{
		left:-120px;
		transform:rotate(-90deg);
	}

	.gallery-next-project {
		right:-100px;
		transform:rotate(90deg);
	}

	#portfolio-gallery-close-button{
		position:absolute;
		top:40px;
		right:-40px;

		cursor: pointer;	
	}

	.gallery-next-project, .gallery-previous-project{
		text-transform: uppercase;
		font-family: 'Lato', serif;
		font-weight: bold;
/*		font-size: 12pt;*/
		letter-spacing: 2px;
		color: rgba(230,230,230,1.00);
		display: inline-block;
		position:absolute;

		top:auto!important;
        bottom: 500px;

        cursor: pointer;
        transition: color 200ms ease-in;

        -webkit-touch-callout: none;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}

	.gallery-next-project:hover, .gallery-previous-project:hover{
		color:rgba(180,180,180,1.00);
		transition: color 200ms ease-out;
	}
}