@charset "utf-8";
/* CSS Document */
header
{
    width: 100%;
    background-color: rgba(255,255,255,0.52);
    backdrop-filter: blur(12px);
    box-shadow: 0px 1px 10px grey;
    height: 3.5rem;
	display:flex;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 20;

}

#topitem1
{
	width: 10%;
}
#logo
{
	display:flex;
	height:35px;
	margin-left: 10px;
}
#topitem2
{
margin: auto;
}
.Bar
{
display:flex;
list-style: none; 
padding:0;
}
.Bar li
{
	margin: 0.5rem;
    margin-bottom:0;
	margin-top: 0;
}
.Bar a
{	
	color:#291D1D;
	padding:1rem;
	padding-top: 0.2rem;
	padding-bottom: 0.3rem;
	
}
.Bar a:hover
{
	color:white;
	background-color:#6D964D;
	border-radius: 3rem;
}
#topitem3
{
	width: 10%;
	display: flex;
	justify-content: flex-end;
    align-items: center;
}
#topitem3 a
{
	color: #291D1D;
	padding: 0.5em;
	padding-top: 0.2rem;
	padding-bottom: 0.3rem;
}
#topitem3 a:hover
{
	color:white;
	background-color:#6D964D;
	border-radius: 3rem;
}
#headIMG
{
	width: 40px;border-radius: 1rem;
	margin-right: 25px;
}
html
{
	height:100%;
}
body
{
	clear:both;
	background-image: url("../images/body/coco1.jpg");
	margin:0;
	background-size:cover;
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-position:center;
	height: 100%;
}
a
{
	text-decoration:none;
	font-size: 1.2rem;
	font-weight:normal;
}
.QQlink{
    width:100px;
}
.QQlink:hover{
    transform: scale(1.2);
}
.headerBottom1{
	width: 100%;
	height: 90%;
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	position: relative;
	bottom: -90px;
	animation: floating 5s ease-in-out infinite;
}
#MonsoonLogo{
	width: 700px;

	font-family:segoe,serif;
}
.AButton{
	transform: scale(1.0);
	margin: 1rem;
}
.AButton:hover{
	transform: scale(1.2);
}
.headerBottom2{
	width: 100%;
	height: 4%;
	background-color: rgba(255,255,255,0.52);
	backdrop-filter: blur(20px);
	margin-top: 30px;
	border-top-right-radius: 50%;
    border-top-left-radius: 50%;
}
.bodyMain{
width: 100%;
background-color: rgba(255,255,255,0.52);
backdrop-filter: blur(20px);
padding-top: 20px;
}
.bodyMainIn{
width: 60%;
color: rgb(0, 0, 0);
margin: auto;
}
.TextDiv{
	margin-bottom: 2.5rem;
}
.TextP
{
	line-height: 180%;
	font-size: 20px;
}
.TextDiv2
{
	display: flex;
}
@keyframes floating {
	50% {
		transform: translateY(-20px);
	}
}
.TextDiv2Info{
	width: 50%;
}
.TextDiv2Img{
	width: 100%;
	display: flex;
	justify-content: center;
}
.TextDiv2ImgImg{
	width: 50%;
}
.QButton:hover{
	transform: scale(1.2);
}
.map{
	width: 70%;
	height: 70%;
	transition:all .2s;
	-moz-transition:all .2s;
	-webkit-transition:all .2s;
	-o-transition:all .2s;
	border-radius:30px;
}
.map:hover{
	transition:all .2s;
	-moz-transition:all .2s;
	-webkit-transition:all .2s;
	-o-transition:all .2s;
	transform: scale(1.2);
}
.bodyBottom{
	width: 100%;
	background-color: #272727;
	padding-top: 2rem;
	height: 5rem;
}




@media screen and (max-width : 850px )
{
	#topitem1
{
	width: 10%;
}
#logo
{
	display:flex;
	height:22px;
	margin-left: 10px;
}
	#topitem2
{
margin: auto;
}
.Bar
{
display:flex;
list-style: none; 
padding:0;
}
.Bar li
{
	margin: 0.3rem;
    margin-bottom:0;
	margin-top: 0;
}
.Bar a
{	
	color:#291D1D;
	padding:0.3rem;
	padding-top: 0.2rem;
	padding-bottom: 0.3rem;
	
}
.Bar a:hover
{
	color:white;
	background-color:#6D964D;
	border-radius: 3rem;
}
	#topitem3{
		width: 10%;
	}
	a
{
	text-decoration:none;
	font-size: 0.9rem;
	font-weight:normal;
}
#headIMG
{
	width: 30px;border-radius: 1rem;
	margin-right: 8px;
}
}
@media screen and (max-width : 750px )
{
	#MonsoonLogo{
		width: 85%;
		
		font-family:segoe,serif;
	}
	.AButton{
		transform: scale(1.0);
		margin: 1rem;
		width: 3rem;
	}
	.bodyMainIn{
		width: 70%;
		
		margin: auto;
		}
		.TextDiv2{
			flex-direction: column;
		}
		.TextDiv2Info{
			width: 100%;
		}
		.TextDiv2Img{
			flex-direction: column;
		}
		.TextDiv2ImgImg{
			width: 100%;
		}
}

@media screen and (max-width : 450px )
{
	header{
		padding-bottom: 1.5rem;
	}
	#topitem1
{
	width: 1%;
}
#logo
{
	display:flex;
	height:22px;
	margin-left: 10px;
	
}
	#topitem2
{
	position: relative;
	top:2rem;
}
.Bar
{
display:flex;
list-style: none; 
padding:0;
}
.Bar li
{
	margin: 0.3rem;
    margin-bottom:0;
	margin-top: 0;
}
.Bar a
{	
	color:#291D1D;
	padding:0.3rem;
	padding-top: 0.2rem;
	padding-bottom: 0.3rem;
	
}
.Bar a:hover
{
	color:white;
	background-color:#6D964D;
	border-radius: 3rem;
}
	#topitem3{
		width: 1%;
	}
	a
{
	text-decoration:none;
	font-size: 0.9rem;
	font-weight:normal;
}
#headIMG
{
	width: 30px;border-radius: 1rem;
	margin-right: 8px;
}
.map{
	width: 100%;
	height: 100%;
	transition:all .2s;
	-moz-transition:all .2s;
	-webkit-transition:all .2s;
	-o-transition:all .2s;
	border-radius:30px;
}
.map:hover{
	transition:all .2s;
	-moz-transition:all .2s;
	-webkit-transition:all .2s;
	-o-transition:all .2s;
	transform: scale(1.4);
}
}