/* CSS3 practice from coursera courses */
/* 
***************************
Color is from https://material.io/guidelines/style/color.html#color-color-palette 

Some other desirable CSS examples: http://www.csszengarden.com/
***************************
*/

html, body{
	background: #F5F5F5; /* Grey 100 */
}

/* mobile layout first */
body{
	font-size: 120%;
	margin: 0;
	font-family: "Fira Sans Condensed";
}

.content{
	margin: 3% 5%;
}

header{
	text-align: center;
	background: #3F51B5; /* Indigo 500 */
	background: -webkit-linear-gradient(bottom right, #3F51B5, #9FA8DA); /* Indigo 200 */
	background: -moz-linear-gradient(bottom right, #3F51B5, #9FA8DA);
	background: -o-linear-gradient(bottom right, #3F51B5, #9FA8DA);
	background: linear-gradient(to bottom right, #3F51B5, #9FA8DA);
}

header h1{
	color: #FFFFFF; /* White */
	/*font-family: Courier, Impact, Arial;*/
	font-variant: small-caps;
}

article p{
	text-align: justify;
}

li sup.color, td sup.color{
	color: #FF9800; /* Orange */
}

/* --- Responsive Testimonials --- */
.container{
	border: 2px solid #ccc;
	background-color: #eee;
	border-radius: 5px;
	padding: 16px;
	margin: 16px 0;
	text-align: center;
}

.container::after{
	content: "";
	clear: both;
	display: table;
}

.container img{
	margin: auto;
	float: none;
	border-radius: 50%;
	display: block;
	width: 110px;
}

.container span{
	font-size: 130%;
	margin-right: 15px;
}

/* --- Tables and Lists --- */
table{
	border-width: 1px 2px;
	margin: 3px;
	padding: 3px;
	border-collapse: collapse;
	width: 100%;
	/*border: outset; dotted, dashed, solid, double groove, ridge*/
	/*border-width: 3px 10px;  2 values: top/bottom right/left*/
	/*border-width: 3px 10px 20px;  3 values: top right/left bottom*/
	/*border-width: 3px 10px 20px 1px;  4 values: top right bottom left*/
}

th, td{
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

th{
	font-variant: small-caps;
}

tr:hover{
	background-color: #EEEEEE; /* Grey 200 */
}

li:nth-child(odd){
	background: #EEEEEE; /* Grey 200 */
}

.btn{
	padding: 4px 8px;
	cursor: pointer;
	border: 1px solid #0091EA; /* Light Blue A700 */
    border-radius: 5px;
}

.info{
	background-color: #80D8FF; /* Light Blue A100 */
	color: black;
}

.info:hover{
	background-color: #00B0FF; /* Light Blue A400 */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* --- Accordion --- */
button.accordion{
	background-color: #eee;
	color: #444;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: .4s;
}

button.accordion.active, button.accordion:hover{
	background-color: #ccc;
}

button.accordion:after{
	content: attr(data-value);
	color: #777;
	font-weight: bold;
	float: right;
	margin-left: 5px;
}

button.accordion.active:after{
	content: attr(data-value);
}

div.panel{
	padding: 0 18px;
	background-color: #F5F5F5; /* Grey 100 */
	max-height: 0;
	overflow: hidden;
	transition: max-height .2s ease-out;
}

div.panel p{
	text-align: justify;
}

/* --- Protfolio --- */
.protfolio-main{
	max-width: 1000px;
}

.protfolio-row{
	margin: 10px -16px;
}

.protfolio-row,
.protfolio-row > .protfolio-column{
	padding: 8px;
}

.protfolio-column{
	float: left;
	width: 33.33%;
	display: none;
}

.protfolio-row:after{
	content: "";
	display: table;
	clear: both;
}

.protfolio-column a{
	text-decoration: none;
	color: black;
	cursor: pointer;
}

.protfolio-content{
	background-color: white;
	padding: 10px;
	height: 400px;
	overflow: hidden;
}

.protfolio-content img{
	width: 100%;
	height: auto;
}

.protfolio-show{
	display: block;
}

.protfolio-btn{
	border: none;
	outline: none;
	padding: 12px 16px;
	background-color: white;
	cursor: pointer;
}

.protfolio-btn:hover{
	background-color: #ddd;
}

.protfolio-btn.protfolio-active{
	background-color: #666;
	color: white;
}

/* --- LightBox --- */
* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}

.row > .column{
	padding: 0 8px;
}

.row:after{
	content: "";
	display: table;
	clear: both;
}

.column{
	float: left;
	width: 25%;
}

.column img{
	width: 100%;
}

/* The Modal (background) */
.modal{
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: black;
}

/* Modal Content */
.modal-content{
	position: relative;
	background-color: #FAFAFA; /* Grey 50 */
	margin: auto;
	padding: 0;
	width: 90%;
	max-width: 1200px;
}

/* The Close Button */
.close{
	color: white;
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 35px;
	font-weight: bold;
}

.close:hover, .close:focus{
	color: #9E9E9E; /* Grey 500 */
	text-decoration: none;
	cursor: pointer;
}

.mySlides{
	display: none;
	height: 450px;
	overflow: hidden;
	background-color: #212121; /* Grey 900 */ 
}

.mySlides img{
	/*width: 100%;*/
	height: 100%;
	display: block;
    margin: 0 auto;
}

/* Next & previous buttons */
.prev, .next{
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	transition: .6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}

/* Position the "next button" to the right */
.next{
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover{
	background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext{
	color: #F5F5F5; /* Grey 100 */
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

.caption-container{
	text-align: center;
	background-color: black;
	padding: 2px 16px;
	color: white;
}

.column img.demo{
	opacity: 0.6;
}

.column img.active, .column img.demo:hover{
	opacity: 1;
}

.column img.hover-shadow{
	transition: .3s;
}

.column img.hover-shadow:hover{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* --- footer --- */
nav{
	text-align: center;
	font-variant: small-caps;
	font-size: 120%;
	/*font-family: Arial, "Time New Roman", serif;*/
	display: none;
}

nav a{
	text-align: center;
	color: #FFFFFF;
	background: #3F51B5; /* Indigo 500 */
	display: inline-block;
	font-weight: bold;
	width: 15%;
	min-width: 140px;
	text-decoration: none;
	margin: 0 auto;
	/*font-family: Courier, Impact, Arial;*/
	transition-property: background;
	transition-duration: .5s;
	transition-timing-function: linear;
}

nav a:hover{
	background: #BDBDBD; /* Grey 400 */
	color: #1565C0; /* Blue 800 */
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

nav a:focus{
	background: #BDBDBD; /* Grey 400 */
	color: #1565C0; /* Blue 800 */
}

nav a:active{
	border: 3px solid #000000;
}

/* active class for links under navigation */
nav a.active{
	background-color: #EEEEEE; /* Grey 200 */
	color: #000000;
	border: 3px solid #000000;
}

#copyRight{
	text-align: center;
}

/* --- mySidenav --- */
#mySidenav{
	display: none;
}

#mySidenav a{
	position: fixed;
	left: -180px;
	transition: .3s;
	padding: 10px;
	width: 200px;
	text-decoration: none;
	font-size: 30px;
	color: white;
	border-radius: 0 5px 5px 0;
	text-align: center;
	font-variant: small-caps;
}

#mySidenav span{
	position: fixed;
	left: 0px;
	width: 50px;
	border-radius: 0 5px 5px 0;
	text-align: center;
	font-size: 30px;
	cursor: pointer;
}

#mySidenav a:hover{
	left: 0;
}

#menu{
	top: 25px;
	background-color: #F5F5F5; /* Grey 100 */
}

#close{
	display: none;
	top: 25px;
	background-color: #F5F5F5; /* Grey 100 */
}

#home{
	top: 90px;
	background-color: #00C853; /* Green A700 */
}

#about{
	top: 155px;
	background-color: #2962FF; /* Blue A700 */
}

#publication{
	top: 220px;
	background-color: #D50000; /* Red A700 */
}

