/*
Theme Name: Sebas 2021
Theme URI: http://sebasvandenbrink.nl
Author: Sebas van den Brink
Author URI: http://sebasvandenbrink.nl/
Description: Gemaakt voor ontwerp et al.
Version: 1.0
*/

/* ---------------------------------------- *
/* IMPORTS
/* ---------------------------------------- */

@import url('css/fonts.css');
@import url('css/normalize.css');
@import url('css/portfolio.css');

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! *
 * SEE FONTS.CSS FOR FONT GENERAL DECLARATIONS 			*
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* ---------------------------------------- *
/* BASICS
/* ---------------------------------------- */

.clr {
	clear: both;
}

html {
	scroll-behavior: smooth;
}

body, html {
	background-color: #333;
	height: 100%;
	margin: 0;
	color: #111;
}

body {
	border-top: 10px solid #333;
}

/* hiding: */
@media (min-width : 960px) {	
	.hide-desktop {
		display: none !important;
	}
}

@media (max-width : 960px) {	
	.hide-mobile {
		display: none !important;
	}
}

@media (max-width: 420px){
	.hide-only-mobile {
		display: none !important;
	}
}


/* offsite links */
.external:after {
	content: " ";
	display: inline-block;
	background-image: url("images/offsite.svg");
	background-position: center right;
	background-repeat: no-repeat;
	background-size: 10px 10px;
	margin-left: 2px;
	width: 10px;
	height: 10px;
}

	@media (min-width : 960px) {
		#overlay-menu-inner .external:after { 
			background-size: 16px 16px;
			width: 16px;
			height: 16px; 
		}
	}

.noicon:after,
.noicon a:after {
	content: "" !important;
	display: inherit;
	background-image: none !important;
	margin-left: 0;
	width: 0;
	height: 0;
}

/* ############################################################################################################################# */
/* ############################################################################################################################# */
/* ############################################################################################################################# */
/* DESKTOP */
/* ############################################################################################################################# */

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––– *
 * MAIN COMPONENTS											*
 * –––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* MAIN WRAP */
#site-wrap {
	border-top: 10px solid #06c;
	margin: 0 auto;
}

/* Header: menus, logo, etc */
#site-header {
	border-top: 10px solid #fc0;
	border-bottom: 1px solid #ccc;
	background-color: #fff;
}

	/* mobile variant */
	@media (max-width : 960px) {	
		#site-header {
			padding: 0 10px;
		}
	}

/* Emphasis: website intro, site-wide announcement, etc */
#site-emphasis {
	background-color: #06c;
	overflow: hidden;
}

/* mobiele variant */
#site-emphasis-mobile {
	background-color: #06c;
	padding: 0 15px;
}

/* Body: variable content, pages, portfolio, etc */
#site-body {
	background-color: #fff;
}

	/* mobile variant */
	@media (max-width : 960px) {	
		#site-body {
			padding: 0 10px;
		}
	}

/* Footer: footer widgets, to top, etc */
#site-footer {
	background-color: #fc0;
}

	/* mobile variant */
	@media (max-width : 960px) {	
		#site-footer {
			padding: 0 10px;
		}
	}

/* Colophon: copyright, terms, etc */
#site-colophon {
	background-color: #06c;
	margin-bottom: 10px; /* we want some space at the bottom to show a bit of background gray */
}

	/* mobile variant */
	@media (max-width : 960px) {	
		#site-colophon {
			padding: 0 10px;
		}
	}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––– *
 * MAIN WIDTHS												*
 * –––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Desktop */
 @media (min-width : 960px) 
 {	
	/* general width class */
	.width-main {
		width: 950px;
		margin: 0 auto;
	}
}

/* Mobile */
 @media (max-width : 960px) 
 {	
	/* general width class */
	.width-main {
		margin: 0 auto;
	}
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––– *
 * CONTENT BLOCKS											*
 * –––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* second parent of the header part */
#content-header {
	/* we want to enable overflow in the header to allow for dropdown menus */
}

	#header-top {
		overflow: hidden;
	}

		#header-logo {
			padding-top: 15px;
			width: 60px;
			float: left;
		}

		#header-extra-menu {
			text-align: right;
		}

#content-intro {
	/* the introduction */
}

