/* Light */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Light-webfont.eot');
    src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: 200;
    font-style: normal;

}

/* Light Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-LightItalic-webfont.eot');
    src: url('../fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
    font-weight: 200;
    font-style: italic;

}

/* SIKoM Font */
@font-face {
    font-family: 'Crimson Text';
    src: url('../fonts/crimsontext-roman-webfont.eot');
    src: url('../fonts/crimsontext-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/crimsontext-roman-webfont.woff') format('woff'),
         url('../fonts/crimsontext-roman-webfont.ttf') format('truetype'),
         url('../fonts/crimsontext-roman-webfont#crimsontext') format('svg');
    font-weight: 200;
    font-style: normal;

}


/* ***************************************************************
 *
 * Rotating Cubes
 *
 * *************************************************************** */
.outer_container {
    width: 780px;
    overflow: hidden;
    margin: 0 auto;
    height: 620px;
    position: relative;
    overflow: visible;


}

.inner_container {
    width: 420px;
    height: 200px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    -webkit-transform: perspective(0);
    -moz-transform: perspective(0);
    -o-transform: perspective(0);
    -ms-transform: perspective(0);
    transform: perspective(0);
    overflow: visible;
}

.cube {
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 50px;

    transform: perspective(1000px);
    float: left;
    height: 110px;
    width: 110px;

    -webkit-transition: -webkit-transform .33s;
    -moz-transition: -moz-transform .33s;
    -o-transition: -o-transform .33s;
    -ms-transition: -ms-transform .33s;
    transition: transform .33s; /* Animate the transform properties */

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d; /* <-NB */
}

.cube:hover, .cube.hideFont {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
}

.face {
    height: 100px;
    position: absolute;
    width: 100px;
    padding: 5px;
}



.cube .one {
    -webkit-transform: rotateX(90deg) translateZ(55px);
    -moz-transform: rotateX(90deg) translateZ(55px);
    -o-transform: rotateX(90deg) translateZ(55px);
    -ms-transform: rotateX(90deg) translateZ(55px);
    transform: rotateX(90deg) translateZ(55px);
}

.cube .two {
    -webkit-transform: translateZ(55px);
    -moz-transform: translateZ(55px);
    -o-transform: translateZ(55px);
    -ms-transform: translateZ(55px);
    transform: translateZ(55px);
}

.cube .three {
    -webkit-transform: rotateY(90deg) translateZ(55px);
    -moz-transform: rotateY(90deg) translateZ(55px);
    -o-transform: rotateY(90deg) translateZ(55px);
    -ms-transform: rotateY(90deg) translateZ(55px);
    transform: rotateY(90deg) translateZ(55px);
}

.cube .four {
    -webkit-transform: rotateY(180deg) translateZ(55px);
    -moz-transform: rotateY(180deg) translateZ(55px);
    -o-transform: rotateY(180deg) translateZ(55px);
    -ms-transform: rotateY(180deg) translateZ(55px);
    transform: rotateY(180deg) translateZ(55px);
}

.cube .five {
    -webkit-transform: rotateY(-90deg) translateZ(55px);
    -moz-transform: rotateY(-90deg) translateZ(55px);
    -o-transform: rotateY(-90deg) translateZ(55px);
    -ms-transform: rotateY(-90deg) translateZ(55px);
    transform: rotateY(-90deg) translateZ(55px);
}

.cube .six {
    -webkit-transform: rotateX(-90deg) translateZ(55px) rotate(180deg);
    -moz-transform: rotateX(-90deg) translateZ(55px) rotate(180deg);
    -o-transform: rotateX(-90deg) translateZ(55px) rotate(180deg);
    -ms-transform: rotateX(-90deg) translateZ(55px) rotate(180deg);
    transform: rotateX(-90deg) translateZ(55px) rotate(180deg);
}


/* ***************************************************************
 *
 * SAL Startbildschirm *** S ***
 *
 * *************************************************************** */
.sal_red {
    background-color: rgb(142,40,0);
}

.sal_yellow {
    background-color: rgb(255,176,59);
}

.sal_green {
    background-color: rgb(70,137,102);
}

.sal_s, .sal_s:hover, .sal_s:visited, .sal_s:active{
    background: url("../images/sal_s.png") rgb(142,40,0);
    background-repeat: no-repeat;
    color: inherit;

    -webkit-background-size: 101%;
    -moz-background-size: 101%;
    background-size: 101%;
}

.sal_s_r {
    background: url("../images/sal_s_r.png") rgb(142,40,0);
    background-repeat: no-repeat;

    -webkit-background-size: 101%;
    -moz-background-size: 101%;
    background-size: 101%;
}

.sal_s_u, .sal_s_u:hover {
    background: url("../images/sal_s_u.png") rgb(142,40,0);
    background-repeat: no-repeat;

    -webkit-background-size: 101%;
    -moz-background-size: 101%;
    background-size: 101%;
}

.sal_a, .sal_a:hover, .sal_a:active, .sal_a:visited {
    background: url("../images/sal_a.png") rgb(255,176,59);
    background-repeat: no-repeat;

    -webkit-background-size: 101%;
    -moz-background-size: 101%;
    background-size: 101%;
}

.svl_v, .svl_v:hover, .svl_v:active, .svl_v:visited {
    background: url("../images/svl_v.png") rgb(255,176,59);
    background-repeat: no-repeat;

    -webkit-background-size: 101%;
    -moz-background-size: 101%;
    background-size: 101%;
}

.sal_a_u, .sal_a_u:hover {
    background: url("../images/sal_a_u.png") rgb(255,176,59);
    background-repeat: no-repeat;

    -webkit-background-size: 101%;
    -moz-background-size: 101%;
    background-size: 101%;
}

.sal_l, .sal_l:hover {
    background: url("../images/sal_l.png") rgb(70,137,102);
    background-repeat: no-repeat;

    -webkit-background-size: 101%;
    -moz-background-size: 101%;
    background-size: 101%;
}

.sal_l_u, .sal_l_u:hover, .sal_l_u:active, .sal_l_u:visited {
    background: url("../images/sal_l_u.png") rgb(70,137,102);
    background-repeat: no-repeat;

    -webkit-background-size: 101%;
    -moz-background-size: 101%;
    background-size: 101%;
}

