@CHARSET "UTF-8";

/*-----------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-size: 16px;
	background-color: #fff;
	font-family: 'Oxygen', Arial;
	padding: 0;
	margin: 0;
	width:100%;
	height: 100%;
	overflow: hidden;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1{
	display: none;
}

span{
	display: none;
}

/*BASICS*/
.clear{
	clear:both;
}

.f_left{
	float: left;
}

.f_right{
	float: right;
}

.pad_left{
	padding-left: 1.25em;
}

.pad_left_small{
	padding-left: 0.625em;
}

.pad_left_big{
	padding-left: 1.875em;
}

.pad_right{
	padding-right: 1.25em;
}

.pad_right_small{
	padding-right: 0.625em;
}

.pad_right_big{
	padding-right: 1.875em;
}

.pad_top{
	padding-top: 1.25em;
}

.pad_top_small{
	padding-top: 0.625em;
}

.pad_top_big{
	padding-top: 1.875em;
}

.pad_bottom{
	padding-bottom: 1.25em;
}

.pad_bottom_small{
	padding-bottom: 0.625em;
}

.pad_bottom_big{
	padding-bottom: 1.875em;
}

.pad_bottom_super_big{
	padding-bottom: 3.125em;
}

.no_pad{
	padding: 0;
}

/*main content*/
#content_mainpanel{
	position: fixed;
	width:100%;
	height:100%;
}

.main-content {
  text-align: center;
  background: #fff;
  margin: 0 auto;
  width: 105%;
}

/*colored big logo*/
.w_logo_b{
	margin: 6.25em 1.313em 1.250em;
	width: 16.125em;
	height: 3.750em;
	border: 0.063em solid #f4f4f4;
}

/*white small logo*/
.w_logo_s{
	clear: both;
	margin: 0 0.5em 0;
	width: 5.188em;
	height: 2.438em;
	border: 0.063em solid #f7283a;
}

/*slide navi*/
.side_panel{
	position: absolute;
	overflow: hidden;
	z-index: 1;
	clear: both;
	height: 100%;
	background: #f4f4f4;
}

.side_panel h2{
	margin:0.313em 0;
	font: bold 1em 'Oxygen', Arial;
	color: #0568a6;
}

.side_panel sub{
	margin:0.1em 0;
	font: bold .55em 'Oxygen', Arial;
	color: #0568a6;
}

.side_panel p{
	margin:0.313em 0;
	font: bold .9em 'Oxygen', Arial;
	color: #707070;
}

.sliderContent_panelbox{
	display:none;
	float: left;
	width: 18.750em;
	height: 100%;
}

.slider_panelbox{
	float: left;
	width: 6.250em;
	height: 100%;
	background: #f7283a;
}

.btn_slider{
	width: 3.125em;
	height: 3.125em;
	margin: 1.563em 1.563em 0;
	cursor: pointer;
}

.btn_slider_imgDef{
	background: url('../images/but_def_slider.jpg');
}

.btn_slider_imgClose{
	background: url('../images/but_close_slider.jpg');
}

/*side inner panels*/
.side_inner_panelbox{
	float:left;
	width:15.625em;
	margin: 2.5em 1.875em 0;
	padding: 0.313em;
}

/*navi*/
.navi_panelbox{
	text-transform:uppercase; 
}

.navi_panelbox p{
	margin:0.125em 0;
	font: bold 1.2em 'Oxygen', Arial;
	color: #f7283a;
}

.navi_panelbox a:visited,
.navi_panelbox a:link,
.navi_panelbox a:active{
	display:block;
	margin:0.125em 0;
	font: normal 1.2em 'Oxygen', Arial;
	text-decoration: none; 
	color: #707070;
}

.navi_panelbox a:hover{
	color: #00c1ff;
}

/*social media*/
.btn_social{
	float: left;
	margin:0 0.313em 0 0;
	width: 3.5em;
	height: 3.5em;
	background-position: top;
	cursor: pointer;
}

.btn_pin{
	background:url("../images/icon_pin_small.png");
}

.btn_pin:hover{
	background-position: bottom;
}

.btn_twitter{
	background:url("../images/icon_twitter_small.png");
}

.btn_fb{
	background:url("../images/icon_facebook_small.png");
}

.btn_wordpress{
	background:url("../images/icon_wordpress_small.png");
}

.btn_fb:hover,
.btn_wordpress:hover,
.btn_twitter:hover{
	background-position: bottom;
}

.btn_cr8v_logo{
	display: block;
	margin: 1em 0;
	width: 80px;
	height: 24px;
	background:url("../images/cr8v_logo.png") 100% 0 no-repeat;
	font: bold .55em 'Oxygen', Arial;
	vertical-align: middle;
	white-space: nowrap;
	color: #555;
	cursor: pointer;
}

