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


body{
	background-color:white;
	font-size: 14px;
	line-height: 20px;
	color: #333333;
	font-family: "Plan Grotesque Regular 3";
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;	
	overflow-y: scroll; /* stapla */	
    overflow-x: hidden; /* stapla */
		}
		
		
::-webkit-selection	{background: aqua;}	
::selection {background: aqua; /* Safari */}
::-moz-selection {background: aqua; /* Firefox */}

	
/* ::::::: Type Weights ::::::: */	
.light{
	font-family: "Plan Grotesque Light 2";
font-style: normal;
font-weight: normal;
font-stretch: normal;
}
.medium{
		font-family: "Plan Grotesque Medium 2";
font-style: normal;
font-weight: normal;
font-stretch: normal;
}	
.bold {font-family: "Plan Grotesque Bold 2";
font-style: normal;
font-weight: 300;
font-stretch: normal;}


/* ::::::: Changes to bootstrap styles ::::::: */	
.navbar-inverse .navbar-inner { 
	background:none;
	border:none;
	color:black;
	background-color: none; 
	background-image: none;
	border-color: #252525;
	}

.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
						
						
.navbar-inverse .nav > li > a {
color: black;
text-shadow: none; 
margin-top: 10px;
margin-right:20px;
font-size: 1em;

}

a:-webkit-any-link {
color: black;
text-decoration: none;

}
a:hover -webkit-any-link {
color: black;
text-decoration:none;
}

.content_padding{
	padding-top:6em;
	}

.contact_btn{
	transform: rotate(90deg);
	-ms-transform: rotate(90deg); /* IE 9 */
	-webkit-transform: rotate(90deg); /* Safari and Chrome */
	left:0;
	bottom:150;
	position: absolute;
	
	
	}
.menu_left{
	width:150px;
	padding-top:.1em;
	padding-bottom: .1em;
	left:0;
	position: fixed;
	z-index: 1030;
	font-size: 1.5em;
	line-height: 1.5em;
	letter-spacing:.05em;
	top:50%;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg); /* IE 9 */
	-webkit-transform: rotate(90deg); /* Safari and Chrome */
	text-align: center;
	color:#ffea00;
	}

.menu_left:hover{
	background-color: #181819;
	}


.menu_right{
	width:150px;
	padding-top:.1em;
	padding-bottom: .1em;
	right:0;
	top:50%;
	position: fixed;
	z-index: 1030;
	font-size: 1.5em;
	line-height: 1.5em;
	letter-spacing:.05em;
	text-align:right;
	transform: rotate(270deg);
	-ms-transform: rotate(270deg); /* IE 9 */
	-webkit-transform: rotate(270deg); /* Safari and Chrome */
	text-align: center;
	color:#ffea00;
	}

.menu_right:hover{
	background-color: #181819;
	}	
	

.menu_bottom{
	width:100%;
	bottom:4%;
	position: fixed;
	z-index: 1030;
	font-size: 1em;
	text-align: center;
	color:#ffea00 !important;
	font-family: "Plan Grotesque Bold 2";
	font-style: normal;
	font-weight: 300;
	font-stretch: normal;
	
	}

.menu_bottom a{
	color:black !important;
}

.menu_bottom a:hover{
	color:#ffea00 !important;
	background-color: #181819;
	text-decoration: none;
	font-style: normal;
	font-stretch:normal;
	
}


/* ::::::: Type styles ::::::: */	

h1 {font-size: 2.2em;
	line-height: 1.3em;
	color:black;
}
.padding_intro{
	padding-right: 8em;
}
.resume_display{
	font-size: 2em;
	line-height: 1.3em;
	color:white;
	}

.close_popup{
	text-align: right;
	color:#ffea00;
	font-size: 1.2em;
	line-height: 1.3em;
	box-shadow: none;
	z-index: 1031;
	margin-top: 8em;
	text-decoration: none;
}

