@charset "utf-8";
/* CSS Document */



html {
	margin: 0;
	padding: 0;	
}

body {
	margin: 0;
	padding: 0;	
}



h2 {
	font-weight: normal;
	font-size: 3.5em;
	line-height: 1em;
	color: #353531;
}

p {
	
}


#header {
	height: 100%;
	/* bottom: 0; */
	top: 0;
	left: 15px;
	position: fixed;
	width: 215px;
	/* background: #da9c4b; */
	/* background: #e3e8ec; */
	/* background: #6c675b; */
	/* background: #fff; */
	background: #fff;
	z-index: 1;
	/* opacity: 0.95; */
	
}

.logo {
	height: 50px;
	width: 200px;
	background: url(images/joeybuda2.png);
	background-size: 200px 50px;
	margin: 0 auto;
	/* z-index: 100; */
	margin-top: 20px;
}

.browserExp {
	width: 210px;
	height: 145px;
	background: url(images/browser.jpg);
	position: fixed;
	bottom: 0;
	margin-bottom: 4em;
	z-index: 3; 
}

.scrolld {
	width: 150px;
	height: 50px;
	background: url(images/scroll-icon.png);
	position: absolute;
	bottom: -55px;	
	left: 42%;
}

.contact {
	font-family: Armitage, sans-serif; 
	font-weight: normal;
	font-style: normal; 
	font-size: 0.9em;	
	padding: 0 10%; 
	margin-top: -50px;
	
}

/* =================== TOGGLE BUTTON ================== */

.toggle-nav {
	display: none;	
}

.toggle-more {
	display: none; 	
}

.more {
	display: none;	
} 


/* =================== MENU ================== */

nav {
	padding-left: 1.5em;
	padding-top: 2em;

}

.menu ul {
	/* display: inline-block; */
	/* list-style-type: none; */
	position: relative;
	margin: 0;
	padding: 0;
	z-index: 10;
	/* margin-left: -30px; */
}

.menu li {
	
	/* font-family: ClarendonBTPro-Condensed, Times, serif; */
	/* font-family: 'Armitage-Bold', sans-serif; */
	font-family: 'landmark_regular', sans-serif;
	font-size: 1.2em;
	letter-spacing: 0.02em;
	/*letter-spacing: 0.05em; */
	line-height: 3em;
	list-style: none;
	/* font-family: ClarendonBTPro-BoldCond, Times, serif;	*/
	/* font-size: 2.75em; */
	/* line-height: 1em; */
	
}

.menu li:last-child {
	margin-right: 0px;	
}

.menu a {
	/* color: #b2764e; */
	/* color: #3c3932; */
	color: #554a43;
	text-decoration: none;
	padding: 0 0.5em;
}

.menu a:hover {
	color: #a88656;
}

.menu a:hover, .menu .current-item a {
	text-decoration: none;
	/* color: #66a992; */
}





/* ================================= CONTENT ===================================== */

.content {
	
	/* white-space: nowrap; */
	/* position: absolute;
	left: 26%; */
	margin-left: 24%;
	max-width: 1100px;
	margin-right: 5%; 
	margin-bottom: 2%;
	/* position: absolute;
	top: 10px; */
	

	/* margin: 0 0 0 250px; */
	
}

.contentSmall {
	margin-left: 32%;
	max-width: 1100px;
	margin-right: 5%; 
	margin-bottom: 2%;
}

#intro img {
	margin-bottom: 0px;
	padding-bottom: 0px;
	padding-top: 5%;
}

.arrow_u {
	display: block;
	height: 60px;
	width: 150px;
	position: absolute;
	right: -10%;
	background: #fff;
}

.arrow_u:hover {
	background: url(images/arrow_u.png);	
}

.arrow_d {
	display: block;
	height: 60px;
	width: 150px;
	 position: relative; 
	left: 105%; 
	top: 30em;

	background: url(images/arrow_d.png);	
}

.arrow_u:hover {
	background: url(images/arrow_d.png);	
}



