@charset "utf-8";
.footprint-wrapper {
    background-image: url("../jpg/footprint-1.jpg");
    background-repeat: no-repeat;
    background-size: 70% 100%;
    background-position: right top;
    height: 1000px;
    -webkit-transition: background-image 0.5s ease-out;
    transition: background-image 0.5s ease-out;
    position: relative;
}
.footprint {
    display: block;
    max-width: 1304px;
    padding: 0 30px;
    margin: 0 auto;
    position: relative;
}
.footprint > section:nth-of-type(1) {
    padding-top: 70px;
}
.footprint-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.footprint-nav li {
    display: block;
    padding: 15px 30px 15px 30px;
    background: transparent;
    color: #003068;
    border-top: solid #C8A064 1px;
    width: 70%;
    position: relative;
    cursor: pointer;
	/*background: linear-gradient(to left, #00B398, #001D39);*/
}
.footprint-nav li:after {
    content: url("../png/icon-more-gold.png");
    position: absolute;
    right: 30px;
    top: 26px;
}
.footprint-nav li:nth-last-of-type(1) {
    border-bottom: solid #C8A064 1px;
}
.footprint-nav li p {
    font-size: 16px;
    font-weight: 500;
    position: relative;
	color: #003068;
}
.footprint-nav li p:after {
    width: 55px;
    height: 0px;
    border-bottom: solid #003068 1px;
    position: absolute;
    bottom: -5px;
    left: 0px;
    content: '';
}

/*.footprint-nav li.active p{color: #003068; font-weight: 600}
.footprint-nav li.active p:after{border-bottom: solid #003068 1px;}*/

.footprint-nav li.active {
    background: -webkit-linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(200, 160, 100, 0.5));
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(200, 160, 100, 0.5));
}
.footprint-nav li.active:after {
    content: url("../png/icon-minus.png");
}
.footprint-nav li label {
    position: absolute;
    width: 0px;
    height: 65%;
    right: -240px;
    top: 0px;
    background: rgba(0, 29, 57, 0.7);
    text-align: center;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    padding-top: 25px;
    overflow: hidden;
    z-index: 2;
    -webkit-transition: width 0.3s ease-in;
    transition: width 0.3s ease-in;
}
.footprint-nav li.active label {
    width: 240px;
    right: -240px;
	
}


.footprint-nav li.active label:after {
    width: 20px;
	height: 20px;
    right: -240px;
	position: relative;
    left: 8px;
	top:3px;
	content: url("../svg/0837-arrow-right-white.svg");
	
}

