/* CSS Document */

.mobile-hide { display:block; }
.mobile-show { display: none; }

/* Master Plan */
.clubhouse {
	background: url("../images/plans/clubhouse/4.jpg") no-repeat;
	background-size: 100%;
	display:block;
	position:relative;
	margin: 0 auto;
}

.masterplan-nav {
    display: block;
    margin-bottom: 78px;
    padding-top: 10px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 10px;
    background: #DAD9D5;
    color: #715950;
    font-size: 90%;
    font-weight: 300;
}

.masterplan-nav a { 
	color: #715950; 
	-webkit-transition: 0.2s all;
	-moz-transition: 0.2s all;
	-o-transition: 0.2s all;
	-ms-transition: 0.2s all;
	transition: 0.2s all;
}
.masterplan-nav a:hover { color: #333;  }

.clubhouse1 {
	z-index: 20;
    display: block;
    position: absolute;
    top: 0;
}
/*
.slices #masplan-slice* {
	display:block;
	position:absolute;
}*/
[id^="masplan-slice-"] {
	display:block;
	position:absolute;
}

.rounded {
	display:block;
	position:relative;
	clear:both;
	border-radius: 10px;
	padding: 12px 5px 0px 25px;
	width: 100%;
	margin-bottom: 12px;
}
.rounded h4 {
	font-size: 140%;
	font-weight: 500;
}
.rounded p {
	font-weight: 300;
	font-size: 16px;
	padding-right: 0 !important;
	letter-spacing:normal;
}
.rounded h5 {
	font-size: 100%;
	font-weight: 500;
	margin: 7px 0 10px 0;
}
.rounded.clubhouse {
	background : #E6E6E6 ;
	color: #333;
}

.rounded.painite {
	background : #FFF3A7;
	color: #404040;
}
.rounded.diamond {
	background : #FFD2AB ;
	color: #333;
}
.rounded.diamond2 {
	background : #F88D80 ;
	color: #333;
}
.rounded.sapphire {
	background : #20398f;
	color: #fff;
}
.rounded.pearl {
	background : #f0e5d8;
	color: #666;
}
.rounded.onyx {
	background : #45333f;
	color: #f88ed6;
}
.rounded.onyx-plus {
	background : #a8829b;
	color: #45333f;
}
.rounded a.type-info {
	display:block;
	margin-top: 7px;
	margin-right: 20px;
	padding-bottom: 10px;
	font-weight: 400;
	font-style: italic;
	color:inherit;
	float:right;
}
.rounded a.type-info:hover { opacity: 0.5; }

.rounded a img:hover { opacity: 0.7; }



@media (min-width:1441px) {
	.masterplan-slices {
		width: 1480px;
		height: 705px;
	}
	img#masplan-slice-oa { width: 140px;}
	#masplan-slice-oa {
		left: 659px;
		top: 354px;
	}
	
	
	img#masplan-slice-ha {width: 91px;}
	#masplan-slice-ha {
    left: 440px;
    top: 86px;
	}
	
	img#masplan-slice-hb { width: 83px;}
	#masplan-slice-hb {
		left: 509px;
    top: 37px;
	}
	
	img#masplan-slice-hc { width: 91px;}
	#masplan-slice-hc {
		left: 585px;
    top: 83px;
	}
	
	img#masplan-slice-pa { width: 121px;}
	#masplan-slice-pa {
		left: 538px;
    top: 444px;
	}
	
	img#masplan-slice-pb { width: 257px;}
	#masplan-slice-pb {
		left: 799px;
    	top: 406px;
	}
	
	img#masplan-slice-pb1 { width: 72px;}
	#masplan-slice-pb1 {
		left: 1056px;
    	top: 463px;
	}
}

@media (max-width:1440px) {
	.masterplan-slices {
		width: 1200px;
		height: 529px;
	}
	
	img#masplan-slice-oa { width: 114px;}
	#masplan-slice-oa {
		left: 534px;
		top: 288px;
	}
	
	img#masplan-slice-ob { width: 115px;}
	#masplan-slice-ob {
		left: 262px;
   	 	top: 44px;
	}
	
	img#masplan-slice-ha { width: 74px;}
	#masplan-slice-ha {
    left: 357px;
    top: 70px;
	}
	
	img#masplan-slice-hb { width: 67px;}
	#masplan-slice-hb {
		left: 412px;
    top: 30px;
	}
	
	img#masplan-slice-hc { width: 73px;}
	#masplan-slice-hc {
		left: 475px;
    top: 70px;
	}
	
	img#masplan-slice-pa { width: 96px;}
	#masplan-slice-pa {
		left: 437px;
    top: 360px;
	}
	
	img#masplan-slice-pb { width: 208px;}
	#masplan-slice-pb {
		left: 648px;
    	top: 330px;
	}
	img#masplan-slice-pb1 { width: 257px;}
	#masplan-slice-pb1 {
		left: 799px;
    	top: 406px;
	}
}

