@import 'font-awesome.min.css';
@import 'https://fonts.googleapis.com/css?family=PT+Sans:400,700';
@import 'https://fonts.googleapis.com/css?family=Raleway:300,400,600,700,800';
@import 'https://fonts.googleapis.com/css?family=Lora';
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400';

*, *:before, *:after {	
	outline: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizingfooter: border-box;
	box-sizing: border-box
}
    .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.inner-Title{
    color: rgba(255,109,0,1) !important;
    font-weight: 300 !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 22px !important;
}
.mainBanner{
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(255,255,255,0.95);
    display: none;
}
.bannerInner{
    text-align: center;
    position: relative;
    top: 20%;
}
.bannerInner img{
    width: 20em;
    margin-bottom: 30px;
}
.mainButton {
  background-color: #eb6f11;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0px 0px 10px #888888;
  padding: 1em;
}
.imgBox{
    box-shadow: 0px 0px 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 50px;
    border-radius: 5px;
    background-color: #fff;
}

.inner-Sub-Title{
    margin: 15px 0 5px 0;
    color: rgba(255,109,0,1) !important;
    font-weight: 300 !important;
    font-family: 'Raleway', sans-serif !important;
}

.contact-details-ul ul{
    list-style: none;
  padding: 0;
}

.contact-details-ul li{
    padding-left: 1.3em;
}

/* Modal Content/Box */
@media screen and (min-width:600px) {
    .modal-content {
        width: 50% !important;
        margin: 2% auto !important;
    }
}
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 100%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.col, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
position: relative;
  min-height: 1px;
}
.col-xs-12 {
  width: 100%;
  padding-left: 4%;
  padding-right: 4%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
margin-left: 2%;
}
.col-xs-1 {
  width: 8.33333333%;
}

.footermenu ul{
padding-left: 0 !important;
margin: 0;
}
.footermenu h3{
text-align: left;
}
.moduletable footermenu{
}
.footermenu ul li{
/*display: inline-block;*/
margin: 0 5px;
padding-top: 10px;
font-size: smaller;
text-align: left;
list-style-type: none;
}
.footermenu ul li a{
color: #fff;
text-decoration: none;
}

body, input, *:before {
	/*font-family: 'PT Sans', sans-serif;*/
font-family: 'Raleway', sans-serif;
}
body {
	min-width: 320px;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
b.none {
	display: none !important
}

/* ! HEADER */
header {
	z-index: 5;
	left: 0;
	top: 0;
	position: fixed;
	width: 100%
}
#header .bar {
	/*top: -69;*/
	height: 69px;
	position: absolute;
	width: 100%;
	/*background-color: rgba(41,61,97,0.81);*/
	background-color: rgba(255,109,0,1);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
}
.map-top-margin{
        margin-top: 1em;
}
.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    margin-top: 1em;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:90%;
    width:100%;
    position:absolute;
}
@keyframes topMove{
    from {top: -69px;}
    to {top: 23px;}
}

#header.hide .bar {
	/*top: 23px;*/
	opacity: 1;
-webkit-animation-duration: 2s;
-webkit-animation-name: topMove;	
-webkit-animation-fill-mode: forwards;

animation-duration: 2s;
animation-name: topMove;	
animation-fill-mode: forwards;
}
header #navframe {
	position: relative;
	/*padding-left: 20px;*/
	margin: 0 auto;
	/*max-width: 950px;*/
	width: 100%;
max-width: 1170px;
}
header #nav:after {
	clear: both;
	display: block;
	content: ''
}
header .mobile_menu {
	z-index: 9;
	top: 0;
	left: 0;
	bottom: 0;
	position: absolute;
	display: none;
}
.slicknav_menu {
	top: -60px;
	opacity: 0;
	position: relative;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	/*background-color: rgba(41,61,97,0.81);*/
	background-color: rgba(255,109,0,1);
  	/*mix-blend-mode: multiply;*/
	transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
}
.slicknav_menu {
	top: 0;
	opacity: 1
}
.slicknav_nav {
	line-height: 25px;
	font-size: 20px;
    height: 100vh
}
.slicknav_nav li {
	padding-top: 5px;
	padding-bottom: 5px
}
.slicknav_nav li:first-child {
	padding-top: 20px
}
.slicknav_btn {
	margin-top: 12px;
	margin-bottom: 10px;
	background: none;
	float: left
}
.slicknav_nav a:hover,.slicknav_nav li.active a,
.slicknav_nav a.selected {
	color: rgb(20,75,36);
	background-color: #fff;
border-radius: 6px;
}
header .menu_box ul {
	padding: 0;
	padding-top: 46px;
	float: left;
	margin: 0;
	list-style: none;
}
header .menu_box ul li {
	float: left;
}
header .menu_box ul li a {
	margin: 0 1px;
	padding: 0 6px;
	display: block;
	line-height: 19px;
	text-transform: uppercase;
	font-size: 15px;
	text-decoration: none;
	color: #fff
}
header .menu_box ul li.active a{
margin: 0;
	line-height: 17px;	
	border: 1px solid white;
}
header .menu_box ul li a.selected,
header .menu_box ul li a:hover {
	margin: 0;
	line-height: 17px;
	border: 1px solid white;
}
header #swing {
	position: absolute;
	-webkit-perspective: 500;
	-moz-perspective: 500;
	-o-perspective: 500;
	perspective: 500;	
	z-index: 9;
	right: 0;
	/*width: 132px;*/
	height: 223px;
}
header #logo {
    padding-left: 21px;
    padding-top: 23px;
	height: 223px;
	position: relative; 
	z-index:1;
	

	
	/*background: url(../images/logo-bg.png) no-repeat center top;*/
}
header #logo.animated {

	  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay:0;
  animation-direction: alternate;
  animation-fill-mode: none;

/*
	-webkit-animation: balance 1.5s ease-in-out 110ms 1 alternate;
	-moz-animation: balance 1.5s ease-in-out 110ms 1 alternate;
	-ms-animation: balance 1.5s ease-in-out 110ms 1 alternate;
	-o-animation: balance 1.5s ease-in-out 110ms 1 alternate;
	animation: balance 1.5s ease-in-out 110ms 1 alternate;
	*/
}

@keyframes stretch {
  0% {
    transform: scale(0);
  }
  50%{
      transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
header #logo img {
	display: block;
	max-width: 200px;
	width: 100%;
}
.weatherplugin{
    position: absolute;
    top: -20vh;
    left: 0;
    opacity: 0.8; 
}
@media screen and (max-width:875px) {
   .weatherplugin{
    width: 100px !important; 
} 
}

.sectionFooter{
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}
.sectionFrameFooter{
    margin: 0 auto;
    max-width: 1170px;
    position: relative;
    display: flex;
    padding: 2px;
}
.col1Footer, .col2Footer{
    width: 30%;
    max-width: 30%;
    flex: 0 0 30%;
    display: flex;
    color: #fff;
}
.col3Footer{
    width: 40%;
    max-width: 40%;
    flex: 0 0 40%;
    display: flex;
}

@media screen and (max-width:414px) {
    footer{
        height: auto !important;
    }
    .sectionFrameFooter{
        flex-direction: row;
        flex-wrap: wrap-reverse;
    }
    .col1Footer, .col2Footer,.col3Footer{
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        display: flex;
        flex-direction: column;
        padding:10px;
        z-index: 1;
    }
    .copyright-row{
        background-color: rgb(50, 51, 57);
    }
}
@media screen and (max-width:588px) {
    footer{
        height: auto !important;
    }
    .sectionFrameFooter{
        flex-direction: row;
        flex-wrap: wrap-reverse;
    }
    .col1Footer, .col2Footer,.col3Footer{
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        display: flex;
        flex-direction: column;
        padding:10px;
        z-index: 1;
    }
    .copyright-row{
        background-color: rgb(50, 51, 57);
    }
}
.footerMapFrame{
    margin: 0 !important;
}
@media screen and (max-width:820px) {
	header #nav {
		padding-left: 0;
		padding-right: 0;
	}
	header #logo {
		position: absolute;
		top: 0;
		right: 0;
	}
	header .menu_box {
		display: none;
	}
	#header .bar {
		display: none
	}
	header .mobile_menu {
    	width: 100%;
		display: block;
	}
	header #logo {
	    padding-top: 0px;
	    padding-right: 13px;
	    width: 200px;
	    height: 60px;
	    padding-left: 13px;
	    /*background: #fff*/
	}
	header #swing {
		height: 60px
	}
}
@media all and (orientation:portrait) {
	@media screen and (max-width:414px) {
		.body {
			padding-top: 60px
		}
		#gallery .body,
		#index .body {
			padding-top: 0
		}
	}
}
@media all and (orientation:landscape) {
	header #swing {
		height: 60px
	}
	@media screen and (max-width:736px) {
		.slicknav_nav {
		    line-height: 14px;
		    font-size: 13px
		}
		.slicknav_nav a {
		    padding: 5px 10px;
		    margin: 0 5px;
		}
		.slicknav_nav li {
		    padding-bottom: 0
		}
		.slicknav_nav li:first-child {
		    padding-top: 0
		}

	}
}

.body {
	position: relative;
	z-index: 0;
}
.body2 {
	overflow: hidden;
	position: relative;
}

/* ! -- shared */
.section1 .bodytext h1,
.m-scooch-photos .title {
	line-height: 58px;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
  	font-size: 64px;
	color: rgb(255, 255, 255);
	text-shadow: 2px 3.464px 4px rgba(1, 1, 1, 0.294);
}
.section1 .bodytext h1 span {
    display: block;
    font-size: 17px;
    font-weight: 600;
}
@media screen and (max-width:420px) {
	.section1 .bodytext h1 {
	    font-size: 28px
	}
}
@media all and (orientation:landscape) {
	@media screen and (max-width:736px) {
		.section1 .bodytext h1 {
		    line-height: 31px;
		    font-size: 33px
		}
		.section1 .bodytext h1 span {
			font-size: 11px
		}
		body#facilities .section1 .bodytext h1 span,
		body#masterplan .section1 .bodytext h1 span {
			margin: 0 auto;
			width: 80%;
		}
	}
}
@media all and (orientation:portrait) {
	@media screen and (max-width:414px) {
		.section1 .bodytext h1 {
			line-height: 24px
		}
		.section1 .bodytext h1 span {
			font-size: 11px
		}
	}
}

/* ! HOME */
#index.welcome {
	/*background: url(../upload/grey-body-bg.jpg) center top*/
}
#index.welcome #banner {
	position: relative;
	width: 100%;
}
#index.welcome #banner img {
	display: block;
	width: 100%;
}
#index.welcome #banner .fa-times {
	position: fixed;
	right: 10px;
	top: 10px;
	font-size: 40px;
	text-decoration: none;
	color: #000
}
#index.welcome .bar,
#index.welcome #shortcut,
#index.welcome header .mobile_menu,
#index.welcome header .menu_box,
#index.welcome .section1,
#index.welcome .ckhome {
	display: none
}
#index .body .section1 {
	/*background-image: url('../images/moduleimg/index-bg.jpg'); */
	background-position: left bottom;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: top;
}
#index .body .section1 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
#index .body .section1 .sectionframe .bgimgsize {
	width: 100%;
	padding-bottom: 69.145%
}
#index .body .section1 .bodytext {
	top: 65%;
	left: 0;
	width: 100%;
	position: absolute;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%)
}
#index .body .section1 .bodytext h1 {
	padding-left: 120px
}
#index .body .section1 .bodytext p{
        padding-left: 120px;
        color:#fff;
	font-size: 14px;
	padding-top: 10px;
	line-height: normal;
	max-width: 600px;
	display: block;
	font-weight: 400
}
.ckhome .section2 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
#index .body .ckhome .section2 .sectionframe {
	margin: -200px auto 0;
}
#index .body .ckhome .section2 .homesectionframe {
	margin: -350px auto 0;
}
.ckhome .section2 .sectionframe:after {
	clear: both;
	display: block;
	content: ''
}
.ckhome .section2 .col1 {
	width: 28.11965811965812%; /* 329 / 1170 */
	float: left
}
.ckhome .section2 .col1 .span {
	display: block;
	position: relative;
	width: 100%;
	padding-bottom: 162.310%
}
.ckhome .section2 .col1 a.box {
	background-image: url('../images/moduleimg/index-img-2.jpg');
	overflow: hidden;
	height: 62.54681647940075%; /* 334 / 534 */
	-webkit-background-size: cover;
	background-size: cover;
	border-top: 4px solid #fff;
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0
}
.ckhome .section2 .col1 b {
	z-index: 1;
	/*width: 100%;*/
	max-width: 200px;
	font-family: 'Raleway', sans-serif;
	font-size: 27px;
	color: #fff;
	font-weight: 300;
	margin: 0;
	position: absolute;
	bottom: 34px;
	left: 22.188449848024316%; /* 73 / 329 */
	text-align: center;
}
.ckhome .section2 .sectionframe .col1 b > span {
	position: relative;
	padding: 0 4px;
	/*border: 2px solid #fff;*/
	display: inline-block;
}
#index .body .section2 .col1 a .colorani {
	/*opacity: 0;*/
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(51, 14, 119, 0.91);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}
#index .body .section2 .col1 a:hover .colorani {
	opacity: 1;
    transform: rotate(39.5deg);
    -webkit-transform: rotate(39.5deg);
    width: 400px;
    height: 300px;
    top: -31px;
    left: -111px
}
.ckhome .section2 .col2 {
	width: 26.495726495726496%; /* 310 / 1170 */
	float: left
}
.ckhome .section2 .col2 .bgimage {
	background-image: url('../images/moduleimg/index-img-1.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	position: relative;
	width: 100%;
	padding-bottom: 172.2580%; /* 534 */
}
.ckhome .section2 .col2 .bgimage a {
	overflow: hidden;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	border-left: 4px solid #fff;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	bottom: 0;
}
.ckhome .section2 .col2 .bgimage a .box {
	/*width: 90%;*/
	max-width: 200px;
	position: absolute;
	top: 50%;
	left: 30%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%)
}
.ckhome .section2 .col2 b {
	font-family: 'Raleway', sans-serif;
	font-size: 27px;
	color: #fff;
	font-weight: 300;
	margin: 0;
}
.ckhome .section2 .sectionframe .col2 b > span {
	position: relative;
	padding: 0 4px;
	/*border: 2px solid #fff;*/
	display: inline-block
}
#index .body .section2 .col2 a .colorani {
	/*opacity: 0;*/
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(0, 191, 243, 0.5);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}
#index .body .section2 .col2 a:hover .colorani {
    opacity: 1;
    transform: rotate(40.5deg);
    -webkit-transform: rotate(40.5deg);
    width: 350px;
    height: 650px;
    top: -393px;
    left: -156px;
}
.ckhome .section2 .col3 {
	position: relative;
	width: 45.384615384615384%; /* 531 / 1170 */
	float: left
}
.ckhome .section2 .col3 .bgimage {
	background-image: url('../images/moduleimg/index-img-3.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	display: block;
	position: relative;
	width: 100%;
	padding-bottom: 53.70018975%
}
.ckhome .section2 .col3 .bgimage a {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	bottom: 0
}
.ckhome .section2 .col3 .bgimage a .box {
	/*width: 100%;*/
	max-width: 200px;
	margin: 0;
	position: absolute;
	/*top: 50%;
	right: 0;*/
top: 90%;
right: 70%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%)
}
.ckhome .section2 .col3 .bgimage b {
	font-family: 'Raleway', sans-serif;
	font-size: 27px;
	color: #fff;
	font-weight: 300;
	margin: 0;
}
.ckhome .section2 .sectionframe .col3 b > span {
	position: relative;
	padding: 0 4px;
	/*border: 2px solid #fff;*/
	display: inline-block
}
#index .body .section2 .col3 a .colorani {
	/*opacity: 0;*/
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(130, 38, 223, 0.8);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}
#index .body .section2 .col3 a:hover .colorani {
    opacity: 1;
    transform: rotate(-49.5deg);
    -webkit-transform: rotate(-49.5deg);
    width: 350px;
    height: 650px;
    top: -446px;
    left: -137px
}
.ckhome .section2 .col3 .span2 {
	display: block;
	position: relative;
	width: 100%;
	padding-bottom: 46.32768362%;
	background-color: #fff;
}
.ckhome .section2 .col3 .span2 .box {
	padding-right: 25px;
	-webkit-background-size: cover;
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 25px;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%)
}
.ckhome .section2  .col3 .span2 h3 {
	font-family: 'Raleway', sans-serif;
	font-size: 22px;
	color: #363636;
	font-weight: 300;
	margin: 0
}
.ckhome .section2  .col3 .span2 h3 span {
	padding: 0 4px;
	border: 1px solid #0e6d40;
	display: inline-block;
	color: #0e6d40
}
.ckhome .section2  .col3 .span2 p {
	padding-top: 18px;
	color: #0e6d40;
	margin: 0;
	font-size: 14px;
}
.ckhome .section2  .col3 .span2 p a {
	font-size: 12px;
	font-weight: 400;
	color: #0e6d40;
	display: block;
	text-decoration: none;
	padding: 0;
	margin-top: 20px;
}
.ckhome .section2  .col3 .span2 p a i {
	font-size: 10px
}
/* ! -- Section 3 */
.ckhome .section3 {
	padding-top: 4px
}
.ckhome .section3 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
.ckhome .section3 .sectionframe:after {
	clear: both;
	display: block;
	content: ''
}
.ckhome .section3 .sectionframe .col4 {
	background-image: url('../images/moduleimg/index-img-4.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	width: 54.01709401709401%; /* 632 / 1170 */
	position: relative;
	float: left
}
.ckhome .section3 .sectionframe .col4 .box {
	overflow: hidden;
	display: block;
	position: relative;
	width: 100%;
	padding-bottom: 102.37341772%
}
.ckhome .section3 .sectionframe .col4 .box b {
    z-index: 1;
   	position: absolute;
	right: 42px;
	bottom: 38px;
    font-family: 'Raleway', sans-serif;
    font-size: 27px;
    font-weight: 300;
    color: #fff
}
.ckhome .section3 .col4 .box b > span {
	position: relative;
	padding: 0 30px;
	/*border: 2px solid #fff;*/
	display: inline-block
}
#index .body .section3 .col4 a .colorani {
	/*opacity: 0;*/
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(0, 128, 0, 0.91);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}

