/* Friseur Lux Responsive
--------------------------------------------*/

/* Menu Small Navbar */
.menubutton-container {
    margin: 10px auto;
    width:36px;
    display: block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #FFF;
    margin: 6px 0;
    transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

.menu-container{
    display: none;
    position: absolute;
    background: rgba(0,0,0, 0.8);
    width: 100vw;
    height: 415px;
}

.menu-container ul{
    padding-top: 20px;
    width: 100%;
    text-align: center;
    list-style: none;
}

.menu-container ul li{
    padding: 10px 0;
}

.menu-container ul li a{
    color: #FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12pt; font-weight: 100;
}

.menu-container ul li a:hover{
    color: #C4AE95;
    text-transform: uppercase;
}

/*----- Media Max-Width: 950px -----*/
@media (max-width: 950px){
    /* Header */
    #header-wrap{width:100%;}
    #header { width: 100%; margin:0;}
    #nav { display:none;}
    #nav-responsive{width: 100%; display: block; text-align: center;}
    #header-img {height: 415px; background-color: #ccc;}
    #logo-wrap {width: 100%; margin: 0;}
    
        /* Main
    --------------------------------------------*/
    #content-wrap { width: 100%;background-color: #fff;overflow-x: hidden;}
    #content {width: 100%; padding: 45px 10px; box-sizing: border-box;}
    #content table tr { vertical-align: top; width:100%}
    
    #slider_wrap_carousel { position: relative; width: 540px; padding: 0 18px; }
    
    #slider_wrap_reg { position: relative; width: 540px; padding: 0 9px; margin-bottom: 20px;}
    #slider_wrap_reg .cycle-slideshow img {width: 540px; height: 380px;}
    .prev_reg {left: 0px; top: 170px;}
    .next_reg {right: 0px; top: 170px;}
    .table-prices{width:560px!important;} 
    .table-row{
        width:100%!important;
        min-width:100%!important;
        display: table-row;
        padding-right: 0px;
    }
    .inner-table{min-width: 560px; padding: 10px;}
    .googlemap{width:580px!important; height: 303px!important;}
    
    
    /* Footer
    --------------------------------------------*/
    #footer-wrap {width: 100%; background-color: #000000; }
    #footer {width: 100%; height: auto; padding: 0 10px; box-sizing: border-box;}
    .footer-columns {padding-top: 25px; float: left; width: 100%; padding-left: 0px; }
    #footer-1 {padding-left:0px;}

    p, tr {color: #fff; font-size: 10pt; font-weight: 100;}

    #footer p a {color: #fff;}
    .heading-footer {font-size: 12pt; font-weight: 200;}
    #footer-2 {}
    .footer-border {width: 100%; border-bottom: 1px solid #fff;}
    #footer-3 {padding-bottom: 20px;}
    #footer-4 {padding-top:0px; display: none;}

}


@media(max-width: 580px){
    #slider_wrap_carousel { position: relative; width: 340px; padding: 0 18px; }
    .googlemap{width: 340px!important; height: 303px!important;}
    .inner-table{min-width: 360px; padding: 5px;}
    .table-prices{width:360px!important;}  
    .gallery-kunst a img {width: 100%; height: 100%;}
    
    #slider_wrap_reg { position: relative; width: 360px; padding: 0 9px; }
    #slider_wrap_reg .cycle-slideshow img {width: 360px; height: 240px;}
    .prev_reg {left: 0px; top: 100px;}
    .next_reg {right: 0px; top: 100px;}
    
}

@media(max-width: 399px){
    #slider_wrap_carousel { position: relative; width: 270px; padding: 0 18px; }
    .googlemap{width: 300px!important; height: 303px!important;}
    .inner-table{min-width: 300px; padding: 5px;}
    .table-prices{width:100%!important;} 
    
    #slider_wrap_reg { position: relative; width: 280px; padding: 0 9px; }
    #slider_wrap_reg .cycle-slideshow img {width: 280px; height: 200px;}
    .prev_reg {left: 0px; top: 80px;}
    .next_reg {right: 0px; top: 80px;}
}