﻿@font-face {
    font-family: 'Adobe-Arabic-Regular';
    src: url('../fonts/Adobe-Arabic-Regular.otf');
    src: local('Adobe-Arabic-Regular'), url('../fonts/Adobe-Arabic-Regular.otf') format('opentype');
}

body {
    font-family: 'Adobe-Arabic-Regular';
    direction: rtl;
}

.landing a img, .guess-exit, .end-exit, .next-game, .passport-exit {
    transform: scaleX(-1);
}

.passport {
    font-family: 'Adobe-Arabic-Regular';
}

.airport {
transform:scaleX(1);
}

.home .sections p {
    font-size: 0.7em;
}

.levels-header-right img {
margin-right:5px;
}

.gender .radio-helper {
margin-right:0px;
margin-left:10px;
}

.header-right {
    left: 5vw;
    right: auto;
}

.sidenav .menu-item img {
margin-left:10px;
}
.nav-header {
    left: auto;
    position: relative;
    z-index: 10000;
    right: 5vw;
}

.header-left {
right:5vw;
left:auto;
}

.sidenav {
    left: 0;
    right: auto;
}

.home .strain-right {
margin-left:4.5vw;
margin-right:auto;
}
.home .strain-left {
    margin-right: 4.5vw;
    margin-left: auto;
}

.guess-letters-suggestions .letter-block {
    font-size:4vw;
}
#passwordForm {
    text-align: right;
}

.levels-header-left {
    float: right;
}

.levels-header-right {
    float: left;
}
.action-btns p{float:right;}
.action-btns img{float:left;}

.levels .titleSection{padding:70px 0 40px;text-align:center;font-family:Adobe-Arabic-Regular;text-transform:uppercase;}

.loginContainer .inputBox{text-align:right;}
.loginContainer .inputBox label{text-align: right;}
.loginContainer .inputBox .txtInput{text-align: right;}
.loginContainer .checkin img{float:left;}

.header .headerContainer .headerContent .logo{float:right;}
.header .headerContainer .headerContent .menuLi{float:right;font-family:Adobe-Arabic-Regular;}
.header .headerContainer .headerContent .menuLi img{padding-right:5px;}
.header .headerContainer .headerContent .welcome{padding-right:15px;padding-left:unset;font-family:Adobe-Arabic-Regular;padding-top:33px;}
.header .headerContainer .headerContent .welcome .txt{float:right;font-family:Adobe-Arabic-Regular;}
.header .headerContainer .headerContent .welcome .txt span{padding-left:3px;float:right;font-family:Adobe-Arabic-Regular;}
.header .headerContainer .headerContent .welcome .pts{float:left;}
.header .headerContainer .headerContent .welcome .pts span{float:left;padding-right:3px;padding-top:3px;}
.header .headerContainer .headerContent .welcome img{padding-right:5px;padding-left:5px;float:right;}

.chooseLanguage .langContainer .languageLink img{float:left;transform:rotate(180deg);}

.dashboardPage .carousel .ms-slide .gameContent .infoSec {float: right;}
.dashboardPage .carousel .ms-slide .gameContent .watch{float:left;left:25px;right:unset}
.dashboardPage .carousel .ms-slide .gameContent .infoSec .btnPlay{text-align: right;background-image:url('../img/btns/btnplayar.png');background-position:5% 15px;}

.footer .footerContainer .footerContent .liFooter{float:right;font-family:Adobe-Arabic-Regular;}
.footer .footerContainer .footerContent .sep{float:right;}
.footer .footerContainer .footerContent .liFooter:first-child{font-family:Adobe-Arabic-Regular;}

