/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* rubik-300 - latin */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300;
    src: url('../font/rubik//light/rubik-v21-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../font/rubik//light/rubik-v21-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/rubik//light/rubik-v21-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/rubik//light/rubik-v21-latin-300.woff') format('woff'), /* Modern Browsers */
         url('../font/rubik//light/rubik-v21-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../font/rubik//light/rubik-v21-latin-300.svg#Rubik') format('svg'); /* Legacy iOS */
  }
  /* rubik-regular - latin */
  @font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src: url('../font/rubik//regular/rubik-v21-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../font/rubik//regular/rubik-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/rubik//regular/rubik-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/rubik//regular/rubik-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../font/rubik//regular/rubik-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../font/rubik//regular/rubik-v21-latin-regular.svg#Rubik') format('svg'); /* Legacy iOS */
  }
  /* rubik-500 - latin */
  @font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    src: url('../font/rubik//medium/rubik-v21-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../font/rubik//medium/rubik-v21-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/rubik//medium/rubik-v21-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/rubik//medium/rubik-v21-latin-500.woff') format('woff'), /* Modern Browsers */
         url('../font/rubik//medium/rubik-v21-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../font/rubik//medium/rubik-v21-latin-500.svg#Rubik') format('svg'); /* Legacy iOS */
  }

* {
    margin: 0px;
    padding: 0px;
    border: none;
}

a {
    font-size: 18px;
    text-decoration: none;
}

a:hover {
    text-decoration: line-through;
    cursor: pointer;
}

body {
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    line-height: 30px;
    overflow: hidden;
}

.full-site {
    height: 100vh;
    width: 100vw;
    position: relative;  
    display: -webkit-box;  
    display: -ms-flexbox;  
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

#stage_a {
    background-color: #efc2e1;
    color: #dc793a;
}

#centered-content {
    width: 600px;
    margin: 0px auto;
    text-align: center;
}

#stage_b {
    background-color: #dc793a;
    color: #efc2e1;
    position: absolute;
    top: 100vh;
}

#logo {
    width: 100%;
    margin-right: -15%;
    margin-bottom: 42px;
}

.fixed-element {
    position: absolute;   
}

#top-left {
    top: 36px;
    left: 36px;
}

#top-right {
    top: 36px;
    right: 36px;
    text-align: right;
}

#bottom-middle {
    bottom: 36px;
    width: 100%;
    text-align: center;
}

#bottom-middle img {
    height: 39px;  
    -webkit-transform: scale(1);  
        -ms-transform: scale(1);  
            transform: scale(1);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

#bottom-middle a {
    text-decoration: none;
    margin-left: 22px;
}

#bottom-middle a:hover img {
    -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
            transform: scale(0.95);
}

#bottom-middle a:first-child {
    margin-left: 0px;
}

#bottom-left {
    bottom: 36px;
    left: 36px;
}

#bottom-right {
    bottom: 36px;
    right: 36px;
    text-align: right;
}

.close {
    right: 18px;
    top: 24px;
    position: absolute;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.close a {
    font-size: 2em;
    text-decoration: none;
    color: #efc2e1;
    font-weight: 500;
}

.close:hover {
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
}

#content-case {
    padding: 0px 36px;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.content-column {
    width: 50%;
    margin: 75px 0px 36px;
    overflow-y: scroll;
}

.content-column h2 {
    text-transform: uppercase;
    font-weight: 300;
}

.content-column h3 {
    margin-top: 20px;
    font-weight: 500;
}

#impressum {
/*    width: 39%;*/
}

#datenschutz {
/*    padding-right: 1%;*/
}

/* CSS3 Animation 4 open Impressum/Datenschutz */

.active_b {
    -webkit-animation-name: example;
            animation-name: example;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s; 
    -webkit-animation-timing-function: ease-in-out; 
            animation-timing-function: ease-in-out; 
    -webkit-animation-fill-mode: forwards; 
            animation-fill-mode: forwards;
}

.deactive_b {
    -webkit-animation-name: example2;
            animation-name: example2;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s; 
    -webkit-animation-timing-function: ease-in-out; 
            animation-timing-function: ease-in-out; 
    -webkit-animation-fill-mode: forwards; 
            animation-fill-mode: forwards;
}

@-webkit-keyframes example {
    from {top: 100vh;}
    to {top: 0vh;}
}

@keyframes example {
    from {top: 100vh;}
    to {top: 0vh;}
}

@-webkit-keyframes example2 {
    from {top: 0vh;}
    to {top: 100vh;}
}

@keyframes example2 {
    from {top: 0vh;}
    to {top: 100vh;}
}

/* Custom Scrollbar */

@media only screen and (min-width: 1200px) {
    
    ::-webkit-scrollbar {
        width: 20px;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #ca6b2f;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #ca6b2f;
        border-radius: 20px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #ca6b2f;
        border-radius: 20px;
        border: 6px solid transparent;
        background-clip: content-box;
    }
    
    #impressum {
        width: 39%;
    }
    
    #datenschutz {
        padding-right: 1%;
    }
    
    .content-column#datenschutz h2 {
        text-align: right;
    }
}

/* Responsive */

@media only screen and (max-width: 1200px) {
    body {
        overflow: auto;        
        overflow-x: hidden;
    }
    
    .content-column {
        width: 100%;
        overflow: unset;
    }
    
    #content-case {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    
    #stage_b.full-site {
        height: auto;
        top: auto;
    }
    
    .close, #bottom-left, #bottom-right {
        display: none;
    }    
}

@media only screen and (max-width: 650px) {
    #logo {
        -webkit-transform: scale(0.7);
            -ms-transform: scale(0.7);
                transform: scale(0.7);
        margin-right: -11%;
    }
    
    #stage_a {
        min-height: 100vh;
        height: auto;
        padding-bottom: 30px;
    }
    
    .fixed-element,#centered-content {
        margin-bottom: 32px;
    }
    
    .fixed-element {
        position: static;
        width: 100%;
        text-align: center;
    }
    
    #top-left {
        
    }
    
    #top-right {
        text-align: center;
    }
    
    .full-site { 
        display: block;
    }
    
    #centered-content {
        width: auto;
    }
    
    #content-case {
        width: auto;
    }
}

/* FF-fix */

@supports (-moz-appearance:none) {
     body {
        overflow: auto;        
/*        overflow-x: hidden;*/
    }
    
    .content-column {
/*        width: 100%;*/
        overflow: unset;
    }

    #stage_b.full-site {
        height: auto;
    }
    
    .close, #bottom-left, #bottom-right {
        display: none;
    }
    
    .full-site {
        width: 100%;
    }
    
    .content-column#datenschutz h2 {
        text-align: left;
    }
}