.slogan {
    font-family: "Open Sans", sans-serif;
    font-weight: 200;
    float: left;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.5em;
    margin-top: 37px;
    margin-left: 15px;
}

/* ***************************************************************
 *
 * Steps
 *
 * *************************************************************** */
.step,.slide {
    -webkit-backface-visibility: hidden;
    padding: 40px 60px;

    position: relative;
    margin: 0 auto;

    font-family: "Open Sans", sans-serif;
    font-weight: 200;
    background-color: rgba(255,255,255,0);
    border: none;

    -webkit-box-shadow: none;
    box-shadow: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;

}

.step:not(.active) {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

#step-1:not(.active) {
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -ms-transition: opacity 1s;
    transition: opacity 1s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

/* Default Substeps */
.impress-enabled .substep {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;

    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}

.impress-enabled .substep.active {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

/* Color the current Substep red */
.impress-enabled .substep.present {
    color: rgb(142,40,0);
}

/* fadeOutSubsteps Substeps */
.impress-enabled .fadeOutSubsteps .substep {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;

    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
    visibility: hidden;
}

.impress-enabled .fadeOutSubsteps .substep.active {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;
}

.impress-enabled .fadeOutSubsteps .substep.active.past, .impress-enabled .fadeOutSubsteps .substep.past {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=0);
    opacity: 0;
    visibility: hidden;
}


/* Animated Substeps */
.impress-enabled .transferSubstep .substep {

-webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
   -moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
     -o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

}

.impress-enabled .transferSubstep .substep.active {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-animation: transferIn 1.5s;
    animation: transferIn 1.5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes transferIn {
    0%      { transform: translateX(-50%) translateY(0); opacity: 0; }
    30%     { transform: translateX(-30%) translateY(0); opacity: 1; }
    70%     { transform: translateX(-30%) translateY(-50%); opacity: 1; }
    100%    { transform: translateX(-50%) translateY(-50%); opacity: 1; }
}

/* Standard syntax */
@keyframes transferIn {
    0%      { transform: translateX(-50%) translateY(0); opacity: 0; }
    30%     { transform: translateX(-30%) translateY(0); opacity: 1; }
    70%     { transform: translateX(-30%) translateY(-50%); opacity: 1; }
    100%    { transform: translateX(-50%) translateY(-50%); opacity: 1; }
}

.impress-enabled .transferSubstep .substep.active.first {
    -webkit-animation: transferInFirst 0.75s;
    animation: transferInFirst 0.75s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes transferInFirst {
    0%      { transform: translateX(-30%) translateY(-50%); opacity: 0; }
    100%    { transform: translateX(-50%) translateY(-50%); opacity: 1; }
}

/* Standard syntax */
@keyframes transferInFirst {
    0%      { transform: translateX(-30%) translateY(-50%); opacity: 0; }
    100%    { transform: translateX(-50%) translateY(-50%); opacity: 1; }
}

.impress-enabled .transferSubstep .substep.past {
    -webkit-animation: transferOut 1.5s;
    animation: transferOut 1.5s;
}

.impress-enabled .transferSubstep .substep.past.first {
    -webkit-animation: transferOut 1.5s;
    animation: transferOut 1.5s;
}

.impress-enabled .transferSubstep .substep.past.active {
    opacity: 0;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes transferOut {
    0%      { transform: translateX(-50%) translateY(-50%); opacity: 1; }
    30%     { transform: translateX(-30%) translateY(-50%); opacity: 1; }
    70%     { transform: translateX(-30%) translateY(-100%); opacity: 0; }
    100%    { transform: translateX(-50%) translateY(-100%); opacity: 0; }
}

/* Standard syntax */
@keyframes transferOut {
    0%      { transform: translateX(-50%) translateY(-50%); opacity: 1; }
    30%     { transform: translateX(-30%) translateY(-50%); opacity: 1; }
    70%     { transform: translateX(-30%) translateY(-100%); opacity: 0; }
    100%    { transform: translateX(-50%) translateY(-100%); opacity: 0; }
}

/* ***************************************************************
 *
 * HTML 5 Badge
 *
 * *************************************************************** */
#badge {

    background: url("http://www.w3.org/html/logo/badge/html5-badge-h-css3-graphics.png");
    background-repeat: repeat-none;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -ms-transition: opacity 1s;
    transition: opacity 1s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);

    width: 82px;
    height: 32px;
    bottom: 20px;
    right: 10px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
    position: fixed;

    z-index: 5;
}

#badge:hover {
    opacity: 1;
}

/* ***************************************************************
 *
 * Notiz-Overlays
 *
 * *************************************************************** */

 /* Checkbox */

 input[type=checkbox] {
    visibility: hidden;
}

.checkbox_container {
    /*z-index: 5;
    width: 170px;
    height: 30px;

    bottom: 5px;
    left: 25px;
    position: fixed;

    display: none;*/


    width: 200px;
    height: 32px;
    position: absolute;
    bottom: -275px;
    right: -10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
    padding: 15px;
    padding-top: 10px;

    z-index: 10;

    }

.checkbox_label {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    float: left;
    left: 50px;
}

.checkboxOne {
    top: 23px;
    right: 25px;
    width: 40px;
    height: 10px;
    background: #555;
    margin: 0 auto;
    position: absolute;
    border-radius: 3px;
}

.checkboxOne label {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;

    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease;
    cursor: pointer;
    position: absolute;
    top: -7px;
    left: -15px;

    background: #cc0000;
}

.checkboxOne input[type=checkbox]:checked + label {
    left: 30px;
    background-color: #468966;
}

/* Overlay */

.overlay_container {

    position:absolute;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-50%);

    width: 100%;
    height: 100%;



    z-index: 2;

    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;

}

.overlay_bg.isVisible, .overlay_bg.isVisible #overlays, .overlay_bg.isVisible .overlay {
    z-index:2;
    position:absolute;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-50%);

    width: 100%;
    height: 100%;

}

.overlay_container.isEmpty.isVisible {
    position:absolute;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-50%);

    width: 100%;
    height: 100%;
}

.overlay.isEmpty.isVisible:before{
    content: "";
    z-index:2;
}

.overlay_container:not(.isVisible) {
    opacity: 0;
    bottom: 0;
    height: 0;
}

