* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}



body
{
background:url(images/bg.jpg) fixed;
background-size:100% auto;
font:13px Arial, Helvetica, sans-serif;
}


p {
	line-height:18px;
	text-align:justify;
}


.clear {
	clear: both;
}


h1, h3, h4 {
	width:100%;
	margin:15px 0;
	float:left;
	padding:5px 15px;
	background:#5d9820;
	color:#fff;
	font:18px "Palatino Linotype";
}



h2 {
	width:100%;
	color:#3a4804;
	font-size:15px;
	padding-bottom:10px;
}


h3 a {
	padding-top:2px;
	float:right;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#fff;
	text-decoration:none;
}




.wrapper {
	width:1000px;
	margin:auto;
	clear:both;
	background:#fff;
}






#mobile-header {
	display:none;
}



#mobile-footer {
	display:none;
}



header {
	width:100%;
	float:left;
	margin-bottom:10px;
	background:rgba(144,224,48,.5);
}

header .wrapper {
	background:none;
}



.logo {
	width:100%;
	left:0;
	position:absolute;
	text-align:center;
	margin-top:20px;
}


#cyj-logo {
	float:left;
	padding-top:10px;
}

#cyj-logo img {
	width:90px;
}

#call-panel {
	padding:5px 0;
	text-shadow:1px 1px 1px #000;
	float:right;
	color:#fff;
	font-weight:bold;
	text-align:right;
	font-size:16px;
}


#call-panel li {
	text-shadow:none;
	list-style:none;
	display:inline-block;
	padding-bottom:10px;
}

#call-panel a {
	text-decoration:none;
	color:#fff;
	font-weight:normal;
	font-size:13px;
	padding:0 10px;
}

#call-panel a:hover {
	text-decoration:underline;
}


#call-panel span {
	font-size:13px;
}




#nav {
	width:100%;
	float:left;
	text-align:center;
	line-height:48px;
	background:url(images/nav-back.jpg);
}





#nav li {
	list-style:none;
	display:inline-block;
}


#nav a {
	border-radius:5px;
	padding:5px 20px;
	text-decoration:none;
	font-size:16px;
	color:#000;
}


#nav a:hover, nav a.active {
	background:#fff;
	transition:all ease .5s;
}





#banner {
	width:100%;
	float:left;
}

#banner img {
	width:100%;
	margin-bottom:-3px;
}





#middle-area {
	width:70%;
	padding:10px 0 10px 10px;
	float:left;
}


.contents {
	width:100%;
	color:#444444ed;
	float:left;
	padding-bottom:30px;
}


.contents img {
	padding-left:20px;
	float:right;
}





.contents > a {
	background:#900;
	border-radius:5px;
	color:#fff;
	margin-top:15px;
	float:left;
	padding:5px 15px;
	text-decoration:none;
	font-weight:bold;
}

.contents > a:hover {
	background:#CCC;
	transition:all ease .5s;
}


#photogallery {
	width: 100%;
	float:left;
}



.gallery { width:33.3%; float: left; }  

   
#photogallery img{
	width:100%;
	height:150px;
	padding:3px;
}



#left-area {
	margin:10px 10px 10px 0;
	border:1px solid #ccc;
	width:28%;
	float:right;
}



#left-nav {
	width:100%;
	float:left;
	padding-bottom:10px;
}


#left-nav h4 {
	margin:0 0 10px 0;
}


#left-nav li {
	width:90%;
	margin:0 5%;
	float:left;
	list-style:none;
}




#left-nav a {
	width:100%;
	margin:5px 0;
	border-radius:10px;
	color:#000;
	float:left;
	padding:5px 0 5px 15px;
	font-weight:bold;
	text-decoration:none;
	background:linear-gradient(to bottom, #f5fddf 0%, #b8e030 83%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}


#left-nav a.background1 {
	background:#900;
	background:linear-gradient(#900, #600);
	color:#fff;
}


#left-nav a.background1:hover {
	background:#900;
	color:#fff;
}


#left-nav a:hover {
	background:#b8e030;
}



.left-content {
	width:100%;
	float:left;
	margin-bottom:15px;
}

.left-content img {
	width:100%;
}


.cd-testimonials-wrapper {
	float:left;
	width:100%;
}



.cd-testimonials > li {
	width:100%;
	float:left;
	overflow:hidden;
}

.left-content .contact {
	padding:0 10px;
}

.left-content .contact figure {
	padding:0 25px 15px 0;
	width:100%;
}

.left-content .contact figure img {
	width:100%;
}





#booking {
	width:100%;
	float:left;
	background:#e4eed9;
}

#booking h4 {
	margin:0;
}

#booking label {
	width:90%;
	margin:5px 5% 0 5%;
	color:#000;
	height:20px;
	float:left;
}


