@import url(fontawesome-all.min.css);

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../_Fonts/open-sans-v18-latin-300.eot');
  src: local(''),
       url('../_Fonts/open-sans-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_Fonts/open-sans-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_Fonts/open-sans-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../_Fonts/open-sans-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_Fonts/open-sans-v18-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../_Fonts/open-sans-v18-latin-regular.eot');
  src: local(''),
       url('../_Fonts/open-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_Fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_Fonts/open-sans-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../_Fonts/open-sans-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_Fonts/open-sans-v18-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../_Fonts/open-sans-v18-latin-700.eot');
  src: local(''),
       url('../_Fonts/open-sans-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_Fonts/open-sans-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_Fonts/open-sans-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../_Fonts/open-sans-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_Fonts/open-sans-v18-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Das Handwerk';
  src: url('../_Fonts/DasHandwerk-Bold.eot');
  src: url('../_Fonts/DasHandwerk-Bold.eot?#iefix') format('embedded-opentype'),
       url('../_Fonts/DasHandwerk-Bold.woff2') format('woff2'),
       url('../_Fonts/DasHandwerk-Bold.woff') format('woff'),
       url('../_Fonts/DasHandwerk-Bold.ttf')  format('truetype'),
       url('../_Fonts/DasHandwerk-Bold.svg#Das Handwerk') format('svg');
}

html {
  background-color: #000;
}
body {
  font-family:'Open Sans', sans-serif;
  line-height:1.6em;
  font-size: 1.6em;
}
a {
  color: #f93;
  text-decoration: none;
}
a:active {
  outline:0;
}

h1, h2, h3, h4, h5, h6{
  line-height:1.1em;
  margin-bottom: 20px;
}
h1, h2, h3 {
  font-family: "Das Handwerk";
}

h4.media-heading {
  font-family: "Das Handwerk";
}
#wrapper{
  width: 100%;
  margin: 0;
  padding: 0;
}

/*  Header
==================================== */
.topbar{
  background-color: #000;
}
.topbar .container .row {
  margin: 0;
  padding:0;
}
.topbar a:link, .topbar a:visited {
  color: #fff;
}
.topbar a:hover, .topbar a:focus {
  color: #f93;
  text-decoration: none;
}
.topbar ul.info i, .topbar ul.social-network i {
  font-size: 18px;
  margin-right: 4px;
  display: inline-block;
  position: relative;
  top: 2px;
}
.topbar ul.info li {
  float: right;
  padding-left: 30px;
  line-height: 44px;
  list-style-type: none;
}

ul.social-network {
  list-style:none;
  margin: 4px 0 0;
  padding-left:0;
}
ul.social-network li {
  display:inline;
  margin: 0 5px;
  padding: 5px 0 0;
  /* width: 32px; */
  display: inline-block;
  text-align: center;
  height: 32px;
  vertical-align: baseline;
}

header .navbar {
  margin-bottom: 0;
}

.gap-l0 {
  padding-left: 0;
}
.gap-r0 {
  padding-right: 0;
}
.navbar-default {
    border: none;
}

.navbar-brand {
  font-size: 24px;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: -1px;
  margin-top: 21px;
  padding: 0 0 0 15px;
  font-family: "Das Handwerk";
}
 .navbar-brand i {
    color: #f93;
    font-size: 26px;
    margin-right: 5px;
    position: relative;
    top: 3px;
}

.navbar-default .navbar-brand {
  color: #fff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #f93;
  background-color: transparent;
}