.overlay {
    font-family: "Open Sans", sans-serif;
    font-size: 0.75em;
    line-height: 1.5em;

    background-color: rgba(255,255,255,0.75);
    padding: 15px;

    z-index:2;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -ms-transition: opacity 1s;
    transition: opacity 1s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;


    position:absolute;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-50%);

    width: 100%;
    height: 100%;
}

.overlay:not(.isVisible) {
    opacity: 0;
    display: none;
    padding: 15px;
}


/* ***************************************************************
 *
 * Animate the Cubes
 *
 * *************************************************************** */
.animateCube {
    -webkit-transition: all 0.5s ease-in-out 1.5s;
    -moz-transition: all 0.5s ease-in-out 1.5s;
    -o-transition: all 0.5s ease-in-out 1.5s;
    -ms-transition: all 0.5s ease-in-out 1.5s;
    transition: all 0.5s ease-in-out 1.5s;

    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.invisibleCube {
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -ms-transition: opacity 1s;
    transition: opacity 1s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

.transparentCube {
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    transition: opacity 0.5s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
    filter: alpha(opacity=25);
    opacity: 0.25;
}

/* ***************************************************************
 *
 * Progress the Bar
 *
 * *************************************************************** */
progress {
    /* turn of styling */
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none; /* no default border in FF and Opera */
    border: none; /* Dimensions */
    width: 100%;
    height: 11px;
    bottom: 0;
    left: 0;
    position: fixed;
    z-index: 3;
}

/* Firefox  */
progress {
    background: none;
}

progress::-moz-progress-bar {
    background: rgb(70,137,102);
}

progress:not([value])::-moz-progress-bar {
    background: none;
}

/* Chrome */
progress::-webkit-progress-bar {
    background: none;
}

progress::-webkit-progress-value {
    background: rgb(70,137,102);

    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s; /* Works like a charm */
}

progress:not([value])::-webkit-progress-bar {
    background: none;
}

/* ***************************************************************
 *
 * Text-Styling
 *
 * *************************************************************** */

.hint {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 15px;

}

.impress-on-step-1 .hint {
    opacity: 0.5;
}

.title {
     font-size: 30px;
     text-transform: uppercase;
}

.subline,.step ul {
    font-size: 25px;
}

.step ul {
    list-style: none;
    padding: 20px 0;
    margin: 0;
    line-height: 1.1em;
}

li {
    padding-left: 1em;
    text-indent: -1em;

    -webkit-transition: color linear 1s;
    -moz-transition: color linear 1s;
    -o-transition: color linear 1s;
    -ms-transition: color linear 1s;
    transition: color linear 1s;
    color: rgb(0,0,0);

    margin-top: 0.85em;
}

li.inOverlay {
    text-indent: -1.8em;
    padding-left: 2em;
}

li:before {
    content: "\f0c8";
    font-family: "FontAwesome";
    color: rgb(70,137,102);
    padding-right: 25px;
    font-size: 15px;
    float: left;
}

.turn_green {
    color: rgb(70,137,102);
}

/* ***************************************************************
 *
 * Typography
 *
 * *************************************************************** */

 .definition {
    font-family: "Open Sans Light";
    font-style: italic;
    font-size: 20px;
    padding-top: 15px;
}

.definition:before {
    font-family: "FontAwesome";
    color: #468966;
    position: absolute;
    font-size: 75px;
    left: 65px;
    margin-top: -10px;
    content: "\f129";
    font-style: normal;
}

.definition ul {
    margin-left: 15px;
}

.definition ul li {
    font-size: 14px;
    list-style-type: none;
    display: table-row;
}

.definition ul li:before {
    font-family: FontAwesome;
    content: "\F046";
    padding-right: 25px;
    color: #777;
    font-size: 15px;
    font-style: normal;
    display: table-cell;
    text-align: right;
}

.greenify {
    color: #468966;
}

span.checked {
    font-style: italic;
    color: #468966;
}

span.sikom {
    font-size: 18px;
    font-family: "Crimson Text";
    color: #444;
}

i.done {
    padding-left: 25px;
    font-size: 25px;
    color: #468966;
    font-style: normal;
}

li.arrow {
    padding-left: 25px;
}

li.arrow:before {
    content: "";
    padding-right: 10px;
}

.boldify {
    font-family: "Open Sans";
    font-weight: 600;
}

.timeline_date {
    padding-left: 15px;
    position: relative;
    color: rgb(70,137,102);
}

.timeline_desc {
    position: absolute;
    text-align: left;
    left: 200px;
    color: black;
}

.farewell {
    text-align: right;
    line-height: 1.8em;
    padding-top: 25px;
    position: absolute;
    bottom: 50px;
    right: 15px;
}

.hideme {
    opacity: 0;
}

/* ***************************************************************
 *
 * Style Elements
 *
 * *************************************************************** */
.rectangle {
    width: 100px;
    height: 100px;
    background-color: rgb(70,137,102);
}

.ziel_container, .ziel_overlarge_1, .ziel_overlarge_2{
    top: 0;
    height: 768px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    background-color: transparent;
}

.ziel_grafik {
    margin: auto;
    position: absolute;
    height: 100%;
    bottom: 0;
    left: -100px;
    bottom: 0;
    right: 0;
}

.ziel_overlarge_1::before, .ziel_overlarge_2::before {
    content: " ";
    position: absolute;
    width: 1024px;
    height: 2450px;
    left: -100px;
    top: -870px;
    z-index: -1;
}

.ziel_overlarge_1::before {
    background-image: url(../images/sal_struktur_module.png);
}

.ziel_overlarge_2::before {
    background-image: url(../images/sal_struktur_modul_1.png);
}

.ziel_rechteck {
    margin: auto;
    position: absolute;
    top: 0;
    left: -655px;
    bottom: 0;
    right: 0;
}

/* ***************************************************************
 *
 * SVG-Styling
 *
 * *************************************************************** */

.svg_embedded {
    margin-left: -175px;
}

.svg_emb_no_shift {
    margin-left: 0;
}

.svg_embedded_zoom {
    margin-left: -105px;
}



/* ***************************************************************
 *
 * Navigation Elements
 *
 * *************************************************************** */

.next, .prev, .next:hover, .prev:hover{

    font-family: "FontAwesome";
    font-size: 50px;

    width: 55px;
    height: 55px;

    cursor: pointer;

    text-shadow: none;

    color: #fff;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;

    z-index: 5;

    background: none;
}


.next:hover, .prev:hover{

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;

}

.next:before {
    content: "\f138";
    right: 25px;
    top: 50%;
    position: fixed;
    background: none;
}

.prev:before {
    content: "\f137";
    left: 25px;
    top: 50%;
    position: fixed;
    background: none;
}

/* ***************************************************************
 *
 * Timeline JS
 *
 * *************************************************************** */

 #storyjs-timeline {
    background: none;
}
.unityPlayer {
    width: 100%;
    height: 100%;
}

.webDemo {
    position: absolute;
    top: 21%;
    left: 14.5%;
    width: 70.2%;
    height: 58.4%;
}

.playButton {
    background: #468966;
    width: 5%;
    height: 5%;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%);
}

