@charset "utf-8";

/* =-=-=-=-=-=-=-= CSS RESET =-=-=-=-=-=-=*/

	* {
		margin: 0;
		padding: 0;
		text-align: center;
		font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	}
/*------     
	
	
	*****   **    **         * ***        ****           * 
  ******  ***** *****       *  ****  *    *  *************  
 **   *  *  ***** *****    *  *  ****    *     *********    
*    *  *   * **  * **    *  **   **     *     *  *         
    *  *    *     *      *  ***           **  *  **         
   ** **    *     *     **   **              *  ***         
   ** **    *     *     **   **   ***       **   **         
   ** **    *     *     **   **  ****  *    **   **         
   ** **    *     *     **   ** *  ****     **   **         
   ** **    *     **    **   ***    **      **   **         
   *  **    *     **     **  **     *        **  **         
      *     *      **     ** *      *         ** *      *   
  ****      *      **      ***     *           ***     *    
 *  *****           **      *******             *******     
*     **                      ***                 ***       
*                                                           
 **                                                         
                        -------*/

/*Global*/

body {
	width: 100%;
	height: auto;
	background-color: #F3EA9B;
	
}

main {
	height: auto;
	width: 100%;
	background-color: red;
}

#logo {
	margin-left: 1%;
	margin-top: .15%;
	float: left;
	width: 20%;
	height: auto;
}

header {
	height: 10%;
	width: 100%;
	background-color: white;
	position: fixed;
	margin-top: -5%;
	margin-left: -1%;
	float: left;
  	padding: 10px;
  	box-shadow: 0 4px 2px -2px gray;
}


/*Headings*/

h1 {
	font-family: 'Merienda One', cursive;
	font-size: 1em;
	color: white;
	text-shadow: 2px 2px 4px #000000;
	margin-top: -18%;
}

h2 {
		font-family: 'Merienda', cursive;
	font-size: 1.8em;
	color: #A73425;
	border-bottom: 2px solid #D0B063;
	border-spacing: 2%;
	padding-bottom: 1%;
	}

h4 {
	font-family: 'Be Vietnam', sans-serif;
	font-size: 1.2em;
}

p {
	font-family: 'Be Vietnam', sans-serif;
	font-size: 1em;
}

/*****Navigation******/

nav {
	margin-top: 1%;
	margin-left: 55%;
	background-color: #00000;}

a {
	color:darkred;
	font-size: 2em;
	text-decoration: none;
	font-family: 'Be Vietnam' , sans-serif;
}

a:hover {
	color: darkgoldenrod;
}

.fade-link {
	text-decoration: none;
	transition: color 0.3s linear;
	-webkit-transition: color 0.3s linear;
	-moz-transition: color 0.3s linear;
}

.fade-link:hover {
	color: darkgoldenrod;
}

ul {
	list-style-type: none;
}

li {
	display: inline-block;
	padding-left: 7%;
}

.social-media {
	width: 1%;
}

/********Homepage********/

#homepage {
		margin-top: 10%;
		width: 100%;
		height: auto;
	}

.homepage-social {
	width: 30%;
	padding-right: 5%;
}

#social {
	margin-left: 90%;
	margin-top: -7.5%;
}
.text-content {
		margin-top: -45%;
		text-align: center;
		color: white;
		font-family: 'Be Vietnam', sans-serif;
		font-size: 4em;
		text-shadow: 2px 2px 4px #000000;
		height: 50%;
	}
	
.button {
	display: inline-block;
	width: 15%;
	height: 15%;
	margin-top: 10%;
	margin-left: -1%;
	padding: .5% 5% 1% 5%;
	border: none;
	border-radius: 25px;
	color: white;
	background-color: darkred;
	font-family: 'Be Vietnam', sans-serif;
	font-size: 2em;
	text-align: center;
	box-shadow: 0 4px 2px -2px black;
	transition: transform 1.5s;	
	}
	
.button:hover {
    transform: scale(1.2);
  }


/*****Slideshow*****/


.slideshow {
  	width: 90%;
	height: auto;
  	position: relative;
  	margin-top: 10%;
	margin-left: 5%;
}

.slides {
	width:100%;
	height: 100%;
	margin-top: -5%;
}


/************Footer*****************/

footer {
	width: 100%;
	height: auto;
	padding-top: 2%;
	padding-bottom: 5%;
	background-color:darkred;
	margin-top: 10%;
	
}


.footer-column {
	display: inline-block;
	float: left;
	vertical-align: top;
	max-width: 33vw;
	height: 20%;
	padding: 0vh 2vw;
	text-align: left;
	border-bottom: none;
	margin-top: 5%;
	padding-bottom: 8%;
	color: white;
	}	