#index .body .section3 .col5 a .colorani {
	/*opacity: 0;*/
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(102, 51, 0, 0.67);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}

#index .body .section3 .col4:hover a .colorani {
	opacity: 1;
	transform: rotate(45.5deg);
	-webkit-transform: rotate(45.5deg);
    width: 550px;
    height: 986px;
    top: -303px;
    left: -228px
}

#index .body .section3 .col5:hover a .colorani {
	opacity: 1;
	transform: rotate(20.5deg);
	-webkit-transform: rotate(20.5deg);
    width: 550px;
    height: 986px;
    top: -67px;
    left: -368px
}
.ckhome .section3 .sectionframe .col5 {
	width: 45.98290598290598%; /* 538 / 1170 */
	position: relative;
	float: left;
background-image: url('../images/moduleimg/index-img-7.jpg');
background-size: cover;
}
.ckhome .section3 .sectionframe .col5 a {
	color: #363636;
	text-decoration: none
}
.ckhome .section3 .sectionframe .col5 .span {
	display: block;
	position: relative;
	width: 100%;
	padding-bottom: 120.26022305%
}
.ckhome .section3 .sectionframe .col5 .box {
	right: 0;
	bottom: 0;
	position: absolute;
	width: 100%;
	height: 47.449768160741884%; /* 307 / 647 */
overflow: hidden;
}
.ckhome .section3 .sectionframe .col5 .box2 {
	padding: 0 20px;
	display: block;
	left: 0;
	/*top: 50%;*/
bottom: 20px;
	position: absolute;
	width: 100%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	text-decoration: none;
	-webkit-background-size: cover;
	background-size: cover
}
.ckhome .section3 .sectionframe .col5 .box b {
	z-index: 1;
position: absolute;
bottom: 38px;
left: 20px;
font-family: 'Raleway', sans-serif;
font-size: 27px;
font-weight: 300;
color: #fff;
	margin: 0
}
.ckhome .section3 .sectionframe .col5 b span {
	font-weight: 300;
	padding: 0 4px;
	/*border: 1px solid #0e6d40;*/
	display: inline-block;
	color: #0e6d40
}
.ckhome .section3 .sectionframe .col5 b + span {
	display: inline-block;
	padding-top: 18px;
	color: #0e6d40;
	margin: 0;
	font-size: 14px;
}
.ckhome .section3 .sectionframe .col6 {
	z-index: 1;
	border-left: 4px solid #fff;
	border-bottom: 4px solid #fff;
	top: 0;
	right: 0;
	position: absolute;
	width: 71.88034188034188%; /* 841 / 1170 */
	height: 51.7774343122102%; /* 335 / 647 */
}
.ckhome .section3 .sectionframe .col7 {
	background-image: url('../images/moduleimg/index-img-6.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
}
.ckhome .section3 .sectionframe .col7 a {
	overflow: hidden;
	border-right: 4px solid #fff;
	text-decoration: none;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0
}
.ckhome .section3 .sectionframe .col7 a b {
	z-index: 1;
	position: absolute;
	bottom: 50px;
	left: 140px;
    font-family: 'Raleway', sans-serif;
    font-size: 27px;
    color: #fff;
    font-weight: 300;
    text-align: center;
}
.ckhome .section3 .sectionframe .col7 a b > span {
	position: relative;
    padding: 0 30px;
    /*border: 2px solid #fff;*/
    display: inline-block
}
#index .body .section3 .col7 a .colorani {
	/*opacity: 0;*/
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(250, 0, 29, 0.71);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}
#index .body .section3 .col7 a:hover .colorani {
    opacity: 1;
    transform: rotate(-53.5deg);
    -webkit-transform: rotate(-53.5deg);
    width: 249px;
    height: 435px;
    top: -150px;
    left: 25px;
}
.ckhome .section3 .sectionframe .col8 {
	background-image: url('../images/moduleimg/index-img-5.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	position: absolute;
	right: 0;
	top: 0;
	width: 50%;
	height: 100%;
}
.ckhome .section3 .sectionframe .col8 a {
	overflow: hidden;
	text-decoration: none;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0
}
.ckhome .section3 .sectionframe .col8 a b {
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    font-family: 'Raleway', sans-serif;
    font-size: 27px;
    color: #fff;
    font-weight: 300;
}
.ckhome .section3 .sectionframe .col8 a b > span {
	position: relative;
    padding: 0 30px;
    /*border: 2px solid #fff;*/
    display: inline-block;
}
#index .body .section3 .col8 a .colorani {
	/*opacity: 0;*/
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(245, 148, 45, 0.8);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}
#index .body .section3 .col8 a:hover .colorani {
    opacity: 1;
    transform: rotate(-116.5deg);
    -webkit-transform: rotate(-116.5deg);
    width: 413px;
    height: 963px;
    top: -449px;
    left: 178px;
}
@media screen and (max-width:1156px) {
	#index .body .section1 .bodytext {
		top: 120px;
		transform: translate(0,0);
		-webkit-transform: translate(0,0);
	}
	#index .body .section1 .bodytext h1 {
	    padding-left: 50px;
	}
	#index .body .section1 .bodytext h1 span {
		max-width: 800px;
	}
}
@media screen and (max-width:940px) {
	#index .body .section1 .bodytext h1 span {
		width: 100%;
		padding-right: 80px;
		font-size: 12px
	}
}
@media screen and (max-width:890px) {
	#index .body .section1 .bodytext {
	    top: 50%;
	    transform: translate(0, -50%);
	    -webkit-transform: translate(0, -50%);
	}
}
@media screen and (max-width:875px) {
	#index .body .ckhome .section2 .sectionframe,
	.ckhome .section2 .sectionframe {
	    margin-top: 0
	}
	.ckhome .section2 .col1 {
	    width: 62.5566%
	}
	.ckhome .section2 .col1 .span {
	    padding-bottom: 102.76923077%
	}
	.ckhome .section2 .col1 a.box {
		height: 100%
	}
	.ckhome .section2 .col2 {
	    width: 37.4434%
	}
	.ckhome .section2 .col3 {
	    width: 100%
	}
	.ckhome .section2 .col3 #sectionani2box3 {
		width: 50%;
		float: left
	}
	.ckhome .section2 .col3 .span22 {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 50%
	}
	.ckhome .section2 .col3 .span2 {
		position: absolute;
		height: 100%;
		padding-bottom: 0
	}
	.ckhome .section2 .col3 .span2 .box {
		width: 90%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%)
	}
}
@media screen and (max-width:714px) {
	#index .section1 .bodytext h1 {
	    line-height: 31px;
	    font-size: 33px;
	}
}
@media screen and (max-width:650px) {
	.ckhome .section3 .sectionframe .col4 {
		float: right
	}
	.ckhome .section3 .sectionframe .col6 {
		height: auto;
	    border: none;
		border-top: 4px solid #fff;
	    float: left;
	    position: relative;
	    width: 100%;
   	 	padding-bottom: 51.7774343122102%;
	}
	.ckhome .section3 .sectionframe .col5 .box {
		height: 100%
	}
	.ckhome .section3 .sectionframe .col4 .span span {
    	padding: 0 20px;
		width: 83%;
		left: 50%;
	    right: auto;
	    bottom: 38px;
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0)
	}
	.ckhome .section3 .sectionframe .col5 .box2 {
	    left: 50%;
	    -webkit-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%)
	}
}
@media screen and (max-width:600px) {
	#index .body .section1 .bodytext h1 {
	    padding-left: 40px;
	    padding-right: 20px;
	}
.ckhome .section3 .sectionframe .col5{

background-image: url('../images/moduleimg/index-img-71.jpg');
}
	.ckhome .section3 .sectionframe .col5,
	.ckhome .section3 .sectionframe .col4 {
	    float: none;
	    width: 100%
	}
	.ckhome .section3 .sectionframe .col4 .span {
    	padding-bottom: 80%
	}
	.ckhome .section3 .sectionframe .col5 .span {
    	padding-bottom: 50%
	}
	.ckhome .section3 .sectionframe .col4 .span span {
	    padding: 0 20px;
	    width: auto;
	    left: 50%;
	    right: auto;
	    bottom: auto;
	    top: 50%;
	    transform: translate(-50%, -50%);
	    -webkit-transform: translate(-50%, -50%)
	}
	.ckhome .section3 .sectionframe .col7 a span {
	    bottom: auto;
	    left: 50% !important;
		top: 50% !important;
	    transform: translate(-50%, -50%);
	    -webkit-transform: translate(-50%, -50%)
	}
#index .body .section3 .col7 a:hover .colorani{
    left: 20% !important;
		top: -250% !important;
}
}
@media screen and (max-width:588px) {
	#index .body .section1 .sectionframe .bgimgsize {
		height: 600px
	}
}
@media screen and (max-width:457px) {
	.ckhome .section2 .col1 {
		float: none;
	    width: 100%
	}
	.ckhome .section2 .col1 .span {
    	padding-bottom: 60%
	}
	.ckhome .section2 .col1 a.box {
		-webkit-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		-moz-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		border: none;
		background-position: center;
	}
	.ckhome .section2 .col1 h3 {
		width: auto;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		bottom: auto
	}
	.ckhome .section2 .col2 {
	    width: 100%
	}
	.ckhome .section2 .col2 .bgimage {
		background-position: center -200px;
    	padding-bottom: 60%		
	}
	.ckhome .section2 .col2 .bgimage a {
		-webkit-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		-moz-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		border: none
	}
	.ckhome .section2 .col3 #sectionani2box3 {
		-webkit-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		-moz-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		float: none;
	    width: 100%;
	    padding-bottom: 60%;
	    border: none
	}
	.ckhome .section2 .col3 .bgimage a .box {
		width: auto;
		right: auto;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%)
	}
	.ckhome .section2 .sectionframe .col3 #sectionani2box3 h3 span {
    	background-color: rgba(0,0,0,0.3)		
	}
	.ckhome .section2 .col3 .span22 {
	    position: relative;
	    top: auto;
	    right: auto;
	    height: auto;
	    width: 100%;
	}
	.ckhome .section2 .col3 .span2 {
	    position: relative;
	    height: auto;
	    width: 100%;
	    padding-bottom: 68%
	}
	.ckhome .section3 .sectionframe .col4 {
		background-position: center bottom;
		-webkit-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		-moz-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
	}
	.ckhome .section3 .sectionframe .col4 .box {
    	padding-bottom: 60%		
	}
	.ckhome .section3 .sectionframe .col4 .box b {
		/*width: 90%;*/
		text-align: center;
		margin: 0;
		padding: 0;
		right: auto;
		bottom: auto;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%)
	}
	.ckhome .section3 .sectionframe .col4 .box b > span {
		background-color: rgba(0,0,0,0.3)
	}
	.ckhome .section3 .sectionframe .col6 {
		float: none;
		border: none;
		padding-bottom: 0
	}
	.ckhome .section3 .sectionframe .col7 {
		-webkit-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		-moz-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		position: relative;
		width: 100%;
		height: auto
	}
	.ckhome .section3 .sectionframe .col7 a {
		display: block;
		height: auto;
		border: none;
		position: relative;
    	padding-bottom: 60%		
	}
	.ckhome .section3 .sectionframe .col7 a b {
		bottom: auto;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%)
	}
	.ckhome .section3 .sectionframe .col8 {
		-webkit-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		-moz-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.52);
		position: relative;
		width: 100%;
		height: auto
	}
	.ckhome .section3 .sectionframe .col8 a {
		display: block;
		height: auto;
		border: none;
		position: relative;
    	padding-bottom: 60%		
	}
	.ckhome .section3 .sectionframe .col8 a b {
		margin: 0;
		padding: 0;
	}
}
@media screen and (max-width:420px) {
	#index .body .section1 .bodytext h1 {
	    line-height: 28px;
	    font-size: 29px
	}
	#index .body .section1 .bodytext h1 span {
	    width: 100%;
	    padding-right: 0;
	}
}

@media all and (orientation:portrait) {
	@media screen and (max-width:414px) {
		#index .body .section1 .sectionframe .bgimgsize {
			padding-bottom: 0;
			min-height: 100vh
		}
	}
}
@media all and (orientation:landscape) {
	@media screen and (max-width:736px) {
		#index .body .section1 .sectionframe .bgimgsize {
			padding-bottom: 0;
			min-height: 100vh
		}
	}
}
/* ! --- animation */
#sectionani2box1,
#sectionani2box2,
#sectionani2box3 {
	/*opacity: 0*/
}

/* ! GALLERY */
#gallery .body {
	height: 100vh
}
#gallery .body .m-scooch-photos {
	padding: 0;
	margin: 0;
	height: 100vh
}
#gallery .body .m-scooch-photos .m-scooch-inner {
	height: 100vh
}
#gallery .body .m-scooch.m-fluid>.m-scooch-inner>* {
	height: 100vh
}
#gallery .body .m-scooch.m-fluid>.m-scooch-inner i {
    font-size: 40px;
    position: absolute;
    height: 40px;
    line-height: 40px;
    width: 40px;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
}
#gallery .body .m-scooch-photos .m-item{
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#gallery .body .m-scooch-photos .title {
	opacity: 0;
	max-width: 960px;
	width: 90%;
	margin: 0 auto;
	text-align: center;
	left: 50%;
	top: 45%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	position: absolute;
	transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-webkit-transition: all .35s ease-in-out;
}
#gallery .body .m-scooch-photos .m-active .title {
	top: 50%;
	opacity: 1
}
#gallery .body .m-scooch-controls a:first-child,
#gallery .body .m-scooch-controls a:last-child {
    font-size: 50px;
    z-index: 4;
    width: 50px;
    position: absolute;
    top: 50%;
    left: 0;
    height: 100%;
    color: #fff;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%)
}
#gallery .body .m-scooch-controls a i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%)
}
#gallery .body .m-scooch-controls a:last-child {
    left: auto;
	right: 0;
}
#gallery .body .button_box {
	text-align: center;
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
}
#gallery .body .button_box .button {
    text-align: center;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    line-height: 45px;
    border: 2px solid #fff;
    border-radius: 22px;
    -moz-border-radius: 22px;
    -khtml-border-radius: 22px;
    -webkit-border-radius: 22px;
    width: 100%;
    max-width: 277px;
    margin: 0 20px 10px;
    background: rgba(147, 149, 152, 0.5);
    border-color: rgba(147, 149, 152, 0.5);
}
#gallery .body .button_box .button:hover,
#gallery .body .button_box .button.selected {
    background: rgba(20,75,36, 0.9);
    border-color: rgba(20,75,36, 0.9);
}
@media screen and (min-width:900px) {
	#gallery .body,
	#gallery .body .m-scooch-photos,
	#gallery .body .m-scooch-photos .m-scooch-inner,
	#gallery .body .m-scooch.m-fluid>.m-scooch-inner>* {
		padding-bottom: 0;
		height: calc(100vh - 80px);
	}
}
@media screen and (min-width:1200px) {
	#gallery .body,
	#gallery .body .m-scooch-photos,
	#gallery .body .m-scooch-photos .m-scooch-inner,
	#gallery .body .m-scooch.m-fluid>.m-scooch-inner>* {
		height: calc(100vh);
	}
}
@media screen and (max-width:720px) {
	#gallery .body .m-scooch-photos .title {
		line-height: 44px;
		font-size: 43px
	}
}

@media all and (orientation:portrait) {
	@media screen and (max-width:414px) {
		#gallery .body .m-scooch-photos .title {
			width: 85%;
			line-height: 31px;
			font-size: 34px
		}
		#gallery .body .button_box {
			bottom: 0
		}
		#gallery .body .button_box .button {
			line-height: 38px;
		}
	}
}
@media all and (orientation:landscape) {
	@media screen and (max-width:736px) {
		#gallery .body .m-scooch-photos .title {
			width: 85%;
			line-height: 31px;
			font-size: 34px
		}
		#gallery .body .button_box {
			bottom: 0
		}
		#gallery .body .button_box .button {
			line-height: 31px;
			font-size: 15px;
			max-width: 180px
		}
	}
}

