@font-face {
    font-family: "SkolarSans";
    src: url("https://docs.rferl.org/Infographics/sources/fonts/SkolarSansLatnCyrl-RG.woff");
}

@font-face {
    font-family: "Skolar";
    src: url("https://docs.rferl.org/Infographics/sources/fonts/SkolarLatnCyrl-Lt.woff");
}

@font-face {
    font-family: "SkolarSansLight";
    src: url("https://docs.rferl.org/Infographics/sources/fonts/SkolarSansLatnCyrl-El.woff");
}

body {
    margin: 0;
    padding: 0;
    font-family: "SkolarSansLight", "Arial", sans-serif;
    background-color: #DEDEDE;
}

.bodyContainer {
    position: relative;
    margin: auto;
    width: 1000px;
    max-width: 100%;
    overflow: hidden;
    font-size: 16px;
    font-family: "SkolarSansLight", "Arial", sans-serif;
}

@media(max-width:464px) {
    .bodyContainer {
        font-size: 15px;
    }
}

@media(max-width:400px) {
    .bodyContainer {
        font-size: 14px;
    }
}

/*			*** M A P S ***			*/

.mapPakistan {
    position: relative;
    width: 1000px;
    max-width: 100%;
}

.mapProvinces {
    position: absolute;
    top: 0px;
    width: 1000px;
    max-width: 100%;
    height: 100%;
}

.mapDistricts {
    position: absolute;
    top: 0px;
    width: 1000px;
    max-width: 100%;
    height: 100%;
}

.mapDistrictsNew {
    position: absolute;
    top: 0px;
    width: 1000px;
    max-width: 100%;
    height: 100%;
}

.mapLabel1 {
    position: absolute;
    top: 20%;
    right: 64%;
    color: #A3A9AC;
    font-size: 32px;
    font-family: "Skolar", Times, "Times New Roman", serif;
}

.mapLabel2 {
    position: absolute;
    top: 62%;
    left: 76%;
    color: #A3A9AC;
    font-size: 32px;
    font-family: "Skolar", Times, "Times New Roman", serif;
}

@media(max-width:786px) {
    .mapLabel1 {
        top: 24%;
        right: 60%;
        font-size: 24px;
    }
    .mapLabel2 {
        font-size: 24px;
    }
}

@media(max-width:592px) {
    .mapLabel1 {
        display: none;
    }
    .mapLabel2 {
        display: none;
    }
}

/*			* * * M E N U * * *			*/

.menuContainer {
    position: relative;
    margin: 0px auto;
    width: 100%;
    max-width: 1000px;
    color: #444;
    font-size: 16px;
    background-color: #F1F0EF;
    z-index: 75;
}

.menuLine {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 4px;
    background-color: #DEDEDE;
    z-index: 100;
}