.art_container {
	display: inline-block;
	position: relative; 
	margin-bottom: 0.5em;	

	max-width: 1080px;
	
	/* margin-top: 1em; */
	/* margin-right: 4em; */
	/* margin-top: 1em; */
	/* margin-right: 3.5em; */
	vertical-align: top;
}

.art_container img {
	width: 100%;	
	padding: 10% 0 5% 0;
}

.port_container {
	display: inline-block;
	position: relative; 
	margin-bottom: 0.5em;	

	max-width: 1080px;
	
	/* margin-top: 1em; */
	/* margin-right: 4em; */
	/* margin-top: 1em; */
	/* margin-right: 3.5em; */
	vertical-align: top;
}

.port_container img {
	width: 100%;	
	padding: 10% 0 0 0;
}

.caption {
	
	/* width: 1010px; */
	/* font-family: Georgia, "Times New Roman", Times, serif; */
	/* font-family: 'Armitage', sans-serif; */
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	color: #999;	
	/* padding-top: 10px; */
	text-align: right;
	/* padding-right: 2%; */
}

.caption p {
	/* padding-top: 0.2em; */
	padding-right: 2em;	
	margin-top: -1.8em;
}

footer {
	position: fixed;
	left: 15px;
	bottom: 2em;	
	width: 215px;
	font-size: 0.8em;
	text-align: center;
	opacity: 0.5;
	font-family: 'Armitage', sans-serif;
	z-index: 2;
}

/* ========================  ANIMATED STUFF ========================== */


/*
#wg {
	
}

*/

/* ============== MEDIA QUERIES ====================== */


/* iPhone  */
@media (max-width: 320px) 
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
	
	}



	

/* ====================  TABLET or smaller =====================  */
@media (max-width: 768px) 

{
	
	}
	
	/* =========================================  small laptop - not tall screen ========================================  */
	
@media (max-height: 850px)  {
	
	
	.content {
	/* margin-top: 25px; */
	}
	
	
	.art_container {
	/* display: inline-block; */
	/* margin-bottom: 30px;	*/
	/* vertical-align: top;
	/* margin: 0; */
	/* max-width: 1000px; */
	/* max-height: 700px; */
	/* width: 100%; */

	/* width: 80%; */
}

.art_container img {

	/* padding-right:50px; */
	/* padding: 2% 0 2% 0; */

	/* padding-bottom: 5%;
	margin-top: 25px; */
	
}

	}
	
/* =========================================== art spacing for PHONES ====================== */
	
@media (max-height: 850px) and (max-width: 800px) {
	.art_container img {
		padding: 0px;
		margin-top: 1em;
	}
	
		.port_container img {
		padding: 0px;
		margin-top: 1em;
	}
	
	}

/* ======================================================  iPAD and smaller (MOBILE) ============================================  */
@media (max-width: 800px) {
	


h2 {
	font-weight: normal;
	font-size: 3.5em;
	line-height: 1em;
	color: #353531;
}

p {
	
}

#header {
		height: 3.5em;
		width: 100%; 
		top: 0;
		left: 0;
		/* position: fixed; */
		/* position: static; */
		position: absolute;
		/* background: #F66; */
		/* background: #d3cdbf; */
		background: #ab8d63; 
		/* background: #917651; */
		text-align: center; 

	
}

.logo {
	background: url(images/joeybuda.png);
	background-size: 200px 50px;
	margin: 0 auto;
	margin-top: 0px;
}

.contact {
	font-family: Armitage, sans-serif; 
	font-weight: normal;
	font-style: normal; 	
	padding-left: 15px;
	margin-left: 30px;	
	margin-top: -20px;
	position: relative;
	left: 0px;
	top: 0px;
}

.browserExp {
	height: 0px;
	width: 0px;
	background: none;
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0;
}

.scrolld {
	height: 0px;
	width: 0px;
	background: none;
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0;
}

/* ============= NAV HAMBURGER MENU =============== */


nav {
	width: 100%; 
	height: 85px;
	margin: 0 auto;
	vertical-align: top;
	top: -35px;
	position: relative;
	padding: 0px;
	/* text-align: center; */
	/*padding-left: 1.5em;
	padding-top: 0; */
}


