/* CSS for jevinwest.org */


html {
	line-height: 1.5;
	font-family: Roboto,sans-serif;
	font-weight: 500;
	color: rgba(0,0,0,.87);
	font-size: 14px;
}

a {
	color: #6D28A0;
	text-decoration: none;
}

a:hover {
    color: #EF9615;
}

a:visited {
	color: #6D28A0;
}	

hr {
	width: 100%;
	margin-top: 40px;
	margin-bottom: 40px;
	color: #eee;
}




#page_container {
	max-width: 1250px;
	margin: 0 auto;
}


.mobile-menu-icon {
    display: none;
}

#overlay {
    position: fixed; 
    display: none; 
    width: 100%; 
    height: 100%; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}



/* name title (Jevin West) */
#name_title {
	font-size: 2.5rem;
	position: relative;
	left: 80px;
	top: 7px;
}

#name_title a:link {
	color: #000000;
}

#name_title a:hover {
	color: #000000;
}

#name_title a:visited {
	color: #000000;
}


#initials-image { display: none; }


/* header line */
hr.headerline {display: none;}



/* nav-menu in large screen */
.nav-menu {
    width: 70%;
    margin: auto;
    margin-top: 10px;
    overflow: visible;
    white-space: nowrap;
    display: flex;
    justify-content: space-around;
    border: 2px solid grey;
}

.nav-menu a {
    color: black;
    text-decoration: none;
    padding: 10px;
    width: 100%;
    text-align: center;
}

.nav-menu a:hover {
    color: #EF9615;
}

.nav-menu a.active {
    background-color: #9575CD;
    color: white;
}



/* make responsive menu disappear when large screen */
.nav-menu-responsive {display: none;}


/* main container */
.main_container {
	width: 70%;
	margin: auto;
}




/* summary, home page */
.summary_home {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	margin-top: 25px;
	margin-left: 10px;
}

.home_image {
	width: 30%;
}

.home_image img {
	box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3);
	max-width: 100%;
	height: auto;
}

.summary_text {
	padding-left: 40px;
	padding-right: 20px;
	width: 70%;
	text-align: justify;
}




/* projects */
.projects {
	display: flex;
	text-align: center;
	font-size: 1.5rem;
}


.projects-example {
	width: 33%;
}

.projects-example img {
	box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3);
	width: 90%;
	height: auto;
	margin-top: 10px;
}

.projects-example a:hover img {
	box-shadow: 2px 4px 5px 2px rgba(0,0,0,.14),0 2px 20px 0 rgba(0,0,0,.12),0 4px 8px -1px rgba(0,0,0,.3);
}




/* announcements */
.announcements {
	display: flex;
	flex-direction: row;
    justify-content: flex-end;
    margin-right: 10px;
    margin-bottom: 20px;
}

.announcements_title {
	font-size: 1.5rem;
	margin-right: 30px;
}

.announcements_box {
	background-color: #f5f5f5; 
	border: 1px solid #eee;
	width: 65%;
}

.announcements ul {
	list-style: circle;
}

.announcements li {
	margin: 5px 0;
}



/* footer */
.footer {
	margin-top: 80px;
	margin-bottom: 20px;
	text-align: center;
	font-size: 1.1rem;
}

.footer span {
	margin-right: 10px;
}



/* image full horizontal */
.full_image {
	width: 100%;
	margin: auto;
	margin-top: 25px;
}

.full_image img {
	box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3);
	width: 100%;
	height: auto;
	display:block;
  	margin-left:auto;
  	margin-right:auto;
}

.full_image a:hover img {
	box-shadow: 2px 4px 5px 2px rgba(0,0,0,.14),0 2px 20px 0 rgba(0,0,0,.12),0 4px 8px -1px rgba(0,0,0,.3);
}


/* section content */
.section_title {
	font-size: 2rem;
	margin-top: 40px;
}

.section_title hr {
	margin-top: -26px;
	margin-bottom: 20px;
}

.section_text {
	width: 100%;
	text-align: justify;
}

.section_text span {
	 color: #333333;
	 font-weight: bold;
}







/* research projects */
.research_project {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

.research_image {
	width: 30%;
}


.research_image img {
	box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3);
	width: 100%;
	height: auto;
}

.research_image a:hover img {
	box-shadow: 2px 4px 5px 2px rgba(0,0,0,.14),0 2px 20px 0 rgba(0,0,0,.12),0 4px 8px -1px rgba(0,0,0,.3);
}

.research_text {
	width: 70%;
	margin-left: 20px;
	text-align: justify;
}




/* publication */
.pub {
	margin-top: 20px;
}

.pub_title {
	color: rgba(0,0,0,.87);
	font-weight: 700;
}

.authors span {
	color: #555;
	font-weight: 600;
}

.journal {
	display: inline;
	font-style: italic;
}

.volume {
	display: inline;
}

.pub_link {
	display: inline;
}

.abstract {
	display: none;
}

.bibtex {

}

.grant {
	font-weight: 600;
	color: #444;
}

.funder {
	display: inline;
	font-style: italic;
}




/* teaching */
.teaching {
	font-size: 1.05rem;
	margin-top: 10px;
}

.class_code {
	display: inline-block;
/*	margin-right: 40px;*/
	width: 120px;
}

.class_title {
	display: inline-block;	
}





/* contact */
.contact {
	display: flex;
	flex-wrap: nowrap;
	margin-top: 25px;
	font-size: 1.05rem;
}

.contact_left {
	width: 50%;
}

.contact_right {
	width: 50%;
}


.year_section {
	font-size: 20px;
	margin-top: 20px;
}



/* news */
.news {
	margin-top: 20px;
}

.news_title {
	color: rgba(0,0,0,.87);
	font-weight: 500;
}

