/* COLOUR REFERNCE

Text Color Red:          #A12025
Text Color Gray:         #767777

Background - Footer:     #75776E
Background - Header:     #B6B6AF
Background - Navigation: #CECDBB
Background - Content:    #D7D5C5
Background - Content-R:  #E4E2D7
*/


/* common
-------------------------------------------------- */

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: Arial, serif;
  /* Margin bottom by footer height */
  margin-bottom: 30px;
  background: #D7D5C5;
  min-width: 320px;
  /* don't hide browser scrollbar */
  overflow-y: scroll;
}

.container {
  max-width: 1200px;
}


/* Page Header - Banner
-------------------------------------------------- */

.border-top {
  height: 20px;
  background-color: #75776E;
}

header {
  height: 450px;
  background: #B6B6AF;
}

#banner-content {
  height: 100%;
  position: relative;
  /* Add top space to the image */
  padding-top: 10px;
  background-origin: content-box;
  /* Fit the Image into the box */
  background-size: contain;
}

.banner-img-01 {
  background: #B6B6AF url('../img/carsten-stein-01.png') 100% no-repeat;
}

.banner-img-02 {
  background: #B6B6AF url('../img/carsten-stein-02.png') 100% no-repeat;
}

.banner-img-03 {
  background: #B6B6AF url('../img/carsten-stein-03.png') 100% no-repeat;
}

#banner-logo {
  background: url('../img/logo-badge.png') 100% no-repeat;
  margin-top: 70px;
  width: 500px;
  height: 230px;
  background-size: contain;
}

#banner-logo img {
  width: 100%;
}

.brand-color {
  color: #A12025;
}


/* Navigation
-------------------------------------------------- */

.navbar {
  /* Positioning navigationbar - Desktop View*/
  position: absolute;
  width: 70%;
  bottom: 20px;
}

.navbar-default .navbar-nav > li > a {
  /* styling default navigaiton elements*/
  color: black;
  padding: 10px;
  background: rgba(182, 182, 174, 0.5);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  /* styling mouse over effect */
  color: #A12025;
  background-color: rgba(255, 255, 255, 0.2);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  /* styling selected element */
  font-weight: bold;
  color: #A12025;
  background-color: #B6B6AF;
}

.navbar-default {
  /* styling default layout */
  background-color: #B6B6AF;
  border: none;
  font-size: 1.3em;
  background-color: rgba(0, 0, 0, 0.0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}


/* Page Footer
-------------------------------------------------- */

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  color: white;
  height: 30px;
  background-color: #75776E;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

.footer ul {
  padding-top: 5px;
  padding-bottom: 5px;
}

.footer li {
  padding-left: 10px;
  padding-right: 10px;
  list-style: none;
  float: left;
  border-right: solid 1px;
}


/*
--------------------------------------------------
--------------------------------------------------
------- Page - Content Common
--------------------------------------------------
--------------------------------------------------
--------------------------------------------------
*/


/*
--------------------------------------------------
------- Content main
--------------------------------------------------
*/

.page-content {
  padding-top: 50px;
  background-color: #D7D5C5;
}

.bogen-grau {
  background: url('../img/bogen_grau_grau.png') 3px 0px no-repeat;
  background-size: auto 460px;
  min-height: 460px;
}

.bogen-rot-grau {
  background: url('../img/bogen_grau_rot.png') 0px 0px no-repeat;
  background-size: auto 460px;
  min-height: 460px;
}

.bogen-rot {
  background: url('../img/bogen_rot.png') 3px 0px no-repeat;
  background-size: 56px 75px;
}


/*
--------------------------------------------------
------- Special list elements
--------------------------------------------------
*/

.list-aligned {
  margin-left: 36px;
  margin-bottom: 10px
}

.list-aligned td {
  vertical-align: top;
  padding: 3px;
}

.list-aligned td:first-child {
  white-space: nowrap;
}


/*
--------------------------------------------------
------- Content left
--------------------------------------------------
*/

.content-left h2 {
  font-weight: bold;
  height: 50px;
  color: white;
  font-size: 1.8em;
  padding-left: 30px;
  padding-top: 10px;
  margin-top: 10px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

.content-left {
  margin-top: 0px;
  padding-top: 0px;
  padding-right: 60px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

.content-left li {
  padding-top: 5px;
  padding-bottom: 5px;
}

.content-left {
  color: #767777;
  padding-left: 25px;
}

.content-left h3 {
  margin-top: 0px;
  font-size: 1.4em;
}

.list-wide-gap li {
  padding-top: 3px;
  padding-bottom: 30px;
}


/*
--------------------------------------------------
------- Content right
--------------------------------------------------
*/

.content-right {
  background-color: #E4E2D7;
  border: solid 2px #767777;
  color: #767777;
  min-height: 300px;
  margin-top: 40px;
  padding: 8px 30px 30px 30px;
  margin-bottom: 50px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

.content-right h2 {
  font-size: 1.5em;
  font-weight: bold;
  color: #A12025;
}

.content-right h3 {
  margin-top: 0px;
  font-size: 1.4em;
}

.content-right ul {
  margin-top: 20px;
  padding-left: 18px;
}

.content-right li {
  padding-top: 5px;
  padding-bottom: 5px;
}


/*
--------------------------------------------------
------- Ray - Text
--------------------------------------------------
*/

.ray-text-1 {
  color: #767777;
  font-size: 1.3em;
  white-space: nowrap;
}

.ray-text-2 {
  color: black;
  font-weight: bold;
  font-size: 1.3em;
  white-space: nowrap;
}

#ray_01 {
  position: absolute;
  margin-top: 20px;
  margin-left: 70px;
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
}

#ray_02 {
  position: absolute;
  margin-top: 50px;
  margin-left: 85px;
  -moz-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
}

#ray_03 {
  position: absolute;
  margin-top: 115px;
  margin-left: 110px;
  -moz-transform: rotate(-17deg);
  -ms-transform: rotate(-17deg);
  -o-transform: rotate(-17deg);
  -webkit-transform: rotate(-17deg);
}

#ray_04 {
  position: absolute;
  margin-top: 145px;
  margin-left: 115px;
  -moz-transform: rotate(-12deg);
  -ms-transform: rotate(-12deg);
  -o-transform: rotate(-12deg);
  -webkit-transform: rotate(-12deg);
}