.footer-title {
	font-family: 'Be Vietnam', sans-serif;
	font-size: 1.8em;
	color: white;
	border-bottom: 2px solid #D0B063;
	border-spacing: 2%;
	padding-bottom: 1%;
}

.footer-title-main {
	margin-top: 30%;
	margin-left: -2%;
	font-size: 4em;
	padding-top: -10%;
}


/*****Google Map*****/

#map {
    width: 40%;
    height: 40vh;
	margin-top: 5%;
	margin-left: 55%;
    background-color: grey;
	
      }

/******Menu******/

#menu {
		margin-top: -5%;
		width: 100%;
	}

.image-menu {
		height: 30%;
		margin-top: 10%;
		margin-left: 5%;
	}

.menu-column {
	display: inline-block;
	vertical-align: top;
	max-width: 33vw;
	padding: 0vh 7vw;
	padding-bottom: 20%;
	text-align: center;
	border-bottom: none;
	margin-top: 8%;
	}

.menu-title {
	margin-top: 8%;
	margin-left: 5%;
	font-size: 4em;
	animation: 1s ease-out 0s 1 slideInFromLeft;
	}	

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

/*******Gallery**********/

#gallery {
	margin-top: -5%;
	width: 100%;
	
}	

.gallery-title {
	margin-top: 10%;
	margin-left: -2%;
	font-size: 4em;
	animation: 1s ease-out 0s 1 slideInFromLeft;
}


.photo-row {
  display: -ms-flexbox; 
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
  padding: 0 4px;
}


.photo-column {
  	-ms-flex: 25%; 
  	flex: 25%;
  	max-width: 25%;
  	padding:0 -15px 10%;;
	margin-top: 2%;
	margin-left: 10%;
}

.photo-column img {
  	margin-top: -35%;
	margin-left: 25%;
	padding-top: 40%;
	padding-right: 20%;
  	vertical-align: middle;
  	width: 135%;
}	
	


.image-menu {
		width: 50%;
		height: 20%;
		margin-top: 10%;
		margin-left: 0%;
	}

.gallery-text {
	font-family: 'Merienda', cursive;
	font-size: 2em;
	margin-top: 8%;
	color: darkred;
}

/* Custom button design */
.fancybox-button {
  background: transparent;
  color: #333;
}

.fancybox-toolbar .fancybox-button:hover {
  background: rgba(223, 223, 223, 0.5);
  color: #c11c95;
}

/* Make close button a bit bigger */
.fancybox-button--close {
  padding: 7px;
}

/* Navigation arrows */
.fancybox-navigation .fancybox-button {
  z-index: 99996;
}

.fancybox-navigation .fancybox-button div {
  padding: 0;
}

.fancybox-navigation .fancybox-button[disabled],
.fancybox-navigation .fancybox-button[disabled]:hover {
  color: #888;
}

.fancybox-navigation .fancybox-button:hover {
  color: #000;
}

/* Change backdrop color */
.fancybox-bg {
  background: #eee;
}

/* Initially hide the caption */
.caption {
  display: none;
}

/* Change position and design of caption area */
.fancybox-caption {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  padding: 0;
  width: 300px;
  background: #eee;
  color: #333;
  box-shadow: 0 0 20px #888;
  z-index: 99996;
  text-align: left;
  
  /* Hide next to right edge */
  transform: translate3d(320px, 0, 0);
}

.fancybox-caption::before {
  display: none;
}

.fancybox-caption > div {
  margin-top: 44px;
  padding: 20px;
  max-height: calc(100vh - 44px);
  overflow: auto;
}

/* Overwrite the default animation */
.fancybox-show-caption .fancybox-caption,
.fancybox-caption {
  transition: transform .2s;
}

/* Reveal caption */
 .fancybox-show-caption.fancybox-vertical-caption .fancybox-caption {
  transform: translate3d(0, 0, 0);
}

/* Styling of caption content */
.fancybox-caption a {
  color: #333;
}

.fancy-nav a {
  text-decoration: none;
  font-weight: normal;
  font-size: 20px;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #444;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 18px;
  text-align: center;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  outline: none;
}

.fancy-nav a:hover {
  text-decoration: none;
}


/*****About*****/

#about {
	margin-top: -5%;
	width: 100%;
	
}	

.image-about {
		width: 50%;
		height: 20%;
		margin-top: 10%;
		margin-left: 0%;
	}

.about-title {
	margin-top: 8%;
	margin-left: 5%;
	font-size: 4em;
	animation: 1s ease-out 0s 1 slideInFromLeft;
	}	

