html, body {
	width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}


ul{
    list-style-type: none; 
    margin: 0;
    padding: 0;
    border: 0;
    width:100%;
}

section{
    position: relative;
    min-width:600px;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 800px;
}


img{
    margin: 0;
    padding: 0;
    border: 0;
}


button{
    <!-- Basic styles -->
    height: auto;
    width: auto;
    background-color: rgba(157, 155, 155, 0.3);
    border-color: rgba(157, 155, 155, 0.3);

    
    <!-- Basic text -->
    color: #535353;
    text-align: center;
    font: bold "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    
    /*Step 4: Fancy CSS3 Styles*/
    border-radius: 6px;
}

button:hover {
    color: rgb(0, 0, 0);
    background-color: #c6c6c6;
    }



<!-- Socail Bar -->

#socialBar{
    position:FIXED; 
    bottom:-30px; 
    right:10%; 
    z-index:10; 
    width:40px;
}



#close img{
    width: 10px;
    height: 10px;
}        
        

#map_Horw {
    position:absolute;   
    top: 20%;
    left:10%;    
    width: 45%;
    height: 65%;
    background-color: #CCC;
}


#live-Cam {
    position:absolute;   
    top: 15%;
    left:50px; 
    overflow-y: hidden; 
    overflow-x: hidden;

}


<!--overlay box -->
#overlay{ /* we set all of the properties for are overlay */
    display:none; 
}
/* Wohnung 1*/
#mask1{ /* create are mask */
    position:absolute;
    top:0;
    left:0;
    background:rgba(255, 255, 255, 0.85);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}

    #mask1 img{
        position: absolute;
        background: rgba(255, 255, 255, 0.85);
        top: 15%;
        left: 5%;
         
    }

    #mask1 p{
        position: absolute;
        display: inherit;
        background: white;
        width: 30%;
        top: 20%;
        left: 65%;
        
    }

/* use :target to look for a link to the overlay then we find are mask */
#mask1:target{
    display:block;
    opacity:1;
}




/* Whohnung 2*/
#mask2{ /* create are mask */
    position:absolute;
    top:0;
    left:0;
    background:rgba(255, 255, 255, 0.85);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}

    #mask2 img{
        position: absolute;
        background: rgba(255, 255, 255, 0.85);
        top: 15%;
        left: 5%;

    }

    #mask2 p{
        position: absolute;
        display: inherit;
        background: white;
        width: 30%;
        top: 20%;
        left: 65%;
        
    }

/* use :target to look for a link to the overlay then we find are mask */
#mask2:target{
    display:block;
    opacity:1;
}




/* Whohnung 3*/
#mask3{ /* create are mask */
    position:absolute;
    top:0;
    left:0;
    background:rgba(255, 255, 255, 0.85);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}

    #mask3 img{
        position: absolute;
        background: rgba(255, 255, 255, 0.85);
        top: 15%;
        left: 20%;
    }

    #mask3 p{
        position: absolute;
        display: inherit;
        background: white;
        width: 35%;
        top: 20%;
        left: 60%;
        
    }

/* use :target to look for a link to the overlay then we find are mask */
#mask3:target{
    display:block;
    opacity:1;
}




/* Whohnung 4*/
#mask4{ /* create are mask */
    position:absolute;
    top:0;
    left:0;
    background:rgba(255, 255, 255, 0.85);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}

    #mask4 img{
        position: absolute;
        background: rgba(255, 255, 255, 0.85);
        top: 15%;
        left: 20%;
    }

    #mask4 p{
        position: absolute;
        display: inherit;
        background: white;
        width: 35%;
        top: 20%;
        left: 60%;
        
    }

/* use :target to look for a link to the overlay then we find are mask */
#mask4:target{
    display:block;
    opacity:1;
}




/* Whohnung 5*/
#mask5{ /* create are mask */
    position:absolute;
    top:0;
    left:0;
    background:rgba(255, 255, 255, 0.85);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}

    #mask5 img{
        position: absolute;
        background: rgba(255, 255, 255, 0.85);
        top: 15%;
        left: 10%;
    }

    #mask5 p{
        position: absolute;
        display: inherit;
        background: white;
        width: 30%;
        top: 20%;
        left: 65%;
        
    }

/* use :target to look for a link to the overlay then we find are mask */
#mask5:target{
    display:block;
    opacity:1;
}




/* Whohnung 6*/
#mask6{ /* create are mask */
    position:absolute;
    top:0;
    left:0;
    background:rgba(255, 255, 255, 0.85);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}

    #mask6 img{
        position: absolute;
        background: rgba(255, 255, 255, 0.85);
        top: 15%;
        left: 10%;
    }

    #mask6 p{
        position: absolute;
        display: inherit;
        background: white;
        width: 30%;
        top: 20%;
        left: 65%;
        
    }

/* use :target to look for a link to the overlay then we find are mask */
#mask6:target{
    display:block;
    opacity:1;
}




<!-- slides -->
#pilatus { 
    position: relative;
    background: #7fa7d4;
}

    #pilatus h1 {
		width: 1200px; height: 100px;
		background: url(images/livingworkingAebenau-bar.png) no-repeat; 
		position: relative; top: 650px; z-index: 100;
	}

#living{ 
    position: relative;
    background: #fff;
}

#working{ 
    position: relative;
    background: #fff;
}


#live{ 
    position: relative;
    background: #fff;
}

#interested{ 
    position: relative;
    background: #fff;
}


/* Gallery*/

	.thumbnails img {
		height: 70px;
		border: 4px solid #ffffff;
		padding: 1px;
		margin: 0 10px 10px 0;
	}

	.thumbnails img:hover {
		border: 4px solid #fdda30;
		cursor:pointer;
	}

	.preview img {
		border: 4px solid #ffffff;
		padding: 1px;
		height: 550px;
	}

/* Info*/
#alert{
    font-size:160%;
    color:crimson;
    padding: 0;
    border: 0;
}