.center, .map:before, .map svg, .capri img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}	
.map, .map:before, .map svg, .capri {
    border-radius: 50%;
}
.map svg, .capri, .dragon {
	transition: transform .5s ease-out;
}

.map {
	width: 100%;
	height: 100%;
    max-width: 450px;
    max-height: 450px;
	overflow: hidden;
	pointer-events: auto;
}
.map:before {
	width: 95%;
	height: 95%;
    background-color: #edf8ff;		/* #edf8ff; #fcf3e5 #fff4e1*/
	display: block;
	content: '';
	transition: background-color .5s ease-out;
}


.map svg {
	height: 100%;
}	
.map:hover svg {
	transform: translate(-75%, 17%) scale(7);
}

.capri {
    position: absolute;
    left: 51%;
    top: 34%;
	width: 9.2%;
	height: 9.2%;
    min-width: 24px;
    min-height: 24px;
	background: #fff;
}	
.map:hover .capri {
    transform: translate(-70%, -90%) scale(1.65);
}
.capri img {
	width: 77%;
	height: 77%;
}

.dragon {
    position: absolute;
    left: 44.5%;
    top: 39.5%;
	width: 10%;
	height: 10%;
    min-width: 28px;
    min-height: 28px;
}
.map:hover .dragon {
    transform: translate(-89%, 120%) scale(1.72);
}

#c, #b {
	transition: opacity .3s ease-out;
}	
.map:hover #b {
	transition: opacity .4s ease-out .3s;
}
#b, .map:hover #c {
	opacity: 0;
}
#c, .map:hover #b {
	opacity: 1;
}

.map-holder {
	pointer-events: none;
}
.map-holder > div {
	width: 100%;
	padding-bottom: 100%;
	padding-bottom: min(100%, 450px);
	line-height: 0;
	position: relative;
}
.map-holder .gmap {
	position: absolute;
	right: -5px;
	top: 4%;
	height: 55px;
	width: auto;
	pointer-events: all;
}
.map-holder .magnifire {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 60px;
    width: auto;
	opacity: 1;
	transition: opacity .75s ease-out;
}
.map-holder:hover .magnifire {
	opacity: 0;
}
.qr-gg {
	float: left;
	margin: 0 20px 0 0;
}

.infopane .remark {
	display: inline-block;
	margin-top: 10px;
}
.panel.contact {
	flex-direction: row-reverse;
	position:relative;
}
.panel.contact > div {
	margin: 0;
	padding: 30px 60px;
	max-width: 50%;
	z-index: 1;
}
.panel.contact .appear-right p {
	max-width: 595px;
}	
.panel.contact .infopane > p:last-of-type {
	margin-bottom: 0;
}
.panel.contact > img {
    position: absolute;
    right: 5px;
    bottom: -10px;
    height: 190px;
}
.panel.contact .soc {
	background: none;
}
.panel.contact .soc img {
	vertical-align: bottom;
	margin-right: 10px;
}
	
.infopane h2 {
	color: #ffb844;
	font-size: 54px;
	line-height: .9em;
	margin: 0;
	text-align: left;
}
.msgform {
	background:#edf8ff;
}
/*
.msgform input, .msgform textarea {
	border-color: #046589 !important;
}
*/	
.msgform form {
	float: right;
}
.msgform label:first-of-type {
	font-size: 1.1rem;
}

@media only screen and (max-width: 1200px) { 
	.msgform form {
		max-width: 520px;
	}
	.panel.contact > div {
		padding: 30px 20px;
	}	
	.panel.contact > img {
		display: none;
	}	
}
@media only screen and (max-width: 800px) { 
	.qr-gg {
		display: none;
	}	
	.panel > div  {
		min-width: 100%;
	}
	.panel.contact > div {
		padding: 20px;
	}	
	.msgform form {
		float: none;
		margin: 0 auto;
		max-width: 100%;
	}
	.map svg {
		transform: translate(-50%, -50%) scale(1.3);
	}
	.capri {
		transform: translate(25%, -50%) scale(1.3);
	}
	.dragon {
		transform: translate(0%, -20%) scale(1.3);
	}
}
@media only screen and (max-width: 640px) { 
	.infopane h2 {
		font-size: 36px;
	}	
	.panel.contact > div {
		padding: 20px;
	}	
}
@media only screen and (max-width: 450px) { 
	.map-holder .magnifire {
		height: 45px;
	}
}