.playButtonPseudo {
    cursor: pointer;


    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 0 0 50px;
    border-color: transparent transparent transparent #000;
    opacity: 0.3;

    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-50%);

    transition: all 0.5s;

}


.playButtonPseudo:hover, .playButtonPseudo:active {
    border-color: transparent transparent transparent #468966;
    opacity: 1;
}

#unityPlayerDemo {
    visibility: visible;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 720px;
    max-height: 450px;
    position:absolute;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-50%);
}

#unityPlayerDemo embed {

}

#unityPlayerDemo:not(.unityVisible) {
    visibility: hidden;
    display: none;
}

.embBackground {
    position:absolute;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -3;
}

.embOverlay {
    z-index: 5;
}

.projektPartner {
    position: absolute;
    margin-left: -57px;
    margin-top: -450px;
    width: 100%;
    height: 768px;
}

.emb {

}

.leftFromTab {
    /*display:block;*/
    float: left;
    width: 350px;
    padding-left: 20px;
    padding-right: 50px;
}
.leftFromTabShort {
    display:block;
    float: left;
    width: 100px;
    padding-left: 20px;
    padding-right: 50px;
}

.unity {
    height: 866px;
    -webkit-transform-style: preserve-3d;
}

#fakeStep {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 50%;
    top: -0;
    transform: translate(-50%);
    opacity: 1;
    visibility: visible;
}

#unityPlayerBackground {
    visibility: visible;
    display: block;
}

#unityPlayerBackground img {
    max-width: 1024px;
    max-height: 768px;
}

#unityPlayerBackground:not(.unityVisible)  {
    visibilty: hidden;
    display: none;
}

.fakeStep {
    visibility: visible;
    display: block;
}

.fakeStep:not(.unityVisible)  {
    visibilty: hidden;
    display: none;
}

#arDemo {
    z-index: 25;
    width: 80%;
    height: 80%;
    background: transparent;
}


/* ***************************************************************
 *
 * Protodemo // Video over Image
 *
 * *************************************************************** */

.responsive-video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: none;
}



.responsive-video .mejs-container {
    width: 100vw !IMPORTANT;
    height: 100vh !IMPORTANT;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.responsive-video .mejs-container, .responsive-video .mejs-embed, .responsive-video .mejs-embed body {
    background:transparent;
}

.responsive-video .mejs-overlay, .mejs-poster {
  width: 100% !important;
  height: 100% !important;
}
.responsive-video .mejs-mediaelement video {

    z-index: -1;
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: #c3c3c3 !important;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #468966 !important;
}

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 35%;
    vertical-align: middle;
    overflow: hidden;
}

.mejs-mediaelement, .mejs-overlay-loading, .mejs-container {
    background-color: rgba(255,255,255,0);

}

.mejs-container {
    top: 143px;
    left: 22px;
    position: absolute;
}


.mejs-container,
.mejs-controls,
.mejs-overlay,
.mejs-overlay-loading {
    background: rgba(255,255,255,0);
}

.mejs-overlay-loading span {
    visibility: hidden;
    background: rgba(255,255,255,0);
}

.mejs-container .mejs-controls {
    visibility: hidden !IMPORTANT;
    background: rgba(255,255,255,0);
}



.rightAlign {
    text-align: right;
}

.indentRight {
    margin-left: 50%;
}

.papierflieger {
    position: absolute;
    right: 100px;
    bottom: -100px;
}

/* ***************************************************************
 *
 * Chart.js
 *
 * *************************************************************** */

.step .line-legend {
    font-size: 16px;
}

li.line_list:before {
    display:none;
}

li.line_list_item {
    width: 50px;
    height: 50px;
}

#statistik_legend {
    position: absolute;
    right: 22%;
    bottom: 60%;
}

#statistik2_legend {
    position: absolute;
    right: 20%;
    bottom: 60%;
}

.stat_source, .source {
    font-size: 12px;
    color: #888;
}

.stat_source a, .source a, .oculus_source a {
    background: none;
    text-shadow: none;

}

.stat_source_image {
    font-size: 12px;
    color: #888;
    position: absolute;
    transform: rotate(-90deg);
    left: 35px;
    bottom: -130px;

}

.stat_source_image_horizontal {
    font-size: 12px;
    color: #888;
    position: absolute;
    left: 75px;
    bottom: -280px;
}

.floating_title {
    position: absolute;
    top: -220px;
    left: 35px;
    font-size: 50px;
    text-transform: uppercase;
}

.indentQuestion {
    padding-left: 30px;
}

.indentExclamation {
    padding-left: 17px;
    margin-bottom: 0;
}

.farewell_impuls {
    text-align: center;
    line-height: 1.8em;
    padding-top: 400px;
    font-size: 50px;
    color: #468966;
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

.substep-icon {
    padding-left: 25px;
}

.step-overflow .svg_embedded{
    overflow: visible;
}

.small {
    font-size: 16px;
}

.twentytwenty-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    max-width:1024px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}



.svg_overlay {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    transition-duration: 1.5s;
}

.substep.present .svg_overlay {
    opacity: 1;
    visibility: visible;
}

.svg_overlay_indent {
    right: -90px;
}

.fullscreen-video {
    /*position: fixed;
    right: 50%;
    width: auto;
    height: 100vh;
    -webkit-transform: translateX(50%) translateY(-50%);
    transform: translateX(50%) translateY(-50%);
    background-image: url("images/blank.gif");
    background: transparent;*/

    position: absolute;
    /*width: 100vw;*/
    width: 1024px;
    max-width: 1024px;
    -webkit-transform:translateX(50%) translateY(-50%);
    transform:translateX(50%) translateY(-50%);
    z-index: -1;
    right: 50%;


}

