#main__content .main-wrapper .content-header  h2:after{
    bottom: -1.5em;
    display: block;
    background-color: #3e3e3e;
}

.block_content{
    overflow: hidden;
}

.item-container{
    position: relative;
    overflow: hidden;
    width: 500%;
    -webkit-transition: -webkit-transform 300ms ease-in-out;
    -ms-transition: -ms-transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out;
}



.item{
    position: relative;
    float: left;
    width: 20%;
}

.item .linecount{
    position: absolute;
    top: 0;
    left: .1em;
    padding: 5em 0;
    width: 3em;
    height: 100%;
    background-color: #fff;
    color: #6e6e6e;
    text-align: center;
    /* box-sizing: border-box; */
}



.mph h6{
    padding: .5em;
    width: 100%;
    color:#de13c5;
    text-align: center;
    font-weight: 100;
    font-size: 1.8em;
}

/*---------------------------------------------------------------------------------------------------------------------
                                                    DATAMAPS
---------------------------------------------------------------------------------------------------------------------*/
#main__content .main-wrapper h1,
#main__content .main-wrapper h2 {
    font-size:      2.2em;
}

#main__content #worldmap-wrapper {
    position:       relative;
    width:          100%;
    padding-top:    75%;
    overflow-x:     scroll;
    overflow-y:     hidden;
}
#worldmap-container{
    position:       absolute!important;
    top:            0;
    left:           0;
    width:          200%;
    height:         100%;
}
#worldmap-text {
    text-align:     center;
}

svg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
}


#worldmap-legend{
    position: relative;
    bottom: auto;
    left:auto;
    margin: 1em auto;
    width: 95%;
}

#worldmap-legend h6{
    font-size: 1.4em;
}

#worldmap-legend p, #worldmap-legend li{
    color:#777777;
    font-size: 1em;
}
#worldmap-legend p{
    text-align: left;
    font-size: 1.3em;
    line-height: 1.5em;
}
#worldmap-legend ul{
    padding-top: 1em;
    overflow: hidden;
}

/******************** 1000 ********************/
#worldmap-legend ul li{
    width: 25%;
    float: left;
}
#worldmap-legend ul li:after{
    position: absolute;
    top: .75em;
    left: 0;
    display: block;
    width: 1.5em;
    height: 1.5em;
    border-radius: 5em;
    background-color: #be00a7;
    content:'';
}

/******************** 750 ********************/
#worldmap-legend ul li+li:after{
    background-color: #ce3fbc;
}

/******************** 500 ********************/
#worldmap-legend ul li+li+li:after{
    background-color: #de7fd2;
}

/******************** 250 ********************/
#worldmap-legend ul li+li+li+li:after{
    background-color: #eebfe9;
}


/*---------------------------------------------------------------------------------------------------------------------
                                                    TABLE CELL COLOR
---------------------------------------------------------------------------------------------------------------------*/
.table .row .cell.odd{
    background-color: #2b2b2b;
}

/*---------------------------------------------------------------------------------------------------------------------
                                                    TABLE CELL SIZE
---------------------------------------------------------------------------------------------------------------------*/
.cell.cell1{
    width: 40%;
}
/* 4 cell */
.cell.cell2{
    width: 60%;
}

/*---------------------------------------------------------------------------------------------------------------------
                                                    TABLE CELL STYLE
---------------------------------------------------------------------------------------------------------------------*/
.cell.cell1, .cell.cell2{
    text-align: left;
}

.cell.cell1{
    padding-left: 4em;
    text-align: left;
}
/* 4 cell */
.cell.cell2{
    padding-left: 1em;
}

.cell.cell1 .container{
    color:#6e6e6e;
    font-weight: 100;
}

.cell.label .container{
    color:#fff;
    font-weight: bold;
}

/*---------------------------------------------------------------------------------------------------------------------
                                                    DOT STYLE
---------------------------------------------------------------------------------------------------------------------*/
.dot-container{
    position: relative;
    padding: 1em;
    width: 100%;
    text-align: center;
}

    .dot-container .dot{
        display: inline-block;
        margin-right: .5em;
        width: 1em;
        height: 1em;
        border-radius: 5em;
        background-color: #272727;
    }

/*---------------------------------------------------------------------------------------------------------------------
                                                    ACTIVE SLIDE
---------------------------------------------------------------------------------------------------------------------*/
.item-container[data-slide='0']{
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}
.item-container[data-slide='1']{
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    transform: translateX(-20%);
}
.item-container[data-slide='2']{
    -webkit-transform: translateX(-40%);
    -moz-transform: translateX(-40%);
    -ms-transform: translateX(-40%);
    transform: translateX(-40%);
}
.item-container[data-slide='3']{
    -webkit-transform: translateX(-60%);
    -moz-transform: translateX(-60%);
    -ms-transform: translateX(-60%);
    transform: translateX(-60%);
}
.item-container[data-slide='4']{
    -webkit-transform: translateX(-80%);
    -moz-transform: translateX(-80%);
    -ms-transform: translateX(-80%);
    transform: translateX(-80%);
}

.item-container[data-slide='0'] + .dot-container .dot0,
.item-container[data-slide='1'] + .dot-container .dot1,
.item-container[data-slide='2'] + .dot-container .dot2,
.item-container[data-slide='3'] + .dot-container .dot3,
.item-container[data-slide='4'] + .dot-container .dot4{
    background-color: #fff;
}




/*******************************************                                *******************************************
-----------------------------------------------------------------------------------------------------------------------
                                                      MEDIA QUERIES
-----------------------------------------------------------------------------------------------------------------------
*********************************************                                ******************************************/
/*---------------------------------------------------------------------------------------------------------------------
REDUCE HEIGHT ON LANDSCAPE
---------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape) {
    #world-map-container {
        margin-top: -3em;
        margin-bottom: -4em;
    }
}


@media only screen
and (max-width : 360px) {
    #legend ul li{
        width: 50%;
    }
}