*{
	margin:0;
	padding:0;
	list-style:none;
	font-family:sans-serif;
}



.mapa-cont-gen{
width: 100vw;
height: 100vh;
background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/global-img/fondo.jpg);	
    position: relative;
}

@font-face {
font-family: "Cinzel";
src:url(../../../../fonts/Cinzel-Regular.ttf);
font-weight: 100;
}

@font-face {
font-family: "Cinzel Bold";
src: url(../../../../fonts/Cinzel-Bold.ttf);
font-weight: 800;
}

@font-face {
font-family: "Cinzel Decorative";
src: url(../../../../fonts/CinzelDecorative-Regular.ttf);
font-weight: 500;
}

@font-face {
font-family: "Cinzel Decorative";
src: url(../../../../fonts/CinzelDecorative-Bold.ttf);
font-weight: 800;
}

@font-face {
font-family: "Martel UltraLight";
src: url(../../../../fonts/Martel-UltraLight.ttf);
font-weight: 100;
}

@font-face{
font-family: "Martel";	
src: url(../../../../fonts/Martel-Regular.ttf);
font-weight: 500;
}

@font-face {
font-family: "Martel Extra Bold";
src: url(../../../../fonts/Martel-ExtraBold.ttf);
font-weight: 800;
}

@font-face{
font-family: "Montserrat";	
src: url(../../../../fonts/Montserrat-Regular.ttf);
font-weight: 500;
}

@font-face {
font-family: "Montserrat Medium";
src: url(../../../../fonts/Montserrat-Medium.ttf);
font-weight: 400;
}

@font-face {
font-family: "Tabac Sans";
src: url(../../../../fonts/Tabac_Sans_Thin.otf);
font-weight: 100;
}

@font-face {
font-family: "Tabac Sans";
src: url(../../../../fonts/Tabac_Sans_Light.otf);
font-weight: 200;
}

@font-face {
font-family: "Tabac Sans";
src: url(../../../../fonts/Tabac_Sans_Regular.otf);
}

@font-face {
font-family: "Tabac Sans";
src: url(../../../../fonts/Tabac_Sans_SemiBold.otf);
font-weight: 700;
}

@font-face {
font-family: "Tabac Sans";
src: url(../../../../fonts/Tabac_Sans_Bold.otf);
font-weight: 900;
}

@font-face {
font-family: "TrajanPro Regular";
src: url(../../../../fonts/TrajanPro-Regular.otf);
font-weight: 900;
}

.ContenedorMapaBicentenario{
 width: 100vw;
 height: 80vh;

}

.ContenedorMapaAntiguoConCifras{
 width: 100vw;
 height: 80vh;
 display: none;	
}

	.MapaBicentenarioContenidoMapa{
	width: 60%;
	height: 100%;	
	display: block;
	float: left;
	background-repeat: no-repeat;
	background-color: #162a2c;	
    overflow: hidden;
        position: relative;
         cursor: grab;
	}
.MapaBicentenarioContenidoMapa:click {
	cursor: grabbing;
}

	.MapaBicentenarioTextos{
	    width: 40%;
	height: 100vh;
	display: block;
	float: left;
	padding-left: 2%;
	padding-right: 1%;	
	}

	.ContenedorExplicacionDelMapa{
	width: 100%;
	margin-top: 8%;
	margin-bottom: 2%;	
		
	}

	.LaExplicacionDelMapa{
	width: 260px;
	height: 114px;	
	background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/datos/desktop/img/Img_CartaDeCorografia.png);
	background-repeat: no-repeat;
	float: left;
	display: block;	
	}
	.TituloMapaConDatosA{
	width: 60%;
	font-family: "Cinzel";
	font-size: 42px;
	font-weight: 100;
	color: #EECB77;
	padding-left: 3%;
	margin-top: 20%;
	letter-spacing: 2px;
	line-height: 110%;	
	}
	.ParrafoIntroductorioTerritorios{
	width: 60%;
	font-size: 16px;
	font-family:"Tabac Sans";
	padding-left: 5%;
	color: #F8F0E1;
	letter-spacing: 0.5px;
	padding-top: 2%;	
	}
    .ContenedorDeConvencionesCifrasT{
    width: 50%;
    min-width: 350px;
	height: 5%;
	margin-top: 1.5%;	
	background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/datos/desktop/img/Convencionesmapa.png);
	background-repeat: no-repeat;
	margin-left: 5%;	
	}
.ContenedordeCifrasProvincias{
	width: 50%;
    min-width: 350px;
	height: 23%;
	margin-left: 5%;
}
.ContenedorVerMapaBicentenario{
	width: 50%;
	height: 35%;
	padding-top: 10%;
	margin-left: 5%;
}