header .navbar-collapse {
  max-height: 520px;
}
header .navbar-collapse  ul.navbar-nav {
  float: right;
  margin-right: 0;
}
header .navbar {
  min-height: 70px;
  padding: 18px 0;
  background: #fff;
}
header .navbar-default{
  background: #1e1e1e;
  border-top: 1px solid #3e3e3e;
  width: 100%;
}
header .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: rgba(255, 153, 51, 0.5);
  border-color: #f93;
}
header .navbar {
  min-height: 62px;
  padding: 0;
}
header .navbar-nav > li  {
  padding-bottom: 12px;
  padding-top: 12px;
  padding: 0 !important;
}
header .navbar-nav > li > a {
  margin-left: 2px;
  line-height: 40px;
  font-weight: 700;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
header .navigation {
  float:right;
}

header ul.nav li {
  border: none;
  margin: 0;
}

header ul.nav li a {
  font-size: 13px;
  border:none;
  font-weight: 600;
  text-transform:uppercase;
}

.navbar .nav > li > a {
  color: #fff;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border-color: #555;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
  }
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
  color: #333;
  background: #fff;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
  color: #f93;
}
.navbar-toggle {
  margin-top: 12px;
  display: block;
  margin-right: 0;
}
/* navbar allways toggle */
.navbar-header {
  float: none;
}
.navbar-left,.navbar-right {
  float: none !important;
}
.navbar-collapse {
  border-top: 1px solid #666;
}
.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
  margin-top: 7.5px;
}
.navbar-nav>li {
  float: none;
}
.navbar-nav>li>a {
  padding-top: 10px;
  padding-bottom: 10px;
}
.collapse.in{
  display:block !important;
}

.btn.whatsapp-button {
  background-color: #43c654;
  color: #fff;
  border: 2px solid #fff;
  margin: 0 5px;
  font-size: 20px;
}
.whatsapp-collapse {
  background-color:#222;
  color:#fff;
  padding:10px 0;
}

/*  Jumbotron
==================================== */
.jumbotron {
  position: relative;
  margin-bottom: 0;
  color: #fff;
}
.jumbotron span {
  z-index: 999;
  position: absolute;
  bottom: 0;
  right: 20px;
  font-size: 12px;
}

.jumbotron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.jumbotron .container {
  z-index: 10;
  position: relative;
  text-align: center;
}
.jumbotron .txt {
  padding: 50px 0;
}

/*  Footer
==================================== */
footer{
  background: #1e1e1e;
  padding:50px 0 0 0;
  color:#797979;
  line-height:1.6em;
}
footer h4 {
  font-weight: bold;
  border-bottom: #797979 1px solid;
  padding-bottom: 9px;
}
footer a:link, footer a:visited {
  color:#fff;
}
footer a:hover, footer a:focus {
  color: #f93;
}
footer .kontakte a:link, footer .kontakte a:visited {
  color: #797979;
}
footer .kontakte a:hover, footer .kontakte a:focus {
  color: #f93;
  text-decoration: none;
}
footer .prime a:link, footer .prime a:visited {
  color:#fff;
}
footer .prime a:hover, footer .prime a:active {
  color:#f93;
}

ul.impressum {
  list-style:none;
  margin: 0;
  padding-left:0;
  text-align: right;
  font-size: 0.9em;
}

ul.impressum li {
  display:inline;
  margin: 0 5px;
  padding: 0;
  display: inline-block;
  vertical-align: baseline;
}

#bottombar{
  padding: 20px 0 5px;
  margin: 40px 0 0 0;
  background: #000;
  border-top: 1px solid #3e3e3e;
}

#bottombar ul.social-network {
  float:right;
  list-style:none;
  margin: 0;
}
#bottombar ul.social-network li {
  padding: 0;
}

#bottombar ul.social-network i {
  font-size: 18px;
}

#bottombar .copyright img {
  height: 25px;
}

/* scroll to top */
.scrollup {
  position: fixed;
  width: 36px;
  height: 36px;
  bottom: 0px;
  right: 20px;
  background: #f93;
}
a.scrollup {
  outline: 0;
  text-align: center;
}
a.scrollup i {
  margin-top: 10px;
  color: #fff;
}

.quelle {
  font-size: 12px;
  background: none;
  position: absolute;
  z-index: 999;
  bottom: 5px;
  right: 10px;
  color: #fff;
}
.prime {
  color: #fff;
}

