/* merriweather-300 - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/merriweather-v19-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Merriweather Light'), local('Merriweather-Light'),
       url('../fonts/merriweather-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-v19-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-v19-latin-300.svg#Merriweather') format('svg'); /* Legacy iOS */
}

/* merriweather-regular - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/merriweather-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Merriweather Regular'), local('Merriweather-Regular'),
       url('../fonts/merriweather-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-v19-latin-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-300 - latin */
@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/merriweather-sans-v9-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Merriweather Sans Light'), local('MerriweatherSans-Light'),
       url('../fonts/merriweather-sans-v9-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-sans-v9-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-sans-v9-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-sans-v9-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-sans-v9-latin-300.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-regular - latin */
@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/merriweather-sans-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Merriweather Sans'), local('MerriweatherSans-Regular'),
       url('../fonts/merriweather-sans-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-sans-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-sans-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-sans-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-sans-v9-latin-regular.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-700 - latin */
@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/merriweather-sans-v9-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Merriweather Sans Bold'), local('MerriweatherSans-Bold'),
       url('../fonts/merriweather-sans-v9-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-sans-v9-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-sans-v9-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-sans-v9-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-sans-v9-latin-700.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}



* {
		margin: 0;
		padding: 0;
}

html {
		background: #fff;
		height: 100%;
		overflow-y: scroll;
}

body {
		height: 100%;
		font-family: 'Merriweather Sans', sans-serif;
		-webkit-font-smoothing: antialiased;
		font-size: 16px;
		font-weight: 300;		
		padding-top: 135px;
		color: #3f3f3f;
}

body.pull_top {
		padding-top: 0px !important; 
}
  
h1, h2, h3, h4 {
		font-family: 'Merriweather', serif;
		font-weight: 300;
		color: #606060;
		text-rendering: optimizelegibility;
}

h1 {
		font-size: 40px;
		margin-bottom: 25px;
		hyphens: auto;		
}

h2 {
		font-size: 28px;
		line-height: 145%;
		margin: 4.5rem 0 1rem 0;
}

h2.first {
		margin-top: 0;
}

#leistungen h2 {
		margin: 15px 0;	
}

h3 {
		font-size: 20px;
		margin-bottom: 15px;
}

input[type="text"],
input[type="password"],
input[type="submit"],
textarea {
		font-family: 'Merriweather Sans', sans-serif;
		font-weight: 300;
}

label {
		font-weight: 300 !important;
		color: #999;
}
  
/* =p */  
p, table {
		line-height: 180%;
}

b, strong {
		font-weight: 700;
}

a {
		display: inline-block;
		position: relative;
		color: #31a8f0;
		text-decoration: none;
    	transition: color 0.3s ease-out 0s;
		outline: 0 !important;
}

a:focus, a:hover, a:visited, a:active {
		color: #31a8f0;
		text-decoration: none;
}

.content a:not(.btn):after {
		background-color: #31a8f0;
		bottom: 4px;
		content: "";
		height: 0.5px;
		left: 50%;
		opacity: 0;
		position: absolute;
		transform: translateX(-50%);
		transition: all 200ms ease 0s;
		width: 0;
}

.content a:hover::after {
		opacity: 0.8;
		width: 100%;
}

.transparent:hover {
		opacity: 0.6;
		filter: alpha(opacity=60);
		transition: all 0.1s linear 0s;
}

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

/* ListIcons (blaue Haken)
-------------------------------------------------- */
@font-face {
		font-family: 'fontello';
		src: url('../fonts/fontello.eot?57997967');
		src: url('../fonts/fontello.eot?57997967#iefix') format('embedded-opentype'),
			 url('../fonts/fontello.woff?57997967') format('woff'),
			 url('../fonts/fontello.ttf?57997967') format('truetype'),
			 url('../fonts/fontello.svg?57997967#fontello') format('svg');
		font-weight: normal;
		font-style: normal;
}

 
ul.icon {
		list-style-type: none;
		margin: 15px 0 20px 1px;
		max-width: 800px;
		line-height: 160%;
}

ul.icon li {
		padding: 7px 0 5px 32px;
		border-bottom: 1px solid #E6E6E6;
		position: relative;
}

ul.icon li:before {
		position: absolute;
		top: 6px;
		left: 4px;
		font-family: "fontello";
		font-size: 13px;
		content: "\e800";
		color: #1189d9;
}

.cc-revoke, .cc-window {
		font-family: 'Merriweather Sans', sans-serif !important;
		font-size: 14px !important;
		line-height: 170% !important;
}

.cc-link {
		padding: 0 !important;
}

.cc-btn {
		border-radius: 4px;
		text-decoration: none;
		padding: 5px 30px;
}


/* Navbar
-------------------------------------------------- */
#logo {
		height: 53px;
		width: 189px;
		float: left;
		-webkit-transition: all .15s linear;
		-moz-transition: all .15s linear;
		transition: all .15s linear;
}

.navbar.sticky #logo {
		width: 172px;
		height: 49px;
}

