#touchPortrait h1 {
margin: 0px 0px 20px 0px;
font-size: 21px;
line-height: 32px;
height: 400px;
}
#touchPortrait {
position: fixed;
left: 0;
top: 0;
z-index: 12000;
color: white;
text-align: center;
width: 100%;
height: 100%;
-moz-text-shadow: 2px 2px 3px rgba(0, 0, 0, .5);
-webkit-text-shadow: 2px 2px 3px rgba(0, 0, 0, .5);
text-shadow: 2px 2px 3px rgba(0, 0, 0, .5);
background: black;
display: none;
}
/*#touchPortrait {
color: #fff;
text-align: center;
-webkit-text-shadow: 2px 2px 3px rgba(0, 0, 0, .5);
text-shadow: 2px 2px 3px rgba(0, 0, 0, .5);
}*/
@media screen and (-webkit-min-device-pixel-ratio: 2), not all {
    #touchPortrait #touchAnimation {
        background-image: url('../../images/rotateDevice2x.png');
    }
}
    #touchPortrait #touchAnimation {
        position: absolute;
        height: 60%;
        top: 40%;
        left: 0;
        width: 100%;
        background: url('../../images/rotateDevice.png') no-repeat center center;
        margin: 0 auto;
        padding: 0;
        background-size: auto 100%;
        -webkit-animation-name: anim;
        animation-name: anim;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
    }

    @-webkit-keyframes anim {
        0% {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
        100% {
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }
    }