.body {
	position: relative;
	padding-top: 40px;
}

a:visited {
	color: #1C9FAB;
}

a:link {
	color: #1C9FAB;
}

/*Site wide styling*/

.font {
	font-family: 'Maven Pro', sans-serif;
}

.parallax-window {
    min-height: 450px;
    background: transparent;
}

.parallax-window-tall {
    min-height: 750px;
    background: transparent;
}

.parallax-window-short {
    min-height: 175px;
    background: transparent;
}

#about-me-section {
	display:inline-block;
	width: 100%;
	height: auto;
	background-color: white;
	border-top: 4px solid white;
	border-bottom: 4px solid white;
	margin-bottom: 2em;
}

.quote {
	font-style: italic;
	font-size: 20px;
	text-align: center;
	width: 80%;
	padding-left: 20%;
	color: #047685;
	font-weight: bold;
	padding-top: 20px;
}

.quote-author {
	font-style: italic;
	font-size: 16px;
	text-align: center;
	width: 100%;
	color: #047685;
	padding-bottom: 20px;
}

.divider-line {
	background-color: #F0F4F4;
	height: 3px;
	width: 100%;
	margin-top: 40px;
	margin-bottom: 40px;
}

.divider-line-large {
	background-color: #F0F4F4;
	height: 6px;
	width: 100%;
	margin-top: 40px;
	margin-bottom: 40px;
}


/*Home page specific styling*/

#title {
	background-color: #ffffff;
	width: 100%;
}

#small-title {
	position: absolute;
	width: 15%;
}

#logo {
	width: 100%;
	padding-top: 3%;
}

#title-img {
	width: 40%;
	margin-left: 30%;
	margin-right: 30%;
	margin-bottom: 3%;
	margin-top: 0%;
}

#title-text-container {
	font-size: 16px;
	text-align: center;
	width: 70%;
	position: absolute;
	top: 45%;
	padding-left: 15%;
	padding-right: 15%;
}

#logo-end {
	width: 20%;
	padding-right: 40%;
	padding-left: 40%;
}

#sub-title {
	font-size: 18px;
	color: #A7969E;
	padding: 2px;
	margin: 0px;
	text-align: center;
}

.about-me-text {
	color: #5B2B42;
}

.projects-element {
	margin-left: 2.5%;
	margin-top: 2.5%;
	width: 30%;
	height: 300px;
	float: left;
	background: #F8F5F7; 
}

.project-image {
	width: 60%;
	margin: auto;
	margin-top: 25px;	
	display: block;
}

#project-section {
	display:inline-block;
	height: auto;
	padding: 0px;
	margin: 0px;
	background-color: white;  
	border-top: 4px solid white;
	border-bottom: 4px solid white;
	margin-bottom: 2em;
}

.project-description {
	width: 100%;
	margin: auto;
	text-align: center;
	padding-top: 20px;
	color: gray;
	font-size: 18px;
}

.project-title {
	color: #036B7B;
	font-size: 24px;
	font-weight: bolder;
	margin-bottom: -15px;
}

h {
	margin-bottom: 0px;
}

p.homepage {
	margin-top: 4px;
}

.homepage-text {
	margin-left: 25%;
	width: 50%;
	height: 80%;
	padding-top: 20px;
}

.img-center {
	margin: 0 auto;
	display: block;
}


/*Project page styling*/

.info {
	margin-left: 25%;
	margin-top: 5%;
	width: 50%;
	height: 80%;
}


.header {
	font-size: 38px;
	font-weight: bolder;
	margin-bottom: 20px;
	color: #034953;
	text-align: center;
}

.sub-header {
	font-weight: bolder;
	font-size: 22px;
	margin-top: 50px;
	color: #034953;
	text-align: center;
}

.description {
	font-size: 16px;
	line-height: 130%;
	color: #7B797B;
}

.skills {
	font-size: 14px;
	line-height: 130%;
	color: #7B797B;
}

.bold {
	font-weight: bolder;
	font-color: #43393E;
}

/*Empainty specific styling*/

#empainty-gif {
	width: 80%;
	margin: auto;
	display: block;
	padding-top: 20px;
	padding-bottom: 40px;
}

#empainty-problem {
	display: inline-block;
	height: auto;
}

#torch-overview {
	display: inline-block;
	height: auto;
	margin-bottom: 2em;
}

#hmf-overview {
	display: inline-block;
	height: auto;
	margin-bottom: 2em;
}

#pp-overview {
	display: inline-block;
	height: auto;
	margin-bottom: 2em;
}

#user-pics-before {
	display: inline-block;
	height: auto;
}

#user-pics-after {
	display: inline-block;
	height: auto;
}

.user-pic-element {
	width: 50%;
	float: left;
	padding: 5%;
	vertical-align: middle;
}

.user-pic-element3 {
	width: 33%;
	float: left;
	padding: 1%;
	vertical-align: middle;
}

.inline-pic {
	width: 80%;
	margin: auto;
	display: block;
	padding-top: 40px;
	padding-bottom: 40px;
}

.inline-pic-small {
	width: 40%;
	margin: auto;
	display: block;
	padding-top: 40px;
	padding-bottom: 40px;
}

/*Tab styling*/

