/* ------------------------------------------------------------------------------------
   Intro content
   ------------------------------------------------------------------------------------ */

div#maincol {
    position: relative;
    max-width: 1000px;
    margin: auto;   /* Centers the div. */
}


div#outerdiv { /* for intro and wallmobile */
    position: relative;
    width: 100%;
}


div#wmparent {
    width: 900px;
    height: 900px;
    position: absolute;
    bottom: -80px;
    right: 200px;
    z-index: 1;
}


div#wmparent > div#wallmobile {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 1000px;
}


div#intro {
    position: relative;
    padding-top: 80px;
    padding-right: 60px;
    font-family: function_probook, sans-serif;
    text-align: right;
    max-width: 450px;
    float: right;
    z-index: 2;
}


div#myname {
    font-size: 80px;
    color: white;
    position: relative;
    right: -5px;
    font-family: function_promedium, sans-serif;
}


div#descwords {
    font-size: 18px;
    color: white;
    width: 100%;
}


div#introtext {
    /* 
color: #cccccc;
    font-size: 24px;
    line-height: 150%;
 */
    max-width: 400px;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 40px;
    float: right;
}


div.bigtext {
    color: #cccccc;
    font-size: 24px;
    line-height: 150%;
    /* font-family: function_probook, sans-serif; */
    font-family: function_prolight, sans-serif;
}


div.entry-desc {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: rgba(0,0,0,0.80);
    
    color: white;
    font-size: 18px;
    line-height: 175%;
    padding: 4px;
}


div.entry-desc-title {
    color: white;
    font-family: function_promedium, sans-serif;
}


div.entry-desc-text {
    color: #cccccc;
    font-family: function_prolight, sans-serif;
}


a.button {
    color: white;
    font-size: 18px;
    line-height: 25px;
    border: 1px solid #979797;
    border-radius: 9px;
    padding: 6px 20px;
    width: 10em;
    position: relative;
    text-decoration: none;
    display: block;
    margin: auto;
    text-align: center;
}

a.button:hover {
    background-color: #444444;
}


ul#navbar {
    list-style: none;
    text-align: center;
    padding: 0px;
    margin: 0px;
}

ul#navbar > li {
    display: inline-block;
    position: relative;
    font-size: 18px;
    line-height: 25px;
}

ul#navbar > li > a {
    color: white;
    display: inline-block;
    font-size: 18px;
    line-height: 25px;
    padding: 10px 60px;
}



@media (max-width: 500px) {
    div#introtext {
		font-size: 20px;
		margin: auto;
		float: none;
	}
	
	div#intro {
		padding-right: 20px;
		max-width: 320px;
	}
	
	div#myname {
		font-size: 62px;
    	right: -2px;
	}
	
	div#descwords {
		font-size: 15px;
	}
	
	div#wmparent {
		width: 500px;
		height: 500px;
		
		bottom: auto;
		right: auto;
		left: 50%;
		margin-left: -250px;
		top: -300px;
	}
	
	div#outerdiv {
		overflow: hidden;
	}
}

@media (max-width: 320px) {
	div#myname {
		font-size: 57px;
    	right: -3px;
	}
}





/* ------------------------------------------------------------------------------------
   Portfolio section
   ------------------------------------------------------------------------------------ */

.box {
	position: relative;
	width: 100%;
	display: block;
	height: 700px;
	padding: 2px;
}


div.portfolio_entry {
	position: absolute;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 2px;	/* Reminder: This doesn't work because the entry divs are absolutely-positioned and sized. This can still work, but I'll need to add another nested div that contains the image & description stuff. */
}

div.portbox {
	position: absolute;
	left: 2px;
	right: 2px;
	top: 2px;
	bottom: 2px;
	display: inline-block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

div.port_left {
	background-image: url(../images/ei175salt_wrapped.jpg);
	right: 4px;
}

div.port_1 {
	background-image: url(../images/phoenix_mobile.jpg);
}

div.port_2 {
	background-image: url(../images/idp-anime.jpg);
}

div.port_3 {
	background-image: url(../images/mantis_wand_adjusted.jpg);
}

div.port_4 {
	background-image: url(../images/denver_botanic_gardens_4.jpg);
}


@media (min-width: 800px) {
	div.portbox_left {
		width: 33.3%; height: 100%; top: 0%;
	}

	div.portbox_1 {
		width: 33.3%; height: 50%; top: 0%; left: 33.3%;
	}

	div.portbox_2 {
		height: 50%; top: 0%; left: 66.6%; right: 2px;
	}

	div.portbox_3 {
		width: 33.3%; height: 50%; top: 50%; left: 33.3%;
	}

	div.portbox_4 {
		height: 50%; top: 50%; left: 66.6%; right: 2px;
	}
}

@media (max-width: 800px) {
	div.portbox_left {
		width: 50%; height: 66%; top: 0%;
	}

	div.portbox_1 {
		height: 33%; top: 0%; left: 50%;
		right: 0px;
	}

	div.portbox_2 {
		height: 33%; top: 33%; left: 50%; right: 0px;
	}

	div.portbox_3 {
		width: 50%; height: 34%; top: 66%; left: 0px;
	}

	div.portbox_4 {
		height: 34%; top: 66%; left: 50%; right: 0px;
	}
	
	.box {
		height: 800px;
	}
	
	ul#navbar > li > a {	/* TODO: Fix this for <a> tag instead. */
		padding-left: 30px;
		padding-right: 30px;
	}
}


@media (max-width: 500px) {
	.box {
		height: 1400px;
	}
	
	div.portbox_left {
		width: 100%; left: 0px; height: 33%; top: 0px;
	}

	div.portbox_1 {
		width: 100%; left: 0px; height: 17%; top: 33%;
	}

	div.portbox_2 {
		width: 100%; left: 0px; height: 16.5%; top: 50%;
	}

	div.portbox_3 {
		width: 100%; left: 0px; height: 16.5%; top: 66%;
	}

	div.portbox_4 {
		width: 100%; left: 0px; height: 18%; /* bottom: 0%; */ top: 82.5%;
	}
	
	ul#navbar > li {
		display: list-item;
		padding-left: 0px;
		padding-right: 0px;
		line-height: 36px;
		padding-top: 0px;
		position: relative;
		float: left;
		width: 100%;
	}
	
	ul#navbar {
		display: inline;
	}
	
	ul#navbar > li > a {
		line-height: 36px;
		padding-top: 0px;
		padding-bottom: 0px;
		display: block;
	}
}





/* ------------------------------------------------------------------------------------
   Biography
   ------------------------------------------------------------------------------------ */


.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	margin-top: 30px;
	height: 0;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



div.bio {
    color: #cccccc;
    font-size: 18px;
    line-height: 150%;
    font-family: function_prolight, sans-serif;
    
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    padding-left: 60px;
    padding-right: 60px;
    width: 60%;
}


div.bio > section {
    padding-bottom: 80px;
}


div.bio > section > h1 {
    font-size: 1.5em;
    margin-top: 0px;
}


div.bio > section > img {
    padding-top: 20px;
    padding-bottom: 20px;
}


@media (max-width: 800px) {
	div.bio {
        padding-left: 30px;
        padding-right: 30px;
	    width: 80%;
	}
}


@media (max-width: 500px) {
	div.bio {
	    padding-left: 10px;
        padding-right: 10px;
	    width: 90%;
	}
}