.footprint-nav li.active a:link, .footprint-nav li.active a:visited, .footprint-nav li.active a:hover { color:#fff;}


.footprint-graphs {
    display: block;
    position: relative;
    height: 400px;
    top: 120px;
    /* background-color: rgba(0, 48, 104, 0.3); */
}




/*.footprint-graphs > section:nth-child(1) {   position: absolute;
    right: 0px;
    bottom: 88px;
    height: 242px;
    width: 25%;
    opacity: 0;
    z-index: 0;
    -webkit-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
	background:red;
	}*/


.footprint-graphs > section {
    position: absolute;
    right: 0px;
    bottom: 35px;
    height: 265px;
    background-color: rgba(0, 48, 104, 0.8);
    width: 70%;
    opacity: 0;
    padding: 20px;
    z-index: 0;
    -webkit-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}
.footprint-graphs > section.active {
    opacity: 1;
    z-index: 1;
}
.contribution {
    padding: 45px;
    position: absolute;
    top: 40px;
    right: 30px;
    background-color: rgba(0, 48, 104, 0.8);
	-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
}
.chart-container {
    width: 160px;
    height: 160px;
}
.bar-container {
    height: 160px;
    width: 180px;
}
.footprint-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
    -webkit-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.footprint-slide.active {
    opacity: 1;
    z-index: 1;
}
section.pointers {
    position: relative;
}
.pointer {
    position: absolute;
    /*width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.6);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: solid rgba(255, 255, 255, 0.2) 5px;
    cursor: pointer;*/
}
/*.pointer:after {
    content: url("../images/icon-plus.png");
    color: #001D39;
    position: absolute;
    top: 10px;
    left: 10px;
    font-weight: 100;
}*/
/*.data-label {
    position: absolute;
    background: rgba(200, 160, 100, 0.7);
    color: #FFF;
    padding: 10px;
    font-size: 16px;
    text-transform: uppercase;
    white-space: nowrap;
	 font-weight:500;
}*/

/*.data-label:before {content:''; position: absolute;width:10px;height:10px;background:red}*/

/*.pointer.lab-top .data-label {top: -13px;left: -100px;}
.pointer.lab-left .data-label {
       right: 182%;
    top: -19px;
}

.pointer.lab-leftbot .data-label {
       right: 47%;
    top: 18px;
}
.pointer.lab-right .data-label {
    left: 170%;
    top: -15px;
}

.pointer.lab-rightbot .data-label {
    left: 175%;
    top: 15px;
}
.pointers .tooltip {
    display: block;
    position: absolute;
    width: 347px;
    height: 121px;
    border: solid #C8A064 1px;
    color: #FFF;
}
.pointers .tooltip h1 {
    padding: 10px 20px;
    display: block;
    border-bottom: solid #C8A064 1px;
    font-size: 16px;
    color: #FFF;
}
.pointers .tooltip p {
    padding: 10px 20px;
    font-size: 16px;
    color: #FFF;
    font-weight: 300;
}
.pointers strong {
    font-weight: 500;
}*/
.tt-top {
    top: -113px;
    left: -357px;
}
.tt-bottom {
    bottom: -126px;
    left: -357px;
}
.tt-right {
    right: -555px;
    top: 10px;
}
.overlay-4 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #d4e3db;
    z-index: 1;
    visibility: hidden;
}
.overlay .container {
    position: relative;
}
.overlay-4 .col-50 > img {
    height: 50%;
    margin-bottom: -4px;
}
.overlay-4 .col-50 > .content {
    padding: 15px 40px 0 0;
}

.overlay-4 .closebtn {position: absolute; top: 20px; right: 70px;  color: #FFF; cursor: pointer; font-size: 24px;font-weight: bold; z-index:99;}
.overlay-4 .closebtn:before {content:''; background:#00AE95; border-radius:50%; width:50px; height:50px; position:absolute; right:-17px; top:-10px; z-index:-9999999;}


.dual-map > .map {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
    height: 648px;
    position: relative;
}

.single-map > .map {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
    height: 648px;
    position: relative;
}



.map .pointers {
    
}
.map img {
    position: absolute;
    width: 100%;
    /*height: 100%;*/
}

.click-map {position: absolute; bottom: 0px; left: 300px; z-index: 1; color:#fff; font-size:13px; font-wright:bold;}

@media screen and (max-width:1440px) {

.dual-map > .map {width: 50%;display: inline-block;vertical-align: top;margin-right: -4px;height: 486px;position: relative;}

}
@media screen and (max-width:1380px) {

.dual-map > .map {height: 461px;}

}

@media screen and (max-width:1086px) {

.dual-map > .map {height: 345px;}



.footprint-wrapper {background-size: 85% 100%;}
.footprint-graphs > section { width: 90%; bottom: 53px;}




}



@media screen and (max-width:800px)
{

.footprint-wrapper {background-size: 100% 100%;}

.footprint-nav li p {color: #C8A064;}
.footprint-nav li { width: 40%;}

}

@media screen and (max-width:768px) {
    .dual-map > .map {
        width: 100%;
        display: block;
    }
}

@media screen and (max-width:500px) {

.dual-map > .map {height: 285px;}

.footprint-wrapper {background-size: 120% 56%;height: 1706px;}
.footprint-nav li p {color: #fff;}
.footprint-nav li {width: 92%;}
.footprint > section:nth-of-type(1) {padding-top: 78px;}

.cols-5 > section, .cols-5 > .controller > section {width: 100%;}

.bar-container{display:none}

.footprint-graphs > section { height: auto;bottom: -660px;}
.cols-5 > section span {font-size: 22px;right: 54px;top: 96px;}

}

@media screen and (max-width:380px) {

.dual-map > .map {height: 253px;}

}

@media screen and (max-width: 330px){
.dual-map > .map {height: 216px;}
}