/* COLOR CODES
Black olive #3B3C36
White smoke #f9f7f3

Light sea green #16a1a8
Midnight #6d247c

Blue lagoon #b5e2fa
Pale goldenrod #eddea4
*/
/*///////////////////////////////////////*/
/*////////////// ALGEMEEN ///////////////*/
/*///////////////////////////////////////*/
html, body {position: relative; height: 100%; width: 100%;}

body {
	font-family: 'Roboto', sans-serif;
	line-height: 25px;
	font-size: 25px;
	color: #3B3C36;
	margin: 0;
	padding: 0;
	background-color:  #f9f7f3;
}



/*///////////////////////////////////////*/
/*////////////// SIDEBAR ////////////////*/
/*///////////////////////////////////////*/
.sidebarInfo {
	position: absolute;
	height: 100%;
	width: 15%;
	background-color: #3B3C36; 
	color: #f9f7f3;
	font-size: 15px;
	line-height: 18px;
}

.logo img {
	cursor: pointer;
	height: 70px;
	margin-left: 10px;
	margin-top: 10px;
	opacity: 0.8;
}
.logo img:hover {opacity: 1;}
.logoBlackOlive {}
.logoWhiteSmoke {position: absolute; margin-left: -2.6%;}

.aboutme {margin: 20px;}
.aboutme p {margin: 10px;}
.aboutme p a {
	 text-decoration: none; color: #16a1a8; font-weight: 700;
}
.aboutme p a:hover {
	 text-decoration: underline; color: #b5e2fa;
}

.imageME {width: 100%;}

#quote {
	color: #f9f7f3;
	font-size: 14pt;
	line-height: 20pt;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	margin: 10px;
}

#quote #change {
	color: #f9f7f3;
	font-size: 14pt;
	line-height: 20pt;
}

.aboutIcon {
	display: inline-block;
	width: 15px;
	margin-right: 10px;
	opacity: 0.8;
}

.socials {
	width: 95%;
	margin: auto;
}
.socials .icon {
	display: inline-block;
	width: 28px;
	margin: 7px;
	opacity: 0.8;
}
.socials .icon:hover {opacity: 1;}


/*///////////////////////////////////////*/
/*/////////// PROJECTS PAGINA ///////////*/
/*///////////////////////////////////////*/
h1 {
	color: #16a1a8;
	font-size: 42pt;
	line-height: 62pt;
	margin-bottom: 65px;
	font-family: 'Libre Baskerville', serif;
	text-align: center;
}

h2 {
	color: #eddea4;
	font-size: 23pt;
	line-height: 30pt;
	margin-top: 15px;
	margin-bottom: 10px;
	font-family: 'Libre Baskerville', serif;
	text-align: center;
}

h3 {
	color: #b5e2fa;
	font-size: 24pt;
	line-height: 24pt;
	margin-bottom: 10px;
	font-family: 'Libre Baskerville', serif;
	text-align: center;
}

.grid {width: 95%; margin: auto; margin-bottom: 75px;}
.gridAndSidebar {width: 85%; margin-left: 15%;}
.stamp {
	position: absolute;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 150px;
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	height: 75px;
}

/* ---- button ---- */
.filters {
	width: 600px;
	margin: auto;
	padding: 0;
	padding-top: 120px;
}

.ui-group {}
.button-group:after {content: '';display: block;clear: both;}

.button {
	margin: 2.8%;
	padding: 0.7em 1.5em;
	background-color: #b5e2fa;
	border: none;
	color: #3B3C36;
	border-radius: 0.5em;
	font-family: sans-serif;
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
}