.about-column {
	display: inline-block;
	vertical-align: top;
	max-width: 33vw;
	padding: 0vh 7vw;
	padding-bottom: 20%;
	text-align: center;
	border-bottom: none;
	margin-top: 8%;
	}
.about-photo {
	width: 160%;
	margin-left: -50%;
}
/*****Contact****/

#contact {
	margin-top: -5%;
	width: 100%;
}

.image-contact {
		width: 50%;
		height: 20%;
		margin-top: 10%;
		margin-left: 0%;
	}

.contact-title {
	margin-top: 8%;
	margin-left: 5%;
	font-size: 4em;
	animation: 1s ease-out 0s 1 slideInFromLeft;
}

.contact-column {
	display: inline-block;
	vertical-align: top;
	max-width: 33vw;
	padding: 0vh 2vw;
	padding-bottom: 20%;
	text-align: left;
	border-bottom: none;
	margin-top: 7%;
	}


/*******Form*******/

.contact-container {
	margin-top: 5%;
  	border-radius: 2%;
  	background-color:  darkgoldenrod;
  	padding: 2% 3% 2% 3%;
	width: 100%;
}	

input[type=text], select, textarea {
  	width: 100%;
  	padding-bottom: 5%;
 	 border: 1px solid #ccc;
 	 border-radius: 4px;
  	box-sizing: border-box;
 	 margin-top: 6px;
 	 margin-bottom: 16px;
 	 resize: vertical;
}

input[type=submit] {
  background-color: darkgoldenrod;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: darkred;
}

.label-form {
	color: white;
}

#menu-toggle {
	display: none;
}

slideout-sidebar {
	display: none;
}


/*************Tablet**************/

@media ( min-width : 768px ) and (max-width:1024px){
	
body {
		overflow-x: hidden;
	}	
	
#logo {
	margin-left: 2%;
	margin-top: 1%;
	float: left;
	width: 40%;
	}
	
	nav {
		display: none;
	}
	
/*******Responsive Navigation*********/

/* -- Sidebar Menu -- */
	.slideout-sidebar {
		position: fixed;
	  	top: 0;
	  	right: -100vw;
	  	z-index: 0;
	  	width: 30vw;
	  	height: 100%;
	  	padding: 5vw;
	  	background-color: white;
	  	transition: all 50ms ease-in-out;
	}
	.slideout-sidebar ul {
	  	list-style: none;
	 	margin: 10%;
	 	padding: 0;
	}
	.slideout-sidebar ul li {
	  	padding: 3vw 0;
	  	border-bottom: .3vw solid ;
	  	color: darkred;
	}
	.slideout-sidebar ul li:last-child {
	  	border-bottom: 0;
	}
	
/* -- Hamburger Menu Icon -- */
	#menu-toggle {
	  	display: none;
	}
	#menu-toggle2 {
	  	display: none;
	}
	.menu-icon {
	  	position: fixed;
	  	top: 2vw;
	  	right: 1vw;
	  	font-size: 6vw;
	  	z-index: 2;
	  	transition: all 50ms ease-in-out;
	}
	.menu-icon i {
		display: inline-block;
	    width: 10vw;
	    height: 10vw;
		margin-top: -15%;
	    line-height: 12vw;
	    text-align: center;
		color: darkgoldenrod;
	}

/*-- Toggle Function --*/
	#menu-toggle:checked ~ .slideout-sidebar {right: 0vw;}
	#menu-toggle:checked + .menu-icon{right: 0vw;}

.icons {
		float: right;
		padding-right: 2vw;
		padding-top: 6vw;
	}
	.icons i {
		margin: 0 1.5vw;
		color: darkgoldenrod;
		font-size: 7vw;
		padding-right: 3.5vw;
		right: 1vw;
	}
	
	a { font-size:7vw;}
	
/*****Homepage*****/
	
	h1 {
	font-size: 1em;
	color: white;
	margin-top: 5%;
}

p {
	font-size: .4em;
}	

.homepage-text {
		font-size: .6em;
	}
	
	
/*****Nav*****/

	header {
	margin-top: -10%;
	margin-left: -1%;
}

	.social-media {
		width: 30%;
	}
	

/*****Slideshow*****/


.slideshow {
  	width: 100%;
  	position: relative;
  	margin-top: 15%;
	margin-left: 5%;
}

.slides {
	width: 100%;
	height: 100%;
	margin-top: 5%;
}	
	

/************Footer*****************/

footer {
	width: 100%;
	height: auto;
	padding-top: 2%;
	padding-bottom: 5%;
	margin-top: -5%;
}


