@charset "utf-8";
/* CSS Document */


@import url('https://fonts.googleapis.com/css?family=Amiko|Vollkorn+SC');

*{margin: 0;
 padding: 0;
 border: 0;
 }
 
  
body {  
	 
	 background: #DED3B0 ; 
	 color: #67727A;
	 font-family: 'Vollkorn SC', serif;
	 width:100%;
	 height:100%;
	 margin: 0;
}


.head1	{
	font-size: 195%;
	font-height: 185%;
	padding:2% 0% 0% 2%;
	margin-bottom:0%;
	font-weight: 400;
	font-family: 'Vollkorn SC', serif;
	color: #795108;
	font-weight:200;
	}

.head2 {
	font-size: 190%;
	font-weight: 700;
	text-align: center;
	padding-top: 2%;
	font-family: 'Vollkorn SC', serif;
	color: #F5F5F5; 
	}
	
.head2a {
	font-size: 190%;
	font-weight: 700;
	text-align: left;
	padding: 2% 0 0 3%;
	font-family: 'Vollkorn SC', serif;
	color:  #795108;
	
	}
	
	.head2b {
	font-size: 190%;
	font-weight: 400;
	text-align: center;
	padding: 2% 0 0 3%;
	font-family: 'Vollkorn SC', serif;
	color:  #795108;
	}
	.head2c {
	font-size: 180%;
	font-weight: 600;
	text-align: center;
	padding: 2% 0 0 3%;
	font-family: 'Vollkorn SC', serif;
	color:  #795108;
	
	}
	
	
.head3	{
	font-size: 165%;
	font-height: 155%;
	padding:4% 0 0 1%;
	font-weight: 400;
	font-family: 'Vollkorn SC', serif;
	color: #F5F5F5;
	}
.head3	a{
	text-decoration: none;
	}
	
.photo {
	max-width: 100%;
	height:auto;
	width:auto;
	margin-bottom:2px;
	}
	


/*------------Start Navigation---------*/

.try3 { border-bottom: 1px solid #d7c2a1;
	text-align: right;
	height: 45px;
	light-height: 70;
	display:none;
}	 
.try3menu {
	margin: 0 30px 0 0;
	display:none;
	font-family: 'Vollkorn SC', serif;
	font-size: 135%;
	display:inline-block;
	float: left;
	padding: 0px;
	font-weight:200;
}	 
.try3menu a {
	clear: right;
	text-decoration: none;
	margin: 0 10px;
	line-height: 60px;
	color: #795108;
	font-weight:200;
}

.try3menu a:hover {
	color: #FF973C;
}

.try3menu .current {
	color: #FF973C;
}
label {
	margin: 0 35px 0 0;
	font-size: 30px;
	light-height: 65px;
	display:none;
	width: 30px;
	float:right;
	color: #795108;
	} 
#toggle {
	display: none;
}	
	
nav {
	float: right;
	padding: 0px 20px 0 0;
}

#subnav {
	float: right;
	padding: 0px 0px 0 0;}

ul {
	list-style-type:none;
}
nav ul li{
	font-family: 'Vollkorn SC', serif;
	font-size: 135%;
	display:inline-block;
	float: left;
	padding: 10px;
	font-weight:300;
}
nav ul li a {
	color: #795108; 
	text-decoration: none;
	}
	
nav ul li a:hover {
	color: #FF973C;
}

.current {
	color: #FF973C;
}

/* -------Page Content----------*/

#section-content {
	padding: 40px;
	background:#DED3B0 ;
	line-height:210%;
	
}
	
p	{
	color: #F5F5F5;
	font-size: 125%;
	line-height: 128%;
	padding:  2% 5% 2% 5%;
	text-indent: 2%;
	text-align: inherit;
	font-family:  Amiko, Verdana, Geneva, sans-serif;
	}
	

	
.font2 {color: #795108;
	font-size: 145%;
	line-height: 128%;
	text-align:center;
	padding:  2% 5% 2% 5%;
	font-weight:50;
	
	font-family: 'Vollkorn SC', serif;
}	

.font3	{
	color: #795108;
	font-size: 125%;
	line-height: 128%;
	padding:  2% 5% 2% 5%;
	text-indent: 2%;
	text-align: inherit;
	font-family:  Amiko, Verdana, Geneva, sans-serif;
	}

.font3 a {
	color: #FF973C;
	font-size: 88%;
	line-height: 88%;
	font-weight:bold;
	text-decoration: none;}
	