/* ! THANK YOU */
#thankyou .body {
	background: url(../image/register-body-bg.jpg) center top
}
#thankyou .body .section1 {
	background-image: url('../upload/register-bg.jpg');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
#thankyou .body .section1 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
#thankyou .body .section1 .sectionframe .bgimgsize {
	width: 100%;
	padding-bottom: 56%
}
#thankyou .body .section1 .bodytext {
	top: 50%;
	left: 0;
	width: 100%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	position: absolute
}
#thankyou .body .section1 .bodytext h1 {
	text-align: center
}
#thankyou .body .bodyframe {
	max-width: 958px;
	width: 100%;
	position: relative;
	margin: 0 auto
}
#thankyou .body .section3 {
	padding: 0 20px 0;
	background: url(../image/grey-body-bg.jpg) center top
}
#thankyou .body .section3 .sectionframe {
	padding-top: 80px;
	padding-bottom: 34px;
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
#thankyou .body .section3 .sectionframe:after {
	clear: both;
	display: block;
	content: ''
}
#thankyou .body .section3 .sectionframe p {
	max-width: 468px;
	padding-right: 20px;
	width: 50%;
	float: left
}
@media screen and (max-width: 600px) {
	#location .body .section3 .sectionframe p {
		font-size: 80%
	}
}
@media screen and (max-width: 420px) {
	#location .body .section3 .sectionframe p {
		padding-right: 0;
		width: 100%
	}
	#location .body .section3 .sectionframe p br.remove {
		display: none
	}
}

/* ! REGISTRATION */
.ckregister,
#register .body {
	background: url(../image/register-body-bg.jpg) center top
}
#register .body .section1 {
	background-image: url('../upload/register-bg.jpg');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
#register .body .section1 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
#register .body .section1 .sectionframe .bgimgsize {
	width: 100%;
	padding-bottom: 56%
}
#register .body .section1 .bodytext {
	top: 50%;
	left: 0;
	width: 100%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	position: absolute
}
#register .body .section1 .bodytext h1 {
	text-align: center
}
#register .body .bodyframe,
.ckregister .bodyframe {
	max-width: 958px;
	width: 100%;
	position: relative;
	margin: 0 auto
}
.ckregister .section2 .topframe {
	z-index: 2;
	width: 328px;
	position: absolute;
	left: 0;
	bottom: -485px
}
.ckregister .section2 .topframe.moreinfo {
	bottom: -796px
}
.ckregister .section2 .topframe .box3:first-child {
	padding: 109px 36px 82px;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	background: url(../upload/register-form-title-bg.jpg);
	color: #fff
}
.ckregister .section2 .topframe .box3:first-child * {
	text-transform: uppercase;
	font-size: 27px;
	margin: 0;
}
.ckregister .section2 .topframe .box3:first-child h2 {
	padding-bottom: 25px;
	font-weight: 800;
}
.ckregister .section2 .topframe .box3:nth-child(2) {
	background: url(../image/photo1.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	border: 3px solid #fff;
	border-bottom: none
}
.ckregister .section2 .topframe .box3:nth-child(2):before {
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 98.47560976%;
}
.ckregister .section2 .topframe .box3:nth-child(3) {
	display: none;
	background: url(../image/photo2.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	border: 3px solid #fff;
	border-bottom: none
}
.ckregister .section2 .topframe .box3:nth-child(3):before {
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 98.47560976%;
}
.ckregister .section2 .desc {
	line-height: 18px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #0e6d40;
	padding-left: 409px;
	padding-top: 55px;
	padding-bottom: 60px;
}
.ckregister .section2 .desc h3 {
	line-height: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 22px;
}
.ckregister .section2 .content ol {
	font-weight: 700;
	padding-left: 0;
	margin: 0;
}
.ckregister .section2 .content ol li {
	position: relative;
	padding-left: 20px;
  	list-style-type:none;
	font-weight: 400;
}
.ckregister .section2 .content ol li:before {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-block;
	font-weight: 700;
	text-align: right;
}
.ckregister .section2 .content > ol {
  	counter-reset:item;
}
.ckregister .section2 .content > ol > li {
  	counter-increment:item;
}
.ckregister .section2 .content ol > li:before {
	content:counter(item) ".";
}
.ckregister .section2 .content > ol ol {
  	counter-reset:items;
}
.ckregister .section2 .content > ol ol > li {
  	counter-increment:items;
}
.ckregister .section2 .content ol ol > li:before {
	content:counter(items, lower-alpha) ".";
}
.ckregister .section3 {
	overflow: hidden
}
.ckregister .section3 .bodyframe {
	max-width: 958px;
	width: 100%;
	position: relative;
	margin: 0 auto
}
.ckregister .section3 .bodyframe .form {
	padding: 30px 0 0 409px;
	position: relative;
	width: 100%;

}
.ckregister .section3 .bodyframe .form:before {
	background: url(../upload/register-form-bg.jpg);
	background-position: left bottom;
	-webkit-background-size: cover;
	background-size: covers;
	content: '';
	position: absolute;
	top: 0;
	left: 328px;
	width: calc(100vw - 328px);
	height: 100%;
	z-index: 1;
}
.ckregister .section3 .bodyframe .form .formframe {
	padding: 50px 0;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	position: relative;
	z-index: 2
}
.ckregister .section3 .bodyframe .form input {
	padding: 0 27px;
	font-size: 14px;
	color: #555;
	border: none;
	margin-bottom: 13px;
	margin-right: 10px;
	width: 225px;
	line-height: 49px;
}
.ckregister .section3 .bodyframe .form select {
    height: 49px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
	margin-bottom: 13px
}
.ckregister .section3 .bodyframe .form #contact {
	position: relative;
	display: inline-block
}
.ckregister .section3 .bodyframe .form #contact input {
	padding-left: 43px
}
.ckregister .section3 .bodyframe .form #contact:before {
    font-size: 14px;
	padding-left: 27px;
	color: #555;
	line-height: 49px;
	position: absolute;
	left: 0;
	top: 0;
	content: '+6'
}
.ckregister .section3 .bodyframe .form #salutation {
	display: none;
	margin-right: 10px;
	width: 120px
}
.ckregister .section3 .bodyframe .form.show #salutation {
	display: inline-block
}
.ckregister .section3 .bodyframe .form input#name {
	width: 464px
}
.ckregister .section3 .bodyframe .form.show input#name {
	width: 330px
}
.ckregister .section3 .bodyframe .form #gender {
	display: none;
	width: 100px
}
.ckregister .section3 .bodyframe .form.show #gender {
	display: inline-block
}
.ckregister .section3 .bodyframe .form #age {
	display: none;
	margin-left: 11px;
	width: 110px
}
.ckregister .section3 .bodyframe .form.show #age {
	display: inline-block
}
.ckregister .section3 .bodyframe .form input#dob {
	display: none;
	margin-left: 10px
}
.ckregister .section3 .bodyframe .form.show #dob {
	display: inline-block
}
.ckregister .section3 .bodyframe .form input#address {
	display: none;
	width: 464px
}
.ckregister .section3 .bodyframe .form.show input#address {
	display: block
}
.ckregister .section3 .bodyframe .form #house,
.ckregister .section3 .bodyframe .form #mobile,
.ckregister .section3 .bodyframe .form #postcode,
.ckregister .section3 .bodyframe .form #state,
.ckregister .section3 .bodyframe .form #city {
	display: none
}
.ckregister .section3 .bodyframe .form.show #house,
.ckregister .section3 .bodyframe .form.show #mobile,
.ckregister .section3 .bodyframe .form.show #postcode,
.ckregister .section3 .bodyframe .form.show #state,
.ckregister .section3 .bodyframe .form.show #city {
	display: inline-block
}
.ckregister .section3 .bodyframe .form #country {
	display: none;
	width: 225px
}
.ckregister .section3 .bodyframe .form.show #country {
	display: inline-block
}
.ckregister .section3 .bodyframe .form button {
	margin-top: 10px;
	margin-bottom: 20px;
	font-size: 14px;
	color: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 0;
	background-color: rgb(247, 148, 29);
	width: 146px;
	height: 39px;
}
.ckregister .section3 .bodyframe .form .moreinformation {
	font-size: 15px;
	color: #fff;
	font-weight: 700;
	padding-top: 10px;
	display: block;
}
.ckregister .section3 .bodyframe .form .moreinformation:after {
	clear: both;
	content: '';
	display: block;
}
.ckregister .section3 .bodyframe .form .moreinformation input {
	float: left;
	width: auto
}
.ckregister .section3 .bodyframe .form .moreinformation p {
	margin: 0;
	width: 80%;
	float: left;
}
.ckregister .section3 .bodyframe .form .agree {
	font-size: 11px;
	color: #fff;
	padding-top: 10px;
	display: block;
}
.ckregister .section3 .bodyframe .form .agree:after {
	clear: both;
	content: '';
	display: block;
}
.ckregister .section3 .bodyframe .form .agree input {
	float: left;
	width: auto
}
.ckregister .section3 .bodyframe .form .agree p {
	margin: 0;
	width: 80%;
	float: left;
}
.ckregister .section3 .bodyframe .form .agree p a {
	color: #fff
}
@media screen and (max-width:985px)
{
	.ckregister .section2 .bodyframe .topframe {
	    width: 100%;
	    position: relative;
	    bottom: auto;
	}
	.ckregister .section2 .bodyframe .topframe:after {
		display: block;
		clear: both;
		content: '';
	}
	.ckregister .section2 .bodyframe .topframe .box3 {
		width: 33.3333333%;
		float: left;
	}
	.ckregister .section2 .bodyframe .topframe .box3:not(:first-child) {
		border: 3px solid #fff;
		border-right: none;	
		border-bottom: none;	
	}
	.ckregister .section2 .bodyframe .topframe .box3:first-child {
	    padding: 0;
	    position: relative;
	}
	.ckregister .section2 .bodyframe .topframe .box3 .box3frame {
	    position: relative;
	    width: 100%;
	    padding-bottom: 97.8%;
	}
	.ckregister .section2 .topframe .box3:nth-child(2) span {
	    padding-bottom: 97.8%;
	}
	.ckregister .section2 .topframe .box3:nth-child(3) span {
	    padding-bottom: 97.8%;
	}
	.ckregister .section2 .topframe .box3:nth-child(3) {
		display: block
	}
	.ckregister .section2 .bodyframe .topframe .box3 .box3frame2 {
		padding: 30px;
		position: absolute;
	}
	.ckregister .section2 .bodyframe .topframe .box3 .box3frame2 * {
		/*font-size: 20px;*/
	}
	.ckregister .section2 .bodyframe .desc {
	    padding: 55px;
	}
	.ckregister .section3 .bodyframe {
		max-width: 100%
	}
	.ckregister .section3 .bodyframe .form {
		height: auto;
	    padding: 55px;
	}
	.ckregister .section3 .bodyframe .form:before {
		left: 0;
		width: 100%
	}
	.ckregister .section3 .bodyframe .form .formframe {
		max-width: 578px
	}
}
@media screen and (max-width:710px)
{
	.ckregister .section2 .bodyframe .topframe .box3 .box3frame2 * {
		/*font-size: 15px;*/
	}
}
@media screen and (max-width:585px)
{
	.ckregister .section2 .bodyframe .topframe .box3 .box3frame2 {
		padding: 10px;
	}
	.ckregister .section2 .bodyframe .topframe .box3 .box3frame2 * {
		/*font-size: 13px;*/
	}
	.ckregister .section2 .bodyframe .desc {
	    padding: 25px;
	}
	.ckregister .section3 .bodyframe .form input[type="email"],
	.ckregister .section3 .bodyframe .form input[type="text"] {
		margin-left: 0 !important;
		width: 100% !important
	}
	.ckregister .section3 .bodyframe .form select {
		max-width: 100% !important;
		width: auto !important
	}
}
@media screen and (max-width:440px)
{
	.ckregister .section2 .bodyframe .topframe .box3:first-child {
		float: none;
		width: 100%;
		padding: 15px;
	}
	.ckregister .section2 .bodyframe .topframe .box3:first-child h2 {
		font-size: 25px;
		padding-bottom: 15px;
	}
	.ckregister .section2 .bodyframe .topframe .box3:first-child p {
		font-size: 23px;
	}
	.ckregister .section2 .bodyframe .topframe .box3 .box3frame {
		padding: 0;
	}
	.ckregister .section2 .bodyframe .topframe .box3 .box3frame2 {
		position: relative;
		padding: 0;
	}
	.ckregister .section2 .bodyframe .topframe .box3:not(:first-child) {
		width: 50%;
		border: 2px solid #fff;
	}
	.ckregister .section2 .bodyframe .topframe .box3:nth-child(2) {
		border-right: 1px solid #fff;
	}
	.ckregister .section2 .bodyframe .topframe .box3:nth-child(3) {
		border-left: 1px solid #fff;
	}
	.ckregister .section3 .bodyframe .form {
	    padding: 25px;
	}
}
@media screen and (max-width:420px) {
	.ckregister .section5 .sectionframe ul {
		min-height: auto;
		width: 100%
	}
	.ckregister .section5 .sectionframe li {
		font-size: 15px
	}
}

/* ! LOCATION */
#location .body .section1 {
	background-image: url('../upload/location-bg.jpg');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
#location .body .section1 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
#location .body .section1 .sectionframe .bgimgsize {
	width: 100%;
	padding-bottom: 56%
}
#location .body .section1 .bodytext {
	top: 50%;
	left: 0;
	width: 100%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	position: absolute
}
#location .body .section1 .bodytext h1 {
	text-align: center
}
.cklocation .section2 {
	padding: 0 20px 0;
	background: url(../image/grey-body-bg.jpg) center top
}
.cklocation .section2 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
.cklocation .section2 .sectionframe:after {
	clear: both;
	display: block;
	content: ''
}
.cklocation .section2 .sectionframe .para1 {
    padding-bottom: 80px
}
.cklocation .section2 .sectionframe .para2 {
	padding-top: 65px;
    padding-left: 35px
}
.cklocation .section2 .sectionframe .para2 h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 27px;
    color: #363636;
    font-weight: 700;
    margin: 0
}
.cklocation .section2 .sectionframe .para2 h2 span {
    padding: 0 4px;
    border: 1px solid #0e6d40;
    display: inline-block;
    color: #0e6d40;
}
.cklocation .section2 .sectionframe .para2 p {
    margin-bottom: 20px;
    font-size: 14px;
    color: #0e6d40
}
#locationmap {
	float: left;
	position: relative;
	width: 80%
}
#locationmap > * {
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	transition: opacity 0.5s;
}
#locationmap #base {
	background: url(../upload/location-location-base.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #akleh {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../upload/location-location-akleh.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #duke {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../upload/location-location-duke.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #shopping {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../upload/location-location-shopping.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #hotel {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../upload/location-location-hotel.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #edu {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../upload/location-location-edu.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #club {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../upload/location-location-club.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #hospital {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../upload/location-location-hospital.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #mrt {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../upload/location-location-mrt.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #embassy {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../upload/location-location-embassy.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #landmark {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../upload/location-location-landmark.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #jtr {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../upload/location-location-jtr.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #mrr2 {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../upload/location-location-mrr2.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #sign {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../upload/location-location-sign.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 60.92544987%;
}
#locationmap #waze {
    top: 6.751054852320675%; /* 32 / 474 */
    width: 7.969151670951156%; /* 62 / 778 */
    left: 49.3573264781491%; /* 384 / 778 */
    position: absolute;
}
#locationmap #waze span {
	display: block;
	background: url(../upload/location-location-waze.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 25.80645161%
}
#locationmap #googlemap {
    top: 6.172996%;
    width: 2.442159383033419%;
    left: 58.742931%;
    position: absolute
}
#locationmap #googlemap span {
	display: block;
	background: url(../upload/location-location-googlemap.png);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 100%
}
.cklocation .section2 .sectionframe ul {
	float: left;
	width: 20%;
	list-style: none;
	margin: 0 0 0 0;
	padding: 0 0 0 0
}
.cklocation .section2 .sectionframe ul li {
    font-size: 14px;
    color: #0e6d40;
	margin: 0 0 10px 0;
	padding: 0
}
.cklocation .section2 .sectionframe ul li:first-child {
	padding-top: 160px
}
.cklocation .section2 .sectionframe ul li span {
	cursor: pointer;
	padding-left: 25px;
	display: block;
	position: relative
}
.cklocation .section2 .sectionframe ul li.hw i {
    left: 2px;
    position: absolute;
    width: 25px;
    height: 25px;
    font-size: 16px
}
.cklocation .section2 .sectionframe ul li span:before {
	position: absolute;
	content: '';
	width: 25px;
	height: 25px;
}
.cklocation .section2 .sectionframe ul li span.mrt:before {
	left: 0;
	top: -5px;
	background: url(../upload/location-location-icon.png) no-repeat -268px top;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
}
.cklocation .section2 .sectionframe ul li span.embassy:before {
	left: 0;
	top: -5px;
	background: url(../upload/location-location-icon.png) no-repeat left top;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
}
.cklocation .section2 .sectionframe ul li span.shopping:before {
	left: 0;
	top: -5px;
	background: url(../upload/location-location-icon.png) no-repeat -38px top;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
}
.cklocation .section2 .sectionframe ul li span.hotel:before {
	left: 0;
	top: -5px;
	background: url(../upload/location-location-icon.png) no-repeat -216px top;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
}
.cklocation .section2 .sectionframe ul li span.edu:before {
	left: 0;
	top: -5px;
	background: url(../upload/location-location-icon.png) no-repeat -81px top;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
}
.cklocation .section2 .sectionframe ul li span.club:before {
	left: 0;
	top: -5px;
	background: url(../upload/location-location-icon.png) no-repeat -164px top;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
}
.cklocation .section2 .sectionframe ul li span.hospital:before {
	left: 0;
	top: -5px;
	background: url(../upload/location-location-icon.png) no-repeat -119px top;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
}
.cklocation .section3 {
	padding: 0 20px 0;
	background: url(../image/grey-body-bg.jpg) center top
}
.cklocation .section3 .sectionframe {
	padding-top: 80px;
	padding-bottom: 34px;
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
.cklocation .section3 .sectionframe:after {
	clear: both;
	display: block;
	content: ''
}
.cklocation .section3 .sectionframe p {
	max-width: 468px;
	padding-right: 20px;
	width: 50%;
	float: left
}
@media screen and (max-width: 820px) {
	#locationmap {
	    width: 100%
	}
	.cklocation .section2 .sectionframe ul {
    	margin-top: 30px;
	    width: 100%
	}
	.cklocation .section2 .sectionframe ul li,
	.cklocation .section2 .sectionframe ul li:first-child {
		line-height: 14px;
		padding-top: 0;
		height: 25px;
		float: left;
		width: 33.333333333%
	}
}
@media screen and (max-width: 600px) {
	.cklocation .section3 .sectionframe p {
		font-size: 80%
	}
	.cklocation .section2 .sectionframe ul li {
		height: 41px
	}
	#location .body .section1 .bodytext h1 span {
		margin-top: 0
	}
}
@media screen and (max-width: 420px) {
	#location .body .section1 .bodytext h1 {
    	line-height: 31px
	}
	#location .body .section1 .bodytext h1 span {
		margin-top: 0
	}
	.cklocation .section2 .sectionframe ul li,
	.cklocation .section2 .sectionframe ul li:first-child  {
		height: 15px;
		width: 50%
	}
	.cklocation .section2 .sectionframe ul li:nth-child(9),
	.cklocation .section2 .sectionframe ul li:nth-child(10)  {
		height: 42px
	}
	.cklocation .section3 .sectionframe p {
		padding-right: 0;
		width: 100%
	}
	.cklocation .section3 .sectionframe p br.remove {
		display: none
	}
}