.footer-column {
	padding: 0vh 2vw;
	text-align: center;
	margin-top: 5%;
	margin-left: 7%;
	padding-bottom: 10%;
	}	
	
.footer-title-main {
	margin-top: 15%;
	margin-left: -2%;
}

.footer-title {
	font-size: 1.8em;
	border-spacing: 2%;
	padding-bottom: 1%;
}

	/*****Google Map*****/

#map {
    width: 70%;
    height: 45vh;
	margin-top: 10%;
  	margin-left: 14%;
	}
/*****Button*****/
	
.button {
	display: inline-block;
	width: 25%;
	height: 15%;
	margin-top: 10%;
	margin-left: -1%;
	padding: .5% 5% 1% 5%;
	border: none;
	border-radius: 25px;
	color: white;
	background-color: darkred;
	font-family: 'Be Vietnam', sans-serif;
	font-size: 1.5em;
	text-align: center;
	box-shadow: 0 4px 2px -2px black;
	transition: transform 1.5s;
	}
	
/********About*********/
	
.image-about {
		width: 50%;
		height: 20%;
		margin-top: 15%;
		margin-left: 0%;
	}
	
.about-title { 
	margin-top: -22%;
	margin-left: 4%;
	}	

.about-column {
	display: inline-block;
	vertical-align: top;
	max-width: 33vw;
	padding: 0vh 7vw;
	text-align: center;
	border-bottom: none;
	margin-top: 15%;
	}
	
.about-photo {
	width: 150%;
	margin-left: -25%;
}

/************Menu************/

.image-menu {
		margin-top: 10%;
		margin-left: -1%;
	}

.menu-column {
	max-width: 33vw;
	padding: 0vh 7vw 5vw;
	margin-top: 10%;
	}

.menu-title {
	margin-top: -25%;
	margin-left: 5%;
	font-size: 6em;
	animation: 1s ease-out 0s 1 slideInFromLeft;
	}	
p {
		font-size: 1em;
	}
	
	h2 {
		font-family: 'Merienda', cursive;
	}

/******Gallery******/
	
	
.gallery-title {
	margin-top: -23%;
	font-size: 5em;
}


.photo-row {
  display: -ms-flexbox; 
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
  padding-left: 5%;
	padding-right: -10%;
}


.photo-column {
  	max-width: 70%;
	padding-bottom: 5%;
	pdding-left: 15%;
	padding-right: 15%;
	margin-top: 5%;
	margin-left: 4%;
}

.photo-column img {
  	margin-top: 2%;
	margin-left: -20%;
	padding-bottom: -10%;
  	width: 160%;
}	
	
.image-menu {
		margin-top: 15%;
		margin-left: 0%;
	}
	
	.gallery-text {
		margin-top: 10%;
	}	
	
	
/*********Contact**********/	
	
.image-contact {
		margin-top: 15%;
	}

.contact-title {
	margin-top: -23%;
	font-size: 5em;
}

.contact-column {
	display: inline-block;
	vertical-align: top;
	max-width: 33vw;
	padding: 0vh 2vw;
	text-align: left;
	border-bottom: none;
	margin-top: 15%;
	margin-left: -3%;
	}


/*******Form*******/

.contact-container {
	margin-top: 5%;
  	border-radius: 2%;
  	background-color:  darkgoldenrod;
  	padding: 2% 3% 2% 3%;
	width: 140%;
}	
	

}	


/********Laptop*********/

@media (min-width: 1024px) and (max-width:1600px){
	
	
#logo {
	margin-left: 2%;
	margin-top: 1%;
	float: left;
	width: 25%;
	}
	
	nav {
		display: none;
	}

	h2 {
		font-family: 'Merienda One', cursive;
	}	
	
/*******Responsive Navigation*********/


/* -- Sidebar Menu -- */
	.slideout-sidebar {
		position: fixed;
	  	top: 0;
	  	right: -100vw;
	  	z-index: 0;
	  	width: 25vw;
	  	height: 100%;
	  	padding: 3vw;
	  	background-color: white;
	  	transition: all 50ms ease-in-out;
	}
	.slideout-sidebar ul {
	  	list-style: none;
	 	margin: 10%;
	 	padding: 0;
	}
	.slideout-sidebar ul li {
		margin-top: 5%;
	  	padding: 2vw 0;
	  	border-bottom: .3vw solid;
	  	color: darkred;
	}
	.slideout-sidebar ul li:last-child {
	  	border-bottom: 0;
	}
	
