/**************************************
*************************************** 
MAPA
***************************************
**************************************/

section.mapa {
	margin-top: 50px;
    padding: 30px 10px;
    background-color: #eee;
    
    -webkit-animation-name: aparecer-hacia-arriba;
	-moz-animation-name: aparecer-hacia-arriba;
	-o-animation-name: aparecer-hacia-arriba;
	animation-name: aparecer-hacia-arriba;
	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-o-animation-timing-function: ease;
	animation-timing-function: ease;
	
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-o-animation-iteration-count: 1;
	animation-iteration-count: 1;
	
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-o-animation-delay: 1s;
	animation-delay: 1s;
	
	-webkit-animation-direction: normal;
	-moz-animation-direction: normal;
	-o-animation-direction: normal;
	animation-direction: normal;
	
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}

@media screen and (min-width: 481px) and (max-width: 800px) {
    section.mapa {
        margin-top: 100px;
    }
}

section.mapa > h3 {
	font-size: 1.25em;
    line-height: 120%;
    text-align: center;
    color: #EB1F79;
    font-weight: bold;
}

section.mapa > div.contenedor {
	margin-top: 7px;
    
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	
	-webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    -webkit-justify-content: space-around;
    -ms-flex-pack: justify;
    justify-content: space-around;
    
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

section.mapa > div.contenedor > div.mapa {
	width: 444px;
    height: 244px;
    background-image: url(../img/fondo-mapa.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    position: relative;
}

section.mapa > div.contenedor > div.mapa > div.punto {
	width: 12px;
    height: 12px;
    background-color: #ED217C;
    
    -webkit-border-radius: 50%;
    border-radius: 50%;
    
    -webkit-box-shadow: 2px 2px 4px 0 rgba(0,0,0,.5);
    box-shadow: 2px 2px 4px 0 rgba(0,0,0,.5);
    
    position: absolute;
    
    -webkit-animation-name: pulso;
	-moz-animation-name: pulso;
	-o-animation-name: pulso;
	animation-name: pulso;
	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-o-animation-timing-function: ease;
	animation-timing-function: ease;
	
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	
	-webkit-animation-delay: 0;
	-moz-animation-delay: 0;
	-o-animation-delay: 0;
	animation-delay: 0;
	
	-webkit-animation-direction: alternate;
	-moz-animation-direction: alternate;
	-o-animation-direction: alternate;
	animation-direction: alternate;
	
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}

@media screen and (max-width: 480px) {
    section.mapa > div.contenedor > div.mapa > div.punto {
		width: 6px;
		height: 6px;
	}
}

section.mapa > div.contenedor > div.mapa > div.santa-ana {
	left: 22.97%;
    top: 29.51%;
}

section.mapa > div.contenedor > div.mapa > div.sonsonate {
	left: 17.12%;
    top: 55.33%;
}

section.mapa > div.contenedor > div.mapa > div.la-libertad {
	left: 29.73%;
    top: 58%;
}

section.mapa > div.contenedor > div.mapa > div.san-salvador {
	left: 37.16%;
    top: 50%;
}

section.mapa > div.contenedor > div.mapa > div.cabanas {
	left: 57.43%;
    top: 40.98%;
}

section.mapa > div.contenedor > div.mapa > div.usulutan {
	left: 64.86%;
    top: 72%;
}

section.mapa > div.contenedor > div.mapa > div.san-miguel {
	left: 77.03%;
    top: 69.67%;
}

section.mapa > div.contenedor > div.mapa > div.morazan {
	left: 82.21%;
    top: 49.18%;
}

section.mapa > div.contenedor > div.mapa > div.la-union {
	left: 90%;
    top: 67%;
}

section.mapa > div.contenedor > div.texto {
	width: 376px;
    text-align: center;
    color: #6B2C91;
    line-height: 150%;
}

@media screen and (min-width: 481px) and (max-width: 800px) {
    section.mapa > div.contenedor > div.texto {
        margin-top: 10px;
    }
}







/*
    ANIMACIÓN - INICIO
*/
@-webkit-keyframes pulso {
	from {-webkit-transform: scale(1);}
	to {-webkit-transform: scale(1.3);}
}

@-moz-keyframes pulso {
	from {-moz-transform: scale(1);}
	to {-moz-transform: scale(1.3);}
}

@-o-keyframes pulso {
	from {-o-transform: scale(1);}
	to {-o-transform: scale(1.3);}
}

@keyframes pulso {
	from {transform: scale(1);}
	to {transform: scale(1.3);}
}

/*
    ANIMACIÓN - FIN
*/