@media screen and (max-width: 900px) {
  #country-menu {
    width: 60%;
  }
  #menu-country-open {
    right: -20px;
    top: 50px;
    transform: rotate(90deg);
    opacity: .71;
    z-index: 9;
    position: relative;
    width: 100px;
    float: right;
  }
}
@media only screen and (max-width: 768px) {
  .page-data-demographic-dividend .graph-wrapper .country_details .thepopover ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

@media only screen and (max-width: 767px) {
  /* //dd-data-tabs */
  .dd-data-tabs {
    position: relative;
    width: 100%;
    z-index: 1;
    margin-bottom: 0;
  }
  .dd-data-tabs ul {
    list-style: outside none none;
    margin: 0 0 0 -1px;
    padding: 0;
    width: 100%;
    overflow: hidden;
  }
  .dd-data-tabs > ul > li {
    border-radius: 0;
    width: 100%;
    min-width: 160px;
    float: none;
    border-bottom: 1px #ffffff solid;
  }
  .dd-data-tabs > ul > li > a {
    padding: 15px 20px;
    text-align: left;
  }
  /* //dd-data-tabs end */

  /* //Overview and pyramid chart css */
  .dd-charts-wrapper {
    padding: 10px;
  }
  .graph-wrapper .graph-row-pyramid {
    flex-wrap: wrap;
  }
  .graph-row-pyramid .pyramid-graph {
    width: 100%;
    float: none;
    margin: 0;
  }
  .pyramid-graph .source svg g.rule1 text {
    -ms-transform: rotate(-38deg); /* IE 9 */
    -webkit-transform: rotate(-38deg); /* Safari 3-8 */
    transform: rotate(-38deg);
    -webkit-transform-origin: 0% 97%;
    transform-origin: 0% 97%;
    -ms-transform-origin: 0% 97%; /* IE 9 */
    font-size: 10px;
  }
  .pyramid-graph .source svg g.rule2 text {
    -ms-transform: rotate(-38deg); /* IE 9 */
    -webkit-transform: rotate(-38deg); /* Safari 3-8 */
    transform: rotate(-38deg);
    -webkit-transform-origin: 0% 97%;
    transform-origin: 0% 97%;
    -ms-transform-origin: 0% 97%; /* IE 9 */
    font-size: 10px;
  }
  .gauge-charts {
    width: 100%;
    float: none;
    margin-top: 25px;
  }
  .gauge-charts .bar-gender {
    margin-top: 30px;
  }
  .range-slide-wrapper span.range-text {
    float: none;
    color: #000000;
    text-align: left;
    display: block;
    margin-bottom: 10px;
  }
  .pyramid-xaxis-text {
    bottom: 32px;
  }
  .range-slide-wrapper .range-year-wrap {
    width: 98%;
  }
  .range-slide-wrapper .range-year-wrap::before {
    left: 0%;
    font-size: 11px;
  }
  .range-slide-wrapper .range-year-wrap::after {
    font-size: 11px;
    right: 0%;
  }
  .range-year-wrap .source-info-wrapper {
    position: absolute;
    right: -6px;
    top: -30px;
  }
  .range-slide-wrapper .source-info-wrapper .infobx .info-popover {
    left: auto;
    right: -10px;
  }
  .range-slide-wrapper .infobx .info-popover .arowbx:after {
    left: auto;
    right: -10px;
  }
  .range-selected-text {
    font-size: 15px;
  }

  .graph-wrapper h2 {
    font-size: 16px;
  }
  .healthy-bar-position .dropdown-wrap {
    top: 100px;
  }
  #hle_table table.legend,
  #hle_table_sixty table.legend {
    float: none;
  }
  .healthy-bar-position .source-info-wrapper {
    display: inline-block;
  }
  #hle_title .source-info-wrapper .infobx .info-popover {
    left: -100px;
  }
  #hle_title .infobx .info-popover .arowbx:after {
    margin: 0 auto;
  }
  #investment_health,
  #investment_education,
  #investment_social_protection,
  #investment_real_economy {
    float: left;
    width: 46%;
    margin: 2% 2%;
  }
  #investment_health h4,
  #investment_education h4,
  #investment_social_protection h4,
  #investment_real_economy h4 {
    font-size: 15px;
    min-height: 137px;
  }
  #investment_health h4,
  #investment_education h4 {
    min-height: 50px;
  }
  #investment_real_economy h4 {
    min-height: 130px;
  }
  /* //Overview and pyramid chart css end */

  #family_plannig .col-8,
  #family_plannig .col-4 {
    width: 100%;
    margin-bottom: 30px;
  }
  #family_plannig .col-4 .woid_block {
    width: 100%;
    margin: 2% 0 15% 0;
  }
  .chart-graph-info-block .source-info-wrapper .infobx .info-popover {
    left: -23px;
  }
  .chart-graph-info-block .infobx .info-popover .arowbx:after {
    margin: 0;
  }
  .woid-tooltip, .ipv-tooltip {
    top: 9px !important;
    left: 1% !important;
  }
  .child-mrg-block {
    width: 100%;
    margin: 2% 0;
    float: none;
  }
  #fgm {
    width: 100%;
    margin: 2% 0;
    float: none;
  }
  #child-mrg {
    min-height: 320px;
  }
  #child-mrg svg {
    padding: 30px 0 0 0;
  }
  #women_violence {
    width: 100%;
  }
  #women_violence .source-info-wrapper .infobx .info-popover {
    left: -176px;
  }
  #women_violence .infobx .info-popover .arowbx:after {
    left: auto;
    right: 5px;
  }
  #education_group_bar {
    width: 100%;
    margin: 0;
    float: none;
  }
  #education_interactive_group_bar {
    width: 100%;
    margin: 50px 0 0 0;
    float: none;
  }
  #education_group_bar .source-info-wrapper {
    right: 54%;
    top: 0%;
  }
  #education_literacy_group_bar .source-info-wrapper .infobx .info-popover {
    left: -180px;
  }
  #education_literacy_group_bar .infobx .info-popover .arowbx:after {
    left: auto;
  }
  #employment_chart .employment-lpf-grid-box {
    float: none;
    margin: 0;
    width: 100%;
  }
  #employment_chart .employment-lpf-right-section {
    margin: 40px 0 0 0;
  }
  .trans-goals ul.chart-legend {
    top: 6%;
  }
  #employment_chart .filter-label {
    margin-bottom: 15px;
  }
  #unemployment_by_age_and_sex {
    width: 100%;
    float: none;
    margin-bottom: 50px;
  }
  #working_poverty {
    width: 100%;
    float: none;
    margin: 0 0 50px 0;
  }
  #vulnerably_employed_people_by_sex .source-info-wrapper .infobx .info-popover {
    left: -22px;
  }
  #vulnerably_employed_people_by_sex .infobx .info-popover .arowbx:after {
    right: auto;
  }
  .ui-slider-horizontal {
    height: .6em;
  }
  .graph-wrapper .ui-slider-horizontal .ui-slider-handle {
    top: -0.5em;
    margin-left: -.7em;
    border-radius: 60px;
    width: 1.5em;
    height: 1.5em;
    outline: none;
    cursor: move;
  }
  #hle_bar,
  #hle_bar_sixty {
    position: relative;
    width: 300px;
    height: 250px;
    float: none;
  }
  #education_group_bar {
    width: 100%;
    margin: 0;
    float: none;
  }
  #education_interactive_group_bar {
    width: 100%;
    margin: 50px 0 0 0;
    float: none;
  }
  #education_group_bar .source-info-wrapper {
    right: 54%;
    top: 0%;
  }
  #education_literacy_group_bar .source-info-wrapper .infobx .info-popover {
    left: -180px;
  }
  #education_literacy_group_bar .infobx .info-popover .arowbx:after {
    left: auto;
  }
  #employment_chart .employment-lpf-grid-box {
    float: none;
    margin: 0;
    width: 100%;
  }
  #employment_chart .employment-lpf-right-section {
    margin: 40px 0 0 0;
  }
  .trans-goals ul.chart-legend {
    top: 6%;
  }
  #employment_chart .filter-label {
    margin-bottom: 15px;
  }
  #unemployment_by_age_and_sex {
    width: 100%;
    float: none;
    margin-bottom: 50px;
  }
  #working_poverty {
    width: 100%;
    float: none;
    margin: 0 0 50px 0;
  }
  #vulnerably_employed_people_by_sex .source-info-wrapper .infobx .info-popover {
    left: -22px;
  }
  #vulnerably_employed_people_by_sex .infobx .info-popover .arowbx:after {
    right: auto;
  }
  .ui-slider-horizontal {
    height: .6em;
  }
  .graph-wrapper .ui-slider-horizontal .ui-slider-handle {
    top: -0.5em;
    margin-left: -.7em;
    border-radius: 60px;
    width: 1.5em;
    height: 1.5em;
    outline: none;
    cursor: move;
  }
  #hle_bar,
  #hle_bar_sixty {
    position: relative;
    width: 300px;
    height: 250px;
    float: none;
  }
  #country-menu {
    width: 100%;
  }
  #country-menu .menu__nav {
    padding: 100px 10%;
  }
  #country-menu .menu__link {
    font-size: 22px;
  }
  #menu-country-open {
    right: 0;
    top: 19px;
    transform: rotate(0deg);
    opacity: .71;
    z-index: 1000;
    position: relative;
    width: 100px;
    float: right;
  }
}