.txt-ctr {
  display: inline !important;
  padding-left: 50px;
  vertical-align: middle;
  line-height: 15rem;
}
.txt-ctr h2, .txt-ctr p {
  position: relative;
  z-index: 10;
  text-align: center;
}
.txt-ctr p {
  font-size: 18px;
}

.mt-60 {
  margin-top: 60px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-30 {
  margin-top: 30px;
}
.mb-60 {
  margin-bottom: 60px;
}
.mb-30 {
  margin-bottom: 30px;
}

/* Accordion */
.panel {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
 .panel-group .panel-heading + .panel-collapse .panel-body {
   border-top: none;
   border-top-color: none;
 }
.panel-heading {
  padding: 0;
  border:0;
}
.panel-default>.panel-heading {
  background-color: #fff;
  cursor: pointer;
}
.panel-title>a, .panel-title>a:active{
  display:block;
  padding:25px;
  text-decoration:none;
}
.panel-heading  a:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f078";
  float: right;
  transition: all 0.5s;
  font-weight: 900;
}
.panel-default:last-child {
  padding-bottom: 5px
}
.panel-heading.active a:before {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.panel-body {
  padding: 25px;
}
.panel-default {
  border-color: none;
}
.panel-body p.copyright {
  font-size: 12px;
  color: #666;
  text-align: right;
  margin: 0 10px 0 0;
  padding: 0;
}
figcaption {
  font-size: 12px;
  color: #666;
  padding: 0;
}


/*  Startseite
==================================== */
.kachel .kachel-img {
  min-height: 35rem;
  background-size: cover;
}
.kachel .kachel-text {
  padding: 5rem;
}
.kachel .container-fluid {
  padding: 0;
}
.kachel h2, .kachel p {
  margin: 0;
  color: #fff;
  line-height: 4rem;
}
.kachel a {
  text-decoration: none;
}
.no-gaps {
  margin-right: 0;
  margin-left: 0;
}
.btn {
  text-align: left;
}

.box {
  width: 100%;
}
.hellblau::after {
  content: "";
  display: table;
}
.hellblau::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 168, 229, 0.85);
}
.hellblau:hover::before {
  background: rgba(0, 168, 229, 0.5);
}
.hellblau span {
  background-color: rgb(0, 168, 229);
  padding: 5px 10px;
}
.gelb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(251, 203, 61, 0.85);
}
.gelb:hover::before {
  background: rgba(251, 203, 61, 0.5);
}
.gelb span {
  background-color: rgb(251, 203, 61);
  padding: 5px 10px;
}
.rot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(184, 44, 68, 0.85);
}
.rot:hover::before {
  background: rgba(184, 44, 68, 0.5);
}
.rot span {
  background-color: rgb(184, 44, 68);
  padding: 5px 10px;
}
.orange::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 153, 51, 0.85);
}
.orange:hover::before {
  background: rgba(255, 153, 51, 0.5);
}
.orange span {
  background-color: rgb(255, 153, 51);
  padding: 5px 10px;
}
.dunkelblau::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 48, 112, 0.85);
}
.dunkelblau:hover::before {
  background: rgba(7, 48, 112, 0.5);
}
.dunkelblau span {
  background-color: rgb(7, 48, 112);
  padding: 5px 10px;
}
.gruen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(90, 142, 30, 0.85);
}
.gruen:hover::before {
  background: rgba(90, 142, 30, 0.5);
}
.gruen span {
  background-color: rgb(90, 142, 30);
  padding: 5px 10px;
}