.navbar-toggle {
		margin-bottom: 0;
		margin-top: 11px;
}

.navbar-toggle .icon-bar {
		border-radius: 0;
		display: block;
		height: 3px;
		width: 27px;
}

.navbar-toggle .icon-bar + .icon-bar {
		margin-top: 5px;
}

.navbar-inverse .navbar-toggle {
		border-color: transparent;
}

.navbar-inverse .navbar-toggle:hover, 
.navbar-inverse .navbar-toggle:focus {
		background-color: transparent;
}

.nav {
		padding-top: 10px;
}	

.navbar.sticky .nav {
		padding-top: 8px;
}	

.navbar {
		font-family: 'Merriweather Sans', sans-serif;
		padding: 10px 0px;
}

.navbar-fixed-top {
		position: absolute;
}

.navbar.navbar-inverse {
		background: #103049; 
}

.navbar.navbar-inverse.navbar-static-top {
		background: #103049; 
}

.navbar.navbar-inverse.navbar-static-top .container {
		margin-top: 0;
		margin-bottom: 0; 
}

.navbar.navbar-inverse .nav > li > a {
		font-size: 15px;
		color: #fff;
		text-shadow: 0 2px 0 rgba(50,50,50,0.5);
		opacity: 0.6;
		-webkit-transition: all .2s linear;
		-moz-transition: all .2s linear;
		transition: all .2s linear;
		padding: 10px 12px 10px;
		text-decoration: none;
}

.navbar.navbar-inverse .nav > li > a:hover, .navbar.navbar-inverse .nav > li > a:active {
		color: #fff;
		opacity: 1;
		filter: alpha(opacity=100); 
}

body.home #n_home a, body.referenzen #n_referenzen a, body.ueber #n_ueber a, body.infos #n_infos a, body.jimdo #n_jimdo a, body.leistungen #n_leistungen a, body.kontakt #n_kontakt a, body.impressum #n_impressum a, body.datenschutz #n_datenschutz a {
      opacity: 1;
      filter: alpha(opacity=100); 
}
				
.navbar.sticky {
		background: rgba(0, 0, 0, 0.8);
		border-bottom: 1px solid #252525;
		padding: 8px 0 3px 0;
}

.navbar.sticky .container {
		margin-top: 0px !important;
		margin-bottom: 0px !important; 
}

.navbar .container {
		margin-top: 5px;
		margin-bottom: 5px;
		-webkit-transition: margin .2s ease-in-out;
		-moz-transition: margin .2s ease-in-out;
		transition: margin .2s ease-in-out; 
}

.navbar .container .navbar-header .navbar-brand {
		padding: 3px 15px 0 15px;
		height: 60px;
}

.navbar .container .collapse .nav .dropdown .caret {
		margin-bottom: 4px; 
}

.navbar .container .collapse .nav .dropdown .dropdown-menu {
		background: #252528;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		margin-top: 2px; 
}

.navbar .container .collapse .nav .dropdown .dropdown-menu > li > a {
		color: #fff; 
}

.navbar .container .collapse .nav .dropdown .dropdown-menu > li > a:hover {
		background: #08c; 
}

.section_header {
		width: 100%;
		margin-bottom: 25px; 
}

.section_header h2 {
		font-size: 21px !important;
		line-height: 160% !important;
		margin: 30px 0 0 0 !important;
}