.font4	{
	color: #795108;
	font-size: 125%;
	line-height: 128%;
	padding:  2% 5% 2% 5%;
	text-indent: 2%;
	text-align: center;
	font-family:  Amiko, Verdana, Geneva, sans-serif;
	}
	
p a {
	color: #FF973C;
	font-size: 88%;
	line-height: 88%;
	font-weight:bold;
	text-decoration: none;
}
p a:hover {color: #1754A4; 
	}
	
.font3 a:hover {color: #1754A4; 
	}
	
.accordion {
    background-color: #d8cba5;
    color: #795108;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 165%;
    transition: 0.4s;
	font-family: 'Vollkorn SC', serif;
}


.active, .accordion:hover {
    background-color: #ccc19d;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: DED3B0 ;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}





/*----------------------End of Navigation Sytle--------------------*/

.banner {
	width: 100%;  
	background-color: #DED3B0 ;
}
.banner-inner {
	max-width: 1500px;
	margin: 0 auto;
}

.one-fourth {
	width: 25%;
	float:left;
	text-align:center;
}


#aboutusbutton {
	background-color: #9C9374;
}
#attractions {
	background-color: #B4653A;
}
#gallerybutton {
	background-color: #88abad;
}
#contactbutton  {
	background-color: #7491B1; 
}
.one-fourth i {
	padding: 13% 0 4% 0;
}



.inner-wrapper {
	float: left;
	width: 100%;
}
.inner-wrapper-about {
	float: right;
	width: 100%;
	background-color: #9C9374;
}

.inner-wrapper-intro {
	float: right;
	width: 100%;
	background-color: #DED3B0 ; 
}

.inner-wrapper-attract {
	float: right;
	width: 100%;
	background-color: #B4653A;
}

.inner-wrapper-gallery {
	float: left;
	width:100%;
	background-color:#88abad;
}



article {
	float: left;
	margin: 0 auto;
	width:50%;
	height: auto;
}

.accord {float: left;
	margin: 0 auto;
	width:50%;
	}

.photo {
	max-width: 100%;
	height:auto;
	width:auto;
	margin-bottom: 0px;
	}
	

aside {
	float: right;
	margin: 0 auto;
	width: 50%;
	height: auto;
}

.accordcarousel {
	float: right;
	margin: 0 auto;
	width: 45%;
	height: auto;
}


.inner-wrapper-4 {
	float: left;
	width:33.333333333%;
	text-align:center;
	margin: 0;
}

.inner-wrapper-5 {
	float: left;
	width: 100%;
	background-color: #7491B1;
}


/* ---one thirds---- */

.col-container {
    display: table;
    width: 100%;
	margin-bottom: 0px;
}
.col {
    display: table-cell;
    padding: 16px;
	
}

.one-third-a {
	text-align:center;
	background-color: #8e5e98;
	width: 33%;
	margin-bottom: 0px;
}
.one-third-b {
	text-align:center;
	background-color:  #a6b5ae;
	width: 33%;
	margin-bottom: 0px;
}
.one-third-c {
	text-align:center;
	background-color: #aa8559;
	width: 33%;
	margin-bottom: 0px;
}

.random {
	background-color: #a3bc82;
	padding: 0 0 1% 2%;
	margin-top: 0px;
	clear: both;
}

.random2 {
	background-color: #307762;
	padding: 0 0 1% 2%;
	clear: both;
	margin-top: 0px;	}
.random3{
	background-color: #a9a484;
	padding: 0 0 1% 2%;
	clear: both;
	margin-top: 0px;
		}
	.random3a{
	background-color: #a9a484;
	padding: 0 0 1% 2%;
	clear: both;
	margin-top: 0px;
	text-align:center;	}

div.scroll {
    height: 300px;
    overflow: auto;
}






/*---start footer---*/
/* ---------------------- Foot -----------------------  */
.footmenu {
	font-family:  Amiko, Verdana, Geneva, sans-serif;
	font-size: 13px;
	text-align: center;
}
.footmenu a {
	color: #EB9316;
	text-decoration: none;
	font-weight:bold;
	}
	
.footmenu  a:hover {
	color: #265A88;
}

footer {
	background-color: #DED3B0 ;
	width:100%;
}

footer p {padding: 4px 0 7px 0;}
.foot {
	list-style-type: none;
	text-align: center;
	
}


.foot li {
	display: inline;
	
}

.footmenu {padding: 4px 0 7px 0;
	text-align:center;
	font-size:15px;}