/* main, variable, content of the page */
#content-body {
	/* do not put font declaration here, we may need to use various fonts */
	padding-bottom: 30px;
}

	#body-crumbs {
		overflow: hidden;
	}

	/* title block, make template without if necessary? */
	#body-title {
		overflow: hidden;
	}

	/* basic content piece */
	.body-block {
		overflow: hidden;
	}

	/* block wrap, to enable a sidebar */
	.block-wrapper {
		overflow: hidden;
	}

		.block-wrapper-left {
			float: left;
			width: 80%;
		}

		.block-wrapper-right {
			float: left;
			width: 20%;
		}

		/* mobile variant */
		@media (max-width : 960px) {
			.block-wrapper-left,
			.block-wrapper-right {
				float: none;
				width: 100%;
			}
		}

	/* overwrites width, parent object to enable absolute position in child */
	.wide-body {
		width: 100%;
	}

		.wide-content {
			width: 100%;
			margin-left: -300vw;
			padding-left: 300vw;
			margin-right: -300vw;
			padding-right: 300vw;
			background-color: #eee;
		}

			/* mobile variant */
			@media (max-width : 960px) {	
				.wide-content {
					width: 100%;
					margin-left: 0;
					padding-left: 0;
					margin-right: 0;
					padding-right: 0;
				}
			}

	/* general block settings */
	.block-25, .block-33, .block-34, .block-50, .block-67, .block-75, .block-100 {
		padding: 30px 0;
	}

		/* overwritable bottom padding setting */
		.no-margin-bot .block-25,
		.no-margin-bot .block-33,
		.no-margin-bot .block-34,
		.no-margin-bot .block-50,
		.no-margin-bot .block-67,
		.no-margin-bot .block-75,
		.no-margin-bot .block-100 {
			padding-bottom: 0px !important;
		}

	/* block widths */
	.block-25 {
		float: left;
		width: 25%;
		word-wrap: break-word;
	}

	.block-33 {
		float: left;
		width: 33%;		
	}

	.block-34 {
		float: left;
		width: 34%;		
	}

	.block-50 {
		float: left;
		width: 50%;
	}

	.block-67 {
		float: left;
		width: 67%;
	}

	.block-75 {
		float: left;
		width: 75%;
	}

	.block-100 {
		width: 100%;		
	}

		/* mobile variant */
		@media (max-width : 960px) {	
			.block-25,
			.block-33,
			.block-34,
			.block-50,
			.block-67,
			.block-75,
			.block-100 {
				width: 100%;
				float: none;
			}
		}

	/* possible extra padding on the right hand side, applies to certain elements inside a block */
	.rpad p,
	.rpad h1,
	.rpad h2,
	.rpad h3,
	.rpad h4,
	.rpad h5,
	.rpad h6,
	.rpad li {
		margin-right: 15px;
	}

		/* mobile variant */
		@media (max-width : 960px) {	
			.rpad {
				margin-right: 0 !important;
			}
		}

	/* subdivision class, useful for blog-items stacked in a single block, for instance */
	.segment {
		overflow: hidden;
		padding-bottom: 30px;
		margin-bottom: 15px;
	}

	/* blog image alignments */
	.alignright {float:right; margin:0 0 1em 1em}
	.alignleft {float:left; margin:0 1em 1em 0}
	.aligncenter,
	.alignnone {display: block; margin-left: auto; margin-right: auto; overflow: hidden; width: 100% !important; height: 100%;}

	.alignright img,
	.alignleft img,
	.aligncenter img,
	.alignnone img { overflow: hidden; width: 100% !important;  height: 100%;}

/* widgets, mostly links */
#content-footer {
	overflow: hidden;
	padding: 30px 0 15px 0;
}

	.footer-column {
		float: left;
		width: 25%;
	}

		/* mobile variant */
		@media (max-width : 960px) {
			.footer-column {
				float: none;
				width: 100%;
				margin-bottom: 15px;
			}
		}

/* colophon, logo, copyright, etc */
#content-colophon {
	overflow: hidden;
	padding: 30px 0 15px 0;
}

	.colophon-column {
		overflow: hidden;
		width: 33.3%;
		float: left;
	}

		/* mobile variant */
		@media (max-width : 960px) {
			.colophon-column {
				float: none;
				width: 100%;
				margin-bottom: 15px;
			}
		}

	/* the two specialised colophones are outlined to the svdb logo height */
	#colophon-sm,
	#colophon-search {
		padding-top: 60px;	
	}

		/* mobile variant */
		@media (max-width : 960px) {
			#colophon-sm,
			#colophon-search {
				padding-top: 0;
			}
		}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––– *
 * STYLE													*
 * –––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* slight borders - added to content parts */
.border {
	border-top: 1px solid #ccc;
}