.fullscreen-video .mejs-layers {
    position: relative;

}

span.sikom-o {
    position: relative;
    font-size: 18px;
    font-family: "Crimson Text";
    color: #444;
    top: -.1em;
}

.farewell_twitter {
    text-align: center;
    padding-left: 0%;
    line-height: 1.8em;
    padding-top: 400px;
    font-size: 40px;
    color: #468966;
    letter-spacing: 0em;
}

.canvas_centered {
    position:absolute;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-50%);
}

.title-ard {
     font-size: 50px;
     text-transform: uppercase;
    letter-spacing: 4px;
}

.logos {
}
.logo {
    left: 330%;
    top: -20%;
    width: 700%;
    height: auto;
    margin: 15px;
    overflow: visible;

    transition: transform 1s; /* Animate the transform properties */
}



.upper {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.text-ard {
    font-size: 80%;
    margin: 15px 0 0 0;
}



#tutorial {
    width: 80%;
    margin-left: 40px;
    margin-top: -50px;
}

.footer {
    position:absolute;
    bottom:32px;
    right: 25px;
    font-family: "open sans";
    font-size: 9pt;
    color: #555;
}

.linkbox_learntec {
    width: 450px;
    height: 30px;
    position: absolute;
    bottom: -275px;
    left: -10px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
    padding: 15px;
    padding-top: 10px;
    z-index:10;
}

.linkbox_title, .linkbox_title_exit {
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 3px;

}

.linkbox_subline {
    font-size: 15px;
}

.linkbox_logo {
    position:relative;
    top: -30px;
    margin-bottom: -30px;
}

.cursive {
    font-size: 15px;
    font-style: italic;
}

.linkbox_backup, .linkbox_backup_exit {
    background-color: #cc0000;
    border-radius: 5px;
    box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
    padding: 15px;
    padding-top: 5px;
    z-index: 10;
}

.backup_step {

    padding: 40px 60px;

    position: relative;
    margin: 0 auto;

    font-family: "Open Sans", sans-serif;
    font-weight: 200;
    background-color: rgba(255,255,255,0);
    border: none;

    -webkit-box-shadow: none;
    box-shadow: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.backup_video {
    z-index: 1;
}

.linkbox_backup_exit {
    position: fixed;
    top: -318px;
    right: 5%;
    height: 28px;
    width: 25px;
}

.linkbox_title_exit {
    left: 20px;
    position: absolute;
}

.linkbox_exit_container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 768px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: none;
    z-index:0;
}

.backup_title {
    font-size: 55px;
    letter-spacing: 5px;
    text-transform: uppercase;
    position: absolute;
    top: -335px;
    left: 0px;
    z-index: 5;
    width: 100%;
}

.backup_title_container {
    position: absolute;
    height: 100vh;
    width: 100vw;


}

video.bgvid {
    position: fixed;
    top: 50%;
    right: -100%;
    width: 1920px;
    height: 1080px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-image: url("images/blank.gif");
    background: transparent;
    z-index:0;
}



.linkbox_backup {

    padding: 15px;
    padding-top: 10px;
    z-index:1;

    position: fixed;
    bottom: -275px;
    right: 5%;
    height: 30px;
    width: 115px;
}

.fullscreen-video-container {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100vw;
    min-height: 100vh;
    width: 100%;
    height: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-image: url("images/blank.gif");
    background: transparent;
}

/*
.mode_switch_1 {
    clip-path: polygon(0% 0%, 0% 0%, 50% 0%, 0% 100%, 0% 100%, 0% 100%);
    filter: grayscale(1);
    z-index: 1;
    transition: all 0.25s;
}

.mode_switch_1:hover {
    transition: all 1.5s;
    clip-path: polygon(0% 0%, 100% 0%, 125% 0%, 125% 0%, 75% 100%, 0% 100%);
    filter:grayscale(0.25);
    z-index: 5;
}

.mode_switch_1:hover ~ .mode_switch_2 {
    transition: all 1.5s;
    clip-path: polygon(50% 0%, 100% 0%, 100% 75%, 87.5% 100%, 0% 100%, 0% 100%);
    filter:grayscale(1);
    z-index: 1;
}

.mode_switch_2 {
    clip-path: polygon(50% 0%, 100% 0%, 100% 0%, 50% 100%, 0% 100%, 0% 100%);
    filter: grayscale(1);
    z-index: 1;
    transition: all 0.25s;
}

.mode_switch_2:hover {
    transition: all 1.5s;
    clip-path: polygon(12.5% 0%, 100% 0%, 100% 75%, 87.5% 100%, 0% 100%, 0% 25%);
    filter:grayscale(0.25);
    z-index: 5;
}

.mode_switch_3 {
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 50% 100%);
    filter: grayscale(1);
    z-index: 1;
    transition: all 0.25s;
}

.mode_switch_3:hover {
    transition: all 1.5s;
    clip-path: polygon(25% 0, 100% 0%, 100% 100%, -25% 100%);
    filter: grayscale(0.25);
    z-index: 5;
}

.mode_switch_3:hover + .mode_switch_2 {
    transition: all 1.5s;
    clip-path: polygon(12.5% 0%, 100% 0%, 100% 0%, 50% 100%, 0% 100%, 0% 25%);
    filter:grayscale(1);
    z-index: 1;
}
*/

.mode_switch_1:not(.active), .mode_switch_2:not(.active), .mode_switch_3:not(.active) {
    filter: alpha(opacity=1);
    opacity: 1;
}

.mode_switch_1:not(.present) {
    clip-path: polygon(0% 0%, 0% 0%, 50% 0%, 0% 100%, 0% 100%, 0% 100%);
    filter: grayscale(1);
    z-index: 1;
    transition: all 0.5s;
}

.mode_switch_1.present {
    transition: all 1.5s;
    clip-path: polygon(0% 0%, 100% 0%, 125% 0%, 125% 0%, 75% 100%, 0% 100%);
    filter:grayscale(0.25);
    z-index: 5;
}

.mode_switch_1.present ~ .mode_switch_2 {
    transition: all 1.5s;
    clip-path: polygon(50% 0%, 100% 0%, 100% 75%, 87.5% 100%, 0% 100%, 0% 100%);
    filter:grayscale(1);
    z-index: 1;
}