/* #Jazubi aktuell */
.jazubi-aktuell .jumbotron:before {
  background: rgba(0, 168, 229, 0.85);
}
.jazubi-aktuell .lead {
  color: #00A8E5;
  font-weight: 400;
}
.jazubi-aktuell ul.video {
  list-style-type: none;
  padding-inline-start: 0px;
}
.jazubi-aktuell ul.video li {
  margin-bottom: 25px;
}
.jazubi-aktuell a:link, .jazubi-aktuell a:visited, .jazubi-aktuell a:hover, .jazubi-aktuell a:active, .jazubi-aktuell a:focus {
  text-decoration: none;
}
.jazubi-aktuell a:focus {
  outline: none;
  box-shadow: none;
}
.jazubi-aktuell figure {
  /* display: inline-block; deaktiviert wegen IE/Edge */
  margin: 0 0 5px 0;
  height: auto;
  overflow: hidden;
  position: relative;
  /* min-height: 235px; */
}
.jazubi-aktuell figure img {
  display: block;
  position: relative;
  z-index: 0;
  float: left;
}
.jazubi-aktuell .video-description {
  height: 100%;
  width: 100%;
  margin-top: 600px;
  z-index: 100;
  position: absolute;
  transition: all 0.4s ease 0.1s;
  -moz-transition: all 0.4s ease 0.1s;
  -webkit-transition: all 0.4s ease 0.1s;
  border-radius: 6px;
}
.jazubi-aktuell figure:hover > .video-description, .jazubi-aktuell figure:focus > .video-description {
  margin: 0;
  padding: 40px 30px 0;
  background-color: rgba(0, 168, 229, 0.85);
  color: #fff;
}
.jazubi-aktuell div.hinweis {
  background-color: #d1e3f6;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px
}
.jazubi-aktuell .intro {
  font-weight: 700;
  padding: 15px 0 0;
}

/* Azubispots */
.azubispots .jumbotron:before {
  background: rgba(184, 44, 68, 0.85);
}
.azubispots footer {
  margin-top: 0;
}
.azubispots .lead {
  color: rgb(184, 44, 68);
  font-weight: 400;
}
.azubispots .thumbnail {
  min-height: 410px;
}
.azubispots .media:first-child {
  margin-top: 0;
}
.azubispots .media, .media-body {
  overflow: hidden;
  zoom: 1;
}
.azubispots .media {
  margin-top: 15px;
}
.azubispots .media-body, .azubispots .media-left, .azubispots .media-right {
  display: table-cell;
  vertical-align: top;
}
.azubispots .media-left, .azubispots .media > .pull-left {
  padding-right: 15px;
}
.azubispots .media i {
  font-size: 3em;
  color: #00A8E5;
}
.azubispots .media:nth-child(2n+2) i {
  font-size: 3em;
  color: #EE234A;
}
.azubispots .media:nth-child(3n+3) i {
  font-size: 3em;
  color: rgb(7, 48, 112)
}
.azubispots .fas { /* Font Awesome */
  line-height: 1.1em;
}

/* tools for schools */
.tools-for-schools .jumbotron:before {
  background: rgba(7, 48, 112, 0.85);
}
.tools-for-schools .lead {
  color: rgb(7, 48, 112);
  font-weight: 400;
}
.tools-for-schools h4 {
  font-family: "Das Handwerk";
  font-size: 24px
}
.tools-for-schools .modul {
  padding-bottom: 25px;
}
.tools-for-schools .modul span {
  font-size: 14px;
  color: #999;
}
.tools-for-schools p.help-block {
  margin: 20px 0 0;
  color: #333;
  padding: 0;
}
.tools-for-schools ul.video {
  list-style-type: none;
  padding-inline-start: 0px;
}
.tools-for-schools figure {
  /* display: inline-block; deaktiviert wegen IE/Edge*/
  margin: 0 0 5px 0;
  height: auto;
  overflow: hidden;
  position: relative;
}
.tools-for-schools figure img {
  display: block;
  position: relative;
  z-index: 0;
  float: left;
}
.tools-for-schools .video-description {
  height: 100%;
  width: 100%;
  margin-top: 430px;
  z-index: 100;
  position: absolute;
  transition: all 0.4s ease 0.1s;
  -moz-transition: all 0.4s ease 0.1s;
  -webkit-transition: all 0.4s ease 0.1s;
  border-radius: 6px;
}
.tools-for-schools figure:hover > .video-description, .tools-for-schools figure:focus > .video-description {
  margin: 0;
  padding: 40px 30px 0;
  background-color: rgba(7, 48, 112, 0.85);
  color: #fff;
}
.tools-for-schools div.hinweis {
  background-color: rgba(7, 48, 112, 0.85);
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  color: #fff;
}
.tools-for-schools a:focus {
  outline: none;
  box-shadow: none;
}
.tools-for-schools .intro {
  font-weight: 700;
  padding: 15px 0 0;
}
.tools-for-schools sup {
  color: rgb(184, 44, 68);
}
.tools-for-schools .panel-default>.panel-heading {
  color: rgb(7, 48, 112);
}
.tools-for-schools .panel-default>.panel-heading {
  border-top: 1px solid rgb(7, 48, 112);
}
.tools-for-schools .panel-default:last-child {
  border-bottom: 1px solid rgb(7, 48, 112);
}
.bg-grau {
  background: #eee;
  padding: 60px 0;
}
.bg-grau h4,.bg-grau i {
  margin-bottom: 20px;
}

