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


/* Eigene CSS-Deklarationen */
        html {
          scroll-behavior: smooth;
        }

       body, html {
        height: 100%;
        margin: 0;
        font: 400 15px/1.8 "Lato", sans-serif;
        color: #777;
        background-color: #fff;
    }
    .affix {
          top:0px;
          width: 100%;
          z-index: 9999 !important;
      }
      .navbar {
          margin-bottom: 0px;
      }

      .affix ~ .container-fluid {
         position: relative;
         top: 76px;
      }
    .navbar {
      border-radius: 0px;
      box-shadow: 5px 5px 8px rgba(0,0,0,0.9);
      min-height: 74px;
    }
        #myNavbar {
          margin-top: 24px;
        }
    .header {
        background-color:#7362ca;
        color:#fff;
        height:200px;
    }
        .logo {
          width: 200px;
          height: auto;
        }
        h3 {
            letter-spacing: 5px;
            text-transform: uppercase;
            font: 20px "Lato", sans-serif;
            color: #111;
            text-align: center;
        }

        div.img-onepage {
            position: relative;
            opacity: 1;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        section {
            position: relative;
            color: #777;
            /*background-color: rgba(255,255,255,0.2);*/
            background-color:transparent;
            padding: 80px 80px;
            /*text-align: justify;
            box-shadow: 5px 5px 8px rgba(0,0,0,0.9);*/
        }
        section p, section ul {
            hyphens: auto;
        }
        a {
          color: #EB9C2D;
        }
        a:hover {
          color: #000000;
        }

        .caption {
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            text-align: center;
            color: #000;
        }

        .caption a {
            padding: 16px 24px;
            font-size: 25px;
            height: 60px;
            text-decoration: none;
        }
        .caption a:hover, .caption a:visited {
            color: #fff!important;
        }

        .button-clear {
            background-color: transparent;
            font-size: 25px;
            color: #f7f7f7;
        }
        code, pre {
            color:#222;
            padding:6px;
            border: 1px solid #ccc;
        }
        span.smart {display:none;}
        .copy.right {
          text-align: right;
        }
        .footer {
          margin: auto;
          text-align: center;
        }



        /* Small Devices, Tablets */
    @media only screen and (max-width : 362px) {
        .img-onepage {
                background-attachment: scroll;
                width:100%;
                height:auto;
                max-height:200px;
            }
        section {
                padding: 40px 20px;
            }
            span.smart {display:block;}
        .caption span.button-dark {
            background-color: #111;
            color: #fff;
            font-size:1.2em;
            min-width:90%;
            height: auto;
            border-radius: 0px;
        }
    }
/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
  @media (min-width: 1200px) {
  .container {
    width: 1050px;
  }
}

@media only screen and (max-width : 1200px) {

}

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

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  .smartmenu {
    display:none;
  }
  
}
@media only screen and (max-width : 768px) {
  nav.secondary {
    display:none;
  }
  section {
    padding: 50px 15px;
  }
}


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

}

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

}