.mode_switch_2:not(.present) {
    clip-path: polygon(50% 0%, 100% 0%, 100% 0%, 50% 100%, 0% 100%, 0% 100%);
    filter: grayscale(1);
    z-index: 1;
    transition: all 0.5s;
}

.mode_switch_2.present {
    transition: all 1.5s;
    clip-path: polygon(12.5% 0%, 100% 0%, 100% 75%, 87.5% 100%, 0% 100%, 0% 25%);
    filter:grayscale(0.25);
    z-index: 5;
}

.mode_switch_3:not(.present) {
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 50% 100%);
    filter: grayscale(1);
    z-index: 1;
    transition: all 0.5s;
}

.mode_switch_3.present {
    transition: all 1.5s;
    clip-path: polygon(25% 0, 100% 0%, 100% 100%, -25% 100%);
    filter: grayscale(0.25);
    z-index: 5;
}

.mode_switch_3.present ~ .mode_switch_2 {
    transition: all 1.5s;
    clip-path: polygon(12.5% 0%, 100% 0%, 100% 0%, 50% 100%, 0% 100%, 0% 25%);
    filter:grayscale(1);
    z-index: 1;
}
.mode_boxes:not(.active) .linkbox_learntec, .mode_boxes:not(.active) .linkbox_backup {
    transition: all 0.5s;
    transform: translateY(2000px);
}

.mode_boxes.active .linkbox_learntec, .mode_boxes.active .linkbox_backup {
    transition: all 1.5s;
    transform: translateY(0px);
}

.substep:not(.past) .box_recap {
    position: fixed;
    bottom: 80px;
    left: 105px;
    height: 50px;
    width: 72%;
    font-style: italic;
    color: #000;
    text-indent: -4em;
    padding-left: 3em;
    letter-spacing: 0.03em;
}

.substep:not(.past).box_recap_2 {
    position: fixed;
    bottom: 80px;
    left: 105px;
    height: 50px;
    width: 72%;
    font-style: italic;
    color: #000;
    text-indent: -4em;
    padding-left: 3em;
    letter-spacing: 0.03em;
}

.substep.past .box_recap {
    display: none;
}

.substep.past.box_recap_2 {
    display: none;
}

.positioned_li {
    position: relative;
}



.leftFromTabMedium {
    float: left;
    width: 250px;
    padding-left: 20px;
    padding-right: 50px;
}

.evolution {
    position:absolute;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100vw;
    height: 100vh;
}

.evo_top {
    /*background-color: green;*/
    position:absolute;
    left:0;
    top: 15%;
    width: 100%;
    height: 33%;
}

.evo_bottom {
    /*background-color: red;*/
    position:absolute;
    left:0;
    bottom: 20%;
    width: 100%;
    height: 33%;
}

.evo_bottom_icons {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 100px;
    transform: all 1.5s;
}

.evo_bottom_icon_left {
    left: 25%;
    transform: all 0.5s;
}

.evo_bottom_icon_middle {
    left: 50%;
    transform: translateX(-50%);
    transform: all 1.0s;
}

.evo_bottom_icon_right {
    right: 25%;
    transform: all 1.5s;
}

.evo_top_icons {
    position: absolute;
    width: 80%;
    height: 200px;
    top: 50%;
    transform: all 1.5s;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
}

.evo_1.substep .evo_top_icon_1 {
    left: 10%;
    transform: all 0.5s;
}

.evo_2.substep .evo_top_icon_1 {
    transform: translateX(-100px);
    transform: all 1.5s;
}

.evo_3.past.active .evo_top {
    visibility: none;
    opacity: 0;
}

.autonomie {
    position:absolute;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-30%);
    width: 100vw;
    height: 66vh;
}

.auto_icons {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 100px;
    transform: all 1.5s;
}

.auto_user {
    left: 50%;
    transform: translateX(-215%);
}

.auto_goal {
    right: 50%;
    transform: translateX(215%);
}

.auto_paths {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-10%);
}

.auto_paths.active {
    animation: auto_animation 2.5s forwards;
}

@keyframes auto_animation {
    0% {
        clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 0%);
    }

    100% {
        clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

.source {
    position:fixed;
    height: 50px;
    bottom: -41%;
    left: -25px;
    font-family: "open sans";
    font-size: 9pt;
    color: #555;
}



.past .auto_3 {
    visibility: hidden;
    display: none;
    opacity: 0;
    transform: all 1s;
}

.orte_icons {
    position: absolute;
    top: 53%;
}

.auto_paths_3 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-10%);
    transition: all 0.5s;
}

.farewell_header {
    text-align: center;
    letter-spacing: 10px;
    position: absolute;
    bottom: 200px;
    left: 50%;
    width: 700px;
    transform: translateX(-50%);
}

.oculus_gif {
    max-width: 1024px;
    position: absolute;
}



.embSmall {
    height: 150px;
    width: auto;
}

.impress-enabled .substep.active.past.timeline_step {
    filter: grayscale(1);
    opacity: 0.75;
}


embed svg .svg_line {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
}

.substep.present.active .svg_line {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: dash 1.5s linear forwards;
}

.svg_opacity {
    opacity: 0;
}

.substep.present.active .svg_opacity {
    animation:fade 2.5s linear forwards;
}

@keyframes dash {
    0%   { stroke-dashoffset: 50;}
    100% { stroke-dashoffset: 100;}
}

@keyframes fade {
    0%   { opacity: 0;}
    75%  { opacity: 0;}
    100% { opacity: 1;}
}
.oculus_source {
    position:absolute;
    height: 50px;
    bottom: -40px;
    left: -25px;
    font-family: "open sans";
    font-size: 9pt;
    color: #555;
}

.impress-enabled .transferSubstep .substep.past.last {
    animation: none;
    opacity: 1;
}



.rStroke, .rStroke2, .rStroke3 {
    stroke-dasharray:  446;
    stroke-dashoffset: 446;
    transition: all 1.5s 1s;
}

.rStroke2, .rStroke3 {
    transform: translateX(-250px);
}

.rStroke.active {
    stroke-dashoffset: 0;
}

.substep.active .rStroke2 {
    stroke-dashoffset: 350;
}

.substep.past .rStroke2 {
    stroke-dashoffset: 150;
}



.rStroke.active.past {
    stroke-dashoffset: 446;
}


.vStroke, .vStroke2, .vStroke3 {
    stroke-dasharray:  446;
    stroke-dashoffset: 446;
    transition: all 1.5s 1s;
}

