* {
    font-family:Arial;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
img {
	vertical-align: bottom;
}

body {
        background: url(../assets/Iso100_2.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
    background-color: black;
}

body::-webkit-scrollbar {
  width: 0;
  height: 0;
}



.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: right;
    height: 5.5%;
    margin-top: 2%;
    margin-right: 2%;
    background-color: rgba(0,0,0,0.1);
}

.navbar li {
    float: left;
    height:inherit;
}

.navbar a {
    display: block;
    color: azure;
    height:inherit;
    padding: 1.5vh 1.6vh;
    text-align: center;
    text-decoration: none;
    font-size: 1.2vw;
    font-family: Arial;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1vw;
    opacity: 0.8;
}

a::after {
    content: '';
    display: block;
    width: 0;
    height: 0.6vh;
    background: white;
    transition: width .3s;
}


a:hover::after {
    width: 100%;
    transition: width .3s;
}

.navbar a:hover {
    opacity: 1;
}

.active a {
    color: azure;
    opacity: 1;
    z-index:inherit;
}

.active a:hover {
    color: white;
}

.active a::after {
    content: '';
    display: block;
    width: 100%;
    height: 0.6vh;
    background: white;
    transition: width .3s;
}

@media only screen and (min-width: 769px) {

#cornerBox {
    position:absolute;
    top:200%;
    left:100%;
    transform: translate(-15vw, -15vw) rotate(55deg);
    height:50vw;
    width:50vw;
    background-color:azure;
    opacity:0.7;
    z-index:5;
}

#cornerBox2 {
    position:absolute;
    top:0;
    left:0;
    transform: translate(-35vw, -35vw) rotate(55deg);
    height:50vw;
    width:50vw;
    background-color:azure;
    opacity:0.7;
    z-index:5;
}

}
    
#wohnungTop {
    margin:0;
    padding:0;
    height:100%;
    width:100%;

}

#raumPlan {
    position:relative;
    top:130px;
    left:60px;
    width:250px;
    opacity:0.7;
    transition: opacity 1s;
}

#raumPlan img{
    height:auto;
    width:250px;
}

#raumPlan:hover {
    opacity:1;
    transition: opacity 0.5s;
}

.raum {
    position:absolute;
    background-color:orange;
    opacity:0.6;
    text-align: center;
    font-size: 12px;
    font-weight:600;
    transition: opacity 0.5s;
}

.raum:hover {
    cursor:pointer;
    opacity:1;
    transition: opacity 1s;
}

.activeRaum {
    background-color: firebrick;
    opacity:1;
}

#raumBad {
    top: 98px;
    left: 70px;
    height: 90px;
    width: 50px;
    line-height: 90px;
}

#raumSchlaf {
    top: 16px;
    left: 70px;
    height: 68px;
    width: 104px;
    line-height: 68px;
}

#raumFlur {
    top: 16px;
    left: 18px;
    height: 172px;
    width: 36px;
    line-height: 172px;
}

#raumWohn {
    top: 204px;
    left: 18px;
    height: 80px;
    width: 156px;
    line-height: 80px;
}

#raumKueche {
    top: 98px;
    left: 134px;
    height: 102px;
    width: 40px;
    line-height: 100px;
}

#raumBalkon1 {
    top: 16px;
    left: 190px;
    height: 284px;
    width: 42px;
    line-height: 284px;
}

#raumBalkon2 {
    top: 300px;
    left: 18px;
    height: 34px;
    width: 214px;
    line-height: 34px;
}

#raumTitel {
    text-align: center;
    font-size: 18px;
    font-weight:600;
    color:white;
}

#wohnungTitel {
    cursor: default;
    position:absolute;
    top:130px;
    left:400px;
    width:50%;
    height:60%;
    line-height:5.8vw;
    color:white;
    font-size: 5vw;
    font-family: Arial;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1vw;
    opacity:0.8;
    transition: opacity 1s;
}

#wohnungTitel:hover,
#lageTitel:hover {
    opacity:1;
    transition: opacity 1s;
}

#wohnungStart {
    color:darkorange;
    font-size: 5vw;
}

#wohnungPfeil {
    color:darkorange;
    font-size:8vw;
}

#lageTitel {
    cursor: default;
    position:absolute;
    top:295px;
    right:226px;
    width:40%;
    height:60%;
    text-align: right;
    line-height:5.8vw;
    color:brown;
    font-size: 5vw;
    font-family: Arial;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1vw;
    opacity:0.8;
    transition: opacity 1s;
}

#lageAnsehen {
    color:white;
    font-size: 5vw;
}

#lagePfeil {
    color:white;
    font-size:8vw;
}

/*#raumBild {
    position:relative;
    top: -40%;
    left: 35%;
}

#raumBild img{
    min-height:25%;
    height:auto;
    width:60%;
}*/

#wohnungBot {
    float:left;
    margin:0;
    padding:0;
    top:100%;
    height:100%;
    width:100%;
    background-color: rgba(100, 19, 0, 1);;
}

/*#wohnungBot::after {
    content: '';
    display: block;
    position:absolute;
    top: -15%;
    left: -8%;
    height:100%;
    width:100%;
    background: rgba(0,0,0,0);
    outline: 20vw solid black;
    opacity:0.2;
    z-index:0;
}*/

#amrumSkizze {
    float:left;
    margin-top:2%;
	margin-left: 2%;
    top:105%;
    left:48%;
	width:28%;
    z-index:1;
}

#amrumTitel {
    float:left;
    margin-top:5%;
	margin-left: 3%;
    top:130%;
    left:5%;
    color:white;
    line-height:4.5vw;
    font-size: 5vw;
    font-family: Arial;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1vw;
    z-index:1;
}

#amrumLage {
    float:left;
    margin-top:2%;
    margin-bottom: 5%;
	margin-left: 3%;
    top:155%;
    left:5%;
    width:45%;
    color:white;
    line-height:1.7vw;
    font-size: 1.5vw;
    font-family: Garamond;
    font-weight: 600;
    z-index:1;
}

.mobile {
    display: none;
}

#mobileTop {
    width:100%;
    overflow: hidden;
}

.imageBox {
    position: relative;
    width: 25%;
    padding-bottom:25%;
    float:left;
}

.imageBox div {
    position:absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    overflow:hidden;
}

.imageBox div img {
    width: 100%;
}

.innerBox .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-top: 100%;
   background: #000;
   background: rgba(0, 0, 0, 0.5);
   color: #FFF;
   padding: 10px;
   text-align: center;
   -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;
}

.innerBox:hover .titleBox,
body.touch .innerBox.touchFocus .titleBox {
   margin-top: 80%;
}


.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .imageBox {
      width: 100%;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .imageBox {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 820px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .imageBox {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}

@media only screen and (max-width: 960px) {
    .navbar a {
        font-size:13px;
    }
}

@media only screen and (max-width: 820px) {
    body {
        background: black url('');
    }
    #wohnungTop {
        display: none;
    }
    .mobile {
        display: block;
    }
    #amrumSkizze {
        width:40%;
    }
    #amrumLage {
        font-size: 14px;
        line-height: 130%;
    }
    #wohnungBot {
        height:initial;
    }
}

@media only screen and (max-width: 768px) {
    .impressumDatenschutz {
        font-size:8px;
        line-height:8px;
    }
    .hideText {
        display: none;
    }
	.navbar {
		height: initial;
	}
}