.email_link{
	text-align: right;
	color:#ffea00;
	font-size: 1.2em;
	line-height: 1.3em;
	box-shadow: none;
	z-index: 1031;
	margin-top: 1em;
	text-decoration: none;

}

.job_p{
	color:white;
	font-size: 1.2em;
	line-height: 1.3em;
	margin-top: 0.8em;
	padding:0;
	
	
}
.resume_category{
	color:#ffea00;
	font-size: 1.2em;
	line-height: 1.3em;
	margin-top: 1em;
	margin-bottom: 0;
}

.job_description{
	margin-top: 0.1em;
}



/* ::::::: Type styles for Logo ::::::: */	
.navbar .brand {
	float:none;
	font-family: "Plan Grotesque Medium 2", 'Andale Mono',monospace;
	font-size-adjust:0.5; 
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	font-size: 16px;
	color:black;
	margin:auto;
	padding:0px;
	line-height: 1em;
	text-align: center;	
	width:100px;
	
	}

.logo{
	border: black 2.6px solid;
	height:100px;
	width:100px;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	margin: auto;
	margin-top:1em;
	}
	
.logo:hover{
	background-color:#ffea00 !important;
	color:black;
	}

#logo_placement{
	position: fixed;
	top:10 !important;
	
	}

.navbar-inverse .brand, .navbar-inverse .nav > li > a {text-shadow: 0 0px 0 rgba(0, 0, 0, 0);

			}
.logo .j {top : 45px; position: relative; letter-spacing:0px; margin: 2px;padding: 0;}
.logo .a {top : 15px; position: relative; letter-spacing:0px; margin: 1px;padding: 0;}
.logo .v {top : 50px; position: relative; letter-spacing:0px; margin: 1px;padding: 0;}
.logo .i {top : 30px; position: relative; letter-spacing:0px; margin: 2px;padding: 0;}
.logo .e {top : 10px; position: relative; letter-spacing:0px; margin: 2px;padding: 0;}
.logo .r {top : 35px; position: relative; letter-spacing:0px; margin: 2px;padding: 0;}

.logo .lopez {top : 60px; position: relative; letter-spacing:9px; text-align: center;}

.logo a:hover {background-color:#ffea00;
		text-decoration: none;
		color:red; 
		}
		
		

		
/* ::::::: Other Styles ::::::: */	

	
#about {
	background-color:#181819;
	width:70%;
	left:0%;
	top:0%;
	height:100%;
	border-top: solid #ffea00 2px;
	border-right: solid #ffea00 2px;
	border-bottom: solid #ffea00 2px;
	padding: 1em 3em 0px 6em;

	margin: 0 auto 0 auto;
	position: fixed;
	overflow-x: hidden;
	z-index: 50;
	text-align: left;
}

#bottom{
	width:100%;
	height:10em;
	background: #181819;
	float: left;
	
}
.rights_cred{
	margin-left: 70px;
	margin-top: 1em;
	color:#ffea00;
}

#two{ position:relative; }


.pieces_container{text-align: center;}
.stack{position: relative;
		margin-left: 35%;
		margin-top: -10%;
}
.stack div { position: absolute; z-index: 1; }

.stack div img{ box-shadow: 2px 2px 10px #ffea00;}

.stack div:hover { 
	text-decoration: none !important;
	position: absolute; 
	z-index: 100; 
	-webkit-transform:none !important;
	-moz-transform:none !important;
	-o-transform:none !important;
	transform:none !important;
		
	}

.stack a { cursor:move;}

.padding_intro a:hover { 
	background-color:#ffea00 !important;
		
	}

.launch_project{
	text-align: center;
	background-color: black;
	color:#ffea00;
	margin-top: 0.5em;
	font-family: "Plan Grotesque Medium 2";
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	line-height: 1.3em;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	
	}
.project_title_underline{
	text-decoration: underline;
	
}

.project_categories_home{
	font-family: "Plan Grotesque Regular 3";
	
}

/* :::: back to top nav:::::*/
#toTop {
		width:2em;
		height: 2em;
        border:1px solid #ccc;
        background-color:white;
        text-align:center;
        padding:5px;
        position:fixed; /* this is the magic */
        bottom:20%; /* together with this to put the div at the bottom*/
        right:4%;
        cursor:pointer;
        display:none;
        }