.dividedHeader{width:100%;position:absolute;top:0;z-index:200;display:block;}
.dividedHeader .leftHeader{width:400px;height:105px;background-image:url('../img/bg/rightHd.png');float:right;background-size:contain;background-repeat:no-repeat;}
.dividedHeader .leftHeader .logo{float:right;padding:6px 10px 0;}
.dividedHeader .leftHeader .logo img{width:90%;}
.dividedHeader .leftHeader .welcome{float:right;color:#fff;padding-top:15px;padding-left:15px;}
.dividedHeader .leftHeader .welcome .txt{float:right;font-family:Adobe-Arabic-Regular;font-size:13px;}
.dividedHeader .leftHeader .welcome .txt span{float:right;font-family:Adobe-Arabic-Regular;font-size:11px;padding-top:3px;padding-left:3px;}
.dividedHeader .leftHeader .welcome .txt .pts{float:left;font-family:Adobe-Arabic-Regular;font-size:21px;color:#ffb938;line-height:1;}
.dividedHeader .leftHeader .welcome .txt .pts span{float:left;font-family:Adobe-Arabic-Regular;font-size:9px;color:#ffb938}
.dividedHeader .leftHeader .welcome img{padding-right:5px;}
.dividedHeader .rightHeader{width:400px;height:105px;background-image:url('../img/bg/leftHd.png');float:left;background-size:contain;background-repeat:no-repeat;}
.dividedHeader .rightHeader .exit{font-size:20px;cursor:pointer;display:block; font-family:Adobe-Arabic-Regular;color:#fff;text-align:center;text-transform:uppercase;padding-top:22px;}
.dividedHeader .rightHeader .exit img{padding-left:20px;transform:rotate(180deg)}

.leaderboardPage{height:100%;background-image:url('../img/bg/bgLeaderboard.jpg');background-size:cover;}
.leaderboardPage .hdLeaderboard{}
.leaderboardPage .hdLeaderboard .title {float:right;margin-bottom:50px;text-transform:uppercase;}
.leaderboardPage .hdLeaderboard .title .ttl{color:#fff;font-size:30px;font-family:Adobe-Arabic-Regular;float:right;}
.leaderboardPage .hdLeaderboard .title .sep{color:#ffb938;font-size:30px;font-family:Adobe-Arabic-Regular;float:right;}
.leaderboardPage .hdLeaderboard .title .selected{color:#ffb938;font-size:30px;font-family:Adobe-Arabic-Regular;float:right;}
.leaderboardPage .hdLeaderboard .selectGame{width:160px;height:52px;float:left;box-sizing:border-box;border:1px solid #fff;border-radius:5px;text-align: left;padding: 7px 15px;text-transform:uppercase;}
.leaderboardPage .hdLeaderboard .selectGame .lbl{font-size:10px;color:#ffb938;font-family:Adobe-Arabic-Regular;text-align:right;}
.leaderboardPage .hdLeaderboard .selectGame .ddlSelect{width:100%;overflow:hidden;cursor:pointer; font-family:Adobe-Arabic-Regular;font-size:16px;color:#fff;outline:0; font-family:Adobe-Arabic-Regular;color:#fff;margin-left:-4px; background-image:url('../img/btns/ddlarw.png');background-repeat:no-repeat;background-position:left top;}
.leaderboardPage .hdLeaderboard .selectGame .ddlSelect select{width:120%;background-color:transparent;font-family:Adobe-Arabic-Regular;outline:0;border:0;color:#fff;text-transform:uppercase;}
.leaderboardPage .hdLeaderboard .selectGame .ddlSelect select option{padding:0;color:#ffb938;font-family:Adobe-Arabic-Regular;}
.leaderboardPage table{direction:rtl;text-align:right;}
.board .main-board .text-left{text-align:right !important;}
.loginContainer .inputBox .code-input{text-align:right;direction:ltr;}
.board .main-board th, .board .main-board td {
    text-align: right;
    font-family: Adobe-Arabic-Regular !important;
}
.board .main-board th:first-child {
    border-left: 2px solid #ffb938;
    border-right: 0;
}

.board .main-board th:last-child {
    border-right: 2px solid #ffb938;
    border-left:0
}
.passport .form-group{float:right;}
.passport #saveBtn, .passport #changePass{float:right;text-align:right;background-position: 5% 9px;font-family:Adobe-Arabic-Regular;}
.passport #saveBtn {
    background-position: 5% 12px;
    background-image: url('../img/btns/loginArwAr.png');
}
.passport .form-group .txtInput {
    font-family: Adobe-Arabic-Regular;
}
.passport .form-group .ddlSelect {
    font-size: 16px;
    color: #30384f;
    font-family: Adobe-Arabic-Regular;
    width: 100%;
    border: 0;
    overflow: hidden;
    background-image: url('../img/btns/ddlArw.png');
    background-repeat: no-repeat;
    background-position: 2% 0px;
}
    .passport .form-group .ddlSelect select {
    border:0;outline:0;width:120%;background:transparent;
    margin-left:-4px;text-transform:uppercase;
    }


.profilePage{height:100%;background-image:url('../img/bg/bgProfile.jpg');background-size:cover;}
.profilePage .pageTitle{text-align:center;color:#fff;font-family:Adobe-Arabic-Regular;font-size:30px;text-transform:uppercase;margin-bottom:30px;}
.profilePage .logout{float:left;cursor:pointer;color:#fff;padding-left:10px;padding-right:0;}
.profilePage .logout img{transform:rotate(180deg)}

.pswdPopup .title{text-align:center;color:#fff;font-family:Adobe-Arabic-Regular;font-size:30px;text-transform:uppercase;margin-bottom:30px;}
.pswdPopup .form-group {width:48%;height: 52px;box-sizing: border-box;background-color: #fff;border-radius: 5px;padding: 3px 10px;margin-bottom: 20px;margin:10px auto;float:none;}
.pswdPopup #changePass {float:none;padding-top:0px;margin:10px auto;}

.dashboardPage .carousel .ms-slide .gameContent .infoSec .lbl{font-size:25px;font-family:Adobe-Arabic-Regular;}
.dashboardPage .carousel .ms-slide .gameContent .infoSec .title{font-size:55px;font-family:Adobe-Arabic-Regular;}
.dashboardPage .carousel .ms-slide .gameContent .infoSec .desc{font-size:25px;font-family:Adobe-Arabic-Regular;line-height:normal;}
.dashboardPage .carousel .ms-slide .gameContent .btnPlay{float:left;font-family:Adobe-Arabic-Regular;left:25px;right:unset;background-image:url('../img/btns/btnPlayAr.png');background-position:10% 15px;}
.dashboardPage .carousel .ms-slide .gameContent .watch{font-family:Adobe-Arabic-Regular;}
.levels .levelNum{left:10px;right:unset;}
.info-panel .gameImg {
    float: right;
    position: unset;
    margin-right: 0px;
    margin-left: 10px;
}

.triviaContainer .radioBtns {text-align:right;}
.triviaContainer input[type="radio"] + label, .triviaContainer input[type="checkbox"] + label{right:10px;left:unset;}
.triviaContainer input[type="radio"]:checked + label span, .triviaContainer input[type="checkbox"]:checked + label span{background-position:8% center;}
.triviaContainer .btnSubmit{text-align:right;background-image:url('../img/btns/loginarwar.png');background-repeat:no-repeat;background-position:8% 12px;text-transform:uppercase;}

.levels .titleSection .subTitle{font-size:30px;}
.levels .titleSection .title{font-size:60px;}

@media screen and (max-width:1200px) {
    header .gameHeader{width:35%;margin:auto;}
}


@media screen and (max-width:1000px) {
    .dividedHeader .leftHeader{width:330px;background-size:100% 100%;}
    .dividedHeader .rightHeader{width:300px;background-size:100% 100%;}
    .pswdPopup .form-group{width:100%;}

    .passport{overflow-y:auto;}
    .passport form{padding-bottom:100px;}

    .board .main-board{width:80%;top:18vh;}
}


@media screen and (max-width:850px){
    .header{display:none;}
    .dividedHeader{display:none;}
    .mobileHeader {display:block;position:absolute;top:0;width:100%;height:60px;background-color:#30384f; text-align:center;z-index:999999;}
    .mobileHeader .burgerMenu {width:32px;height:32px;float:right;cursor:pointer;margin:19px 30px 0 ;}
    .mobileHeader .burgerMenu span{width:32px;height:4px;background-color:#ffb938;margin-bottom:5px;display:block;}
    .mobileHeader .logo{margin-right:15px}
    .mobileHeader .logo img{width:70px;padding-top:5px;}
    .mobileHeader .navHeader{background-color:#30384f;color:#fff;position:relative;z-index:9999999;text-align:left;padding:20px;display:none;}
    .mobileHeader .navHeader .welcome{color:#fff;padding-top:10px;padding-left:0;float:left;margin-bottom:10px;}
    .mobileHeader .navHeader .welcome .txt{float:right;font-family:Adobe-Arabic-Regular;font-size:13px;}
    .mobileHeader .navHeader .welcome .txt span{float:right;font-family:Adobe-Arabic-Regular;font-size:11px;padding-top:3px;padding-left:3px;}
    .mobileHeader .navHeader .welcome .pts{float:left;font-family:Adobe-Arabic-Regular;font-size:30px;color:#ffb938;line-height:1;margin-top:-5px;}
    .mobileHeader .navHeader .welcome .pts span{float:left;font-family:Adobe-Arabic-Regular;font-size:18px;color:#ffb938;padding-top:9px;padding-right:3px;}
    .mobileHeader .navHeader .welcome img{padding-right:5px;padding-left:5px;}
    .mobileHeader .navHeader .welcome .logout{color:#ffb938;float:right;cursor:pointer;}
    .mobileHeader .navHeader .menuLi{width:100%;height:50px;display:block;color:#fff;border-top:1px solid #fff;padding-top:13px;box-sizing:border-box;text-decoration:none;text-align:right;}
    .mobileHeader .navHeader .menuLi img{float:left;padding-top:5px;}
    .mobileHeader .navHeader .menuLi.selected{color:#ffb938;}
    .mobileHeader .exit{color:#fff;float:left;text-transform:uppercase;padding:25px 0 0 20px ;}
    .mobileHeader .exit img{padding-right:10px;transform:rotate(180deg)}

    .footer .footerContainer{width:300px;min-width:300px;height:50px;}
    .footer .footerContainer .footerContent .liFooter{padding-top:5px;font-size:10px;}
    .footer .footerContainer .footerContent .sep{padding-top:5px;font-size:10px;}
    .footer .footerContainer .liFooter:first-child{padding-top:10px;font-size:10px;float:none;}
    .footer .footerContainer .footerContent .sep:first-child{display:none;}
    
    .levels .levelNum{font-size:5vw;}

    header{top:80px;z-index:2;}
    header .gameHeader{width:90%;}
    .levels-header-center{width:100%;margin:15px auto;}
    .levels-header-right{margin-top:5px;}
    .passport form{padding-top:120px;}

    .board .main-board{width:90%;top:100px;}
    .leaderboardPage .hdLeaderboard .title{float:none;}
    .leaderboardPage .hdLeaderboard .title .ttl{font-size:20px;}
    .leaderboardPage .hdLeaderboard .title .sep{font-size:20px;}
    .leaderboardPage .hdLeaderboard .title .selected{font-size:20px;}
    .leaderboardPage .hdLeaderboard .selectGame{margin-bottom:30px;margin-top:20px;}
    .levels .titleSection{padding:80px 0 15px;}
}

@media screen and (max-width:600px) {    
    .dashboardPage .carousel .ms-slide .gameContent .infoSec .lbl{font-size:18px;}
    .dashboardPage .carousel .ms-slide .gameContent .infoSec .title {font-size:22px;}
    .dashboardPage .carousel .ms-slide .gameContent .infoSec .desc{font-size:15px;line-height:1;}
    .dashboardPage .carousel .ms-slide .gameContent .infoSec .btnPlay{width:120px;height:40px;padding:12px 8px 0;font-size:12px;background-size:10px;background-position:10% 13px;}
    .dashboardPage .carousel .ms-slide .gameContent .watch{font-size:10px;}
    .dashboardPage .carousel .ms-slide .gameContent .watch img{width:30px;}

    .dashboardPage .ms-bullets .ms-bullet{width:5px;height:5px;}
    .dashboardPage .ms-bullets .ms-bullet.ms-bullet-selected{width:5px;height:5px;}

    .passport .form-group{width:90%;margin:10px auto;float:none;}
    .passport #saveBtn, .passport #changePass{width:90%;margin:10px auto;float:none;}
    
    .leaderboardPage .hdLeaderboard .title{width:100%;margin-bottom:10px;}
    .leaderboardPage .hdLeaderboard .selectGame{width:120px;padding:7px 5px;}
    .board .main-board th{font-size:12px;}
    .board .main-board td{font-size:12px;}

    .loginContainer .logo{padding-top:20px;}
    .chooseLanguage .langContainer .logo{padding:20px 0 ;}
    .chooseLanguage .langContainer .homeTitle{font-size:20px;margin:10px 0;}
    .chooseLanguage .hr-sep{margin:0 auto 25px;}
    .loginContainer .homeTitle{font-size:20px;margin:10px 0;}

    .levels-grid .level-block {
        width: 30vw;
        height: 30vw;
    }
    .dashboardPage .carousel .ms-slide .gameContent .btnPlay{width:100px;}
    .levels .titleSection .subTitle{font-size:25px;}
    .levels .titleSection .title{font-size:30px;}
}

@media screen and (max-width:500px) {
    .mobileHeader{height:60px;}
    .mobileHeader .burgerMenu{margin:19px 15px 0;}
    .mobileHeader .logo {margin-right:15px;}
    .mobileHeader .logo img{width:70px;padding-top:5px;}
     header{top:40px;}
    .passport form{padding:80px 0 100px;}
    .pswdPopup .title{margin-top:40px;}
    .mobileHeader .exit{font-size:12px;padding:20px 10px 0 0 ;}
    .mobileHeader .exit img{width:20px;}
    .mobileHeader .logo{margin-left:10px;}
}

.header .headerContainer .language {
    left: 70%;
    right: unset;
}
@media screen and (max-width:1200px) {
    .header .headerContainer .language {
        left: 75%;
    }
}

@media screen and (max-width:1000px) {
    .header .headerContainer .language {
        left: 80%;
    }
}