/*  tools-for-schools Parallax
==================================== */
.para {
  padding: 30px 0 50px;
  color: #fff;
}
.para-text {
  text-align: center;
  margin-top:10px;
}
.para p {
  padding-bottom: 20px;
}
.para-btn {
  background-color: transparent;
  border: 1px solid #fff;
  padding: 10px 50px;
  color: #fff;
}
.para-btn:hover, .para-btn:focus {
  background-color: #f93;
  color: #fff;
  text-decoration: none;
}

/* Finde deinen Clip
==================================== */
.finde-deinen-clip .jumbotron:before {
  background: rgba(255, 153, 51, 0.85);
}
.finde-deinen-clip .lead {
  color: rgb(255, 153, 51);
  font-weight: 400;
}
.finde-deinen-clip h5 {
  font-family: "Das Handwerk";
  font-size: 20px;
}
.finde-deinen-clip .btn-default {
  font-size: 20px;
  background-color: rgb(255, 153, 51);
  margin: 0 15px 15px 0;
  color: #fff;
  border-color: #f91;
  white-space: normal;
}
.finde-deinen-clip .panel-default>.panel-heading {
  color: rgb(255, 153, 51);
}
.finde-deinen-clip .panel-default>.panel-heading {
  border-top: 1px solid rgb(255, 153, 51);
}
.finde-deinen-clip .panel-default:last-child {
  border-bottom: 1px solid rgb(255, 153, 51);
}
.finde-deinen-clip ul.video {
  list-style-type: none;
  padding-inline-start: 0px;
}
.finde-deinen-clip a:link, .finde-deinen-clip a:visited, .finde-deinen-clip a:hover, .jafinde-deinen-clip a:active, .finde-deinen-clip a:focus {
  text-decoration: none;
}
.finde-deinen-clip figure {
  display: inline-block;
  margin: 10px 0;
  height: auto;
  overflow: hidden;
  position: relative;
  /* min-height: 235px; */
}
.finde-deinen-clip figure img {
  display: block;
  position: relative;
  z-index: 0;
  float: left;
}
.finde-deinen-clip a:focus {
  outline: none;
  box-shadow: none;
}
.finde-deinen-clip .video-description {
  height: 100%;
  width: 100%;
  margin-top: 430px;
  z-index: 100;
  position: absolute;
  transition: all 0.4s ease 0.1s;
  -moz-transition: all 0.4s ease 0.1s;
  -webkit-transition: all 0.4s ease 0.1s;
  border-radius: 6px;
}
.finde-deinen-clip figure:hover > .video-description, .finde-deinen-clip figure:focus > .video-description {
  margin: 0;
  padding: 40px 30px 0;
  background-color: rgba(255, 153, 51, 0.85);
  color: #fff;
}
.finde-deinen-clip div.hinweis {
  background-color: rgba(255, 153, 51, 0.35);;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px
}
.finde-deinen-clip .modal-content a:link, .finde-deinen-clip .modal-content a:visited {
  color: #fff;
}
.finde-deinen-clip .modal-content .intro a {
  background-color: #f93;
}