.btn-white, .btn-white:visited {
		background: #fff;
		color: #3f3f3f;
		border-radius: 4px;
		font-size: 15px;
		font-weight: 300;
		padding: 10px 25px;
		margin-top: 15px;
		text-decoration: none;
		box-shadow: 0 0 4px #ccc;
}

.btn-white:hover {
		box-shadow: none;
		border: 1px solid #e6e6e6;
}

.btn-big {
		font-size: 18px;
}

ul.contentlist {
		margin: 10px 0 15px 40px;
		line-height: 180%;
}

ul.contentlist li {
		padding-left: 5px;
}

#metapages {
		margin-bottom: 80px;
}

table.contact-number {
		margin: 0 0 10px;
}

table.contact-number td {
		padding-right: 12px;
}

.icon-home {
		width: 100px;
		height: 100px;
		margin: -2px 35px 0 -40px;
}

/* Referenzen
-------------------------------------------------- */
.ref-img {
		display: block;
		width: 340px;
		height: 240px;
		box-shadow: 0 0 4px #ccc;
		background-size: contain;
}

.ref-img.planolith {
		background-image: url(/img/referenzen/planolith.jpg);
}

.ref-img.reiber {
		background-image: url(/img/referenzen/reiber.jpg);
}

.ref-img.mtc {
		background-image: url(/img/referenzen/mtc.jpg);
}

.ref-img.huck {
		background-image: url(/img/referenzen/huck.jpg);
}

.overlay {  
		background: rgba(17, 137, 217, 0.5);
		text-align: center;
		height: 100%;
		padding-top: 90px;
		opacity:0;
}

a.ref-img:hover, a.ref-img:hover .overlay {
      opacity:1;
}

.heart-size {
		font-weight: 900;
		color: rgba(255,255,255,.85);
		font-size: 60px;
}

.description_wrapper {
		margin-top: -8px;
}

.description_wrapper h2 {
		margin: 0px 0 15px 0; 
}

.item {
		margin-bottom: 80px;
}

/* Leistungen
-------------------------------------------------- */
#leistungen {
		margin-bottom: 80px;
}

#leistungen .section_header h3 span {
		font-size: 18px;
		line-height: 20px; 
}

#leistungen .perk {
		margin-bottom: 20px;
}

#leistungen .circle {
		background: #1189D9;
		text-align: center;
		border-radius: 100%;
		margin: 25px auto 0 auto;
		width: 136px;
		height: 136px;
		box-shadow: 1px 1px 2px 0px #E0E0E0; 
}

#leistungen .circle img {
		margin-top: 42px; 
}

#leistungen .last {
		margin-bottom: 0; 
}

/* Footer
http://ryanfait.com/sticky-footer/
footer darf kein padding, margin oder border haben, sonst scrollbalken.
-------------------------------------------------- */

.wrapper {
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -300px; 
		/* the bottom margin is the negative value of the footer's height */
}

footer, .push {
		clear: both;
		height: 300px;
}

footer {
		background-color: #103049;
		font-family: 'Merriweather Sans', sans-serif;
		font-size: 14px;
		border-top: 6px solid #ccc;
		color: #ccc;
		line-height: 160%;
}

/* 
.animate-snow {
		background-image: url("/img/snow-1.png"), url("/img/snow-2.png"), url("/img/snow-3.png");
		z-index: 1;
		-webkit-animation: snow 30s linear infinite;
		-moz-animation: snow 30s linear infinite;
		-ms-animation: snow 30s linear infinite;
		animation: snow 30s linear infinite;
}
@keyframes snow {
		0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
		100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
		0% {background-position: 0px 0px, 0px 0px, 0px 0px;}		
		100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
		0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
		100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
		0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
		100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
*/

.footer-right {
		float: right;
}

footer .credits {
		border-top: 1px solid #7a7a7a;
		padding: 10px 0px 60px 0px; 
}

footer .credits .copyright {
		text-align: center;
		margin-top: 17px; 
}

footer .info {
		margin: 24px 0 17px 0;
}

footer .info ul li {
		list-style: none;
		font-size: 15px;
}

