@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

@import "../css/reset.css";
@import "../css/superfish.css";

html {width: 100%;}

a[href^="tel:"] {color: inherit;text-decoration:none;}
* {-webkit-text-size-adjust: none;}

body {
	font: 16px/21px 'Open Sans', sans-serif;f;
	color:#6f6f6f;
	position:relative;
	background: #0C4A8A;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-family: 'Open Sans Condensed', Arial, sans-serif;
	font-weight:700;
	color: #0C4A8A;
}
h1 {
	font-size: 36px;
	line-height: 36px;
	text-transform:uppercase;
	padding: 50px 0px 0px;
}

h2 {
	font-size: 30px;
	line-height: 1em;
	text-transform:uppercase;
	margin-bottom: 10px;
}
h3 {
	font-size: 27px;
	line-height: 1em;
	text-transform:uppercase;
	padding: 0px 0px 15px;
}
h4 {
	font-size: 21px;
	line-height: 27px;
	text-transform:uppercase;
}
p {margin-bottom: 19px;}
.text-info {color:#000;}
.lead {color:#000; font-family: 'Open Sans Condensed', Arial, sans-serif; font-weight:700; font-size: 20px; line-height:27px;}
p.lead {margin-bottom:10px;}

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

ul.list li{
	background: url(../images/marker.gif) 0 9px no-repeat;
	margin-top:7px;
	padding-left: 27px;
}
ul.list li a{color: #0C4A8A;}
ul.list li a:hover{color: #0C4A8A; text-decoration: underline;}
/*links*/

a { font-family: 'Open Sans Condensed', Arial, sans-serif;
	font-weight:700;
	font-size: 18px;
	text-decoration: none;
	color: #0C4A8A;
	outline: none;
	transition: 0.5s ease;
	-o-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
}

a:hover {text-decoration: underline;}

a.btn {
	background:  #0C4A8A;
	display: inline-block;
	font-family: 'Open Sans Condensed', Arial, sans-serif;
	font-weight:700;
	font-size:16px;
	line-height:16pg;
	padding: 4px 12px 5px;
	margin-top: 15px;
	color: #fff;
	text-transform:uppercase;
	border: 1px solid #0C4A8A;
	margin-top: 15px;
	float: right;
	
	
}

#specialBtn{
	margin-right: 23px;
}

a.btn:hover {
	background: url(../images/btn.jpg) 0 0 repeat-x #0C4A8A;
}

.arbeit a.btn {
	margin-top: 5px;
}
.clear {clear: both;}
.wrap {overflow:hidden;}
.indent-1 {padding: 20px 0 15px 0;}
.indent-2 {padding:0 0 5px 0;}
.indent-3 {padding:50px 0 5px 0;}
.indent-4 {padding: 20px 0 30px;}

.top-1 {padding-top:91px;}
.bot-1 {padding-bottom:85px;}



/*----------- Back to top --------------*/
#toTop {
  display: none;
  width: 49px;
  height: 48px;
  overflow: hidden;
  background: url(../images/totop.png) 0 0 no-repeat;
  position: fixed;
  margin-right: -600px !important;
  right: 50%;
  bottom: 80px;
  z-index: 999;
}
#toTop:hover {
}
#toTop:active,
#toTop:focus {
  outline: none;
}

/*header*/

header {
	display: block;
	padding: 5px 0 0;
	z-index: 999;
	background:#fff;

}

header h1 {
	float: none;
	text-align:left;
	display:block;
	position: relative;
	z-index: 999;
	margin:0;
}
header h1 a {display: inline-block;}
header h1 a img {display: block;}