.tab-width {
	width:200px;
	margin: auto;
	display: block;
}

.tab-name {
	font-size: 20px;
	text-align: center;
	font-weight: bolder;
	color: gray;
}

.tab-title {
	font-size: 30px;
	font-weight: bold;
}

.comic-box {
	height: 450px;
	display: inline-block;
	height: auto;
	display: table;
}

.comic-box-pic {
	width: 60%;
	float: left;
	margin-right: 20%;
	margin-left: 20%;
	margin-bottom: 10%;
}

.comic-box-pic-small {
	width: 80%;
	float: left;
	margin-right: 10%;
	margin-left: 10%;
	margin-bottom: 5%;
}

.comic-box-text {
	width: 30%;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

.red {
	color: #ff0000;
}

.orange {
	color: #ffa500;
}

.yellow {
	color: #ffff00;
}

.green {
	color: #008000;
}

.blue {
	color: #0000ff;
}

.purple {
	color: #551a8b;
}

.off-white {
	color: #F8F5F7;
}

.gray {
	color: #444443;
}


.text-center {
	text-align: center;
	font-size: 14px;
	padding-bottom: 30px;
}

#copyright {
	display: inline-block;
	height: auto;
	width: 100%;
	background-color: white;
}

#copyright-text {
	padding: 0;
	margin: 0;
	text-align: center;
	padding: 1em;
}

#logo {
	width: 100%;
	height: 150px;
	background-color: white;
}


/*Image hovering: http://jsfiddle.net/brettdewoody/7hGPb/*/
ol, ul {
    list-style: none;
    line-height: 0;
}
.project-main-container {
	width: 100%;
}

#project_container_title {
	padding-left: 3%;
	padding-top: 1.5%;
}

.project_container {
    float: left;
    width: 23%;
    background-size:cover;
    overflow:hidden;
    padding: 1.5%;
    padding-left: 0%;
}

.project_image {
    width: 100%;
}

.project_media {
    position:relative;
/*    z-index: -1;
*/}

.project_media h1 {
    text-align:center;
    position:absolute;
    top:40%;
    width:100%;
    transform:translate(0%,-50%);
    -webkit-transform:translate(0%,-50%);
    -ms-transform:translate(0%,-50%);
    color:#FFFFFF;
    display:none;
    font-size: 2vw;
}

.project_container:hover img {
    filter: brightness(0.2);
    -webkit-filter:brightness(0.2);
    -ms-filter:brightness(0.2);
}

.project_container:hover h1 {
    display:block;
}

.project_media p {
    text-align:center;
    position:absolute;
    top:60%;
    width:100%;
    transform:translate(0%,-50%);
    -webkit-transform:translate(0%,-50%);
    -ms-transform:translate(0%,-50%);
    color:#FFFFFF;
    display:none;
    /*font-size: 20px;*/
    font-size: 1.25vw;
}


.project_container:hover p {
    display:block;
}

.video {
	width: 560px;
	height: 315px;
}


@media only screen and (max-width : 600px) {
    /*row of two boxes*/
    .project_container {
        width: 90%;
    }

    .project_media h1 {
    	font-size: 4vw;
    }

    .project_media p {
    	font-size: 2.5vw;
    }

    .project_container img {
    filter: brightness(0.4);
    -webkit-filter:brightness(0.4);
    -ms-filter:brightness(0.4);
	}

	.project_container h1 {
	    display:block;
	}

	.project_container p {
		display:block;
	}

	.nav-container {
		display:none;
	}

	.video {
		width: 290px;
		height: 157.5px;
	}

	/*Hide empainty details*/
	.container {
		display: none;
	}

	#andrea-portrait {display:none;}

}

.changing-font {
	font-size: 1vw;
}

.team-member {
	padding-top: 50px;
	text-align: center;
}


.design-detail-section {
	display: inline-block;
	width:100%;
	height: auto;
	padding-bottom: 50px;
	margin-top: -50px;
}

.navigation {
	padding-right: 3%;
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	background-color: white;
	z-index: 99;
	height: 6vw;
	border-bottom: 3px solid #F0F4F4;
}

.navigation-home {
	padding-right: 3%;
	position: -webkit-sticky;
	position: sticky;
	top: -1px;
	background-color: white;
	z-index: 99;
	height: 3vw;
	border-bottom: 3px solid #F0F4F4;
}

.nav-name {
	width: 30%;
	float: left;
	margin-left: 1%;
	margin-top: 1%;
}

.nav-container {
	width: 100%;
	float: left;
	text-align: right;
	margin-top: 2%;
}

.nav-container-home {
	width: 100%;
	text-align: right;
	padding-bottom: 1.5%;
	margin-top: 3%;
}

.nav-element {
	display: inline;
	padding-left: 2vw;
	font-size: 1.25vw;
	background-color: white;
	color: #034953;
}

.nav-element:hover{
	font-weight: bolder;
}

#name-homepage #name-label {
	position: relative;
	left: 60%;
	visibility: hidden;
	font-weight: bolder;
	font-size: 16px;	
}

#name-homepage:hover #name-label {
	visibility: visible;
}

#more-projects {
	text-align: right;
	padding-right: 3.5%;
}