footer .info table td {
		font-size: 15px;
		padding-right: 12px;
}

footer a, footer a:visited {
		color: #ccc;
		text-decoration: none;
}

footer a:hover {
		color: #ccc;
		opacity: 1;
		text-decoration: underline;
}

.foot-line {
		display: inline-block;
		margin-left: 20px;
}

/* Media Queries
-------------------------------------------------- */
@media (max-width: 767px) {
		body.home .navbar.navbar-inverse {
			background: #103049; 
		}
		
		body {
			padding-top: 105px;
		}		
		.nav {
			padding-top: 0;
		}
		
		.navbar {
			padding: 10px 0 0 0;
		}
		
		.navbar-nav {
			margin: 0 -15px;
		}
				
		.navbar .container {
			margin-bottom: 0;
		}

		.navbar .container .navbar-header {
			padding: 0 0 15px 0;
		}
		
		.navbar-fixed-bottom .navbar-collapse, 
		.navbar-fixed-top .navbar-collapse {
			max-height: none;
			box-shadow: none;
			border-top: 1px solid #28455c;
		}
		
		.navbar .navbar-nav .open .dropdown-menu > li > a {
			line-height: 25px;
			font-weight: bold;
			padding: 5px 15px 5px 5px; 
		}
		
		.navbar.navbar-inverse .nav > li > a {
			opacity: 0.8;
			font-weight: 300;
			color: #fff;
			padding: 20px 0 18px 17px;
			border-bottom: 1px solid #28455c;
			text-transform: uppercase;
		}
		
		.navbar.navbar-inverse .nav > li:last-child > a {
			border-bottom: transparent;
		}
				
		body.home #n_home a, body.referenzen #n_referenzen a, body.ueber #n_ueber a, body.infos #n_infos a, body.jimdo #n_jimdo a, body.leistungen #n_leistungen a, body.kontakt #n_kontakt a, body.impressum #n_impressum a, body.datenschutz #n_datenschutz a {
			background-color: #30455c; 
		}
		
		h1 {
			font-size: 32px;
			hyphens: auto;
			line-height: 120%;
		}
		
		.section_header h1 {
			width: 100%;
		}
		
		h2 {
			font-size: 22px;
		}
		
		#leistungen {
			margin-bottom: 40px;
		}
		
		#leistungen .perk {
			margin: 0 0 0 -15px;
		}
		#metapages {
			margin-bottom: 40px;
		}
		.wrapper {
			min-height: 100%;
			height: auto !important;
			height: 100%;
			margin: 0 auto -115px; /* the bottom margin is the negative value of the footer's height */
		}
		.btn-white {
			width: 100%;
		}
		footer, .push {
			clear: both;
			height: 130px;
		}
		footer .contact input[type="text"], footer .contact textarea {
			float: left;
			width: 100%; 
		}
		footer .info .touch {
			float: none; 
		}
		footer .info .touch ul {
			margin: 15px 0 15px; 
		}
		footer .info .touch ul li {
			margin: 0 30px 0 0; 
		}	 
		.footer-right {
			float: left;
		}
}

@media (min-width: 768px) and (max-width: 991px) {
		.navbar-nav.navbar-right:last-child {
			 margin-right: -25px;
		}
		.navbar.navbar-inverse .nav > li > a {
			padding: 10px 10px;
		}
		#leistungen .description_wrapper {
			float: left;
			margin-left: 15px;
		}
}

@media (min-width: 768px) {
		.section_header {
			width: 90%;
		}
		.home .navbar.navbar-inverse {
			border-bottom: none; 
		}
		.cc-message {
			margin-right: 40px;
		}
}
				
@media (min-width: 992px) {
		body.error-four h2 {
			margin-top: 0;
		}
		.navbar.navbar-inverse .nav > li > a {
			text-transform: uppercase;
		}
		#portfolio .section_header {
			margin-bottom: 55px;
		}
		#portfolio {
			margin-bottom: 35px;
		}
}

@media (min-width: 1200px) {
		.row {
			*zoom: 1; 
		}
		.row:before,
		.row:after {
			display: table;
			line-height: 0;
			content: ""; 
		}
		.row:after {
			clear: both; 
		}
}