@charset "utf-8";

/* ===== colors ======
 dunkeloliv: rgb(150, 153, 122)
 helloliv: rgb(163, 164, 133)
 hellbeige: rgb(221,210,190)
 dunkelbeige: rgb(180, 178, 147)
 ====================== */

/* ==== Table of Content ====
1. Fonts
2. Allgemeines
3. Navigation
4. Modal - windows - rausgenommen
5. Indexseite
    5.1 Teaserbereich
    5.2 Testimonials - Slider
    5.3 Bilder-Abschnitt
    5.4 Main Article
    5.5 Hochzeits-Abschnitt
    5.6 Referenzen - Abschnitt
    5.7 Musik-Abschnitt 
    5.8 Videos-Abschnitt
    5.9 Blog-Thumbnails
6. Footer
7. Empfehlungen 
8. Bilder - Seite
    8.1 Technikfotos 
9. Videos -Seite
10. Musik - Seite
11. Hochzeit-Seite
12. Referenzseite
13. Gästebuch
14. 404 Seite
15. Impressum & Kontakt
 ====================== */

/* ==== 1. FONTS & ICONFONTS ==== */

@font-face {
	font-family: 'fontello';
	src:url(../fonts/fontello.eot);
	src:url(../fonts/fontello.ttf) format('truetype'),
		url(../fonts/fontello.woff) format('woff'),
		url(../fonts/fontello.svg) format('svg');
	font-weight: normal;
	font-style: normal;}
@font-face {
	font-family: 'Raleway';
	src:url(../fonts/Raleway-ExtraBold.ttf);
	font-weight: 800;
	font-style: normal;}
@font-face {
	font-family: 'Raleway';
	src:url(../fonts/Raleway-Bold.ttf);
	font-weight: 700;
	font-style: normal;}
@font-face {
	font-family: 'Raleway';
	src:url(../fonts/Raleway-SemiBold.ttf);
	font-weight: 600;
	font-style: normal;}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'fontello';
	font-style: normal;
	font-weight:normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;}
.icon-pinterest:before {
	content: "\e811";
}
.icon-whatapp:before {
	content: "\e80f";
}
.icon-right-open:before {
	content: "\e808";
}
.icon-note-beamed:before {
	content: "\e80c";
}
.icon-linkedin:before {
	content: "\e812";
}
.icon-HEADPHONES:before {
	content: "\e805";
}
.icon-star:before {
	content: "\e809";
}
.icon-comment-empty:before {
	content: "\f0e5";
}
.icon-blog:before {
	content: "\e813";
}
.icon-star-empty:before {
	content: "\e80a";
}
.icon-angle-right:before {
	content: "\f105";
}
.icon-8:before {
	content: "\e807";
}
.icon-9:before {
	content: "\e806";
}
.icon-fotos:before {
	content: "\e810";
}
.icon-ok:before {
	content: "\e80b";
}

/*===== 2. Allgemeines ==== */
html{
	background: rgb(150, 153, 122);}

body {
    background: rgb(150, 153, 122);
    padding-top: 0;
    font-size: 0.8em;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    font-family: 'Raleway', Tahoma, Arial, Sans-serif;}

h1, h3, h4, h5, p, ul, li, dt, dd, dl {
  text-align: left;}

h1 {
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 800;
  font-size: 1em;
  width: auto;}

h2 {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 1%;
	font-size: 1.7em;
    font-weight: 800;}

.row {
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;}
hr{
    opacity:1;
}

.double hr {
	clear: both;
	padding: 0;
    border: none;
    border-top: thick double #ffffff;
    color: white;
    text-align: center;
    margin-bottom: 9px;
opacity:1;}

.rechts{
	text-align:right;
}

/* ===== 3. Navigation ======*/
header {
    background-color: rgb(180, 178, 147);
    padding-top: 7px;
    padding-bottom: 5px;
    height: 64px;
    border-bottom: 3px solid rgba(0, 0, 0, 0.2);
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;}

.navbar-nav {
	text-transform: uppercase;
    background-color: rgb(180, 178, 147);
    font-family: 'Raleway', Tahoma, Arial, Sans-serif;
    margin-left: 0;}

.container-fluid.navigation{
    padding-left:0;
    padding-right:0;
    background-image: none;
    border-top: 1px solid rgb(221, 210, 190);
    border-bottom: 1px solid rgb(221, 210, 190);
}
.container-fluid.navigation.extra{
    border-top: 3px solid rgb(150, 153, 122);
    border-bottom: 3px solid rgb(150, 153, 122);
}
.navbar {
    min-height: 50px;   
    margin-bottom: 0;
    background-color: rgb(180, 178, 147);
    border-bottom: 3px solid rgba(50, 50, 50, 0.3);
    top:3px;}

.navbar-nav > li {
    padding-top: 4px;
    padding-bottom: 5px;
    padding-left:10px;
    border-top: 1px solid rgb(221, 210, 190);
    border-bottom: 1px solid rgb(221, 210, 190);}

.navbar-nav > li > a{
    color: white;
    padding: 4px 0;
    font-size: 1em;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-decoration:none;
    text-align: center;}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:active,
