/*
Theme Name: EuropaSW
Written by Hans Groen
Based on Starkers 2.8: http://elliotjaystocks.com, the totally nude Wordpress theme. (Based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a> by Michael Heilemann)
*/

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";
@import "style/css/hoverMenu.css";

#container {  
		width:100%;
		margin:2em auto;
    	display: flex;
    	flex-flow: row;
	}

#container > kol1 {
		padding:1em 1.5em;
		border-bottom:1px solid #404;
		margin:0;
		font-size:110%;
		word-wrap:break-word;
        background: #FFF;
        flex: 1 1 60%;
		order: 1;
	}

#container > kol2 {
		padding:1em 1.5em;
		border-bottom:1px solid #404;
		margin:0;
		font-size:110%;
		word-wrap:break-word;
        background:#FFF;
        flex: 1 1 60%;
        order: 2;
	}

#container > kol3 {
		padding:1em 1.5em;
		border-bottom:1px solid #404;
		margin:0;
        background: #FFF;
        flex: 1 3 40%;
        order: 3;
		font-size:110%;
		line-height:1.5em;
	}

header {
		position:relative;
		width:100%;
		margin:0;
		flex-flow: row;
	}

footer {
   		max-width:100%;
   		margin:0 auto 0 auto;
   		padding:0em 1%;
		background-color: #FFF;
	}

.headerimage {
	background-image:url("https://esrinstitute.eu/wp-content/uploads/HG10555_Brussel.jpg");
	background-position: center; 
	position:relative;
	width:auto;
	height:12em;
	}

.headerimageESW	{
	background-image:url("https://esrinstitute.eu/wp-content/uploads/HG13088_Milan.jpg");
	background-position: center; 
	position:relative;
	width:auto;
	height:12em;
}

#fixedmenu {
		width:100%;
		position:relative;
		height:3em;
		padding:3em 0 1em 0;
	}

#socialedienst {
		position:relative;
		float:left;
		text-align:center;
		font-size:130%;
		margin: 0.5em 0 0.5em 1.5em;
		height:1.5em;
		background-color:#FFF;}

/*header elements*/
.beeldmerk { float:left;position:relative; width:65px; height:auto;margin-left:2.5em; }

.searchfield { position:relative;clear:right;float:right;margin:1em 2em 0 0; }

.zoekres {
	margin:1em 3%;
	padding:0.5em;
	vertical-align:bottom;
	background-color:#FFF;
	height:auto;
	float:left;
	overflow:hidden;
	width:90%;
	line-height:150%;
	font-size:1em;
	border-bottom:solid 3px #EEE;
	}

/* flexibel elements of the page */
.activities, .focus, .fframe, .focusfp {
	margin:1em 0;
	vertical-align:bottom;
	background-color:#FFF;
	float:left;
	overflow:hidden;
	line-height:150%;
	font-size:1em;
	}

.activities {padding:0 5%;height:auto;width:40%;}
.focus {padding:0 5%;height:auto;width:40%;font-size:80%;}
.focus img {width:40%;height:auto;}
.fframe	{margin-left:auto;margin-right:auto;width:30%;line-height:1.5em;font-size:90%;height:100%;	}
.focusfp {padding:2%;height:auto;width:40%;border:1px solid #C31845;}

#mainmenu li { display:inline; }
#mainmenu .menu-item { display:inline;font-family:'Archivo Narrow', sans-serif;margin:0 6% 0 6%;}
#mainmenu .current-menu-item {padding:0 6% 0em 6%;}

.rFloat {float:right;width:600px;margin-left:auto;}
.lFloat {float:left;width:300px;margin-right:auto;}

.fframe-bak	{
	display:flex;
	flex-flow: row wrap;
	background-color:#FFF;
	}

.fp-bak	{ 
	display:flex;
	background-color:#FFF;
	flex-flow: row wrap;
	margin-bottom:2em;
	}

.fp-onder	{ width:100%;text-align:right; }

.post		{
	margin:0.5em 0;
	background-color:#FFF;
	float:left;
	}

img.alignnone 	{
	float:left;
	clear:right;
	margin:0.5em 1.5em 0.5em 0;
	max-width:100%;
	height:auto;
	}

img.alignleft	{
	float:left;
	max-width:20%;
	margin:0 0.5em 0 0;
	height:auto;
	}

img.alignright {
	float:right;
	max-width:40%;
	margin:0 0 0 0.5em;;
	height:auto;
	}

caption { background-color:#FFF;}

.sitetitle {margin-left:180px;line-height:1.25em;font-size:180%;color:#FFF;}
.portaltitle {margin-left:1.25em;line-height:1.25em;font-size:190%;color:#FFF;}

#post	{ border-bottom:2px solid #eee;height:auto;padding-bottom:2em;margin-bottom:2em; }

#post .alignnone {width:auto;}

@media all and (max-width: 1150px) {

	#container > kol1 {
        flex: 1 1 60%;
	}
	
	#container > kol2 {
		flex-direction: column;
        flex: 1 1 35%;
	}	
	
	#container > kol3 {
		flex-direction: column;
        flex: 1 1 35%;
	}	
	
.focus	{
	width:100%;
	}

.rFloat {width:100%;}
.lFloat {width:100%;}

}

@media all and (max-width: 950px) {
	
        #container {
        flex-direction: column;
        }

        #container > kol1, #container > kol2, #container > kol3 {
        /* Return them to document order */
			order: 0;
        }
#container > kol1 {
	padding:1.5em 1% 1em 1%;
	}
	
