@charset "utf-8";

/* ---------------------------------------------
	Stijlblad voor de typografische stijlen.
--------------------------------------------- */

/* Algemeen. */
body {
	font-family: "open-sans", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5em;
	color: #313131;
}

h1,
h2,
h3 {
	font-family: "stencil-std",sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 2em;
	color: #FAFAFA;
}

.open-tag,
.closing-tag {
	font-weight: 700;
}

.grey-color {
	color: #C2C2C2;
}

.red-color {
	color: #D5272F;
}

.green-color {
	color: #7BE22E;
}

.yellow-color {
	color: #F7F454;
}

.blue-color {
	color: #3C9EEF;
}

/* Portfolio. */
div#home {
	text-align: center;
}

div#home h1::before,
div#home h1::after,
div#home h2::before,
div#home h2::after {
	color: #C2C2C2;
}

div#home h1::before,
div#home h1::after {
	font-size: 2.5em;
}

div#home span.scroll-btn {
	text-align: center;
}

div#home span {
	color: #FAFAFA;
}

div#home span:hover {
	color: #3DCE97;
}

div#home span.scroll-down {
	font-size: 2em;	
}

nav.page-navigation {
	text-align: center;
}

nav.page-navigation ul li a {
	color: #FAFAFA;
	text-decoration: none;
}

nav.page-navigation ul li a:hover,
nav.page-navigation ul li a:active {
	color: #313131;
}

section h2,
div.project-texts h3,
div#contact h2 {
	color: #3DCE97;
}

section h2,
div#contact h2 {
	text-align: center;
}

div.picture-about {
	text-align: center;
}

span.skillText {
	text-align:center;
}

div.project-texts h3 {
	font-size: 1.2em;
}

a.view-project-btn {
	color: #FAFAFA;
	font-style: italic;
	text-decoration: none;
}

div.contact-texts i {
	font-size: 1.7em;
	text-align: center;
}

div.contact-texts a#mail:link,
div.contact-texts a#mail:visited {
	color: #313131;
	text-decoration: none;
}

div.contact-texts a#mail:hover,
div.contact-texts a#mail:active {
	color: #3DCE97;
}

div.contact-form {
	text-align: center;
}

div.contact-form input,
div.contact-form textarea,
div.contact-form button {
	font-size: 1em;
	line-height: 2em;
}

div.contact-form button {
	color: #FAFAFA;
}

div.social {
	text-align: center;
}

div.social ul li a,
div.social ul li a:link,
div.social ul li a:visited {
	font-size: 1.5em;
	color: #3DCE97;
	text-decoration: none;
}

div.social ul li a#twitter:hover,
div.social ul li a#twitter:active {
	color: #1DA1F2;
}

div.social ul li a#facebook:hover,
div.social ul li a#facebook:active {
	color: #3B5998;
}

div.social ul li a#linkedin:hover,
div.social ul li a#linkedin:active {
	color: #0077B5;
}

div.social ul li a#google:hover,
div.social ul li a#google:active {
	color: #DD4B39;
}

footer.page-footer {
	color: #313131;
	text-align: center;
}


/* Curriculum Vitae. */
div#title p,
div#name p,
h1.section-header,
h2.section-header {
	font-family: "stencil-std",sans-serif;
	font-style: normal;
	font-weight: 700;
	color: #313131;
}

div#title p {
	font-size: 5em;
}

div#name p,
h1.section-header,
h2.section-header {
	font-size: 3em;
}

div#name p::before,
div#name p::after {
	font-size: 2.5em;
	color: #C2C2C2;
}

ul.personal-info i {
	font-size: 1.7em;
	text-align: center;
}

ul.personal-info a:link,
ul.personal-info a:visited {
	color: #313131;
	text-decoration: none;
}

ul.personal-info a:hover,
ul.personal-info a:active {
	color: #3DCE97;
}

section#experience,
section#experience h1,
section#education,
section#education h1 {
	color: #FAFAFA;
}

section#experience,
section#education {
	text-align: center;
}

h2.section-header {
	color: #FAFAFA;
}

div#other,
div#download {
	text-align: center;
}

div#download a:link,
div#download a:visited {
	color: #313131;
	text-decoration: none;
}

div#download a:hover,
div#download a:active {
	color: #FAFAFA;
}