/* MEDIA QUERIES */

/* #header bei max-Größe: 1130 x 760 px */

/* =========== */
/* = TABLETS = */
/* =========== */

/* Apple iPad Querformat, 1024 px */
/* Google Nexus 10 hoch, 800 px */
/* Apple iPad Mini, 768 px */
/* Google Nexus 7, 600 x 960 px */
/* ACHTUNG in absteigender Reihenfolge eintragen! */
@media (max-width: 1024px) {
  
  #content {
    width: 1024px;
  }
  
  #headertext {
    margin-top: 30px;
  }
  
  #header {
    width: 1024px;
    height:560px; 
  }
  
  #header div {
    width:944px;
    overflow:hidden;
    padding:0;
    left:60px;
    top:80px;
  }
  
  #overview  {
    width:1024px;
  }

  div.balogo {
    margin:0 0 30px 0;
    padding: 10px;
  }
  
  h1 {
    font-size: 30px;
    margin-bottom: 18px;
  }
  
  #ila_are img {
    width:180px;
  }
  
  h1 span {
    margin-bottom: 2px;
    padding: 0;
    font-size:18px;
  }
  
  .h1sub {
    font-size:75%;
  }

  h2 {
    font-size: 24px;
    padding: 40px 0;
  }
  
  p, li {
    font-size:14px;
  }

   #apartments .navlink, #apartments .link-pfeil, .hide-on-mobile {
     display: none;
   }
 
  .apartment {
    height: auto;
  }
  
  .apartment div {
    width:100%;
    padding:0;
  }
  
  h3 {
    font-size: 25px;
  }
  
  #apartments h3, #apartments p, #apartments a {
    margin-right: 10px;
  }
  
  #apartments h3 {
    padding-top: 60px;
  }
  
  #apartments p {
    padding-top:0;
    font-size: 14px;
  }
  
  div.bss-slides {
    width:1024px;
    height:768px;
    margin-left:0px;
  }
  
  #apartments img {
    width:1024px;
    height:768px;
  }
  
  
  #apartments p span {
    display:inline;
  }

  #apartments .str, #apartments .rooms, #apartments .price {
    display:none;
  }
  
  #apartments p .details, #apartments .sqm, #apartments .price_short, #apartments p span {
    display: inline;
  }
  
  #apartments .fullsize  {
    width:100%;
    height:100%;
    text-align:center;
    margin: 20px 0 20px 0;
  }
    
  #contact h3 {
    padding-top:30px;
  }
  
  .bildunter {
    display:none;
  }
  
  .contactdetails {
    width:300px;
    padding-left:10px;
  }
  
  .phonenumber {
    color:white;
    background:black;
  }
  
  .emailaddress {
    font-size:90%;
  }
  
  .diamond span {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  
  #footer  {
    width:1024px;
    height:150px;
    float:left;
    font-size: 25px;
  }
  
  #footer span {
    display:inline-block;
  }
  
}

@media (max-width: 960px) {
  
  #content {
    width: 960px;
  }
  
  #headertext {
    margin-top: 30px;
  }
  
  #header {
    width: 960px;
    height:560px; 
  }
  
  #header div {
    width:880px;
    overflow:hidden;
    padding:0;
    left:60px;
    top:80px;
  }
  
  #overview  {
    width:960px;
  }

  div.balogo {
    margin:0 0 30px 0;
    padding: 10px;
  }
  
  h1 {
    font-size: 30px;
    margin-bottom: 18px;
  }
  
  #ila_are img {
    width:180px;
  }
  
  h1 span {
    margin-bottom: 2px;
    padding: 0;
    font-size:18px;
  }
  
  .h1sub {
    font-size:75%;
  }

  h2 {
    font-size: 24px;
    padding: 40px 0;
  }
  
  p, li {
    font-size:14px;
  }

   #apartments .navlink, #apartments .link-pfeil, .hide-on-mobile {
     display: none;
   }
 
  .apartment {
    height: auto;
  }
  
  .apartment div {
    width:100%;
    padding:0;
  }
  
  h3 {
    font-size: 25px;
  }
  
  #apartments h3, #apartments p, #apartments a {
    margin-right: 10px;
  }
  
  #apartments h3 {
    padding-top: 60px;
  }
  
  #apartments p {
    padding-top:0;
    font-size: 14px;
  }
  
  div.bss-slides {
    width:960px;
    height:720px;
    margin-left:0px;
  }
  
  #apartments img {
    width:960px;
    height:720px;
  }
  
  
  #apartments p span {
    display:inline;
  }

  #apartments .str, #apartments .rooms, #apartments .price {
    display:none;
  }
  
  #apartments p .details, #apartments .sqm, #apartments .price_short, #apartments p span {
    display: inline;
  }
  
  #apartments .fullsize  {
    width:100%;
    height:100%;
    text-align:center;
    margin: 20px 0 20px 0;
  }
    
  #contact h3 {
    padding-top:30px;
  }
  
  .bildunter {
    display:none;
  }
  
  .contactdetails {
    width:300px;
    padding-left:10px;
  }
  
  .phonenumber {
    color:white;
    background:black;
  }
  
  .emailaddress {
    font-size:90%;
  }
  
  .diamond span {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  
  #footer  {
    width:960px;
    height:150px;
    float:left;
    font-size: 25px;
  }
  
  #footer span {
    display:inline-block;
  }
  
}