#container > kol2 {
	padding:1.5em 1% 1em 1%;
	}
	
#container > kol3 {
    padding:1.5em 1% 1em 1%;
	}	
	
.beeldmerk { margin-left:2.5em; }
	
.focus	{
	padding:0.5em auto;
	width:40%;
	}

img.alignnone 	{
	margin:0 2em 1em 0;
	}

.fframe	{
	margin:0.5em 2%;
	padding:0.5em 1%;
	width:43%;
	}

#mainmenu .menu-item {margin:0 5%;}
#mainmenu .current-menu-item { padding:0 5%;}

}

@media all and (max-width: 650px) {

#container > kol1 {
	padding:1.5em 1% 1em 1%;
	}
	
#container > kol2 {
	padding:1.5em 1% 1em 1%;
	}
	
#container > kol3 {
    padding:1.5em 1% 1em 1%;
	}	

#post p {margin-left:1em;}

#banner { display: none; }	
	
.activities, .focus {
	width:100%;
	margin:0.5em 1%;
	height:auto;
	}

.focusfp {padding:2%;height:auto;width:100%;border:1px solid #C31845;}	
	
.fframe	{
	width:100%;
	padding:0.5em 1%;
	}	
	
img.alignnone	{
	margin:0 2em 1em 0;
	}

	.beeldmerk { margin-left:0.5em; }
	
.sitetitle {font-size:140%;margin-left:150px;}
.portaltitle {margin-left:0.5em;font-size:140%;}

.xmenu { margin:0 0 0 0.5em; }
	
.searchfield { margin:1em 1em 0 0; }
		
#mainmenu .menu-item {margin:0 3% 0 3%;}
#mainmenu .current-menu-item { padding:0 3% 0 3%;}
	
}

/* responsive iframe  */
.video-container {
    position: relative;
    max-width: 100%;
    height: 0;
    padding-bottom: 56.25%;
	margin:2em 0;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* end iframe */ 

/* reguliere html tags die niet flex zijn */

a	{
	COLOR:#036;
	text-decoration:none;
	font-weight:700;
	}

a:hover, a.hover {cursor:pointer;text-decoration:underline;COLOR:#036;}

#mainmenu a { text-decoration:none;color:#036; }
#socialedienst a { text-decoration:none;color:#999; }

body, .search	{
	margin:0;
	line-height:1.8em;
	background-color: #FFF;
	font-family: 'Nunito Sans', sans-serif;
	color:#555;
	font-size:100%;
	}

h1 {font-family:'Archivo Narrow', sans-serif;font-size:180%;font-weight:700;margin:0.5em 0 0.5em 0;color:#777; }
h2 {font-family:'Archivo Narrow', sans-serif;font-size:150%;margin:2em 0 0.5em 0;color:#777; }
h3 {font-family:'Archivo Narrow', sans-serif;font-size:130%;margin:1em 0 0.5em 0;color:#777; }
h4 {font-family:'Archivo Narrow', sans-serif;font-size:110%;margin:1em 0 0.5em 0;color:#777; }
h5 {font-family:'Archivo Narrow', sans-serif;font-size:100%;margin:1em 0 0.5em 0;color:#777; }
h6 {font-family:'Archivo Narrow', sans-serif;font-size:90%;font-style:italic;margin:1.5em 0 0.5em 0; }

#socialedienst h2 {font-family: 'Nunito Sans', sans-serif;}

.activities h2 {margin-top:0;}
.focus h2 {margin-top:0;}

p	{ margin:0 0 1.5em 0; }

.programma {padding-left:4.2em;text-indent:-4.2em;margin-bottom:0; }

.postdate { font-size:80%;color:#999;margin:-1em 0 0 0; }
.postcat { font-size:80%;color:#999;margin:0; }

.postedIn { font-size:80%;color:#999; }

.intro	{font-weight:700;}

/* wp-gegenereerde menu voormgeving */

#mainmenu	{
	position:fixed;
	background-color:#FFF;
	opacity:0.8;
	text-align:center;
	width:100%;
	height:auto;
	z-index:10;
}

#mainmenu li a {display:inline;}

#top-menu {font-weight:700;color:#AAA;}

#top-menu li a {display:inline;}

#fixedmenu li a {display:inline;margin:0 0.5em 0 0;}

.menu	{
	padding:0;
	display:block;
}

.menu-item {font-family:'Archivo Narrow', sans-serif;display:block;clear:left;font-size:120%;padding-top:0.25em;margin:0.5em 0; }

ul.menu {font-family:'Archivo Narrow', sans-serif;}

ul.sub-menu {font-family:'Archivo Narrow', sans-serif;margin:0 0 0 2em;padding:0em;font-size:80%;}

ul.children {font-family:'Archivo Narrow', sans-serif;padding:0;font-size:90%;}

li.menu-item {font-family:'Archivo Narrow', sans-serif;}

/* haakjes voor lijst, niet hier gebruiken: li:before { content: '\00BB\A0'; } */

li.widget {margin:0 0 1em 0;}

li.cat-item {display:inline;font-size:90%;}

li.page_item {font-size:120%;margin:0;}

li.current-menu-item { margin-top:0.5em;background-color:#adc2eb;}

li.social {display:inline-block;border: 1px solid #666;width:1.5em;}

.page_item {
	margin:0 1em 0 0;
	font-weight:700;
}

.widgettitle { font-size:120%;color:#999;margin:1.5em 0 0.5em 0; }

.activities img {
    width:100%;
}

.share {margin-left:0.5em;}

.wp-cation {background-color:#FFFFFF;}