#portfolio{
	top: 285px;
	background-color: #FFAB00; /* Amber A700 */
}

#personal{
	top: 350px;
	background-color: #424242; /* Grey 800 */
}

#mySidenav a.active{
	background-color:#F5F5F5; /* Grey 100 */
	color: #000000;
	border: 1px solid #000000;
}

/* myTopNavication */
.topnav{
	overflow: hidden;
	background-color: #212121; /* Grey 900 */
}

.topnav a{
	float: left;
	display: block;
	color: #F2F2F2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
	font-variant: small-caps;
}

.topnav a:hover{
	background-color: #BDBDBD; /* Grey 400 */
	color: black;
}

#myTopnav a.active{
	background-color: #E0E0E0; /* Grey 300 */
	color: #000000;
}

.topnav .icon{
	display: none;
}

@media all and (max-width: 600px) {
	.topnav a:not(:first-child){
		display: none;
	}
	.topnav a.icon{
		float: right;
		display: block;
	}
}

@media all and (max-width: 600px) {
	.topnav.responsive{
		position: relative;
	}
	.topnav.responsive .icon{
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a{
		float: none;
		display: block;
		text-align: left;
	}
}

/* iphone 6+: 414px * 736px, using mySidenav */
@media only screen and (min-device-width: 737px) and (min-width: 462px) {
	body{
		font-size: 120%;
		margin: 3% 5%;
	}

	.content{
		margin: 0;
	}

	#mySidenav{
		display: block;
	}

	#myTopnav{
		display: none;
	}
}

/* ipad: 768px * 1024px, using nav */
@media only screen and (min-device-width: 1025px) and (min-width: 1292px) {
	body{
		font-size: 120%;
		margin: 2% 20%;
	}

	.content{
		margin: 0;
	}

	nav{
		display: block;
	}

	#mySidenav{
		display: none;
	}

	#myTopnav{
		display: none;
	}

	/* --- Responsive Testimonials --- */
	.container{
		text-align: left;
	}

	.container img{
		float: left;
		margin-right: 20px;
		display: inline;
	}
}