@media (max-width: 800px) {
  
  #content {
    width: 800px;
  }
  
  #headertext {
    margin-top: 30px;
  }
  
  #header {
    width: 800px;
    height:560px; 
  }
  
  #header div {
    width:720px;
    overflow:hidden;
    padding:0;
    left:60px;
    top:80px;
  }
  
  #overview  {
    width:800px;
  }

  div.balogo {
    margin:0 0 30px 0;
    padding: 10px;
  }
  
  h1 {
    font-size: 30px;
    margin-bottom: 18px;
  }
  
  #ila_are img {
    width:180px;
  }
  
  h1 span {
    margin-bottom: 2px;
    padding: 0;
    font-size:18px;
  }
  
  .h1sub {
    font-size:75%;
  }

  h2 {
    font-size: 24px;
    padding: 40px 0;
  }
  
  p, li {
    font-size:14px;
  }

   #apartments .navlink, #apartments .link-pfeil, .hide-on-mobile {
     display: none;
   }
 
  .apartment {
    height: auto;
  }
  
  .apartment div {
    width:100%;
    padding:0;
  }
  
  h3 {
    font-size: 25px;
  }
  
  #apartments h3, #apartments p, #apartments a {
    margin-right: 10px;
  }
  
  #apartments h3 {
    padding-top: 60px;
  }
  
  #apartments p {
    padding-top:0;
    font-size: 14px;
  }
  
  div.bss-slides {
    width:800px;
    height:600px;
    margin-left:0px;
  }
  
  #apartments img {
    width:800px;
    height:600px;
  }
  
  
  #apartments p span {
    display:inline;
  }

  #apartments .str, #apartments .rooms, #apartments .price {
    display:none;
  }
  
  #apartments p .details, #apartments .sqm, #apartments .price_short, #apartments p span {
    display: inline;
  }
  
  #apartments .fullsize  {
    width:100%;
    height:100%;
    text-align:center;
    margin: 20px 0 20px 0;
  }
    
  #contact h3 {
    padding-top:30px;
  }
  
  .bildunter {
    display:none;
  }
  
  .contactdetails {
    width:300px;
    padding-left:10px;
  }
  
  .phonenumber {
    color:white;
    background:black;
  }
  
  .emailaddress {
    font-size:90%;
  }
  
  .diamond span {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  
  #footer  {
    width:800px;
    height:150px;
    float:left;
    font-size: 25px;
  }
  
  #footer span {
    display:inline-block;
  }
  
}