.navbar-nav > li > a:focus,
.navbar-nav > li > a:visited{
    color: white;
    padding: 4px 0;
    font-size: 1em;
    font-weight: 800;
    background-color: rgb(180, 178, 147);
    letter-spacing: 0.1em;}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:active,
.navbar-nav > li > a:focus{
    border-top: 1px solid #FAFAFA;
	border-bottom: 1px solid #FAFAFA;}

.active {
	border-top: 1px solid #FAFAFA;
	border-bottom: 1px solid #FAFAFA;}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    color:white;
}

.navbar-toggler{
    float: left;
    margin-left: 15px;
    margin-right: 0;
    border: none;    }
.my-navbar {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media screen and (max-width: 767px) {
	header {
		background: none;
        border: none;} 
    .navbar{
        background: none; 
        border: none;
        height: 79px;}
    .navbar-nav{
        border:none;
    }
    .container-fluid.navigation{
        border:none;
    }
     .container-fluid.navigation.extra{
        border:none;
    }
    .nav li, .nav ul{
     background-color:rgb(180, 178, 147);}
    .navbar-fixed-top .navbar-collapse {
     max-height: 360px;}
    .navbar-collapse{
     padding: 0;}
}

/*==== 5. Indexseite ===*/

/*==== 5.1 Teaserbereich=====*/
#teaser{
	background-image:url(../images/dj_morange.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 3px solid rgba(163, 164, 133, 0.5);}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	#teaser {
		background-image: url(../images/medium1200/dj_morange1200.jpg);}}
@media screen and (min-width: 768px) and (max-width: 991px) {
	#teaser {
		background-image: url(../images/small992/dj_morange992.jpg);}}
@media screen and (max-width: 767px) {
	#teaser {
		background-image: url(../images/phone768/dj_morange768.jpg);}}

.logo{
    margin-right: 2px;
}
#textwrap {
    margin-top: 23%;}

@media screen and (max-width: 1199px) {
	#textwrap {
		margin-top: 19%;} 
}

@media screen and (max-width: 991px) {
	#textwrap {
		margin-top: 12%;} 
}

@media screen and (max-width: 767px) {
	#textwrap {
		margin-top: 20%;
        margin-bottom:78%;
        padding-top: 0;} 
}

#textwraphochzeit{
    margin-top: 24%;}

@media screen and (max-width: 1199px) {
	#textwraphochzeit {
		margin-top: 22%;} 
}
@media screen and (max-width: 991px) { 
	#textwraphochzeit {
		margin-top: 15%;} 
}

@media screen and (max-width: 767px) { 
	#textwraphochzeit {
		margin-top: 20%;
        margin-bottom:75%;} 
}

#text,
#texthochzeit{
    padding-bottom: 7%;}

#text h1,
#texthochzeit h1{
    font-weight: 800;
    font-size: 1.4em;
    text-align: center;
    letter-spacing: 0.13em; 
    padding-bottom: 0;
    margin-top: 14px;
    margin-bottom: 0;}

#text h2,
#texthochzeit h2{
letter-spacing: 1px;
font-size: 1.3em;
margin: 6px 0 0 0;
font-weight: 700;}

#text p,
#texthochzeit p,
#impressum p{
text-align: center;
letter-spacing: 0.06em;
font-size: 1.1em;
margin: 9px 0 0 0;
line-height: 13px;}

#texthochzeit p{
 line-height: 16px;}

.abstand{
 padding-bottom: 6px;}

#text a,
#texthochzeit a{
	text-transform: uppercase;
	color: white;
	letter-spacing: 0.01em;
	padding: 0 7px;
	font-size: 1.1em;
    text-decoration: underline;}

#text img,
#texthochzeit img{
    display: block;
    margin-left: auto;
    margin-right: auto;}

strong{
 font-size: 1.2em;}

.social span{
    font-size: 2em;}

#text .social a,
#texthochzeit .social a{
 text-decoration: none;}
    
/*==== 5.2 Testimonials - Slider ===*/
.testimonials{
    background: rgb(180, 178, 147);
	border-top: 1px solid rgb(221,210,190);}

.testimonial{
    padding-top: 2%;
    font-size: 1em;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
    margin-top: 5px;}

.testimonial:nth-child(2){
 padding-top:3%;}

.testimonial p{
 text-align: center;}

.testimonialunten{
    background: rgb(180, 178, 147);
	border-bottom: 1px solid rgb(221,210,190);
    margin: 0;}

.testimonialunten hr {
	clear: both;
	padding: 0;
    border: none;
    border-top: thick double #ffffff;
    text-align: center;
    margin-bottom: 9px;
	margin-top:23px;
}

@media screen and (max-width: 767px) {
    .testimonialunten hr {
        padding-bottom: 10px;}  
}	

.testimonialunten hr:before {
	font-family: 'fontello';
	content: "\e807";
    display: inline-block;
    position: relative; 
    top: -0.85em;  
    font-size: 2.3em;
    padding: 0 0.2em;
    background: rgb(180, 178, 147);
    font-weight: normal;
}

@media screen and (max-width: 767px) {
	.testimonialunten hr:before{
	font-size: 3.5em;}
}	

