/*
Standart Schriftgröße: 			    16px;		  // Browserdefault, 16px  
@phoneLandscapeViewportWidth: 	30em;		  // 480px
@tabletViewportWidth: 			    48em; 		// 768px
@tabletLandscapeViewportWidth: 	64em; 		// 1024px
@desktopViewportWidth: 			    78.75em; 	// 1260px

uk-visible@s 	Only affects device widths of 640px and larger  	= 40em
uk-visible@m 	Only affects device widths of 960px and larger.		= 60em
uk-visible@l 	Only affects device widths of 1200px and larger.	= 75em
uk-visible@xl 	Only affects device widths of 1600px and larger.	= 100em
*/



/* ==========================================================================
Startseite
========================================================================== */

/*
@media only screen and (max-width: 640px) {
	.hero .uk-container,
	.features-list .uk-container{
		padding-left: 0px;
		padding-right: 0px;

	}	
	.hero .uk-grid,
	.features-list .uk-grid {
		margin-left: 0px;
	}
	.hero .uk-grid-large > * ,
	.features-list .uk-grid-large > * {
		padding-left: 0px;
	}
}
*/
.data_start_adresse {
	text-align: center;
	line-height: 0.6;
	font-size: 1.2em;
	margin-top: 12%;
}
.data_start_adresse.uk-container {
	width: 100%;
	max-width: 100%;
	padding-left: 0px;
	padding-right: 0px;
}

.linie {
	border :none;
	border-top: 1px solid #0090E0;
	background-color:#0090E0;
	height: 3px;
	/*margin: 20px 0px 20px 0px;*/
	margin: 1.2vw 0 1.2vw 0;
}

.hero {
    margin-top: 70px;
}


/*
.hero h1 {
    font-weight: 600;
    /*font-size: 55px;*/
	/*Dabei steht „vw“ für „view width“ und „vh“ für „view height“
    font-size: 8vmin;
	font-size: 55px;
    font-size: 3.5vw;
    margin: 0px;
}*/
.hero p {
	/*Dabei steht „vw“ für „view width“ und „vh“ für „view height“
    font-size: 8vmin;*/
    font-size: 1.2vw;
	color: #ffffff;
}
.hero h2 {
    margin: 0.83em 0px;
    font-size: 1.5em;
}

@media only screen and (max-width: 47.9375em) {
  .data_start h2 {
    font-size: 2.2em;
	  margin-bottom: 18px;
  }
}
@media screen and (min-width: 48em) {
	.hero {
    margin-top: 100px;
  }
  .hero h1 {
    font-size: 2.5em;
    padding-top: 0.4em;
  }
}

/* aus nomalize.css */
@media (max-width: 47.9375em){
  h1{
      margin: 0;
  }
}
h1{ margin: 0; }

.hero_olox{
	position: relative;
	width: 100%
}

.hero_overlay {
	/*	#417398 */
	background: rgba(65, 115, 152, 0.6);
	position:absolute;
	width:100%;
	height:100%;
	top:0px;  
	filter: alpha(opacity=50);
	opacity: 1.0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}
.hero_overlay_tigger {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;  
}
.hero_overlay:hover{
	filter: alpha(opacity=0);
	opacity: 0.0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}

.hero img {
 /* max-height: calc(100vh - 150px);*/
	width: 100%;
}

.hero_weiss{
	/*display: block;
	margin-top: -5px;*/
	width: 100%;
	height: 10px;
	background: rgba(255, 255, 255, 1.0);
	position: absolute;
	bottom: -5px;
}

/*
.hero img:hover {
  -webkit-filter: opacity(1);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: opacity(1);
  -moz-transition: .5s ease-in-out;
  -o-filter: opacity(1);
  -o-transition: .5s ease-in-out;
  filter: opacity(1);
}

.hero img {
	width:100%;
	max-height:100%;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'opacity\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#opacity");
  -webkit-filter: opacity(0.4);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: opacity(0.4);
  -moz-transition: .5s ease-in-out;
  -o-filter: opacity(0.4);
  -o-transition: .5s ease-in-out;
  filter: opacity(0.4);
}*/

/* Graufilter
.hero img:hover {
  -webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;
  filter: grayscale(0%);
}

.hero img {
	width: 100%;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(100%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(100%);
  -o-transition: .5s ease-in-out;
  filter: grayscale(100%);
}*/

.col-md-4 {
    width: 33.3333%;
	float: left;
	position: relative;
	min-height: 1px;
	padding: 0px;
}
.bild_liks{
    width: 30%;
	float: left;
}
/*
.text_rechts{
    width: 70%;
	float: left;
	position: relative;
	min-height: 1px;
	padding: 0px;
}*/
.text_rechts{
	width: 70%;
	margin-left: 30%;
}
.text_rechts h2{
    margin-top:-10px;
}
.text_rechts h3{
    margin-top:-5px;
}
.bildtext_container{
	padding: 0px;
	padding-top: 80px;
}

.hero .col-md-12-absolute {
    position: absolute;
    top: 30%;
	left: 5%;
    color: #FFF;
	letter-spacing: 3px;
}

.col-md-12 {
    width: 100%;
	float: left;
	position: relative;
	min-height: 1px;
	padding: 0px;
}
.row {
    margin-left: 0px;
}

