/*
Theme Name: bems
Theme URI: https://bems.net
Author: Tim, Tom & Curt
Author URI: https://sciatwork.com
Description: Custom theme for bems.net
License: All Rights Reserved.
*/


/* breakpoints */

/*
@media (max-width: 768px) { 
	.phone { display: auto; }
	.computer { display: none; }
}

@media (min-width: 769px) {
	.phone { display: none; }
	.computer { display: auto; }
}
*/

@media only screen and (min-width: 950px) { /* computers */

	/* grids */
	#wrapper {
		display: grid;
		height: 100vh;
		/* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-areas: 
			"grid_header"
			"grid_midder"
			"grid_footer";
		grid-gap: 0;

		margin: auto;
		max-width: 950px; width: 100%;
	}
	header { grid-area: grid_header; 
		display: grid;
		grid-template-columns: 1fr 4fr;
		grid-gap: 0;
	}
		#bems_logo_title {
			grid-column: 1/5;
			grid-row: 1/2;
		}
		#bems_bar_top {
			grid-column: 1/5;
			grid-row: 2/3;
		}
		#menu_top {
			grid-column: 1/2;
			grid-row: 3/4;
		}
		#banner {
			grid-column: 2/5;
			grid-row: 3/4;
		}
		#bems_bar_middle {
			grid-column: 1/5;
			grid-row: 4/5;
		}
		#title_image {
			grid-column: 1/5;
			grid-row: 5/6;
		}
	
	#midder { grid-area: grid_midder; 
		display: grid;
		grid-template-columns: 1fr 4fr;
		grid-gap: 0;
	}
		#sidebar {
			grid-column: 1/2;
			padding: 1em;
		}
		main {
			grid-column: 2/5;
			padding: 1em;
		}
	
	footer { grid-area: grid_footer; 
		display: grid;
		grid-template-columns: repeat(3,1fr);
	}
		#bems_bar_bottom {
			grid-column: 1/4;
			grid-row: 1/2;
		}
		#menu_bottom {
			grid-column: 1/4;
			grid-row: 2/3;
		}
	.footer_blocks {
		font-family: "Tahoma";
		color: #FFE1B5;
		padding: 1em;
	}
	.footer_blocks a {
		color: #FFE1B5;
	}
		#footer_one {
			grid-column: 1/2;
			grid-row: 3/4;
		}
		#footer_two {
			grid-column: 2/3;
			grid-row: 3/4;
		}
		#footer_three {
			grid-column: 3/4;
			grid-row: 3/4;
		}
		copyright {
			grid-column: 1/4;
			grid-row: 4/5;
		}
}

	/* phones */
@media only screen and (max-width: 949px) {
	#wrapper,
	header,
	#midder,
	footer,
	#menu_top,
	#menu_bottom {
		display: flex;
		flex-direction: column;
	}
	p {
		padding: 1em;
	}
}


/* fonts */
@font-face {
    font-family: 'Vladimir Script';
    src: url('/fonts/VladimirScript.woff2') format('woff2'),
        url('/fonts/VladimirScript.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* typefaces */
main h3 { 
	font-family: Tahoma, sans-serif;
	font-size: 1em;
}

main p {
	font-family: Tahoma, sans-serif;
	font-size: 0.8em;
	line-height: 1.5em;
}


/* colors */
body { 
	background-color: #001E4A; 
}

main {
	background-color: #FFE1B5;
}

aside {
	background-color: #FFCF88; 
}

footer {
	background-color: #660000;
	color: white;
}

footer a {
	color: yellow;
}

main a, sidebar a {
	color: blue;
}

/* elements */

	/* images */

		/* page: apparatus */
main img {
	/*max-height:100%;*/ height: auto;
	max-width:100%;
	margin: auto;
}
.has-text-align-center { text-align: center !important; }

main strong {
	text-align: center;
}

		/* logos & titles */
#bems_logo_title {
	/* max-width: 950px; */ width: 100%;
	max-height: 86px; height: auto;
	border: 0;
}

		/* bars */
#bems_bar_top, 
#bems_bar_bottom {
	/* max-width: 950px; */width: 100%;
	height: 21px;
	border: 0;
}

#bems_bar_middle {
	/* max-width: 950px; */width: 100%;
	height: 14px;
	border: 0;
}

		/* banners */
#banner_top, .banners {
	/* max-width: 730px; */ width: 100%;
	/* max-height: 208px; */ /* height: auto; */ height: 100%;
}


	/* menus */

/* begin menu */
#menu_top {
	float: left;
	/* max-width: 220px; */ width: 100%;
	/* max-height: 208px; height: 208px; */ height: auto;
	background-color: #660000;
	color: white;
	font-family: sans-serif;
}

	#menu_top ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

		#menu_top ul li {
			margin-top: 1px;
			height: 25px;
			line-height: 25px;
			vertical-align: middle;
		}

	#menu_top a {
		display: block;
		padding-left: 25px;
		color: white;
		text-decoration: none;
		background: linear-gradient(90deg,#330000,#660000);
	}

		#menu_top a:hover { 
			color: black;
			background: linear-gradient(90deg,#cccccc,#990000);
		}

		#menu_top a:active { 
			color: black;
			background: linear-gradient(90deg,#ffff00,#990000);
		}

		#menu_top a span {
			width: 100%;
			height: 100%;
			background: yellow;
		}
/* end menu */

/* begin menu_bottom */
#menu_bottom {
	margin: auto;
	background-color: #660000;
}
#menu_bottom a {
	font-family: "Tahoma";
	color: white;
	text-decoration: none;
}

#menu_bottom ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	list-style-type: none;
	margin: auto;
	padding: 0;
	overflow: hidden;
}

#menu_bottom li {
	flex-grow: 1;
	float: left;
}

#menu_bottom li a {
	display: block;
	color: white;
	text-align: center;
	padding: 1em;
	text-decoration: none;
}
#menu_bottom li a:hover {
	background-color: #770000;
}
/* end menu_bottom */