.BotonVerMapaAntiguo{
	width: 50%;
	height: 35%;
	background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/datos/desktop/img/Btn_VerMas.png);
	background-repeat: no-repeat;
	float: right;
	background-position: right;
	padding-right: 20%;
	
}
   


.MapaCartaCoreografica{
width: 100%;
height: auto;	
}
	.ContenedorContenidoMapa{
	width: 100%;
	height: 44vh;	
	}

		.TituloCorograficoMapa{
		width: 70%;
		margin-bottom: 5%;
		font-family: "Cinzel";
		font-weight: 100;
		color: #EDD19A;
		font-size: 40px;
		padding-left: 3%;
		letter-spacing: 1.5px;	
		}

		.ParrafitoCorograficoMapa{
		width: 60%;
		font-family:"Tabac Sans";
		color:#F8F0E1;
		line-height: 140%;
		letter-spacing: 0.5px;
		padding-left: 3%;
		font-size: 16px;	
		}


		.ContenedorBotonVerPoblacionT{
		width: 50%;
		height: 6vh;
		padding-top: 6%;	
		}
			.BotonVerPoblacionT{
			width: 170px;
			height: 42px;
			background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/datos/desktop/img/Btn_poblacion.png);
			background-repeat: no-repeat;
			float: right;
			position: absolute;
			left: 73%;
			bottom: 21%;	
			}	

	.ContenedorDelMapaDelTerritorio{
	width: 100vw;
	height: 100vh;
	background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/global-img/fondo.jpg);
	display: block;	
	}
		.ElMapaconlosTerritorios{
		width: 60%;
		height: 80vh;
		display: block;	
		float: left;	
            overflow: hidden;
		}

		.LasCifrasdelTerritorio{
		width: 40%;
		height: 80vh;
		display:block;
		float: left;	
        background: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/global-img/fondo.jpg);
		}



.mapa-image {
	width: 100%;
    height: 100%;
    background: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/datos/desktop/img/mapa-d.png) no-repeat;
    background-size: 100%;
    background-position: center;
    position: absolute;
    transform: translate(-50%,-50%);
    top:50%;
    left:50%;
}
.slidecontainer {
    position: relative;
    z-index: 10;
    width: 100%;
    background: #333;
    padding: 10px 20px;
	/* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	/* IE 5-7 */
	filter:
	alpha(opacity=80);
	/* Netscape */
	-moz-opacity:0.8;
	/* Safari 1.x */
	-khtml-opacity:0.8;
	-webkit-opacity:0.8;
	/* Good browsers */
	opacity: 0.8;
    height: 40px;
}
#slider{
    float: left;
}
.zoom-text {
	float: left;
    width: 50px;
    margin-left: 5px;
    font-family: "Tabac Sans";
    color: #FFEDBB;
}
.icon-mover{
    margin-top: -9px;
}

@media only screen and (max-width: 1550px) {
	    .ContenedorBotonVerPoblacionT{
		width: 58%;
		height: 6vh;
		padding-top: 10%;}
	    .ParrafitoCorograficoMapa{
		width: 66%;
		font-family: "Tabac Sans";
		color:#F8F0E1;
		line-height: 140%;
		letter-spacing: 0.5px;
		padding-left: 3%;
		font-size: 16px;	
		}
}


@media only screen and (max-width: 1300px) {
	    .TituloCorograficoMapa{
		width: 75%;
		margin-bottom: 5%;	
		font-family: "Cinzel";
		font-weight: 100;
		color: #EDD19A;
		font-size: 40px;
		padding-left: 3%;
		letter-spacing: 1px;}
		.ContenedorBotonVerPoblacionT{
		width: 68%;
		height: 6vh;
		padding-top: 18%;}
	    .ParrafitoCorograficoMapa{
		width: 58%;
		font-family: "Tabac Sans";
		color:#F8F0E1;
		line-height: 140%;
		letter-spacing: 0.5px;
		padding-left: 3%;
		font-size: 16px;	
		}
}

@media only screen and (max-width: 1284px) {
	    .TituloCorograficoMapa{
		width: 80%;
		margin-bottom: 5%;	
		font-family: "Cinzel";
		font-weight: 100;
		color: #EDD19A;
		font-size: 40px;
		padding-left: 3%;
		letter-spacing: 1px;}
	   
	   .ContenedorBotonVerPoblacionT{
		width: 68%;
		height: 6vh;
		padding-top: 18%;}
	    .ParrafitoCorograficoMapa{
		width: 70%;
		font-family: "Tabac Sans";
		color:#F8F0E1;
		line-height: 140%;
		letter-spacing: 0.5px;
		padding-left: 3%;
		font-size: 16px;	
		}
		.TituloMapaConDatosA{
		width: 90%;
            margin-top: 10%;
            font-size: 35px;
		}
    .LasCifrasdelTerritorio .TituloMapaConDatosA {
	margin-top: 20%;
}
    .image-grafica{
    width: 90%;
    display: block;
    margin: auto;
}
    .ContenedorVerMapaBicentenario {
	width: 70%;
            padding-top: 20%;
}
	
}