.testimonialunten a {
    text-transform: uppercase;
	color: white;
	letter-spacing: 1px;
	padding: 0 15px 0 10px;
	font-size: 1.7em;
    text-decoration: underline;}

.carousel-item.active{
    border: none;}

/*===== 5.3 Bilder-Abschnitt====*/
#bilder {
	background-image:url(../images/tanzende_menschen.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-top: 3px solid rgba(163, 164, 133, 0.5);
	border-bottom: 3px solid rgba(163, 164, 133, 0.5);
    margin: 0;}

@media screen and (max-width: 1199px) {
	#bilder {
		background-image: url(../images/medium1200/tanzende_menschen1200.jpg);} }
@media screen and (max-width: 991px) {
	#bilder {
		background-image: url(../images/small992/tanzende_menschen992.jpg);} }
@media screen and (max-width: 767px) {
	#bilder {
		background-image: url(../images/phone768/tanzende_menschen768.jpg);}}

#bilder a, #hochzeit a, #musik a, #videos a {
    text-transform: uppercase;
	color: white;
    text-decoration:none;
	letter-spacing: 1px;}

#bilder a:hover, #hochzeit a:hover, #musik a:hover, #videos a:hover{
    text-decoration: underline;
}

.link{
margin: 50% 5% 3% 4%;
font-size: 2em;
font-weight: bold;}

@media screen and (max-width: 1199px){
    .link {
        font-size: 1.8em;}}
@media screen and (max-width: 991px){
    .link {
        font-size: 1.6em;}}
@media screen and (max-width: 767px){
.link {
 font-size: 1.3em;}}

.link a{    
 color: white; 
text-decoration: none;
padding-right:5%;}

/* ===== 5.4 Main Article ===== */
.cap {
    float: left;
    line-height: 8px;
    font-size: 1.2em; 
    padding-top: 5px;
    padding-right: 4px;}

.vita, .blog{
background: rgb(180, 178, 147);
border-top: 1px solid rgb(221,210,190);
border-bottom: 1px solid rgba(221, 210, 190, 0.5);
padding: 0 3% 30px 2%;
margin: 0;}

.spalten {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 1,7em; /* Chrome, Safari, Opera */
-moz-column-gap: 1.7em; /* Firefox */
column-gap: 1.7em;}

@media screen and (max-width: 991px) {
	.spalten{
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;}
}	
@media screen and (max-width: 767px) {
	.spalten{
-webkit-column-count: 1; /* Chrome, Safari, Opera */
-moz-column-count: 1; /* Firefox */
column-count: 1;}
}	

.vita p,
.spalten p{
	font-size: 1.1em;
    letter-spacing: 1px;
    line-height: 1.45em;
	margin: 0;
	text-align: justify;
    padding: 0 0 10px 10px;}

.vita a{
   color: white;}

.vita a:hover{
 text-decoration: none;}

.vita a:last-child{
 color: white;   
 text-decoration: underline;
 font-size: 1.1em;
 margin-top: 14px;}

/* ===== 5.5 Hochzeits-Abschnitt ==== */

#hochzeit {
	background-image:url(../images/brautwalzer.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-top: 1px solid rgb(180, 178, 147);
	border-bottom: 3px solid rgba(163, 164, 133, 0.5);}

@media screen and (max-width: 1199px) {
	#hochzeit {
		background-image: url(../images/medium1200/brautwalzer1200.jpg);} }
@media screen and (max-width: 991px) {
	#hochzeit {
		background-image: url(../images/small992/brautwalzer992.jpg);} }
@media screen and (max-width: 767px) {
	#hochzeit {
		background-image: url(../images/phone768/brautwalzer768.jpg);} }
	
/*===== 5.5 Referenzen - Abschnitt =====*/

#referenzen {
    background: rgb(180, 178, 147);
    border-top: 1px solid rgb(221,210,190);
    padding-bottom: 1%;}

#referenzen img {
    margin-left: auto;
    margin-right: auto; 
    margin-bottom: 0;
    padding: 9% 0 0 10%;}

.referenzenunten{
    background: rgb(180, 178, 147);
	/*border-bottom: 1px solid rgb(221,210,190);*/
    margin: 0;
    box-shadow: 0 9px 5px 1px rgba(50, 53, 52, 0.3);
}

.referenzenunten hr {
	clear: both;
	padding: 0;
    border: none;
    border-top: thick double #ffffff;
    color: white;
    text-align: center;
    margin-bottom: 9px;
    margin-top: 10px;}


@media screen and (max-width: 767px) { 
    .referenzenunten hr {
        padding-bottom: 20px;}  
}	

.referenzenunten hr:before {
	content: url(../images/Wappen.png);
    display: inline-block;
    position: relative; 
    top: -1.25em;  
    padding: 0 1.3em;
    background: rgb(180, 178, 147);}

@media screen and (max-width: 767px) {
	.referenzenunten hr:after{
	font-size: 2em;}
}	

.referenzenunten a {
    text-transform: uppercase;
	color: white;
	letter-spacing: 1px;
	padding: 0 15px 0 10px;
	font-size: 1.7em;
    text-decoration: underline;}

