index-mobile.css 2.1 KB
#mobile_view{
    position: relative;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    height: 100vh;
    background-color: #2f2318;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min--moz-device-pixel-ratio:1.5), screen and (-o-min-device-pixel-ratio:1.5), screen and (min-device-pixel-ratio:1.5) {
    #logo {
        background-image: url(../images/logo_2x279486.png);
    }
    #arrow_down {
        background-image: url(../images/ui_2x2761ce.png);
        background-size: 659.6% 884.6%;
        background-position: 18.4% 73%;
    }
}
@media (orientation: portrait) and (max-width: 640pt) and (min-width: 360px) and (max-width: 414px) {
    body {
        font-size: 84%;
    }
}
#background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 500%;
    background-image: url(../images/mobile_background2740d2.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: all 0.6s;
}
#logo {
    position: fixed;
    z-index: 1000;
    display: block;
    width: 105px;
    height: 24px;
    left: 24px;
    top: 12px;
    background-image: url(../images/logo_2x279486.png);
    background-size: 100% 100%;
    cursor: pointer;
}

#arrow_down {
    position: fixed;
    display: block;
    z-index: 1000;
    width: 23.5px;
    height: 13.5px;
    bottom: 2.5%;
    left: 50%;
    margin-left: -12px;
    opacity: 0.8;
    background-image: url(../images/ui_2x2761ce.png);
    background-size: 659.6% 884.6%;
    background-position: 18.4% 73%;
}
.animateArrowDown {
    -webkit-animation: animateArrowDown 1.5s;
    animation: animateArrowDown 1.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes animateArrowDown {
    0% {
        opacity: 0.5;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    33% {
        opacity: 0.5;
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    100% {
        opacity: 0.5;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}