.menu {
	position: relative;
	display: inline-block;
	/* left: 4px; */
	/* top: 10px; */

}

.menu ul.active {
	display: none;	
}

.menu ul {
	width: 25%;
	position: absolute;
	top: 60%;
	left: 0px;
	padding: 10px 18px;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
	border-radius: 3px;
	/* background: #e6e5e4; */
	background: #ebe8e5;
	/* background: #303030; */
}

.menu ul:after {
	width: 0px;
	height: 0px;
	position: absolute;
	top: 0%;
	left: 22px;
	content: ' ';
	transform: translate(0%, -100%);
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #303030;	
}

.menu li {
	/*font-size: 1.8em;
	 line-height: 1.5em; 
	 text-indent: -9999px; */
	 
	 margin: 5px 0px 5px 0px;
	 float: none;
	 display: block;

}

.menu a {

	/* float: left;
	margin-left: 2em;
	padding: 0; */
	display: block;	
	color: #554a43;
}

.menu a:hover {
	/* color: #9b988f; */
	color: #fff;
}

/* ================= */

.toggle-nav {
	padding: 20px;
	float: left;
	display: inline-block;
	/* box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
	border-radius: 3px;
	background: #d3cdbf;
	text-shadow: 0px 0.8px 0px rgba(0,0,0,1); */
	color: #777;
	font-size: 20px;
	transition: color linear 0.15s;	
	
	margin-left: 7px;
	margin-top: -5px; 
}

.toggle-more {
	display: block;
	padding-left: 40px;	
	padding-top: 8px;
	padding-bottom: 10px;
	margin-top: 50px;
	/* font-family: Armitage-Bold; */
	font-family: 'landmark_regular', sans-serif;
	font-weight: normal;
	font-style: normal;
	/* font-size: 2em; */
	font-size: 1.5em;
	letter-spacing: 0.1em;
	/* background: #d3cdbf; */
	background: #ab8d63;
}

.toggle-nav:hover, .toggle-nav.active {
	text-decoration: none;
	/* color: #66a992; */
	color: #fff;
}




/* ========  MORE button at footer ========= */



.more {
display: inline-block;	
}

.more ul.active {
	display: none;	
}

/* ========== move the bottom menu for mobile ===================== */
.more ul {
	width: 15em;
	position: absolute;
/* =========== add minus 50 here for each menu item ============ */
	top: -266px;
	left: 10px;
	padding: 10px 18px;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
	border-radius: 3px;
	/* background: #e6e5e4; */
	background: #ebe8e5;
	/* background: #303030; */
	z-index: 10;
}
/* ========== this is the little triangle/arrow ============= */
.more ul:after {
	width: 0px;
	height: 0px;
	position: absolute;
/* ============= add plus 50 here for each menu item ========== */
	top: 300px;
	left: 50px;
	content: ' ';
	transform: translate(0%, -100%);
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #303030;	
}

.more li {	 
	 margin: 5px 0px 5px 0px;
	 float: none;
	 display: block;
	 padding-left: 20px;
}

.more li {
	
	/* font-family: 'Armitage-Bold', sans-serif; */
	font-family: 'landmark_regular', sans-serif;
	font-size: 1.2em;
	letter-spacing: 0.05em;
	line-height: 2em;
	list-style: none;
	
}

.more a {

	display: block;	
	color: #554a43;
	text-decoration: none;
}



/* #signs {
	width: 116px;
	height: 103px;
	background: url(images/menusprite.png) no-repeat 0 0px;
	margin-left: 70px;
}
#americana {

	width: 101px;
	height: 103px;
	background: url(images/menusprite.png) -116px 0;
}

#rt66 {
	width: 107px;
	height: 103px;
	background: url(images/menusprite.png) -217px 0;
}

#design {
	width: 99px;
	height: 103px;
	background: url(images/menusprite.png) -324px 0;
}

#about {
	width: 70px;
	height: 103px;
	background: url(images/menusprite.png) -423px 0;
}

*/