.vStroke2, .vStroke3 {
    visibility: visible;
    opacity: 1;
    transform: translateX(250px);
}

.substep.active .vStroke2 {
    stroke-dashoffset: 150;
}

.substep.past .vStroke2 {
    stroke-dashoffset: 350;
}

.substep.active .vStroke3 {
    stroke-dashoffset: 350;
}

.vStroke.active {
    stroke-dashoffset:0;
}

.vStroke.active.past {
    stroke-dashoffset: 446;
}



.impress-enabled .substep.svg_g_mr {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s linear forwards;
}

.substep.rvBoxes, .substep.past.rvBoxes, .rvBoxes  {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    width: 1024px;
    height: 768px;
}



.substep.active.rvBoxes #rBox {
    position: fixed;
    left: 15px;

}

.rBox {
    position: absolute;
    transform: translateX(0);
    transition: all 1s 1s;
}

.substep.rvBoxes.present .rBox, .rvBoxes_moved .rBox {
    transform: translateX(-250px);
}

.substep.rvBoxes.past .rBox {
    transform: translateY(-200px) translateX(-250px);
    transition: all 1s;
}

.substep.rvBoxes.past .vBox {
    transform: translateY(-200px) translateX(250px);
    transition: all 1s;
}

.vBox {
    position: absolute;
    transform: translateX(0);
    transition: all 1s 1s;

}

.substep.rvBoxes.present .vBox, .rvBoxes_moved .vBox {
    transform: translateX(250px);
}

.impress-enabled .substep.avBoxes {
    visibility: visible;
    opacity: 1;
}

.impress-enabled .substep.avBoxes.present, .impress-enabled .substep.avBoxes.past {
    transform: translateY(-100px);
}

.substep.rvBoxes:not(.active) .mrQuestionmark {
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 1s 1.5s;
}

.substep.rvBoxes.present .mrQuestionmark {
    opacity: 1;
    transform: translateX(8px);
    transition: opacity 1s 1.5s;
}

.substep.rvBoxes.past .mrQuestionmark {
    opacity: 0;
    transform: translateX(8px);
    transition: all 0.25s ;
}

.substep.avBoxes:not(.active) .avFadeIn {
    opacity: 0;
    top(100px);
    transition: opacity 1s 1.5s;
}

.substep.avBoxes.present .avFadeIn {
    opacity: 1;
    top: 100px;
    transition: opacity 1s 1.5s;
}

.substep.avBoxes.past .avFadeIn {
    opacity: 0;
    top: 100px;
    transition: opacity 0.25s;
}

.impress-enabled .substep.arBoxes.present, .impress-enabled .substep.arBoxes.past {
    transform: translateY(-100px);
}

.substep.arBoxes:not(.active) .arFadeIn{
    opacity: 0;
    top: 100px;
    transition: opacity 1s 1.5s;
}

.substep.arBoxes.present .arFadeIn, .substep.mrBoxes.present .arFadeIn {
    opacity: 1;
    top: 100px;
    transition: opacity 1s 1.5s;
}

.substep.arBoxes.past .arFadeIn, .substep.mrBoxes.past .arFadeIn {
    opacity: 0;
    top: 100px;
    transition: opacity 0.25s;
}

.substep.active .rStroke3 {
    stroke-dashoffset: 150;
}

.substep.past .rStroke3, .substep.past .rStroke2, .substep.past .rStroke {
    stroke-dashoffset: 446;
}

.substep.past .rStroke2 {
    transition: all 0.25s 1.5s;
}

.substep.past .vStroke2 {
    transition: all 1.25s 1.5s;
}

.substep.past .vStroke3, .substep.past .vStroke2, .substep.past .vStroke {
    stroke-dashoffset: 446;
}
.substep.mrBoxes:not(.active) .mrFadeIn {
    opacity: 0;
    transition: opacity 1s 1.5s;
}

.substep.mrBoxes.present .mrFadeIn {
    opacity: 1;
    transition: opacity 1s 1.5s;
}

.substep.mrBoxes.past .mrFadeIn {
    opacity: 0;
    transition: opacity 0.25s;
}

.substep.mrBoxes:not(.active) .arFadeIn2{
    opacity: 0;
    transition: opacity 1s 1.5s;
}

.substep.mrBoxes.present .arFadeIn2{
    opacity: 1;
    transition: opacity 1s 1.5s;
}

.substep.mrBoxes.past .arFadeIn2{
    opacity: 0;
    transition: opacity 0.25s;
}

.substep.mrBoxes:not(.active) .avFadeIn2{
    opacity: 0;
    transition: opacity 1s 1.5s;
}

.substep.mrBoxes.present .avFadeIn2{
    opacity: 1;
    transition: opacity 1s 1.5s;
}

.substep.mrBoxes.past .avFadeIn2{
    opacity: 0;
    transition: opacity 0.25s;
}

.mrBoxes {
    transform: translateY(-100px) translateX(8px);
}

.impress-enabled .substep.spectrum_first:not(.active) {
    opacity: 1;
    visibility: visible;
}

.impress-enabled .substep.spectrum_first.past {
    opacity: 0;
    visibility: hidden;
}

.vr_title {
    position: absolute;
    height: 768px;
    transform: translateY(-36%) translateX(175px);
}

.vr_title_2 {
    transform: translateY(-36%) translateX(275px);
}

.volumetric_video {
    z-index:10;
    height: 768px;
    max-width: none;
    width: auto;
    position: absolute;
}

.asterisk {
    font-size: 12px;
    color: #cccccc;
    margin-top: 15px;
}

sup {
    font-size: 75%;
    vertical-align: super;
}

.didaktikPath {
    /*stroke-dasharray: 1000px;*/
}

.active .didaktikPath_1 {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: dashPath 5s 1.5s linear forwards;
}

.active .didaktikPath_2 {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: dashPath 3s 5s linear forwards;
}

.active .present .didaktikPath_3 {
    stroke-dasharray: 380;
    stroke-dashoffset: 380;
    animation: dashPath 2s linear forwards;
}

.active .present .didaktikPath_4 {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: dashPath 2s linear forwards;
}

.active .didaktikPath_5 {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: dashPath 4s linear forwards;
}

.active .present .didaktikPath_6 {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: dashPath 4s linear forwards;
}

