/* ---------------------------------------------------- */
/*                 CSS sripting for css-EBSbb 10-09-25  */
/* ---------------------------------------------------- */

/* ----------------------------------------------------------------- */
/*					resolution definitions							 */
/*		example:	for portrait	: width=700px and height=400px	 */					 
/*					for landscape	: width=400px and height=700px	 */
/* ----------------------------------------------------------------- */
/*	smartphones		max	width	: 700px								 */
/*						height	: 400px								 */
/* ----------------------------------------------------------------- */
/*	Tablets			max	width	: 1199px							 */
/*						height	: 768px								 */
/* ----------------------------------------------------------------- */
/*	large screen	min	width	: 1200px							 */
/*						height	: 768px								 */
/* ----------------------------------------------------------------- */
*/
/* ================================================================= */
/*							DEFAULT SETTING							 */
/* ================================================================= */
	body {
		background-color		: black;						/* back-up color		*/
		font-family				: "Times New Roman", Times, serif;
		font-size				: 16px;							/* font for small devices */
		color					: navy;
		background-repeat		: no-repeat;
		background-attachment	: fixed;
		background-size			: cover;	
	}
	
/* ========================================================= */
/*						LARGE SCREENS						 */
/* ========================================================= */
@media only screen and (min-width:1200px) and (orientation:landscape) {
	body {
		background-image		: url("../main/bus.jpg");	 	/* standard background image */
		color					: navy;
		background-color		: black;						/* backup background		 */
		font-size				: 16px;							/* font for large devices	 */
	}
}	/*	end large Screens*/ 

@media only screen and (min-width: 400px) and (max-width: 1200px) and (orientation: landscape) {
	body {
		background-image		: url("../main/bus.jpg"); 	/* background image */
		background-color		: green;					/* back-up color		*/
		color					: navy;
		font-size				: 10px;						/* font 18px=1vw=100% */
	}
}	/*	end tablets	*/


/* ========================================================= */
/*			    			PHONES							 */
/* ========================================================= */
@media only screen and (max-width: 400px) and (orientation: portrait) {
	body {
		background-image		: url("../main/bus.jpg");  	/* background image */
		background-color		: yellow;						/* back-up color		*/
		font-family				: "Times New Roman", Times, serif;
		font-size				: 8px;							/* font for small devices */
		color					: navy;
		background-repeat		: no-repeat;
		background-attachment	: fixed;
		background-size			: cover;	
	}
}	/* media */


	/* ---------------------------------------------------- */
	/*                 FONT setting		   					*/
	/* ---------------------------------------------------- */
	h {
		font-size			: 250%;					/* size text buurtbus */
		text-align			: center;
	}	
	h1 {
		font-size			: 190%;					/* 1.9vw */
		text-align			: center;
	}
	h2 {
		font-size			: 150%					/* 1.5vw */
		text-align			: center;
	}
	p {
		font-size			: 100%;					/* the standaard */
		text-align			: center;
	}
	p1 {
		font-size			: 120%;					/* 1vw */		
		text-align			: center;
	}
	
	p2 {
		font-size			: 100%;					/* 1vw */
		text-align			: center;
		color				: #f2f2f2;
	}
	p3 {
		font-size			: 70%;					/* 0.5vw */
		color				: #f2f2f2;
		text-align			: left;
	}	
	p4 {
		font-size			: 50%;					/* 0.5vw */
		text-align			: center;
		color				: #f2f2f2;
	}

.break-all {
  word-break: break-all;
}

.wrap-all {
  word-wrap: break-word;	
}	

.txtleft {
	text-align: left;
}
div.txtcenter {
	text-align: center;
}

/* ----------------------------------------------------- */
/*                    GAB setting                        */
/* ----------------------------------------------------- */
	.vp-gab-container {
		display				: flex;
		width				: auto;							/* 131em; */
		height				: 3vh;							/* 16em; 256px  */
		margin				: 0;
	}
/* ----------------------------------------------------- */
/*            MAIN setting css-EBSbb-bestuur.css         */
/* ----------------------------------------------------- */			
	.flex-main-container {
		display				: flex;
		background-color	: #f2f2f2;
		opacity				: 0.85;						/* transparacy of the background */
		border-left			: 0.2vw solid navy;
		border-right		: 0.2vw solid navy;
		width				: auto;
		height				: 63vh;
	}	
/* ----------------------------------------------------- */
/*                 HEADER setting                        */
/* ----------------------------------------------------- */
	.flex-header-container {
		display				: flex;
		background-color	: #f2f2f2;
		opacity				: 0.90;						/* transparancy */
		border-top			: 0.2vw solid navy;
		border-left			: 0.2vw solid navy;
		border-right		: 0.2vw solid navy;
		width				: auto;						/* width of the container */
		height				: 23vh;						/* height of the container */						/* 16em; 256px  */
	}
	
/* -------------------------------------------------- */
.ebs-container {
	/* border			: 0.1vw solid navy; */
	display				: flex;
	margin				: 1vw 1vw 1vw 3vw;				/* position of the container 2vw 1vw 1vw 3vw */
}
.responsive-ebs {
	max-width			: 100%;							/* responsive logo */
	height				: auto;
}
/* -------------------------------------------------- */
.bbb-container {
	/*	border			: 0.1vw solid navy;	*/ 
	display			: flex;
	justify-content	: center;						/* Horizontal center */
    align-items		: center;						/* Vertical center */
	width			: 80vw;							/* width of the bbb-text container */
	height			: 15vh;
	margin-left		: 16vw;
	margin-right	: auto;
	margin-top		: 4.5vh;
}

