/* Das Layout - Angaben die Bootstrap überschreiben! */


/* Eigene CSS-Deklarationen */

body {
    color:#666;
    font-family: open_sansregular, Helvetica, Arial, sans-serif;
    font-size:16px;
}

/* Footer */
.right > p > a > img {
    width:30px;
    height:auto;
}
.right > p > a > img:hover {
    opacity:0.5;
}

/* WYSIWYG EDITOR ALIGNMENT CLASSES 
-------------------------------------------- */
.left {
    text-align: left
}
.center {
    text-align: center
}
.right {
    text-align: right
}
a {
  outline:0 !important;
}
.intern {
  background-color: #333;
  color: #fff;
  padding:
6px 12px;
}
/* Nav 
--------------------------------------------*/
nav ul {
  padding: 0;
  list-style-type: none;
}
nav.secondary a {
  font-size: 0.9em;
}

    .affix {
          top:0;
          width: 100%;
          z-index: 9999 !important;
      }
      .navbar {
          margin-bottom: 0px;
      }

      .affix ~ .container-fluid {
         position: relative;
         top: 50px;
      }
      div.bunt {
        background-color:#3619F2;
        padding:80px;
        color:#fff;
      }


      section {
            position: relative;
            color: #777;
            background-color: white;
            text-align: center;
            padding: 80px 80px;
            box-shadow: 5px 5px 8px rgba(0,0,0,0.9);
        }
        section h1 {
          word-wrap: break-word;
        }
        /* StartPage Parallax
--------------------------------------------*/
         div.images {
            position: relative;
            opacity: 1;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        /*.caption {
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            text-align: center;
            color: #000;
        }*/
        .caption span.button-dark {
            background-color: #111;
            color: #fff;
            padding: 16px 24px;
            font-size: 25px;
            height: auto;
            letter-spacing: 10px;
            border-radius: 12px;
            text-transform:uppercase;
            box-shadow:3px 3px 6px rgba(0,0,0,0.5);
            display: inline-block;
            text-align: center;
            margin: 0 12px;
        }
        .caption span.button-dark:hover {
            box-shadow:0px 0px 0px rgba(0,0,0,0.5);
        }
        .caption div.button-dark {
            background-color: #111;
            color: #fff;
            padding: 16px 24px;
            font-size: 25px;
            height: auto;
            letter-spacing: 10px;
            border-radius: 12px;
            text-transform: uppercase;
            margin: 0 12px;
            box-shadow:3px 3px 6px rgba(0,0,0,0.5);
            text-align:center;
        }
        div.button-dark a {
            color: #ccc;
            text-transform: none;
            letter-spacing: 2px;
        }
        button.button-dark {
          color: #fff;
          background-color: #000;
          padding: 12px;
          border: none;
          border-radius: 12px;
          font-size: 1.4em;
        }
        div.button-dark a:hover, button.button-dark:hover {
            color: #f00;
        }

        .content, .caption, #ontop p {
          hyphens: auto;
          -webkit-hyphens: auto;
        }

@media only screen and (max-width : 480px) {
  div.bunt {
    padding: 40px;
  }
    section {
      padding: 40px 40px;

    }
    .caption div.button-dark, .caption span.button-dark  {
            font-size: 18px;
            letter-spacing: 6px;
        }
}

/* Cookie
--------------------------------------------*/
.cookie_inner {
  width: 80%!important;
  margin: 0;
  background-color: rgba(240,160,160,0.9)!important;
  padding: 15px;
  position: absolute;
  bottom: 40%!important;
  left: 10%!important;
  right: 10%!important;
  border: 1px solid red;
  box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.3);
}