@media (max-width:1152px) {
	.masterplan-slices {
		width: 1000px;
		height: 441px;
	}
	
	img#masplan-slice-oa { width: 95px;}
	#masplan-slice-oa {
		left: 445px;
		top: 240px;
	}
	
	img#masplan-slice-ob { width: 80px;}
	#masplan-slice-ob {
		left: 200px;
   	 	top: 44px;
	}
	
	img#masplan-slice-ha { width: 61px;}
	#masplan-slice-ha {
    left: 297px;
    top: 60px;
	}
	
	img#masplan-slice-hb { width: 56px;}
	#masplan-slice-hb {
		left: 344px;
    top: 25px;
	}
	
	img#masplan-slice-hc { width: 62px;}
	#masplan-slice-hc {
		left: 395px;
    top: 55px;
	}
	
	img#masplan-slice-pa { width: 84px;}
	#masplan-slice-pa {
		left: 364px;
    top: 300px;
	}
	
	img#masplan-slice-pb { width: 175px;}
	#masplan-slice-pb {
		left: 540px;
    	top: 275px;
	}
	.rounded p, .rounded a.type-info { font-size: 14px; letter-spacing:normal; }
}

@media (max-width:991px) {
	.masterplan-nav {
    margin-bottom: 27px;
    padding: 20px 0;
}
	.masterplan-slices {
		width: 750px;
		height: 331px;
	}
	
	img#masplan-slice-oa { width: 71px;}
	#masplan-slice-oa {
		left: 333px;
    	top: 180px;
	}
	
	
	
	img#masplan-slice-ha { width: 46px;}
	#masplan-slice-ha {
		left: 223px;
    	top: 44px;
	}
	
	img#masplan-slice-hb { width: 42px;}
	#masplan-slice-hb {
		left: 258px;
    	top: 18px;
	}
	
	img#masplan-slice-hc { width: 46px;}
	#masplan-slice-hc {
		left: 296px;
    	top: 42px;
	}
	
	img#masplan-slice-pa { width: 61px;}
	#masplan-slice-pa {
		left: 272px;
    	top: 225px;
	}
	
	img#masplan-slice-pb { width: 130px;}
	#masplan-slice-pb {
		left: 404px;
   	 	top: 206px;
	}
}

@media (max-width:991px) and (orientation:portrait) {
	.masterplan-nav {
		margin-bottom: 20px;
		padding: 10px 0 15px 0;
	}
	.addMarginLeft20 h3 { margin-top: 20px; margin-bottom:-15px; }
}

/* iPhone-X : 812px*/
@media (max-width: 812px)  and (orientation:landscape) {
	.mobile-hide { display:none; }
	.mobile-show { display: block; position:relative; clear:both; }
	.addMarginLeft20 h3 { margin-top: 20px; margin-bottom:-15px; }
}

@media (max-width:736px) {
	.mobile-hide { display:none; }
	.mobile-show { display: block; position:relative; clear:both; }
	.addMarginLeft20 { margin-left:0; margin-top:20px;}
	.addMarginLeft20 h3 { margin-top: 20px; margin-bottom:-15px; }
}

@media (max-width: 568px) {
.masterplan-nav .text-right,
.masterplan-nav .text-left {
	text-align: center !important;
}

.location .text-left {
	text-align: center;
}

.rounded { padding: 12px 0px 0px 0px; text-align:center; }
.rounded h4 { font-size:110%; }
.rounded h5 { font-size:90%; }
.rounded p, .rounded a.type-info { font-size: 12px; }
.rounded a.type-info { float: none; margin: 10px auto 0 auto; }
.addMarginLeft20 { margin-left:0; margin-top:20px;}
.addMarginLeft20 h3 { margin-top: 0px; }
}

@media (max-width: 480px) {
.masterplan-nav {
    margin-bottom: 20px;
    padding: 10px 0;
}
}