#a_01_patient {
    width: 180px;
    height: 180px;
    position: relative;
    float:left;
}


#a_01_patient img{
   width:180px;
   left:-500px;
   top:20px;
   position:relative;

}
.run-animation_patient{
    -webkit-animation-name: imagemove; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: imagemove;
    animation-duration: 1s;
    animation-fill-mode:forwards;
}
#a_02_arrow1{
        width:180px;
        opacity: 0;
        left:100px;
        top:30px;
        position:relative;
        float:left;
        text-align: center;
}

.run-animation_arrow1{
    -webkit-animation-name: doctor_arrow; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
    animation-name: doctor_arrow;
    animation-duration: 10s;
    animation-fill-mode:forwards;
}

#a_02_arrow1 img{
    width: 126px;
}

#a_02_doctor{
       width:180px;
       opacity: 0;
       left:220px;
       position:relative;
       float:left;

}

.animation_doctor{
    -webkit-animation-name: doctor; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 6s; /* Chrome, Safari, Opera */
    animation-name: doctor;
    animation-duration: 6s;
    animation-fill-mode:forwards;
}

#a_02_doctor img{
    width: 126px;
}
#a_02_doctor_question{
    left:40px;
    float:left;
    position:relative;
    opacity: 0;

    z-index:3;
}

#a_02_doctor_question img{
    width: 126px;
}

#a_03_lab{
       width:572px;
       opacity: 1;
       left:72px;

       float:left;
       position:relative;
}
#a_03_lab img{
    width: 572px;
}
#a_04_arrow3{
    width:180px;
    padding-top: 31px;
    left:72px;
    float:left;
    position:relative;
    opacity: 0;

}

.animation_arrow3{
    -webkit-animation-name: report; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 18s; /* Chrome, Safari, Opera */
    animation-name: report;
    animation-duration: 18s;
    animation-fill-mode:forwards;
}

#a_04_arrow3 img{
    height: 200px;
}

#a_04_report{
    top:30px;
    float:left;
    position:relative;
    opacity: 0;
    left:60px;
}
#a_04_report img{
    height: 180px;
}
.animation_report{
    -webkit-animation-name: report; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 18s; /* Chrome, Safari, Opera */
    animation-name: report;
    animation-duration: 18s;
    animation-fill-mode:forwards;  
}

.animation_question{
    -webkit-animation-name: question; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 24s; /* Chrome, Safari, Opera */
    animation-name: question;
    animation-duration: 24s;
    animation-fill-mode:forwards;  
}

#storyline1{
    position: relative;
    top:252px;

    z-index: 0;
}

.play{
    width: 50px;
    left: 375px;
    top: -50px;
    position: relative;
}
.play img{
    width: 50px;
}

.animation_storyline1{
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-name: lab; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 14s; /* Chrome, Safari, Opera */
    animation-name: lab;
    animation-duration: 14s;
    animation-fill-mode:forwards;
}
#storyline2{
    background-color: white;
    z-index: 2;
    position: relative;
    width: 810px;
    height: 252px;
}

/*

Animation of the second part showing the three steps of data processing

*/

#storyline3{
    height: 320px;
    position: relative;
    background-color: white;
    color: #529f00;
    font-weight: bold;
}
#b_play{
    top: 50px;
}
.b_notextbox{
    height: 170px;
}
#b_01_report{
    top:30px;
    float:left;
    position:relative;
    opacity: 1;
    left:-450px;
}
#b_01_report img{
    height: 180px;
}

.animation_b_report{
    -webkit-animation-name: b_report; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    animation-name: b_report;
    animation-duration: 3s;
    animation-fill-mode:forwards;  
}

#b_02_arrow1{
        width:70px;
        opacity: 0;
        left:10px;
        top:60px;
        position:relative;
        float:left;
        text-align: center;
}


#b_02_arrow1 img{
    width: 65px;
}

#b_02_biology{
        width:170px;
        opacity: 0;
        left:10px;
        top:30px;
        position:relative;
        float:left;
        opacity: 0;
        text-align: center;
}

#b_02_biology img{
    width: 170px;
}
.animation_b_biology{
    -webkit-animation-name: b_biology; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 12s; /* Chrome, Safari, Opera */
    animation-name: b_biology;
    animation-duration: 12s;
    animation-fill-mode:forwards;
}
#b_03_arrow1{
        width:70px;
        opacity: 0;
        left:10px;
        top:60px;
        position:relative;
        float:left;
        text-align: center;
}

#b_03_arrow1 img{
    width: 65px;
}

#b_03_model{
        width:170px;
        opacity: 0;
        left:10px;
        top:30px;
        position:relative;
        float:left;
        opacity: 0;
        text-align: center;
}