@media only screen and (max-width: 1100px) {
		.TituloCorograficoMapa{
		width: 80%;
		margin-bottom: 8%;
		font-family: "Cinzel";
		font-weight: 100;
		color: #EDD19A;
		font-size: 35px;
		padding-left: 3%;
		letter-spacing: 1px;}
	   
	   .ContenedorBotonVerPoblacionT{
		width: 70%;
		height: 6vh;
		padding-top: 25%;}
	    .ParrafitoCorograficoMapa{
		width: 90%;
		font-family: "Tabac Sans";
		color:#F8F0E1;
		line-height: 140%;
		letter-spacing: 0.5px;
		padding-left: 3%;
		font-size: 16px;	
		}
}




/*Mapa Estilos*/

.mapa-general{
        width: 100%;
    min-width: 50%;
    transform: translate(-50%);
    enable-background: new 0 0 986 728;
    margin-left: 50%;
}

#V1_-_Zulia path:hover, #V1_-_Zulia.item-activo path{
    fill:#8DB5A8;
    stroke:#EECB77;
    cursor:pointer;
}

#V2_-_Venezuela path:hover, #V2_-_Venezuela.item-activo path{
    fill:#9FBEB4;
    stroke:#EECB77;
    cursor:pointer;
}

#V3_-_Orinoco path:hover, #V3_-_Orinoco.item-activo path{
    fill:#C0D1CA;
    stroke:#EECB77;
    cursor:pointer;
}

#V4_-_Apure path:hover, #V4_-_Apure.item-activo path{
    fill:#B0C9C1;
    stroke:#EECB77;
    cursor:pointer;
}

#C1_-_Boyaca path:hover, #C1_-_Boyaca.item-activo path{
    fill:#CBC2AD;
    stroke:#EECB77;
    cursor:pointer;
}

#C2_-_Cauca path:hover, #C2_-_Cauca.item-activo path{
    fill:#CBC2AD;
    stroke:#EECB77;
    cursor:pointer;
}

#C3_-_Cundinamarca path:hover, #C3_-_Cundinamarca.item-activo path{
    fill:#BAAD92;
    stroke:#EECB77;
    cursor:pointer;
}

#C4_-_Magdalena path:hover, #C4_-_Magdalena.item-activo path{
    fill:#A99977;
    stroke:#EECB77;
    cursor:pointer;
}

#E1_-_Ecuador polygon:hover, #E1_-_Ecuador.item-activo polygon{
    fill:#F9E78E;
    stroke:#EECB77;
    cursor:pointer;
}

#E2_-_Guayaquil path:hover, #E2_-_Guayaquil.item-activo path{
    fill:#FAEDB2;
    stroke:#EECB77;
    cursor:pointer;
}

#E3_-_Azuay path:hover, #E3_-_Azuay.item-activo path{
    fill:#DDC9CF;
    stroke:#EECB77;
    cursor:pointer;
}

#P1_-_Istmo path:hover, #P1_-_Istmo.item-activo path{
    fill:#AACFE1;
    stroke:#EECB77;
    cursor:pointer;
}

.bicente-nombre{
	color: #80B1AC;
	margin: auto;
	display: block;
	bottom: -50%;
	position: absolute;
	width: 63px;
	height: 26px;
	right: 6px;	
}









input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 149px;/* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 149px;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

/*thumb*/


/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 19px;
  width: 19px;
  border-radius: 40px;
  background: #997632;
  cursor: pointer;
  margin-top: 0px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {

  border: none;
  height: 19px;
  width: 19px;
  border-radius: 40px;
  background: #997632;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {

  border: none;
  height: 19px;
  width: 19px;
  border-radius: 40px;
  background: #997632;
  cursor: pointer;
}
/*Track*/

input[type=range]::-webkit-slider-runnable-track {
  width: 149px;
  height: 17px;
  cursor: pointer;
background: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/datos/desktop/img/slider-fondo.png);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]:focus::-webkit-slider-runnable-track {
background: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/datos/desktop/img/slider-fondo.png);
}

input[type=range]::-moz-range-track {
  width: 149px;
  height: 17px;
  cursor: pointer;
  background: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/datos/desktop/img/slider-fondo.png);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]::-ms-track {
  width: 149px;
  height: 17px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/datos/desktop/img/slider-fondo.png);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
}
input[type=range]:focus::-ms-fill-lower {
background: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/datos/desktop/img/slider-fondo.png);
}
input[type=range]::-ms-fill-upper {
background: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/datos/desktop/img/slider-fondo.png);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
}
input[type=range]:focus::-ms-fill-upper {
background: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/datos/desktop/img/slider-fondo.png);
}