/* ====== 5.7 Musik-Abschnitt =====*/

#musik {
	background-image:url(../images/musik_setup.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-top: 1px solid rgb(180, 178, 147);
	border-bottom: 3px solid rgba(163, 164, 133, 0.5);}

@media screen and (max-width: 1199px) {
	#musik {
		background-image: url(../images/medium1200/musik_setup1200.jpg);} }
@media screen and (max-width: 991px) {
	#musik {
		background-image: url(../images/small992/musik_setup992.jpg);}}
@media screen and (max-width: 767px) {  
	#musik {
		background-image: url(../images/phone768/musik_setup768.jpg);} }

/* ====== 5.8 Videos-Abschnitt =====*/
#videos {
	background-image:url(../images/dj_morange_videos.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-top: 1px solid rgb(180, 178, 147);
	border-bottom: 3px solid rgba(163, 164, 133, 0.5);}

@media screen and (max-width: 1199px) {
	#videos {
		background-image: url(../images/medium1200/dj_morange_videos1200.jpg);}}
@media screen and (max-width: 991px) {
	#videos {
		background-image: url(../images/small992/dj_morange_videos992.jpg);}}
@media screen and (max-width: 767px) {  
	#videos {
		background-image: url(../images/phone768/dj_morange_videos768.jpg);}}

.space{
   margin-bottom: 9%;}

/*==== 5.9 BLOG - Thumbnails ===*/

.blogoben{
     background: rgb(180, 178, 147);}

.blogoben hr {
	clear: both;
	padding: 0;
    border: none;
    border-top: thick double #ffffff;
    color: white;
    text-align: center;
    margin-bottom: 49px;
    margin-top: 49px;}

.blogoben hr:before {
	content: 'Discjockey Closeups';
    display: inline-block;
    position: relative; 
    top: -0.7em;  
    font-size: 2.1em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 0.2em;
    background: rgb(180, 178, 147);}

.blog{
    border-top: none; 
    border-bottom: 2px solid rgb(221,210,190);}

.thumbnail{
    background-color: rgb(150, 153, 122);
    border: 2px solid rgb(221,210,190);
    display: inline-block;
    padding: 7px;
    margin-bottom: 49px;}

.thumbnail:hover{
    background-color: rgb(163, 164, 133); }

.thumbnail .caption{
    padding-top:5px;
    padding-bottom:5px;
}

.thumbnail .caption a{
    color: white;  
    font-size: 1.2em;
    letter-spacing: 0.06em;
    text-decoration: underline;}

/* ====== 6. Footer =====*/
footer{
   border-top: 2px solid rgb(180, 178, 147); }

footer hr {
	padding: 0;
    border: none;
    border-top: thick double #ffffff;
    color: white;
    text-align: center;
    margin: 0;}

footer .nav{
    text-transform: uppercase;
    font-family: 'Raleway', Tahoma, Arial, Sans-serif;
    padding-bottom: 15px;
    padding-top: 15px;
    background-color: rgb(180, 178, 147);
}

footer .nav-justified{
     border: none; }
    
footer .nav>li {
    border: none;}

footer .nav-item .nav-link{
    color:white;
}

/* ====== 7. Empfehlungen =====*/

.empfehlungenoben{
    border-top: 4px solid rgb(163, 164, 133);}

.empfehlungenoben hr{
	padding: 0;
    border:  3px solid rgba(163, 164, 133, 0.5);
    border-top: rgb(221,210,190);
    text-align: center;
    margin: 0;}

.empfehlungen{  
    padding: 0;
    margin: 0;
    padding-right: 2px;}

.empfehlungenunten{  
    padding: 0;
    margin: 0;
    padding-right: 2px;
    border-bottom: 80px solid rgb(150, 153, 122);}

.empfehlungen img{
border-top: 2px solid rgb(150, 153, 122); 
border-bottom: 2px solid rgb(150, 153, 122); 
border-left: 2px solid rgb(150, 153, 122); }

#mehrempfehlungen h3{
 font-size: 3em; }

/* ====== 8. Bilderseite =====*/
.anfang{
margin: 73% 5% 2% 0;
font-size: 2em;
font-weight: bold;}

.dark{
    text-shadow: 
        -1px 0 rgba(200, 200, 200, 0.5), 
        0 -1px rgba(200, 200, 200, 0.5),
        1px 0 rgba(200, 200, 200, 0.5),
        0 1px rgba(200, 200, 200, 0.5);}

#morange1 {
    background-image:url(../images/dj_morange_bilder_1480.jpg);
	background-repeat: no-repeat;
	background-size: cover; 
    border-bottom: 3px solid rgba(163, 164, 133, 0.5);}

@media screen and (max-width: 1199px){
    #morange1 {
     background-image:url(../images/medium1200/dj_morange_bilder_1200.jpg); } }
@media screen and (max-width: 991px){
    #morange1 {
     background-image:url(../images/small992/dj_morange_bilder_992.jpg);} }
@media screen and (max-width: 767px){
    #morange1 {
     background-image:url(../images/phone768/dj_morange_bilder_768.jpg); } }