#toTop:hover{
		background-color:#ffea00;
		}


/* ::::::: Piece Styles  :::::::*/

.piece_intro{
	padding-left: 1em;
	padding-right: 8em;
	}

.piece_intro_text{
	text-align: left;
	font-size: 1rem;
	line-height: 1.6rem;
	margin-left: 0;
	}

.piece_title{
	font-family: "Plan Grotesque Bold 2";
	font-style: normal;
	font-weight: bold;
	font-stretch: normal;
	font-size: 1.5em;
	line-height: 1.5em;
	text-decoration: underline;
	}
	
.source{
	font-family: "Plan Grotesque Regular Italic";
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	}
	
.offset_category{
	margin-left: 4em;
}
.categories_piece{
	padding-top: 1.8em;
	}
	
.category_title{
	font-family: "Plan Grotesque Bold 2";
	font-style: normal;
	font-weight: bold;
	font-stretch: normal;
	}
	
.space_categroy_title{
	margin-top:0.5em;
	}

.category_stuff{
	font-family: "Plan Grotesque Regular 3";
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	text-decoration: underline;
	letter-spacing:1.3em;		
	}
	
.category_skills{
	font-family: "Plan Grotesque Regular 3";
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	text-decoration: underline;
	line-height: 1.2em;
	}
	
.margin_category_beginning{
	margin-top:-1em;
	}

.buttons_pieces{
	font-family: "Plan Grotesque Bold 2";
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	text-align: center;	
	}	
	

.btn_box{
	border: black 1px solid;
	float: left;
	margin:0px 0px 0px -1px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	}
.clearme{
	clear: both;
	}
		
.vertical_break_space{
	height:6em;
	clear:both;
}

.btn_box:hover { 
	background-color:#ffea00 !important;
	}
.space_left{
	margin-left: 5%;
}

.detail_text{
	font-family: "Plan Grotesque Regular 3";
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	font-size: 1em;
	margin-left: 0;
	}

.subtitle_detail{
	font-family: "Plan Grotesque Bold 2";
	font-style: normal;
	font-weight: 300;
	font-stretch: normal;
	margin-bottom: 1em;
	}
.titles_body{
	font-family: "Plan Grotesque Bold 2";
	font-style: normal;
	font-weight: 300;
	font-stretch: normal;
	margin-bottom: 1em;
	font-size: 1.5em;
	text-decoration: underline;
	margin-top: 1em;
	}

.white_text{
	color: white;
}

.detail_m_top{ padding-top:3em;}
.detail_margin_top{margin-top:1em;}
.detail_margin_right{ margin-right: 1em;}
.detail_margin_left{ margin-left: 4em;}
	
.piece_img{
	margin-left: 0;
	margin-bottom: 1em;
	}

.end_piece{
	clear: left;
	height:10em;
	
	}

#prev_btn[title]:hover:after {
	content: attr(title);
	color:#ffea00;
	position: absolute;
	background: #181819;
	font-family: "Plan Grotesque Regular 3";
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	font-size: : 0.5em;
	text-align: center;
	text-transform: none;
	letter-spacing: none;
	margin-top: 4em;
	margin-left: -3.5em;
	}

#home_btn[title]:hover:after {
	content: attr(title);
	color:#ffea00;
	position: absolute;
	background: #181819;
	font-family: "Plan Grotesque Regular 3";
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	font-size: : 0.5em;
	text-align: center;
	text-transform: none;
	letter-spacing: none;
	margin-top: 4em;
	margin-left: -3.5em;
	}
	
