html {
	background-color: white;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	opacity: 1;
	transition: 1s opacity;
}

body.fade-out {
	opacity: 0;
	transition: none;
}

a {
	transition: ease-in-out all .3s;
}


.link1 {
	position: absolute;
    left: 3%;
    top: 0%;
    width: 10%;
    height: 10%;
    /*background-color: rgba(233, 30, 99, 0.44);*/
}

.link2 {
	position: absolute;
    left: 61%;
    top: 0%;
   	width: 11%;
   	height: 9%;
   	/*background-color: rgba(30, 159, 233, 0.44);*/
}

.link2a {
	position: absolute;
    left: 61%;
    top: 9.5%;
    width: 11%;
    height: 3%;
    /*background-color: rgba(233, 30, 99, 0.44);*/
}

.link2b {
	position: absolute;
    left: 61%;
    top: 13.5%;
    width: 11%;
    height: 3%;
    /*background-color: rgba(30, 159, 233, 0.44);*/
}

.link3 {
	position: absolute;
    left: 72%;
    top: 0%;
    width: 8%;
    height: 9%;
    /*background-color: rgba(233, 30, 99, 0.44);*/
}

.link4 {
    position: absolute;
    left: 80%;
    top: 0%;
    width: 9%;
    height: 9%;
    /*background-color: rgba(30, 159, 233, 0.44);*/
}

.link5 {
	position: absolute;
    left: 89%;
    top: 0%;
    width: 9%;
    height: 9%;
    /*background-color: rgba(233, 30, 99, 0.44);*/
}

.link5a {
	position: absolute;
    left: 89%;
    top: 9%;
    width: 10%;
    height: 3%;
    /*background-color: rgba(30, 159, 233, 0.44);*/
}

.link5b {
	position: absolute;
    left: 89%;
    top: 13%;
    width: 10%;
    height: 3%;
    /*background-color: rgba(233, 30, 99, 0.44);*/
}

.link5c {
	position: absolute;
    left: 89%;
    top: 17%;
    width: 10%;
    height: 3%;
    /*background-color: rgba(30, 159, 233, 0.44);*/
}

.link6 {
	position: absolute;
	left: 50%;
    top: 199%;
    width: 34%;
    height: 32%;
    /*background-color: rgba(233, 30, 99, 0.44);*/
}

/*.link7 {
	position: absolute;
	left: 70%;
    top: 192%;
    width: 9%;
    height: 5%;
	background-color: rgba(233, 30, 99, 0.44);
}

.link-7a {
	height: 80px;
    width: 200px;
    position: absolute;
    top: 243%;
    left: 15%;
    background-color: rgba(222, 30, 99, 0.44);
}*/

/* Hide content */
@media only screen and (min-width: 990px) {
	.msg {
		display: none;
	}
}

@media only screen and (max-width: 989px) {
	img, map {
		display: none;
	}

	.msg {
		width: 100%;
    	text-align: center;
	}

	h3 {
	    line-height: 300px;
	}
}

/* Page Link */
@media only screen and (max-width: 1499px) and (min-width: 1200px) {
	.link2, .link3, .link4, .link5 {
		height: 7%;
	}
}

@media only screen and (max-width: 1199px) and (min-width: 1000px) {
	.link1 {
		height: 8%;
	}

	.link2, .link3, .link4, .link5 {
		height: 6%;
	}
}

@media only screen and (max-width: 999px) {
	.link1 {
		height: 8%;
	}

	.link2, .link3, .link4, .link5 {
		height: 5%;
	}
}

/* Subpage link */
@media only screen and (max-width: 1669px) and (min-width: 1590px) {
	.link2a {
		top: 9%;
    }

    .link2b {
	    top: 12.5%;
	}

	.link5a {
		top: 9%;
	}

	.link5b {
		top: 12.5%;
	}

	.link5c {
		top: 17%;
	}
}

@media only screen and (max-width: 1589px) and (min-width: 1500px) {
	.link2a {
		top: 12%;
    }

    .link2b {
	    top: 16%;
	}

	.link5a {
		top: 12%;
	}

	.link5b {
		top: 12%;
	}

	.link5c {
		top: 16%;
	}
}

@media only screen and (max-width: 1499px) and (min-width: 1430px) {
	.link2a {
		top: 12%;
    }

    .link2b {
	    top: 16%;
	}

	.link5a {
		top: 8%;
	}

	.link5b {
		top: 11%;
	}

	.link5c {
		top: 15%;
	}
}

