@media all and (orientation:portrait) {
    .r5Table{
        grid-template-columns: 100%;
    }
    .r5StoreText{
        display:none;
    }
    .r5StoreTable{
        grid-template-columns: 48px minmax(auto, 12em) auto;
    }
    .r5Avatar{
        width: 128px;
        height: 128px;
    }
    .r5WBox{
        height: 2em;
    }
    .r5TagTable,
    .r5StoreTag,
    .r5StoreCache,
    .r5StoreTable{
        margin-left: 2em;
        margin-right: 2em;
    }
    .r5TagTitleText{
        font-size: 42px;
    }
    .r5TagTable {
        grid-template-columns: 128px auto;
    }
    .r5TagTitleAvatar { grid-area: 1 / 1 / 2 / 2; }
    .r5TagTitleText { grid-area: 1 / 2 / 2 / 3; }
    .r5PlatformBox { grid-area: 2 / 1 / 3 / 3; }
    .r5WBox { grid-area: 3 / 1 / 4 / 3; }
}
@media all and (orientation:landscape) {
    .r5Table{
        grid-template-columns: 70% 30%;
    }
    .r5StoreTable{
        grid-template-columns: 48px 120px minmax(auto, 12em) auto;
    }
    .r5Avatar{
        width: 242px;
        height: 242px;
    }
    .r5WBox{
        margin-top: 1em;
    }
    .r5TagTable,
    .r5StoreCache,
    .r5StoreTable{
        margin-left: 4em;
        margin-right: 4em;
    }
    .r5StoreTag{
        margin-left: 2em;
        margin-right: 2em;
    }
    .r5TagTitleText{
        font-size: 60px;
    }
    .r5TagTable {
        grid-template-columns: 242px auto;
        /*grid-template-rows: repeat(3, 1fr);*/
    }

    .r5TagTitleAvatar { grid-area: 1 / 1 / 4 / 2; }
    .r5TagTitleText { grid-area: 1 / 2 / 2 / 3; }
    .r5PlatformBox { grid-area: 2 / 2 / 3 / 3; }
    .r5WBox { grid-area: 3 / 2 / 4 / 3; }

}

.analyzeUserListHead{
    color: #254d6e;
}

.r5Table, .analyzeAndTrailers {
    /*width: 80%;*/
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4em;
    border-top-left-radius: 45px;
    border-bottom-left-radius: 45px;
    border: 1px solid #254D6E;
}
.r5Table{
    display: grid;
    grid-column-gap: 0.8em;
}

.r5Table,
.analyzeAndTrailers,
.analyzeUserListHead,
.analyzeUserListBody{
    max-width: 1920px;
}

.r5TagText{
    color: #254D6E !important;
    border-bottom: 1px solid #254D6E;
}
.r5TagDesc,
.r5TagDesc > a{
    color: #000 !important;
}
.r5Col1, .analyzeAndTrailers{
    background-color: #254D6E;
    box-shadow: 1px 2px 29px 2px rgba(0, 0, 0, 0.3);
    border-radius: 45px;
}
.r5Col2{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
}
.r5TagTable{
    display: grid;
    grid-column-gap: 0.8em;
    font-family: 'Montserrat';
}
.r5Avatar{
    border-radius: 23px;
}

/*.r5TagTitle{
    font-style: normal;
    font-weight: 800;
    line-height: 78px;
}*/
.r5PlatformBox{
    border-top: 1px solid #F8F8F8;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    /* identical to box height */

}
.r5PlatformBox > a > div{
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid #F8F8F8;
    border-radius: 23px;

    text-align: center;

    display: inline-block;

    padding-left: 1em;
    padding-right: 1em;
    margin-top: 1em;
    margin-left: 0.5em;
}
.r5StoreTag{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 39px;

    border-bottom: 1px solid #F8F8F8;
    padding-bottom: 0.2em;
    margin-top: 1.8em;
}
.r5TagTitleText{
    max-height: 242px;
    overflow: hidden;
}
.r5WBox{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 12px;

    align-items: center;

    display: grid;
    grid-template-columns: 138px auto;
    grid-column-gap: 0.8em;
}
.r5LikeBox{
    display: grid;
    grid-template-columns: auto 80px 42px;
    grid-column-gap: 0.8em;
    margin-top: 2em;
    margin-left: 4em;
    margin-right: 4em;
}

#r5WBox3,
#r5WBox4{
    padding-top: 1.6em;
}
.icon-complete,
.icon-victoryCup{
    font-size:2.8em;
}
.r5WBox > div{
    margin-right: 1em;
}

#r5WBox3, #r5WBox4, .victoryTrophy{
    text-align: right;
    font-size: 1.8em;
}