/* ! MASTER PLAN */
#masterplan .body .section1 {
	background-image: url('../upload/masterplan-bg.jpg');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
#masterplan .body .section1 .sectionframe {
	margin: 0 auto;
	width: 100%;
	max-width: 1170px;	
	position: relative
}
#masterplan .body .section1 .sectionframe .bgimgsize {
	width: 100%;
	padding-bottom: 56%
}
#masterplan .body .section1 .bodytext {
	top: 50%;
	left: 0;
	width: 100%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	position: absolute
}
#masterplan .body .section1 .bodytext h1 {
	text-align: center
}
#masterplan .body .section1 .bodytext h1 span {
	margin: 20px auto 0;
	padding: 0 20px;
	max-width: 700px;
	line-height: normal;
    display: block
}
.ckmasterplan .section2 {
	padding: 0 20px;
	background: url(../image/grey-body-bg.jpg) center top
}
.ckmasterplan .section2 .sectionframe {
	padding-top: 81px;
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
.ckmasterplan .section2 .sectionframe:after {
	clear: both;
	display: block;
	content: ''
}
.ckmasterplan .section2 .sectionframe .para1 {
	float: left;
	margin-left: 10.94017094017094%; /* 128 / 1170 */
	width: 68.20512820512821%; /* 798 / 1170 */
}
.ckmasterplan .section2 .sectionframe .img1 {
	background-image: url(../upload/masterplan-img1.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 100%
}
.ckmasterplan .section2 .sectionframe .img1 span {
	display: block;
	width: 100%;
	padding-bottom: 59.89974937%
}
.ckmasterplan .section2 .sectionframe .para2 {
	margin-left:  0.8547008547008548%; /* 10 / 1170 */
	width: 20%; /* 798 / 1170 */
	float: left
}
.ckmasterplan .section2 .sectionframe .para2 span {
	display: block;
	width: 100%;
	padding-bottom: 99.57264957%;
}
.ckmasterplan .section2 .sectionframe .para2 .img2 {
	background-image: url(../upload/masterplan-img2.jpg);
	margin-bottom: 4.273504274%;
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%
}
.ckmasterplan .section2 .sectionframe .para2 .img3 {
	background-image: url(../upload/masterplan-img3.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%
}
.ckmasterplan .section2 .sectionframe #plan {
	margin-top: 83px;
	float: left;
	width: 100%
}
.ckmasterplan .section2 .sectionframe #plan .boxsize {
	background-image: url(../image/masterplan-map.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 48.37606838%
}
#masterplan .body .section3 {
	padding: 0 20px;
	background: #fff
}
#masterplan .body .section3 .sectionframe {
	padding-top: 81px;
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
#masterplan .body .section3 .sectionframe #floorplan {
	width: 100%;
	padding-top: 54px;
	padding-bottom: 54px
}
#masterplan .body .section3 .sectionframe #floorplan:after {
	display: block;
	clear: both;
	content: ''
}
#masterplan .body .section3 .sectionframe #type {
	position: relative;
	float: left;
	text-align: center;
	width: 20%; /* 298 / 1170 */
}
#masterplan .body .section3 .sectionframe #type:after {
	height: 110%;
	width: 1px;
	border-right: 1px solid #898989;
	opacity: 0.42;
	content: '';
	position: absolute;
	top: -10px;
	right: 0;
}
#masterplan .body .section3 .sectionframe #type h3 { 
	margin: 0;
	padding: 0;
	padding-bottom: 24px;
	font-weight: 800;
	font-family: 'Raleway', sans-serif;	
	font-size: 22px;
	color: #0e6d40
}
#masterplan .body .section3 .sectionframe #type ul {
	width: 141px;
	padding: 0;
	margin: 0 auto;
	list-style: none
}
#masterplan .body .section3 .sectionframe #type ul li {
	cursor: pointer;
	position: relative;
	line-height: 78px;
	color: #363636;
	padding: 0;
	margin: 0;
	font-size: 17px;
	font-family: 'Raleway', sans-serif;	
	font-weight: 600
}
#masterplan .body .section3 .sectionframe #type ul li:hover,
#masterplan .body .section3 .sectionframe #type ul li.selected {
	background-color: #898989
}
#masterplan .body .section3 .sectionframe #type ul li:after {
	border-bottom: 1px solid #898989;
	opacity: 0.42;
	content: '';
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0
}
#masterplan .body .section3 .sectionframe #type ul li:last-child:after {
	border: none
}
#masterplan .body .section3 .sectionframe #type ul li span {
	color: #0e6d40;
	font-weight: 800
}
#masterplan .body .section3 .sectionframe #map {
    padding-bottom: 42%;
	float: left;
	position: relative;
	width: 80%; /* 872 / 1170 */
}
#masterplan .body .section3 .sectionframe #map > div {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 1
}
#masterplan .body .section3 .sectionframe #map > div:after {
	clear: both;
	display: block;
	content: ''
}
#masterplan .body .section3 .sectionframe #map > div:first-child {
	display: block;
	opacity: 1
}
#masterplan .body .section3 .sectionframe #map > div .build {
	text-align: center;
	padding-left: 30px;
	float: left;
	width: 50%
}
#masterplan .body .section3 .sectionframe #map > div .build h5 {
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 26px;
	font-family: 'Raleway', sans-serif;	
	color: #363636
}
#masterplan .body .section3 .sectionframe #map > div .build h5 span {
	font-weight: 800;
	color: #0e6d40
}
#masterplan .body .section3 .sectionframe #map > div .build p {
	font-weight: 400;
	font-size: 20px;
	color: #0e6d40
}
#masterplan .body .section3 .sectionframe #map > div .build p span {
	display: block;
	font-weight: 800
}
#masterplan .body .section3 .sectionframe #map > div .build img {
	width: 90%
}
#masterplan .body .section3 .sectionframe #map > div .topview {
	right: 0;
	top: 0;
	height: 100%;
	position: absolute;
	width: 50%
}
#masterplan .body .section3 .sectionframe #map > div .topview img {
	cursor: pointer;
	max-width: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	width: 90%
}
@media screen and (max-width:960px) {
	#masterplan .body .section3 .sectionframe {
	    padding-top: 30px
 	}
}
@media screen and (max-width:875px) {
	#masterplan .body .section3 .sectionframe #type {
	    float: none;
	    width: 100%
	}
	#masterplan .body .section3 .sectionframe #floorplan {
	    width: 100%;
	    padding-top: 30px
	}
	#masterplan .body .section3 .sectionframe #type {
	    float: none;
	    width: 100%
	}
	#masterplan .body .section3 .sectionframe #type ul {
	    width: 95%
	}
	#masterplan .body .section3 .sectionframe #type ul:after {
		clear: both;
		display: block;
		content: ''
	}
	#masterplan .body .section3 .sectionframe #type ul li {
		width: 20%;
		float: left
	}
	#masterplan .body .section3 .sectionframe #type:after {
		display: none
	}
	#masterplan .body .section3 .sectionframe #map {
		margin: 30px auto 0;
	    float: none;
	    width: 95%;
		padding-bottom: 60%
	}
	#masterplan .body .section3 .sectionframe #type ul li:last-child:after {
	    border-bottom: 1px solid #898989
	}
}
@media screen and (max-width:790px) {
	#masterplan .body .section1 .bodytext h1 span {
		margin-top: 0
	}
}
@media screen and (max-width:665px) {
	#masterplan .body .section3 {
	    padding: 0 50px 0 20px
	}
}
@media screen and (max-width:600px) {
	#masterplan .body .section2 .sectionframe .para1 {
	    margin-left: 0;
	    width: 79.14529914529914%; /* 926 / 1170 */
	}
	#masterplan .body .section3 {
	    padding: 0 20px
	}
}
@media screen and (max-width:500px) {
	#masterplan .body .section3 .sectionframe #map {
	    width: 100%;
	    padding-bottom: 160%
	}
	#masterplan .body .section3 .sectionframe #map > div .build {
	    padding-left: 0;
	    float: none;
	    width: 100%
	}
	#masterplan .body .section3 .sectionframe #map > div .topview {
	    height: 100%;
	    position: relative;
	    width: 100%
	}
	#masterplan .body .section3 .sectionframe #map > div .build img {
	    width: 70%;
	}
	#masterplan .body .section3 .sectionframe #map > div .topview img {
	    position: relative;
	    left: auto;
	    top: auto;
	    margin: 20px auto;
	    display: block;
	    transform: translate(0, 0);
	    -webkit-transform: translate(0, 0)
	}
	#masterplan .body .section3 .sectionframe #map > div#typea .topview img {
	    width: 50%
	}
	#masterplan .body .section3 .sectionframe #map > div#typeb .topview img {
	    width: 70%
	}
	#masterplan .body .section3 .sectionframe #map > div#typec .topview img {
	    width: 70%
	}
	#masterplan .body .section3 .sectionframe #map > div#typed .topview img {
	    width: 80%
	}
	#masterplan .body .section3 .sectionframe #map > div#typee .topview img {
	    width: 80%
	}
}
@media screen and (max-width:420px) {
	#masterplan .body .section1 .bodytext h1 {
		line-height: normal
	}
	#masterplan .body .section2 .sectionframe .para1 {
		margin-bottom: 10px;
	    margin-left: 0;
	    width: 100%
	}
	#masterplan .body .section2 .sectionframe .para2 {
		margin-left: 0;
		width: 100%
	}
	#masterplan .body .section2 .sectionframe .para2 .img2 {
		float: left;
		margin-bottom: 0;
		margin-right: 1%;
		width: 49%
	}
	#masterplan .body .section2 .sectionframe .para2 .img3 {
		float: left;
		margin-left: 1%;
		width: 49%
	}
}
@media screen and (max-width:400px) {
	#masterplan .body .section3 .sectionframe #type ul li {
		font-size: 14px;
		padding-bottom: 20px;
		line-height: normal
	}
	#masterplan .body .section3 .sectionframe #map > div .build h5 {
		font-size: 16px
	}
	#masterplan .body .section3 .sectionframe #map > div .build p {
		font-size: 14px
	}
	#masterplan .body .section3 .sectionframe #type ul li span {
		display: block
	}
}

/* ! FACILITIES */
#facilities .body .section1 {
	background-image: url('../upload/facilities-bg.jpg');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
#facilities .body .section1 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
#facilities .body .section1 .sectionframe .bgimgsize {
	width: 100%;
	padding-bottom: 56%
}
#facilities .body .section1 .bodytext {
	top: 50%;
	left: 0;
	width: 100%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	position: absolute
}
#facilities .body .section1 .bodytext h1 {
	text-align: center
}
#facilities .body .section1 .bodytext h1 span {
	margin: 20px auto 0;
	padding: 0 20px;
	max-width: 700px;
	line-height: normal;
    display: block
}
.ckfacilities .section2 {
	/*padding: 112px 20px 0;*/
padding: 0px 20px 40px 20px;
	background: url(../image/grey-body-bg.jpg) center top
}
.ckfacilities .section2 .sectionframe {
	/*padding-left: 120px;*/
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
.ckfacilities .section2 .sectionframe:after {
	clear: both;
	display: block;
	content: ''
}
.ckfacilities .section2 .sectionframe .para1 {
	/*margin-bottom: 50px;*/
	float: right;
	width: 55.04761904761905%; /* 578 / 1050 */
}
.ckfacilities .section2 .sectionframe .para1a {
	position: relative;
	width: 100%;
	padding-top: 80%
}
.ckfacilities .section2 .sectionframe .para1a .span {
	position: absolute;
	top: 70%;
	left: 50%;
	width: 100%;
padding-left: 10px;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%)
}
.ckfacilities .section2 .sectionframe .para1a h2 {
	font-family: 'Raleway', sans-serif;
	font-size: 27px;
	color: #363636;
	font-weight: 700;
	margin: 0;
padding-bottom: 10px;
    text-transform: uppercase;
}
.ckfacilities .section2 .sectionframe .para1a h2 span {
	padding: 0 4px;
	border: 1px solid #0e3377;
	display: inline-block;
	color: #0e3377;
}
.ckfacilities .section2 .sectionframe .para1a p {
	margin-bottom: 0;
	font-size: 14px;
	color: #363636;
}
.ckfacilities .section2 .sectionframe .img1 {
	background-image: url('../images/moduleimg/inner-img-2.jpg');
	border-top: 4px solid #fff;
	border-bottom: 4px solid #fff;
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%
}
.ckfacilities .section2 .sectionframe .img13 {
	background-image: url('../images/moduleimg/inner-img13-1.jpg');
	border-top: 4px solid #fff;
	border-bottom: 4px solid #fff;
	-webkit-background-size: cover;
	background-size: cover;
    background-position: center;
	width: 100%
}
.ckfacilities .section2 .sectionframe .img1 span {
	display: block;
	width: 100%;
	padding-bottom: 50%
}
.ckfacilities .section2 .sectionframe .img13 span {
	display: block;
	width: 100%;
	padding-bottom: 18em;
}
.ckfacilities .section2 .sectionframe .img2 {
	background-image: url('../images/moduleimg/inner-img-1.jpg');
	/*margin-bottom: 50px;*/
	border: 4px solid #fff;
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 44.952380952380955%; /* 472 / 1050 */
}
.ckfacilities .section2 .sectionframe .img2 span {
	display: block;
	width: 100%;
	padding-bottom: 112%
}

.ckfacilities .section2 .sectionframe .img17 {
	background-image: url('../images/moduleimg/inner-img-1.jpg');
	/*margin-bottom: 50px;*/
	border: 4px solid #fff;
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 44.952380952380955%; /* 472 / 1050 */
}
.ckfacilities .section2 .sectionframe .img17 span {
	display: block;
	width: 100%;
	padding-bottom: 118%
}

.ckfacilities .section2 .sectionframe .img3 {
	background-image: url('../images/moduleimg/inner-img-1_2.jpg');
	/*margin-bottom: 50px;*/
	border: 4px solid #fff;
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 44.952380952380955%; /* 472 / 1050 */
}
.ckfacilities .section2 .sectionframe .img3Logistics {
	background-image: url('../images/moduleimg/inner-img-12_1.jpg');
	/*margin-bottom: 50px;*/
	border: 4px solid #fff;
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 44.952380952380955%; /* 472 / 1050 */
}
.ckfacilities .section2 .sectionframe .img3Golf {
	background-image: url('../images/moduleimg/inner-img-3Golf.jpg');
	/*margin-bottom: 50px;*/
	border: 4px solid #fff;
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 44.952380952380955%; /* 472 / 1050 */
}
.ckfacilities .section2 .sectionframe .img3Leisure {
	background-image: url('../images/moduleimg/inner-img-3Leisure.jpg');
	/*margin-bottom: 50px;*/
	border: 4px solid #fff;
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 44.952380952380955%; /* 472 / 1050 */
	
}
.ckfacilities .section2 .sectionframe .img3Wedding {
	background-image: url('../images/moduleimg/inner-img-3Wedding.jpg');
	/*margin-bottom: 50px;*/
	border: 4px solid #fff;
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 44.952380952380955%; /* 472 / 1050 */
	
}