/* QIZ 
-------------------------------------------- */
#quiznavpage {
  max-width: 760px;
  margin-top: 25px;
}
.quiz {
	display:block;
}
.answer {
	display:block;
}
.modal-dialog {
  width: 100%;
  margin: 0;
}
.modal-content {
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 0px solid transparent;
  border-radius: 0;
  outline: 0;
  -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  height: 100%;
  min-height: 100vh;
}
img.bildlupemodal {
  max-width: 100vw;
  max-height: 95vh;
  object-fit: contain;
}
input[type="radio"] {
   appearance: none;
   width: 90px; 
   height: 30px; 
   background: silver; 
   border-radius: 6px;
   cursor:pointer;
}
input[type="radio"]:hover {
   appearance: none;
   width: 90px; 
   height: 30px; 
   background: green; 
   border-radius: 6px;
}

label.yes {
  position: absolute;
  top: 7px;
  left: 55px;
  pointer-events: none;
  color:#000;
}
label.no {
  position: absolute;
  top: 7px;
  left: 44px;
  pointer-events: none;
  color:#000;
}
.btnleft {
  text-align: left;
  margin-top: 15px;
}.row.but {
  display: flex;
  justify-content: center;
}
div.multiplechoice ul {
  list-style-type: none;
}
.multiplechoice input, .multiplechoice input:hover {
  width: 30px;
}
.multiplechoice label {
  cursor:pointer;
  margin-bottom:15px;
}
div.multiplechoice ul li {
  color:#666;
  cursor:pointer;
}
div.multiplechoice ul li:hover {
  color:red;
}
span.but {
  display:inline-block;
  width:15px;
  height:15px;
  background-color:#666;
  border-radius:3px;
}
#goweiter, #goauswertung {
  margin-top: 15px;
}
.btnright {
  display: flex;
  justify-content: right;
}
.btnleft {
  display: flex;
  justify-content: left;
}
section.answer {
  border:1px solid grey;
  margin-bottom:15px;
  padding:0 15px 5px 15px;
  background-color:#dedede;
}
section.answer h3 {
  color:red;
}

section.answer.green {
  border:1px solid green;
  background-color:#fff;
}
section.answer.green h3 {
  color:green;
}

section.answer.green h3 span.arrowred {
  display:none;
}
section.answer.green h3 span.arrowgreen {
  opacity:1;
}
section.answer h3 span.arrowgreen {
  opacity:0;
}
.sharecontent {
  text-align: left;
  padding-top: 15px;
}
.sl.print {
  display: none;
}
/* Auswertung
------------------------------------------- */
.titelzeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
p.mailversand, p.newsversand a {
  display:block;
  padding: 5px 0px 5px 0px;
  cursor: pointer;
  color: red;
}
p.mailversand:hover, p.newsversand a:hover {
  cursor: pointer;
  color: green;
}
#ModalAuswertung {
  max-width: 600px;
  margin: 0px auto;
}

/* IMAGES 
-------------------------------------------- */
img {
    height: auto; /* resets the image height so that it maintains its aspect ratio when width is set */
    /*background: transparent url(../images/ajax-loader.gif) no-repeat center center;*/
}
img.left {
    float: left;
    max-width: 50%;
    margin: 5px 20px 10px 0;
}
img.right {
    float: right;
    max-width: 50%; /* Responsive width */
    margin: 5px 0 10px 20px;
}
img.leftAlone {
    float: left;
    margin-right: 100%;
    margin-bottom: 10px;
    clear: both;
}
img.center {
    float: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 10px;
    clear: both;
}
.footer img {
    width:auto;
}
.sharelink svg {
  width: 36px;
  margin-left: 15px;
}
.sl {
  padding-right: 5px;
  margin-bottom: 5px;
  position: relative;
  bottom: 16px;
}
.warnung {
  position:absolute;
  width:100%;
  background-color:rgba(255,255,255,0.8);
  height:100vh;
  z-index:99;
  display:none;
}
.warnungcontent {
  max-width:600px;
  margin:50vh auto 0 auto;
}
/* Responsiv Video *****************************/
.responsive-video {
  position: relative;
  padding-bottom: 56%; /* 16/9 Video */
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.responsive-video iframe,  
.responsive-video object,  
.responsive-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Greensock Animation *************************/
.quizanimholder {
  position: relative;
  padding-bottom: 77%; /* 16/9 Video */
  padding-top: 30px;
  height: 0;
  overflow: hidden;   
}
.quizanimation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
#anim1, #animgr1 {
    opacity:1;
}
      .box {
          position:absolute;
          opacity:0;
      }
      .box:first-child {
          opacity:1;
      }
      .box img {
          overflow:hidden;
      }
