.destinations{
	padding: 10rem 0;
	h2{
		font: 42px/1 $HL;
		color: #000000;
		text-align: center;
	}
	.map{
		text-align: center;
		margin-top: 10rem;
		position: relative;
		overflow: auto;
		@include br3{
			margin-top: 5rem;
		}
		.links{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			a{
				font: 18px/1 $HB;
				color: #41a0b2;
				box-shadow: 0px 0px 4px 0px rgba(23,23,23,0.17);
				background: #fff;
				border-radius: 16px;
				display: inline-block;
				padding: 6px 20px 6px 40px;
				position: absolute;
				@include br2{
					font-size: 16px;
					padding: 4px 10px 4px 30px;
				}
				@include br3{
					font-size: 10px;
					padding: 2px 5px 2px 20px;
				}
				&:nth-child(1){
					left: 40%;
					top: 25%;
				}
				&:nth-child(2){
					left: 65%;
					top: 33%;
				}
				&:nth-child(3){
					left: 55%;
					top: 43%;
				}
				&:nth-child(4){
					left: 36%;
					top: 52%;
				}
				&:nth-child(5){
					left: 16%;
					top: 66%;
				}
				&:nth-child(6){
					left: 53%;
					top: 69%;
				}
				&:before{
					content: '';
					position: absolute;
					width: 14px;
					height: 14px;
					background-color: #df4f00;
					border-radius: 50%;
					left: 15px;
					top: 50%;
					transform: translateY(-50%);
					@include br2{
						left: 10px;
					}
					@include br3{
						left: 5px;
						width: 8px;
					height: 8px;
					}
				}
				&:hover, &.active{
					background-color: #235059;
					color: #fff;
				}
			}
		}
	}
	.map-content{
		margin-top: 3rem;
		padding: 0 1rem;
		ul{
			columns: 4;
			column-rule: 1px solid #e6f2f5;
			column-gap: 2.5em;
			@include br2{
				columns: 2;
			}
			li{
				font-family: $HB;
				display: block;
				a{
					color: #41a0b2;
					&:hover{
						color: #df4f00;
						text-decoration: none;
					}
				}
			}
		}

	}
}