#morange2,
#morange3,
#morange4{
	background-repeat: no-repeat;
	background-size: cover;   
    border-top: 3px solid rgb(180, 178, 147);
	border-bottom: 3px solid rgba(163, 164, 133, 0.5);}

#morange2{
    background-image:url(../images/dj_morange_hochzeit.jpg);}

@media screen and (max-width: 1199px){
    #morange2 {
     background-image:url(../images/medium1200/dj_morange_hochzeit1200.jpg); } }
@media screen and (max-width: 991px){
    #morange2 {
     background-image:url(../images/phone768/dj_morange_hochzeit768.jpg); } }
@media screen and (max-width: 767px){
    #morange2 {
     background-image:url(../images/phone768/dj_morange_hochzeit768.jpg); } }

#morange3{
    background-image:url(../images/dj_morange_disco.jpg);}

@media screen and (max-width: 1199px){
    #morange3 {
     background-image:url(../images/medium1200/dj_morange_disco1200.jpg);  } }
@media screen and (max-width: 991px){
    #morange3 {
     background-image:url(../images/small992/dj_morange_disco992.jpg);   } }
@media screen and (max-width: 767px){
    #morange3 {
     background-image:url(../images/phone768/dj_morange_disco768.jpg); }  }

#morange4 {
    background-image:url(../images/dj_morange_gallery.jpg);}

@media screen and (max-width: 1199px){
    #morange4 {
     background-image:url(../images/medium1200/dj_morange_gallery1200.jpg);} }
@media screen and (max-width: 991px){
    #morange4 {
     background-image:url(../images/small992/dj_morange_gallery992.jpg); }}
@media screen and (max-width: 767px){
    #morange4 {
     background-image:url(../images/phone768/dj_morange_gallery768.jpg); } }

.initiale{
    margin-top:15px;
}
.platten{
    font-size: 2em;
    margin: 23px 20px 10px 0;}

.phones{
    font-size: 3em;}

@media screen and (max-width: 991px) {
	.platten {
		font-size: 5em;} }
@media screen and (max-width: 767px) {
	.platten {
		font-size: 5em; } }

.zitate{
    background: rgb(180, 178, 147);
    border-top: 4px solid rgb(180, 178, 147);}

.border{
    border-top: 1px solid rgba(250,250,250,0.5);}

.guestbook{
    background: rgb(180, 178, 147); 
    border-bottom: 1px solid white;}

.ohne{
 border: none;}

.guestbook a{
    color: white;   
    text-decoration: underline;
    font-size: 1.5em;
    margin-top: 14px; 
    margin-right: 15px;
    letter-spacing: 0.03em;}

.guestbook hr {
	clear: both;
	padding: 0;
    border: none;
    border-top: thick double rgba(250,250,250,0.78);
    color: white;
    text-align: center;
    margin-bottom: 9px;
    margin-top: 5px;}

blockquote {
    border: none;
    margin: 10px 0 0 0;
    font-size: 1.2em;}

blockquote p{
    margin-bottom: 0;}

blockquote a:hover, blockquote footer, blockquote p a{
 color: white;}

blockquote footer::before{
 content: ''; }

cite{
    float: right; 
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: 0.03em;}

.bilderoben{
    background: rgb(180, 178, 147);
    border-top: 1px solid rgba(250,250,250,0.5);}

.bilderoben hr {
	clear: both;
	padding: 0;
    border: none;
    border-top: thick double #ffffff;
    color: white;
    text-align: center;
    margin-bottom: 39px;
    margin-top: 49px;}

.bilderoben hr:before {
	content: 'DJ morange Bildergalerien';
    display: inline-block;
    position: relative; 
    top: -0.7em;  
    font-size: 2.1em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 0.2em;
    background: rgb(180, 178, 147);}

.zier {
    background:  rgb(180, 178, 147); 
    border-bottom: 1px solid white;}

.zier hr, .hoerer hr {
	clear: both;
	padding: 0;
    border: none;
    border-top: thick double #ffffff;
    text-align: center;
    margin-bottom: 45px;
    margin-top: 20px;
    color: white;}

.zier hr:before {
    font-family: 'fontello';
	content: "\e806";
    display: inline-block;
    position: relative; 
    top: -0.8em;  
    font-size: 3em;
    font-weight: normal;
    padding: 0 0.2em;
    background: rgb(180, 178, 147);}

.hoerer hr:before{
    content: "\e805";
    font-size: 3.4em;}

.thumbnail{
    padding-bottom: 0;   
}

.disc hr{
    margin-top: 23px;}

/*==== 8.1 Technikfotos ====*/

.unten {
    border-bottom: 1px solid rgb(221,210,190);
    padding-bottom: 10px;}

#technik{
     border-top: 4px solid rgb(163, 164, 133);}

#bildertechnik, #mehrempfehlungen, #technik{
    margin-top:20px;
    --bs-accordion-border-color:none;
    border:none;
    --bs-accordion-bg: transparent;
}