/* Modal ***************************************/
.bildlupe, .modal-body {
  cursor: pointer;
}
#bildlupe {
  margin:0;
  cursor:pointer;
}
.modal-title {
  padding-bottom:15px;
}
.modal-content {
  margin: auto;
  padding: 20px;
}
.modal-header, .modal-body, .modal-footer {
  /*position: relative;*/
  padding: 0;
  max-width:600px;
  margin:auto;
}
.modal-body a {
  text-decoration:underline;
}
h3.nein {
  background-color: red;
  padding: 5px 15px;
  color: #fff;
}
h3.ja {
  background-color: green;
  padding: 5px 15px;
  color: #fff;
}
.resultyes {
  background-color: green;
  padding: 1px 5px;
  color: #fff;
}
.resultno {
  background-color: #ccc;
  padding: 1px 5px;
  color: #000;
}
/* Bildwechsler CodeSnippet *********************/
div.imagecontainer {
	width:174px;
	min-height:200px;
	display:inline-block;
	margin:0 8px 8px 0;
}
div.imagecontainer img {
	position:absolute;
	width:auto;
    height:auto;
	cursor:pointer;
}
div.imagecontainer:hover img.hund {
	display:none;
}
div.pfeil {
    background: rgba(255,255,255,0.4);
    position: relative;
    color: #333;
    padding: 2px 6px;
    margin-top: -3px;
    pointer-events: none !important;
    text-align: center;
}
.carousel-control.right, .carousel-control.left {
    background:none;
}
.embed-container {
  position: relative; 
  padding-bottom: 98%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container iframe {

  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}

/* Form */
.form-control {
  display: block;
  width: 100%;
  height: auto;
  padding: 6px 12px;
  font-size: 1em;
  line-height: 1em;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: none;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-control::placeholder {
  color: none;
  opacity: 0;
}
input.form-control, textarea.form-control {
  border: 1px solid gray;
}
#Form_QuizForm_Adress_Holder, #Form_AuswertungForm_Adress_Holder {
  display: none;
}
#Form_AuswertungForm {
  margin: 0 25px;
}
#Form_AuswertungForm .field {
  padding: 0 35px 8px 35px;
}
#Form_AuswertungForm .field input, #Form_AuswertungForm .field textarea {
  width:100%;
}
#Form_AuswertungForm .action {
  width: 85%;
  padding: 8px;
  margin: 12px 40px;
}
#Form_QuizForm input,
#Form_QuizContactForm_Captcha {
  width: 300px;
}
#Form_QuizForm_action_QuizDBEntryForm,
#Form_QuizContactForm_action_QuizContactFormAction {
  margin: 12px 0 0 5px;
  width: 300px;
}
#Form_AuswertungForm_Captcha {
  text-align: center;
}
#Form_QuizContactForm_Anrede_Holder {
  display: none;
}
#Form_QuizForm_Comment {
  width: 300px;
}
#Form_QuizForm_error {
  color: red;
  font-size:2em;
  height:600px;
  position:absolute;

background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 

}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  text-align: center;
}
.btn-toolbar {
  display: flex;
  justify-content: center;
}
#Form_QuizPollForm_Captcha {
  text-align: center;
}
#Form_QuizPollForm_action_QuizPollDBEntryForm {
  margin-top: 15px;
  min-width: 220px;
}
.persip {
  text-align: center;
  margin-top: 15px;
}
.button a {
  display:block;
  appearance: none;
  width: auto;
  height: auto;
  background: silver;
  color:black;
  border-radius: 6px;
  cursor: pointer;
  padding: 12px;
}
.button a:hover {
  background: green;
  color:#fff;
}

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}