/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 28.11.2019, 17:48:52
    Author     : chris
*/
/* ------------------------leuchtende Kachel */
.frame-enlightened .shadow{
    opacity : 0.5;
}
.frame-enlightened header h2{
    background: red;
    padding: 10px 0;
    margin:15px 0 0 0;
}
.frame-enlightened:hover .shadow{
    transition: opacity 1s;
    opacity: 1.0;
}
/* -------------------------fade-in - Einblenden bei Seitenaufbau */
/* Ablauf der Animation: */
@keyframes einblenden{
    from {
        opacity: 0;
    }
    to {
        opacity: 1.0;
    }
}
/* hier wird die Animation aufgerufen */
.frame-fade-in img{ 
    animation-name: einblenden;
    animation-duration: 6s;
    animation-iteration-count: 1;
}

/* ------------------------ ease-in  - Vergroessern bei mouseover */
.frame-ease-in img{ 
    width: 50px;
    height: auto;
    -webkit-transition: width 1s; /* Safari */
    transition: width 1s;
    
}
.frame-ease-in:hover img{
    width: 250px;
    transition-timing-function: ease-in;
}
/* ------------------------ rotate - bei Mouseover */
.frame-rotate:hover img{ 
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    transition-duration: 6s;
}
/* ------------------------ come-in - bei Mouseover */
.frame-come-in{ 
    background-image: url(../Images/Question.png);
}
.frame-come-in img{ 
    /* margin-left: 400px; */
    margin-left: 300px;
}
.frame-come-in:hover img{
/*
    -webkit-transform: translate(-400px);
    transform: translate(-400px);
    */
    -webkit-transform: translate(-300px);
    transform: translate(-300px);
    transition-duration: 4s;
}

/* ------------------------ Einblenden, wenn Element in Viewport kommt - onsight */
/* Klasse vp_animation wird in animation.js vergeben */
/* Ablauf der Animation: */
@keyframes fadein{
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1.0;
        visibility: visible;
    }
}
/* hier wird die Animation aufgerufen */
.vp_invisible{
    opacitiy: 0;
    visibility: hidden;
}
.vp_animate{ 
    animation-name: fadein;
    animation-duration: 6s;
    animation-iteration-count: 1;
}

/* Farbe läuft bei mouseover nach oben */
.frame-run-up .colorrun{
    border-bottom: 3px solid red;
    border-radius: 6px;
    background: red;
    width: 100%;
    max-height: 0;
    -webkit-transition-property: max-height background border-color; /* For Safari 3.1 to 6.0 */
    transition-property: max-height background border-colr;
    -webkit-transition-duration: 2s; /* For Safari 3.1 to 6.0 */
    transition-duration: 2s;
    
    }
.frame-run-up .colorrun:hover{
    max-height: 42px;
    background: yellow;
    border-color: yellow;
}