footer .second {
	max-height:40px;
	margin: 0;
}

.second p {
	padding: 4px 0 7px 0;
	text-align:center;
	font-size:13px;
}

/* ------------------------------Return to top-------------------*/
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  border: none;
  outline: none;
  background-color:  #1754A4;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

#myBtn:hover {
  background-color: #FF973C;
}








/*----------------------Gallery Page---------------------------*/


img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.myGallery {
  display: none;
  }

.icons {text-align: center;}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/6 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 3px 16px;
  color: white;
  
}


.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.5;
}

.active,
.demo:hover {
  opacity: 1;
}
	


	
/*--------------Form-----------------*/

::-webkit-input-placeholder{color: #777;}
:-moz-placeholder { /* Firefox 18- */ color: #777;}
::-moz-placeholder {  /* Firefox 19+ */ color: #777;}
:-ms-input-placeholder {color: #777;}

.formcontainer{
  position: relative;
  width: 100%;
	padding: 1em;
	margin: auto;
}



#contact input[type="text"],#contact input[type="email"], #contact textarea{
	display: block;
	padding: 10px;
	margin: 10px auto;
	width: 100%;
	font-size: 16px;
	color: #777;
  border: 1px solid #ccc;
}

#contact textarea{
	font-size: 16px;
}

#contact input:hover, #contact textarea:hover{
	border: 1px solid #888;
}
#contact input:focus, #contact textarea:focus{
	border: 1px solid #777;
}


#contact textarea{
	max-width: 100%;
	min-width: 100%;
	max-height: 180px;
	min-height: 180px;
  resize: none;
}

#contact .send-button{
	text-align: center;
}

#contact .send-button button[type="submit"]{
	color: #fff;
  background: #FF973C;
  border: none;
	width: 100%;
	padding: 10px 0;
	font-size: 20px;
	text-transform: uppercase;
	transition: .5s all ease;
  cursor: pointer;
}

#contact .send-button button[type="submit"]:hover{
	background: #1754A4;
}

#contact .send-button button[type="submit"]:focus{
	position: relative;
	top: 2px;
}

/*--------- Responsive Form-------------------------*/

@media screen and (min-width: 640px){
	.formcontainer{
		width: 90%;
	}
  
  #contact textarea{
    max-width: 98%;
    min-width: 98%;
    min-height: 179px;
    margin-right: 0;
  }

	#contact .right,#contact .left{
		display: block;
	}

	#contact .right{
		float: right;
		width: 50%;
	}
  
	#contact .left{
		float: left;
		width: 50%;
	}
	.cl{
    clear: both;
  }
  
  #contact input[type="text"],#contact input[type="email"], #contact textarea{
	font-size: 14px;
	
}

#contact textarea{
	font-size: 14px;
}


#contact .send-button button[type="submit"]{
	font-size: 20px;
	
}}

/*-------------------------MEDIA QUERIES--------------------------*/

@media only screen and (max-width:900px) {
	h1 {font-size:160%;}
	h2 {font-size:145%;}
	h3 {font-size:115%;}
	p  {font-size:115%;}
	
	h1 {font-size:160%;}
	h2 {font-size:145%;}
	h3 {font-size:115%;}
	p  {font-size:115%;}
	.font2  {font-size:115%; font-weight:100; padding:  2% 5% 2% 5%; line-height: 110%;}
	.head1 {font-size:145%;}
	.head2 {font-size:145%;}
	.head2a {font-size:150%; font-weight:100;}
	.head2b {font-size:125%; font-weight:100;}
	.head3 {font-size:125%;}
	.accordion {font-size:150%;}
}
/*-------------------------MEDIA QUERIES--------------------------*/