#next_btn[title]:hover:after {
	content: attr(title);
	color:#ffea00;
	position: absolute;
	background: #181819;
	font-family: "Plan Grotesque Regular 3";
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	font-size: : 0.5em;
	text-align: center;
	text-transform: none;
	letter-spacing: none;
	margin-top: 4em;
	margin-left: -3.5em;
	}


/* ::::::: Slideshow ::::::: */	
.pics{
	padding-top: 1em;
	margin-left: 0;
	width: 100;
	}

.heightone{
	height: 25em;
	}
.heighttwo{
	height: 30em;
	}
	
.heighttall{
	height: 53em;
	}

.heightmiddle{
	height: 40em;
	}


.slideshow_container{
	margin-left: 0;
	position: relative;
	}

.slideshow_container_right{
	float: right;
	}

.pics img {  
    background-color: #f5fff7; 
    top:  0; 
    left: 0 
} 

.nav_slideshow {
	position: absolute;
	z-index: 50;
	height: 100%;
	width: inherit;
	overflow: hidden;
}


.prev_img_btn{
	margin:0;
	padding: 0;
	height:100%;
	cursor:w-resize;
	float:left;
	width:48%;
	overflow: hidden;
	}
	
.next_img_btn{
	margin:0;
	padding: 0;
	height:100%;
	cursor:e-resize;
	float: right;
	right:0;
	width:48%;
	overflow: hidden;
	}

.prev_img_btn[title]:hover:after {
	content: attr(title);
	color:#ffea00;
	background: #181819;
	font-family: "Plan Grotesque Regular 3";
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	font-size: : 0.5em;
	text-align: center;
	text-transform: none;
	letter-spacing: none;
	position: absolute;
	margin-top: 10em;
	overflow: hidden;
	}
.next_img_btn[title]:hover:after {
	content: attr(title);
	color:#ffea00;
	background: #181819;
	font-family: "Plan Grotesque Regular 3";
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	font-size: : 0.5em;
	text-align: center;
	text-transform: none;
	letter-spacing: none;
	position: absolute;
	margin-top: 10em;
	right:0;
	overflow: hidden;
	}


.caption_visit {
	position:absolute;
	z-index: 51;
	opacity:0;
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
	margin-top:20%;
	
	}

.small_link{
	margin-top: 5%;
}
.caption_visit_text{
	font-family: "Plan Grotesque Bold 2";
	font-style: normal;
	font-weight: 300;
	font-stretch: normal;
	vertical-align: middle;
	font-size: 2em;
	background:black;
	color:#ffea00;
	line-height: 5em;
	
	}
	
.visitsite:hover .caption_visit {
	opacity:0.95;
	}

.visitsite{
	margin-left: 0px;
}


.videocontent{
	margin: auto;
}

.video_container{
	margin-left: 0;
}

.center_vid{
	text-align: center;
	}
.margin_div_center{
	margin-left: auto;
	margin-right: auto;
	}

/*:::::::: Styles for pieces ::::::::*/

.poster_border{
	border: black solid .2em;
}

.black_bg{
	background-color: black;
	width:100%;
	padding-bottom: 2em;
	}
.white_bg{
	background-color: white;
	width:100%;
	padding-bottom: 2em;
	}

.yellow_bg{
	background-color: #ffea00;
	width: 100%;
	padding-bottom: 2em;
	}
	
.img_margin_bottom{
	margin-bottom: 2em;
	}

/*::::::::::Styles for poster pages ::::::::: */

.tumblr_posts{width:inherit;margin:0 auto 0 auto;float: left;}
.tumblr_posts img{width: 30%; margin:.5em;box-shadow: 3px 3px 4px #ffea00;}
.tumblr_posts li{display: inline;}
.tumblr_caption {display: none;}





@media (max-width: 767px){

.padding_intro{
	padding-left: 0.5em;
	padding-right: 0.5em;}
	
h1 {font-size: 1.5em;
	line-height: 1.3em;
	color:black;}
.content_padding{
	padding-top:2em;
	}
.span3 {
    width: 150px;
  }
	}