#bildertechnik .accordion-button, #mehrempfehlungen .accordion-button, #technik .accordion-button{
    color:white;
    font-size: 1.4em;
    text-align:center;
    justify-content: center;
    text-decoration: underline;
	text-transform:uppercase;
}
#bildertechnik .accordion-button:not(.collapsed), #mehrempfehlungen .accordion-button:not(.collapsed), #technik .accordion-button:not(.collapsed){
    background-color: none;
    --bs-accordion-active-bg:none;
}

#bildertechnik .accordion-button::after, #mehrempfehlungen .accordion-button::after, #technik .accordion-button::after  {
   display:none;
	/*position: absolute;
    right: 1rem;*/}

.technik{
    font-size: 3.3em;
    font-weight: 700;}

figure{
    position: relative;}

figcaption{
    position: absolute;
    bottom: 20px;
    right: 0;
    left: 0;
    font-size: 2em;
    margin-left: 2px;
    background: black;
    opacity: 0;
    color:white;
    -webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;}

@media screen and (max-width: 767px){
    figcaption {
     font-size: 2em;}  
}

figure:hover figcaption{
    display: block;
    opacity: 0.8;}

/*=== 9. VIDEOS-Seite ===*/
#video1{
  background: rgb(180, 178, 147);}

.erstes{
    margin-top: 106px;}

.tube{
    font-size: 3em;
    margin: 22px 20px 10px 20px;
    color: white;}

.topics {
    color: white;
    font-size: 2.3em; }

.topics:hover,
.topics:active{
    color: white;}

.tecvidunten{
    padding: 45px 0; 
	font-size: 0.8em;
    text-transform: uppercase;}
.ratio{
	width:90%;
	margin-left:auto;
	margin-right:auto;
}

/*====== 10. MUSIK - Seite ====*/
.stile h3{
 font-weight: 700;
 padding: 20px 0 23px 0;
 font-size: 1.5em;}

.stile h4{
    padding: 10px 0; }

.nondeco{
    font-size: 1em; 
    margin-top: 20px;}

span.bigger{
    font-size: 2.5em;
    padding-right: 3px;}

#musikoben{
    background-image:url(../images/musikseite.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 3px solid rgba(163, 164, 133, 0.5);  }

@media screen and (max-width: 1199px){
    #musikoben {
     background-image:url(../images/medium1200/musikseite1200.jpg); } }
@media screen and (max-width: 991px){
    #musikoben {
     background-image:url(../images/small992/musikseite992.jpg); } }
@media screen and (max-width: 767px){
    #musikoben {
     background-image:url(../images/phone768/musikseite768.jpg); } }

.ubervid{
    border-top: 1px solid rgb(221,210,190);}

.musikcd{
    font-size: 1.5em;
    padding: 0 8%; }

.musiklinks a,
.musiklinks a:hover,
.musiklinks a:visited{
    color: white;
    font-size: 2em;
    text-decoration: underline;
    padding: 2% 3% 2% 0;}

/*====== 11. Hochzeit-Seite ======*/
#hochzeitsteaser{
    background-image:url(../images/hochzeitheader.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 3px solid rgba(163, 164, 133, 0.5);}

@media screen and (max-width: 1199px){
    #hochzeitsteaser {
     background-image:url(../images/medium1200/hochzeitheader1200.jpg); } }
@media screen and (max-width: 991px){
    #hochzeitsteaser {
     background-image:url(../images/small992/hochzeitseite992.jpg); } }
@media screen and (max-width: 767px){
    #hochzeitsteaser {
     background-image:url(../images/phone768/hochzeitseite768.jpg); }}

#paar, #tanzen, #heiraten {
  background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 3px solid rgba(163, 164, 133, 0.5);}

#paar{
    background-image:url(../images/hochzeitspaar.jpg);}

@media screen and (max-width: 1199px){
    #paar {
     background-image:url(../images/medium1200/hochzeitspaar1200.jpg);}}
@media screen and (max-width: 991px){
    #paar {
     background-image:url(../images/small992/hochzeitspaar992.jpg); }}
@media screen and (max-width: 767px){
    #paar {
     background-image:url(../images/phone768/hochzeitspaar768.jpg); }}

#tanzen{
    background-image:url(../images/hochzeitstaenzer.jpg);}

@media screen and (max-width: 1199px){
    #tanzen {
     background-image:url(../images/medium1200/hochzeitstaenzer1200.jpg);}}
@media screen and (max-width: 991px){
    #tanzen {
     background-image:url(../images/small992/hochzeitstaenzer992.jpg); } }
@media screen and (max-width: 767px){
    #tanzen {
     background-image:url(../images/phone768/hochzeitstaenzer768.jpg); } }

#heiraten{
    background-image:url(../images/heiraten.jpg);}

@media screen and (max-width: 1199px){
    #heiraten {
     background-image:url(../images/medium1200/heiraten1200.jpg); } }
@media screen and (max-width: 991px){
    #heiraten {
     background-image:url(../images/small992/heiraten992.jpg); } }
@media screen and (max-width: 767px){
    #heiraten {
     background-image:url(../images/phone768/heiraten768.jpg); } }

.check{
    background: rgb(180, 178, 147);
    border-top: 1px solid rgba(250,250,250,0.5); 
    padding-bottom: 23px;}

