/* Global Styles
-------------------------------------------------- */
html { min-height: 100%; border:0; margin:0; padding:0; outline:0; }
body { font-family: 'Heebo', sans-serif; color:#000; background-color:#f4f4f4; padding:0; margin:0; border:0; width:100%; }
*:focus { outline: none !important; }
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ul { margin:0; padding:0 }
a { display: block; }
.container { padding-left:25px !important; padding-right:25px !important}
button { cursor:pointer; }


.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0; }

nav.navbar, nav.navbar .social, nav .navbar-brand, nav .navbar-nav, nav .navbar-nav > li { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease; }
.navbar-brand { text-indent:-9999px; width:258px; height: 80px; background: url(../img/setrada-mietmoebel-logo.png) no-repeat; background-size: 258px 77px; margin:20px 0 0 15px; image-rendering: -moz-optimize-contrast;}
.navbar .navbar-nav > li > a { font-size:18px; padding:0; color:#333; font-weight:400 !important;  }
.navbar .navbar-nav > li > a:hover { color:#D9513E; text-decoration:none;  }
.navbar .navbar-nav > li.active a, .navbar-default .navbar-nav > li.active a:hover, .navbar-default .navbar-nav > li.active a:active, .navbar-default .navbar-nav > li.active a:focus { background-color:transparent; color:#D9513E; }
.navbar-nav > li.active, .navbar-nav > li.active:hover { border-bottom:2px solid #D9513E; transition:none !important;     }
.navbar-nav > li:hover { border-bottom:2px solid #ccc; transition:none !important; }
.navbar-nav > li { margin-right:40px; padding-bottom:5px }
.navbar-nav > li:last-child { margin-right:0; }
.navbar { height:120px; background-color:#fff; border:none; margin-bottom:0 !important; background: rgba(255,255,255,0.5) }
.navbar-brand { margin-top:0;}


.social { margin-top:35px; display:block; height:20px; text-align:right; font-size:13px; color:#999}
.social i { margin-right:10px; font-size:16px; text-decoration:none }
.social a { text-decoration:underline; color:#999}

.footer { width: 100%; min-height: 95px; background-color: #000;}
section h1, section h2, header h1, header h2 { font-size:36px; font-weight:600 }
section, header { padding: 0}
.hrsmall { height:2px; background-color:#fff; color:#fff; width:30px; border:none; margin:30px 0 28px 0}
.hrsmallwhite { height:2px; background-color:#444; color:#444; width:60px; border:none; margin:25px 0 }
.button { text-transform:uppercase; font-size:14px; letter-spacing:3px; color:#000; border:1px solid #999; text-decoration:none; padding:15px 30px; background-color:#fff; font-weight:700; }


nav.navbar.shrink { background: rgba(255,255,255,1); -webkit-box-shadow: 0px 5px 25px -6px rgba(0,0,0,0.7); -moz-box-shadow: 0px 5px 25px -6px rgba(0,0,0,0.7); box-shadow: 0px 5px 25px -6px rgba(0,0,0,0.7); border:none; height: 70px !important; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease;}
nav.navbar.shrink .social { margin-top:5px !important; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease;}
nav.shrink .navbar-brand { width:167px; height: 50px; background-size: 167px 50px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease;}
nav.shrink .navbar-nav {  -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -moz-transition:all 0.4s easet; -o-transition:all 0.4s ease;}
nav.shrink .navbar-nav > li { padding-bottom:5px }
nav.shrink .navbar-nav > li a { font-weight:400 !important; }

/* Custom CSS
-------------------------------------------------- */
span.mail a, #contact .web { text-decoration:underline; color:#999  }

.page-home #home  { background:url(../img/chairs1.jpg) center no-repeat ; background-size:cover;}
.page-home #home > .container { height:500px; }
.page-home #home > .container .headline { top: 60%; transform: translateY(-50%); position:relative; display:table; }
.page-home #home h1 { color: #111; margin: 0 0 15px 0; font-size: 50px; font-weight: 800; padding:0 10px; text-shadow:2px 2px 8px #999; display:table;}
.page-home #home .container h1 + span { font-size:28px; margin:0 0 15px 0; font-weight:400; color: #111; padding:0 10px; text-shadow:2px 2px 8px #999; display:table;}
.page-home #home p { font-size:24px; font-weight:300; color:#111; display:table; padding:0 10px; text-shadow:2px 2px 8px #999;  }

.datetime #requestform > span { width:100%;}
.datetime { float:right; width:340px; background-color:#c4c4c4; margin-top:20px; padding:20px 10px 20px 20px; }
/*.datetime > div { width:100%; margin:0 auto; position:relative; background-color:#c4c4c4; display:table; height:100px; top:-50px; padding:20px; border-radius:10px; box-shadow:2px 2px 5px #ddd;}*/
.datetime #requestform .products { width:100%; }
.datetime #addrow { margin:0; padding:0; border:0; background:transparent; font-size:80%;}
.datetime #from, .datetime #to { width:120px; }
.datetime fieldset { margin-top:10px; width:280px; }
.datetime fieldset input { width: 20px !important; margin-right: 10px; margin-top: 5px;}
.datetime button#submitRequest { margin-top:20px; border:none; width:220px; background-color:#D9513E; color:#fff; font-size:16px; font-weight:400; padding:5px 5px; border-radius:4px }
.datetime button#submitRequest i { margin-right:10px;  }
.datetime span { float:left; padding:5px 0 0; margin-right:10px;}
.datetime span #menge { float:none; margin-right:0px; padding: 2px 4px 0px 10px; width:50px; color:#333; border-radius: 4px; border: 1px solid #babfc2; line-height:25px;  background-image:none !important;}
.datetime span input#veranstaltungsort { display:block; float:none; margin-right:0px; padding: 2px 4px 0px 10px; width:150px; color:#333; border-radius: 4px; border: 1px solid #babfc2; line-height:25px; background-image:none !important;}
.datetime span label { display:block; color:#555; font-size:15px; font-weight:400; margin:0;}
.datetime span input { padding: 2px 4px 0px 35px; color:#333; border-radius: 4px; border: 1px solid #babfc2; line-height:25px; width:150px; background-image: url(../img/calendar.png); background-repeat: no-repeat; background-position: -30px 1px; background-size:20px 20px; background-origin: content-box;}
.datetime span input, .datetime span .date-seperator { float:left;}
.datetime span .date-seperator { width: auto; height:auto; line-height:27px; margin:0; padding:0 10px; top:55%; color:#555; width:48px;}
.datetime span select { border-radius: 4px; border: 1px solid #babfc2; line-height:25px; font-size:14px; font-weight:400; color:#777; width:230px; background-color:#fff; height:29px; outline: none; box-shadow: none !important;  }
.datetime span input[placeholder] { color:#333 !important; }



#mietmoebel > .container { padding-bottom:90px; position:relative;}
#mietmoebel h2 { color:#444; text-align:center; margin:40px 0 40px 0; }
#mietmoebel h3 { color:#444; font-size:24px; font-weight:600; margin-bottom:30px; }
#mietmoebel h3 span { font-weight:300; display:block; color:#444 }
#mietmoebel .panel { border-radius:0; border:none; background-color:transparent; color:#444; box-shadow: none; padding: 0; margin: 0;}
#mietmoebel .panel-thumbnail { background-color:#fff; padding:20px; width: 250px; height: 310px; display:table-cell; vertical-align: middle}
#mietmoebel .panel-thumbnail img { margin:0 auto; max-width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; max-height: 250px;}
#mietmoebel .panel-thumbnail:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
#mietmoebel .panel-thumbnail .product-overlay { -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; outline: 1px dotted #fff; outline-offset: -10px;z-index: 20; position: absolute; background-color:rgba(217, 81, 62, 0.7); top: 0; width: 100%; left: 0; padding: 20px; height: 100%; opacity: 0; text-align:center; color:#fff; font-size:18px;}
#mietmoebel .panel-thumbnail:hover .product-overlay { opacity: 1; }
#mietmoebel .panel-thumbnail .product-overlay .name { top:45%; position:relative; width:100%; text-align:center }
#mietmoebel .panel-thumbnail .product-overlay .name .black { font-size:22px; font-weight:700}
#mietmoebel ul li  { list-style:none; margin: 20px 0;}

#about { background-color:#e7e7e7; color:#444; }
#about .container { padding:40px 0 }
#about h2 { text-align:center; margin:40px 0 50px 0 }
#about h3 { margin-top:20px; font-size:18px; font-weight:600 }
#about p { line-height:24px; margin-bottom: 55px; }
#about #terrassentische p, #about #terrassenstuehle p { font-size:13px; }
#about #abouttext { padding-right:60px; }

#references { background-color:#fff; padding-bottom:90px}
#references h2 { text-align:center; margin:40px 0 50px 0 }


#contact { background-color:#e7e7e7; line-height:30px; padding-bottom:90px; padding-top:40px;  }
#contact h2 { color:#000; text-align:center; margin:40px 0 90px 0 }
#contact i { text-decoration:none; color:#999; font-size:18px; margin-right:5px }
#contact .row { margin:0 0 35px 0}
#contact .form-control  { border-radius:0; background-color:#fff; box-shadow:none; border-color:#dadada}
#contact #anfrage { height:160px; }
#contact #zustimmung { float: left; width: 30px; display: block; height:30px; margin-top: 0px !important; }
#contact label { font-size:15px; font-weight:400; margin-bottom:0; width: 100%;}
#contact p { margin:20px 0; }
#contact button { margin-top:30px; background-color:#000; border-radius:0; border:1px solid #000; width:75%; color:#fff; text-transform:uppercase; font-weight:600}


footer .container { font-weight:700; font-size:12px; color:#999; text-transform:uppercase }
footer .container > div { margin: 35px 0 0 0; padding:0; }
footer a, footer a:active, footer a:visited, footer a:hover, footer a:focus{ color:#999; border:none; outline:none; }
footer li { margin-right:15px; }

.modal-body { overflow-y:scroll !important; height:500px; }
.modal-body p { margin-bottom:40px; font-size:13px; }

.imprint-headline { font-size:14px; font-weight:600;}



/* Detail Page */
.page-detail { height:100%; }
.page-detail #home { height:120px; }
.page-detail #product-detail {  background-color:#eee; padding:70px 0; display:block; color:#444}
.page-detail #product-detail h1 {  font-size:28px; margin-top:0px; }
.page-detail #product-detail h2 {  font-size:18px; font-weight:400 }
.page-detail #product-detail .price { font-size:22px; font-weight:bold; }
.page-detail #product-detail .imageholder { background-color: #fff; position: relative; width: 100%;}
.page-detail #product-detail .prodimage { background-color:#fff; padding:20px; height:650px; display: table-cell; vertical-align: middle; margin:0 auto; width:500px}
.page-detail #product-detail .prodimage img {margin: 0 auto; max-height: 500px; image-rendering: -webkit-optimize-contrast; }
.page-detail #product-detail .prodtext { padding-left:50px; }
.page-detail #product-detail .keywords { margin-bottom:20px }
.page-detail #product-detail .hint { font-size: 12px; margin-top: 20px; color:#777 }

.page-detail #product-alternative { padding:40px 0}
.page-detail #product-alternative p { margin-left:15px; font-size:18px }
.page-detail #product-alternative .rand-item { background-color: #fff;  padding:20px; display: table-cell; vertical-align: middle}
.page-detail #product-alternative .rand-item img { margin:0 auto;  height:250px}
.page-detail #product-alternative .panel { border-radius:0; border:none; background-color:transparent; color:#444; box-shadow: none; padding: 0; margin: 0;}
.page-detail #product-alternative .panel-thumbnail { background-color:#fff; padding:20px; width: 250px; height: 310px; display: table-cell; vertical-align: middle}
.page-detail #product-alternative .panel-thumbnail img { margin:0 auto; max-width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; max-height: 250px;}
.page-detail #product-alternative .panel-thumbnail:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
.page-detail #product-alternative .panel-thumbnail .product-overlay { -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; outline: 1px dotted #fff; outline-offset: -10px;z-index: 20; position: absolute; background-color:rgba(217, 81, 62, 0.7); top: 0; width: 100%; left: 0; padding: 20px; height: 100%; opacity: 0; text-align:center; color:#fff; font-size:18px;}
.page-detail #product-alternative .panel-thumbnail:hover .product-overlay { opacity: 1; }
.page-detail #product-alternative .panel-thumbnail .product-overlay .name { top:45%; position:relative; width:100%; text-align:center }
.page-detail #product-alternative .panel-thumbnail .product-overlay .name .black { font-size:22px; font-weight:700}
.page-detail #product-alternative ul li  { list-style:none; margin: 20px 0;}

/*DatePicker */
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #D9513E !important; background: #D9513E !important; color: #fff !important;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border: 1px solid #cc6633 !important; background: #cc6633 !important; color: #fff !important;}


@media (max-width: 767px) {
	.page-home #home  { height:750px !important; }
	.page-home #home > .container .headline { top:275px; }
	.page-home #home h1 { font-size:40px !important; }
#home > .container { padding: 0 15px; background:none }
#home h1 > span { display:block}
.navbar-default .navbar-collapse { position: absolute; width: 95%; z-index: 10;    margin-top: -20px;}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 15px; }
.navbar > .container { border-bottom:1px solid #ebebeb; border-radius:0; height:100px; }
.navbar-toggle { margin-top:80px; position: absolute !important; right: 0 !important; z-index: 1000 !important; float:none !important; }
.navbar-collapse { border:none; margin-top:-110px; padding-right:0; padding-left:0; }
.navbar-default .navbar-nav > li.active a, .navbar-default .navbar-nav > li.active a:hover { background-color:#444; }
.navbar-nav { background-color:#444; padding:0 15px }
.navbar-nav > li { margin:10px 0 }
.navbar-nav li.active, .navbar-nav li:hover, .navbar-nav li.active:hover { border:none; background-color:#444 }
.navbar-default .navbar-nav > li > a { color:#fff; }


footer .list-inline > li { display:block; }
footer .list-inline > li { display:block; }
footer .list-inline { padding-bottom:30px; }

#hochzeitsstuehle, #stehtische, #tische-mieten { padding:0 !important; }
.date-seperator { display: none; }
#askus .container .datetime span { margin:0 !important;  width: 95%; }
#askus .container .datetime span #menge { width: 100%; }
#askus .container .datetime span select {  width:100%; }
#askus .container  #submitRequest{ display: block; position: relative; transform: none; top: 10px; right: 0px; }

}

@media (max-width: 785px) {
	body { padding-top:0; }
	#mietmoebel .panel-thumbnail { width:100%; display:inline-flex; }
	.datetime #requestform .add { text-align:left !important; }
	.datetime { display:inline-block; width:100%; margin-top:0; }
	
}












/*
    code by Iatek LLC 2018 - CC 2.0 License - Attribution required
    code customized by Azmind.com
*/
body.modal-open #imagemodal { display: flex !important; height: 100%;} 
body.modal-open #imagemodal .modal-dialog { margin: auto; }
#imagemodal .modal-dialog, #imagemodal .modal-content { width: 800px; max-height:800px !important;} 
#imagemodal .modal-content {
    /* 80% of window height */
		height:600px;
    background-color: #ffffff;
		border:0;
		border-radius:0;
}        
#imagemodal .modal-body { overflow:hidden !important; }
#imagemodal .close { opacity:1; font-size:2.5em; color:#fff; cursor:pointer; text-shadow:0 1px 0 #000;}



.carousel-control-next-icon, .carousel-control-prev-icon { background-color:black !important;padding:12px !important;border-radius:20px !important; width:40px !important; height:40px !important; background-size:60% 60% !important;}
.carousel-control-next { right: -90px !important; }
.carousel-control-prev { left: -90px !important; }

@media (max-width:512px) {
	#mietmoebel .panel-thumbnail .product-overlay { opacity:1; background-color: transparent;}
	#mietmoebel .panel-thumbnail .product-overlay .name { top:30%; padding: 10px 10px 5px 10px; background-color: rgba(0,0,12,0.5); margin: 0 auto;}
}




@media (min-width: 768px) and (max-width: 991px) {
    /* Show 4th slide on md if col-md-4*/
    .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 576px) and (max-width: 768px) {
    /* Show 3rd slide on sm if col-sm-6*/
    .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
		
}
@media (min-width: 576px) {
    .carousel-item {
        margin-right: 0;
    }
    /* show 2 items */
    .carousel-inner .active + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be also positioned for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* MD */
@media (min-width: 768px) {
    /* show 3rd of 3 item slide */
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* LG */
@media (min-width: 991px) {
	
	.datetime { margin-bottom:20px; top:100px; position:sticky; position:-webkit-sticky; }
	
	
    /* show 4th item */
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    /* Show 5th slide on lg if col-lg-3 */
    .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}