:root {
     --color-brand: #cd8035;
}
   

body {
    width: 100%;
    margin: 0 auto;
    font-family: 'din-2014'!important;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.5;
    color: #302822;
    text-align: left;
    background-color: #fffcfa;
    
    }

.container {
    max-width: 1400px;
    margin: 0 auto;  
   
}

.container-small {
    max-width: 800px;
    margin: 0 auto;  
   
}

.container-big {
    max-width: 1600px;
    margin: 0 auto;  
   
}

.brandmedia-content {
    max-width: 1400px; 
    margin: 0 auto;
  
}

.row {
    margin-right: 0px ;
    margin-left: 0px;
}

.spacer50px {
    margin-top: 50px;
}

.spacer25px {
    margin-top: 25px;
}

.spacer5px {
    padding-top: 5px;
}

.padding50px {
    padding: 50px;
}

.padding25px {
    padding: 25px;
}

.padding15px {
    padding: 15px;
}

@media (max-width: 768px) {
    .padding0px-mobile {
        padding-left: 0px !important;
          }
 }

#footer
     {
      padding-top: 40px;
      padding-bottom: 10px;
            
 }

/* - alt - 
 #footer{
      background-color: #cd8035;
      color: #eae8e7;
  }
*/

#footer{
      background-color:#f4f1ef;;
      color: #302822;
  }

hr {
  border-top: 3px solid  var(--color-brand);
}

/*
.button-box {
    position: relative;
    margin: 10px;
    height: 90%;
    width: 90%;
   }
    
 .button-text {
    position: absolute;
    top: 5px;
    left: 50px;
    width: 250px;
    height: 150px;
    margin: 10px;
    padding: 10px;
    background-color: #20537F;
    opacity: 0;
   }

 .box-bg-image {
    background-image: url('images/bg-weiss.PNG'); 
    padding: 10px;
 }

*/

.bg-orange {
  background-color:  var(--color-brand);
 }

.bg-grey {
  background-color:#f4f1ef;
}  

.bg-white, .bg-light {
    background-color: #fbfcfe;
}  

.bg-red-transparent {
     background-color: rgba(217, 33, 0, 0.5);
}

a {
   color:  var(--color-brand);
   text-decoration: none; 
}  

a:link, a:visited {
   text-decoration: none;
}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'din-2014'!important;
    font-weight: 300;
    line-height: 1.1;
    color:#302822;
    text-align: left;
}

/*
#intro,#content
   {
    margin-top: 50px;
    margin-bottom: 15px;
   }
*/
.text-orange {
    color: var(--color-brand);
}

.text-white {
    color: #fbfcfe;
}

.text-grey {
    color: #302822;
}

.brandmedia-headline {
    margin-top: -10px; 
    margin-bottom: 20px
}

/* die Headlines im Header / Intro */
.headline-brandmedia {
    margin-top: 200px;
    font-size: 300%;
    font-weight: 700;
}

.headline-brandmedia-mobil {

    margin-top: 50px;
    font-size: 200%;
    font-weight: 700;
}

.filmkategorie-text-decoration {
    text-decoration: underline;
    text-decoration-color:  var(--color-brand);
    text-underline-position: under; 
    text-decoration-thickness: 2px;
}

/* ---------------------- */

/*------ Button ---------*/
.btn { 
    font-size: 1.7rem;
    }

.btn-site {
    background-color: var(--color-brand);
    background-image: none;
    font-size: large;
    color:  #f3f3f3; 
    border-radius: 15px;
    margin-bottom: 10px;
}

  
.btn-site:hover {
    background-color: var(--color-brand);
}    

.btn-site-pagination {
    background-color: var(--color-brand);
    background-image: none;
    font-size: large;
    color:  #f3f3f3; 
    height: 30px;
    width: 30px;
    border-radius: 15px;
    margin-bottom: 10px;
}

.btn-contact {
    background-color:  var(--color-brand);
    border-radius: 0;
    min-width: 350px;
    margin: 0 auto;
    font-size: 120%;
    padding: 10px;
    color: #f3f3f3; /*text-light*/
}
/*-------  Button ---------*/

/*-------  Kontaktforular ---------*/

.checkbox input[type=checkbox] {
    margin-top: 8px;
}

.contactform-background {
  background-color: #f3f3f3;
  color: rgb(162, 160, 160);
  width: 100%;
  margin: 0 auto;
  padding: 5px;
  border: 0px;
}

/*-------  Kontaktforular ---------*/

/* Navigation Menu */

.navbar {
  margin-bottom: 0px;

}
@media (max-width: 1400px) {
 .navbar-nav {               
  max-width: 800px;
  margin: 30px 0px 20px 0px;
   }
}