.ckfacilities .section2 .sectionframe .img3Holiday{
	background-image: url('../images/moduleimg/inner-img-3Holiday.jpg');
	/*margin-bottom: 50px;*/
	border: 4px solid #fff;
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 44.952380952380955%; /* 472 / 1050 */
	
}

.ckfacilities .section2 .sectionframe .img3Contact{
    background-image: url('../images/moduleimg/inner-img-3Contact.jpg');
	/*margin-bottom: 50px;*/
	border: 4px solid #fff;
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 44.952380952380955%; /* 472 / 1050 */
	margin-bottom: 50px;
}


.ckfacilities .section2 .sectionframe .img3 span,
.ckfacilities .section2 .sectionframe .img18 span,
.ckfacilities .section2 .sectionframe .img3Logistics span,
.ckfacilities .section2 .sectionframe .img3Golf span,
.ckfacilities .section2 .sectionframe .img3Leisure span,
.ckfacilities .section2 .sectionframe .img3Wedding span,
.ckfacilities .section2 .sectionframe .img3Holiday span,
.ckfacilities .section2 .sectionframe .img3Contact span
{
	display: block;
	width: 100%;
	padding-bottom: 112%
}

.ckfacilities .section2 .sectionframe .img18 {
	background-image: url('../images/moduleimg/inner-img-18.jpg');
	/*margin-bottom: 50px;*/
	border: 4px solid #fff;
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 44.952380952380955%; /* 472 / 1050 */
}


.ckfacilities .section2 .sectionframe .img12 {
	background-image: url('../images/moduleimg/inner-img-12_1.jpg');
	/*margin-bottom: 50px;*/
	border: 4px solid #fff;
	-webkit-background-size: cover;
	background-position: center;
	background-size: cover;
	float: left;
	width: 44.952380952380955%; /* 472 / 1050 */
}
.ckfacilities .section2 .sectionframe .img12 span {
	display: block;
	width: 100%;
	padding-bottom: 46em;
}

