@font-face
{
    font-family: DejaVu;
    src: url(fonts/DejaVuSans.ttf);
}
@font-face
{
    font-family: DejaVuCondensed;
    src: url(fonts/DejaVuSansCondensed.ttf);
}
@font-face
{
    font-family: DejaVuCondensedBold;
    src: url(fonts/DejaVuSansCondensed-Bold.ttf);
}

@font-face
{
    font-family: DejaVuCondensedBold;
    src: url(fonts/DejaVuSansCondensed-Bold.ttf);
}

@font-face
{
    font-family: AkaDylan_Plain;
    src: url(fonts/akaDylan_Plain.ttf);
}

@font-face
{
    font-family: Kronika;
    src: url(fonts/KRONIKA.ttf);
}

@font-face
{
    font-family: Sansation_Bold;
    src: url(fonts/Sansation_Bold.ttf);
}

@font-face
{
    font-family: Sansation_Bold_Italic;
    src: url(fonts/Sansation_Bold_Italic.ttf);
}

@font-face
{
    font-family: Sansation_Italic;
    src: url(fonts/Sansation_Italic.ttf);
}

@font-face
{
    font-family: Sansation_Light;
    src: url(fonts/Sansation_Light.ttf);
}

@font-face
{
    font-family: Sansation_Light_Italic;
    src: url(fonts/Sansation_Light_Italic.ttf);
}

@font-face
{
    font-family: Sansation_Regular;
    src: url(fonts/Sansation_Regular.ttf);
}

.rotate {
    z-index:15;
    background-image:url(../assets/images/rotateimage.png);
    width:80%;
    height:80%;
    background-size:contain;
    position:absolute;
    top: 0px;
    left: 0px;
    background-position:center;
    background-repeat:no-repeat;
    display:none;
}

/* Smartphones on landscape */
@media only screen and (min-width: 321px) and (orientation:landscape){
    .rotate {
        display:block;
    }
    #gameCanvas {
        display:none;
    }
}

/* iPads on landscape */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation:landscape){
    .rotate {
        display:block;
    }
    #gameCanvas {
        display:none;
    }
}

/* iPhone 4 */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (min-device-pixel-ratio : 1.5) and (orientation:landscape){
    .rotate {
        display:block;
    }
    #gameCanvas {
        display:none;
    }
}

/* Desktops Min width is 1224px for landscape restriction */
@media only screen and (min-width: 0px){
    .rotate {
        display:none;
    }
    #gameCanvas {
        display:block;
    }
}