@media only screen and (max-width: 720px) {
  .page-data-demographic-dividend .graph-wrapper .country_details .thepopover ul {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

@media only screen and (max-width: 640px) {
/*  #investment_health,
  #investment_education,
  #investment_social_protection,
  #investment_real_economy {
    float: left;
    width: 100%;
    margin: 1% 0;
    text-align: center;
  }*/
}

@media (min-width: 640px) and (max-width: 767px) {
  .bar-life-expect {
    width: 46%;
    height: 290px;
    float: left;
    margin: 0 2%;
  }
  .bar-gender {
    width: 46%;
    min-height: 260px;
    float: left;
    margin: 0 2%;
  }
  .gauge-charts .bar-gender {
    margin-top: 0;
  }
  #family_plannig .col-8 {
    width: 56%;
    margin-bottom: 30px;
    float: left;
  }
  #family_plannig .col-4 {
    width: 34%;
    margin-bottom: 30px;
    float: left;
  }
  #family_plannig .col-8 .fp_fgm_block {
    width: 96%;
    margin: 0 2%;
  }
  #family_plannig .col-4 .woid_block {
    width: 96%;
    margin: 0 2% 10% 2%;
  }
  #unemployment_by_age_and_sex {
    width: 46%;
    float: left;
    margin: 0 2%;
  }
  #working_poverty {
    width: 46%;
    float: left;
    margin: 0 2%;
  }
  #hle_bar,
  #hle_bar_sixty {
    position: relative;
    width: 360px;
    height: 300px;
    float: none;
  }
  #empowerment-bar-chart,
  #empowerment-residence-bar-chart,
  #empowerment-quential-bar-chart {
    position: relative;
    height: 600px;
  }
}

