@import url("https://fonts.googleapis.com/css?family=Raleway");

@media only screen and (max-width: 768px) {
	.course {
		display: block;
	}

	.course .title,
	.course .descrition {
		max-width: 100%;
	}
}

@media only screen and (max-width: 576px) {
	.skills {
		display: block;
	}

	.skills .column {
		max-width: 100%;
	}

	footer {
		text-align: center;
	}
}

body {
	margin: 0;
	font-family: "Raleway";
	font-size: 16px;
	line-height: 1.8em;
}

article {
	padding: 0 1em;
}

section {
	margin: 1em;
	padding: 1em;
}

header {
	padding: 2em;
	text-align: center;
	background-color: #2f3b93;
	/* background-image: url("./img/bg.jpg");
	background-size: cover;
	background-position: fixed; */
	color: white;
}

header section {
	margin: 0 auto;
	max-width: 640px;
}

header img {
	border-radius: 50%;
	max-width: 150px;
}

h1 {
	text-transform: uppercase;
	margin: 1em 0;
}

h3 {
	text-transform: uppercase;
}

h3,
h4 {
	font-weight: bold;
}

main {
	max-width: 1140px;
}

main section:not(:last-child) {
	border-bottom: 1px solid #ccc;
}

li.social {
	display: inline;
}

li.social:not(:last-child):after {
	content: "|";
	padding: 0 0.5em;
	color: #509e98;
}

.job span.year {
	color: #889499;
	padding-right: 10px;
}
.job span.title {
	font-weight: bolder;
	padding-right: 10px;
}
.job span.company {
	font-style: italic;
}

.education td.year {
	color: #889499;
	padding-right: 10px;
}
.education td.degree {
	font-weight: bolder;
	padding-right: 10px;
}
.education td.school {
	font-style: italic;
}

.certification td.year {
	color: #889499;
	padding-right: 10px;
}
.certification td.name {
	font-weight: bolder;
	padding-right: 10px;
}
.certification td.vendor {
	font-style: italic;
}

/* ul.job-description li:before {
	content: "✔";
	padding-right: 0.5em;
	color: #509e98;
} */

footer {
	padding: 1em 1.5em;
	background: #a7b8bf;
	color: white;
	text-align: right;
}

/* course section */

.course,
.skills {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.course .title {
	color: #509e98;
	-ms-flex: 0 0 33.3%;
	flex: 0 0 33.3%;
	max-width: 33%;
}

.course .descrition {
	-ms-flex: 0 0 66.6%;
	flex: 0 0 66.6%;
	max-width: 66.6%;
}

.course .descrition p {
	padding-left: 1em;
}

.skills .column {
	-ms-flex: 0 0 50%%;
	flex: 0 0 50%;
	max-width: 50%;
}

.skills .column ul,
ul.job-description {
	list-style-type: none;
}

.skills .column ul > li:before {
	content: "►";
	padding-right: 0.5em;
	color: #509e98;
}