@charset "utf-8";
/* CSS Document */
body{ background-color:#dcf6f8; background-repeat:repeat-x; margin:0; padding:0}
.spacer{ width:100%; height:1px; line-height:1px; clear:both}
h1{ font-family:'courgetteregular'; font-size:23px; color:#cf1313; font-weight:normal; text-align:center;
		 letter-spacing:1px; line-height:32px}
h2{ font-family:'courgetteregular'; font-size:25px; color:#cf1313; font-weight:normal; float:left;
		 letter-spacing:1px; line-height:22px; padding-left:24px}
h3{ font-family:'courgetteregular'; font-size:25px; color:#cf1313; font-weight:normal; float:left;
		 letter-spacing:1px; line-height:22px; padding-left:24px}



#top{ width:100%; max-width:1440px; height:41px; background-color:#24358d; margin:0 auto}
#loc{ width:100%; max-width:400px; height:auto; float:left}
#loc_img{ width:11px; height:21px; float:left; margin-top: 9px}
#loc_txt{ width:100%; max-width:360px; height:auto; float:left; margin-top: 13px; margin-left:13px}
#loc_txt p{ font-family:'open_sansregular'; font-size:15px; color:#FFF; letter-spacing:1px}

#phn{ width:100%; max-width:180px; height:auto; float:left; margin-left:30px}
#phn_img{ width:20px; height:20px; float:left;     margin-top: 10px}
#phn_txt{ width:100%; max-width:120px; height:auto; float:left; margin-top:12px; margin-left:10px}
#phn_txt p{ font-family:'open_sansregular'; font-size:15px; color:#FFF; letter-spacing:1px}

#book{ width:100%; max-width:242px; height:38px; float:right}

#email{ width:100%; max-width:270px; height:auto; float:left; margin-left:20px}
#email_img{ width:23px; height:18px; float:left; margin-top:10px}
#email_txt{ width:100%; max-width:230px; height:auto; margin-top:10px; margin-left:30px}
#email_txt p{ font-family:'open_sansregular'; font-size:15px; color:#FFF; letter-spacing:1px}

#top_bg{ width:100%; max-width:1440px; height:111px; background-image:url(../images/top_bg.png);
		 background-repeat:no-repeat; margin:0 auto}
		 
#wrapper{ width:100%; max-width:1180px; height:auto; margin:0 auto}
.logo{ width:100%; max-width:277px; height:87px; float:left; margin-top:15px; margin-left:20px}

#menu{ width:100%; max-width:815px; height:auto; float:right}
#menu ul{ text-decoration:none}
#menu ul li{ font-family:'open_sansregular'; font-size:17px; color:#0b0b0b; float:left; padding: 52px 15px 0px 0px}
#menu ul li a{ color:#0b0b0b}
#menu ul li a:hover{ color:#900}
.active a{ color:#900 !important}

#banner{ width:100%; max-width:1440px; height:auto; margin:0 auto; overflow:hidden; clear:both}
#banner1{ width:100%; max-width:1440px; height:auto; margin:0 auto; overflow:hidden; clear:both}
.content{ width:100%; max-width:1180px; height:auto; margin:0 auto}

#blue_bg{ width:100%; max-width:1180px; height:50px; background-color:#24358d}
#txt{ width:100%; max-width:955px; height:auto; float:left}
#txt p{ font-family:'philosopherregular'; font-size:23px; color:#FFF;     padding-left: 20px;    padding-top: 13px; letter-spacing:1px}
.icon{ width:100%; max-width:175px; height:auto; float:right; padding:8px 0px}

#welcome{ width:100%; max-width:860px; height:auto; float:left; margin-top:30px; margin-left:20px}
#welcome p{ font-family:'philosopherregular'; font-size:19px; color:#434242; line-height:28px; text-align:justify; padding-top:10px}

#welcome_img{ width:100%; max-width:251px; height:326px; float:right; margin-top:75px}

.view{ width:100%; max-width:362px; height:266px; float:left; margin-top:20px}
.view1{ width:100%; max-width:362px; height:266px; float:left; margin-left:48px; margin-top:20px}
.view2{ width:100%; max-width:362px; height:266px; float:right; margin-top:20px}

.line{ width:100%; max-width:469px; height:1px; background-color:#8d2424; float:left; margin-top: 10px}
.line1{ width:100%; max-width:469px; height:1px; background-color:#8d2424; float:right; margin-top: 10px}

#attractions_bg{ width:100%; max-width:1440px; height:325px; margin:0 auto; background-image:url(../images/att_bg.png);
					 background-repeat:no-repeat; margin-top:20px}
#attractions{ width:100%; max-width:1180px; height:auto; margin:0 auto}
#attractions p{ font-family:'open_sansregular'; font-size:25px; color:#FFF; letter-spacing:1px; text-align:center; 
			text-shadow: #000 10px 5px 5px;
    -webkit-font-smoothing: antialiased; padding-top:140px}	
#attractions_view{ width:100%; max-width:184px; height:42px; margin-left:620px; margin-top:30px}

#attraction_line{ width:100%; max-width:1180px; height:10px; background-color:#8d2424; margin-top:25px}


#footer_bg{ width:100%; max-width:1440px; height:197px; background-image:url(../images/footer_bg.jpg);
			 background-repeat:no-repeat; margin:0 auto; overflow:hidden; clear:both}
