html, body {padding: 0; margin: 0; font-size: 1em;}
body, html {
    height: 100%;
    color: #777;
    line-height: 1.8;
    font-family: 'Open Sans',sans-serif;
}


/* GENERAL */
h1, h2, h3 {color: #2D5A86}
h1 {font-size: 1.7em;}
a {color: #000; text-decoration: none;} 
a:hover{color: #666;}
.clear {clear: both;}
.left {float: left;}
.right {float: right;}
ul {list-style: none;}

/* Hintergrund-Farben */
.wb-blue {background: #1A75AA;}
.wb-dark-blue {background: #215A7A;}
.wb-light-blue {background: #DAE7F7;}

/* Text-Farben */
.wb-text-blue {color: #1A75AA;}
.wb-text-dark-blue {color: #215A7A;}
.wb-text-light-blue {color: #DAE7F7;}


/* ############ MENU ########### */
.w3-top > div {background: rgba(33, 90, 122, 0.5); }
.w3-bar-item {font-size: 1.2em; color: #f8f8f8}
.w3-bar-item:hover {color: #1F3FAE !important; background-color: rgba(255,255,255,.9) !important;}

#mobile .w3-bar-item {display: block}


/* ############ FULL TOP ########### */

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: fixed;
    background-position: center -200px; /*center*/
    background-repeat: no-repeat;
    background-size: cover; /*cover*/
}

    /* First image (Logo. Full height) */
    .bgimg-1 {
        background-image: url('img/welcome-bg.png');
        min-height: 78%; 
    }

    /* Second image (Portfolio) */
    .bgimg-2 {
        background-image: url("/w3images/parallax2.jpg");
        min-height: 400px;
    }

    /* Third image (Contact) */
    .bgimg-3 {
        background-image: url("/w3images/parallax3.jpg");
        min-height: 400px;
    }

    .w3-wide {letter-spacing: 10px;}
    .w3-hover-opacity {cursor: pointer;}

    /* Turn off parallax scrolling for tablets and phones */
    @media only screen and (max-device-width: 1024px) {
        .bgimg-1, .bgimg-2, .bgimg-3 {
            background-attachment: scroll;
        }
    }

/* # HTML/CSS HERO */
    header {
      align-items: center;
      display: flex;
      font-size: 18px;
      height: 100vh;
      justify-content: center;
      overflow: hidden;
      position: relative;
      text-align: center;
      transform-style: preserve-3d;
      perspective: 100px;
    }

    header:before {
      animation: fade-slide-down 2s .5s cubic-bezier(0, 0.5, 0, 1) forwards;
      background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)),
                  url(img/wb-bg.jpg) no-repeat bottom;
      background-size: cover;
      content: "";
      opacity: 0;
      position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      z-index: -1;
    }

    header:after {
      animation: rotate-up .5s .5s cubic-bezier(0, 0.5, 0, 1) forwards;
      background: #F9FCFF;
      content: "";
      height: 40rem;
      left: -5%;
      position: absolute;
        right: -5%;
        top: 90%;
      transform-origin: 0 0;
      z-index: 0;
    }

    .header-content {
        /* margin-top: 100px; */
    }
    
    .header-title, .header-subtitle {
      /* color: #d8f1fb; */
    }
    .header-title {padding-top: 100px;}
    .wb-logo {
        max-width: 100%;
        padding: 0 10px;
        filter: drop-shadow(3px 3px 0px #eee);
    }

    .header-subtitle {
      text-transform: uppercase;
      margin-bottom: 4rem;
      color:rgba(255,255,255,0.5);
    }

    .header-button {
      transform: translateZ(.1px);
      position: relative;
      z-index: 10;
      color: #f8f8f8;
    }
    .header-button a {font-size: 1.4em; line-height: 1em; padding-top: 10px}
    .header-button small {font-size: .8em}
    
    .button {
        /* background: #269300; */
        border-radius: .25em;
        color: #fff;
        display: inline-block;
        padding: .25em 1.5em;
        margin: 0 auto;
        text-align: center;
    }
    .button:hover { background: rgba(255,255,255,.3)!important; color: #fff!important;  }

    .animate-pop-in {
      animation: pop-in .6s cubic-bezier(0, 0.9, 0.3, 1.2) forwards;
      opacity: 0;
    }

    .rocky-dashed {
      animation-delay: .6s;
    }

    .header-title {
      animation-delay: .8s;
    }

    .header-subtitle {
      animation-delay: 1s;
    }

    .header-button {
      animation-delay: 1.1s;
    }


    /* Animations */

    @keyframes fade-slide-down {
      0% {
        opacity: 0;
        transform: translateY(-4rem);
      }
      100% {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes pop-in {
      0% {
        opacity: 0;
        transform: translateY(-4rem) scale(.8);
      }
      100% {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes rotate-up {
      100% {
        transform: rotateZ(-4deg);
      }
    }


/* ############ MAIN ############ */
#main {font-size: 18px;}

ul.features li {line-height: 33px; }    
    ul.features li:before {
        /*Add another block-level blank space*/
        content: '';
        display: block;
        /*Make it a small rectangle so the border will create an L-shape*/
        width: 6px;
        height: 15px;
        /*Add a white border on the bottom and left, creating that 'L' */
        border: solid green;
        border-width: 0 4px 3px 0;
        /*Rotate the L 45 degrees to turn it into a checkmark*/
        transform: rotate(45deg);
        margin: 8px 0 0 -20px;
        float: left;
    }


/* LIGHTBOX */
#local_image_container img {
    max-height: 200px;
}
.flex {
    margin: auto;
    max-width: 1200px;
}
.flex img, .flex div {
    margin: .2em;
    cursor: pointer;
    border-radius: 2px;
    max-width: calc(50% - 12px);
    box-shadow: 0 .1em .7em rgba(0,0,0,.2);
}

/* ############ RIGHT ############ */

aside {padding: 5px 0px 0 80px;}
aside h3 {font-size: 0.99em}

aside #langmenu {padding: 0;}

aside ul {position: relative;}
    aside ul li {
        list-style: none;
        width: 100%;
        padding: 0 0 60px 0;
    }
    
    /* ENGLISH */
    .lang-en aside li a:before{
        content: "";
        height: 60px;
        width: 220px;
        position: absolute;
        margin-left: -50px;
    }      
    .lang-en aside ul li a.link1:before {background: url("/templates/wb-w3-homepage2/img/quicklink_news_en.png") no-repeat 0 0;}
    .lang-en aside ul li a.link2:before {background: url("/templates/wb-w3-homepage2/img/quicklink_download_en.png") no-repeat 0 0;}
    .lang-en aside ul li a.link3:before {background: url("/templates/wb-w3-homepage2/img/quicklink_modules_en.png") no-repeat 0 0;}
    .lang-en aside ul li a.link4:before {background: url("/templates/wb-w3-homepage2/img/quicklink_templates_en.png") no-repeat 0 0;}
    .lang-en aside ul li a.link5:before {background: url("/templates/wb-w3-homepage2/img/quicklink_portable_en.png") no-repeat 0 0;}
    .lang-en aside ul li a.link6:before {background: url("/templates/wb-w3-homepage2/img/quicklink_demo_en.png") no-repeat 0 0;}
    
    /* GERMAN */
    .lang-de aside li a:before{
        content: "";
        height: 60px;
        width: 220px;
        position: absolute;
        margin-left: -50px;
    }      
    .lang-de aside ul li a.link1:before {background: url("/templates/wb-w3-homepage2/img/quicklink_news_en.png") no-repeat 0 0;}
    .lang-de aside ul li a.link2:before {background: url("/templates/wb-w3-homepage2/img/quicklink_download_en.png") no-repeat 0 0;}
    .lang-de aside ul li a.link3:before {background: url("/templates/wb-w3-homepage2/img/quicklink_modules_en.png") no-repeat 0 0;}
    .lang-de aside ul li a.link4:before {background: url("/templates/wb-w3-homepage2/img/quicklink_templates_en.png") no-repeat 0 0;}
    .lang-de aside ul li a.link5:before {background: url("/templates/wb-w3-homepage2/img/quicklink_portable_en.png") no-repeat 0 0;}
    .lang-de aside ul li a.link6:before {background: url("/templates/wb-w3-homepage2/img/quicklink_demo_en.png") no-repeat 0 0;}

    aside ul li a.link1:hover:before {background-position: 0 -60px;}
    aside ul li a.link2:hover:before {background-position: 0 -60px;}
    aside ul li a.link3:hover:before {background-position: 0 -60px;}
    aside ul li a.link4:hover:before {background-position: 0 -60px;}
    aside ul li a.link5:hover:before {background-position: 0 -60px;}
    aside ul li a.link6:hover:before {background-position: 0 -60px;}



    
        
/* ############ FULL BOTTOM ########### */        
        
        
  



  
/* ############ FOOTER ########### */
footer a:hover {color: #fff}