.check p,
.referenzenunten p{
    font-size: 1em;
    letter-spacing: 1px;
    line-height: 1.45em;
    padding-left: 30px;}

.referenzenunten span, .check span{
 margin-right: 10px; }

.erstezeile{
 padding-left: 10px; }

.abstandunten{
 margin-bottom: 60px;}

.unten{
 padding-bottom: 20px;}

/*=== 12. REFERENZ - Seite ====*/

#referenzerstes{
   background-image:url(../images/referenzen.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 3px solid rgba(163, 164, 133, 0.5); }

@media screen and (max-width: 1199px){
    #referenzerstes {
     background-image:url(../images/medium1200/referenzen1200.jpg);  } }
@media screen and (max-width: 991px){
    #referenzerstes {
     background-image:url(../images/small992/referenzen992.jpg); } }
@media screen and (max-width: 767px){
    #referenzerstes {
     background-image:url(../images/phone768/referenzen768.jpg); } }

#refunten{
   background-image:url(../images/referenzunten.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 3px solid rgba(163, 164, 133, 0.5);
    border-top:3px solid rgba(163, 164, 133, 0.5);}

@media screen and (max-width: 1199px){
    #refunten {
     background-image:url(../images/medium1200/referenzunten1200.jpg); }}
@media screen and (max-width: 991px){
    #refunten {
     background-image:url(../images/small992/referenzunten992.jpg); } }
@media screen and (max-width: 767px){
    #refunten {
     background-image:url(../images/phone768/referenzunten768.jpg); } }

.referenzpage {
padding-top: 10px;
background: rgb(150, 153, 122);}

.ohnemit{
 padding-top: 40px;  
 padding-bottom: 40px; }

.ohnemit hr:before{
    font-family: 'fontello';
	content: "\e806";
    display: inline-block;
    position: relative; 
    top: -0.8em;  
    font-size: 5em;
    font-weight: normal;
    padding: 0 0.2em;
    background: rgb(180, 178, 147);}

.referenzblogs{
    background: rgb(150, 153, 122);
    border-top: 3px solid rgba(163, 164, 133, 0.5); 
    padding-top: 50px;}

.referenzblogs hr {
	clear: both;
	padding: 0;
    border: none;
    border-top: thick double #ffffff;
    text-align: center;
    margin-bottom: 45px;
    margin-top: 0;
    color: white;}

.referenzblogs hr:before {
    content: "Mehr Kunden und Locations in den Bildergalerien";
    display: inline-block;
    position: relative; 
    top: -0.8em;  
    font-size: 2em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 0.2em;
    background: rgb(150, 153, 122);}

.refblogunten{
    border: none;
    border-bottom: 1px solid rgb(180, 178, 147); }

.refblogunten hr:before{
    font-family: 'fontello';
	content: "\e805";
    font-size: 3.5em;
    font-weight: normal;}

/*==== 13. Gästebuch===*/

#video_background {
	position: fixed;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: 0;
	overflow: hidden;}

.buch{
    padding-top: 150px;
    position: relative;}

.buch h1{
 font-size: 3.5em;
 padding-bottom: 50px;}

.buch p,
.zentral p{
    margin-left: auto;
    margin-right:auto;
    text-align: center;}

.gblistitem{
    border:  1px solid rgb(221,210,190);
    border-radius: 5px;
    background: rgb(163, 164, 133);
    margin-bottom: 10px;
    margin-top: 20px;
    padding-top: 30px;}

.entry{
    font-size: 1.2em;   
    letter-spacing: 0.04em;
    border-left: 2px solid white;}

p.entry{
    text-align: left;
    padding-left: 20px;}

.gblist{
    /*border:  1px solid rgb(221,210,190);*/
    border-radius: 5px;
    background: transparent;
    margin-bottom: 10px;
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 1em;
    line-height: 2em;
    letter-spacing: 0.08em;}

.form-horizontal .form-group{
 margin-left: 0;  
 margin-right: 0;
 margin-top: 10px;}

.morangegb label{
 font-size: 1.6em; }

.btn-gb,
.btn-gb:hover{
    padding: 5px; 
    border: 1px solid rgb(221,210,190)}

.btn-gb:hover{
    background: rgb(163, 164, 133);
    border-radius: 4px;}

.fixed-bottom{
   position: fixed;
  right: 0;
  left: 0;
    bottom: 0;
  z-index: 1030;  }

.gbunten{
 margin-top: 70px;}

.eintrag,
.eintrag:hover{
    font-size: 1.5em;
    margin-bottom: 20px;
    padding: 5px 7px;
    margin-left: auto;
    margin-right: auto;}

a.eintrag {
 position: relative;   }

@media screen and (max-width: 991px){
    .buch{
     position: static;}  
    #video-background{
     display: none;}
    .container-fluid{
        background: url(../images/small992/G_992.jpg) repeat-y fixed;}
}

@media screen and (max-width: 767px){
    #video-background{
     display: none;}
    .container-fluid {
        background: url(../images/phone768/G_768.jpg) repeat-y fixed;}
}

.big,
.big:hover{
 font-size: 1.6em;
    text-transform: uppercase;}