@media (min-width: 1400px) {
  .navbar-nav {               
  max-width: 800px;
  margin: 30px 500px 20px 0px;
   }
 }



.navbar-default {
background-color:  #fbfcfe; 
border: none;
} 

.navbar-toggle {
  margin-top: 8px;
  border: 2px solid var(--color-brand);
  
}

.navbar-toggle .icon-bar {
    background-color:  var(--color-brand) !important;
    width: 30px;
    height: 4px;
}

/*

@media (min-width: 992px) {
    .navbar-nav {
        padding-right: 80px;
    }
    
    .navigation-submenu {
        float:right;
        padding-right: 90px;
    } 
    .navigation-mobile {
        display:none;
    }  
}    

 @media (min-width: 576px) and (max-width: 992px){
    .navigation-desktop {
        display:none; 
    } 
  }

@media (max-width: 576px) { 
    .navigation-desktop {
        display:none; 
    }       
  }
*/

/* Navigation Menu */

/* Intro mobile und Desktop */
  @media (min-width: 768px) {
    /* breite Browserfenster */
      .intro-mobile, .startseite-mobile, .news-einzelseite-mobile {
          display:none;
      }
 }
 @media (max-width: 768px) {
    /* breite Browserfenster */
      .intro-desktop, .startseite-desktop, .news-einzelseite-desktop {
          display:none;
      }
 }
 
/* Intro mobile und Desktop */

/* Teamseite */
 
.vita-box, .aktuell-box {
    position: relative;
 
   }
    
 .vita-box-text, .aktuell-box-text {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: 25px;
    
 }
   
  .vita-box-text:hover, .aktuell-box-text:hover  {
    background: rgba(0,0,0,0.4);
    transition: all 0.6s ease-in-out 0s;
   }

  .vita-text, .aktuell-text {
  color:#f3f3f3; 
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
   
}

 .vita-text:hover, .aktuell-text:hover {
  opacity: 1;
  transition: all 0.6s ease-in-out 0s;
   
}


/* von Werk 7 Startseite  */

.headline-startseite {
    margin-top: 200px;
    font-size: 50px;
}



.intro-space-orange {
     background-color: rgba(217,79,0,0.5);
}

.startseite-textbox, .einzelseite-textbox {
    min-height: 200px;
    width: 100%;
    background-color: rgba(7, 122, 223, 0.5);
    color: white;
    padding: 15px;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;

}

.startseite-textbox h2 {
    color: white;
   
}
.einzelseite-image {
    padding: 15px;
    margin: 15px;
    background-color: blueviolet;
}  

.einzelseite-textbox {
    min-height: 300px;
    width: 100%;
    background-color: rgba(217,79,0,1);
    color: white;
    padding: 15px;
    margin:15px;
}

.einzelseite-textbox-grey {
    min-height: 300px;
    width: 100%;
    background-color:#6B5C4F;
    color: white;
    padding: 15px;
    margin:15px;
}

.startseite-textbox-headline h3, .startseite-textbox-grey h1, .startseite-textbox-grey h2, .startseite-textbox-grey h3, .startseite-textbox-grey h4, .startseite-textbox-grey h5, .startseite-textbox-grey h6,
.startseite-textbox-grey a, .startseite-textbox-grey li, 
.einzelseite-textbox h1, .einzelseite-textbox h2, .einzelseite-textbox h3, .einzelseite-textbox h4, .einzelseite-textbox h5, .einzelseite-textbox h6,
.einzelseite-textbox a, .einzelseite-textbox li,
.einzelseite-textbox-grey h1, .einzelseite-textbox-grey h2, .einzelseite-textbox-grey h3, .einzelseite-textbox-grey h4, .einzelseite-textbox-grey h5,
.einzelseite-textbox-grey h6, .einzelseite-textbox-grey a, .einzelseite-textbox-grey li
 {
    color: white;
   
}


/* Einzelseiten Liste  */

 .list-item-title {
    position: relative;
    overflow: hidden;
    padding: 10px 40px 2px 10px;
    margin-top: 5px;
    margin-bottom: 10px;
 }

 .glyphicon-circle-arrow-down, .list-arrow-down { 
    color:  rgba(217,79,0,1);
    font-size: 120%;
    position: absolute;
    top: 12px;
    right: 0px;
    margin: auto;
}


.list-counter {
   /* float: left; */
    position: absolute;
    top: 12px;
    left: 10px;
    background-color: rgba(217,79,0,1);
    color: white;
    width: 35px;
    text-align: center;
    padding: 7px;
}

.list-content {
    margin-left: 60px;
}


.list-teaser {
  /*  float: left; */
    color: grey;
   
}