#b_03_model img{
    width: 170px;
}
.animation_b_model{
    -webkit-animation-name: b_model; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 16s; /* Chrome, Safari, Opera */
    animation-name: b_model;
    animation-duration: 16s;
    animation-fill-mode:forwards;
}

#b_04_arrow1{
        width:70px;
        opacity: 0;
        left:10px;
        top:60px;
        position:relative;
        float:left;
        text-align: center;
}

#b_04_arrow1 img{
    width: 65px;
}

#b_04_visualization{
        width:170px;
        opacity: 0;
        left:10px;
        top:30px;
        position:relative;
        float:left;
        opacity: 0;
        text-align: center;
}

#b_04_visualization img{
    margin-top:20px;
    width: 170px;
}
.animation_b_visualization{
    -webkit-animation-name: b_visualization; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 24s; /* Chrome, Safari, Opera */
    animation-name: b_visualization;
    animation-duration: 24s;
    animation-fill-mode:forwards;
}


/*
Animation of finaly result
*/

#c_01_patient {
    width: 180px;
    height: 180px;
    position: relative;
    float:left;
}


#c_01_patient img{
   width:180px;
   left:-500px;
   top:20px;
   position:relative;

}
#c_01_patient_healed {
    width: 180px;
    height: 180px;
    position: relative;
    float:left;
    z-index:3;
    opacity: 0;
}


#c_01_patient_healed img{
   width:180px;
   left:-180px;
   top:20px;
   position:relative;
    left: -180px;
}

#c_02_arrow1{
        width:5px;
        opacity: 0;
        left:-100px;
        top:30px;
        position:relative;
        float:left;
        text-align: center;
}
#c_02_arrow1_reverse{
        opacity: 0;
        left:-100px;
        top:30px;
        position:relative;
        float:left;
        text-align: center;
        overflow: visible;

}

#c_02_arrow1 img{
    width: 126px;
}
#c_02_arrow1_reverse img{
    width: 126px;
}


#c_02_doctor{
       /*width:180px;*/
       opacity: 0;
       left:0px;
       position:relative;
       float:left;

}

#c_02_doctor img{
    width: 126px;
}
#c_02_doctor_question{
    left:-125px;
    float:left;
    position:relative;
    opacity: 0;
    z-index:3;
}

#c_02_doctor_question img{
    width: 126px;
}

#c_03_lab{
       width:572px;
       opacity: 1;
       left:72px;

       float:left;
       position:relative;
}
#c_03_lab img{
    width: 572px;
}
#c_04_arrow3{
    width:180px;
    padding-top: 31px;
    left:72px;
    float:left;
    position:relative;
    opacity: 0;

}


#c_04_arrow3 img{
    height: 200px;
}

#c_04_report{
    top:30px;
    float:left;
    position:relative;
    opacity: 0;
    overflow:visible;
    width: 5px;
}
#c_04_report img{
    height: 150px;
    margin-left:-100px;
}


#storyline4{
    position: relative;
    top:252px;
    z-index: 0;
}
.animation_storyline4{
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-name: lab_new; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 14s; /* Chrome, Safari, Opera */
    animation-name: lab_new;
    animation-duration: 14s;
    animation-fill-mode:forwards;
}
#storyline5{
    background-color: white;
    z-index: 2;
    position: relative;
    width: 810px;
    height: 252px;
}

.animation_healthy{
    -webkit-animation-name: healthy; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 28s; /* Chrome, Safari, Opera */
    animation-name: healthy;
    animation-duration: 28s;
    animation-fill-mode:forwards;
}

.animation_patient_out{
    -webkit-animation-name: healthy_out; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 28s; /* Chrome, Safari, Opera */
    animation-name: healthy_out;
    animation-duration: 28s;
    animation-fill-mode:forwards;
}
/*

The text boxes over and under each part
*/

.text_general{
    color:#529f00;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    width: 810px;
    font-family: Helvetica;
    opacity: 1;
    height: 30px;
}

.story{
    color:#529f00;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    width: 810px;
    font-family: Helvetica;
    opacity: 1;
}

.story_image{
    width: 90%;
}
.reload{
    width: 810px;
    text-align: center;
}
.reload img{
    width: 30px;
}

.roundcorner{
    border-radius: 200px;
    border: 4px solid #529f00;
    padding: 20px; 
    width: 100px;
    height: 100px;
    background-color: white;
    overflow: hidden;
    text-align: center;
}

.small{
    border-radius: 60px;
    border: 4px solid #529f00;
    padding: 3px; 
    width: 30px;
    height: 30px;
    left: 53px;
    position: relative;
}