/* -------------------------------------------------- */
.cono-container {
	/* border		: 0.1vw solid navy; */
	display			: flex;
	margin			: 1.2vw 1vw 1vh 22vw;
}


/* ---------------------------------------------------- */
/*                 container size						*/
/* ---------------------------------------------------- */
.boxsize {
	width			: 15vw;								/* width of the container   */
	height			: 20vh;								/* height of the container */
}
/* ---------------------------------------------------- */
/*                     image sizes						*/
/* ---------------------------------------------------- */
.imgsize {
	max-width		: 100%;								/* responsive			*/
	width			: 22vw;								/* width of the images 20vw  */
	height			: auto;								/* height of the images */
}

.imgsize-thum {
	max-width		: 100%;								/* responsive			*/
	width			: 10vw;								/* width of the images   */
	height			: auto;								/* height of the images */
}

.imgsize-portret {
	max-width		: 100%;								/* responsive			*/
	width			: 12vw;								/* width of the images   */
	height			: auto;								/* 32 height of the images */
}

.imgsize-max {
	max-width		: 100%;								/* responsive			*/
	width			: 60vw;								/* width of the images   */
	height			: auto;								/* 32 height of the images */
}
/* ----------------------------------------------------- */
/*                NAVIGATION setting                     */
/* ----------------------------------------------------- */			
	.flex-navi-container {
		display				: flex;
		background-color	: black;					/* black border for navi */
		border-left			: 0.2vw solid navy;
		border-right		: 0.2vw solid navy;		
		width				: auto;						/* 131em; */
		height				: 1vh;
		margin-left			: auto;
		margin-right		: auto;
	}

/* ================================================================ */
/*					NAVBAR container and content					*/
/* ================================================================ */
 /* Navbar container */
.navbar {
	overflow				: hidden;
	background-color		: #333;							/* navbar color of the container*/
	font-family				: "Times New Roman", Times, serif;
}

/* Links inside the navbar */
.navbar a {
	float					: left;
	color					: white;
	text-align				: center;
	padding					: 0px 16px;						/* top and bottom paddings are 0x, right and left paddings are 16px	*/
	border-right			: 0.16vw solid #f2f2f2;			/* vertical dash indicating menu knops */
	text-decoration			: none;
}
/* -------------------------------------------------------------------- */
/*						navbar dropdown									*/
/* -------------------------------------------------------------------- */
/* The dropdown container */
.dropdown {
	float					: right;
	overflow				: hidden;
	border-left				: 0.16vw solid #f2f2f2;		/* vertical dash indicating menu knops */
}
/* Dropdown button */
.dropdown .dropbtn {
	border					: none;
	outline					: none;
	color					: #f2f2f2;		/* navbar dropdown text color		*/
	padding					: 1px 16px;		/* top and bottom paddings are 0x, right and left paddings are 16px	*/
	background-color		: inherit;
	font-family				: inherit;		 /* Important for vertical align on mobile phones */
	margin					: 0; 			/* Important for vertical align on mobile phones */
}

/* Add a grey background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
	background-color		: #ddd;					/* change background color to GREY	*/
	color					: #333;					/* text color is black				*/
	border					: 0.1vw solid navy;		/* border line when hover */
}
/* Dropdown content (hidden by default) */
.dropdown-content {
	border-left				: 0.1vw solid navy;	/* vertical border line */
	display					: none;
	position				: absolute;
	background-color		: #f2f2f2;			/* dropdown background color is white */
	min-width				: 10vw;				/* the width of the background			*/
	box-shadow				: 0.4vw 0.4vw;		/* vertical and bottom horizontal shadow */
	z-index					: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
	float					: none;
	color					: navy;				/* color of the links */
	padding					: 5px 10px;			/* top and bottom paddings are 0x, right and left paddings are 16px	*/
	text-decoration			: none;
	display					: block;
	text-align				: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
	background-color		: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display					: block;
} 

/* ----------------------------------------------------- */
/*                FOOTER setting                         */
/* ----------------------------------------------------- */			
	.flex-footer-container {
		display				: flex;
		background-color	: black;
		border				: 0.2vw solid navy;
		width				: 100%;
		height				: 1.5vw;
	}
	
/* ----------------------------------------------------- */
/*                general CENTER class                   */
/* ----------------------------------------------------- */
.center {
	margin-left			: auto;
	margin-right		: auto;
}

.scroller {
	overflow-y			: scroll;			/* vertical active	*/
	overflow-x			: scroll;			/* horizotal active */
	scrollbar-gutter	: stable both-edges;
	scrollbar-color		: navy #B8C9F5;
	overscroll-behavior	: contain;
	margin-left			: auto;				/* center the scroll container */
	margin-right		: auto;
}

/* global responsive for images */
.responsive {
	max-width			: 100%;
	height				: auto;
}

/* global responsive for images */
.responsive-dienst {
	max-width			: 100%;
}
.responsive-cono {
	max-width			: 100%;
	width				: 6.5vw;
	height				: auto;
}