p#footer a.login,
p#footer a.login:hover,
a.login,
a.login:hover{
    color: white;
    text-decoration: none;}

p#footer{
 margin-top: 30px;   }

.form-control{
 width: 80%;   }

@media screen and (max-width: 991px){
    .form-control{
 width: 90%;   
}
}
@media screen and (max-width: 768px){
    .form-control{
 width: 100%;   }
}

.admin{
 margin-top: 40px;   }

/* ==== 14. 404 Site ====*/

#fehler{
   background-image:url(../images/404.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 3px solid rgba(163, 164, 133, 0.5); }

@media screen and (max-width: 1199px){
    #fehler {
     background-image:url(../images/medium1200/404_1200.jpg);  } }
@media screen and (max-width: 991px){
    #fehler {
     background-image:url(../images/small992/404_922.jpg); } }
@media screen and (max-width: 767px){
    #fehler {
     background-image:url(../images/phone768/404_768.jpg); } }

#fehler h2 {
    font-size: 5em;
    padding-top: 30%;
}

#fehler p{
    text-align: center;
    font-size: 2.4em; 
    padding: 1% 5%;
}

#fehler p:last-child {
    margin-bottom: 40%;
}

#fehler a{
    color: white;
    text-transform: uppercase;
}

#fehler a:hover {
    text-decoration: none;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

.fehler{
    background-color: rgb(163, 164, 133);
    padding: 4% 0;
}

.fehler hr {
	clear: both;
	padding: 0;
    border: none;
    border-top: thick double #ffffff;
    text-align: center;
    margin-bottom: 45px;
    margin-top: 10px;
    color: white;
}

.fehler hr:before {
    font-family: 'fontello';
	content: "\e806";
    display: inline-block;
    position: relative; 
    top: -0.8em;  
    font-size: 5em;
    font-weight: normal;
    padding: 0 0.2em;
    background: rgb(163, 164, 133);
}
/* ==== 15. Impressum und Kontakt ====*/
.daten{
    padding-left:20px;
}
.daten ul{
    padding-left:20px;
}
#impressum, #kontakt{
    margin: 20px;
}

address{
    font-size: 1.8em;
    color: white;
    text-align:left;
font-weight: normal;}

address a,
address a:hover,
address a:visited{
    color: white;
    text-decoration: underline;}

#impressum p{
   text-align: left; 
   line-height: 18px;
   font-weight: normal;
}
#impressum h5{
    font-size:2em;
    font-weight: bold;
    margin-top: 30px;
}
#kontakt h3{
    font-size: 2.5em;
}
#kontakt p{
    font-size: 1.8em;
}
#kontakt a{
    color: white;
}
#impressumerstes{
   background-image:url(../images/impressum_morange.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 3px solid rgba(163, 164, 133, 0.5); }

@media screen and (max-width: 1199px){
    #impressumerstes {
     background-image:url(../images/medium1200/impressum_morange1200.jpg);  } }
@media screen and (max-width: 991px){
    #impressumerstes {
     background-image:url(../images/small992/impressum_morange992.jpg); } }
@media screen and (max-width: 767px){
    #impressumerstes {
     background-image:url(../images/phone768/impressum_morange768.jpg); } }

#kontakterstes{
   background-image:url(../images/dj_morange_muenchen.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 3px solid rgba(163, 164, 133, 0.5); }

@media screen and (max-width: 1199px){
    #kontakterstes {
     background-image:url(../images/medium1200/dj_morange_muenchen1200.jpg);  } }
@media screen and (max-width: 991px){
    #kontakterstes {
     background-image:url(../images/small992/dj_morange_muenchen992.jpg); } }
@media screen and (max-width: 767px){
    #kontakterstes {
     background-image:url(../images/phone768/dj_morange_muenchen768.jpg); } }

/* FAQa */

.faqsh2{
	font-size:1.2em;
	margin-top:2em;
}
.faqsh2oben{
	font-size:1.2em;
}
.accordion-body p{
	font-size: 1em !important;
	color:white !important;
}
.accordion-body li{
	color:white;
}
.accordion.faqs{
    margin-top:20px;
    --bs-accordion-border-color:#b4b293;
    border:none;
    --bs-accordion-bg: #b4b293;
}

.accordion.faqs .accordion-button{
	color:white;
	font-weight:bold;
}
.accordion.faqs .accordion-button:not(.collapsed){
	background: none;
}

.accordion.faqs .accordion-button::after{
	filter: invert(1);
	background-image:transparent;
}

.ohnebild{
	margin-top: 80px;
}
#faqerstes{
   background-image:url(../images/dj_morange_faq_1480.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 3px solid rgba(163, 164, 133, 0.5); }

@media screen and (max-width: 1199px){
    #faqerstes {
     background-image:url(../images/medium1200/dj_morange_faq_1200.jpg);  } }
@media screen and (max-width: 991px){
    #faqerstes {
     background-image:url(../images/small992/dj_morange_faq_992.jpg); } }
@media screen and (max-width: 767px){
    #faqerstes {
     background-image:url(../images/phone768/dj_morange_faq_768.jpg); } }