﻿body{
	max-width: 1500px;
	margin-left:auto;
	margin-right:auto;
}


.logo{padding-top:30px;
}

p{
font-family: 'Libre Baskerville', serif;
margin:auto;
padding:20px 20px 20px 20px;
text-align:center;
}

.textbox{
border: 1.5px #eed5d8 solid;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;

}

#bigpicture{
position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 47.2px;
  z-index:-1;
}

#bigpicture2{

  position: relative;
  top:0px;
  left:0px;
  z-index:-1;
  width:100%;
}

#gallerycontainer{
border: 1.5px #eed5d8 solid;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
padding:10px 10px 10px 10px;

}

.gallerycontainer{
border: 1.5px #eed5d8 solid;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
padding:10px 10px 10px 10px;

}


#scrollingcontent{

background-color:white;
opacity: .95;


}
/*topnav styles for navigation menu starts*/
.topnav {

  overflow: hidden;
  margin-left: auto;
  margin-right:auto;
  text-align: center;
  font-family: 'Libre Baskerville', serif;
  background-color:#E7D3CC;
  z-index:2;
  
 
  }

.topnav a {
 
    color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
   font: Times New Roman;
  display: inline-block;
  position: relative;
  opacity:.5
}

.topnav a:hover {

  color: navy;
}


.topnav .icon {
  display: none;
  color: #cfa799;
  
}

@media screen and (max-width: 600px) {
  .topnav a {display: none;}
  .topnav a.icon {
    display: block;
    position:absolute;
    right:0;
    top:0;
  }
  .socialmedialinks{display:none}
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
   } 
 
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
 /*next allows big picture to stick to top on mobile instead of a little ways down*/
  #bigpicture{
  position: -webkit-sticky;
  position: sticky;
  top:0;

  }
}
/*next media query allows myTopnav to be sticky on bigger screens*/
@media screen and (min-width: 601px) {
#myTopnav{
  position: -webkit-sticky;
  position: sticky;
  top:0;
}
}
/*topnav styles for navigation menu ends*/
body {
  background-color:white;
}


.centerimage {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}
/*media query to determine which image size to use*/
@media screen and (min-width:601px) {
    .mobileimage {
        display:none;
    }
}
@media screen and (max-width:600px) {
    .desktopimage {
        display:none;
    }
}
    
}

/*slideshow on timer*/
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}




/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}/* slideshow on timer styles end */

.facebooklink:hover{
opacity:0.7;
	
}
.instagramlink:hover{
opacity:0.7;	
}

.button{
	background-color: #feecea;
	font-family: 'Libre Baskerville', serif;
	border: 1.5px  #eed5d8 solid; 
	padding:10px 10px 10px 10px;
	width: 200px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 20px;
	margin-bottom:20px;
	text-align:center;
	color: #333333;
}

.button:hover{
	border: 1.5px #feecea solid;
	background-color: #eed5d8
}


a{
	text-decoration:none;
	color:#333333;
	
}

/* 3 column Gallery Styles... just modify the relevant styles to 4 columns for pages where required... so we can only get the CSS once with some per page edits as needed. */

/* Gallery styles starts*/
/*photo gallery style stuff*/

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
   padding: 0;
}

/* Create 3 equal columns that sits next to each other */
.photocolumn {
  flex: 33.33%;
  max-width: 33.33%;
 padding: 0 4px;
 }

.photocolumn img {
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns (NO Longer using to avoid having the 3rd column tail)
@media screen and (max-width: 800px) {
  .photocolumn {
    flex: 50%;
    max-width: 50%;
  }
}*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .photocolumn {
    flex: 100%;
    max-width: 100%;
  }
}
.container{
	position: relative;
}
.imageoverlaid{
padding:10px 10px 10px 10px;
text-align:center;
display:table-cell;
border: 1.5px #eed5d8 solid;
margin-top:4px;
margin-bottom:4px;


}

.overlaybox{
width: 70%;
	height: 80%;
  background: white;
  opacity: 0.7;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align:center;
}

.overlaybox:hover{
	opacity:0.5;
}

.imagecaption{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

	
}
/* Gallery styles ends*/

img{
	max-width:100%;
}

h1{
	text-align:center;
	font-family: 'Tangerine', cursive;
	font-weight:normal;
	font-size:40px;
	margin-bottom:0px;
		padding-bottom:0px;
	
	
}