.button:hover {color: #f9f7f3; background:#16a1a8;}
.button:active, .button.is-checked {color: #3B3C36; background-color: #eddea4;}

.afbeeldingen {
	margin: auto;
	width: 100%;
	padding: 0.75%;
} /* 31.85% */
.afbeeldingenBistro {max-width: 38%;}
.afbeeldingenTelenet {max-width: 28%;}
.afbeeldingenIslakker {max-width: 20%;}
.afbeeldingenEbike {max-width: 40%;}
.afbeeldingenSnoep {max-width: 22%;}
.afbeeldingenQuote {max-width: 26%;}
.afbeeldingenTattrest {max-width: 40%;}
.afbeeldingenMapping {max-width: 50%;}
.afbeeldingenPortfolio {max-width: 18%;}
.afbeeldingenOptiek {max-width: 28%;}
.afbeeldingenGrietje {max-width: 30%;}
.afbeeldingenWereld {max-width: 30%;}
.afbeeldingenChess {max-width: 30%;}
.afbeeldingenHotjar {max-width: 30%;}

.afbeeldingen:hover {cursor: pointer; opacity: 0.8;}
/* clear fix */ .afbeeldingen:after {content: '';display: block;clear: both;}

/* tekst invoegen */
.gigante {margin: auto;}
.gigante:hover {opacity: 1;}
.onzichtbaar {display: none;}
.gigainfo {
	display: visible;
	font-size: 14pt;
	background-color: #FFFFFF;
	border-radius: 0 0 0.3em 0.3em;
}

.gigatext {margin:auto; padding:auto; padding: 15px 30px; color: #3B3C36;}
.gigatext a {text-decoration: none; color: #6d247c; font-weight: 700;}
.gigatext a:hover {text-decoration: underline;}
.foto {width: 100%; background-color: transparent;}
.foto img {width: 100%; display: block; margin: auto; background-color: transparent;}



/*///////////////////////////////////////*/
/*////////// CONTACT ME PAGINA //////////*/
/*///////////////////////////////////////*/
.kadercontact {width: 95%; margin: auto; color: #3B3C36;}
.pcontact {line-height: 30px; font-size: 20px; width: 550px; text-align: center; margin: auto; padding: 20px;}
span {font-weight: 700; font-size: 23px; color: #3B3C36;}

form {
	max-width:500px;
	margin:50px auto;
	font-family: 'Roboto', sans-serif;
	line-height: 25px;
	font-size: 10px;
	color: #3B3C36;
}

.feedback-input {
	font-family: 'Roboto', sans-serif;
	line-height: 25px;
	color: #3B3C36;
	font-size: 18px;
	border-radius: 5px;
	background-color: transparent;
	border:2px solid #16a1a8;
	transition: all 0.3s;
	padding: 10px;
	margin-bottom: 15px;
	width:100%;
	box-sizing: border-box;
	outline:0;
}
.feedback-input:focus {border:2px solid #b5e2fa;}

textarea {height: 120px; line-height: 100%; resize:vertical;}

[type="submit"] {
	font-family: 'Roboto', sans-serif;
	font-weight:700;
	font-size: 30px;
	line-height: 32px;
	width: 100%;
	background: #16a1a8;
	border-radius:5px;
	border:0;
	cursor:pointer;
	color: #f9f7f3;
	padding:10px;
	transition: all 0.3s;
}
[type="submit"]:hover {background: #b5e2fa; color: #3B3C36;}

ul li {display: inline-block;}
ul li .icon {width: 35px; margin: 10px; opacity: 0.8;}
ul li .icon:hover {opacity: 1;}



/*///////////////////////////////////////*/
/*//////////// MEDIA QUERYS /////////////*/
/*///////////////////////////////////////*/
@media all and (max-width: 950px) and (min-width: 700px) {

}

@media all and (max-width: 700px) and (min-width: 550px) {
	/* HOME PAGINA */
	
	/* ABOUT PAGINA */
	.stamp{margin-bottom: 70px; }
	/* PROJECTS PAGINA */
	.filters {display:none;}
	.grid-sizer, .afbeeldingen {width: 48%;}
	.gigante {width: 100%;}
	/* CONTACT PAGINA */
	.pcontact {display: none;}
	form {line-height: auto;}
	.feedback-input {line-height: auto; margin-bottom: 10px;}
	textarea {height: 150px; line-height: auto;}
	[type="submit"] {line-height: auto; background:#16a1a8;}
	ul li {display: inline-block;}
	.icon {opacity: 1;}
}

@media screen and (max-width: 550px) {
	/* HOME PAGINA */
	/* ABOUT PAGINA */
	/* PROJECTS PAGINA */
	.stamp {margin-bottom: 50px;}
	.filters {display: none;}
	.grid-sizer, .afbeeldingen {width: 48%;}
	.gigante {width: 90%; margin:auto; margin-left:5%; margin-right:5%;}
	.gigante:hover {width: 90%;}
	.gigatext {padding: 15px 20px; font-size: 18px;}
	.gigatext a {text-decoration: underline;}
	
	/* CONTACT PAGINA */
	.pcontact {display: none;}
	form {margin:30px auto; line-height: auto;}
	.feedback-input {line-height: auto; margin-bottom: 10px;}
	textarea {line-height: auto;}
	[type="submit"] {line-height: auto; background:#16a1a8;}
	.icon {width: 40px; margin: 10px; margin-top: 10px; opacity: 1;}
}