.finde-deinen-clip .intro {
  font-weight: 700;
  padding: 15px 0 0;
}

/* EineWoche - DeineChance
==================================== */
.einewoche-deinechance a {
  color: rgb(184, 44, 68);
}
.einewoche-deinechance .jumbotron:before {
  background: rgba(184, 44, 68, 0.85);
}
.einewoche-deinechance footer {
  margin-top: 25px;
}
.einewoche-deinechance .lead {
  color: rgb(184, 44, 68);
  font-weight: 400;
  margin-top: 20px;
}
.einewoche-deinechance h4 {
  font-family: "Das Handwerk";
  margin-bottom: 10px;
}
.einewoche-deinechance .modul {
  padding-bottom: 25px;
}
.einewoche-deinechance .modul span {
  font-size: 14px;
  color: #999;
}
.whatsappicon {
  font-size: 100px;
  text-align: center;
}
.whatsappicon a {
  color: #4dc558 !important;
}
.einewoche-deinechance figure:hover > .video-description, .einewoche-deinechance figure:focus > .video-description {
  margin: 0;
  padding: 40px 30px 0;
  background-color: rgba(184, 44, 68, 0.85);
  color: #fff;
}

.einewoche-deinechance ul.video {
  list-style-type: none;
  padding-inline-start: 0px;
}
.einewoche-deinechance figure {
  /* display: inline-block; deaktiviert wegen IE/Edge*/
  margin: 0 0 5px 0;
  height: auto;
  overflow: hidden;
  position: relative;
}
.einewoche-deinechance figure img {
  display: block;
  position: relative;
  z-index: 0;
  float: left;
}
.einewoche-deinechance .video-description {
  height: 100%;
  width: 100%;
  margin-top: 430px;
  z-index: 100;
  position: absolute;
  transition: all 0.4s ease 0.1s;
  -moz-transition: all 0.4s ease 0.1s;
  -webkit-transition: all 0.4s ease 0.1s;
  border-radius: 6px;
}
.einewoche-deinechance figure:hover > .video-description, .einewoche-deinechance figure:focus > .video-description {
  margin: 0;
  padding: 40px 30px 0;
  background-color: rgba(184, 44, 68, 0.85);
  color: #fff;
}
.einewoche-deinechance div.hinweis {
  background-color: rgba(184, 44, 68, 0.45);
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  color: #fff;
}
.einewoche-deinechance a:focus {
  outline: none;
  box-shadow: none;
}
.einewoche-deinechance .intro {
  font-weight: 700;
  padding: 15px 0 0;
}
.einewoche-deinechance sup {
  color: rgb(184, 44, 68);
}
.einewoche-deinechance .panel-default>.panel-heading {
  color: rgb(184, 44, 68);
}
.einewoche-deinechance .panel-default>.panel-heading {
  border-top: 1px solid rgb(184, 44, 68);
}
.einewoche-deinechance .panel-default:last-child {
  border-bottom: 1px solid rgb(184, 44, 68);
}
.einewoche-deinechance .bg-grau {
  margin-left: 25px;
  margin-right: 25px;
}

/* Datenschutz / Impressum */
.datenschutz footer, .impressum footer {
  margin-top: 0;
}
.datenschutz .lead, .impressum .lead {
  color: #333;
  font-weight: 400;
}
.datenschutz p.help-block, .impressum p.help-block {
  margin: 20px 0 0;
  color: #fff;
  padding: 0;
}
.datenschutz h1, .impressum h1 {
  color: #000;
}
.datenschutz .jumbotron p, .impressum .jumbotron p {
  color: #333;
}