#booking input, #booking textarea {
	width:90%;
	margin:0 5% 5px 5%;
	padding:0 5px;
	border:1px solid #ccc;
	height:20px;
	float:right;
}

#booking textarea {
	height:100px;
}


/*#booking input:hover, #booking input:focus, #booking textarea:hover, #booking textarea:focus {
	background:#ffe400;
	transition:all ease .5s;
}*/

#booking [type="submit"] {
	color:#fff;
	height:auto;
	float:left;
	margin:15px 5%;
	border:none;
	font-weight:bold;
	width:auto;
	border-radius:10px;
	cursor:pointer;
	padding:5px 10px;
	background:linear-gradient(to bottom, #920100 0%, #600303 99%);
}





/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #CC3333;

}



/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	background-color: #B8F5B1;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #FF2C2C;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText {
	color: red !important;
}

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input, input.textfieldHintState {
	/*color: red !important;*/
}






footer {
	width:100%;
	margin-top:15px;
	float:left;
	padding:10px 0;
	color:#fff;
	background:rgba(0, 0, 0, .5);
}


footer ul {
	float:right;
}


footer li {
	list-style:none;
	margin-left:5px;
	float:left;
}


footer li:hover {
	background:#fff;
	transition:all ease .5s;
}



footer a {
	color:#fff;
}

footer p {
	padding:0;
	float:left;
}

footer .right {
	width:100%;
	text-align:right;
	float:right;
}






/*mobile responsive*/



@media screen and (max-width: 1000px) {
	
.wrapper {
	width:95%;
	margin:30px auto;
}


#mobile-header {
	box-shadow:0 3px 3px rgba(0,0,0,.5);
	display:block;
	left:0;
	top:0;
	width:100%;
	background:#5d9820;
	height:30px;
	position:fixed;
	z-index:999;
}

#menu-left {
	cursor:pointer;
	float:left;
	width:10%;
	height:30px;
	background-image:url(images/menu.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:80% 80%;
	background-color:#bfe91b;
}


#menu-right {
	cursor:pointer;
	float:right;
	width:10%;
	height:30px;
	background-image:url(images/menu.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:80% 80%;
	background-color:#bfe91b;
}



#book-now {
	cursor:pointer;
	float:left;
	width:30%;
	height:30px;
	background-image:url(images/book-now.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:80% 80%;
}




#mobile-header figure {
	text-align:center;
	margin-top:5px;
	float:left;
	width:50%;
}

#mobile-header figure img {
	height:20px;
	width:80%;
}


#mobile-footer {
	padding:5px 0;
	box-shadow:0 -3px 3px rgba(0,0,0,.5);
	text-align:center;
	display:block;
	left:0;
	bottom:0;
	width:100%;
	background:#bfe91b;
	position:fixed;
	z-index:999;
}

#mobile-footer img {
	margin-bottom:-5px;
}


header > .wrapper {
	display:none;
}



#nav {
	display:none;
	width:50%;
	right:0;
	top:30px;
	line-height:20px;
	float:none;
	position:fixed;
	z-index:9999;
	background:#bfe91b;
}


#nav li {
	float:left;
	width:100%;
}


#nav a {
	width:100%;
	float:left;
	font-weight:normal;
	font-size:10px;
	text-align:right;
	border-right:none;
	border-bottom:1px solid rgba(255,255,255,.25);
}





#banner {
	margin-bottom:5px;
}



#middle-area {
	width:100%;
	margin-top:30px;
	padding:0 15px;
}



#left-area {
	padding:0 10px;
	width:100%;
	float:left;
}



#booking {
	display:none;
	top:30px;
	left:10%;
	position:fixed;
	z-index:99;
	width:80%;
	float:none;
}

#booking label, #booking input, #booking textarea {
	width:40%;
	margin:5px 5%;
}


#booking h4 {
	font-size:12px;
}


#left-nav {
	display:none;
	border-bottom:1px solid #000;
	overflow:auto;
	margin-top:0;
	top:30px;
	left:0;
	position:fixed;
	width:50%;
	float:none;
	background:#bfe91b;
	z-index:9999;
}

#left-nav li {
	width:100%;
	margin:0;
}


#left-nav a {
	font-size:10px;
	width:100%;
	background:none;
	border-bottom:1px solid rgba(255, 255, 255, 0.25);
	border-radius:0;
	font-weight:normal;
}






.contents img {
	width:100%;
	padding:0;
}




footer .wrapper {
	margin:0;
	padding:0;
}


footer {
	padding:10px 10px 50px 10px;
}


footer ul {
	float:right;
}


footer li {
	list-style:none;
	margin-left:5px;
	float:left;
}


footer li:hover {
	background:#fff;
	transition:all ease .5s;
}



footer a {
	color:#fff;
}

footer p {
	padding:0;
	float:left;
}

footer .right {
	width:100%;
	text-align:right;
	float:right;
}


}