/* -- Hamburger Menu Icon -- */
	#menu-toggle {
	  	display: none;
	}
	#menu-toggle2 {
	  	display: none;
	}
	.menu-icon {
	  	position: fixed;
	  	top: -1vw;
	  	right: 2vw;
	  	font-size: 5vw;
	  	z-index: 2;
	  	transition: all 50ms ease-in-out;
	}
	.menu-icon i {
		display: inline-block;
	    width: 5vw;
	    height: 5vw;
		margin-top: -20%;
	    line-height: 12vw;
	    text-align: center;
		color: darkgoldenrod;
	}

/*-- Toggle Function --*/
	#menu-toggle:checked ~ .slideout-sidebar {right: 0vw;}
	#menu-toggle:checked + .menu-icon{right: 0vw;}

.icons {
		float: right;
		padding-right: 2vw;
		padding-top: 6vw;
	}
	.icons i {
		margin: 0 1.5vw;
		color: darkgoldenrod;
		font-size: 7vw;
		padding-right: 3.5vw;
		right: 1vw;
	}
	
	a { font-size: 3.6vw;}

/*****Homepage*****/
	
	h1 {
	font-size: 1em;
	color: white;
	margin-top: 5%;
}

p {
	font-size: .5em;
}	
	
	.homepage-text {
		font-size: .5em;
	}
	
	
/*****Nav*****/

	header {
	margin-top: -5%;
	margin-left: -1%;
}

#homepage {
		margin-top: 5%;
		width: 100%;
		height: auto;
	}
	
	.social-media {
		width: 10%;
	}
	
	
	
/*****Slideshow*****/


.slideshow {
  	width: 100%;
  	position: relative;
  	margin-top: 10%;
	margin-left: 5%;
}

.slides {
	width: 100%;
	height: 100%;
	margin-top: 5%;
}	
	

/************Footer*****************/

footer {
	width: 100%;
	height: auto;
	padding-top: 2%;
	padding-bottom: 5%;
	margin-top: -5%;
}


.footer-column {
	padding: 0vh 2vw;
	text-align: center;
	margin-top: 5%;
	margin-left: 10%;
	padding-bottom: 10%;
	}	
	
.footer-title-main {
	margin-top: 20%;
	margin-left: -2%;
}

.footer-title {
	font-size: 1.8em;
	border-spacing: 2%;
	padding-bottom: 1%;
}

	/*****Google Map*****/

#map {
    width: 70%;
    height: 45vh;
	margin-top: 10%;
  	margin-left: 14%;
	}
/*****Button*****/
	
.button {
	font-size: 1.5em;
	}
	
/********About*********/
	
.image-about {
		width: 50%;
		height: 20%;
		margin-top: 10%;
		margin-left: 0%;
	}
	
.about-title {
	margin-top: -16%;
	margin-left: 4%;
	}	

.about-column {
	display: inline-block;
	vertical-align: top;
	max-width: 33vw;
	padding: 0vh 7vw;
	text-align: center;
	border-bottom: none;
	margin-top: 10%;
	}
	
.about-photo {
	width: 180%;
	margin-left: -40%;
}

/************Menu************/

.image-menu {
		margin-top: 10%;
		margin-left: -1%;
	}

.menu-column {
	max-width: 33vw;
	padding: 0vh 7vw;
	margin-top: 5%;
	}

.menu-title {
	margin-top: -17%;
	margin-left: 5%;
	font-size: 6em;
	animation: 1s ease-out 0s 1 slideInFromLeft;
	}	
p {
		font-size: 1em;
	}

/******Gallery******/
	
	
.gallery-title {
	margin-top: -16%;
	font-size: 5em;
}


.photo-row {
  display: -ms-flexbox; 
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
  padding-left: 10%;
	padding-right: -15%;
}


.photo-column {
  	max-width: 50%;
	padding-bottom: 5%;
	pdding-left: 15%;
	padding-right: 15%;
	margin-top: -5%;
	margin-left: 4%;
}

.photo-column img {
  	margin-top: 1%;
	margin-left: -25%;
	padding-bottom: -5%;
  	width: 160%;
}	
	
.image-menu {
		margin-top: 10%;
	}
		
/*********Contact**********/	
	
.image-contact {
		margin-top: 10%;
	}

.contact-title {
	margin-top: -16%;
	font-size: 5em;
}

.contact-column {
	display: inline-block;
	vertical-align: top;
	max-width: 33vw;
	padding: 0vh 2vw;
	text-align: left;
	border-bottom: none;
	margin-top: 5%;
	margin-left: -4.5%;
	
	}


/*******Form*******/

.contact-container {
	margin-top: 5%;
	margin-left: 5%;
  	border-radius: 2%;
  	background-color:  darkgoldenrod;
  	padding: 2% 3% 2% 3%;
	width: 140%;
}	
	
	
	
}