/* Bildergalerie
==================================== */
.galerie-container{
  padding: 12px;
}
.galerie-item{
  overflow: hidden;
  padding: 3px;
}
.galerie-item .box{
  height: 350px;
  overflow: hidden;
}
.box img{
  height: 100%;
  width: 100%;
  object-fit:cover;
  -o-object-fit:cover;
}
.galerie-item a:focus{
  outline: none;
}
.galerie-item a:after{
  content:"\f002";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.75);
  position: absolute;
  right: 3px;
  left: 3px;
  top: 3px;
  bottom: 3px;
  text-align: center;
  line-height: 350px;
  font-size: 30px;
  color: #fff;
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}
.galerie-item a:hover:after{
  opacity: 1;
}
.galerie-container{
  padding: 12px;
}
.galerie-foto{
  overflow: hidden;
  padding: 3px;
}
.galerie-foto .box{
  height: 350px;
  overflow: hidden;
}
.galerie-foto a:focus{
  outline: none;
}
.galerie-foto a:after{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f002";
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  right: 3px;
  left: 3px;
  top: 3px;
  bottom: 3px;
  text-align: center;
  line-height: 350px;
  font-size: 30px;
  color: #fff;
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}
.galerie-foto a:hover:after{
  opacity: 1;
}
.galerie-container .modal-dialogue{
  width: 80%;
}
.galerie-container .description{
  position: relative;
  height: 40px;
  top: -40px;
  padding: 10px 25px;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  text-align: left;
}
.galerie-container .description h4 {
  margin: 0px;
  font-size: 15px;
  font-weight: 300;
  line-height: 20px;
}
.galerie-container .modal.fade .modal-dialog {
  -webkit-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -ms-transform: scale(0.1);
  transform: scale(0.1);
  top: 100px;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.galerie-container .modal.fade.in .modal-dialog {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transform: translate3d(0, -100px, 0);
  transform: translate3d(0, -100px, 0);
  opacity: 1;
}

/* Modal
==================================== */
div.hinweis {
  background-color: #d1e3f6;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px
}
.modal-content .intro a {
  padding: 15px 25px;
  background-color: #488fdb;
  color: white;
  border-radius: 10px;
  width: 100%;
  display: block;
}
.intro {
  font-weight: 700;
  padding: 15px 0 0;
}
.modal-open .galerie-container .modal{
  background-color: rgba(0,0,0,0.4);
}
.modal-open .galerie-foto .modal-body{
  padding: 0px;
}
.modal-open .galerie-foto button.close{
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: #000;
  opacity: 1;
  color: #fff;
  z-index: 999;
  right: -12px;
  top: -12px;
  border-radius: 50%;
  font-size: 15px;
  border: 2px solid #fff;
  line-height: 25px;
  -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.35);
  box-shadow: 0 0 1px 1px rgba(0,0,0,0.35);
}
.modal-open .galerie-foto button.close:focus{
  outline: none;
}
.modal-open .galerie-foto button.close span{
  position: relative;
  top: -3px;
  font-weight: lighter;
  text-shadow:none;
}
.modal-title {
  font-family: "Das Handwerk";
}

/* Media Quiries
==================================== */
@media (max-width: 767px) {
  .navbar-default .navbar-collapse {
    border-color: none;
  }
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;border-radius: 0;
  }
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: rgba(255, 255, 255, 0.58);
    margin-top: 15px;
  }
  .flex-caption h3 {
    font-size:28px;
  }
  body {
    padding-right: 0;
    padding-left: 0;
  }
  .navbar-brand {
    margin-top: 18px;
    border-bottom: none;
  }
  .navbar-nav {
    border-top: none;
    float: none;
    width: 100%;
  }
  li.active  {
    border: none;
    overflow: hidden;
  }
  #bottombar ul.social-network {
    float:left;
  }
  [class*="span"] {
    margin-bottom:20px;
  }
  .finde-deinen-clip .btn-default {
    font-size: 16px;
    white-space: normal;
    hyphens: auto;
  }
}

@media (min-width: 768px) {
.galerie-container .modal-dialog {
  width: 55%;
  margin: 50 auto;
}
}
@media (max-width: 768px) {
  .galerie-container .modal-content {
    height:250px;
  }
}