:root{
    --white             :#ffffff;
    --black             :#000000;
    --dark              :#010101;
    --light             :#e6e2da;
    --blue              :#1c3dba;
    --maroon            :#b51b14;
    --gray              :#6c757d;
    --dark-gray         :#4c431c;
    --light-maroon      :#6c5d48;
}

/* Common CSS */
html{}
body{font-family: 'Lato', sans-serif;font-size: 16px;background-color: var(--light);margin: 0;padding: 0;}

h1,
h2,
h3,
h4,
h5,
h6{font-family: 'Lato', sans-serif;}

p {font-size: 16px;font-weight: 500;color: var(--dark);line-height: 1.3;}
a{color: var(--maroon);text-decoration: none;font-weight: 500;}
a:hover,
a:focus{color: var(--blue);}

.container{max-width: 1080px;margin: 0 auto;}

.logo {text-align: center;color: var(--dark-gray);font-size: 32px;line-height: 1.2;}

.play-icon-round {background-image: url(../images/play.png);background-size: 14px auto;font-size: 0;background-position: 8px center;background-repeat: no-repeat;width: 30px;height: 30px;border-radius: 50%;border: 1px solid #000;display: flex;align-items: center;justify-content: center;}
.fast-forward-icon-round {background-image: url(../images/fast-forward.png);background-size: 18px auto;background-position: 6px center;font-size: 0;background-repeat: no-repeat;width: 30px;height: 30px;border-radius: 50%;border: 1px solid #000;display: flex;align-items: center;justify-content: center;}
.food-icon-round {background-size: 15px auto;background-image: url(../images/food.png);background-position: 6px center;font-size: 0;background-repeat: no-repeat;width: 30px;height: 30px;border-radius: 50%;border: 1px solid #000;display: flex;align-items: center;justify-content: center;}
.no-food-icon-round {background-size: 15px auto;background-image: url(../images/food.png);background-position: 6px center;border: 2px solid var(--maroon);background-position: 5px center;font-size: 0;background-repeat: no-repeat;width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.no-food-icon-round::after {content: '';height: 30px;width: 2px;position: absolute;background: var(--maroon);transform: rotate(45deg);}

.text-justify{text-align: justify;}
/* Bootstrap Override */
.text-danger{color: var(--maroon)!important;}

.btn{outline: none;box-shadow: none;}
.btn:focus{outline: none;box-shadow: none;}

.btn-secondary {color: var(--white);background-color: var(--gray);border-color: var(--gray);}
.btn-secondary.active {background-color: var(--maroon);box-shadow: none;border-color: var(--maroon);outline: none;}
.btn-secondary.active:focus{box-shadow: none;}

.btn-warning {color: var(--white);background-color: var(--light-maroon);border-color: var(--light-maroon);}
.btn-warning:hover{background-color: var(--dark-gray);color: var(--white);border-color: var(--dark-gray);}

.btn-gray {color: var(--light-maroon);background-color: var(--light);border-color: var(--light-maroon);}
.btn-gray:hover,
.btn-gray.active{background-color: var(--light-maroon);color: var(--light);border-color: var(--light-maroon);}

.btn-outline-secondary {color: var(--blue);border-color: var(--dark-gray);}

/* Modals Styling */
.common-modal .modal-dialog {max-width: 620px;}
.common-modal .modal-dialog.modal-lg{max-width: 880px;}
.common-modal .close-btn {position: absolute;right: 20px;top: 20px;z-index: 1;width: 90px;}
.common-modal .interview-btn {position: absolute;right: 20px;top: 75px;z-index: 1;width: 90px;}
.common-modal .interview-text {position: absolute;right: 120px;font-size: 14px;top: 82px;}
.common-modal .sound-text {position: absolute;right: 120px;font-size: 14px;top: 137px;}
.common-modal .play-btn {position: absolute;right: 20px;top: 130px;z-index: 1;width: 90px;}
.common-modal .modal-content{background-color: #cec7b7;border: 5px solid #928c7f;border-radius: 4px;}
.common-modal .modal-body{padding: 100px 20px 20px;}
.common-modal .modal-body .left-img{min-width: 350px;margin-right: 40px;}
.common-modal .modal-body .left-img img{border: 5px solid var(--white);width: 350px;}
.common-modal .modal-body .right-div h2 {font-size: 40px;color: var(--dark);font-weight: 700;margin-bottom: 70px;}
.common-modal .modal-body .right-div p {font-size: 20px;font-style: italic;margin-bottom: 25px;}
.common-modal .modal-body .content p{font-size: 20px;}

.common-modal.music-modal .modal-header{border: none;}
.common-modal.music-modal .modal-header h2 {font-size: 40px;color: var(--dark);font-weight: 700;margin-bottom: 5px;}
.common-modal.music-modal .modal-header p {font-size: 20px;margin-bottom: 5px;}
.common-modal.music-modal .modal-body{padding-top: 60px;}
.common-modal.music-modal .content p{font-size: 16px;}

.common-modal.game-modal .modal-content{background-color: #dddddd;border: 5px solid #928c7f;border-radius: 20px;}
.common-modal.game-modal .close-btn {position: absolute;right: 20px;top: 20px;z-index: 1;background-image: url(../images/close.png);background-color: transparent;width: 35px;height: 35px;font-size: 0;background-size: 19px auto;background-repeat: no-repeat;background-position: center;border-width: 2px;}
.common-modal.game-modal .modal-header{border: none;padding: 0;}
.common-modal.game-modal .modal-body h2 {font-size: 30px;color: var(--dark);font-weight: 700;margin-bottom: 5px;}
.common-modal.game-modal .modal-body p{font-size: 20px;margin-bottom: 25px;}
.common-modal.game-modal .modal-body #product_text{min-height: 80px;}
.common-modal.game-modal .modal-body{padding: 30px 50px;}
.common-modal.game-modal .modal-body .bottom-div{border-top: 2px solid #928c7f;padding-top: 20px;}
.common-modal.game-modal .modal-body .bottom-div p{font-size: 16px;}

.common-modal.game-modal .modal-body .food-quantity-div{width: 440px;border: 4px solid #4e4e9e;margin: 0 auto;padding: 15px 30px 20px;border-radius: 10px;background-color: #f5f5f5;}
.common-modal.game-modal.buy-food .modal-content::before{content: '';background-image: url(../images/food.png);width: 60px;height: 60px;position: absolute;left: 15px;top: 20px;background-repeat: no-repeat;background-position: center;background-size: auto 60px;}
.common-modal.game-modal.buy-food .modal-body{min-height: 530px;}
.common-modal.game-modal .hints {position: absolute;left: 10px;top: 10px;background: #dddddd;height: calc(100% - 20px);width: calc(100% - 20px);z-index: 999;}
.common-modal.game-modal .hints .hint-inner{padding: 15px;}
.common-modal.game-modal .hints .close-hint {position: absolute;right: 10px;top: 10px;z-index: 1;background-image: url(../images/close.png);background-color: transparent;width: 35px;height: 35px;font-size: 0;background-size: 19px auto;background-repeat: no-repeat;background-position: center;border-width: 2px;}
.common-modal.game-modal .hints p{font-size: 15px;margin: 0 0 15px;}
.common-modal.game-modal .hints h2{margin: 10px 0 15px 0;}

/* Pages Styling */
.header{background-color: var(--maroon);}
.header ul {list-style: none;padding: 0 15px;margin: 0;display: flex;align-items: center;justify-content: space-between;}
.header ul li a {color: var(--white);text-decoration: none;padding: 10px 10px 12px 10px;display: inline-block;line-height: 1;font-size: 18px;font-family: 'Lato', sans-serif;}

.footer-bar{background-color: var(--maroon);height: 35px;}

.activity-content .activity-box{padding: 0 70px;}
.activity-content .activity-box p{font-size: 16px;}

.credit-table td {font-size: 20px;font-weight: 500;padding: 7px 0;line-height: 1.3;vertical-align: top;font-family: 'Oswald', sans-serif;}
.credit-table td p{font-size: 18px;font-weight: 500;line-height: 1.5;}
.other-credit {margin-top: 10px;margin-bottom: 150px;}
.other-credit p{font-size: 16px;font-weight: 500;line-height: 1.5;font-family: 'Oswald', sans-serif;}

.map-filter .btn{width:120px;}
.map-view {position: relative;}
.points {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 3;}

.map-tooltip{width: 12px;height: 12px;display: block;background-color: var(--maroon);border-radius: 10px;position: absolute;}
.map-tooltip.venice{left: 45px;top: 155px;}
.map-tooltip.alexandria {left: 57px;top: 395px;}
.map-tooltip.cairo {left: 69px;top: 414px;}
.map-tooltip.mecoa{left: 104px;top: 548px;}
.map-tooltip.medina {left: 114px;top: 516px;}
.map-tooltip.istanbul {left: 113px;top: 281px;}
.map-tooltip.tyre {left: 119px;top: 393px;}
.map-tooltip.damascus {left: 131px;top: 403px;}
.map-tooltip.antioch {left: 144px;top: 370px;}
.map-tooltip.baghbad {left: 196px;top: 429px;}
.map-tooltip.yerevan {left: 225px;top: 358px;}
.map-tooltip.tehran {left: 270px;top: 434px;}
.map-tooltip.merv {left: 366px;top: 427px;}
.map-tooltip.bukhara {left: 386px;top: 406px;}
.map-tooltip.samarkand {left: 409px;top: 410px;}
.map-tooltip.tashkent {left: 439px;top: 393px;}
.map-tooltip.bishkek {left: 474px;top: 385px;}
.map-tooltip.kashgar {left: 489px;top: 425px;}
.map-tooltip.ahmedabad {left: 446px;top: 608px;}
.map-tooltip.delhi {left: 502px;top: 555px;}
.map-tooltip.almety {left: 509px;top: 368px;}
.map-tooltip.khatan {left: 518px;top: 452px;}
.map-tooltip.kucha {left: 552px;top: 391px;}
.map-tooltip.urumqi {right: 455px;top: 368px;}
.map-tooltip.cherchen{right: 459px;top: 430px;}
.map-tooltip.turfan {right: 436px;top: 381px;}
.map-tooltip.hami {right: 392px;top: 389px;}
.map-tooltip.dunhuang {right: 381px;top: 401px;}
.map-tooltip.lhasa {right: 411px;top: 527px;}
.map-tooltip.lanzhou {right: 296px;top: 432px;}
.map-tooltip.xian {right: 248px;top: 436px;}
.map-tooltip.beijing {right: 204px;top: 355px;}
.map-tooltip.changsha {right: 192px;top: 492px;}
.map-tooltip.guangzhou {right: 165px;top: 555px;}
.map-tooltip.quanzhou {right: 118px;top: 500px;}
.map-tooltip.seoul {right: 102px;top: 345px;}
.map-tooltip.kyoto {right: 31px;top: 325px;}

.overlap-maps{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;}
.overlap-maps img{width: 100%;position: absolute;left: 0;top: 0;display: none;}
.overlap-maps img.on{display: block;}

.routes{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 2;}
.routes img{position: absolute;left: 0;top: 0;display: none;}
.routes img.on{display: block;}
.routes img.silk{left: 32px;top: 163px;width: 987px;}
.routes img.zhang{left: 369px;top: 315px;width: 436px;}
.routes img.xuan{left: 430px;top: unset;bottom: 63px;width: 405px;}
.routes img.polo{left: 32px;top: 160px;width: 905px;}

.sight-title .img-title{min-height: 25px;}
.sight-images{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 2;}
.sight-images img{position: absolute;left: 0;top: 0;border: 2px solid var(--black);cursor: pointer;}
.sight-images img.ewer{width: 75px;left: 15px;top: 15px;}
.sight-images img.Adoration_Magi{width: 75px;left: 15px;top: 145px;}
.sight-images img.Vase_and_Cover{width: 80px;left: 100px;top: 35px;}
.sight-images img.The_Music_Lesson{width: 80px;left: 190px;top: 41px;}
.sight-images img.Tankard{width: 70px;left: 110px;top: 276px;}
.sight-images img.C17_Interior{width: 70px;left: 40px;top: 406px;}
.sight-images img.Talismanic_Textile{width: 70px;left: 30px;top: 566px;}
.sight-images img.Buddha_Bamiyan{width: 70px;left: 340px;top: 406px;}
.sight-images img.Bodhisattva{width: 60px;left: 420px;top: 386px;}
.sight-images img.Fasting_Buddha{width: 75px;left: 336px;top: 516px;}
.sight-images img.Mandala_Pilgrim_Box{width: 70px;left: 556px;top: 510px;}
.sight-images img.Sule_Pagoda{width: 80px;left: 670px;top: 590px;}
.sight-images img.Emperors_Jifu{width: 100px;left: 725px;top: 345px;}
.sight-images img.Final_Nirvana{width: 70px;left: 830px;top: 355px;}
.sight-images img.Tang_Camel{width: 70px;left: 770px;top: 430px;}
.sight-images img.Tang_Horse{width: 70px;left: 845px;top: 430px;}
.sight-images img.Women_Sericulture{width: 70px;left: 945px;top: 190px;}
.sight-images img.Nara_Daibutsu {width: 70px;left: 975px;top: 300px;}

.music-images{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 2;}
.music-images img{position: absolute;left: 0;top: 0;border: 2px solid var(--black);cursor: pointer;}
.music-images img.cello{width: 50px;left: 15px;top: 55px;}
.music-images img.violin{width: 70px;left: 71px;top: 68px;}
.music-images img.viola{width: 45px;left: 148px;top: 63px;}
.music-images img.duduk{width: 70px;left: 124px;top: 246px;}
.music-images img.naqara{width: 50px;left: 220px;top: 239px;}
.music-images img.qanun{width: 70px;left: 275px;top: 256px;}
.music-images img.tutek{width: 70px;left: 350px;top: 256px;}
.music-images img.ney{width: 51px;left: 244px;top: 439px;}
.music-images img.kemancheh{width: 50px;left: 300px;top: 439px;}
.music-images img.santur{width: 60px;left: 290px;top: 505px;}
.music-images img.daira{width: 50px;left: 440px;top: 355px;}
.music-images img.tabla{width: 65px;left: 472px;top: 603px;}
.music-images img.morin{width: 50px;right: 350px;top: 261px;left: inherit;}
.music-images img.yatga{width: 68px;right: 275px;top: 282px;left: inherit;}
.music-images img.jang{width: 48px;right: 166px;top: 220px;left: inherit;}
.music-images img.kayagum{width: 50px;right: 110px;top: 220px;left: inherit;}
.music-images img.shakuhachi{width: 50px;right: 20px;top: 308px;left: inherit;}
.music-images img.sheng{width: 56px;right: 331px;top: 525px;left: inherit;}
.music-images img.sanxian{width: 65px;right: 261px;top: 525px;left: inherit;}
.music-images img.pipa{width: 42px;right: 214px;top: 525px;left: inherit;}
.music-images img.erhu{width: 45px;right: 164px;top: 525px;left: inherit;}
.music-images img.bawu{width: 65px;right: 95px;top: 525px;left: inherit;}

.music-images .img-block[class*="box"]::before{content: '';width: 100px;height: 20px;border: 3px solid var(--blue);position: absolute;border-top-color: transparent;left: 0;top: 0;border-radius: 3px;}
.music-images .img-block.box-1::before{left: 39px;top: 119px;width: 132px;}
.music-images .img-block.box-1::after{content: '';height: 40px;width: 3px;background: var(--blue);position: absolute;left: 61px;top: 126px;transform: rotate(65deg);}
.music-images .img-block.box-2::before{left: 244px;top: 296px;width: 142px;}
.music-images .img-block.box-2::after{content: '';height: 80px;width: 3px;background: var(--blue);position: absolute;left: 291px;top: 297px;transform: rotate(55deg);}
.music-images .img-block.box-3::before{left: 865px;top: 276px;width: 57px;}
.music-images .img-block.box-3::after{content: '';height: 73px;width: 3px;background: var(--blue);position: absolute;left: 919px;top: 284px;transform: rotate(-43deg);}
.music-images .img-block.box-4::before{left: 695px;top: 508px;width: 234px;border-top-color: var(--blue);border-bottom-color: transparent;}
.music-images .img-block.box-4::after{content: '';height: 73px;width: 3px;background: var(--blue);position: absolute;left: 789px;top: 446px;transform: rotate(43deg);}

.music-images .img-block.line-1::after{content: '';height: 83px;width: 3px;background: var(--blue);position: absolute;left: 200px;top: 292px;transform: rotate(-58deg);z-index: -1;}
.music-images .img-block.line-2::after{content: '';height: 53px;width: 3px;background: var(--blue);position: absolute;left: 424px;top: 372px;transform: rotate(58deg);z-index: -1;}

.game-content{background-color: #cec7b7;}
.game-content .game-inner{padding: 20px 50px;}
.game-content .game-main{min-height: 580px;}
.game-content .game-main .game-image {width: 65%;text-align: center;}
.game-content .game-main .game-image img{min-width: 350px;}
.game-content .game-main .days-info {width: 35%;}
.game-content .game-main .days-info .game-info-inner{width: 310px;background: #dddddd;border: 5px solid #626262;border-radius: 20px;padding: 10px 25px;box-shadow: 5px 5px 10px rgb(0 0 0 / 25%);}
.game-content .game-main .days-info .game-info-inner h2{border-bottom: 2px solid #666666;}
.game-content .game-main .days-info .game-info-inner table th,
.game-content .game-main .days-info .game-info-inner table td,
.game-content .game-main .days-info .game-info-inner table td p {font-size: 20px;font-weight: 700;margin: 0;vertical-align: top;padding: 5px 5px;line-height: 1.5;}
.game-content .game-main .days-info .game-info-inner table td p {padding: 0;}
.game-content .game-main .days-info .game-info-inner .food-info{height: 65px;}
.game-content .game-main .days-info .game-info-inner .food-info ul {display: flex;list-style: none;padding: 0 10px;margin: 10px 0 0;}
.game-content .game-main .days-info .game-info-inner .food-info ul li.food-count{position: relative;padding: 0 6px;display: flex;align-items: flex-end;}
.game-content .game-main .days-info .game-info-inner .food-info ul li p{position: absolute;left: 0;bottom: 7px;right: 0;margin: 0 auto;text-align: center;font-weight: 700;font-size: 20px;}
.game-content .game-main .days-info .game-info-inner .food-info ul li.food-count:first-child img{width: 42px;}
.game-content .game-main .days-info .game-info-inner .food-info ul li.food-count img{width: 32px;}

.game-footer {padding: 5px 50px 10px 10px;}
.left-block ul {padding: 0;list-style: none;margin: 0;}
.left-block ul li {padding: 0 10px 0 0;}
.left-block ul li a {width: 30px;height: 30px;border-radius: 50%;border: 1px solid #000;display: flex;align-items: center;justify-content: center;}
.left-block ul li a.play-btn {background-image: url(../images/play.png);background-size: 14px auto;font-size: 0;background-position: 8px center;background-repeat: no-repeat;}
.left-block ul li a.play-btn.active {background-image: url(../images/fast-forward.png);background-size: 18px auto;background-position: 6px center;}
.left-block ul li a.food-btn {background-size: 15px auto;background-image: url(../images/food.png);background-position: 6px center;font-size: 0;background-repeat: no-repeat;}
.left-block ul li a.food-btn.active {border: 2px solid var(--maroon);background-position: 5px center;}
.left-block ul li a.food-btn.active::after {content: '';height: 30px;width: 2px;position: absolute;background: var(--maroon);transform: rotate(45deg);}

.right-block ul {box-shadow: 5px 5px 10px rgb(0 0 0 / 25%);border: 4px solid #000065;margin-left: 40px;display: flex;list-style: none;padding: 10px;border-radius: 15px;background-color: #bbbbcc;margin-bottom: 0;}
/* .right-block ul li:not(:empty) {padding: 0 15px;} */
.right-block ul li a {color: #01019a;font-size: 18px;font-weight: 700;transition: all .3s;padding: 0 15px;}
.right-block ul li a.food-btn{padding: 0;}
.right-block ul li a:hover{color: #f8f845;}

.game-banner {height: 110px;display: flex;align-items: flex-end;justify-content: center;background-color: #c0d5d9;position: relative;}
.game-banner .game-banner-img {width: 98%;}
.game-banner .camels {height: 70px;position: absolute;left: 0;right: 0;margin: 0 auto;bottom: 0;z-index: 2;}
.game-banner .map-img {position: absolute;width: 100%;top: 0;z-index: 3;box-shadow: 0px 10px 10px rgb(0 0 0 / 30%);}

.trade-food .trade-slot {width: 100%;height: 180px;border: 1px solid #000;background: #b7b7b7;margin-bottom: 35px;}
.trade-food .trade-slot img{width: 100%;height: 100%;object-fit: contain;object-position: center;}
.trade-food .name {font-weight: 700;text-align: center;height: 36px;font-size: 18px;padding: 5px 0;}


.timeline-main{background-color: #cec7b7;}
.timeline-main .top-bar{padding: 3px 3px 3px 0;background-color: var(--light);}
.timeline-main .top-bar p{font-size: 18px;font-weight: 600;margin: 0;}
.timeline-content-outer{transform: rotateX(180deg);overflow-x: auto;white-space: nowrap;}
.timeline-content-outer .timeline-content{transform: rotateX(180deg);}

.timeline-main .timeline-content {width: 100%;display: flex;height: 790px;align-items: center;padding: 70px 20px;}
.timeline-main .timeline-content .block{width: 300px;white-space: normal;margin: 0 30px;min-width: 300px;position: relative;}
.timeline-main .timeline-content .block:first-child{margin-left: 0;}
.timeline-main .timeline-content .block:last-child{min-width: 340px;padding-right: 40px;}
.timeline-main .timeline-content .block h2{color: var(--maroon);font-size: 22px;font-weight: 600;}
.timeline-main .timeline-content .block p{font-size: 18px;text-align: left;font-family: 'Oswald', sans-serif;font-weight: 400;color: #000000;}
.timeline-main .timeline-content .block img{width: 250px;}
.timeline-main .timeline-content .block.bce-info {margin-right: 100px;}
.timeline-main .timeline-content .block.bce-info .extra-info {position: absolute;width: 100%;top: -180px;left: 250px;}
.timeline-main .timeline-content-outer{scrollbar-color: #EBE4DC #a9977e;}
.timeline-main .timeline-content-outer::-webkit-scrollbar,
.timeline-main .timeline-content-outer::-moz-scrollbar {height: 35px;}
.timeline-main .timeline-content-outer::-webkit-scrollbar-track,
.timeline-main .timeline-content-outer::-moz-scrollbar-track {background-color: #a9977e;}
.timeline-main .timeline-content-outer::-webkit-scrollbar-thumb,
.timeline-main .timeline-content-outer::-moz-scrollbar-thumb {background-color: #a9977e;background-image: url(../images/scroller.jpg);background-repeat: no-repeat;background-clip: content-box;background-size: 240px 100%;}
.timeline-main .timeline-content-outer::-webkit-scrollbar:vertical,
.timeline-main .timeline-content-outer::-moz-scrollbar:vertical {display: none;}
/* For SWAL Modal */
.swal-modal {width: 530px;background-color: #dddddd;text-align: center;border-radius: 10px;border: 6px solid #666666;}
.swal-text:first-child {margin-top: 65px;}
.swal-text {font-size: 24px;text-align: center;padding: 0 50px;color: #000000;}
.swal-footer {text-align: center;margin-top: 35px;padding-bottom: 40px;}
.swal-button {background: #eeeeee;border: 1px solid #666666;color: #01019a;font-size: 20px;padding: 5px 25px;min-width: 150px;margin: 0 10px;}

#playAgain button {border: 3px solid #000065;background: #bbbbcc;border-radius: 10px;color: #01019a;font-size: 20px;padding: 10px 20px;font-weight: 700;margin-left: 15px;}