@keyframes dashPath {
    0% {
        opacity:0;
    }
    10% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}


.active .didaktikText {
    opacity: 0;
}

.past .didaktikText {
    opacity: 1;
}

.active .didaktikTextTranslucent {
    animation: textFadeOut 5s 10s linear forwards;
}

.active .didaktikText_1 { animation: textFadeIn 1s 3.5s linear forwards; }
.active .didaktikText_2_A { animation: textFadeIn 1s 7s linear forwards; }
.active .didaktikText_2_B { animation: textFadeIn 1s 8s linear forwards; }
.active .didaktikText_2_C { animation: textFadeIn 1s 9s linear forwards; }
.active .didaktikText_2_D { animation: textFadeIn 1s 10s linear forwards; }
.active .present .didaktikText_3 { animation: textFadeIn 1s 2s linear forwards; }
.active .present .didaktikText_4 { animation: textFadeIn 1s 2s linear forwards; }
.active .didaktikText_5 { animation: textFadeIn 1s 2.5s linear forwards; }
.active .present .didaktikText_6 { animation: textFadeIn 1s 3.5s linear forwards; }
.active .present .didaktikText_7 { animation: textFadeIn 1s 1s linear forwards; }
.active .present .didaktikText_8 { animation: textFadeIn 1s 2s linear forwards; }
.active .present .didaktikText_9 { animation: textFadeIn 1s 3s linear forwards; }
.active .present .didaktikText_10 { animation: textFadeIn 1s 4s linear forwards; }

@keyframes textFadeIn {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes textFadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0.25; }
}


#07_group {
    z-index:-50;
}

.sourceBottom {
    font-size: 12px;
    color: #888;
    position:fixed;
    height: 50px;
    bottom: -345px;
    left: -25px;
    font-family: "open sans";
    font-size: 9pt;
    color: #555;
}
.threeDOF {
    width: 256px;
    position: absolute;
    top: -100px;
    left: 100px;
}

.sixDOF {
    width: 256px;
    position: absolute;
    top: -100px;
    left: 500px;
}

.fullheight-video {
    position: fixed;
    height: 107vh;
    -webkit-transform:translateX(50%) translateY(-50%);
    transform:translateX(50%) translateY(-50%);
    z-index: -1;
    right: 50%;
}

.scanlines {
  /* Set rules to fill background */
  min-height: 768px;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100vw;
  height: auto;
  max-width: 1365px;

  /* Set up positioning */
  position: fixed;
  top: -7.18em;



    background-image:url('../images/scanline.png');
    background-repeat: repeat;
    z-index:5;

    display: inline-block;

    -webkit-box-shadow:  inset 0px 0px 125px 50px rgba(0,0,0,0.5);
    -moz-box-shadow:    inset 0px 0px 125px 50px rgba(0,0,0,0.5);
    box-shadow:         inset 0px 0px 125px 50px rgba(0,0,0,0.5);

}

@media only screen and (min-width: 680px) {

    .scanlines {
          left: -1.3em;
    }
}

@media only screen and (min-width: 1030px) {

    .scanlines {
          left: -2.7em;
    }
}

@media only screen and (min-width: 1366px) {

    .scanlines {
          left: -4.83em;
    }
}

.fontOverlay {
    color: #fff; !IMPORTANT
    z-index: 5;
    position: absolute;
    bottom: 25px;
    left: 25px;
    font-size: 75px;
    letter-spacing: 20px;
    text-shadow: 2px 2px 8px #000;
    text-align: center;
    width: 1024px;
}

.impress-enabled .substep.present.videoOverlay, .impress-enabled .substep.past.videoOverlay, .impress-enabled .substep.future.videoOverlay {
    color: #fff;
    position: absolute;
    top: -200px;
    left: 50px;
}

.impress-enabled .substep.present.videoOverlay li:before, .impress-enabled .substep.past.videoOverlay li:before, .impress-enabled .substep.active.videoOverlay li:before {
    content: "\f0c8";
    font-family: "FontAwesome";
    color: #fff;
    padding-right: 25px;
    font-size: 15px;
    float: left;
}

.videoOverlay {
    z-index:20;
}

.imageScale {
    width: 1024px;
    height: auto;
}

.farewell_title {
    position: absolute;
    top: 475px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.farewell_social {
    position: absolute;
    bottom: -20px;
    left: -30px;
    transform: scale(0.7);
}

.hashtag {
    position: absolute;
    top: 745px;
}



.backup_subline {
    font-size: 55px;
    letter-spacing: 5px;
    text-transform: uppercase;
    position: absolute;
    bottom: -310px;
    left: 0px;
    z-index: 5;
    width: 100%;
}

.centered {
    text-align: center;
}

.vid_poster {
    z-index: -5;
    width: 1024px;
}

.boxOverlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    width: 1000%;
    height: 500%;
    position: absolute;
    bottom: -350px;
    left: -65px;
    z-index: -1;
}

.centerLogo {
    width: 400px;
}

.quotes {
    position: absolute;
    font-style: italic;
    font-size: 24pt;
    text-align: center;
    line-height: 28pt;
    margin-top:36pt;
}

.quoteSubline {
    font-size: 50px;
    text-transform: uppercase;
    position: absolute;
    height: 100px;
    top: 40px;
    left: 350px;
}

.hideSlogan {
    opacity: 0;
}

.showSlogan {
    opacity: 1;
}

.embFullscreen {
    width: 100%;

}

.step:not(.active).fixedVisibility {
    visibility:visible;
    opacity: 1; IMPORTANT!
}

.embSVG {
  transform: translateX(-50%) translateY(-50%) translateZ(0);
  width: 500%;
}

.scaleSVG {
    transform: scale3d(0.22, 0.22,1) translateX(-227%) translateY(-225%);
}

.svlTable {
    font-size: 16px;
    width: 60%;
}

.paper_video {
    position: absolute;
    /*width: 100vw;*/
    width: 1024px;
    max-width: 1024px;
    transform:translateX(50%) translateY(-55.4%);
    right: 50%;
}

.InProD2_GenerativeLogo {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
}

/*
 * INPROD2 STUFF
 */

.InProD2_Header {
    position: relative;
    width: 100%;
    height: 150px;
}

.InProD2_Wortmarke {
    width: 600px;
    height: 100px;
    position: absolute;
    left: 150px;
    top: 0;

}