.ckfacilities .section3 {
	padding: 0 20px;
	background: url(../image/grey-body-bg.jpg) center top
}
.ckfacilities .section3 .sectionframe {
	/*padding-left: 120px;*/
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
.ckfacilities .section3 .sectionframe:after {
	clear: both;
	display: block;
	content: ''
}
.ckfacilities .section3 .sectionframe .img3 {
	padding-right: 9px;
	position: relative;
	float: left;
	width: 32.19047619047619%; /* 338 / 1050 */
}
.ckfacilities .section3 .sectionframe .img3 .span {
	background-image: url('../images/moduleimg/inner-img-4.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 105.167%
}
.ckfacilities .section3 .sectionframe .img3 .span .para2 {
	top: 50%;
	left: 50%;
	width: 70%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	position: absolute;
	color: #fff
}
.ckfacilities .section3 .sectionframe .img3 .span .para2 * {
	margin: 0;
	padding: 0
}
.ckfacilities .section3 .sectionframe .img3 .span .para2 h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 27px;
    font-weight: 700
}
.ckfacilities .section3 .sectionframe .img3 .span .para2 span {
    padding: 0 4px;
    border: 1px solid #fff;
    display: inline-block;
    color: #fff;
	margin-bottom: 20px
}
.ckfacilities .section3 .sectionframe .img3 .span .para2 p {
	font-size: 14px;
	font-weight: 700
}
.ckfacilities .section3 .sectionframe .img4 {
	background-image: url('../images/moduleimg/inner-img-3.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 67.80952380952381%; /* 712 / 1050 */
}
.ckfacilities .section3 .sectionframe .img4 span {
	display: block;
	width: 100%;
	padding-bottom: 48.59%
}
.ckfacilities .section4 {
	padding: 0px 20px 0;
	background: url(../image/grey-body-bg.jpg) center top;
margin-bottom: 50px;
}
.ckfacilities .section4 .sectionframe {
	/*padding-left: 120px;*/
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
.ckfacilities .section4 .sectionframe:after {
	clear: both;
	display: block;
	content: ''
}
.ckfacilities .section4 .sectionframe .img5 {
    padding-right: 4px;
	float: left;
	width: 58%; /* 619 / 1050 */
border-left: 4px solid #fff;
}
.ckfacilities .section4 .sectionframe .img15 {
    padding-right: 4px;
	float: left;
	width: 41.04761904761905%; /* 619 / 1050 */
border-left: 4px solid #fff;
}
.ckfacilities .section4 .sectionframe .img14,
.ckfacilities .section4 .sectionframe .img14About,
.ckfacilities .section4 .sectionframe .img14Logistics,
.ckfacilities .section4 .sectionframe .img14Golf,
.ckfacilities .section4 .sectionframe .img14Leisure,
.ckfacilities .section4 .sectionframe .img14Wedding,
.ckfacilities .section4 .sectionframe .img14Holiday{
    padding-right: 4px;
	float: left;
	width: 60%; /* 619 / 1050 */
border-left: 4px solid #fff;
}
.ckfacilities .section4 .sectionframe .img11,
.ckfacilities .section4 .sectionframe .img11About,
.ckfacilities .section4 .sectionframe .img11Golf,
.ckfacilities .section4 .sectionframe .img11Leisure,
.ckfacilities .section4 .sectionframe .img11Wedding,
.ckfacilities .section4 .sectionframe .img11Holiday,
.ckfacilities .section4 .sectionframe .img11Logistics{
    padding-right: 0px;
	float: right;
	width: 40%; /* 619 / 1050 */
}
.ckfacilities .section4 .sectionframe .img14 span {
	background-image: url('../images/moduleimg/inner-img-5.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom: 56.721%
}
.ckfacilities .section4 .sectionframe .img14About span {
	background-image: url('../images/moduleimg/inner-img-14About.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom: 56.721%
}
.ckfacilities .section4 .sectionframe .img14Logistics span {
	background-image: url('../images/moduleimg/inner-img13-1.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom: 56.721%
}
.ckfacilities .section4 .sectionframe .img14Golf span {
	background-image: url('../images/moduleimg/inner-img-14Golf.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom: 56.721%
}

.ckfacilities .section4 .sectionframe .img14Leisure span {
	background-image: url('../images/moduleimg/inner-img-14Leisure.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom: 56.721%
}

.ckfacilities .section4 .sectionframe .img14Wedding span {
	background-image: url('../images/moduleimg/inner-img-14Wedding.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	/*padding-bottom: 44%*/
	padding-bottom: 44vh;
    background-repeat: no-repeat;
}

.ckfacilities .section4 .sectionframe .img14Holiday span {
	background-image: url('../images/moduleimg/inner-img-14Holiday.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom: 56.721%
}


.ckfacilities .section4 .sectionframe .img11 span {
	background-image: url('../images/moduleimg/inner-img-2.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom: 84.3%;
}

.ckfacilities .section4 .sectionframe .img11About span {
	background-image: url('../images/moduleimg/inner-img-11About.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom: 84.3%;
}
.ckfacilities .section4 .sectionframe .img11Golf span {
	background-image: url('../images/moduleimg/inner-img-11Golf.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom: 84.3%;
}

.ckfacilities .section4 .sectionframe .img11Leisure span {
	background-image: url('../images/moduleimg/inner-img-11Leisure.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom: 84.3%;
}

.ckfacilities .section4 .sectionframe .img11Wedding span {
	background-image: url('../images/moduleimg/inner-img-11Wedding.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	/*padding-bottom: 65%;*/
	padding-bottom: 44vh;
    background-position: -30px 0px;
	background-repeat: no-repeat;
}

.ckfacilities .section4 .sectionframe .img11Holiday span {
	background-image: url('../images/moduleimg/inner-img-11Holiday.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom: 84.3%;
	background-position: center;
}

.ckfacilities .section4 .sectionframe .img11Logistics span {
	background-image: url('../images/moduleimg/inner-img-11Logistics.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom: 84.3%;
	background-position: center;
}


.ckfacilities .section4 .sectionframe .img5 .span1 {
	background-image: url('../images/moduleimg/inner-img-5_2.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom: 57.721%
}
.ckfacilities .section4 .sectionframe .img15 .span1 {
	background-image: url('../images/moduleimg/inner-img-7.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	display: block;
	width: 100%;
	padding-bottom:77.278%
}
.ckfacilities .section4 .sectionframe .img6 {
	background-image: url('../images/moduleimg/inner-img-6.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 41.04761904761905%; /* 431 / 1050 */
}
.ckfacilities .section4 .sectionframe .img6 span {
	display: block;
	width: 100%;
	/*padding-bottom: 80.278%*/
}
.ckfacilities .section4 .sectionframe .img10 {
	background-image: url('../images/moduleimg/inner-img-6.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 41.04761904761905%; /* 431 / 1050 */
}
.ckfacilities .section4 .sectionframe .img10 span {
	display: block;
	width: 100%;
	padding-bottom: 80.278%
}

.ckfacilities .section4 .sectionframe .img16 {
	background-image: url('../images/moduleimg/inner-img-8.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	float: left;
	width: 58% /* 431 / 1050 */
}
.ckfacilities .section4 .sectionframe .img16 span {
	display: block;
	width: 100%;
	padding-bottom:  53.721%
}
/* ! -- section 5 */
.ckfacilities .section5 {
	padding: 20px 0 0;
	background: url(../image/grey-body-bg.jpg) center top
}
.ckfacilities .section5 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
.ckfacilities .section5 .sectionframe .para3 {
	/*padding: 0 20px 60px;
	max-width: 930px;*/
        padding-bottom:20px;         
	margin: 0 auto;
}
.ckfacilities .section5 .sectionframe .para3 h2 {
	font-family: 'Raleway', sans-serif;
	font-size: 27px;
	color: #363636;
	font-weight: 700;
	margin: 0
}
.ckfacilities .section5 .sectionframe .para3 h2 span {
	padding-left: 4px;
        padding-right: 4px;
	border: 1px solid #0e3377;
	display: inline-block;
	color: #0e3377;
        margin-right: 5px;
}
.ckfacilities .section5 .sectionframe .para3 p {
	margin-bottom: 0;
	font-size: 14px;
	color: #0e6d40
}
/* ! --- facilities map */
#facilities .body .section6 {
	padding: 0;
	background: url(../image/grey-body-bg.jpg) center top
}
#facilities .body .section6 .sectionframe {
	margin: 0 auto;
	padding-bottom: 50px;
	max-width: 1170px;	
	position: relative
}
#facilities .body .section6 .sectionframe:after {
	display: block;
	content: '';
	clear: both
}
#facilities .body .section6 .sectionframe .facilitiesmap {
	position: relative;
	width: 100%
}
#facilities .body .section6 .sectionframe .facilitiesmap a:not(:first-child) {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out
}
#facilities .body .section6 .sectionframe .facilitiesmap a.hover,
#facilities .body .section6 .sectionframe .facilitiesmap a.all {
	opacity: 1
}
#facilities .body .section6 .sectionframe .facilitiesmap a.hover {
    -webkit-animation: blink 1s infinite; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: blink 1s infinite; /* Firefox < 16 */
        -ms-animation: blink 1s infinite; /* Internet Explorer */
         -o-animation: blink 1s infinite; /* Opera < 12.1 */
            animation: blink 1s infinite;
}
#facilities .body .section6 .sectionframe .facilitiesmap img {
	width: 100%
}
#facilities .body .section6 .sectionframe .para4 {
	padding: 0 20px;
	margin: 0 auto;
	width: 100%;
	max-width: 950px
}
#facilities .body .section6 .sectionframe ul {
	width: 25%;
	float: left
}
#facilities .body .section6 .sectionframe li {
	list-style: none;
	cursor: pointer;
	font-size: 14px;
	color: #0e6d40
}
#facilities .body .section6 .sectionframe ul li:first-child {
	color: #534741;
	font-weight: 700
}
#facilities .body .section6 .sectionframe ul:nth-child(2) li:first-child {
	color: #f26522
}
#facilities .body .section6 .sectionframe ul:nth-child(3) li:first-child {
	color: #92278f
}
#facilities .body .section6 .sectionframe ul:nth-child(4) li:first-child {
	color: #39b54a
}

@media screen and (max-width:985px) {
	.ckfacilities .section3 .sectionframe {
		padding-left: 394px
	}
	.ckfacilities .section3 .sectionframe .img3 {
		width: 265px;
		height: 269px;
		position: absolute;
		top: 0;
		left: 120px
	}
	.ckfacilities .section3 .sectionframe .img4 {
		background-position: center center;
	    float: none;
	    width: 100%
	}
	.ckfacilities .section3 .sectionframe .img4 span {
		height: 269px;
		padding-bottom: 0
	}
}
@media screen and (max-width:1024px) {
    header #nav {
		padding-left: 0;
		padding-right: 0;
	}
	header #logo {
		position: absolute;
		top: 0;
		right: 0;
	}
	header .menu_box {
		display: none;
	}
	#header .bar {
		display: none
	}
	header .mobile_menu {
    	width: 100%;
		display: block;
	}
	header #logo {
	    padding-top: 0px;
	    padding-right: 13px;
	    width: 200px;
	    height: 60px;
	    padding-left: 13px;
	    /*background: #fff*/
	}
	header #swing {
		height: 60px
	}
  .mobilePara{
        padding: 10px;
    }
	.ckfacilities .section2 {
		padding-top: 50px !important;
	}
	.ckfacilities .section2 .sectionframe {
		padding-left: 0
	}
	.ckfacilities .section2 .sectionframe .para1 {
		max-width: 600px;
		margin: 0 auto;
	    float: none;
	    width: 100%
	}
	.ckfacilities .section2 .sectionframe .para1a {
		padding-top: 40% !important;
		padding-bottom: 15px !important;
		margin-bottom: 0 !important;
	}
	.ckfacilities .section2 .sectionframe .img3,
	.ckfacilities .section2 .sectionframe .img18,
	.ckfacilities .section2 .sectionframe .img3Logistics,
	.ckfacilities .section2 .sectionframe .img3Golf,
	.ckfacilities .section2 .sectionframe .img3Leisure,
	.ckfacilities .section2 .sectionframe .img3Wedding,
	.ckfacilities .section2 .sectionframe .img3Holiday,
	.ckfacilities .section2 .sectionframe .img3Contact{
	    border: 0px !important;
	    margin-bottom: 25px !important;
        margin-top: 10px !important;
	}
	.ckfacilities .section2 .sectionframe .para1a .span {
		left: auto;
		top: auto;
		position: relative;
		transform: none;
		-webkit-transform: none;
		width: 100%
	}
	.ckfacilities .section2 .sectionframe .img2 {
		width: 100%;
		max-width: 400px;
		float: none;
		margin: 0 auto
	}
	.ckfacilities .section2 .sectionframe .img17 {
		width: 100%;
		max-width: 400px;
		float: none;
		margin: 0 auto
	}
.ckfacilities .section2 .sectionframe .img3,
.ckfacilities .section2 .sectionframe .img18,
.ckfacilities .section2 .sectionframe .img3Logistics,
.ckfacilities .section2 .sectionframe .img3Golf,
.ckfacilities .section2 .sectionframe .img3Leisure,
.ckfacilities .section2 .sectionframe .img3Wedding,
.ckfacilities .section2 .sectionframe .img3Holiday,
.ckfacilities .section2 .sectionframe .img3Contact{
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto
	}
	.ckfacilities .section2 .sectionframe .img12 {
		width: 100%;
		max-width: 600px;
		float: none;
	    margin: 0 auto !important;
        border: 0;
        margin-bottom: 9px !important;
	}
	
	.ckfacilities .section2 .sectionframe .img12 span {
    	padding-bottom: 25em;
    }
	
	.ckfacilities .section3 .sectionframe {
		padding-top: 15px;
		padding-left: 0
	}
	.ckfacilities .section3 .sectionframe .img3 {
		padding-right: 0;
		float: none;
		position: relative;
		height: auto;
		left: 0;
		max-width: 300px;
		margin: 0 auto 15px;
	    width: 100%
	}
	.ckfacilities .section3 .sectionframe .img4 {
		margin: 0 auto;
		max-width: 600px
	}
	.ckfacilities .section4 .sectionframe {
		padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 0
	}
	.ckfacilities .section4 .sectionframe .img5 {
		padding-right: 0;
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto 10px;
		border-left: 0px solid #fff;
	}
	.ckfacilities .section4 .sectionframe .img15 {
		padding-right: 0;
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto 10px;
		border-left: 0px solid #fff;
	}
	.ckfacilities .section4 .sectionframe .img14,
	.ckfacilities .section4 .sectionframe .img14About,
	.ckfacilities .section4 .sectionframe .img14Logistics,
	.ckfacilities .section4 .sectionframe .img14Golf,
	.ckfacilities .section4 .sectionframe .img14Leisure,
	.ckfacilities .section4 .sectionframe .img14Wedding,
	.ckfacilities .section4 .sectionframe .img14Holiday{
		padding-right: 0;
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto 10px;
		border-left: 0px solid #fff;
	}
	.ckfacilities .section4 .sectionframe .img11,
	.ckfacilities .section4 .sectionframe .img11About,
	.ckfacilities .section4 .sectionframe .img11Golf,
	.ckfacilities .section4 .sectionframe .img11Leisure,
	.ckfacilities .section4 .sectionframe .img11Wedding,
	.ckfacilities .section4 .sectionframe .img11Holiday,
	.ckfacilities .section4 .sectionframe .img11Logistics{
		padding-right: 0;
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto 15px
	}
	.ckfacilities .section4 .sectionframe .img6 {
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto
	}
.ckfacilities .section4 .sectionframe .img10 {
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto
	}
	.ckfacilities .section4 .sectionframe .img16 {
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto
	}
}
@media screen and (max-width:835px) {
    .mobilePara{
        padding: 10px;
    }
	.ckfacilities .section2 {
		padding-top: 50px !important;
	}
	.ckfacilities .section2 .sectionframe {
		padding-left: 0
	}
	.ckfacilities .section2 .sectionframe .para1 {
		max-width: 600px;
		margin: 0 auto;
	    float: none;
	    width: 100%
	}
	.ckfacilities .section2 .sectionframe .para1a {
		padding-top: 0 !important;
		padding-bottom: 15px !important;
		margin-bottom: 0 !important;
	}
	.ckfacilities .section2 .sectionframe .img3,
	.ckfacilities .section2 .sectionframe .img18,
	.ckfacilities .section2 .sectionframe .img3Logistics,
	.ckfacilities .section2 .sectionframe .img3Golf,
	.ckfacilities .section2 .sectionframe .img3Leisure,
	.ckfacilities .section2 .sectionframe .img3Wedding,
	.ckfacilities .section2 .sectionframe .img3Holiday,
	.ckfacilities .section2 .sectionframe .img3Contact{
	    border: 0px !important;
	    margin-bottom: 25px !important;
        margin-top: 10px !important;
	}
	.ckfacilities .section2 .sectionframe .para1a .span {
		left: auto;
		top: auto;
		position: relative;
		transform: none;
		-webkit-transform: none;
		width: 100%
	}
	.ckfacilities .section2 .sectionframe .img2 {
		width: 100%;
		max-width: 400px;
		float: none;
		margin: 0 auto
	}
	.ckfacilities .section2 .sectionframe .img17 {
		width: 100%;
		max-width: 400px;
		float: none;
		margin: 0 auto
	}
.ckfacilities .section2 .sectionframe .img3,
.ckfacilities .section2 .sectionframe .img18,
.ckfacilities .section2 .sectionframe .img3Logistics,
.ckfacilities .section2 .sectionframe .img3Golf,
.ckfacilities .section2 .sectionframe .img3Leisure,
.ckfacilities .section2 .sectionframe .img3Wedding,
.ckfacilities .section2 .sectionframe .img3Holiday,
.ckfacilities .section2 .sectionframe .img3Contact{
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto
	}
	.ckfacilities .section2 .sectionframe .img12 {
		width: 100%;
		max-width: 600px;
		float: none;
	    margin: 0 auto !important;
        border: 0;
        margin-bottom: 9px !important;
	}
	
	.ckfacilities .section2 .sectionframe .img12 span {
    	padding-bottom: 25em;
    }
	
	.ckfacilities .section3 .sectionframe {
		padding-top: 15px;
		padding-left: 0
	}
	.ckfacilities .section3 .sectionframe .img3 {
		padding-right: 0;
		float: none;
		position: relative;
		height: auto;
		left: 0;
		max-width: 300px;
		margin: 0 auto 15px;
	    width: 100%
	}
	.ckfacilities .section3 .sectionframe .img4 {
		margin: 0 auto;
		max-width: 600px
	}
	.ckfacilities .section4 .sectionframe {
		padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 0
	}
	.ckfacilities .section4 .sectionframe .img5 {
		padding-right: 0;
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto 10px;
		border-left: 0px solid #fff;
	}
	.ckfacilities .section4 .sectionframe .img15 {
		padding-right: 0;
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto 10px;
		border-left: 0px solid #fff;
	}
	.ckfacilities .section4 .sectionframe .img14,
	.ckfacilities .section4 .sectionframe .img14About,
	.ckfacilities .section4 .sectionframe .img14Logistics,
	.ckfacilities .section4 .sectionframe .img14Golf,
	.ckfacilities .section4 .sectionframe .img14Leisure,
	.ckfacilities .section4 .sectionframe .img14Wedding,
	.ckfacilities .section4 .sectionframe .img14Holiday{
		padding-right: 0;
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto 10px;
		border-left: 0px solid #fff;
	}
	.ckfacilities .section4 .sectionframe .img11,
	.ckfacilities .section4 .sectionframe .img11About,
	.ckfacilities .section4 .sectionframe .img11Golf,
	.ckfacilities .section4 .sectionframe .img11Leisure,
	.ckfacilities .section4 .sectionframe .img11Wedding,
	.ckfacilities .section4 .sectionframe .img11Holiday,
	.ckfacilities .section4 .sectionframe .img11Logistics{
		padding-right: 0;
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto 15px
	}
	.ckfacilities .section4 .sectionframe .img6 {
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto
	}
.ckfacilities .section4 .sectionframe .img10 {
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto
	}
	.ckfacilities .section4 .sectionframe .img16 {
		width: 100%;
		max-width: 600px;
		float: none;
		margin: 0 auto
	}

}
@media screen and (max-width:790px) {
	#facilities .body .section1 .bodytext h1 span {
		margin-top: 0
	}
	.ckfacilities .section5 .sectionframe ul {
		min-height: 155px;
		width: 50%
	}
}
@media screen and (max-width:420px) {
	.ckfacilities .section5 .sectionframe ul {
		min-height: auto;
		width: 100%
	}
	.ckfacilities .section5 .sectionframe li {
		font-size: 15px
	}
}

/* ! CONCEPT */
#concept .body .section1 {
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover
}
#concept .body .section1 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
#concept .body .section1 .sectionframe .bgimgsize {
	width: 100%;
	padding-bottom: 56%
}
#concept .body .section1 .bodytext {
	top: 50%;
	left: 0;
	width: 100%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	position: absolute
}
#concept .body .section1 .bodytext h1 {
	text-align: center
}
.ckconcept .section2 {
	padding: 0 20px
}
.ckconcept .section2 .sectionframe {
	position: relative;
	top: 30px;
	margin: 0 auto;
	max-width: 1170px
}
#concept .ckconcept .section2 .sectionframe {
	top: -70px
}
.ckconcept .section2 .sectionframe .para1 {
	padding-left: 120px;
	margin-right: 40%
}
.ckconcept .section2 .sectionframe .para1 p:first-child {
	margin: 0;
	padding-right: 20px;
	padding-bottom: 100px;
	font-size: 12px;
	text-align: center
}
#concept .ckconcept .section2 .sectionframe .para1 p:first-child {
	color: #fff
}
.ckconcept .section2 .sectionframe .para2 {
	padding-left: 35px
}
.ckconcept .section2 .sectionframe .para2 h2 {
	font-family: 'Raleway', sans-serif;
	font-size: 27px;
	color: #363636;
	font-weight: 700;
	margin: 0
}
.ckconcept .section2 .sectionframe .para2 h2 span {
	padding: 0 4px;
	border: 1px solid #0e6d40;
	display: inline-block;
	color: #0e6d40
}
.ckconcept .section2 .sectionframe .para2 p {
	padding-right: 10px;
	margin-bottom: 50px;
	max-width: 500px;
	font-size: 14px;
	color: #0e6d40
}
.ckconcept .section2 .sectionframe .img1 {
	position: absolute;
	bottom: 0;
	right: 0;
	background-image: url('../upload/concept-img-1.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	border: 4px solid #fff;
	width: 40%
}
.ckconcept .section2 .sectionframe .img1 span {
	display: block;
	width: 100%;
	padding-bottom: 127%;
}
.ckconcept .section2 .sectionframe .img2 {
	background-image: url('../upload/concept-img-2.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	border-bottom: 4px solid #fff
}
.ckconcept .section2 .sectionframe .img2 span {
	display: block;
	width: 100%;
	padding-bottom: 40%;
}
.ckconcept .section3 {
	padding: 50px 20px;
	background: url(../image/grey-body-bg.jpg) center top
}
.ckconcept .section3 .sectionframe {
	padding-left: 120px;
	position: relative;
	margin: 0 auto;
	max-width: 1170px
}
.ckconcept .section3 .sectionframe:after {
	clear: both;
	display: block;
	content: ''
}
.ckconcept .section3 .sectionframe .img1 {
	background-image: url('../upload/concept-img-3.jpg');
	background-position: center center;
	float: left;
	width: 31.42857142857143%; /* 330 / 1050 */
	-webkit-background-size: cover;
	background-size: cover;
	border-right: 4px solid #fff;
	position: relative
}
.ckconcept .section3 .sectionframe .img1 .span {
	width: 100%;
	padding-bottom: 201%
}
.ckconcept .section3 .sectionframe .img1 .span .para2 {
	width: 63.80368098159509%; /* 208 / 326 */
	left: 18.098159509202455%; /* 59 / 326 */
	position: absolute;
	top: 100px;
	color: #fff
}
.ckconcept .section3 .sectionframe .img1 .span .para2 * {
	margin: 0;
	padding: 0
}
.ckconcept .section3 .sectionframe .img1 .span .para2 span {
    padding: 0 4px;
    border: 1px solid #fff;
    display: inline-block;
    color: #fff;
	margin-bottom: 20px
}
.ckconcept .section3 .sectionframe .img1 .span .para2 p {
	font-size: 14px;
	font-weight: 700
}
.ckconcept .section3 .sectionframe .para1 {
	height: 100%;
	float: left;
	width: 68.57142857142857%; /* 720 / 1050 */
}
.ckconcept .section3 .sectionframe .para1 > div {
	float: left;
}
.ckconcept .section3 .sectionframe .para1 .img2 {
	border-bottom: 4px solid #fff;
	background-image: url('../upload/concept-img-4.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	width: 45.83333333333333%; /* 330 / 720 */
	float: none
}
.ckconcept .section3 .sectionframe .para1 .img2 span {
	width: 100%;
	display: block;
	padding-bottom: 100%;
}
.ckconcept .section3 .sectionframe .para1 .img3 {
	background-image: url('../upload/concept-img-5.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	width: 45.83333333333333%; /* 330 / 720 */
}
.ckconcept .section3 .sectionframe .para1 .img3 span {
	width: 100%;
	display: block;
	padding-bottom: 97.333%;
}
.ckconcept .section3 .sectionframe .para1 .img4 {
	background-image: url('../upload/concept-img-6.jpg');
	border-left: 4px solid #fff;
	-webkit-background-size: cover;
	background-size: cover;
	width: 54.16666666666666%; /* 390 / 720 */
}
.ckconcept .section3 .sectionframe .para1 .img4 span {
	width: 100%;
	display: block;
	padding-bottom: 82.9999%;
}
.ckconcept .section4 {
	padding: 0 20px 50px
}
.ckconcept .section4 .sectionframe {
	/*padding-left: 120px;*/
	position: relative;
	margin: 0 auto;
	max-width: 1170px
}
.ckconcept .section4 .sectionframe:after {
	clear: both;
	display: block;
	content: ''
}
.ckconcept .section4 .sectionframe > * {
	/*color: #0e6d40;
	font-size: 13px;*/
	float: left
}
.ckconcept .section4 .sectionframe .para1 {
	padding: 55px 60px 20px 0px;
	width: 41.619047619047617%; /* 437 / 1050 */
}
.ckconcept .section4 .sectionframe .img1 {
	
	margin-bottom: 32px;
	-webkit-background-size: cover;
	background-size: cover;
	width: 58.38095238095238%; /* 613 / 1050 */
}

.img-for-page4{
    background-image: url('../images/moduleimg/inner-img-7.jpg')
}
.img-for-page8{
    background-image: url('../images/moduleimg/inner-img-page8.jpg')
}

.ckconcept .section4 .sectionframe .img1 span {
	width: 100%;
	display: block;
	padding-bottom: 56%;
}
.ckconcept .section4 .sectionframe .img2 {
	background-image: url('../images/moduleimg/inner-img-8.jpg');
	-webkit-background-size: cover;
	background-size: cover;
	width: 58.38095238095238%; /* 613 / 1050 */
}
.ckconcept .section4 .sectionframe .img2 span {
	width: 100%;
	display: block;
	padding-bottom: 56%;
}
.ckconcept .section4 .sectionframe .para2 {
	/*padding: 55px 0px 20px 45px;*/
	padding: 0px 0px 0px 45px;
	width: 41.619047619047617%; /* 437 / 1050 */
}
.ckconcept .section4 .sectionframe .para1 h2 {
	font-family: 'Raleway', sans-serif;
	font-size: 27px;
	color: #363636;
	font-weight: 700;
	margin: 0
}
.ckconcept .section4 .sectionframe .para1 h2 span {
	padding: 0 4px;
	border: 1px solid #0e6d40;
	display: inline-block;
	color: #0e6d40
}
.ckconcept .section4 .sectionframe .para2 h2 {
	font-family: 'Raleway', sans-serif;
	font-size: 27px;
	color: #363636;
	font-weight: 700;
	margin: 0
}
.ckconcept .section4 .sectionframe .para2 h2 span {
	padding: 0 4px;
	border: 1px solid #0e6d40;
	display: inline-block;
	color: #0e6d40
}
@media screen and (max-width:1042px) {
	.ckconcept .section2 .sectionframe .para1 p:first-child {
	    padding-bottom: 50px
	}
}
@media screen and (max-width:920px) {
	.ckconcept .section2 .sectionframe {
		top: -40px
	}
	.ckconcept .section2 .sectionframe .para1 p:first-child {
	    padding-bottom: 105px
	}
	.ckconcept .section2 .sectionframe .para1 {
	    padding-left: 0;
	    margin-right: 0
	}
	.ckconcept .section2 .sectionframe .img2 {
		margin-right: 40%
	}
	.ckconcept .section2 .sectionframe .para2 p {
		margin-bottom: 20px;
		margin-right: 42%		
	}
}
@media screen and (max-width:865px) {
	.ckconcept .section4 .sectionframe {
		padding-left: 0
	}
}
@media screen and (max-width:790px) {

	.ckconcept .section2 .sectionframe {
		top: 7px;
		margin-bottom: 7px
	}
	.ckconcept .section2 .sectionframe .para1 p:first-child {
		color: #000;
		padding-bottom: 66px
	}
	.ckconcept .section3 .sectionframe {
	    padding-left: 0
	}
	.ckconcept .section3 .sectionframe .img1 {
	    float: none;
	    border: none;
	    width: 100%
	}
	.ckconcept .section3 .sectionframe .img1 .span {
		border-bottom: 4px solid #fff;
		padding: 20px 40px
	}
	.ckconcept .section3 .sectionframe .img1 .span .para2 {
		width: 100%;
		position: relative;
		left: auto;
		top: auto
	}
	.ckconcept .section3 .sectionframe .para1 {
	    width: 100%
	}
	.ckconcept .section3 .sectionframe .para1 .img2 {
    	width: 25%;
		float: left
	}
	.ckconcept .section3 .sectionframe .para1 .img3 {
    	width: 25%
	}
	.ckconcept .section3 .sectionframe .para1 .img3 span {
		border-left: 4px solid #fff;
		padding-bottom: 100%
	}
	.ckconcept .section3 .sectionframe .para1 .img4 {
		background-position: center center;
    	width: 50%
	}
	.ckconcept .section3 .sectionframe .para1 .img4 span {
		padding-bottom: 50.55555%
	}
}
@media screen and (max-width:725px) {
	.ckconcept .section4 .sectionframe .para1,
	.ckconcept .section4 .sectionframe .para2 {
	    padding: 15px 20px 20px 15px
	}
	.ckconcept .section4 .sectionframe .para1 h2,
	.ckconcept .section4 .sectionframe .para2 h2 {
	    font-size: 20px
	}
}
@media screen and (max-width:560px) {
	.ckconcept .section4 .sectionframe > * {
	    float: none
	}
	.ckconcept .section4 .sectionframe .para1,
	.ckconcept .section4 .sectionframe .para2 {
	    width: 100%
	}
	.ckconcept .section4 .sectionframe .img1,
	.ckconcept .section4 .sectionframe .img2 {
		width: 100%
	}
}
@media screen and (max-width:430px) {
	.ckconcept .section2 .sectionframe .para2 p {
		margin-bottom: 20px;
	    margin-right: 0
	}
	.ckconcept .section2 .sectionframe .img1 {
		border: none;
		position: relative;
		width: 80%;
		margin: 0 auto 4px
	}
	.ckconcept .section2 .sectionframe .img2 {
		border: none;
		width: 80%;
		margin: 0 auto
	}
	.ckconcept .section3 .sectionframe .para1 .img2 {
    	width: 50%
	}
	.ckconcept .section3 .sectionframe .para1 .img3 {
    	width: 50%
	}
	.ckconcept .section3 .sectionframe .para1 .img4 {
		width: 100%
	}
	.ckconcept .section3 .sectionframe .para1 .img4 span {
	    padding-bottom: 82.9999%
	}
}

/* ! -- BUYER'S GUIDE */
#buyerguide .body .section1 {
	background-image: url('../upload/buyerguide-bg.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
}
#buyerguide .body .section1 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
#buyerguide .body .section1 .sectionframe .bgimgsize {
	width: 100%;
	padding-bottom: 56%
}
#buyerguide .body .section1 .bodytext {
	top: 50%;
	left: 0;
	width: 100%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	position: absolute
}
#buyerguide .body .section1 .bodytext h1 {
	text-align: center
}
.ckbuyerguide .section2 {
	padding: 50px 20px;
	background: url(../image/grey-body-bg.jpg) center top
}
.ckbuyerguide .section2 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
.ckbuyerguide .section2 .sectionframe .para {
	padding-right: 50px;
	position: relative;
	margin-bottom: 50px
}
.ckbuyerguide .section2 h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 27px;
    color: #363636;
    font-weight: 700;
    margin: 0
}
.ckbuyerguide .section2 h2 br {
	display: none
}
.ckbuyerguide .section2 h2 span {
    padding: 0 4px;
    border: 1px solid #0e6d40;
    display: inline-block;
    color: #0e6d40
}
.ckbuyerguide .section2 h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 16px
}
.ckbuyerguide .section2 ul {
	margin-left: 0;
	padding-left: 15px
}
.ckbuyerguide .section2 p,
.ckbuyerguide .section2 li {
	line-height: 22px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #0e6d40
}
.ckbuyerguide .section2 a {
    font-weight: 700;
    color: #0e6d40
}
@media screen and (max-width:600px) {
	.ckbuyerguide .section2 .sectionframe .para {
		padding-right: 0
	}
}
/* ! -- ABOUT US */
#aboutus .body .section1 {
	background-image: url('../upload/aboutus-bg.jpg');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
