* {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	box-sizing: border-box;
	transition: opacity 1s ease;
}

img {
	display: none;
	width: 60%;
}

.title {
	max-width: 40%;
	font-size: 6vw;
	margin-bottom: 10px;
}

#welcome .title {
	color: #585957
}

.subtitle {
	position: absolute;
	font-size: 3vw;
	margin: 0;
}

#info div{
	display: block;
	left: 53%;
	right: 10%;
	max-width: 40%;
	top: 5%;
	position: absolute;
}

#info p {
	opacity: 0;
}

#map {
	width: 40%;
	position: absolute;
	top: 20%;
	right: 10%;
	z-index: 1;
}

#map {
	transition: transform 1.5s ease;
}

#welcome {
	position: absolute;
	top: 10%;
	z-index: 0;
}

#BC path:hover {
	fill: #b5e3ff;
}

#BC path:active {
	fill: #7accfe;
}

#AB path:hover {
	fill: #89f5e9;
}

#AB path:active {
	fill: #01d8c0;
}

#QC path:hover {
	fill: #ffc4a8;
}

#QC path:active {
	fill: #fc9b6e;
}

#MB path:hover {
	fill: #fff2bd;
}

#MB path:active {
	fill: #f8de6f;
}

#ON path:hover {
	fill: #dcb678;
}

#ON path:active {
	fill: #e0a53f;
}

#SK path:hover {
	fill: #b3ffdb;
}

#SK path:active {
	fill: #49f9a6;
}

#NB path:hover {
	fill: #ff9ea9;
}

#NB path:active {
	fill: #ff6273;
}

#NS path:hover {
	fill: #ff9cdc;
}

#NS path:active {
	fill: #fe3bba;
}

#NT path:hover {
	fill: #d3b0ff;
}

#NT path:active {
	fill: #a768f5;
}

#NL path:hover {
	fill: #fabef0;
}

#NL path:active {
	fill: #f58de4;
}

#NU path:hover {
	fill: #e4c4ff;
}

#NU path:active {
	fill: #d09cfe;
}

#YT path:hover {
	fill: #a1a1ff;
}

#YT path:active {
	fill: #6565f1;
}

.BC {
	z-index: 0;
}

.AB {
	z-index: -1;
}

.SK {
	z-index: -2;
}

.MB {
	z-index: -3;
}

.QC {
	z-index: -4;
}

.ON {
	z-index: -5;
}

.NL {
	z-index: -6;
}

.NS {
	z-index: -7;
}

.YT {
	z-index: -8;
}

.NT {
	z-index: -9;
}

.NB {
	z-index: -10;
}

.NU {
	z-index: -11;
}

html {
	margin: 10%;
}