@media (max-width: 768px) {
  
  #content {
    width: 768px;
  }
  
  #headertext {
    margin-top: 30px;
  }
  
  #header {
    width: 768px;
    height:560px; 
  }
  
  #header div {
    width:688px;
    overflow:hidden;
    padding:0;
    left:60px;
    top:80px;
  }
  
  #overview  {
    width:768px;
  }

  div.balogo {
    margin:0 0 30px 0;
    padding: 10px;
  }
  
  h1 {
    font-size: 30px;
    margin-bottom: 18px;
  }
  
  #ila_are img {
    width:180px;
  }
  
  h1 span {
    margin-bottom: 2px;
    padding: 0;
    font-size:18px;
  }
  
  .h1sub {
    font-size:75%;
  }

  h2 {
    font-size: 24px;
    padding: 40px 0;
  }
  
  p, li {
    font-size:14px;
  }

   #apartments .navlink, #apartments .link-pfeil, .hide-on-mobile {
     display: none;
   }
 
  .apartment {
    height: auto;
  }
  
  .apartment div {
    width:100%;
    padding:0;
  }
  
  h3 {
    font-size: 25px;
  }
  
  #apartments h3, #apartments p, #apartments a {
    margin-right: 10px;
  }
  
  #apartments h3 {
    padding-top: 60px;
  }
  
  #apartments p {
    padding-top:0;
    font-size: 14px;
  }
  
  div.bss-slides {
    width:768px;
    height:576px;
    margin-left:0px;
  }
  
  #apartments img {
    width:768px;
    height:576px;
  }
  
  
  #apartments p span {
    display:inline;
  }

  #apartments .str, #apartments .rooms, #apartments .price {
    display:none;
  }
  
  #apartments p .details, #apartments .sqm, #apartments .price_short, #apartments p span {
    display: inline;
  }
  
  #apartments .fullsize  {
    width:100%;
    height:100%;
    text-align:center;
    margin: 20px 0 20px 0;
  }
    
  #contact h3 {
    padding-top:30px;
  }
  
  .bildunter {
    display:none;
  }
  
  .contactdetails {
    width:300px;
    padding-left:10px;
  }
  
  .phonenumber {
    color:white;
    background:black;
  }
  
  .emailaddress {
    font-size:90%;
  }
  
  .diamond span {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  
  #footer  {
    width:768px;
    height:150px;
    float:left;
    font-size: 25px;
  }
  
  #footer span {
    display:inline-block;
  }
  
}

@media (max-width: 600px) {
  
  #content {
    width: 600px;
  }
  
  #headertext {
    margin-top: 30px;
  }
  
  #header {
    width: 600px;
    height:560px; 
  }
  
  #header div {
    width:520px;
    overflow:hidden;
    padding:0;
    left:60px;
    top:80px;
  }
  
  #overview  {
    width:600px;
  }

  div.balogo {
    margin:0 0 30px 0;
    padding: 10px;
  }
  
  h1 {
    font-size: 30px;
    margin-bottom: 18px;
  }
  
  #ila_are img {
    width:180px;
  }
  
  h1 span {
    margin-bottom: 2px;
    padding: 0;
    font-size:18px;
  }
  
  .h1sub {
    font-size:75%;
  }

  h2 {
    font-size: 24px;
    padding: 40px 0;
  }
  
  p, li {
    font-size:14px;
  }

   #apartments .navlink, #apartments .link-pfeil, .hide-on-mobile {
     display: none;
   }
 
  .apartment {
    height: auto;
  }
  
  .apartment div {
    width:100%;
    padding:0;
  }
  
  h3 {
    font-size: 25px;
  }
  
  #apartments h3, #apartments p, #apartments a {
    margin-right: 10px;
  }
  
  #apartments h3 {
    padding-top: 60px;
  }
  
  #apartments p {
    padding-top:0;
    font-size: 14px;
  }
  
  div.bss-slides {
    width:600px;
    height:450px;
    margin-left:0px;
  }
  
  #apartments img {
    width:600px;
    height:450px;
  }
  
  
  #apartments p span {
    display:inline;
  }

  #apartments .str, #apartments .rooms, #apartments .price {
    display:none;
  }
  
  #apartments p .details, #apartments .sqm, #apartments .price_short, #apartments p span {
    display: inline;
  }
  
  #apartments .fullsize  {
    width:100%;
    height:100%;
    text-align:center;
    margin: 20px 0 20px 0;
  }
    
  #contact h3 {
    padding-top:30px;
  }
  
  .bildunter {
    display:none;
  }
  
  .contactdetails {
    width:300px;
    padding-left:10px;
  }
  
  .phonenumber {
    color:white;
    background:black;
  }
  
  .emailaddress {
    font-size:90%;
  }
  
  .diamond span {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  
  #footer  {
    width:600px;
    height:150px;
    float:left;
    font-size: 25px;
  }
  
  #footer span {
    display:inline-block;
  }
  
}


/* =============== */
/* = SMARTPHONES = */
/* =============== */