.roundcorner img{
    width: 120px;
    left: -10px;
    position: relative;
}

/*

The skills classes
*/

.skills_rightwing{
    float:left;
    padding-left:20px;
    padding-top:50px;
    width:600px;
    text-align:justify;
}
.skills_rightwing_heading{
    color: #529f00;
    font-weight:bold;
    font-size: 1.3em;
}
@-webkit-keyframes imagemove {
        0%   {left: -500px;}
        100%   {left: 0px;}
}

@keyframes imagemove {
        0%   {left: -500px;}
        100%   {left: 0px;}
}


@-webkit-keyframes doctor {
        66%   {opacity: 0;}
        83%   {opacity: 1;}
        100%   {opacity: 1;}
}
/* Standard syntax */
@keyframes doctor{
        66%   {opacity: 0;}
        83%   {opacity: 1;}
        100%   {opacity: 1;}

}
@-webkit-keyframes doctor_arrow {
        40%   {opacity: 0;}
        90%   {opacity: 1;}
        100%   {opacity: 0;}
}
/* Standard syntax */
@keyframes doctor_arrow{
        40%   {opacity: 0;}
        90%   {opacity: 1;}
        100%   {opacity: 0;}

}

@-webkit-keyframes lab {
        0%   {top: 252px;}
        83%   {top: 252px;}
        100%   {top: 0;}
}
/* Standard syntax */
@keyframes lab{
        0%   {top: 252px;}
        83%   {top: 252px;}
        100%   {top: 0;}
}
@-webkit-keyframes lab_new {
        0%   {top: 252px;}
        57%   {top: 252px;}
        67% {top: 0;}
        100%   {top: 0;}
}
/* Standard syntax */
@keyframes lab_new{
        0%   {top: 252px;}
        57%   {top: 252px;}
        67% {top: 0;}
        100%   {top: 0;}
}
@-webkit-keyframes report{
        90%   {opacity: 0;}
        100%   {opacity: 1;}
}
/* Standard syntax */
@keyframes report{
        90%   {opacity: 0;}
        100%   {opacity: 1;}
}

@-webkit-keyframes question{
        80%   {opacity: 0;}
        100%   {opacity: 1;}
}
/* Standard syntax */
@keyframes question{
        80%   {opacity: 0;}
        100%   {opacity: 1;}
}
@-webkit-keyframes b_report{
        66%   {left: -450px;}
        100%   {left: 10px;}
}
/* Standard syntax */
@keyframes b_report{
        66%   {left: -450px;}
        100%   {left: 10px;}
}
@-webkit-keyframes b_biology{
        80%   {opacity: 0;}
        100%   {opacity: 1;}
}
/* Standard syntax */
@keyframes b_biology{
        83%   {opacity: 0;}
        93%   {opacity: 1;}
        100%   {opacity: 1;}
}
@-webkit-keyframes b_model{
        83%   {opacity: 0;}
        93%   {opacity: 1;}
        100%   {opacity: 1;}
}
/* Standard syntax */
@keyframes b_model{
        87.25%   {opacity: 0;}
        100%   {opacity: 1;}
}

@-webkit-keyframes b_visualization{
        83%   {opacity: 0;}
        93%   {opacity: 1;}
        100%   {opacity: 1;}
}
/* Standard syntax */
@keyframes b_visualization{
        83%   {opacity: 0;}
        93%   {opacity: 1;}
        100%   {opacity: 1;}
}

@-webkit-keyframes healthy{
        83%   {opacity: 0;}
        93%   {opacity: 1;}
        100%   {opacity: 1;}
}
/* Standard syntax */
@keyframes healthy{
        83%   {opacity: 0;}
        93%   {opacity: 1;}
        100%   {opacity: 1;}
}

@-webkit-keyframes healthy_out{
        83%   {opacity: 1;}
        85%   {opacity: 0;}
        100%   {opacity: 0;}
}
/* Standard syntax */
@keyframes healthy_out{
        83%   {opacity: 1;}
        85%   {opacity: 0;}
        100%   {opacity: 0;}
}

/*mobile stuff */
figure.wp-block-image.about_image {
    width: 100%;
    margin: 5%;
    border: 0 !important;
}
div.wp-block-image.about_image {
    width: 100%;
    margin: 5%;
    border: 0 !important;
}
.about_image img {
    width: 80%;
    border: 0;
}
div.wp-block-image.about_image.lefter{
    width: 40%;
    border: 0;
		margin: 1%;

	float: left;
}
figure.wp-block-image.about_image.lefter{
    width: 40%;
    border: 0;
	margin: 1%;
	float: left;
}