@media only screen and (max-width:768px) {
	h1 {font-size:160%;}
	h2 {font-size:145%;}
	h3 {font-size:115%;}
	p  {font-size:115%;}
	.font3  {font-size:115%;}
	.font2  {font-size:115%; font-weight:500; padding:  2% 5% 2% 5%;}
	.head1 {font-size:155%;}
	.head2 {font-size:145%;}
	.head2a {font-size:145%; font-weight:100;}
	.head2b {font-size:145%; font-weight:100;}
	.head3 {font-size:125%;}
	.accordion {font-size:145%;}
	header {position: absolute;}
	/* #logo {margin:15px 0 20px -25px;} 
		background: url (img/) no-repeat center;} 
	#menu-icon {display: inline-block;}*/  
	nav {display:none; padding: 0;}
	nav ul, nav:active ul {
	display:none;
	z-index: 1000;
	position:absolute;
	padding: 20px;}
	
	label {display:block;
		   cursor: pointer;}
	.try3	{display:block;
		   cursor: pointer;}
	.try3menu {text-align: center;
				width: 50%;
				background: #DED3B0 ;
				display: none;
				z-index: 1000;
		position:absolute;
		padding: 0px;
		right: 32px;
		top: 56px;
		border: 2px solid #795108;
		border-radius: 15px 0 0 0 ;
		
		}
	.try3menu a { display: block;
				border-bottom: 1px solid #795108;
				
				margin: 0; }
	#toggle:checked + .try3menu {
		display: block;
		}
	.one-fourth i{
		padding: 8% 0 1% 0;}
	article {width: 100%;}
	aside {width: 100%;}
	.inner-wrapper-4 {
		width:100%;
		}
	
	}
@media only screen and (max-width:625px) {
	h1 {font-size:140%;}
	.accordion {font-size:115%;}
	.col { 
        display: block;
        width: 100%;
    }
}


@media only screen and (max-width:520px) {
	h1 {font-size:135%;}
	h2 {font-size:145%; padding: 5% 0 3% 0;}
	h3 {font-size:125%; padding: 5% 0 3% 0;}
	.head1 {font-size:140%;}
	.head2 {font-size:140%;}
	.head2a {font-size:140%; font-weight:400;}
	.head2b {font-size:130%; font-weight:400;}
	.head3 {font-size:125%;}
	.accordion {font-size:115%;}
	p  {font-size:99%;}
	.font2 {font-size:105%;}
	.font3 {font-size:105%;}
	.font4 {font-size:105%;}
	.one-fourth {float:left;
	width: 100%;}
	.one-fourth i{
		padding: 15% 0 0 0;}
	#contact .send-button button[type="submit"]{
	font-size: 16px;}
	#contact input[type="text"],#contact input[type="email"], #contact textarea{
	font-size: 13px;}

#contact textarea{
	font-size: 13px;}
	}
@media only screen and (max-width:500px) {
	h1 {font-size:100%;
	}
	.head1 {font-size:120%; font-weight:500;}
	.head2 {font-size:140%;}
	.head2a {font-size:140%; font-weight:400;}
	.head2b {font-size:130%; font-weight:400;}
	.head3 {font-size:125%;}
	.accordion {font-size:100%;}
}
@media only screen and (max-width:352px) {
	h1 {font-size:90%;
		font-weight:bold;}
	h2 {font-size:80%;}	
	.head1 {font-size:100%;}
	.head2 {font-size:140%;}
	.head2a {font-size:140%; font-weight:300;}
	.head2b {font-size:130%; font-weight:300;}
	.head3 {font-size:120%;}
	.accordion {font-size:100%;}
	h3 {font-size:100%;}
	p  {font-size:95%;
		padding:  3% 4% 3% 4%;}
	
	
	#section-content {
	padding: 20px;}
	header {position: absolute;}
	nav {display:none; padding: 0;}
	nav ul, nav:active ul {
	display:none;
	z-index: 1000;
	position:absolute;
	padding: 20px;}
	
	label {display:block;
		   cursor: pointer;
		   font-size:26px;}
	.try3	{display:block;
		   cursor: pointer;}
	.try3menu {text-align: center;
				width: 50%;
				font-size:80%;				
				background: #DED3B0 ;
				display: none;
				z-index: 1000;
		position:absolute;
		padding: 0px;
		right: 32px;
		top: 33px;
		border: 2px solid #795108;
		border-radius: 15px 0 0 0 ;
		
		}
	.try3menu a { display: block;
				border-bottom: 1px solid #795108;
				font-weight:bold;
				
				margin: 0; }
	#toggle:checked + .try3menu {
		display: block;
		}
		
	.font2 {
	font-size: 100%;
	font-weight:100;
	padding:  2% 5% 2% 5%;
	}
	.font3  {font-size:95%;
		font-weight:100;
		padding:  2% 4% 2% 4%;}
	.font4  {font-size:95%;
		padding:  2% 4% 2% 4%;}

tr {
	margin: 10px;
	padding: 10px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	position: relative;
	z-index: auto;
}
#myBtn {
  bottom: 10px;
  right: 10px;
  z-index: 99;
   cursor: pointer;
  padding: 10px;
  
}




}