/*  
Theme Name: BO-I-T
Theme URI: 
Description: Custom WP Template for Wirtschaftsförderung Bochum WiFö GmbH, BO·I·T

Version: 1.0
Author: Oliver Hulisz	
Author URI:  http://72dpi.de/
*/

@font-face {
  font-family: 'LocatorWebMedium';
  src: url('css/fonts/LocatorWebMedium.eot'); /* IE9 Compat Modes */
  src: url('css/fonts/LocatorWebMedium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('css/fonts/LocatorWebMedium.woff') format('woff'); /* Pretty Modern Browsers */
	font-style: bold;
	font-weight: bold;
	font-display: swap;
}

@font-face {
  font-family: 'LocatorWebRegular';
  src: url('css/fonts/LocatorWebRegular.eot'); /* IE9 Compat Modes */
  src: url('css/fonts/LocatorWebRegular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('css/fonts/LocatorWebRegular.woff') format('woff'); /* Pretty Modern Browsers */
	font-style: normal;
	font-weight: normal;
	font-display: swap;
}


/* body
-------------------------------------------------------------------------------------------------- */
body {
	color: #333;
	font-family: "LocatorWebRegular", Helvetica, Arial, sans-serif;
	font-size: 1em;
	background: #fff;
	line-height: 140%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a {
	color: #0AB4FF;
	text-decoration: none;
}
	a:hover {
		text-decoration: underline;
	}
	a:focus {
		outline: none;
	}

img {
	max-width: 100%;
	height: auto;
}

.wrap {
	margin-left: auto;
	margin-right: auto;
	max-width: 1120px;
}

.boit-blue {
	color: #0AB4FF;
}


/* header
-------------------------------------------------------------------------------------------------- */
.header-row {
	padding: .5em 0;
	background: #2B303B;
}



.logo {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
	.site-logo {
		display: inline-block;
		width: 8rem;
		height: auto;
	}

a.hamburger-icon {
	display: inline-block;
}
	a.hamburger-icon::before {
		display: inline-block;
		font-family: FontAwesome;
		content: "\f0c9";
		font-size: 32px;
		padding: 0;
	}
		a.hamburger-icon.active::before {
			font-family: FontAwesome;
			content: "\f00d";
		}

.js ul.globalnav {
	overflow: hidden;
	max-height: 0;
}
	.js ul.globalnav.active {
		max-height: 25em;
	}

ul.globalnav {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: all 0.25s ease-out;
	font-size: 1.1rem;
}
	ul.globalnav.active {
		padding: 1rem 0;
	}
	ul.globalnav li {
		position: relative;
	}
		ul.globalnav li a {
			margin: 0;
			padding: .5rem 0;
			display: block;
			text-decoration: none;
			color: #fff;
			border-top: 1px solid rgba(255,255,255,.3);
		}
			ul.globalnav li a:hover {
				color: #0AB4FF;
			}
			
			ul.globalnav li.current-menu-item a,
			body.single-post li.menu-item-171 a,
			body.single-projekte li.menu-item-153 a {
				color: #0AB4FF;
			}


@media screen and (min-width: 720px) {
	a.site-logo {
		width: 8rem;
	}
	.js ul.globalnav {
		max-height: none;
	}
	a.hamburger-icon {
		display: none;
	}
	
	ul.globalnav {
		flex-direction: row;
		margin-left: auto;
		justify-content: flex-end;
		font-size: 1rem;
		padding: 0;
	}
		ul.globalnav li {
			margin: 0 0 0 1rem;
		}
			ul.globalnav li a {
				white-space: nowrap;
				padding: 1rem 0;
				border-top: none;
			}
				ul.globalnav li a::after {
					content: '';
				}

}	

/* Visual Row
-------------------------------------------------------------------------------------------------- */
#visual-row {
	padding: 1em 0;
	background-image: url(css/images/visual.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
	#visual-row .wrap {
		position: relative;
		min-height: 500px;		
	}
		#visual-row hgroup {
			position: absolute;
			left: 1.2rem;
			bottom: 2rem;
			max-width: 750px;
		}
			#visual-row hgroup h1 {
				font-family: 'LocatorWebMedium';
				margin: 0;
				padding:0;
				font-weight: normal;
				font-size: 3em;
				line-height: 100%;
				text-shadow: 1px 1px 1px #111;
			}
			#visual-row hgroup h2 {
				margin: .5em 0 0 0;
				padding:0;
				font-size: 1.4em;
				color: #fff;
			}

.subheader-row {
	padding: .8em 0;
	background-color: #2B303B; 
	background-image: url(css/images/starfield-bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
	.subheader-row h4 {
		color: #fff;
		font-size: 1.4rem;
		font-weight: normal;
	}


/* Typo
-------------------------------------------------------------------------------------------------- */

.row-content {
	background-color: #2B303B;
	color: #d0d0d0;
}

.mce > h1,
.mce > h2,
.mce > h3,
.mce > p {
	margin-top: 0;
}


h1, h2, h3 {
	color: #0AB4FF;
	line-height: 125%;
}

h1 {
	margin: 1em 0;
	font-size: 1.8em;
}

h2 {
	margin: 1em 0;
	font-size: 1.4em;
}

h3 {
	margin: 1em 0;
	font-size: 1.2em;
	font-weight: normal;
}

p {
	margin: 1em 0;
}
	p.meta {
		font-size: .9em;
		color: #777;
	}
	
article figure {
	margin: 1em 0;	
}
	article figure figcaption {
		padding: .3em 0;
		color: #0AB4FF;
		font-size: .95em;	
	}
		

.mce ul {
		margin: 1rem 0;
		padding: 0;
		list-style: none;
	}
		.mce ul li {
			position:relative;
			padding: 0 0 .5rem 1.3rem;
			margin: 0;
		}
			.mce ul li:before {
				position: absolute;
				top: .1rem;
				left: 0;
				width: .8rem;
				height: auto;
				content: url(css/images/boit-hands.svg);
			}

.mce ul.social-media {
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}
	.mce ul.social-media li {
		padding: 0 1rem 0 0;
		display: inline;
	}
	.mce ul.social-media li:before {
		content: "";
	}



hr {
	clear: both;
	background:url(css/images/hr.png) no-repeat top center;
	height:42px;
	border:none;
}


.term {
	border-top: 1px solid #edefef;
	padding: .5rem 0;
	position: relative;
	cursor: pointer;
	line-height: 145%;
	padding-right: 2em;
}
	.term:after {
		font-family: FontAwesome;
		content: "\f078";
		position: absolute;
		right: .5em;
		top: .5em;
		color: #0AB4FF;
	}
		.term.expanded {
			font-weight: bold;
		}
			.term.expanded:after {
				content: "\f077 ";
			}
	


/* Special Rows
-------------------------------------------------------------------------------------------------- */



.row-news {
	background-color: #fff;
	position: relative;
}
.row-logo {
	background: #f1f1f1;
	position: relative;
}
.row-logo-2 {
	background: #e9e9e9;
	position: relative;
}

.row-projekte {
	background: #f1f1f1;
}


	body.home .row-news:before,
	.row-logo:before,
	.row-logo-2:before,
	.row-footer:before {
		content: url(css/images/boit-hands.png);
		position: absolute;
		z-index: 1000;
		left: calc(50% - 40px);
		top: -40px;
	}


.bg-lightgray {
	background-color: #f1f1f1;
}

/* Team
-------------------------------------------------------------------------------------------------- */
.teammembers {
	background: #f1f1f1;
	border-radius: .4rem;
	padding: 1rem;
	height: 100%;
}

	.teammembers h4 {
		font-size: 1.2em;
		margin: 0;
		padding: 0;
	}
	.teammembers p.function {
		margin: 0 0 .5em 0;
		padding: 0;
	}
	.teammembers p {
		font-size: .9rem;
		line-height: 125%;
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	figure.circle {
		float: left;
		margin: 0;
		padding: 0;
	}
		figure.circle img {
			border-radius: 50%;
			max-width: 100px;
			margin-right: 1em;
		}


/* Logos
-------------------------------------------------------------------------------------------------- */
figure.logo {
	margin: 0;
	padding: 0;
}
	figure.logo img {
		width: 100%;
		max-width: 360px;
		margin-bottom: .5em;
	}

.has-logo h4 {
	color: #0ab4ff;
	margin: 0;
	padding: 0;
}
.has-logo p {
	font-size: .9em;
}

.memberdata {
	color: #666;
}
	.memberdata h4 {
		color: #0ab4ff;
		margin: 0;
		padding: 0;
	}
	.memberdata p {
		font-size: .9em;
	}



/* Footer Row
-------------------------------------------------------------------------------------------------- */
#footer-row {
	position: relative;
	padding: 2em 0;
	color: #d0d0d0;
	background: #0F2864;
}



/* Diverses
-------------------------------------------------------------------------------------------------- */
.wp-caption {

}
	p.wp-caption-text {
		margin: .3rem 0;
		font-size: .9em;
		color: #777;
		line-height: 120%;
	}


	.alignleft {
		float: left;
		margin: 0 1rem 0 0;	
	}
	.alignright {
		float: right;
		margin: 0 0 0 1rem;	
	}

@media screen and (min-width : 30rem) {
	.wp-caption.alignleft {
		float: left;
		margin: 0 1rem 0 0;	
	}
	.wp-caption.alignright {
		float: right;
		margin: 0 0 0 1rem;	
	}
}	



a.button {
	display: inline-block;
	padding: .3em .7em;
	text-decoration: none;
	border: 1px solid #0AB4FF; 
	color: #0AB4FF;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: .8em;
	
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
					
	-webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;				
}
	a.button:hover {
		background: #0AB4FF;
		color: #fff;
	}


/* Forms
-------------------------------------------------------------------------------------------------- */
dl.cform {
	margin: 1em 0;
	width: 100%;
}
	dl.cform dt {

	}
		dl.cform dt label {
			display: inline-block;
			font-size: 1em;
		}
		dl.cform dt span {
			font-size: .8em;
		}
	dl.cform  dd {
		margin: 0 0 1em 0;
	}

input[type=text],
input[type=email],
input[type=password],
textarea {
	width: 100%;
	padding: .5em;
	color: #fff;
	background: #3C5080;
	border: none;
	-webkit-border-radius: 3px; /* Safari */
	-moz-border-radius: 3px; /* Firefox */
	border-radius: 3px; /* default */
}
	textarea {
		height: 8em;
	}

input[type=submit] {
	display: inline-block;
	padding: .5em 1em;
	text-decoration: none;
	border: none; 
	background-color: #0AB4FF;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	color: #fff;
}

	input[type=submit]:hover {
		background: #0AB4FF;
		color: #fff;
	}
	
	
.wpcf7-not-valid-tip {
	display: block;
	color: #E5223C;
}

.screen-reader-response {
	display: none;
}
.wpcf7-mail-sent-ok {
	background: #fff;
	color: #0AB4FF;
	font-weight: bold;
	padding: .5em;
	-webkit-border-radius: 3px; /* Safari */
	-moz-border-radius: 3px; /* Firefox */
	border-radius: 3px; /* default */ 
}



/* 400px
---------------------------------------------------------------------------------------------------*/
@media screen and (max-width : 400px) {

	#visual-row .wrap {
		min-height: 300px;		
	}
		#visual-row hgroup {
			bottom: 1em;
		}
		#visual-row hgroup h1 {
			font-size: 1.8em;
		}
		#visual-row hgroup h2 {
			font-size: 1em;
		}
		
	article h1 {
		font-size: 1.6em;	
	}
	article h2 {
		font-size: 1.2em;	
	}
	
	dl.cform {
		width: 100%;
	}
	
}

/* Overrides
---------------------------------------------------------------------------------------------------*/

/* magnific popup background */
.mfp-bg {
	background: #2B303B;
}