@media only screen and (max-width: 1429px) and (min-width: 1360px) {
	.link2a {
		top: 11.5%;
    }

    .link2b {
	    top: 15%;
	}

	.link5a {
		top: 7%;
	}

	.link5b {
		top: 11%;
	}

	.link5c {
		top: 14%;
	}
}

@media only screen and (max-width: 1359px) and (min-width: 1300px) {
	.link2a {
		top: 11%;
    }

    .link2b {
	    top: 14.5%;
	}

	.link5a {
		top: 7%;
	}

	.link5b {
		top: 10%;
	}

	.link5c {
		top: 13%;
	}
}

@media only screen and (max-width: 1299px) and (min-width: 1240px) {
	.link2a {
		top: 10.5%;
    }

    .link2b {
	    top: 13.5%;
	}

	.link5a {
		top: 7%;
	}

	.link5b {
		top: 10%;
	}

	.link5c {
		top: 13%;
	}
}

@media only screen and (max-width: 1239px) and (min-width: 1190px) {
	.link2a {
		top: 10%;
    }

    .link2b {
	    top: 13%;
	}

	.link5a {
		top: 7%;
	}

	.link5b {
		top: 10%;
	}

	.link5c {
		top: 13%;
	}
}

@media only screen and (max-width: 1189px) and (min-width: 1140px) {
	.link2a {
		top: 9.5%;
    }

    .link2b {
	    top: 12.5%;
	}

	.link5a {
		top: 6%;
	}

	.link5b {
		top: 9%;
	}

	.link5c {
		top: 12%;
	}
}

@media only screen and (max-width: 1139px) and (min-width: 1070px) {
	.link2a {
		top: 8%;
    }

    .link2b {
	    top: 11%;
	}

	.link5a {
		top: 6%;
	}

	.link5b {
		top: 9%;
	}

	.link5c {
		top: 12%;
	}
}

@media only screen and (max-width: 1069px) and (min-width: 1000px) {
	.link2a {
		top: 8%;
		height: 2%;
    }

    .link2b {
	    top: 11%;
	    height: 2%;
	}

	.link5a {
		top: 6%;
		height: 2%;
	}

	.link5b {
		top: 8%;
		height: 2%;
	}

	.link5c {
		top: 11%;
		height: 2%;
	}
}

@media only screen and (max-width: 999px) and (min-width: 950px) {
	.link2a {
		top: 8%;
		height: 2%;
    }

    .link2b {
	    top: 10.5%;
	    height: 2%;
	}

	.link5a {
		top: 5%;
		height: 2%;
	}

	.link5b {
		top: 8%;
		height: 2%;
	}

	.link5c {
		top: 10%;
		height: 2%;
	}
}

@media only screen and (max-width: 949px) {
	.link2a {
		top: 5%;
		height: 2%;
    }

    .link2b {
	    top: 8%;
	    height: 2%;
	}
}

/* Straw */
@media only screen and (min-width: 1790px) and (max-width: 1875px) {
	.link6 {
		top: 212%;
	}
}

@media only screen and (min-width: 1700px) and (max-width: 1789px) {
	.link6 {
		top: 212%;
	}
}

@media only screen and (min-width: 1600px) and (max-width: 1699px) {
	.link6 {
		top: 191%;
	}
}

@media only screen and (min-width: 1510px) and (max-width: 1599px) {
	.link6 {
		top: 180%;
	}
}

@media only screen and (min-width: 1430px) and (max-width: 1509px) {
	.link6 {
		top: 170%;
		height: 23%;
	}
}

@media only screen and (min-width: 1360px) and (max-width: 1429px) {
	.link6 {
		top: 161%;
		height: 21%;
	}
}

@media only screen and (min-width: 1290px) and (max-width: 1359px) {
	.link6 {
		top: 153%;
		height: 20%;
	}
}

@media only screen and (min-width: 1220px) and (max-width: 1289px) {
	.link6 {
		top: 145%;
		height: 20%;
	}
}

@media only screen and (min-width: 1160px) and (max-width: 1219px) {
	.link6 {
		top: 138%;
		height: 18%;
	}
}

@media only screen and (min-width: 1100px) and (max-width: 1159px) {
	.link6 {
		top: 131%;
		height: 16%;
	}
}

@media only screen and (min-width: 1040px) and (max-width: 1099px) {
	.link6 {
		top: 124%;
		height: 16%;
	}
}

@media only screen and (max-width: 1039px) {
	.link6 {
		top: 117%;
		height: 15%;
	}
}