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

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

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

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







/* CSS - Reset ------------------------------------------------------------- */

body, h1, h2, h3, table, td, tr, th{
  padding:0;
  margin:0;
}

/* Basics ----------------------------------------------------------------- */

html { 
  background: url(images/bueroraum-im-immobilienpark-schwerin-zu-vermieten.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
}

body {
  font-family: 'Encode Sans', sans-serif;
  line-height:1.5;
  font-size:0.85rem;
  color:#555;
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Headings ---------------------------------------------------------------- */

h1 {
 font-weight:normal;
 overflow: hidden;
 text-align: left;
 text-transform:uppercase;
}

/*h1:before,*/
h1:after {
 background-color: #999;
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 100%;
}/*
h1:before {
 right: 0.5em;
 margin-left: -50%;
}*/
h1:after {
 left: 0.5em;
 margin-right: -100%;
}


h2{
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  font-weight:normal;
  color:#000;
}


h3{
  text-transform: uppercase;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight:normal;
  padding-bottom:0.2rem;
  color:#000;
}

strong{
  color:#555;
  font-weight:500;
}



header{
width:100%;
}



#myHeader {
  color: #f1f1f1;
  height:5rem;
  background-color:rgba(255, 255, 255, 0.85); 
  background-color:white;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
overflow:hidden;
position:fixed;
top:0;
  z-index:2;
}

ul{
padding-left:1rem;
margin:0;
}


td{padding-right:1rem;}

.blind{
  display:none;
}
.col33, .col50, .col20, .facts{
  display: table;
  width: 100%;
}

.facts{
  margin-top:1rem;
}

.col50 h3{
  text-align:center;
}

.col33 > div{
  width:33.3%;
  display:table-cell;
  text-align:justify;
}

.col50 > div{
  width:50%;
  display:table-cell;

    text-align:justify;
}


.col33 > div:nth-child(2){
 padding:0 1rem;
}

.col50 > div:first-child{
 padding-right:1rem;
}
 
 .col50 > div:last-child{
 padding-left:1rem;

}

.facts > div:first-child{
  width:35%;
    display:table-cell;
}

.facts > div:last-child{
  width:65%;
    display:table-cell;
    vertical-align: bottom;
}

.col20 > div{
  width:20%;
  display:table-cell;
  text-align:justify;
  vertical-align:middle;
}

.col20 > div:nth-child(even){
 padding:1rem;
}

.col20 > div img{
  width:100%;
}



nav{
  float:right;
  width:50%;
  display:inline-block;
  text-align:right;
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
padding-top:1rem;
  font-size:1rem;


}
nav li{
  display:inline-block;
  margin-right:1rem;
  

}

nav ul{
  padding:0;
  margin:0;
}

#logo{

display:inline-block;
  width:50%;
  float:left;
  color:black;
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  font-size:1.5rem;
padding-top:1rem;
}

nav:after{
  clear:both;
}

nav li a{
  text-decoration:none;
}

nav li:last-child{
  margin-right:0;
  padding-right:0;


}



.image_container{
float:left;
width:21rem;
 margin:1rem 0 2.5rem 0;
 background:red;

}

.description{
 background:blue;
  float:left;
  width:35rem;
   padding:2.5rem 2.5rem 0 0;
}
.clearfix{

    clear: both;

}

article{
  padding:2.5rem;
}

article header{
  padding-bottom:1.5rem;
}

.highlight{
  background-color:rgba(51, 51, 51, 0.05);
}


article a{
  text-decoration:none;
  color:blue;
}

article a:hover{
  text-decoration:underline;
  color:blue;
}





main {
  /*flex: 1;*/
  min-width:64rem;
  margin:0 auto;
  width:53%;
  background:rgba(255, 255, 255, 0.9);
  z-index:1;
  margin-top:5rem;
  padding-bottom:6rem;
}



.container{
 
  width:59rem;
  margin:0 auto;
  padding:0;
  display: flex;
  flex-wrap: wrap;

}


@media all and (max-width: 500px){
  
  body{
  font-size:0.8rem;
    line-height:1.3;
  }
  
  
  html {
    background:none;
  }

  main {
    width:100%;
    min-width:100%;
  } 
  
  .container{
    width:100%;
  }
  
  .col33, .col50, .col20{
    display: flex;
    flex-wrap:wrap;
    width:100%;
  }
  
   .col33 > div, .col50 > div, .col20 > div{
    flex-direction: row;
    width:100%;    
  } 
  
  .col50 > div:first-child{
    padding:0;
    margin:0;
  }
  
  .col50 > div:nth-child(even){
     padding:0;
     margin:0;
  }
  
  article {
    padding:1.5rem;
  }
  
}






footer{
  background-color:rgba(51, 51, 51, 0.85);
  color:#aaa;

}

footer strong{
color:white;font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  font-weight:normal;
}

footer a{
  color:rgba(0, 128, 255, 1);
  text-decoration:none;
}

footer a:hover{
text-decoration:underline;
}

footer > .container{
  margin:1rem auto;
}

footer .container > div{
width:45%;
}

.container > div:first-child{
}
.container > div:last-child{
  width:10%;
}

.heading
{
  padding-bottom:0;
  overflow: hidden;
  text-align:center;
}


.heading:before,
.heading:after {
 background-color: #333;
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 50%;
}
.heading:before {
 right: 0.5em;
 margin-left: -50%;
}
.heading:after {
 left: 0.5em;
 margin-right: -50%;
}

.middle{
  text-align:center;
}



/*
.block{
background: rgb(12,35,44,0.7);
background: -moz-linear-gradient(45deg, rgba(12,35,44,0.7) 0%, rgba(93,102,88,0.7) 47%, rgba(72,88,85,0.7) 100%);
background: -webkit-linear-gradient(45deg, rgba(12,35,44,0.7) 0%,rgba(93,102,88,0.7) 47%,rgba(72,88,85,0.7) 100%);
background: linear-gradient(45deg, rgba(12,35,44,0.7) 0%,rgba(93,102,88,0.7) 47%,rgba(72,88,85,0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c232c', endColorstr='#485855',GradientType=1 );
text-align:center;
color:#fff;
}
*/

/* based on Carbon fibre (305 B) Copyright by Atle Mo (design), Lea Verou (code) */
.block{
background:
radial-gradient(#222 15%, transparent 16%) 0 0,
radial-gradient(#222 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#333;
background-size:16px 16px;
text-align:center;
color:#fff;


}

.block header{
color:#fff;
padding:0;
margin:0;
text-shadow: black 0.1em 0.1em 0.2em
}

.block h2{
  color:#fff;
  padding:0;
  text-shadow: black 0.1em 0.1em 0.2em
}

.logo{
  background:#fff;
  margin-bottom:0;
}


.responsiveContainer {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
}

.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
}