.border-bot {
	border-bottom: 1px solid #ccc;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––– *
 * SEARCH													*
 * –––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* footer searchform */
#searchform {
	text-align: right;
	height: 60px;
}

	/* mobile variant */
	@media (max-width : 960px) {
		#searchform{
			text-align: left;
		}
	}

	#searchform input {
		border-top: 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 1px solid #fff;
		background-color: transparent;
		color: #fff;
		height: 30px;
	}

	#searchform button,
	#searchform button:visited {
		border: 0;
		height: 30px;
		width: 30px;
		background-color: #06c;
		cursor: pointer;
	}

	#searchform button:hover {
		background-color: #05c;
	}

	#searchform button:active {
		background-color: #333;
	}

/* results page searchform */
#searchform-results {
	height: 60px;
}

	#searchform-results input {
		border-top: 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 1px solid #ccc;
		background-color: #eee;
		color: #333;
		height: 30px;
		width: 70%
	}

	#searchform-results button,
	#searchform-results button:visited {
		border: 0;
		height: 32px;
		width: 20%;
		background-color: #06c;
		cursor: pointer;
	}

	#searchform-results button:hover {
		background-color: #05c;
	}

	#searchform-results button:active {
		background-color: #333;
	}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––– *
 * INTRO													*
 * –––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.block-intro-text {
	position: absolute;
	float: left;
	width: 55%;
	margin-top: 50px;
	z-index:2;
}

.block-intro-anim {
	float: right;
	z-index: 1;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––– *
 * CALL TO ACTION BUTTONS									*
 * –––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.cta {
	margin-top: 15px;
}

.action {
	padding: 0 10px 0 0 !important;
}

.action-middle {
	padding-right: 0 !important;
	width: 100%;
	text-align: center;
}

	.action a {
		display: inline-block;
		background-color: #06c;
		color: #fff;
		padding: 10px 15px 10px 15px;
		margin: -3px 10px 0 0;
		border-bottom: 5px solid #039;
	}

	.action a:link,
	.action a:visited { 
		background-color: #06c; 
		color: #fff; 
		text-decoration: none; 
		border-bottom: 5px solid #039; }
	.action a:hover { 
		background-color: #07f; 
		color: #fff; 
		text-decoration: none; 
		border-bottom: 5px solid #03e; }
	.action a:active { 
		background-color: #ccc; 
		color: #fff; 
		text-decoration: none; 
		border-bottom: 2px solid #999; 
		border-top: 3px solid #fff; }

	.action a.on-yellow:active {
		border-top: 3px solid #fc0 !important;
	}


/* ---------------------------------------- *
/* OVERLAY MENU
/* ---------------------------------------- */
#mobile-open-overlay {
	margin-top: 25px;
	float: right;
	position: relative;
}

	#mobile-open-overlay img {
		cursor: pointer;
	}

#overlay {
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background-color: #fff;
	background-color: rgba(255,204,0,.75);
}

	#overlay-menu {
		display: none;
		position: relative;
		height: 100%;
		overflow-x: hidden;
	}

		/* OVERLAY LOGO */
		#overlay-menu-logo {
			position: absolute;
			top: 84px;
			left: 5%;
			z-index: 999;
		}

		@media (max-width : 960px) {	
			#overlay-menu-logo { top: 21px; left: 21px; }
		}
		@media (min-width : 960px) {	
			#overlay-menu-logo { top: 84px; left: 5%; }
		}


		/* OVERLAY CROSS */
		#overlay-menu-close {
			position: absolute;
			z-index: 50;
			top: 84px;
			right: 5%;
			width: auto;
			margin: 0;
			padding: 0;
			line-height: 0;
		}

		@media (max-width : 960px) {	
			#overlay-menu-close { top: 21px; right: 21px; }
		}
		@media (min-width : 960px) {	
			#overlay-menu-close { top: 84px; right: 5%; }
		}

			#overlay-menu-close #popover-wrap {
				cursor: pointer;
			}

				#overlay-menu-close #popover-wrap:hover {
					color: #1468ef;
				}


		/* OVERLAY CONTENT */
		#overlay-menu-content {
			z-index: 30;
			position: absolute;
			text-align: center;	
			width: 100%;
			height: 100%;
		}

			#overlay-menu-outer {
				display: table;
				height: 100%;
				width: 100%;
				overflow: hidden;
			}

			#overlay-menu-inner {
				display: table-cell;
				vertical-align: middle;
				width: 100%;
			}

			#menu-mobile-menu {
				padding: 0;
			}