#ray_05 {
  position: absolute;
  margin-top: 200px;
  margin-left: 119px;
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
}

#ray_06 {
  position: absolute;
  margin-top: 225px;
  margin-left: 120px;
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(2eg);
  -o-transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
}

#ray_07 {
  position: absolute;
  margin-top: 320px;
  margin-left: 105px;
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -o-transform: rotate(18deg);
  -webkit-transform: rotate(18deg);
}

#ray_08 {
  position: absolute;
  margin-top: 333px;
  margin-left: 100px;
  -moz-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -o-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
}

#ray_09 {
  position: absolute;
  margin-top: 420px;
  margin-left: 70px;
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
}

#ray_10 {
  position: absolute;
  margin-top: 395px;
  margin-left: 70px;
  -moz-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  -o-transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
}


/*
--------------------------------------------------
------- Accordion - Text
--------------------------------------------------
*/

.accordion-headline {
  margin-top: 50px;
  height: 50px;
  color: white;
  font-size: 1.8em;
  padding-left: 50px;
  padding-top: 0px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

#panel_01 {
  width: 500px;
  margin-left: 60px;
}

#panel_02 {
  width: 500px;
  margin-left: 80px;
}

#panel_03 {
  width: 500px;
  margin-left: 100px;
}

#panel_04 {
  width: 500px;
  margin-left: 100px;
}

#panel_05 {
  width: 500px;
  margin-left: 80px;
}

#panel_06 {
  width: 500px;
  margin-left: 60px;
}

#panel_07 {
  width: 500px;
  margin-left: 40px;
}

.panel-heading {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background-color: #E4E2D7 !important;
  color: #767777 !important;
}

.panel {
  padding: 5px;
  background-color: transparent;
  border: none !important;
  box-shadow: none;
}

.panel-body {
  color: #767777 !important;
  border: none !important;
}

.panel-body-text {
  display: list-item;
  margin-left: 30px;
}

.panel-title a {
  text-decoration: none;
  display: list-item;
  margin-left: 30px;
}


/*
--------------------------------------------------
--------------------------------------------------
------- MEDIA - CONFIGURATION
--------------------------------------------------
--------------------------------------------------
--------------------------------------------------
*/


/*
--------------------------------------------------
-- Landscape tablets and medium desktops
--------------------------------------------------
*/

@media (min-width: 992px) {
  #banner-content {
    background-position: 80%;
  }
}


/*
--------------------------------------------------
-- Portrait tablets and small desktops
--------------------------------------------------
*/

