@media screen and (orientation:portrait) {
    #ios-iframe-scroller .top {
        position: fixed;
        top: 0;
        left: 0;
        height: 50%;
        width: 100%;
    }

    #ios-iframe-scroller .bottom {
        position: fixed;
        top: 60%;
        left: 0;
        height: 40%;
        width: 100%;
    }
}
@media screen and (orientation:landscape) {
    #ios-iframe-scroller .top {
        position: fixed;
        top: 0;
        left: 0;
        height: 86%;
        width: 100%;
    }
}

html.ioschrome {
    overflow:auto;
}

body.ioschrome {
    overflow:auto;
}

#ios13scroller {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

#ios13prompt {
    position:fixed;
    top:0px;
    left:5px;
    background: url("../img/ios13.png") no-repeat top;
    background-size:contain;
    width: 190px;
    height:51px;
    vertical-align: middle;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#777777;
    font-size:14px;
    padding:11px 0px 0px 0px;
    text-align:center;
}

#ios13prompt span {
    color:#001041;
}
#ios13prompt span.smaller {
    font-size:10px;
}

#ios-iframe-scroller.preloader {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

#ios-scroller {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.swipe {
    background: url("../img/arrow.png") no-repeat center;
    background-size:contain;
    position: absolute;
    height: 60%;
    width: 9.6%;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}

.gem {
    background: url("../img/logo.png") no-repeat center;
    background-size:contain;
    animation: MoveUpLandscape 3s ease-in-out infinite;
    position: absolute;
    height: 11%;
    width: 11%;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 70%;
    opacity:0.8;
}

.hand {
    background: url("../img/swipeup.png") no-repeat center;
    background-size:contain;
    animation: MoveUpLandscape2 3s ease-in-out infinite;
    position: absolute;
    height: 35%;
    width: 35%;
    transform: translate(-20%,-50%);
    left: 50%;
    top: 70%;
}

@media screen and (orientation:portrait) {
    .gem {
        animation: MoveUpPortrait 3s ease-in-out infinite;
        left: 50%;
        top: 70%;
    }

    .hand {
        animation: MoveUpPortrait2 3s ease-in-out infinite;
        left: 50%;
        top: 70%;
    }
}

@keyframes MoveUpLandscape {
    0% { top: 75%; opacity: 0; filter: alpha(opacity=0); width:11%; height:11%}
    15% { top: 75%; opacity: 1; filter: alpha(opacity=100);}
    25% { top: 75%; opacity: 1; filter: alpha(opacity=100);}
    75% { top: 25%; opacity: 1; filter: alpha(opacity=100);}
    80% { top: 25%; opacity: 1; filter: alpha(opacity=100); width:11%; height:11%}
    100% { top: 25%; opacity: 0; filter: alpha(opacity=0); width:22%; height:22%}
}

@keyframes MoveUpPortrait {
    0% { top: 70%; opacity: 0; filter: alpha(opacity=0); width:11%; height:11%}
    15% { top: 70%; opacity: 1; filter: alpha(opacity=100);}
    25% { top: 70%; opacity: 1; filter: alpha(opacity=100);}
    75% { top: 35%; opacity: 1; filter: alpha(opacity=100);}
    80% { top: 35%; opacity: 1; filter: alpha(opacity=100); width:11%; height:11%}
    100% { top: 35%; opacity: 0; filter: alpha(opacity=0); width:22%; height:22%}
}

@keyframes MoveUpLandscape2 {
    0% { top: 75%; opacity: 0; filter: alpha(opacity=0);}
    5% { top: 75%; opacity: 0; filter: alpha(opacity=0);}
    25% { top: 75%; opacity: 1; filter: alpha(opacity=100);}
    75% { top: 25%; opacity: 1; filter: alpha(opacity=100);}
    95% { top: 25%; opacity: 0; filter: alpha(opacity=0);}
    100% { top: 25%; opacity: 0; filter: alpha(opacity=0);}
}

@keyframes MoveUpPortrait2 {
    0% { top: 70%; opacity: 0; filter: alpha(opacity=0);}
    5% { top: 70%; opacity: 0; filter: alpha(opacity=0);}
    25% { top: 70%; opacity: 1; filter: alpha(opacity=100);}
    75% { top: 35%; opacity: 1; filter: alpha(opacity=100);}
    95% { top: 35%; opacity: 0; filter: alpha(opacity=0);}
    100% { top: 35%; opacity: 0; filter: alpha(opacity=0);}
}