nav {background:#95b1b7; margin-top:10px; padding:3px 0 1px 0;}
nav .grid_12 {text-align:center;}

.featured{
	position:relative;
	padding-top:40px;
}

.logo{
	padding: 15px 0;}

/*******content********/
#contentX {background: url(../images/content-bg.jpg) 0 0 repeat-x #fff;}

article img{float: left; margin: 5px 20px 20px 0}

.bg-1 {border-top:#c8cece 1px solid; border-bottom:#e0e0e0 1px solid; background: url(../images/bg-1.jpg) 0 0 repeat-x #f5f5f5;}
.bg-2 {background: #fff;}
.bg-3 {border-top:#dddddd 1px solid; border-bottom:#e2e2e2 1px solid;}
.bg-4 {border-bottom:#e0e0e0 1px solid; background: url(../images/bg-1.jpg) 0 0 repeat-x #f5f5f5;}
.border-1 {border-right:#d4d4d4 1px solid; padding-right:20px; padding-bottom:91px;}
.border-2 {border-left:#d4d4d4 1px solid; padding-left:20px; padding-bottom:30px;}
.col-1-4 {font-size: 16px; line- height: 27px;}

.partner img{margin-bottom: 35px;}


.box-1 {margin : 80px 0;}
.box-1 img {float:left; margin-right: 10px;}
.box-1 h4 {overflow:hidden; padding-top:22px; padding-bottom:18px;}
.box-1 .wrap {padding:10px;}

.box-2 img {float:left; margin-right:20px;}

.list-news li {margin-top:45px;}
.list-news li:first-child {margin-top:0px;}
.list-news .wrap {padding-bottom:11px;}
.list-news .badge { background:#0C4A8A; float:left; width:60px; padding:8px 0 8px 0; text-align:center; font-family: 'Open Sans Condensed', Arial, sans-serif; font-weight:700; font-size:18px; line-height:1em; color:#fff; text-transform:uppercase; margin-right:20px;}
.list-news .badge span {display:block; font-size:12px;}

.list-people {margin-left:-20px; margin-top:-18px;}
.list-people li {float:left; margin-left:20px; margin-top:18px;}

.lists {overflow:hidden; margin-top:19px;}
.lists>div {float:left;}

.list-project li {margin-top:91px;}
.list-project h4 {margin:39px 0 30px 0;}

.list-work li {margin-top:15px;}
.list-work li:first-child {margin-top:0px;}

/****************/
.carousel {padding:80px 0; position:relative;}

.carousel h4 {color:#0C4A8A; margin:39px 0 30px 0; font-size: 24px;}


/*****************/
.map {padding-top:35px}
.map iframe {
  width: 100%;
  height: 462px;
  border: none;
}

address {font-size:14px; font-style:normal; margin-top:22px}
address dl {float:left; width:460px;}
address dl+dl {margin-left:20px;}
address dl dt {margin-bottom:19px;}
address dl span {display:inline-block; width:100px;}

/****Form****/

#form {padding-top: 30px; position:relative;}
#form .text-info {padding-bottom:3px;}
#form input {
	background:#fff;
	color:#6f6f6f;
	border: 1px solid #e5e5e5;
	padding: 6px 14px 7px 14px;
	width: 100%;
	height: 30px;
	float:left;
	font: 12px/15px  Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#form textarea {
	background:#fff;
	color:#6f6f6f;
	height: 273px;
	overflow: auto;
	border: 1px solid #e5e5e5;
	padding: 6px 14px 7px 14px;
	width: 100%;
	position: relative;
	resize:none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	float:left;
	font: 12px/15px  Arial, Helvetica, sans-serif;
	margin: 0;
}
#form label {
	position:relative;
	display: block;
	min-height: 45px;
	width: 95%;
	float: left;
}
#form label .title {font-size:16px; padding:12px 0 9px; display:block;}
#form .error, #form .empty {
	color: #FF0000;
	display: none;
	font-size: 10px;
	line-height:12px;
	width:auto;
	position: absolute;
	z-index: 999;
	right: 5px;
	bottom: -12px;
	float:left;
}
#form .error-empty {
	display:none;
	float:left;}
#form .message {width: 95%;}


#form .success {
	display: none;
	position: absolute;
	width: 95%;
	font-size: 16px;
	background: #fff;
	border: 1px solid #e3e3e3;
	text-align: center;
	padding: 20px 10px;
	z-index: 999;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#form .btn {cursor:pointer;}


/************Footer***********/

footer {
	font-family: 'Open Sans Condensed', Arial, sans-serif;
	font-weight:300;
	font-size: 14px;
	color: #fff;
	text-transform:uppercase;
	padding:21px 0 18px 0;
}
footer span {display:block; margin-top:6px;}
footer a {color: #fff; font-family: 'Open Sans Condensed', Arial, sans-serif; font-weight:300; font-size: 14px;}
footer a:hover {color: #fff; text-decoration: underline;}
.soc-icon {display:block;}
.soc-icon li {display:inline-block; float:right; margin-left:13px;}
.soc-icon li a {display:block;}
.soc-icon li a img {opacity:1;}
.soc-icon li a:hover img {opacity:0.5;}


/*top nav*/
#topnav {
	float: right;
}

#topnav li{
	display: inline;
	color: #0c4a8a;

}

#lang-box{
	float: right;
}


.active {
	color:black;
}


.MarkupPagerNav {
        clear: both;
        margin: 1em 0; 
        font-family: Arial, sans-serif;
}
.MarkupPagerNav li {
	display: inline;
	list-style: none;
	margin: 0;
}

.MarkupPagerNav li a,
.MarkupPagerNav li.MarkupPagerNavSeparator {
  background: #fff;
  display: inline-block;
  font-family: 'Open Sans Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 16pg;
  padding: 8px 20px 9px 20px;
  color: #0C4A8A;
  text-transform: uppercase;
  border: 1px solid #0C4A8A;
  margin-top: 25px;
  
}
                
.MarkupPagerNav li.MarkupPagerNavOn a,
.MarkupPagerNav li a:hover {
	color: #fff;
	background: #0C4A8A;
	text-decoration: none;
}

.MarkupPagerNav li.MarkupPagerNavSeparator {
	display: inline;
	color: #777;
	background: #d2e4ea;
	padding-left: 3px;
	padding-right: 3px;
}


.edit {
  	background-color: #fff;
    color: #0C4A8A;
    padding: 3px 10px 3px;

}

#topnav li a.edit:hover {
	background-color: #0C4A8A;
    color: #fff;
   


}

.image-source-link {
	color: #98C3D1;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	/* ideally, transition speed should match zoom duration */
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}


/*Extra*/

/* --- Container configuration ---------------------------------------------------------- */
.viewport {
	box-sizing:border-box;
    height: 200px;
    overflow: hidden;
    position: relative;
    width: 299px;
}

/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
   class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
    margin-right: 0;
}

/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
    display: block;
    position: relative;
}


/* --- Label configuration -------------------------------------------------------------- */
.viewport a span {
    display: none;
    font-size: 15px;
    height: 100%;
    padding-top: 80px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    width: 100%;
    z-index: 100;
}
    

/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
    background-color: rgba(15, 15, 15, 0.6);
    color: #fff;
    text-shadow: #000 0px 0px 20px;
}
    .dark-background em {
        color: #ccc;
    }

/**
 * You could create multiple hover background classes for different looks depending on the
 * image type. Use your imagination!
 */

 .overall_img{
 	margin-bottom: 10px;
 }

.borderimg{
	border: 1px solid #d4d4d4;
	
}

.ph_gallery{
	margin-bottom: 7px;
	margin-top: -10px;
}



.hide {
  display: none;

}

.mg-image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -o-transition: all 1s ease; /* IE 9 */
    -ms-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
        max-width: 100%;
}
.mg-image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

.zoom-gallery h2{
	margin-top: 60px;
}

.zoom-gallery h2:first-child{
	margin-top: 20px;
}


.facebook-titel{
	font-size: 24px !important;
}

.speziell{
	margin-right: 0px !important;
}




.sf-menu>li>ul {
    width: 300px;
}

.sf-menu>li>ul>li>ul {
    position: static;
    top: -999px;
    display: none;
}

.sf-menu>li>ul>li>ul>li {
	margin-bottom: 15px;
  padding-left: 30px;
   clear: both;
}

.arrowdown{
	position: absolute;
	right:5px;
	margin-top: 7px;
}