body {
    font-family: sans-serif;
    overscroll-behavior-y: none;
    background-color:black;
}

/* Safari syntax */
:-webkit-full-screen {
 
}

/* IE11 */
:-ms-fullscreen {
 
}

/* Standard syntax */
:fullscreen {
 
}

.verticalspace10{
    position:relative;
    width:100%;
    height:10px;
    float:left;
}

.horizontalspace10{
    position:relative;
    width:10px;
    height:10px;
    float:left;
}

@media only screen and (max-width: 768px) {
    /* For mobile: */

    .reachname{
        position:relative;
        width:calc(100% - 50px);
        height:auto;
        float:left;
        left:25px;
    }

    .linebutton {
        position: relative;
        width: 240px;
        height: 50px;
        float: left;
        left: calc(50% - 120px);
    
    }

    .topbar {
        position: relative;
        width: 100%;
        height: auto;
        float: left;
        background-color: rgba(0,0,0,0.6);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    }

    .mobileseprator{
        position:relative;
        width:100%;
        height:10px;
        float:left;
    }

    .contentoptionscontainer {
        position: relative;
        width: 100%;
        height: auto;
        float: left;
    }

    .cagegorybutton {
        position: relative;
        width: 20%;
        height: auto;
        float: left;
    }

    .cagegorybuttonimage {
        position: relative;
        width: calc(100% - 4px);
        height: auto;
        float: left;
        left: 2px;
        top: 2px;
        border-radius: 5px;
        background-color: gray;
    }

    .cagegorybuttonimage_selected {
        position: relative;
        width: calc(100% - 4px);
        height: auto;
        float: left;
        left: 2px;
        top: 2px;
        border-radius: 5px;
        background-color: black;
    }

    .servicebuttoncontainer {
        position: absolute;
        width: 100%;
        height: 50px;
        top: 10px;
        right: 2px;
    }

    .pcseprator {
        display:none;
    }

    .featuredtile {
        position: relative;
        height: auto;
        float: left;
        background-color: black;
        overflow:hidden;
    }

    .featuredtile_inner {
        position: relative;
        width: calc(100% - 60px);
        height: auto;
        float: left;
        left: 30px;
    }

    .featuredtiletopspace {
        position: relative;
        width: 100%;
        height: 30px;
        float: left;
    }


    .tabtopspace {
        position: relative;
        width: 100%;
        height: 30px;
        float: left;
    }

    .featuredtile_thumbnail_right {
        position: relative;
        width: 100%;
        height: auto;
        float: right;
    }

    .featuredtile_title {
        position: relative;
        height: auto;
        float: left;
        font-size: 25px;
    }

    .featuredmobilesepartor{
        position:relative;
        width:100%;
        height:30px;
        float:left;
    }

    .featuredtile_titlecast {
        position: relative;
        height: auto;
        float: left;
        font-size: 15px;
    }

    .featuredtile_titledescription {
        position: relative;
        height: auto;
        float: left;
        font-size: 14px;
    }

    .featuredtile_playbutton {
        position: relative;
        width: 120px;
        height: 50px;
        float: left;
        border-radius: 5px;
        border: 1px solid lightgray;
        background-color: white;
        font-size: 14px;
    }

    .normaltile {
        position: relative;
        width: 50%;
        height: auto;
        float: left;
    }

    .normaltile_inner {
        position: relative;
        width: 100%;
        height: auto;
        float: left;
        overflow:hidden;
    }

    .categorydiv {
        position: relative;
        width: calc(100% - 12px);
        height: auto;
        float: left;
        background-color: black;
        color:white;
        left:6px;
    }

    .categorytitle {
        position: relative;
        width: 100%;
        height: 30px;
    }

    .categorytitleinner {
        position: relative;
        width: calc(100% - 20px);
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        font-weight:bold;
        left: 10px;
    }

    .normaltile_title {
        position: relative;
        width: 100%;
        height: 30px;
        line-height: 30px;
        float: left;
        font-size: 16px;
        font-weight: bold;
    }

    .normaltile_moivecast {
        position: relative;
        width: 100%;
        height: auto;
        float: left;
        font-size: 12px;
    }

    .normaltile_thumbnail_left {
        position: relative;
        width: calc(100% - 3px);
        height: auto;
        float: left;
    }


    .normaltile_thumbnail_right {
        position: relative;
        width: calc(100% - 3px);
        height: auto;
        float: right;
    }


    .normaltile_data {
        position: relative;
        width: calc(100% - 20px);
        height: auto;
        float: left;
        left: 10px;
    }

    .featuredtile_detail_left {
        position: relative;
        width: 100%;
        height: auto;
        float: left;
        background-color:black;
        color:white;
    }


    .featuredinfocontainer {
        position: relative;
        width: 100%;
        height: auto;
    }

    .normaltile_HR {
        position: relative;
        width: 100%;
        height: auto;
        float: left;
    }

    .mobile{
        display:block;
    }

    .pc{
        display:none;
    }

    .welcome {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url('images/Welcome_mobile.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .startbtn {
        position: absolute;
        top: calc(100% - 250px);
        width: 240px;
        height: 50px;
        left: calc(50% - 120px);
    }

}

@media only screen and (min-width: 768px) {
    /* For desktop: */

    ::-webkit-scrollbar {
        width: 15px;
        height: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.2);
        border-radius: 5px;
        display: block;
    }

        ::-webkit-scrollbar-thumb:hover {
            background: #220a37;
            display: block;
            cursor: pointer;
        }

    ::-webkit-scrollbar-track {
        background: rgba(255,255,255,0);
        border-radius: 0px;
        box-shadow: inset 0px 0px 30px 0px rgba(255,255,255,0);
    }

        ::-webkit-scrollbar-track:hover {
            background: rgba(0,0,0,0);
            cursor: pointer;
        }

    .reachname {
        position: relative;
        width: 300px;
        height: auto;
        float: left;
        left: calc(50% - 150px);
    }

    .linebutton{
        position:relative;
        width:240px;
        height:50px;
        float:left;
        left:calc(50% - 120px);
    }

    .linebutton:hover{
        cursor:pointer;
    }

    .topbar {
        position: relative;
        width: 100%;
        height: auto;
        float: left;
        background-color: rgba(0,0,0,0.5);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    }

    .mobileseprator{
        display:none;
    }


    .contentoptionscontainer{
        position:absolute;
        width:400px;
        height:auto;
        float:left;
        left:calc(50% - 200px);
        top:10px;
    }

    .cagegorybutton {
        position: relative;
        width: 80px;
        height: auto;
        float: left;
    }

    .cagegorybutton:hover{
        cursor:pointer;
    }

    .cagegorybuttonimage {
        position: relative;
        width: calc(100% - 4px);
        height: auto;
        float: left;
        left: 2px;
        top: 2px;
        border-radius: 5px;
        background-color: gray;
    }

    .cagegorybuttonimage_selected {
        position: relative;
        width: calc(100% - 4px);
        height: auto;
        float: left;
        left: 2px;
        top: 2px;
        border-radius: 5px;
        background-color: black;
    }


    .servicebuttoncontainer {
        position: absolute;
        width: 80px;
        height: 50px;
        top: 10px;
        right: 10px;
    }

    .pcseprator {
        position: relative;
        width: 100%;
        height: 5px;
        float: left;
    }

    .featuredtile{
        position:relative;
        width:100%;
        height:auto;
        float:left;
        background-color:black;
        overflow:hidden;
        color:white;
    }

    .featuredtile_inner {
        position: relative;
        width: calc(100% - 50px);
        height: auto;
        float: left;
        left: 50px;
    }

    .featuredtiletopspace {
        position: relative;
        width: 100%;
        height: 50px;
        float: left;
    }

    .tabtopspace{
        position:relative;
        width:100%;
        height:50px;
        float:left;
    }

    .featuredtile_thumbnail_right{
        position:relative;
        width:300px;
        height:auto;
        float:right;
    }

    .featuredtile_thumbnail_right:hover{
        cursor:pointer;
    }

    .featuredtile_detail_left{
        position:relative;
        width:100%;
        height:auto;
        float:left;
    }

    .featuredtile_title{
        position:relative;
        height:auto;
        float:left;
        font-size:30px;
        font-weight:bold;
        color:white;
    }

    .featuredmobilesepartor{
        display:none;
    }

    .featuredtile_titlecast {
        position: relative;
        height: auto;
        float: left;
        font-size: 20px;
        font-weight:bold;
        color:white;
    }


    .featuredtile_titledescription {
        position: relative;
        height: auto;
        float: left;
        font-size: 12px;
        color: white;
    }

    .featuredtile_playbutton{
        position:relative;
        width:120px;
        height:50px;
        float:left;
        border-radius:5px;
        border:1px solid lightgray;
        background-color:white;
        font-size:14px;
    }

    .featuredtile_playbutton:hover{
        cursor:pointer;
    }

    .normaltile{
        position:relative;
        width:14.28%;
        height:auto;
        float:left;
    }

    .normaltile_inner {
        position: relative;
        width: calc(100% - 20px);
        height: auto;
        float: left;
        left:10px;
        overflow:hidden;
        background-color:black;
        border-radius:10px;
    }

    .categorydiv{
        position:relative;
        width:calc(100% - 100px);
        height:auto;
        float:left;
        left:50px;
        color:white;
        border-radius:10px;
        overflow:hidden;
    }

    .categorytitle{
        position:relative;
        width:100%;
        height:30px;
    }

    .categorytitleinner{
        position:relative;
        width:calc(100% - 20px);
        height:30px;
        line-height:30px;
        font-size:20px;
        font-weight:bold;
        left:10px;
    }

    .normaltile_title{
        position:relative;
        width:100%;
        height:30px;
        line-height:30px;
        float:left;
        font-size:14px;
        font-weight:bold;
    }

    .normaltile_moivecast {
        position: relative;
        width: 100%;
        height: auto;
        float: left;
        font-size: 12px;
    }

    .normaltile_thumbnail {
        position: relative;
        width: calc(100% - 10px);
        height: auto;
        float: left;
        overflow:hidden;
        left:5px;
    }

    .normaltile_thumbnail:hover{
        cursor:pointer;
    }

    .normaltile_data {
        position: relative;
        width: calc(100% - 20px);
        height: auto;
        float: left;
        left:10px;
    }

    .featuredinfocontainer {
        position: absolute;
        width: 500px;
        height: auto;
        left: 0px;
    }

    .normaltile_HR{
        position:relative;
        width:25%;
        height:auto;
        float:left;
    }

    .mobile {
        display: none;
    }

    .pc {
        display: block;
    }

    .welcome {
        position:absolute;
        width:100%;
        height:100%;
        background-image: url('images/Welcome_PC.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .startbtn {
        position: absolute;
        width: 240px;
        height: 50px;
        left: calc(50% - 120px);
        top: calc(100% - 150px);
    }

    .startbtn:hover{
        cursor:pointer;
    }
        
}