.menuLabel {
    position: relative;
    box-sizing: border-box;
    padding: 20px 16px 20px 24px;
    text-align: center;
    color: #A3A9AC;
    font-size: 16px;
    line-height: 19px;
    border-bottom: 4px solid #DEDEDE;
    font-family: "SkolarSansLight", "Arial", sans-serif;
    background-image: url(https://docs.rferl.org/Infographics/2017/2017_05/2017_05_PakistanCensus/img/ArrowRTL.png);
    background-position: center left;
    background-repeat: no-repeat;
    float: right;
}

.menuLabelLast {
    border-left: 4px solid #DEDEDE;
}

.menuRegions {
    position: relative;
    float: left;
    z-index: 150;
}

.menuRegion {
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    line-height: 19px;
    text-align: center;
    float: left;
}

.menuTopics {
    position: relative;
    line-height: 19px;
    float: right;
    z-index: 150;
}

.menuTopic {
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    line-height: 19px;
    text-align: center;
    float: right;
}

.menuYears {
    position: relative;
    z-index: 150;
    line-height: 19px;
    float: left;
}

.menuYear {
    position: relative;
    box-sizing: border-box;
    float: left;
    padding: 20px;
    text-align: center;
}

.menuList {
    position: absolute;
    right: 0px;
    top: 64px;
    margin: 22px 20px 4px;
    box-sizing: border-box;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid #919191;
    color: #EA6903;
    cursor: pointer;
}

.menuList:hover {
    color: black;
}

@media(max-width:800px) {
    .menuList {
        top: 128px;
    }
}

@media(max-width:480px) {
    .menuList {
        top: 86px;
    }
}

.menuHover {
    cursor: pointer;
}

.menuHover:hover {
    color: #000;
    border-bottom: 4px solid #919191;
}

.menuActive {
    color: #EE8735;
    border-bottom: 4px solid #EE8735;
}

.menuNonActive {
    color: #ACABAC;
    cursor: default;
    border-bottom: 4px solid #DEDEDE;
}

@media(max-width:1000px) {
    .menuLabel {
        padding: 16px 20px 16px 12px;
    }
    .menuRegion {
        padding: 16px;
    }
    .menuTopic {
        padding: 16px;
    }
    .menuYear {
        padding: 16px;
    }
    .menuList {
        margin: 16px 16px 4px;
    }
}

@media(max-width:642px) {
    .menuLabelLast {
        border-left: none;
        border-right: none;
    }
}

@media(max-width:480px) {
    .menuLabel {
        padding: 12px 16px 12px 8px;
        font-size: 15px;
        line-height: 16px;
    }
    .menuRegion {
        padding: 12px 6px;
        font-size: 15px;
        line-height: 16px;
    }
    .menuTopic {
        padding: 12px 6px;
        font-size: 15px;
        line-height: 16px;
    }
    .menuYear {
        padding: 12px 6px;
        font-size: 15px;
        line-height: 16px;
    }
    .menuList {
        margin: 12px 12px 4px;
    }
}

/*			*** M A P   T I T L E S ***			*/

.provinceTitle {
    position: absolute;
    display: inline-block;
    padding: 4px 12px;
    text-align: center;
    background-color: white;
    border-right: 4px solid #5A5C5E;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateY(-50%);
    transform: translateX(-50%);
    cursor: pointer;
}

.provinceTitle:hover {
    background-color: #EEE;
    transition: all .5s;
}

.provinceTitle1 {
    top: 9%;
    left: 58%;
}

.provinceTitle2 {
    top: 22%;
    left: 46%;
}

.provinceTitle3 {
    top: 44%;
    left: 59%;
}

.provinceTitle4 {
    top: 76%;
    left: 39.5%;
}

.provinceTitle5 {
    top: 62%;
    left: 26%;
}

.provinceTitle6 {
    top: 28%;
    left: 62.5%;
}

.provinceTitleNumber {
    display: inline;
}

.pakistanTitle {
    position: absolute;
    display: inline-block;
    top: 46%;
    left: 50%;
    padding: 4px 12px;
    text-align: center;
    background-color: white;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateY(-50%);
    transform: translateX(-50%);
    cursor: pointer;
}

.pakistanTitle:hover {
    background-color: #EEE;
    transition: all .5s;
}

@media(max-width:712px) {
    .provinceTitle {
        font-size: 14px;
    }
    .provinceTitle1 {
        top: 3%;
        left: 56%;
    }
    .provinceTitle2 {
        top: 24%;
        left: 48%;
    }
    .provinceTitle3 {
        top: 44%;
        left: 63%;
    }
    .provinceTitle4 {
        top: 77%;
        left: 43%;
    }
    .provinceTitle5 {
        top: 57%;
        left: 30%;
    }
    .provinceTitle6 {
        top: 20%;
        left: 76%;
    }
}

@media(max-width:480px) {
    .provinceTitle {
        padding: 2px 6px;
        font-size: 13px;
    }
}

/*			*** INFO TABLE ***			*/

.infoTable {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: auto;
    width: 40%;
    max-height: 100%;
    overflow-y: auto;
    background-color: white;
    z-index: 200;
    -webkit-appearance: none;
}

.infoTable::-webkit-scrollbar:vertical {
    width: 11px;
}

@media(max-width:960px) {
    .infoTable {
        width: 60%;
    }
}

@media(max-width:640px) {
    .infoTable {
        width: 92%;
    }
}

.infoTitle {
    position: relative;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding: 12px 16px 8px;
    background-color: #E5E5E5;
}

.infoContent {
    position: relative;
    padding: 12px 16px;
}

.infoYear {
    position: relative;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.infoLine {
    position: relative;
    height: 1px;
    margin: 8px 0px;
    clear: both;
    background-color: #E5E5E5;
}

.infoPopulation {
    position: relative;
    clear: both;
}

.infoLeft {
    position: relative;
    width: 50%;
    padding: 4px 0px;
    font-size: 16px;
    text-align: right;
    float: right;
}

.infoRight {
    position: relative;
    width: 50%;
    padding: 4px 0px;
    font-size: 21px;
    font-weight: 600;
    text-align: left;
    float: right;
}

/*			*** OTHERS ***			*/

.floatTable {
    position: absolute;
    padding: 2px 8px;
    background-color: white;
}

.close {
    position: absolute;
    right: 8px;
    top: 0px;
    font-size: 32px;
    color: black;
    cursor: pointer;
}

.close:hover {
    color: #EA6903;
    transition: all .2s;
}

.lightShadow {
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.clearfix {
    clear: both;
}

.displayNone {
    display: none;
}

.infoTableTotal {
    position: relative;
    margin: auto;
    width: 1000px;
    max-width: 100%;
}

.infoTitleTotal {
    background-color: #BB5402;
}

.infoContentTotal {
    position: relative;
    padding: 0px 8px;
    height: 148px;
    transition: height .5s;
    border-left: 4px solid #EE8735;
    border-right: 4px solid #EE8735;
    border-bottom: 4px solid #EE8735;
    overflow: hidden;
}

.infoLeftTotal {
    position: relative;
    box-sizing: border-box;
    width: 33.33%;
    padding: 4px 0px 0px 8px;
    font-weight: 600;
    text-align: right;
    float: right;
}

.infoLeftTotalB {
    position: relative;
    box-sizing: border-box;
    width: 50%;
    border-left: 4px solid #EE8735;
    padding: 4px 0px 0px 8px;
    font-weight: 600;
    text-align: right;
    float: right;
}

.infoMiddleTotal {
    position: relative;
    box-sizing: border-box;
    border-left: 4px solid #EE8735;
    border-right: 4px solid #EE8735;
    width: 33.33%;
    padding: 4px 8px;
    font-weight: 600;
    text-align: right;
    float: right;
}

.infoRightTotal {
    position: relative;
    box-sizing: border-box;
    width: 33.33%;
    padding: 4px 8px 0px 0px;
    font-weight: 600;
    text-align: left;
    float: right;
}

.infoRightTotalB {
    position: relative;
    box-sizing: border-box;
    width: 50%;
    padding: 4px 8px 0px 0px;
    font-weight: 600;
    text-align: left;
    float: right;
}

@media(max-width:462px) {
    .infoContentTotal {
        padding: 0px 4px;
        /*height: 118px;*/
    }
    .infoLeftTotal {
        padding: 4px 0px 0px 4px;
    }
    .infoLeftTotal .infoLeft {
        font-size: 14px;
    }
    .infoLeftTotal .infoRight {
        font-size: 15px;
    }
    .infoMiddleTotal {
        padding: 4px 4px;
    }
    .infoMiddleTotal .infoLeft {
        font-size: 14px;
    }
    .infoMiddleTotal .infoRight {
        font-size: 15px;
    }
    .infoRightTotal {
        padding: 4px 4px 0px 0px;
    }
    .infoRightTotal .infoLeft {
        font-size: 14px;
    }
    .infoRightTotal .infoRight {
        font-size: 15px;
    }
}

.infoNationalB {
    display: none;
}

@media(max-width:678px) {
    .infoContentTotal {
        height: 170px;
    }
    .infoNational {
        display: none;
    }
    .infoNationalB {
        display: block;
    }
    .infoLeftTotalB .infoLeft {
        font-size: 14px;
    }
    .infoLeftTotalB .infoRight {
        font-size: 15px;
    }
    .infoRightTotalB .infoLeft {
        font-size: 14px;
    }
    .infoRightTotalB .infoRight {
        font-size: 15px;
    }
}

.infoContentTotalOut {
    height: 0px;
    transition: height .5s;
}

.fataOut {
    fill: #FFF;
    cursor: auto;
}