/* use a custom font to stand out */
@font-face {
	font-family: Merriweather-Regular;
	src:url("Merriweather-Regular.ttf");
}

html {
	/* otherwise min-height will be 0 */
	height: 100%;
}

/* style the body of the document */
body {
	height: 100%;
	box-sizing: border-box;
	font-family: Merriweather-Regular;
	font-size: 0.85vw;
	color: #707070;
	background-color: #efefef;
	margin: 0;
}

/* override style */
a {
	color: #707070;
}

hr {
	margin-right: 2vw;
}

.bodyConent {
	/* put some space inside the div and it's margins */
	padding-top: 0.5vw;
	padding-left: 15vw;
	padding-right: 15vw;
	padding-bottom: 0.5vw;
}

/* define 2 unequal columns that floats next to each other */
.column {
	float: left;
}

.left {
	width: 52vw;
}

.right {
	width: 14vw;
}

/* clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}

/* style the header of cv */
.header {
	/* darkish gray */
	background-color: #d4d4d4;

	/* put a clear delimitor between header and rest of document */
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	/* light blue */
	border-color: #62aafc;
	border-width: 0.2vw;

	/* put some space inside the div and it's margins */
	padding-top: 0.5vw;
	padding-left: 15vw;
	padding-right: 15vw;
	padding-bottom: 1vw;

	/* set minimum height for header */
	min-height: 6vw;
}

/* style for the profile pic */
.headerImage {
	/* set iamge size */
	width: 6vw;
	height: 6vw;

	/* create rounded corners */
	border-radius: 50%;

	/* create a light blue border around it */
	border: 0.2vw solid #62aafc;

	/* have text go to the rifht of the image */
	float: left;

	margin-right: 1vw;
}

/* style for the person's name */
.headerName {
	margin-top: 0.8vw;
	margin-bottom: 0vw;
	font-size: 2.1vw;
	font-weight: bold;
}

/* style for the person's job title */
.headerJob {
	margin: 0vw;
	font-size: 1.1vw;
}

.headerButton {
	margin-top: 1.7vw;
	margin-left: 2vw;
	background-color: #a9a9a9;
	border: none;
	border-radius: 0.8vw;
	color: #ffffff;
	padding: 1vw;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	font-size: 0.8vw;
}

/* style for the keywords */
.keyword {
	position: relative;
	left: 0vw;
	font-size: 1vw;
	font-weight: bold;
	color: #62aafc;
}

/* style the information after the keyword */
.keywordInfo {
	position: relative;
	margin: 0.1vw;
	margin-right: 1.2vw;
	top: -1.1vw;
	left: 1.5vw;
}

/* use to right ident keywordInfo */
.righIdentend {
	left: 2.5vw;
}

.paragraphText {
	position: relative;
	margin: 0.2vw;
	margin-right: 3.5vw;
	top: -1.2vw;
	left: 1.5vw;
	text-indent: 0.9vw;
}


/* Popup container */
.popup {
	position: relative;
	display: inline-block;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* The actual popup */
.popup .popuptext {
	visibility: hidden;
	width: 10vw;
	background-color: #555555;
	color: #ffffff;
	text-align: center;
	border-radius: 0.5vw;
	padding: 0.5vw 0;
	position: absolute;
	z-index: 1;
	bottom: 3.5vw;
	left: 7vw;
	margin-left: -4vw;
}

/* popup arrow */
.popup .popuptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -1vw;
	border-width: 0.5vw;
	border-style: solid;
	border-color: #555555 transparent transparent transparent;
}

/* toggle this class - hide and show the popup */
.popup .show {
	visibility: visible;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
}

/* add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	} 
	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}