#lamp_shape {
    background-image: url(../../media/img/lamp/lamp_no_fogg.png);
    position: fixed;
    top: -5%;
    left: 20.5%;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
    width: 17%;
    height: 18%;
    transform-origin: top;
}

#lamp_shape {
    animation: rotation 10s infinite linear;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

#lamp_shadow {
    position: fixed;
    top: 6.5%;
    left: 14.5%;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
    width: 29%;
    height: 21%;
    transform-origin: top;
}

#lamp_shadow {
    animation: rot 10s infinite linear;
}

@keyframes rot {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
        top: 6.5%;
        left: 13.7%;
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-5deg);
        top: 6.5%;
        left: 15.3%;
    }
    100% {
        transform: rotate(0deg);
    }
}

#lamp_shadow_efc {
    animation: intens 22s infinite linear;
}

@keyframes intens {
    ∫ 0% {
        opacity: 1;
    }
    59 {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    61% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    66% {
        opacity: 0;
    }
    67% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

#window_fe_lh_light {
    background: url(../../media/IMG/lamp/LH_lights.png);
    position: fixed;
    top: 11.2%;
    left: 57.5%;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    width: 21%;
    height: 7%;
}

#window_fe_lh_light {
    animation: opac 7s infinite linear;
}

@keyframes opac {
    0% {
        opacity: 1;
    }
    45% {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.text_1_anm {
    background: url(../../media/IMG/bocadillos/bocadillos_intro.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 120%;
    top: 6%;
    left: 7%;
    z-index: 7;
}

.text_1_anm_end {
    background: url(../../media/IMG/bocadillos/bocadillos_intro.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 120%;
    top: -100%;
    left: 7%;
    z-index: 7;
    transition: all 2s;
}

.RP_anm {
    background: url(../../media/IMG/charecter/rp_1.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 120%;
    top: 6%;
    left: 51%;
    z-index: 7;
}

.RP_anm {
    animation: eyes 7s infinite;
}

@keyframes eyes {
    0% {
        background-image: url(../../media/IMG/charecter/rp_1.png);
    }
    48% {
        background-image: url(../../media/IMG/charecter/rp_1.png);
    }
    50% {
        background-image: url(../../media/IMG/charecter/rp_1_eyes.png);
    }
    54% {
        background-image: url(../../media/IMG/charecter/rp_1.png);
    }
    100% {
        background-image: url(../../media/IMG/charecter/rp_1.png);
    }
}

.RP_anm_end {
    background: url(../../media/IMG/charecter/rp_set_2.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 17%;
    height: 57%;
    top: 28%;
    left: 38%;
    z-index: 7;
    transition: 1s;
}

.RP_set_3 {
    background: url(../../media/IMG/charecter/rp_set_3.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 17%;
    height: 57%;
    top: 28%;
    left: 38%;
    z-index: 6;
    transition: ease 0s;
}

.JOE_anm {
    background: url(../../media/IMG/charecter/joe_set_2.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 26%;
    height: 40%;
    top: 45%;
    left: 70%;
    z-index: 3;
}


/**
.JOE_set_3{
    background: url(../../media/IMG/charecter/joe_set_3.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 26%;
    height: 40%;
    top: 45%;
    left: 70%;
    z-index: 3;
}
**/

.text_2_anm {
    background: url(../../media/IMG/bocadillos/text_2_joe.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 120%;
    top: 200%;
    left: 7%;
    z-index: 7;
}

.text_joe_2_end {
    background: url(../../media/IMG/bocadillos/text_2_joe.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 30%;
    top: 4%;
    left: 7%;
    z-index: 7;
    transition: ease 1.5s;
}

.text_joe_2_up {
    background: url(../../media/IMG/bocadillos/text_2_joe.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 30%;
    top: -100%;
    left: 7%;
    z-index: 7;
    transition: ease 1.5s;
}

.text_rp_3_up {
    background: url(../../media/IMG/bocadillos/text_rp_set_3.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 30%;
    top: 200%;
    left: 7%;
    z-index: 7;
    transition: ease 1.5s;
}

.text_rp_3_mid {
    background: url(../../media/IMG/bocadillos/text_rp_set_3.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 30%;
    top: 4%;
    left: 7%;
    z-index: 7;
    transition: ease 1.5s;
}

.text_rp_3_end {
    background: url(../../media/IMG/bocadillos/text_rp_set_3.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 30%;
    top: -100%;
    left: 7%;
    z-index: 7;
    transition: ease 1.2s;
}

.text_joe_4_up {
    background: url(../../media/IMG/bocadillos/text_joe_set_4.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 30%;
    top: 200%;
    left: 7%;
    z-index: 7;
    transition: ease 1.5s;
}

.text_joe_4_mid {
    background: url(../../media/IMG/bocadillos/text_joe_set_4.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 30%;
    top: 4%;
    left: 7%;
    z-index: 7;
    transition: ease 1.5s;
}

.text_joe_4_end {
    background: url(../../media/IMG/bocadillos/text_joe_set_4.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 30%;
    top: -100%;
    left: 7%;
    z-index: 7;
    transition: ease 1.2s;
}

.text_rp_e2_up {
    background: url(../../media/IMG/bocadillos/text_joe_set_4.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 30%;
    top: 200%;
    left: 7%;
    z-index: 7;
    transition: ease 1.5s;
}

.text_rp_e2_mid {
    background: url(../../media/IMG/bocadillos/text_joe_set_4.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 30%;
    top: 4%;
    left: 7%;
    z-index: 7;
    transition: ease 1.5s;
}

.text_rp_e3_end {
    background: url(../../media/IMG/bocadillos/text_joe_set_4.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 30%;
    top: -100%;
    left: 7%;
    z-index: 7;
    transition: ease 1.2s;
}

/** ARTHUR PAGE **/

.arthur_anm {
    background: url("../../media/IMG/doc_ex/Arthur_Gordon_set.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: fixed;
    top: 120%;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -2;
    
}

.arthur_anm_end {
    background: url("../../media/IMG/doc_ex/Arthur_Gordon_set.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 6;
    transition: all 2s;
}

/** ARTHUR IMG MAP **/

.arthur_img_1_s{
    position: absolute;
    background: url(../../media/IMG/arthur_map.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: 18.5%;
    left: 69%;
    width: 27%;
    height: 31%;
    z-index: 7;
}

.arthur_img_1_up{
    margin: 5% 15%;
    position: absolute;
    background: url(../../media/IMG/arthur_map.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: 0%;
    left: 0%;
    width: 67.5%;
    height: 75%;
    z-index: 10;
}

/** ARTHUR IMG MAP BACK **/

.img_back_s_1_ag{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.);
    top: 18.5%;
    left: 69%;
    width: 27%;
    height: 31%;
    z-index: 6;
    
}

.img_back_s_1_ag_end{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 9;
}

/** ARTHUR IMG POTRAIT **/

.arthur_img_2_s{
    position: absolute;
    background: url(../../media/IMG/ag_portrait.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: 53.5%;
    left: 69%;
    width: 27%;
    height: 31%;
    z-index: 7;
}

.arthur_img_2_up{
    margin: 5% 15%;
    position: absolute;
    background: url(../../media/IMG/ag_portrait.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: 0%;
    left: 0%;
    width: 67.5%;
    height: 75%;
    z-index: 10;
}

/** ARTHUR IMG POTREIT BACK **/

.img_back_s_2_ag{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.);
    top: 53.5%;
    left: 69%;
    width: 27%;
    height: 31%;
    z-index: 6;
    
}

.img_back_s_2_ag_end{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 9;
}

.arthur_text_s{
    background: url(../../media/IMG/doc_ex/._Arthur_Gordon_text.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: fixed;
    top: 10%;
    left: 15%;
    width: 80%;
    height: 60%;
    transition: all 1.5s;
    z-index: 22;
}


.text_rp_e2_start {
    background: url(../../media/IMG/bocadillos/bocadillos_intro.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 120%;
    top: 200%;
    left: 7%;
    z-index: 7;
}

.text_rp_e2_up {
    background: url(../../media/IMG/bocadillos/bocadillos_intro.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 120%;
    top: 6%;
    left: 7%;
    z-index: 7;
}

.text_rp_e2_end {
    background: url(../../media/IMG/bocadillos/bocadillos_intro.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 37%;
    height: 120%;
    top: -100%;
    left: 7%;
    z-index: 7;
    transition: all 2s;
}