/*banner panels*/
.mainpage_panel{
	position: fixed;
	margin-left:6.25em;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.banner_row_panelbox{
	position: absolute;
	z-index: 0;
	overflow: hidden;
	height: 100%;
}

.banner_col_60_panelbox{
	position: relative;
	overflow: hidden;
	height: 60%;
	background: #fff;
}

.banner_col_40_panelbox{
	position: relative;
	overflow: hidden;
	height: 40%;
	background: #fff;
}

.banner_row_over_panelbox{
	position: absolute;
	z-index: 5555;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

/*video panel*/
.video_panelbox{
	background: #000;
	opacity: .6;
	filter(alpha=60);
}

.btn_play_video{
	position: relative;
	width: 7em;
	height: 7em; 
	margin:0 auto;
	display: block;
	background: #fff url("../images/play_but_def.png") 50% 50% no-repeat;
	border-radius: 50%;
	cursor: pointer;
}

.btn_play_video:hover{
	background: #00c1ff url("../images/play_but_over.png") 50% 50% no-repeat;
}

.video_modalBG_panel{
	position: absolute;
	z-index: 8888;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0;
	filter(alpha=0);
}

.video_modalframe_panel{
	position: absolute;
	display: block;
	z-index: 9999;
	width: 50em;
	background: #f7283a;
	opacity: 0;
	filter(alpha=0);
	border: .5em solid #f7283a;
}

.video_modalframe_top_panelbox{
	position: relative;
	width: 100%;
	height: 2.3em;
	clear: both;
}

.video_modalframe_panel h3{
	float: left;
	padding: .1em .5em;
	margin: 0;
	font: normal 3em 'Oxygen', Arial;
	color:#fff;
}

.video_modal_panelbox{
	position: relative;
	width: 100%;
	height: 30em;
	background: #000;
}

.video_modal_panelbox iframe{
	position: relative;
	width: 100%;
	height: 100%;
	border: 0.063em solid #000;
}

.btn_video_close{
	float:right;
	width: 1.25em;
	height: 1.25em;
	padding: .5em;
	cursor: pointer;
	background: url("../images/but_close_slider_small.jpg") 50% 50% no-repeat;
}

/*project*/
.project_grid_panel,
.amenities_grid_panel{
	width: 100%;
	background: url("../images/grid_over.png");
}

.project_middle_panelbox{
	position: relative;
	width: 100%;
	text-align: center;
}

.project_middle_panelbox h3{
	margin: .5em auto;
	padding: .2em;
	position: relative;
	width: 80%;
	font: normal 1.5em 'Oxygen', Arial;
	color: #fff;
}

.project_w_logo{
	position: relative;
	width: 80%;
	margin:0 auto;
}

.btn_project_view{
	position: relative;
	margin: .5em auto;
	padding: .5em;
	width: 40%;
	font: bold 1em 'Oxygen', Arial;
	background: #8ae91a;
	color: #fff;
	cursor: pointer;
}

.btn_project_view:hover{
	background: #f7283a;
}

/*gallery*/
.gallery_bullet_panel{
	position: absolute;
	width: 100%;
	text-align: center;
}

.gallery_bullet_panelbox{
	position: relative;
	margin: 0 auto;
	clear: both;
}

.gallery_picked_bulletlist{
	display: inline-block;
	margin: .5em;
	width: 1.25em;
	height: 1.25em;
	background: url("../images/bullet_picked.png") no-repeat;
	cursor: pointer;
}

.gallery_bulletlist{
	display: inline-block;
	margin: .5em;
	width: 1.25em;
	height: 1.25em;
	background: url("../images/bullet_def.png") no-repeat;
	cursor: pointer;
}

.gallery_bulletlist:hover{
	background: url("../images/bullet_over.png") no-repeat;
}

.img_toshow{
	position: absolute;
	width: 100%;
	height: 100%;
}

/*contact us*/
.contact_us{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	height: 100%;
}

.height_10{
	height: 10%;
}

.height_80{
	height: 80%;
}

.width_100{
	width: 100%;
}

.width_80{
	width: 80%;
}

.width_55{
	width: 55%;
}

.location_content h1,
.contact_us h1,
.amenities h1,
.news h1{
	display: block;
	font-size: 3.125em;
	font-weight: 700;
	text-transform: uppercase;
	color: #424242;
	margin: 0;
	overflow: hidden;
}

.location_content h2,
.contact_us h2,
.amenities h2,
.news h2{
	font-size: 1.5625em;
	font-weight: 300;
	color: #5e5e5e;
}

.contact_panel h3{
	font-weight: 700;
	font-size: 1.5625em;
	line-height: 1.5em;
	color: #424242;
}

.contac_us_divider{
	width: 27.625em;
	border-bottom: 2px solid #d2d2d2;
	margin: 0 auto;
}

.contact_panel{
	width: 50%;
}

.contact_panel input[type=input]{
	height: 2.5em;
	width: 100%;
	background-color: #eff1f2;
	padding: 0.625em;
	border: none;
}

textarea{
	resize: none;
	width: 100%;
	height: 9.125em;
	background: #eff1f2;
	padding: 0.625em;
	border: none;
}

.contact_panel input[type=input],
textarea{
	font-family: 'Oxygen', Arial;
	color: #aba6a6;
	font-size: 1.25em;
}

a.contact_btn{
	background: #f7283a;
	text-transform: uppercase;
	font-weight: 700;
	padding: 1.25em 2.5em;
	color: #ffffff;
	text-decoration: none;
}

a.contact_btn:hover{
	background: #d41324;
}

.btn_margin{
	margin: 1.875em;
}

p.phone,
p.address,
p.email{
	background: url('../images/icon_email.png')no-repeat 0px 0px;
	padding-left: 50px;
	color: #5e5e5e;
	font-size: 1.125em;
	line-height: 1em;
	height: 40px;
}

p.phone{
	background: url('../images/icon_phone.png')no-repeat 0px 0px;
	padding-top: 5px;
}

p.address{
	background: url('../images/icon_address.png')no-repeat 7px 0px;
}

/*location*/
.location{
	width: 60%;
	height: 100%;
}

.location_content{
	width: 30%;
	height: 100%;
	text-align: left;
}

.location_content h2{
	text-transform: uppercase;
}

.location_content p{
	color: #424242;
	line-height: 1.5em;
	font-size: 1em;
	font-weight: 300;
}

.location_content h3{
	text-transform: uppercase;
	font-size: 1.5625em;
	line-height: 1.5em;
	color: #0568a6;
	font-weight: 700; 
}

.location_content p.address{
	background: url(../images/icon_address.png)no-repeat 7px 0px;
	line-height: 1.25em;
}

/*floor plan*/
.floor_plan_img_panel{
	width: 60%;
	height: 100%;
	overflow: hidden;
}

.floor_plan_content{
	width: 40%;
	height: 100%;
	text-align: left;
	overflow-x:hidden;
	overflow-y:auto;

}

.floor_plan_content ul li{
	background: url(../images/bullet_list.png)no-repeat 0 5px;
	padding-left: 1.25em;
	padding-bottom: 1.25em;
	font-size: 1em;
	color: #949494;
}

/*amenities*/
.amenities{
	overflow-x:hidden;
	overflow-y:auto;
	width: 100%;
	height: 100%;
}

.amenities h1, 
.amenities h2{
	padding:0 5%;
}

.amenities p{
	padding: 0 5%;
	color: #424242;
	line-height: 1.5em;
	font-size: 1em;
	font-weight: 300;
}

.amenities ul{
	padding: 0 0 0 5%;
	float: left;
}

.amenities li{
	background: url(../images/bullet_list.png)no-repeat 0 5px;
	padding-left: 1.25em;
	padding-bottom: 1em;
	font-size: 1em;
	color: #949494;
}

.amenities_middle_panelbox{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.amenities_middle_panelbox h3{
	position: relative;
	padding: .2em 0 0 1em;
	width: 100%;
	font: bold 2em 'Oxygen', Arial;
	text-align: left;
	color: #fff;
}

/*news*/
.news{
	overflow-y: auto;
	overflow-x: hidden;
	width: 100%;
	height: 100%;
}

.news h1{
	padding:0 5%;
}

.news h2{
	padding:0 5%;
}


.news p{
	padding:0 5%;
	line-height: 1.5em;
}

.news_latest h2{
	padding: 2% 5% 10%;
	font-size: 2em;
	font-weight: bold;
	color: #fff;
	background: url(../images/gradient_top.png) repeat-x;
}

.latest_news_img_panelbox{
	width: 100%;
	height: 100%;
}

.news_bottom_fade_panelbox{
	position: absolute;
	padding-top:3.125em;
	z-index: 0;
	width: 100%;
	background:url(../images/news_opacity_bg.png) repeat-x 0 bottom;

}


.news_bottom_panelbox{
	position: absolute;
	z-index: 1;
	width: 100%;
	text-align: left;
}

.news_bottom_panelbox h3{
	padding: 0 5%;
	font: bold 1.5625em 'Oxygen', Arial;
	color: #fff;
}

.news_bottom_panelbox p{
	color: #fff;
}

.news_ticker_panel{
	position: absolute;
	display: block;
	width: 100%;
	overflow: hidden;
}

.news_ticker_img_panel{
	position: relative;
	float: left;
	display: block;
	height: 100%;
	overflow: hidden;
}

.news_ticker_img_panel img{
	width: 100%;
	height: 100%;
}

.news_ticker_content_panel{
	position: relative;
	float: left;
	display: block;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.news_ticker_content_panel h2{
	padding:2% 0 2% 5%;
	font: bold 1.6em 'Oxygen', Arial;
	color: #fff;
}

.news_ticker_content_panel p{
	padding:1% 5% 0 5%;
	font: normal 1em 'Oxygen', Arial;
	color: #fff;
}

.news_ticker_content_panel small{
	padding:1% 1% 0 5%;
	font: bold .8em 'Oxygen', Arial;
	text-transform: uppercase;
	color: #fff;
}

.news_ticker_content_panel sub{
	padding:1% 1% 0 5%;
	font: bold .5em 'Oxygen', Arial;
	text-transform: uppercase;
	color: #fff;
}

.news_slider_content{
	position: absolute;
	z-index: 900;
	width: 100%;
}


.news_slider_arrow_down {
	position: absolute;
	z-index: 9999;
	height: 3.125em;
	width: 3.125em;
	background: url("../images/arrow_down.png");
	opacity: .3;
	filter(alpha=30);
	cursor: pointer;
}

.news_slider_arrow_up {
	position: absolute;
	display: none;
	z-index: 1000;
	height: 3.125em;
	width: 3.125em;
	background: url("../images/arrow_up.png");
	cursor: pointer;
}

.btn_cr8v_logo p{
	margin-top: 1.3em;
	float: left;
}

/*CSS added 20140218*/

.pop_up_panel{
	/*height: 37.5em;*/
	width: 54em;
	padding: 1em;
	display: none;
}

.pop_up_panel h1{
	display: block;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	/*color: #fff;*/
}

.pop_up_panel p{
	/*color: #fff;*/
}
/*
.fancybox-skin{
	background-color: #F7283A!important;
}*/

.news_ticker_content_panel a{
	color: #cc9729;
	text-decoration: none;
	font-weight: bold;
	/*text-transform: uppercase;*/
	opacity: 0.7;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	-ms-transition: all .2s linear;
	transition: all .2s linear;
}

.news_ticker_content_panel a:hover{
	opacity: 1;
}

.img_treat_at_hongkong{
	width: 100%;
	margin-top: -70px;
	height: 48%;
}

.img_treat_at_hongkong img{
	height: 100%;
	width: 100%;
}

.contact_form{
	overflow-y: auto; 
}

.height_100{
	height: 100%;
}

.news_events_panel h3{
	color: #0568A6;
	font-size: 1.5625em;
	font-weight: 700;
	line-height: 1.5em;
	text-transform: uppercase;
	padding: 0 5%;
}

.news_events_panel strong{
	font-weight: 700;
}

.news_events_panel sub{
	padding: 0 5%;
	/*margin:0.1em 0;*/
	font: bold .55em 'Oxygen', Arial;
	color: #424242;
}

.error_message{
	height: 3em;
	width: 104.5%;
	background-color: #e06262;
	margin-bottom: 1em;
}

.successful_message{
	height: 3em;
	width: 104.5%;
	background-color: #62e089;
	margin-bottom: 1em;
}

.successful_message p,
.error_message p{
	text-align: left;
	color: #fff;
	padding: 1em;
}

.pop_up_balloon:before {
    border-color: rgba(0, 0, 0, 0) #059DE0 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-image: none;
    border-style: solid;
    border-width: 10px 25px 10px 10px;
    content: "";
    left: -30px;
    position: absolute;
    top: 9px;
}
.pop_up_balloon {
    background-color: #059DE0;
    left: 100%;
    padding: 10px;
    position: absolute;
    top: 32px;
    z-index: 9;
    display: none;
    transition: left .5s;
    box-shadow: 2px 4px 7px #252525;
    -webkit-box-shadow: 2px 4px 7px #252525;
    -moz-box-shadow: 2px 4px 7px #252525;
    -o-box-shadow: 2px 4px 7px #252525;
}

.pop_up_balloon p{
	color: #fff;
	font: 1em 'Oxygen',Arial;
}

.pop_up_balloon.active {
    left: 104px;
}
/* Add this to your existing CSS file */
.video_modal_title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin: 20px 0 10px;
}

.video_modal_desc {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin: 10px 20px 20px;
    line-height: 1.5;
}

.video_modal_panelbox {
    padding: 10px;
    background: #fff; /* Background color for readability */
    border-radius: 8px;
}