@media (min-width: 768px) and (max-width: 999px) {
  .range-year-wrap .source-info-wrapper {
    right: -40px;
  }
  .range-slide-wrapper .range-year-wrap::after {
    right: 1%;
  }
  .range-slide-wrapper .range-year-wrap::before {
    left: 5%;
  }
  #hle_table table.legend,
  #hle_table_sixty table.legend {
    float: none;
  }

  #wrapper-empowerment-map .source-info-wrapper .infobx .info-popover {
    left: -21px;
  }
  #wrapper-empowerment-map .infobx .info-popover .arowbx:after {
    left: 0;
    right: auto;
  }
  #adolescent_birth_rate .source-info-wrapper .infobx .info-popover {
    left: auto;
    right: -21px;
  }
  #adolescent_birth_rate .infobx .info-popover .arowbx:after {
    left: auto;
    right: 0;
  }
  #employment_chart .filter-label {
    margin: 0 15px 15px 0;
  }
  .trans-goals ul.chart-legend {
    top: 3%;
  }
  #empowerment-bar-chart,
  #empowerment-residence-bar-chart,
  #empowerment-quential-bar-chart {
    position: relative;
    height: 600px;
  }
}

@media only screen and (max-width: 480px) {
  .trans-goals ul.chart-legend {
    top: 23%;
  }
  .wrapper_bar_pie {
    padding-top: 50px;
  }
  #investment_social_protection .source-info-wrapper .infobx:hover .info-popover {
    left: -20px;
  }
  #investment_education .source-info-wrapper .infobx .info-popover {
    left: auto;
    right: -22px;
  }
  #investment_education .infobx .info-popover .arowbx:after {
    left: auto;
  }
  #investment_social_protection .source-info-wrapper .infobx .info-popover .arowbx:after {
    left: 0;
    right: auto;
  }
  #education_literacy_group_bar .source-info-wrapper .infobx .info-popover {
    left: -22px
  }
  #education_literacy_group_bar .infobx .info-popover .arowbx:after {
    left: 0px;
    right: auto;
  }
  #education_interactive_group_bar .source-info-wrapper .infobx .info-popover {
    left: -112px;
  }
  #education_interactive_group_bar .source-info-wrapper .infobx .info-popover .arowbx:after {
    left: 11%;
  }
  #education_group_bar .source-info-wrapper .infobx .info-popover {
    left: -180px;
  }
  #education_group_bar .source-info-wrapper .infobx .info-popover .arowbx:after {
    left: auto;
    right: 0;
  }
  #adolescent_birth_rate .source-info-wrapper .infobx .info-popover {
    left: -100px;
  }
  .chart-graph-info-block .source-info-wrapper .infobx .info-popover {
    left: -16px;
  }
  .chart-graph-info-block .infobx .info-popover .arowbx:after {
    left: -2%;
    right: auto;
  }
  #gender-equality-block .child-mrg-block .source-info-wrapper .infobx:hover .info-popover {
    left: -12px;
    right: auto;
  }
  #gender-equality-block .child-mrg-block .source-info-wrapper .infobx .info-popover .arowbx:after {
    left: -9px;
    right: auto;
  }
  #fgm .source-info-wrapper .infobx:hover .info-popover {
    left: auto;
    right: -22px;
  }
  #fgm .source-info-wrapper .infobx .info-popover .arowbx:after {
    left: auto;
    right: 0;
  }
  .page-data-demographic-dividend .graph-wrapper .country_details .thepopover ul {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  .healthy-bar-position p {
    width: 100%;
  }
  .healthy-bar-position .dropdown-wrap {
    position: relative;
    top: auto;
  }
  .chart-graph-info-block {
    margin-bottom: 15px;
  }
  #empowerment-bar-chart,
  #empowerment-residence-bar-chart,
  #empowerment-quential-bar-chart {
    position: relative;
    height: auto;
  }
  .stickOnmobile {
    background: none repeat scroll 0 0 orange;
    height: 145px;
    position: relative;
    width: 100%;
    background-color: #fff;
    border-top: 1px #ccc solid;
  }
  .stickOnmobile.active {
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
  }
  .stickOnmobile .range-slide-wrapper {
    padding: 20px 10px 50px 10px;
  }
  #investment_health h4,
  #investment_education h4 {
    min-height: 80px;
  }
  #investment_social_protection h4 {
    min-height: 130px;
  }
  .range-selected-text {
    width: 90%;
    bottom: -65px;
  }
  .mf-wrapper {
    bottom: 75px;
  }
  .life_expectancy_chart svg, 
  .total_fertility_chart svg {
    margin-left: -18px;
  }
  .life_expectancy_chart svg.gauge g, 
  .total_fertility_chart svg.gauge g {
    transform: translate(160px, 136px);
  }
  .pyramid-graph .chart-labels.females-grp {
    font-size: 11px;
  }
  .pyramid-graph .source svg g.rule2 text,
  .pyramid-graph .source svg g.rule1 text {
    -ms-transform: rotate(-48deg); /* IE 9 */
    -webkit-transform: rotate(-48deg); /* Safari 3-8 */
    transform: rotate(-48deg);
    -webkit-transform-origin: 0% 95%;
    transform-origin: 0% 95%;
    -ms-transform-origin: 0% 95%; /* IE 9 */
    font-size: 8px;
  }
}
@media only screen and (device-width : 667px) and (device-height : 375px) and (-webkit-device-pixel-ratio : 2) {
  .stickOnmobile {
    background: none repeat scroll 0 0 orange;
    height: 100px;
    position: relative;
    width: 100%;
    background-color: #fff;
    border-top: 1px #ccc solid;
  }
  .stickOnmobile.active {
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
  }
  .stickOnmobile .range-slide-wrapper {
    padding: 20px 10px 25px 10px;
  }
}
@media only screen and (device-width : 640px) and (device-height : 360px) {
  .stickOnmobile {
    background: none repeat scroll 0 0 orange;
    height: 100px;
    position: relative;
    width: 100%;
    background-color: #fff;
    border-top: 1px #ccc solid;
  }
  .stickOnmobile.active {
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
  }
  .stickOnmobile .range-slide-wrapper {
    padding: 20px 10px 25px 10px;
  }
}
@media only screen and (device-width : 823px) and (device-height : 411px) {
  .stickOnmobile {
    background: none repeat scroll 0 0 orange;
    height: 100px;
    position: relative;
    width: 100%;
    background-color: #fff;
    border-top: 1px #ccc solid;
  }
  .stickOnmobile.active {
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
  }
  .stickOnmobile .range-slide-wrapper {
    padding: 20px 10px 25px 10px;
  }
}
@media only screen and (device-width : 736px) and (device-height : 414px) and (-webkit-device-pixel-ratio : 3) {
  .stickOnmobile {
    background: none repeat scroll 0 0 orange;
    height: 100px;
    position: relative;
    width: 100%;
    background-color: #fff;
    border-top: 1px #ccc solid;
  }
  .stickOnmobile.active {
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
  }
  .stickOnmobile .range-slide-wrapper {
    padding: 20px 10px 25px 10px;
  }
}