#mh_web_desktop_1 {
	background: rgba(231, 203, 69, 1);
	background: rgba(30, 30, 30, 1);
}
#mh_web_mobile_1 {
	background: rgba(254, 225, 70, 1);
	background: rgba(255, 255, 255, .1);
	background: rgba(241, 219, 211, 1);
}


.phone.phone_single {
	box-shadow: 0 0 0 var(--device_outline) #000000;
}
.mac, .mac:after {
	box-shadow: 0 0 0 var(--device_outline) #FFFFFF;
}
#mh_2_2 .phone.phone_single {
	box-shadow: 0 0 0 2px #FFFFFF;
}
#mh_6_2 .phone.phone_single {
	box-shadow: 0 0 0 2px #000000;
}

#mh_logo {
	background: #1E1E1E;
}
#mh_logo .mh_logo_1 {
    background: url(../img/modernhaven/mh_1.png) no-repeat center;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -2%;
}

@media (min-width: 1000px) {

	#mh_logo .mh_logo_1 {
		width: 64%;
		left: 17%;
	}

}

#mh_2_2 {
	background: url("../img/modernhaven/mh_2_2bg.jpg") no-repeat center;
    background-size: cover;
}
#mh_3 {
	background: url("../img/modernhaven/mh_3bg.jpg") no-repeat center;
    background-size: cover;
}
#mh_3_detail {
    position: absolute;
    left: 0;
    top: 7.825%;
    width: 50%;
    height: 82%;
    z-index: 2;
}

#mh_4 {
	background: url("../img/modernhaven/mh_4_1bg.jpg") no-repeat center;
    background-size: cover;
}
#mh_5 {
	background: url("../img/modernhaven/mh_5bg.jpg") no-repeat center;
    background-size: cover;
}
#mh_6_2 {
	background: url("../img/modernhaven/home_mh_bg.jpg") no-repeat center;
    background-size: cover;
}











.mh_web_menu {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#mh_2_2 .phone_1 .click, #mh_4 .phone_2 .click {
	left: 77%;
    top: 47%;
	animation: hm_phone_one_click infinite;
	animation-timing-function: ease;
	animation-duration: 10s;
}
#mh_2_2 .phone_1 .phone_screen, #mh_4 .phone_1 .phone_screen {
	background: rgba(230, 230, 230, 1);
}
@keyframes hm_phone_one_click {
	0%		{ left: 48%; top: 82%; }
	6%		{ left: 44%; top: 87%; }
	10%, 23%{ left: 60%; top: 34%; }
	28%		{ left: 52%; top: 90%; }
	36%, 70%{ left: 62%; top: 44%; }
	75%		{ left: 65%; top: 38%; }
	79%, 88%{ left: 49%; top: 88%; }
	100%	{ left: 48%; top: 82%; }
}
#mh_empire {
	animation: hm_phone_one_shoot infinite;
	animation-timing-function: cubic-bezier(0.220, 0.000, 0.285, 1.000);
	animation-duration: 10s;
}
@keyframes hm_phone_one_shoot {
	0%, 6%		{ top: 0%; }
	12%, 28%	{ top: -90%; }
	55%			{ top: -387.5%; }
	57%, 75%	{ top: -387%; }
	90%			{ top: 1%; }
	92%, 100%	{ top: 0%; }
}
#mh_4_ani {
	animation: mh_4_animation infinite;
	animation-timing-function: cubic-bezier(0.220, 0.000, 0.285, 1.000);
	animation-duration: 10s;
}
@keyframes mh_4_animation {
	0%, 6%		{ top: 0%; }
	12%, 28%	{ top: -90%; }
	55%			{ top: -302.5%; }
	57%, 75%	{ top: -302%; }
	90%			{ top: 1%; }
	92%, 100%	{ top: 0%; }
}