#aboutus .body .section1 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
#aboutus .body .section1 .sectionframe .bgimgsize {
	width: 100%;
	padding-bottom: 56%
}
#aboutus .body .section1 .bodytext {
	top: 50%;
	left: 0;
	width: 100%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	position: absolute
}
#aboutus .body .section1 .bodytext h1 {
	text-align: center
}
.ckaboutus .section2 {
	padding: 50px 20px;
	background: url(../image/grey-body-bg.jpg) center top
}
.ckaboutus .section2 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
.ckaboutus .section2 .sectionframe > img {
	left: 96px;
	position: absolute
}
.ckaboutus .section2 .sectionframe .para {
	margin-left: 248px;
	font-size: 14px;
	color: #0e6d40
}
.ckaboutus .section2 .sectionframe .para a {
	font-weight: 700;
	color: #0e6d40
}
.ckaboutus .section3 {
	padding: 0 20px 50px
}
.ckaboutus .section3 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
.ckaboutus .section3 .sectionframe h2 {
	font-family: 'Raleway', sans-serif;
	font-weight: 800;
	font-size: 14px;
	margin: 0 0 30px
}
.ckaboutus .section3 .sectionframe > img {
	left: 92px;
	position: absolute
}
.ckaboutus .section3 .sectionframe .para {
	padding-top: 57px;
	margin-left: 248px;
	font-size: 14px;
	color: #0e6d40
}
.ckaboutus .section3 .sectionframe .para > img {
	float: left;
	margin-right: 40px
}
.ckaboutus .section3 .sectionframe .para1 {
	float: left
}
.ckaboutus .section3 .sectionframe .para2 {
	clear: both;
	padding-top: 30px
}
@media screen and (max-width:1000px) {
	.ckaboutus .section3 .sectionframe .para1 {
		clear: both;
		padding-top: 20px
	}
}
@media screen and (max-width:860px) {
	.ckaboutus .section2 .sectionframe > img {
		left: 20px
	}
	.ckaboutus .section2 .sectionframe .para {
		margin-left: 148px
	}
	.ckaboutus .section3 .sectionframe > img {
	    left: 20px
	}
	.ckaboutus .section3 .sectionframe .para {		
		margin-left: 148px
	}
}
@media screen and (max-width:495px) {
	.ckaboutus .section3 .sectionframe > img {
	    left: -15px
	}
	.ckaboutus .section3 .sectionframe .para {		
		padding-top: 40px;
		margin-left: 0
	}
	.ckaboutus .section3 .sectionframe h2 {
		font-size: 14px;
	    margin: 0 0 30px 70px
	}
	.ckaboutus .section3 .sectionframe .para > img {
		height: 64px;
		margin-right: 20px
	}
	.ckaboutus .section3 .sectionframe .para > img:nth-child(2) {
		margin-left: 70px
	}
	.ckaboutus .section3 .sectionframe .para1 {
		margin-left: 70px
	}
}
@media screen and (max-width:460px) {
	.ckaboutus .section2 .sectionframe > img {
		position: relative;
		left: 0
	}
	.ckaboutus .section2 .sectionframe .para {
		margin-left: 0
	}
}

/* ! -- MEDIA CENTRE */
#mediacentre .body {
    overflow: hidden
}
#mediacentre .body .section1 {
	background-image: url('../upload/media-bg.jpg');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover
}
#mediacentre .body .section1 .sectionframe {
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
#mediacentre .body .section1 .sectionframe .bgimgsize {
	width: 100%;
	padding-bottom: 56%
}
#mediacentre .body .section1 .bodytext {
	top: 50%;
	left: 0;
	width: 100%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	position: absolute
}
#mediacentre .body .section1 .bodytext h1 {
	text-align: center
}
#mediacentre .body .section2 {
	position: relative
}
#mediacentre .body .section2:after {
	content: '';
	position: absolute;
	left: 0;
	top: 568px;
	width: 100%;
	height: calc(100% - 482px);
    background: url(../image/grey-body-bg.jpg) center top
}
#mediacentre .body .section2 .sectionframe {
	z-index: 1;
	padding-top: 0;
	margin: 0 auto;
	max-width: 1170px;	
	position: relative
}
#mediacentre .body .section2 .sectionframe h2 {
	width: 131px;
	color: #144b24;
	font-family: 'Raleway', sans-serif;
	font-weight: 800;
	font-size: 27px;
	position: absolute;
    left: -199px;
    top: -26px;
}
#mediacentre .body .section2 .sectionframe #video {
	margin-top: -84px
}
#mediacentre .body .section2 .sectionframe #video:after {
	display: block;
	clear: both;
	content: ''
}
#mediacentre .body .section2 .sectionframe #video ul {
	border: 2px solid #fff;
	float: right;
	padding: 0;
	margin: 0;
	width: 73.50427350427351%; /* 860 / 1170 */
}
#mediacentre .body .section2 .sectionframe #video li {
	width: 25%;
	border: 2px solid #fff;
	list-style: none;
	float: left
}
#mediacentre .body .section2 .sectionframe #video li:first-child div {
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	background: url(../image/mediacentre-video-bg.jpg) no-repeat;
	-webkit-background-size: cover;
	background-size: cover
}
#mediacentre .body .section2 .sectionframe #video li:first-child div h3 {
	position: absolute;
	width: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	font-family: 'Raleway', sans-serif;
	font-size: 28px;
	font-weight: 300;
	color: #fff;
	margin: 0
}
#mediacentre .body .section2 .sectionframe #video li a {
	position: relative;
	display: block;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	padding-bottom: 100%
}
#mediacentre .body .section2 .sectionframe #video li a:after {
	opacity: 0.5;
	content: '';
	position: absolute;
	top: calc(50% - 36px);
	left: calc(50% - 36px);
	width: 72px;
	height: 72px;
	display: block;
	background: url(../image/ico-play.png) no-repeat center center;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#mediacentre .body .section2 .sectionframe #video li:hover a:after {
	opacity: 1
}
#mediacentre .body .section2 .sectionframe #events {
	position: relative;
	margin: 60px 0 0 304px;
	padding: 0
}
#mediacentre .body .section2 .sectionframe #events:after {
	display: block;
	content: '';
	clear: both
}
#mediacentre .body .section2 .sectionframe #events ul {
	margin: 0;
	padding: 0
}
#mediacentre .body .section2 .sectionframe #events li {
	list-style: none;
	margin-right: 63px;
	padding-bottom: 50px;
	width: 196px;
	float: left;
	color: #144b24
}
#mediacentre .body .section2 .sectionframe #events li h5 {
	margin: 0;
	font-size: 17px
}
#mediacentre .body .section2 .sectionframe #events li p {
	min-height: 62px;
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 2px solid #72937c;
	font-size: 12px
}
#mediacentre .body .section2 .sectionframe #events li a {
	text-decoration: none;
	font-weight: 700;
	color: #636363;
	display: block;
	font-size: 11px
}
#mediacentre .body .section2 .sectionframe #events li a i {
	font-size: 8px
}
.white-popup-block {
    background: #FFF;
    padding: 20px 30px;
    text-align: left;
    max-width: 650px;
    margin: 40px auto;
    position: relative
}
#custom-content:after {
	clear: both;
	display: block;
	content: ''
}
#custom-content img {
    height: 100%;
	display: block;
	margin: 0 auto;
    max-width: 100%;
    margin-bottom: 10px
}
#custom-content .downloadbutton {
    font-weight: 700;
    padding: 11px 12px;
	display: block;
	text-decoration: none;
	float: right;
	background-color: #144b24;
	color: #fff
}
@media screen and (max-width:860px) {
	#mediacentre .body .section2:after {
		background: none
	}
	#mediacentre .body .section2 .sectionframe #video li:first-child div h3 {
		font-size: 18px
	}
	#mediacentre .body .section2 .sectionframe h2 {
		width: 100%;
		margin: 50px 0;
	    position: relative;
	    text-align: center;
	    left: 0;
	    top: 0
	}
	#mediacentre .body .section2 .sectionframe #events {
		margin: 50px auto 0;
		width: 768px
	}
	#mediacentre .body .section2 .sectionframe #events li {
	    margin-right: 30px;
	    margin-left: 30px
	}
}
@media screen and (max-width:768px) {
	#mediacentre .body .section2 .sectionframe #events {
		margin: 0 auto;
		width: 512px
	}
}
@media screen and (max-width:860px) {
	#mediacentre .body .section2 .sectionframe #video {
	    margin-top: 0
	}
	#mediacentre .body .section2 .sectionframe #video ul {
		width: 100%
	}
	#mediacentre .body .section2 .sectionframe #video li {
		width: 33.333333333%
	}
}
@media screen and (max-width:512px) {
	#mediacentre .body .section2 .sectionframe #events {
		margin: 0 auto;
		width: 256px
	}
}

/* ! -- REGISTER PAGE */
#newlaunchregister {
}
#newlaunchregister header {
	background: url(../image/register-bg.jpg) no-repeat center top;
	-webkit-background-size: cover;
	background-size: cover;
}
#newlaunchregister header .headerframe {
	width: 100%;
	margin: 0 auto;
	max-width: 1025px;
}
#newlaunchregister header .headerframe2 {
	width: 100%;
	padding-bottom: 57%;
}
#newlaunchregister header h1 {
	clear: both;
	margin: 0;
	padding-top: 50px;
	text-align: center;
	font-family: 'Lora', serif;
	font-weight: normal;
  	font-size: 53px;
	text-transform: uppercase;
	color: rgb(255, 255, 255);
	text-shadow: 2px 3.464px 4px rgba(1, 1, 1, 0.294);
}
@media screen and (max-width:824px) {
	#newlaunchregister header h1 {
		padding-top: 10px;
	}
}
@media screen and (max-width:764px) {
	#newlaunchregister header h1 {
		width: 100%;
		padding-top: 25%;
	}
}
@media screen and (max-width:532px)
{
	#newlaunchregister header h1 {
	  	font-size: 34px;
	}
}
@media screen and (max-width:420px)
{
	#newlaunchregister header h1 {
	  	font-size: 24px;
	}
}


#newlaunchregister .body {
	background: url(../image/register-body-bg.jpg) center top;
}
#newlaunchregister .body h3 {
	margin: 0;
}
#newlaunchregister .body ul {
	margin: 0;
}
#newlaunchregister .body .bodyframe {
	max-width: 958px;
	width: 100%;
	position: relative;
	margin: 0 auto
}
#newlaunchregister .body .bodyframe .topframe {
	z-index: 2;
	width: 328px;
	position: absolute;
	left: 0;
	bottom: -360px;
}
#newlaunchregister .body .bodyframe .topframe .box3:first-child {
	padding: 109px 36px 82px;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	background: #0e6d40;
	color: #fff
}
#newlaunchregister .body .bodyframe .topframe .box3:first-child * {
	text-transform: uppercase;
	font-size: 27px;
	margin: 0;
}
#newlaunchregister .body .bodyframe .topframe .box3:first-child h2 {
	padding-bottom: 25px;
	font-weight: 800;
}
#newlaunchregister .body .bodyframe .topframe .box3:not(:first-child) {
	border: 3px solid #fff;
	border-bottom: none
}
#newlaunchregister .body .bodyframe .topframe .box3:not(:first-child) img {
	width: 100%;
}
#newlaunchregister .body .bodyframe .desc {
	line-height: 18px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #0e6d40;
	padding-left: 409px;
	padding-top: 55px;
	padding-bottom: 60px;
}
#newlaunchregister .body .bodyframe .desc h3 {
	line-height: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 22px;
}
#newlaunchregister .body .bodyframe .content ol {
	font-weight: 700;
	padding-left: 0;
	margin: 0;
}
#newlaunchregister .body .bodyframe .content ol li {
	position: relative;
	padding-left: 20px;
  	list-style-type:none;
	font-weight: 400;
}
#newlaunchregister .body .bodyframe .content ol li:before {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-block;
	font-weight: 700;
	text-align: right;
}
#newlaunchregister .body .bodyframe .content > ol {
  	counter-reset:item;
}
#newlaunchregister .body .bodyframe .content > ol > li {
  	counter-increment:item;
}
#newlaunchregister .body .bodyframe .content ol > li:before {
	content:counter(item) ".";
}
#newlaunchregister .body .bodyframe .content > ol ol {
  	counter-reset:items;
}
#newlaunchregister .body .bodyframe .content > ol ol > li {
  	counter-increment:items;
}
#newlaunchregister .body .bodyframe .content ol ol > li:before {
	content:counter(items, lower-alpha) ".";
}
#newlaunchregister .body2 {
	background: url(../image/register-body-bg.jpg) center top;
}
#newlaunchregister .body2 .bodyframe {
	max-width: 958px;
	width: 100%;
	position: relative;
	margin: 0 auto
}
#newlaunchregister .body2 .bodyframe .form {
	height: 360px;
	padding: 30px 0 0 409px;
	position: relative;
	width: 100%;
	background-color: #0e6d40;
}
#newlaunchregister .body2 .bodyframe .form:before {
	background-color: #0e6d40;
	content: '';
	position: absolute;
	top: 0;
	right: calc((100% - 100vw) / 2);
	width: calc(100vw - 100%);
	height: 100%;
	z-index: 1;
}
#newlaunchregister .body2 .bodyframe .form .formframe {
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	position: relative;
	z-index: 2
}
#newlaunchregister .body2 .bodyframe .form input {
	padding: 0 27px;
	font-size: 14px;
	color: #555;
	border: none;
	margin-bottom: 13px;
	margin-right: 10px;
	width: 225px;
	line-height: 49px;
}
#newlaunchregister .body2 .bodyframe .form input:first-child {
	width: 464px;
}
#newlaunchregister .body2 .bodyframe .form button {
	font-size: 14px;
	color: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 0;
	background-color: rgb(247, 148, 29);
	width: 146px;
	height: 39px;
}
#newlaunchregister .body2 .bodyframe .form .agree {
	font-size: 10px;
	color: #fff;
	padding-top: 10px;
	display: block;
}
#newlaunchregister .body2 .bodyframe .form .agree:after {
	clear: both;
	content: '';
	display: block;
}
#newlaunchregister .body2 .bodyframe .form .agree input {
	float: left;
	width: auto
}
#newlaunchregister .body2 .bodyframe .form .agree p {
	margin: 0;
	width: 80%;
	float: left;
}
#newlaunchregister .body2 .bodyframe .form .agree p a {
	color: #fff
}
@media screen and (max-width:985px)
{
	#newlaunchregister .body .bodyframe .topframe {
	    width: 100%;
	    position: relative;
	    bottom: auto;
	}
	#newlaunchregister .body .bodyframe .topframe:after {
		display: block;
		clear: both;
		content: '';
	}
	#newlaunchregister .body .bodyframe .topframe .box3 {
		width: 33.3333333%;
		float: left;
	}
	#newlaunchregister .body .bodyframe .topframe .box3:not(:first-child) {
		border: 3px solid #fff;
		border-right: none;	
		border-bottom: none;	
	}
	#newlaunchregister .body .bodyframe .topframe .box3:first-child {
	    padding: 0;
	    position: relative;
	}
	#newlaunchregister .body .bodyframe .topframe .box3 .box3frame {
	    position: relative;
	    width: 100%;
	    padding-bottom: 97.8%;
	}
	#newlaunchregister .body .bodyframe .topframe .box3 .box3frame2 {
		padding: 30px;
		position: absolute;
	}
	#newlaunchregister .body .bodyframe .topframe .box3 .box3frame2 * {
		font-size: 20px;
	}
	#newlaunchregister .body .bodyframe .desc {
	    padding: 55px;
	}
	#newlaunchregister .body2 .bodyframe {
		max-width: 100%
	}
	#newlaunchregister .body2 .bodyframe .form {
		height: auto;
	    padding: 55px;
	}
	#newlaunchregister .body2 .bodyframe .form :before {
		background-color: none
	}
	#newlaunchregister .body2 .bodyframe .form .formframe {
		max-width: 585px;
	}
}
@media screen and (max-width:710px)
{
	#newlaunchregister .body .bodyframe .topframe .box3 .box3frame2 * {
		font-size: 15px;
	}
}
@media screen and (max-width:580px)
{
	#newlaunchregister .body .bodyframe .topframe .box3 .box3frame2 {
		padding: 10px;
	}
	#newlaunchregister .body .bodyframe .topframe .box3 .box3frame2 * {
		font-size: 14px;
	}
	#newlaunchregister .body .bodyframe .desc {
	    padding: 25px;
	}
	#newlaunchregister .body2 .bodyframe .form .formframe input {
		width: 100%;
	}
	#newlaunchregister .body2 .bodyframe .form .formframe .agree input {
		width: auto
	}
}
@media screen and (max-width:440px)
{
	#newlaunchregister .body .bodyframe .topframe .box3:first-child {
		float: none;
		width: 100%;
		padding: 15px;
	}
	#newlaunchregister .body .bodyframe .topframe .box3:first-child h2 {
		font-size: 25px;
		padding-bottom: 15px;
	}
	#newlaunchregister .body .bodyframe .topframe .box3:first-child p {
		font-size: 23px;
	}
	#newlaunchregister .body .bodyframe .topframe .box3 .box3frame {
		padding: 0;
	}
	#newlaunchregister .body .bodyframe .topframe .box3 .box3frame2 {
		position: relative;
		padding: 0;
	}
	#newlaunchregister .body .bodyframe .topframe .box3:not(:first-child) {
		width: 50%;
		border: 3px solid #fff;
	}
	#newlaunchregister .body2 .bodyframe .form {
	    padding: 25px;
	}
}

