/*
Theme Name: nordlab
Theme URI: http://www.hoko-media.com
Description: Template fuer die Nordlab in Bremen
Author: Holger Korff
Author URI: http://www.hoko-media.com
*/
 
/*### Globale Einstellung ###*/

/*###########################

1. General
2. Header Font
3. Link config
4. DIV Layer

###########################*/

/*###########################

1. General

###########################*/

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	font-family: Arial, Helvetica, sans-serif;
  	font-size: 1em;
	font-weight: normal;
	font-style: normal;
	margin: 0;
	overflow-x: hidden;
	background-color: #a3d4ee;
}


.wpcf7-quiz {width: 100px !important;}

#clear { clear: both; } 

/*###########################

2. Header Font

###########################*/

h1 {
	font-family: "futura-pt", Arial, Helvetica, sans-serif;
  	font-size: 1.6em;
	font-weight: 400;
	font-style: normal;
	color: #004c85;
	margin: 0;
	padding: 10px 0;
}

h2 {
	font-family: "futura-pt", Arial, Helvetica, sans-serif;
  	font-size: 1.4em;
	font-weight: 400;
	font-style: normal;
	color: #004c85;
	margin: 0;
	padding: 10px 0;
}

h3 {}

h4 {}

h5 {}

h6 {}

h7 {}


/*###########################

3. Link config

###########################*/

#the_content a, a:link, a:visited {
	font-family: Arial, Helvetica, sans-serif;
	color: #526c75;
	text-decoration: none;
}

#the_content a:hover {
	font-family: Arial, Helvetica, sans-serif;
	color: #526c75;
	text-decoration: underline;
}

/*###########################

4. DIV Layer

###########################*/
	
/*enspricht 1000px bei 1680px 22 Zoll */
#row_medium {
		width: 80%;
		max-width: 1000px;
		min-height: 300px;
		height: auto;
		background-color: #fff;
		margin: 0 auto;
	}
	
	.top_header {
		min-height: 214px !important;
		background: #fff !important;
	}
	
	#top_header_left {
		float: left;
		width: 45%;
		padding-left: 5%;
		padding-top: 10px;
		background: #fff !important;
	}
	
	#top_header_right {
		float: left;
		width: 45%;
		padding-right: 5%;
		padding-top: 10px;
		background: #fff !important;
	}
	
	.logo_img {
		float: left; 
		width: 90%; 
		max-width:500px;
		padding: 20px 2% 0 0;
	}

	.top_navi {
		min-height: 40px !important;
		background: #D7D7D7 !important;
	}
	
	.social_icons {
		min-height: 60px !important;
		background: #fff !important;
	}

	.social_ic {
		float: left;
		width: 40px !important;
		height: 40px !important;
		padding: 0 0 1% 2%;
	}

	.content_img {
	width: 100%;
	min-height: 100px !important;
	height: auto !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
	}
	
#the_content {
		width: 92%;
		margin: 0 auto;
		padding: 10px 0 20px 0;
		line-height: 1.5em !important;
	}

	.threecol_height { min-height: 100px !important; height: auto;}

#bottom_center {
		width: 98%;
		margin: 0 auto;
		padding: 10px 0;
	}

	.bottom_social_logo {
		background: #c2e9fd !important;
		min-height: 80px !important;
		height: auto;
	}

	.poweredby_img {
		float: right; 
		width: 40%; 
		max-width: 500px;
		padding: 20px 4% 30px 0;
	}

	.bottom_footer {
	background: #7b9096 !important;
	min-height: 20px !important;
	}
	
	
#bottom_navi {
	float: right;
	font-family: Arial, Helvetica, sans-serif;
  	font-size: 1em !important;
	font-style: normal;
	color: #fff; 
	margin-right: 2%;
}
#bottom_navi a, a:link, a:visited { 
	font-family: Arial, Helvetica, sans-serif;
  	font-size: 1em !important;
	font-style: normal;
	color: #fff; 
	text-decoration: none;
	}
	
#bottom_navi a:hover { 
	font-family: Arial, Helvetica, sans-serif;
  	font-size: 1em !important;
	font-style: normal;
	color: #fff; 
	text-decoration: underline;
	}

#row_col_50_50 {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #666;
	min-height: 50px;
	height: auto;
	width: 48.5%;
}

	.space_50to50 { margin-right: 3%; }

/* Mobile/Smartphone - Portrait-Modus */
@media
only screen and (min-width: 320px) and (max-width: 479px),
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: portrait),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-resolution: 1.5dppx) and (orientation: portrait) {
	
/*enspricht 1100px bei 1680px 22 Zoll - 1100px bei 1280px = 86%*/
	#row_medium {
		width: 96%;
		min-height: 100px;
		height: auto;
		background-color: #fff;
		margin: 0 auto;
	}
	
	#top_header_left {
		float: left;
		width: 95% !important;
		padding-left: 5%;
		padding-top: 10px;
		background: #fff !important;
	}
	
	#top_header_right {
		float: left;
		width: 95%!important;
		padding-right: 5%;
		padding-top: 10px;
		background: #fff !important;
	}
}

/* Mobile/Smartphone - Landscape-Modus */
@media
only screen and (min-width: 480px) and (max-width: 767px),
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: landscape),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-resolution: 1.5dppx) and (orientation: landscape) {
	
/*enspricht 1100px bei 1680px 22 Zoll - 1100px bei 1280px = 86%*/
	#row_medium {
		width: 96%;
		min-height: 100px;
		height: auto;
		background-color: #fff;
		margin: 0 auto;
	}
		#top_header_left {
		float: left;
		width: 95% !important;
		padding-left: 5%;
		padding-top: 10px;
		background: #fff !important;
	}
	
	#top_header_right {
		float: left;
		width: 95% !important;
		padding-right: 5%;
		padding-top: 10px;
		background: #fff !important;
	}
	
}

/* Mobile/Tablets - Portrait-Modus */
@media
only screen and (min-width: 768px) and (max-width: 959px),
only screen and (min-device-width: 768px) and (max-device-width: 959px) and (orientation: portrait) {
	
/*enspricht 1100px bei 1680px 22 Zoll - 1100px bei 1280px = 86%*/

	#row_medium {
		width: 96%;
		min-height: 100px;
		height: auto;
		background-color: #fff;
		margin: 0 auto;
	}
}

/* Mobile/Tablets - Landscape-Modus */
@media
only screen and (min-width: 960px) and (max-width: 1223px),
only screen and (min-device-width: 960px) and (max-device-width: 1223px) and (orientation: landscape) {
	
/*enspricht 1100px bei 1680px 22 Zoll - 1100px bei 1280px = 86%*/
	#row_medium {
		width: 96%;
		min-height: 100px;
		height: auto;
		background-color: #fff;
		margin: 0 auto;
	}
}

 /* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}