#r5WBox3 > span,
#r5WBox4 > span{
    margin-right: 0.2em;
}

.r5WBox,
.r5LikeBox,
.victoryTrophy,
.r5StoreTag,
.r5StoreTable,
.r5StoreCache,
.r5TagTitleText,
.analyzeAndTrailersHeader,
.analyzeAndTrailersBody,
.r5PlatformBox > a > div{
    color: #F8F8F8;
}

.r5StoreTable{
    display: grid;
    grid-column-gap: 0.8em;
    margin-bottom: 8em;
}
.r5StoreIcons{
    width: 48px;
    height: 48px;
}
.r5StoreText, .r5StoreText2{
    padding-top: 12px;
    font-weight: 400;
    font-size: 18px;
}
.r5StoreText2{
    text-align: center;
    font-weight: 500;
    font-size: 0.9em;
    padding-top: 10px;
}
.r5StorePrice{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;

    background: rgba(255,255,255,0.15);

    border: 1px solid #F8F8F8;
    border-radius: 48px;
    text-align: center;

    padding: 0.2em;
    margin-top: 10px;
}
.discountFullPrice {
    text-decoration: line-through;
    margin-right: 0.2em;
}
.discountPercentage{
    color: #33cc33;
}
.r5DiscountRow{
    margin-top: 0.6em;
}
.r5TagText{
    width: 95%;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    line-height: 24px;

    padding-top: 1.2em;

    margin-bottom:0.4em;
    padding-bottom: 0.4em;
}
.r5TagDesc{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    padding-bottom: 0.8em;
}


.r5Mini{
    width: 32px;
}
.r5SubLogo{
    height: 32px;
    border-radius: 48px;
    background: #fff;
    margin-right: 0.8em;
}

.systemReqGrid{
    display: grid;
    grid-template-columns: 48px 1fr 48px 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    margin-top: .3em;
    padding: .4em;
}
.analyzeAndTrailers div:first-child{
    border-top: none !important;
}
.newsGrid,
.analyzeAndTrailersHeader,
.analyzeAndTrailersBody{
    padding: 1.8em;
}
.analyzeAndTrailersHeader{
    text-align: center;
    font-size: 1.2em;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    padding-top: .4em;
    padding-bottom: .4em;
}
.newsGrid{
    margin-top: 1.4em;
}
.analyzeAndTrailersBody{
    margin-bottom: 1.4em;
}
.analyzeAndTrailersBody iframe{
    display:block;
}
.analyzeAndTrailersBody .youtube{
    width: 80%;
    height: 512px;
    margin-left: auto;
    margin-right: auto;
}
.analyzeAndTrailersBody > img{
    max-width: 100%;
}

.analyzeUserListHead{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid #fff;
    padding-bottom: 0.4em;
    margin-bottom: 0.4em;
    margin-right: auto;
    margin-left: auto;
}
.analyzeUserListBody{
    margin-right: auto;
    margin-left: auto;
    overflow-x: auto;
    white-space: nowrap;
    height: 256px;
}
.analyzeUserListBody > div{
    display: inline-block;
    margin: 5px;
    width: 164px;
    height: 212px;
    border: 1px solid #ccc;
    padding: 10px;
    background: #f8f8f8;
    border-radius: 17px;
    text-align: center;
}
.analyzeUserListBody > div > a > img{
    width:128px;
    height:128px;
}
.analyzeUserListBody > div > a > h2{
    display: block; /* Fallback for non-webkit */
    display: -webkit-box;
    height: 72px; /* Fallback for non-webkit */
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.newsGrid{
    display: grid;
    grid-template-columns: 75% 25%;
    grid-column-gap: 0.8em;
    border-radius: 17px;
    background: #f8f8f8;
}
.newsGrid a{
    color: #254d6e;
}
.newsGridHead,
.newsGrid div:first-child{
    font-size: 20px;
}
.newsGrid div:last-child{
    text-align: right;
}
.setCursorHand{
    cursor: pointer;
}
.setLiked{
    color:gold;
}
#evoLiveDataLoad{
    text-align: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 48px;
}

.r5Buttons{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-column-gap: 0.8em;
}
.r5Buttons span{
    font-size: 2em;
}
.r5Buttons > div{
    margin-right: 0.50em;
    cursor: pointer;
}

@media (prefers-color-scheme: dark){
    .r5TagDesc,
    .r5TagDesc > a,
    .r5TagText{
        color: #FFFFFF !important;
    }
    .r5TagText{
        border-bottom: 1px solid #fff;
    }
    .analyzeUserListHead{
        color: #F8F8F8;
    }
}