.adlerschrift_start {
	text-align: center;
	color: #333;
	position: absolute;	
	width: 70%;
	left: 15%;
	top: 30%;
	background: rgba(255, 255, 255, 0.8) none repeat scroll 0% 0%;
	padding: 1em 4em 1em 4em;
}
/*http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/*/
/*.adlerschrift_start_filter {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 99;
    background-position: center -70px;
    filter: blur(10px);
}*/
.hero .adlerschrift_start h1 {
	font-weight: 600;
    font-size: 3.5 em;
    margin: 0px;
}
.hero .adlerschrift_start h2 {
    margin: 0.4em 0px;
	letter-spacing: 3px;
	font-size: 2.0em;
	font-weight: 500;
}
/* ==========================================================================
neue Startseite
========================================================================== */

.streifen_adler{
    /*background-color: #34495e;
    height: 5em;*/
    width: 70%;
    width: calc(100% - 200px)
}


.ohne_margin.uk-grid {
    margin-left: 0px; 
}
.streifen_links{
  padding-left: 0;
}
.streifen_rechts{
    color: #fff;
   width: auto;
  /*  width: inherit; */
}
@media screen and (min-width: 60em) {
  .streifen_rechts{
      width: 35%;
      float: right;
      text-align: left;
      padding-left: 0;
  }

}
.hero .streifen_rechts.arch p{
    font-size: 1.2em;
    font-size: 1.5vw;
    letter-spacing: 7px;
    min-width: 10em;
    display: table-cell;
    vertical-align: bottom;
    height: 5em;
    padding-bottom: 1em;
}
.hero .streifen_rechts .text_inv{
    font-size: 1.3em;
    vertical-align: -1px;
    color:transparent;
}
.hero .streifen_rechts .arch_rechts{
        font-size: 0.6em;
    /*font-size: 1.5vw;*/
    letter-spacing: 7px;
    min-width: 10em;
}
.streifen_rechts.adresse{
    margin-top: 2em;
}
.adresse_titel{
    font-weight: 600;
    margin-bottom: 2em;
}
.adresse_str{
    margin-bottom: 2em;
}
.uk-background-cover .data_start_adresse {
	text-align: center;
	line-height: 0.6;
	font-size: 1.2em;
	margin-top: 30vH;
}

/* 20.02.2018 */
.adresse_div {
  	font-size: 0.8em;
    width: 210px;
}
.adresse_div p{
    padding-left: 0.5em;
    line-height: 0.1;
}
.adresse_div .grau {
    padding-top: 1.2em;
    padding-bottom: 0.2em;
    background-color: #a3a3a3;;
}
.streifen_hinter_addresse{
    background-color: #a3a3a3;
    height: 147px;
    margin-top: 94px;
}

@media screen and (max-width: 60em) {
  .hero h1 {
      font-weight: 500;
      font-size: 55px;
      font-size: 2.0em;
      letter-spacing: 4px;
      padding-top: 0.3em;
  }
    .hero .streifen_rechts .arch_rechts {
    font-size: 0.5em;
  }
  .hero  p{
    font-size: 0.8em;
  }
}
@media screen and (max-width: 75em) {
  .streifen_rechts.adresse{
    padding: 1em;
    width: 100%;
    margin: 0;
  }

}
@media screen and (min-width: 48em) {


  .hero  p{
    font-size: 0.8em;
  }
  .streifen_adler{
    height: 6em;
  }
}

@media screen and (max-width: 60em) {
  .uk-container .uk-container.streifen_adler {
      padding-left: 1em;
      padding-right: 1em;
      width: calc(100% - 180px);
      margin: 0;
  }
}
@media screen and (max-width: 40em) {
   /* .streifen_rechts {
        width: 100%;
        padding-left: 0px;
        margin-top: -0.8em;
    }*/
    .hero h1 {
        font-weight: 300;
        font-size: 1.0em;
        letter-spacing: 4px;
        padding-top: 0.8em;
    }
    .hero .streifen_rechts .arch_rechts {
        font-size: 0.6em;
        /* font-size: 1.5vw; */
        letter-spacing: 3px;
    }

    .uk-container .uk-container.streifen_adler{
      /* width: 100%; */
       width: calc(100% - 130px);
    }   
}

/* ==========================================================================
svg
========================================================================== */
.svg_symbole{
	display:none;
}

.scaling-svg-container {
 position: relative; 
 height: 0; 
 width: 100%; 
 padding: 0;
 padding-bottom: 100%; 
 /* override this inline for aspect ratio other than square */
}
.scaling-svg {
 position: absolute; 
 height: 100%; 
 width: 100%; 
 left: 0; 
 top: 0;
}
.olox{
 height: 50px; 
 width: 100%; 
}
.svg_div {
  padding-left:15px;
} 
.svg_logo{
 margin-left: 0px; 
 text-align: left;
 display:block;
 width: 60px;
 height:60px;
}
/* bis 640px */
@media screen and (min-width: 40em) {
  .svg_div {
    padding-left: 30px;
  } 
  .svg_logo {
    display: block;
    width: 80px;
    height:80px;
  }
  .streifen_adler {
    height: 4.2em;
  }
  .hero  p{
    font-size: 0.8em;
  }
  .adresse_div {
  	font-size: 1.0em;
    width: 345px;
  }
  .adresse_div p{
      line-height: 0.3;
  }

}


/* von 640px bis 960 px*/
@media screen and (min-width: 60em) {
  .svg_logo {
    display: block;
    width: 115px;
    height:115px;
  }
  .streifen_adler {
      height: 6em;
  }
  .adresse_div {
    width: 440px;
  }
}
@media screen and (min-width: 75em) {
  .adresse_div {
    width: 315px;
  }
}
.svg_container {
  border: 10px solid #b6bdc3;
  width: 100%;
  background: #fff;
  margin: 0 auto;
}
.svg_container_kl {
  width: 150px;
}