#footer{ width:100%; max-width:1180px; height:auto; margin:0 auto}
#hour{ width:100%; max-width:1180px; height:auto; margin:0 auto; margin-top:20px}
#hour p{ font-family:'open_sansregular'; font-size:16px; color:#FFF; line-height:25px; text-align:center}

#footer_line{ width:100%; max-width:936px; height:5px; background-color:#8d2424;     margin-left: 120px;    margin-top: 20px}

#footer_lft{ width:100%; max-width:400px; height:auto; float:left; margin-left: 120px;    margin-top: 30px}
#footer_lft p{ font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#FFF}

#footer_rt{ width:100%; max-width:160px; height:auto; float:right;    margin-top: 30px; margin-right:110px}
#footer_rt p{ font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#FFF}
#footer_rt p a{ color:#FF0}

.viewmore{ width:100%; max-width:184px; height:42px;     position: absolute;    margin-top: -100px;    margin-left: 472px;}


/***************************contactus*****************************/
.contactus_lft{width: 100%;		max-width:555px; height:auto; float:left;}
.form{ width:100%; max-width:300px; height:auto; float:left; margin:10px 0 0 20px; border:1px #f1f1f1 solid; padding-left:15px; ; padding-top:15px; padding-bottom:20px; background-color:#FFF}
.contactus_rt{ width:99%; max-width:1100px; }
.map{ width:99%; max-width:1100px;   margin:15px 0px !important; height: auto}

.contact_mid{ width:100%; max-width:540px; height:auto; float:right; margin-top:20px}


/***************************************************/


.accommodations{ width:100%; max-width:1180px; height:auto; margin-top:20px}
.accommodations p{ font-family:'open_sansregular'; font-size:16px; color:#333; line-height:24px;
					 text-align:justify; padding-top:5px}
.accommodations_Lft{ width:100%; max-width:350px; height:auto; float:left}
.accommodations_Lft ul{ text-decoration:none; margin-bottom:20px}
.accommodations_Lft ul li{ font-family:'open_sansregular'; font-size:16px; color:#333; line-height:24px;
					 		text-align:justify; padding-top:5px; background-image:url(../images/bullets.png);
							 background-repeat:no-repeat; background-position:0.1em; padding-left:20px;}
.acc_img{ width:100%; max-width:729px; height:484px; float:right; margin-top:-260px}
.acc_line{ width:100%; max-width:1180px; height:4px; background-color:#a72a01}

.att_lft{ width:100%; max-width:345px; height:133px; float:left; margin-top:20px}
.att_rt{ width:100%; max-width:800px; height:auto; float:right; margin-bottom:20px}
.att_rt p{ font-family:'open_sansregular'; font-size:15px; color:#333; line-height:24px; text-align:justify; padding-top:18px}
.att_rt p a{ color:#900}	

.reservation_img{ width:100%; max-width:730px; height:auto; margin-top:5px; }
 .reservation_img p{font-family: 'open_sansregular';
    font-size: 24px;
    color: #7b2020;
    padding-top: 12px;
    padding-bottom: 20px;
    font-weight: bold;}

#info_lft{ width:100%; max-width:550px; height:auto; float:left}
#info_lft p{ font-family:'open_sansregular'; font-size:15px; color:#333; line-height:22px; padding-left:20px; }						 










@media (max-width: 1000px) {.logo{ display:none;}		
 						    #attractions_bg{ display:none}
							.view{ display:none}
							.view1{ display:none}
							.view2{ display:none}
							#welcome_img{ display:none}
							#blue_bg{ display:none}
							.line{ display:none}
							.line1{ display:none}
							h2{ display:none}
							#welcome p{ padding-left:15px; padding-right:15px; text-align:center}
							#welcome{ float:none; margin:0 auto; margin-top:20px}
							#footer_line{; margin-left:0px}
							#footer_lft{ float:none; margin:0 auto }
							#footer_lft p{ text-align:center; padding-top:20px}
							#footer_rt{ float:none; margin:0 auto }
							#footer_rt p{ text-align:center; padding-top:20px}
							#menu ul li{padding: 10px 0px}
							#menu ul li a{ color:#FFF}
							#top_bg{ background-image:url(../images/top_bg1.png); background-repeat:repeat; height:auto; overflow:hidden;}
							#top{ display:none}
							#book1{ text-align: center;   margin-top: 20px;}
							#phn_txt1{}
							#phn_txt1 { font-family:'open_sansregular'; font-size:35px; color:#900; text-align: center; 
										padding-top: 20px}
							.icon1{    text-align: center;    margin-top: 20px;}
							.accommodations p{ padding-left:10px; padding-right:10px}	
							.accommodations h1{ padding-left:10px;}	
							.acc_img{ display:none}
							.accommodations_Lft ul{ margin-left:8px}
							.att_lft{margin: 0 auto;    margin-left: 10px;    margin-top: 15px;}
							.contactus_rt{ margin-top:40px}
							.active a{ color:#FFF !important}
							#banner1{ display:none}
							.viewmore{ display:none}
							.reservation_img p{ font-size:17px}

							
 	}
	
	@media (min-width: 1000px) {
	#cal_txt1{display:none !important;}
	#weather1{ display:none !important}
							#book1{ display:none}
							#phn_txt1{ display:none}
							.icon1{ display:none}
	}
	
	
	
@media (min-width: 850px) {#logo1{ display: none; margin-top:0px !important}
							 #logo{ width:auto}
							 #loc_txt1{ display:none} 
							 #icon1{ display:none}
								#trip1{ display:none}
								#g1{ display:none}
							 .google-maps {
        position: relative;
        padding-bottom: 76%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
		
    }
    .map1{ height: 155px}							

	
	}
	
	
	
	
	
	
	.toggle, [id^=drop] {
 display: none;
}
nav {
  margin: 0;
  padding: 0;

    font-family: "Lucida Sans Unicode", "Lucida Grande" !important;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;

}
nav a {
  display: block;
  padding: 10px 12px;
  font-size: 16px;
  text-transform:uppercase;  
  text-decoration: none;
}
nav a:active{ color:#000 }
nav ul li ul li:hover { background: #a71b1b;}
nav a:hover {  color:#693F00 !important; }
nav ul ul {
  display: none;
  position: absolute;
  top: 34px;
  z-index: 9999999;
}
nav ul li:hover > ul { display: inherit; }
nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
    border-bottom: 1px solid #000;
}
nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 100px;
}

@media all and (max-width : 768px) {
nav { margin: 0; display:block; z-index:9999 }
.toggle + a,
 .menu { display: none; }
.toggle {
  display: block; z-index:9999;
  padding: 15px 15px; 
  color: #000 !important;
  font-size: 13px;
  text-decoration: none;
  border: none;
  text-transform: uppercase;
  background-color:#3355b7; margin-top:25px
}
.toggle:hover {}
[id^=drop]:checked + ul { display: block; z-index:9999 }
nav ul li {
  display: block;
  width: 100%;
}
nav ul ul .toggle,
 nav ul ul a { padding: 7px 40px; }
nav ul ul ul a { padding: 0 80px; }
nav a:hover,
 nav ul ul ul a { background-color: #F19908; color:#fff !important; border-radius:0; text-decoration:
 none}

nav ul li ul li .toggle, nav ul ul a {  }
nav ul ul {float: none;position: static;color: #000;}
nav ul ul li:hover > ul, nav ul li:hover > ul { display: none; }
nav ul ul li {display: block;width: 100%;}
nav ul ul ul li { position: static;}
}
@media all and (max-width : 700px) {
nav ul li {display: block;width: 100%;  display:block; background:#28438E right !important}
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: auto;

}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height:auto;
  ;
}
.carousel-inner > .item > img {
  position: relative;
  top: 0;
  left: 0;
  min-width: 100%;
  height: auto;
}

.google-maps {
        position: relative;
        padding-bottom: 70% !important; // This is the aspect ratio
        height: 0;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        max-height: 800px
    }