.content {
	
	


	left: 0; 
	margin-right: 0; 
	
	
	margin-top: 3.25em;
	margin-left: 0em;
	white-space: normal;	
	padding-left: 0;
	/* width: 100%; */
	/* max-width: 1000px; */
	margin-bottom: 1em;

	/* margin: 0 0 0 250px; */
	
}

.contentSmall {
	
	


	left: 0; 
	margin-right: 0; 
	
	margin-top: 3.25em;
	margin-left: 0em;
	white-space: normal;	
	padding-left: 0;
	margin-bottom: 1em;	
}

.art_container {
	display: inline-block;
	/* margin-bottom: 30px;	*/
	vertical-align: top;
	margin: 0;
	/* max-width: 1000px; */


}

.art_container img {
	width: 100%;	
	margin-top: 25px;
	padding-bottom: 0px;
	/* padding-bottom: 5%; */
	

}

.port_container {
	display: inline-block;
	/* margin-bottom: 30px;	*/
	vertical-align: top;
	margin: 0;
	/* max-width: 1000px; */


}

.port_container img {
	width: 100%;	
	margin-top: 25px;
	padding-bottom: 0px;
	/* padding-bottom: 5%; */
	

}

.caption {
	
	width: 100%;
	font-size: 0.9em;
	color: #999;	
	/* padding-top: 0.3em;
	padding-bottom: 0.2em; */
	text-align: right;
	/* padding-top: 0.5em; */
	padding-top: -1em;
	/* padding-left: 0em; */
}

.caption p {
	margin-left: 1em;
	line-height: 0em;
	margin-top: 0.5em;
	padding-bottom: 0em;
	padding-right: 0.5em;
	
}

footer {
	position: relative;
	left: 10px;
	bottom: 8px;	
	font-size: 0.9em;
	margin: 0 auto;
}
	

	
	}
	
	
	/* ============  iPhone 6 and smaller  ============ */
@media (max-width: 660px) 

{
	
	.logo {
	background: url(images/joeybuda.png);
	background-size: 200px 50px;
	/* height: 50px;
	width: 200px; */
	margin-left: 25%;
	margin-top: 0px;
}

.menu ul {
	width: 55%;	
}
	/*nav li {
	margin-left: -25px;
	} */
}

@media (max-width: 640px) 

{
	/* nav li {
	margin-left: -40px;
	}*/
}

@media (max-width: 620px) 

{
	/* nav li {
	margin-left: -60px;
	} */
}

@media (max-width: 600px) 

{
	/* nav li {
	margin-left: -80px;
	} */
}
	
	
		/* ============  iPhone 6 and smaller  ============ */
@media (max-width: 560px) 

{
	/*
	nav {

	height: 75px;
	margin: 0 auto;
	vertical-align: top;
	top: -15px;
	position: relative;

}

.menu li {
	font-size: 1.8em;
	margin-left: -60px;
	text-indent: -9999px;


}

.menu li a {

	float: left;
	margin-left: 2em;
	display: block;
	padding: 0;
	
}

.menu li a:hover {
	color: #fff;
}

#signs {
	width: 74px;
	height: 71px;
	background: url(images/menusprite-320.png) 0 0px;

}
#americana {

	width: 60px;
	height: 71px;
	background: url(images/menusprite-320.png) -74px 0;
}

#rt66 {
	width: 74px;
	height: 71px;
	background: url(images/menusprite-320.png) -134px 0;
}

#design {
	width: 61px;
	height: 71px;
	background: url(images/menusprite-320.png) -208px 0;
}

#about {
	width: 38px;
	height: 71px;
	background: url(images/menusprite-320.png) -269px 0;
}

*/
	
	}
	
	
			/* ============  iPhone 4 and smaller  ============ */
@media (max-width: 414px) 

{

/* .menu li a {

	margin-left: 1.5em;

} */

}

			/* ============  iPhone 4 and smaller  ============ */
@media (max-width: 320px) 

{

/* .menu li a {

	margin-left: 0.2em;

} */

}

	

/* 15" Macbook laptop or smaller */
@media (max-width: 1200px) 
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx)

{	
	}
	
@media (max-width: 1200px)	
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) 

{
}