/* ! FOOTER */
footer {
    z-index: 2;
	background-color: rgb(50, 51, 57);
	box-shadow: -0.627px -5.967px 16px 0px rgba(1, 1, 1, 0.369);
	width: 100%;
	height:320px
}
.ckfooter.frame {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	padding-top: 5px;
	max-width: 977px;
	width: 100%;
	margin: 0 2%;
}
footer .ckfooter.frame {
	color: #fff
}
.ckfooter.frame:after {
	clear: both;
	display: block;
	content: ''
}
.ckfooter.frame h4 {
	font-weight: 300;
	margin: 0;
	font-size: 24px;
	text-transform: uppercase;
	width: 24.36028659160696%; /* 238 / 977 */
	float: left
}
.ckfooter.frame p {
	line-height: 19px;
	margin: 0;
	/*font-size: 11px;*/
	width: 75.63971340839304%; /* 739 / 977 */
	float: left
}
.ckfooter.frame .copyright {
	font-weight: 700;
	display: block;
font-size: 11px;
padding-left: 5px;
	/*padding-top: 65px*/
}
footer #shortcut {
	z-index: 3;
	list-style: none;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 170px;
	top: 220px;
	right: 15px
}
#gallery footer #shortcut {
	display: none
}
footer #shortcut:after {
	clear: both;
	display: block;
	content: ''
}
footer #shortcut li {
	cursor: pointer;
	margin-bottom: 5px;
	width: 50px;
	height: 50px;
	background: rgba(255,255,255,0.8) no-repeat center center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.52);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.52);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.52);
}
footer #shortcut li#booking{
	background-image: url(../images/icon/booking.png);
}
footer #shortcut li#socail{
	background-image: url(../images/icon/lang.png);
}
footer #shortcut li#facebook {
	background-image: url(../images/icon/facebook.png);
}
footer #shortcut li#update{
	background-image: url(../images/icon/update.png);
}
footer #shortcut li#guide {
	background-image: url(../images/icon/shortcut-guide.png);
}
footer #shortcut li#hotline {
	background-image: url(../images/icon/contact.png);
}
footer #shortcut li a, footer #shortcut li span {
	width: 100%;
	height: 100%;
	display: block
}
footer #shortcut li span {
	position: relative
}
footer #shortcut li div {
	position: relative
}
footer #shortcut li span .show {
	display: none
}
footer #shortcut li span:hover .show {
	display: block;
	text-align: center;
	padding: 5px 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.52);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.52);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.52);
    font-weight: 700;
	color: #fff;
	font-size: 20px;
	top: 5px;
	left: -190px;
	width: 180px;
	background-color: #0e3377;
	position: absolute
}


#bookingSpanId:hover #bookingSpanShow{
	display: block;
	text-align: center;
	padding: 5px 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.52);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.52);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.52);
    font-weight: 700;
	color: #fff;
	font-size: 20px;
	top: 5px;
	left: -190px;
	width: 180px;
	background-color: #0e3377;
	position: absolute
}
 #socailSpanShow{
	display: block;
	text-align: center;
	padding: 5px 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.52);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.52);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.52);
    font-weight: 700;
	color: #fff;
	font-size: 20px;
	top: -55px;
	left: -55px;
	width: 200px;
	background-color: #0e3377;
	position: absolute
}
footer #shortcut li span .show i {
    position: absolute;
    right: -10px;
    top: 13px;
    color: #0e3377;
}
footer #shortcut .socailSpan{
    position: absolute;
    right: 0px;
    top: 225px;
    color: #0e3377;
height: 50px;
}
footer #shortcut .bookingSpan {
    position: absolute;
    right: 0px;
    top: 60px;
    color: #0e3377;
height: 50px;
}

footer #shortcut .updateSpan{
    position: absolute;
    right: 0px;
    top: 115px;
    color: #0e3377;
height: 50px;
}

footer #shortcut li:first-child a {
	display: none
}
@media screen and (max-width:1024px) {
	footer #shortcut li:first-child a {
		display: block
	}
	footer #shortcut li:first-child span {
		/*display: none*/
top: -46px;
	}
.col-xs-12 {
width: 100%;
    padding-left: 0% !important; 

  }
}
@media screen and (max-width:820px) {
	footer #shortcut {
		top: 125px	
	}
.col-xs-12 {
width: 100%;
    padding-left: 0% !important; 

  }
}
@media screen and (max-width:600px) {
	/* body {
		padding-bottom: 50px
	} */
	footer #shortcut {
		width: 100%;
		position: fixed;
		top: auto;
		bottom: -5px;
		left: 0

	}
footer #shortcut li:first-child span:hover .show {
		/*display: none*/
top: -45px;
left: 25px;
}
footer #shortcut .bookingSpan {
    left: 72px !important;
    top: 0px !important;
    height: 50px !important;
    width: 16.666666667% !important;
}
footer #shortcut .updateSpan{
    left: 127px !important;
    top: 0px !important;
    height: 50px !important;
    width: 16.666666667% !important;
}
footer #shortcut .socailSpan{
    position: absolute;
    top: 0px;
    color: #0e3377;
height: 50px;
width: 16.66667%;
right: auto;
}
#bookingSpanId:hover #bookingSpanShow{
	top: -90px !important;
	left: -59px !important;
}
#updateSpanId:hover #updateSpanShow{
	top: -70px !important;
	left: -59px !important;
}
 #socailSpanShow{
	top: -110px !important;
	left: -120px !important;
}
	footer #shortcut li {
		background-color: #fff;
	    border-radius: 0;
	    -webkit-border-radius: 0;
		float: left;
		width: 16.666666667%
	}
/* footer{
height: 600px !important;
} */
.col-xs-12 {
width: 100%;
    padding-left: 0% !important; 

  }

.col-xs-2 {
width: 100% !important;
  }
}
@media all and (orientation:landscape) {
	@media screen and (max-width:736px) {
		body {
			padding-bottom: 50px
		}
		footer #shortcut {
			width: 100%;
			position: fixed;
			top: auto;
			bottom: -5px;
			left: 0

		}

		footer #shortcut li {
			background-color: #fff;
		    border-radius: 0;
		    -webkit-border-radius: 0;
			float: left;
			width: 16.666666667%
		}
footer #shortcut li:first-child span:hover .show {
		/*display: none*/
top: -45px;
left: 25px;
}
footer #shortcut .bookingSpan {
    left: 119px !important;
    top: 0px !important;
    height: 50px !important;
    width: 16.666666667% !important;
}
#bookingSpanId:hover #bookingSpanShow{
	top: -90px !important;
	left: -45px !important;
}
footer #shortcut .updateSpan{
    left: 220px !important;
    top: 0px !important;
    height: 50px !important;
    width: 16.666666667% !important;
}
#updateSpanId:hover #updateSpanShow{
	top: -70px !important;
	left: -40px !important;
}
footer #shortcut .socailSpan{
    position: absolute;
    top: 0px;
    color: #0e3377;
height: 50px;
width: 16.66667%;
right: auto;
}
 #socailSpanShow{
	top: -110px !important;
	left: -120px !important;
}
	
}
@media screen and (max-width:1028px) {
    
	footer {
		padding-bottom: 40px;
		/*height: auto*/
height: 350px;
	}
.col-xs-12 {
width: 90%;
    padding-left: 0% !important; 
padding-right: 0% !important;
  }
	.ckfooter.frame {
		/*padding-left: 50px;
		padding-right: 50px*/
	}
	.ckfooter.frame h4 {
		font-size: 17px;
		padding-bottom: 20px;
		width: 100%;
		float: none
	}
	.ckfooter.frame p {
		font-size: 10px
		width: 100%;
		float: none
	}
}

/* ! SHORTCUT */
#calculatorform {
	min-width: 
	max-width:555px; 
	margin: 20px auto;
    background: url(../image/register-body-bg.jpg) center top	
}
#calculatorform h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    color: #0e6d40;
    font-size: 24px;
    border-bottom: 1px solid #ccc;
    text-transform: uppercase;
    margin-top: 0;
    padding-bottom: 5px
}
#calculatorform .cal-frm > div {
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 5px;
}
#calculatorform .cal-frm .row:after {
	clear: both;
	display: block;
	content: ''
}
#calculatorform .col-md-6 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
	float: left;
    width: 50%;
}
#calculatorform .cal-frm label {
    font-family: 'Raleway', sans-serif;
	display: block;
    max-width: 100%;
    color: #333;
    font-weight: 700;
    font-size: 16px;
    line-height: 34px;
}
#calculatorform .form-control {
    display: block;
    width: 100%;
    padding: 6px 12px;
    line-height: 1.42857143;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    height: 44px;
    font-size: 14px;
    color: #959595;
}
#calculatorform .cal-frm .form-control, .cal-frm select[multiple], .cal-frm select[size] {
    height: 34px;
}
#calculatorform .col-md-12 {
    width: 100%
}
#calculatorform .group-btns {
    text-align: right;
}
#calculatorform .cal-frm p {
	margin-bottom: 10px;
    font-size: 12px;
    color: #333;
    opacity: .9;
}
#calculatorform .btn-red {
	margin-right: 16px;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    border-radius: 0;
    box-shadow: none;
    background: #0e6d40;
    color: #fff;
}
#calculatorform .hide {
    display: none !important;
}
@media screen and (max-width:3000px)and (min-width: 2049px) {
.col-xs-12 {
width: 100%;
    padding-left: 22% !important; 

  }
}
@media screen and (max-width:2048px)and (min-width: 1801px) {
.col-xs-12 {
width: 100%;
    padding-left: 18% !important; 

  }
}
@media screen and (max-width:1800px)and (min-width: 1601px) {
.col-xs-12 {
width: 100%;
    padding-left: 15% !important; 

  }
}
@media screen and (max-width:1600px)and (min-width: 1400px) {
.col-xs-12 {
width: 100%;
    padding-left: 11% !important; 

  }
}
@media screen and (max-width:1280px)and (min-width: 1029px) {
.col-xs-12 {
width: 100%;
    padding-left: 1% !important; 

  }
  

}
@media screen and (max-width:432px) {
	#calculatorform .col-md-6 {
	    width: 100%;
	}
footer{
height: 600px;
}
.col-xs-12 {
width: 100%;
    padding-left: 0% !important; 
padding-right: 0% !important;
  }

.col-xs-2 {
width: 100% !important;
  }
}

/* ! ANIMATION */
@keyframes mediacentre {
	0%   { 
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg)
	}
	90%  {
		background-image: none;		
	}
	100% { 
		opacity: 1;
		transform: rotate(45.5deg);
		-webkit-transform: rotate(45.5deg);
	    width: 550px;
	    height: 986px;
	    top: -303px;
	    left: -228px
   	}
}



@keyframes blink {
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}

/* Firefox < 16 */
@-moz-keyframes blink {
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes blink {
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}

/* Internet Explorer */
@-ms-keyframes blink {
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}

/* Opera < 12.1 */
@-o-keyframes blink {
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}

@keyframes "balance" {
0% {
}
15% {
-webkit-transform: rotateX(-50deg);
-moz-transform: rotateX(-50deg);
-o-transform: rotateX(-50deg);
-ms-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
30% {
-webkit-transform: rotateX(50deg);
-moz-transform: rotateX(50deg);
-o-transform: rotateX(50deg);
-ms-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {
-webkit-transform: rotateX(-30deg);
-moz-transform: rotateX(-30deg);
-o-transform: rotateX(-30deg);
-ms-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
60% {
-webkit-transform: rotateX(30deg);
-moz-transform: rotateX(30deg);
-o-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);
transform: rotateX(30deg);
}
75% {
-webkit-transform: rotateX(-30deg);
-moz-transform: rotateX(-30deg);
-o-transform: rotateX(-30deg);
-ms-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
100% {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}

}

@-moz-keyframes balance {
0% {
}
15% {

-moz-transform: rotateX(-50deg);
transform: rotateX(-50deg);
-webkit-transform: rotateX(-50deg);
}
30% {
-moz-transform: rotateX(50deg);
transform: rotateX(50deg);
-webkit-transform: rotateX(50deg);
}
45% {

-moz-transform: rotateX(-30deg);
transform: rotateX(-30deg);
-webkit-transform: rotateX(-30deg);
}
60% {

-moz-transform: rotateX(30deg);
transform: rotateX(30deg);
-webkit-transform: rotateX(30deg);
}
75% {

-moz-transform: rotateX(-30deg);
transform: rotateX(-30deg);
-webkit-transform: rotateX(-30deg);
}
100% {

-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
}

}

@-webkit-keyframes "balance" {
0% {

}
15% {

-webkit-transform: rotateX(-50deg);
transform: rotateX(-50deg);
-webkit-transform: rotateX(-50deg);
}
30% {

-webkit-transform: rotateX(50deg);
transform: rotateX(50deg);
-webkit-transform: rotateX(50deg);
}
45% {

-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);
-webkit-transform: rotateX(-30deg);
}
60% {

-webkit-transform: rotateX(30deg);
transform: rotateX(30deg);
-webkit-transform: rotateX(30deg);
}
75% {

-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);
-webkit-transform: rotateX(-30deg);
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
}

}

@-ms-keyframes "balance" {
	0% {
		margin-top: 0;
	}
	15% {
		margin-top: 0;
		-ms-transform: rotateX(-50deg);
		transform: rotateX(-50deg);
		-webkit-transform: rotateX(-50deg);
	}
	30% {
		margin-top: 0;
		-ms-transform: rotateX(50deg);
		transform: rotateX(50deg);
		-webkit-transform: rotateX(50deg);
	}
	45% {
		-ms-transform: rotateX(-30deg);
		transform: rotateX(-30deg);
		-webkit-transform: rotateX(-30deg);
	}
	60% {
		-ms-transform: rotateX(30deg);
		transform: rotateX(30deg);
		-webkit-transform: rotateX(30deg);
	}
	75% {
		-ms-transform: rotateX(-30deg);
		transform: rotateX(-30deg);
		-webkit-transform: rotateX(-30deg);
	}
	100% {
		-ms-transform: rotateX(0deg);
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
	}

}
@-o-keyframes "balance" {
	0% {
		margin-top: 0;
	}
	15% {
		-o-transform: rotateX(-50deg);
		transform: rotateX(-50deg);
		-webkit-transform: rotateX(-50deg);
	}
	30% {
		margin-top: 0;
		-o-transform: rotateX(50deg);
		transform: rotateX(50deg);
		-webkit-transform: rotateX(50deg);
	}
	45% {
		-o-transform: rotateX(-30deg);
		transform: rotateX(-30deg);
		-webkit-transform: rotateX(-30deg);
	}
	60% {
		-o-transform: rotateX(30deg);
		transform: rotateX(30deg);
		-webkit-transform: rotateX(30deg);
	}
	75% {
		-o-transform: rotateX(-30deg);
		-webkit-transform: rotateX(-30deg);
		transform: rotateX(-30deg);
	}
	100% {
		-o-transform: rotateX(0deg);
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
	}
}