.news_header {
	margin-top: 20px;
	font-size: 20px;
	font-weight: 500;
}





/* thumbnail */
.thumbnail {
	display: flex;
	flex-direction: row;
	align-items: center;
    margin-top: 10px;*/
}

.thumbnail_image {
	width: 25%;
}

.thumbnail_image img {
	box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3);
	width: 80%;
	height: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 10px;
}

.thumbnail_image a:hover img {
	box-shadow: 2px 4px 5px 2px rgba(0,0,0,.14),0 2px 20px 0 rgba(0,0,0,.12),0 4px 8px -1px rgba(0,0,0,.3);
}




/* publcation-with-image */
.publication-w-image {
    display: flex;
    margin-top: 20px;
}

.pub-thumbnail {
    flex: 1;
    align-self: center;
/*    border: 2px solid blue;*/
}  

.pub-thumbnail img {
	width: 100%
} 

.pub-details {
	flex: 4;
	align-self: center;
/*	border: 2px solid red;*/
}

.pub-thumbnail:first-child {
    margin-right: 20px;
/*    width: 100px;*/
} 


.pub-details-w-image {
	margin-top: 0px;
}


























/* IPAD SETTINGS */
@media screen and (max-width: 880px) {


	.mobile-menu-icon {
	    display: block;
	    position: absolute;
	    top: 5px;
	    left: 14px;
	    font-size: 2rem;
	}

	.mobile-menu-icon a {
	    color: #67389B;
	}

	#name_title {
		font-size: 2rem;
		left: 40px;
		top: 0px;
	}
	
	#initials-image { 
		display: inline-block;
		position: absolute;
		top: 2px;
		right: 0px;
	}

	/* header line */
	hr { width: 100%;}

	hr.headerline { 
		display: block;
		width: 100%; 
		margin-top: -5px;
	}


	/* nav menu */
   	.nav-menu {
   		display: none;
   	}

	.nav-menu-responsive {
		display: block;
		background-color: #fff;
	    width: 220px;
	    position: absolute;
	    margin: 5px;
	    top: 46px;
        left: 0px;
	    z-index: 100;
	    box-shadow: rgba(0,0,0,0.16) 0px 3px 10px, rgba(0,0,0,0.23) 0px 3px 10px;
	}

	.nav-menu-responsive a {
	    display: block;
	    padding: 16px;
	    text-decoration: none;
	    color: black;
	}

	.nav-menu-responsive a:hover {
	    background-color: #ccc;
	}

	.nav-menu-responsive a.active {
		background-color: #9575CD;
		color: white;
	}
	/* end nav menu */




	/* main container */
	.main_container {
		width: 90%;
		margin: auto;
	}



	/* home page */
	.home_image {
		width: 30%;
		vertical-align: top;
	}

	.summary_text {
		width: 70%;
	}




}





















/* PHONE SETTINGS */
@media screen and (max-width: 680px) {


	.mobile-menu-icon {
	    display: block;
	    position: absolute;
	    top: 5px;
	    left: 14px;
	    font-size: 2rem;
	}

	.mobile-menu-icon a {
	    color: #67389B;
	}
	
	#name_title {
		font-size: 2rem;
		left: 40px;
		top: 0px;
	}

	#initials-image { 
		display: inline-block;
		position: absolute;
		top: 2px;
		right: 0px;
	}


	/* header line */
	hr.headerline { 
		display: block;
		width: 100%; 
		margin-top: -5px;
	}


	/* nav menu */
   	.nav-menu {
   		display: none;
   	}

	.nav-menu-responsive {
		display: block;
		background-color: #fff;
	    width: 220px;
	    position: absolute;
	    margin: 5px;
	    top: 46px;
        left: 0px;
	    z-index: 100;
	    box-shadow: rgba(0,0,0,0.16) 0px 3px 10px, rgba(0,0,0,0.23) 0px 3px 10px;
	}

	.nav-menu-responsive a {
	    display: block;
	    padding: 16px;
	    text-decoration: none;
	    color: black;
	}

	.nav-menu-responsive a:hover {
	    background-color: #ccc;
	}

	.nav-menu-responsive a.active {
		background-color: #9575CD;
		color: white;
	}
	/* end nav menu */






	/* summary, home page */
	.summary_home {
		display: block;
		margin-top: 25px;
	}

	.home_image {
		width: 70%;
		margin: auto;
	}

	.home_image img {
		box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3);
		max-width: 100%;
		height: auto;
	}

	.summary_text {
		margin-top: 20px;
		width: 96%;
		text-align: justify;
		padding-left: 10px;
		padding-right: 10px;
	}


	/* projects */
	.projects {
		display: block;
	}

	.projects-example {
		width: 96%;
		margin-top: 20px;
	}



	.announcements {
		display: block;
		margin-right: 0px;
	}

	.announcements_title {
		margin-right: 0px;
		margin-top: 40px;
		margin-bottom: 10px;
		text-align: center;
	}

	.announcements_box {
		background-color: #f5f5f5; 
		border: 1px solid #eee;
		width: 100%;
	}



	/* research projects */
	.research_project {
		display: block;
		margin-bottom: 80px;
	}

	.research_image {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}

	.research_text {
		width: 100%;
		margin-left: 0px;
		text-align: justify;
	}




	/* teaching */
	.teaching {
		margin-top: 15px;
	}
	.class_code {
		display: block;
		font-weight: 500;
	}

	.class_title {
		display: block;	
		margin-left: 5px;
	}




	/* contact */
	.contact {
		display: block;
	}

	.contact_left {
		width: 90%;
	}

	.contact_right {
		margin-top: 25px;
		width: 90%;
	}



	/* thumbnail images */
	.thumbnail {
		display: block;
		margin-bottom: 80px;
	}

	.thumbnail_image {
		width: 60%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}







}