@media (min-width: 768px) and (max-width: 991px) {
  #banner-logo {
    width: 405px;
  }
  .navbar {
    left: -30px;
  }
}


/*
--------------------------------------------------
--  Landscape phones and portrait tablets
--------------------------------------------------
*/

@media (max-width: 767px) {
  /*767*/
  /* Page Header - Banner - Logo
    -------------------------------------------------- */
  body {
    /* Margin bottom by footer height */
    margin-bottom: 110px;
  }
  header {
    height: 400px;
  }
  #banner-content {
    padding-top: 50px;
  }
  #banner-logo {
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: #B6B6AF url('../img/logo-badge-mobile.png') 100% no-repeat;
    margin-bottom: 0px;
    width: 100%;
    height: 80px;
    background-size: contain;
  }
  /* Navigation
    -------------------------------------------------- */
  .navbar {
    /* Positioning navigationbar - mobile view*/
    position: absolute;
    width: 70%;
    top: 0px;
    right: 0px;
    width: 100%;
  }
  .navbar-nav {
    margin-top: -3px;
    background-color: #B6B6AF;
  }
  .navbar-nav li {
    border-bottom: solid 1px #767777;
    padding-left: 5px;
  }
  .footer {
    text-align: right;
    height: 110px;
  }
  .footer li {
    float: none;
    border: none;
  }
  .content-left {
    padding-bottom: 50px;
    margin-bottom: 50px;
  }
  /* accordion
    -------------------------------------------------- */
  #panel_01 {
    width: 350px;
  }
  #panel_02 {
    width: 350px;
  }
  #panel_03 {
    width: 350px;
  }
  #panel_04 {
    width: 350px;
  }
  #panel_05 {
    width: 350px;
  }
  #panel_06 {
    width: 350px;
  }
  #panel_07 {
    width: 350px;
  }
}


/*
--------------------------------------------------
------  media Phone
--------------------------------------------------
*/

@media (max-width: 573px) {
  /* Page Header - Banner - Logo
-------------------------------------------------- */
  /* accordion
    -------------------------------------------------- */
  .bogen-rot-grau {
    background: url('../img/bogen_rot.png') 3px 0px no-repeat;
    background-size: 56px 75px;
  }
  #panel_01 {
    width: 330px;
    margin-left: 0px;
  }
  #panel_02 {
    width: 330px;
    margin-left: 0px;
  }
  #panel_03 {
    width: 330px;
    margin-left: 0px;
  }
  #panel_04 {
    width: 330px;
    margin-left: 0px;
  }
  #panel_05 {
    width: 330px;
    margin-left: 0px;
  }
  #panel_06 {
    width: 330px;
    margin-left: 0px;
  }
  #panel_07 {
    width: 330px;
    margin-left: 0px;
  }
}


/*
--------------------------------------------------
------  media small Phone
--------------------------------------------------
*/

@media (max-width: 370px) {
  /* Page Header - Banner - Logo
-------------------------------------------------- */
  .ray-text-1 {
    font-size: 1.1em;
  }
  .ray-text-2 {
    font-size: 1.1em;
  }
  #ray_01 {
    margin-left: 50px;
  }
  #ray_02 {
    margin-left: 65px;
  }
  #ray_03 {
    margin-left: 90px;
  }
  #ray_04 {
    margin-left: 95px;
  }
  #ray_05 {
    margin-left: 99px;
  }
  #ray_06 {
    margin-left: 100px;
  }
  #ray_07 {
    margin-left: 85px;
  }
  #ray_08 {
    margin-left: 80px;
  }
  #ray_09 {
    margin-left: 50px;
  }
  #ray_10 {
    margin-left: 50px;
  }
  /* accordion
    -------------------------------------------------- */
  .bogen-rot-grau {
    background: url('../img/bogen_rot.png') 3px 0px no-repeat;
    background-size: 56px 75px;
  }
  #panel_01 {
    width: 280px;
    margin-left: 0px;
  }
  #panel_02 {
    width: 280px;
    margin-left: 0px;
  }
  #panel_03 {
    width: 280px;
    margin-left: 0px;
  }
  #panel_04 {
    width: 280px;
    margin-left: 0px;
  }
  #panel_05 {
    width: 280px;
    margin-left: 0px;
  }
  #panel_06 {
    width: 280px;
    margin-left: 0px;
  }
  #panel_07 {
    width: 280px;
    margin-left: 0px;
  }
}