/* iPhone 6 Plus, 414 x 736 px */
@media (max-width: 414px) {
  
  #content {
    width: 414px;
  }
  
  #headertext {
    margin-top: 30px;
  }
  
  #header {
    width: 414px;
    height:180px;
  }
  
  #header div {
    width:280px;
    overflow:hidden;
    padding:0;
    left:10px;
  }
  
  #overview  {
    display:none;
  }

  div.balogo {
    margin:0 0 30px 0;
    padding: 10px;
  }
  
  h1 {
    font-size: 25px;
    margin-bottom: 18px;
  }
  
  #ila_are img {
    width:180px;
  }
  
  #slogan p {
      display: none;
  }
   
  h1 span {
    margin-bottom: 2px;
    padding: 0;
    font-size:18px;
  }
  
  .h1sub {
    font-size:75%;
  }

  h2 {
    font-size: 18px;
    padding: 40px 0;
  }
  
  p, li {
    font-size:14px;
  }

  .navlink {
    display: none;
   }
   
   #apartments .navlink, #apartments .link-pfeil, .hide-on-mobile {
     display: none;
   }
 
  .apartment {
    height: auto;
  }
  
  .apartment div {
    width:100%;
    padding:0;
  }
  
  h3 {
    font-size: 25px;
  }
  
  #apartments h3, #apartments p, #apartments a {
    margin-right: 10px;
  }
  
  #apartments p {
    padding-top:0;
    font-size: 14px;
  }
  
  div.bss-slides {
    width:414px;
    height:310px;
    margin-left:0px;
  }
  
  #apartments img {
    width:414px;
    height:310px;
  }
  
  
  #apartments p span {
    display:inline;
  }

  #apartments .str, #apartments .rooms, #apartments .price {
    display:none;
  }
  
  #apartments p .details, #apartments .sqm, #apartments .price_short, #apartments p span {
    display: inline;
  }
  
  #apartments .fullsize  {
    width:100%;
    height:100%;
    text-align:center;
    margin: 20px 0 20px 0;
  }
    
  #contact h3 {
    padding-top:30px;
  }
  
  .bildunter {
    display:none;
  }
  
  .contactdetails {
    width:280px;
    padding-left:10px;
  }
  
  .phonenumber {
    color:white;
    background:black;
  }
  
  .emailaddress {
    font-size:90%;
  }
  
  .diamond span {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  
  #footer {
    margin-top: 10px;
    width:414px;
    height:125px;
    float:left;
    font-size: 15px;
  }
  
  #footer span {
    display:inline-block;
    background-color: #656565;
  }
  
  #footer .trennzeichen {
    display:none;
  }
}


/* iPhone 5, 320 x 568 px */
/* iPhone 6, 375 x 627 px */
/* iPhone 6 Plus, 414 x 736 px */
/* Samsung Galaxy (diverse), 360px )*/
/* ACHTUNG in absteigender Reihenfolge eintragen! */
/* width: 414, height: 310 */
@media (max-width: 414px) {
  
  #content {
    width: 414px;
  }
  
  #header {
    background-size: 414px;
    width: 414px;
    height: 310px;
  }
  
  div.bss-slides {
    width:414px;
    height:310px;
    margin-left:0px;
  }
  
  #apartments img {
    width:414px;
    height:310px;
  }
  
  #footer {
    width:414px;
    height:120px;
  }
}
  
/* width: 375, height: 281 */
@media (max-width: 375px) {
  
  #content {
    width: 375px;
  }
  
  #header {
    background-size: 375px;
    width: 375px;
    height: 281px;
  }
  
  div.bss-slides {
    width:375px;
    height:281px;
    margin-left:0px;
  }
  
  #apartments img {
    width:375px;
    height:281px;
  }
  
  #footer {
    width:375px;
    height:120px;
  }
}
  
/* width: 360, height: 270 */
@media (max-width: 360px) {
  
  #content {
    width: 360px;
  }
  
  #header {
    background-size: 360px;
    width: 360px;
    height: 270px;
  }
  
  div.bss-slides {
    width:360px;
    height:270px;
    margin-left:0px;
  }
  
  #apartments img {
    width:360px;
    height:270px;
  }
  
  #footer {
    width:360px;
    height:120px;
  }
}
  
/* width: 320, height: 240 */
@media (max-width: 320px) {
  
  #content {
    width: 320px;
  }
  
  #header {
    background-size: 320px;
    width: 320px;
    height: 240px;
  }
  
  div.bss-slides {
    width:320px;
    height:240px;
    margin-left:0px;
  }
  
  #apartments img {
    width:320px;
    height:240px;
  }
  
  #footer {
    width:320px;
    height:120px;
  }
}