@font-face{

}
html,body{
	margin: 0;
	max-width: 100%;

}

*{
	font-family: 'source sans pro', sans-serif;
}

h1,h2{
	margin: 0px 15% 0px 15%;
}

li{
	list-style: none;
}

a{
	text-decoration: none;
	color:black;
}

/* intro */

#intro{
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	position: absolute;
}

#intro img{
	height: 100%;
	width: 100%;
}

#contlogo{
	height: 100vh;
	width: 100%;
	position: relative;
}

#contlogo img{
	position: absolute;
	height: 30vh;
	width: 30vw;
	margin-left: 35vw;
	margin-top: 35vh;
	animation: pulse 4s;
}

@keyframes pulse {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

/* menu */

#contmenu{
	top: 0;
	z-index: 10;
	padding: 0;
	position: fixed;
	background-color: rgb(66,72,76);
	width: 100%;
	visibility: hidden;
}

/*#contmenu img{
	width: 50px;
	display: inline-block;

}*/

#menu{
	top: 0px;
	left: 0px;
	margin: 0 0 0 0;
	padding: 0;
	z-index: 10;
	display: flex;

	}

		#menudiv{
		top: 0;
		height: 100%;
		}
		
			#menu li{
				display: inline-block;
				justify-content: space-between;
				white-space: nowrap;
				margin-left: 2%;
			}

			#menu a{
				font-size: 1.2em;
				color:white;
			}

			#menu a:hover{
				text-decoration: underline;
			}

/*global section*/

.globalsec{
	margin: 0 15% 0 15%;
	width: 70%;
}



/* ABOUT */

#contabout{
	height: 400px;
	display: flex;
}

	#contabout img{
		float: left;
		height: 300px;
		width: 240px;
	}

	#contabout h1{
		margin-top: 40px;
	}
	#contabout h2{
		color: rgb(66,72,76);
	}
	#contabout p{
		width: 100%;
		margin-left: 15%;
	}


/* CV */

#cv{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-around;
}


	#cv a{
		border: 2px solid black;
		padding: 5px;
	}

	#cv a:hover {
		background-color: black;
		color: white;
		text-decoration: none;
	}

/* THIS WEBSITE IS STILL UNDER CONSTRUCTION */

#construct{
	height: 100px;
	width: 100%;
	background-color: rgb(210,210,210);
	position: relative;
	margin-top: 200px; margin-bottom: 200px;
}
	#construct p {
	text-align: center;
	margin-top: 45px;
	padding-top: 40px;
	padding-bottom: 40px;
	font-weight: bold;
	text-transform: uppercase;
	}

/*Com*/
/*.com{
	height: 100px;
	width: 100vw;
	position: relative;
	margin-top: 200px; margin-bottom: 200px;
	}

	.com p {
	text-align: center;
	margin-top: 45px;
	padding-top: 40px;
	padding-bottom: 40px;
	font-weight: bold;
	text-transform: uppercase;
	}*/

/* SKILLS + LANG CONT */

#contsl{
	position: relative;
	display: flex;
	justify-content: space-around;


		}

	#contsl h3{
		margin: 0 0 0 0;
	}

	.col1{
	
		display: inline-block;
		width: 50%;
	}


/* skills */

 	progress{
			background-color: black;
			color: black;
			height: 10px;
			-webkit-appearance: none;
			appearance: none;
			width: 30vw;
			max-width: 300px;
			border: 1px solid black;

		}

			progress[value]::-webkit-progress-value{
				background-color: black;
			}

			progress::-webkit-progress-bar{
				background-color: white;
			}

			progress[value]::-webkit-progress-value{
				background-color: black;
			}


/* Hobbies */

	#hobbies{
		height: 200px;

	}

		#hobbies p{
			width: 100%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;

		}

		#hobbies span{
			
		}

		#hobbies img {
			height: 100px;
			width: 100px;
			margin-top: 50px;
		}

		#hobbies img:hover {
		}

/* Employement */

#employ{
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: space-between;

}
	#employ img{
		height: 100px;
		width: 100px;
	}

/* education */



/* Work */

	#work{
		margin-top: 50px;
	}

	#contselpr{
		position: relative;
		display: flex;
		height: 50px;
		padding: 0;
		align-items: center;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	#contselpr li{
		width: 100%;
		text-align: center;
	}

	#contselpr li:hover{
		text-decoration: underline;
	}


/*		#contsel li{
			border: 1px solid black;
			width: 100%;
			text-align: center;
			flex-grow: all;
		}

		#contsel a{
			text-align: center;
		}*/

/* Work Images */

	#cont-images{
		padding: 0;
		height: 1200px ;
		position: relative;
		display: block;
		overflow: hidden;
	}

	.grid{
		left: 0;
 		margin: 0;
 		padding: 0;
 		width: 100%;
 		display: flex;
		flex-wrap: wrap;
 		align-content: flex-start;
 		height: 300px;
		}

	/* clear fix */
	.grid:after {
		left: 0;
 		margin: 0;
 		padding: 0;
 		width: 100%;
 		display: flex;
		flex-wrap: wrap;
 		align-content: flex-start;
 		height: 300px;
		}

	.element-item {
		max-width: 400px;
		min-width: 300px;
		position: relative;
		float: left;
		flex: 1;
		height: 300px;

/*	  margin: 5px;
	  padding: 10px;*/
	}

	.element-item > * {

	}

		.grid div{
			list-style: none;
			overflow: hidden;
			flex-grow: 1;


		}

		.grid img{
			min-width: 100%;
			min-height: 300px;
			position: relative;
			-webkit-transition: 0.6s ease;
			transition: 0.6s ease;
			-webkit-filter: grayscale(100%);
			filter: grayscale(100%);
		}

		.grid img:hover{
			-webkit-transform: scale (1.20);
			transform: scale(1.20);
			-webkit-filter: grayscale(0%);
			filter: grayscale(0%);
		}
		.grid p{
			position: absolute;
			top: -10px;
			left: 5px;
			color: white;
			font-style: bold;
		}

/*Display images*/

#imphopor{
	display: none;
}

/* Footer */

footer{
	background-color: rgb(50,50,50);
	margin-top: 50px;
}

footer h3{
	margin-left: 15%;
	color: white;
}

footer p{
	color: white;
	margin: 0 15% 0 15%;
}

#credit{
	text-align: center;
	font-size: 0.7em;
}