/* CSS Document */

.container-about {
	padding-bottom: 60px;
}

	.container-about .container-map {
		display: flex;
		width: 100%;
	}

		.container-map .map-about {
			width: 100%;
			max-width: 460px;
			min-height: 500px;
			height: 100%;
			background-image: url(../images/map-about3.png);
			background-repeat: no-repeat;
			background-position: center top;
			background-size: 100% auto;
			margin: 0 auto;
		}

			.container-map .map-about div {
				cursor: pointer;
				color: rgb(85, 120, 167);
				font-family: "TradeGothicNextLTPro-Cm";
				font-size: 19px;
			}

.point-puerto-rico {
	margin-top: 21%;
	margin-left: 58%;
	height: 30px;
	width: 125px;
}

.point-venezuela {
	margin-top: 6%;
	margin-left: 60%;
	height: 30px;
	width: 70px;
}

.point-chile {
    margin-top: 35%;
    margin-left: 40%;
	height: 30px;
	width: 40px;
}

.point-argentina {
    margin-top: 0%;
    margin-left: 72%;
	height: 30px;
	width: 70px;
}

.tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: white;
    color: black !important;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text */
    z-index: 1;
	position: relative;
    bottom: 135px;
    right: 140px;
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
	-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.75);
}

/*.tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}*/

/* Show the tooltip text when you mouse over the tooltip container */
.point-puerto-rico:hover #tooltip-puerto-rico {
    visibility: visible;
    opacity: 1;
}

.point-venezuela:hover #tooltip-venezuela {
    visibility: visible;
    opacity: 1;
}

.point-chile:hover #tooltip-chile {
    visibility: visible;
    opacity: 1;
}

.point-argentina:hover #tooltip-argentina {
    visibility: visible;
    opacity: 1;
}


@media (min-width: 768px)
{
	.container-map .map-about {
		margin-top: 80px;
	}
}

@media (min-width: 850px)
{
	.container-map .map-about {
		margin-top: 40px;
	}
}

@media (min-width: 950px)
{
	.container-map .map-about {
		margin-top: 10px;
	}
}

@media (min-width: 950px)
{
	.container-map .map-about {
		margin-top: 0;
	}
}
