@charset "UTF-8";
@media screen and (max-width:1023px){
body {/*these are the 5 basic CSS properties and values to start a website*/
	font-family: Verdana, sans-serif;/*change this for your design*/
	font-size: 100%;/*DON'T CHANGE THIS VALUE HERE - you can set font sizes in other selector styles*/
	color: rgba(0,0,0,1.00);/*main text color, default black, change as needed*/
	margin: 0;/*removes default edges*/
	padding: 0;/*removes default settings*/
	z-index: 0;/*stacking order - small numbers a below high numbers*/
	position: relative;
	background-color:#F1EBE4;
}
#topBar{/*This is a fixed position bar along the top*/
   background-color: rgba(0,0,0,0.5);/*0.5 makes the bar 50% transparent*/
   position:fixed;
   top:0;
   left:0;
   width:100%;/*makes this bar as wide as the browser*/
   height:auto;
   z-index:99998;/*places bar top most so it's always clickable*/
}
#topBarCentering{
   width:100%;
   height:50px;
   margin:0 auto;/*this centers this box*/
   position:relative;
   z-index:99999;
}
#downArrow, nav, #galleryHolder {
display:none;
}
#mobileGalleryThumbnailBox {
      max-width: 75%; /*Set the max width of the figure or div tag to limit the size of the image inside*/
      height: auto; /*The figure or div tag will take on the height of elements inside*/
	  text-align:center;
	  margin-left:12.5%;
}
#mobileGalleryThumbnail {/*This overrides the inline HTML width and height*/
      width: 100%; /*This fits image fully in figure or div tag no matter the width of figure or div*/
      height: auto; /*This preserves aspect ratio*/
}
#centeringDiv {
	margin-top:100%;
}
.btn {
	cursor:pointer;
/*You can also add styles such as text link color, custom fonts, font-size, etc.*/
	width:50%;
}
.btn:hover {
/*You can add styles for when user hovers over the button*/
} 
#centeringDiv {
	width: 100%;/*optimum width for both desktops, laptops, and tablets*/
	min-height: 850px;/*0 = no margin for top and bottom and auto = same margin for left and right*/
	height:auto;
	position: relative;/*all children divs inside centeringDiv take their (x,y) position from top left of centeringDiv*/
	margin: 0 auto;
	z-index: 998;
	padding:0 5px;
}
header {
	padding: 0px;
	width: 100%;
	height: auto;
	position: relative;/*all children divs inside header take their (x,y) position from top left of header*/
	z-index: 2000;
	background-color:#F6B7B8;
	text-align:center;
	font-size:1em;
	top:0px;
	left:0px;
	margin:0;
}
nav {
	position:relative;
	width:0%;/*change as needed*/
	height:0px;/*change as needed*/
	z-index:1001;/*stacking order, bigger numbers are on top*/	
	top:-150px;
	left:0px;
}
.btn {
	position:relative;/*makes it draggable*/
	text-align:center;
	z-index:1002;/*stacking order, bigger numbers are on top*/
	height:0px;
}
#logo {
	position:relative;
	width:100%;
	height:100%;
	text-align:center;
	background:#A3817A;
	z-index:1;
	top:0;
}
#logoImage {
width:100%;	
height:auto;
}
.section {/*used for the main content area*/
	position:relative;
	width:100%;
	height:auto;
	z-index:999;/*stacking order - below nav and .btn and article*/	
	padding-top:20px;
}
article {/*used for the main content area*/
	position:relative;
	width:100%;
	height:auto;
	padding:999px;
	padding-top:20px;
}
article p {
text-indent:3em;	
}
footer {
	clear:both;/*clears away and floating or text wrapping*/
	position:relative;
	text-align:right;
	padding:10px;
	font-size:0.8em;
	width:100%;
	line-height:1.2em;/*This will help to vertically center the text */
	height:auto;
	z-index:800;/*stacking order - below article, nav, and .btn*/		
}
/*===========Class rules to apply to multiple elements in the HTML===============================*/
.frame {/*this creates a frame around photo/text*/
	width: auto;/*fits the frame tightly around the photo/text*/
	height: auto;/*fits the frame tightly around the photo/text*/
	margin: 0px;/*separates the outer wrapping text away from the frame border*/
	padding: 5px;/*separates the inner photo/text away from the frame border*/
	text-align: center;/*centers any caption under/above the photo inside frame*/
	border: 0px dotted #000000;/*styles the frame - adjust as desired*/
}
.frame p, figure p, figcaption p {text-indent: 0px;}/*for any paragraphs inside photo frames*/
.floatLeft {	float: left;}/*positions an element on the left of parent div and have text wrap around it*/
.floatRight {float: right;}/*positions an element on the right of parent div and have text wrap around it*/
.centerText {text-align: center;}/*apply to p, h1, h2, h3, h4, h5, h6 tags - positions text in center of parent div*/
.centerBox {	margin:0 auto;clear: both;}/*apply to div or figure tags - positions element in center of parent div - no outer text wrapping*/
.clearFloats {clear: both;}/*apply to div tags - clears away and floating or text wrapping*/
.roundedCorners10 {border-radius: 10px;}/*apply to img tags for rounded corners*/
.roundedCorners15 {border-radius: 15px;}
.roundedCorners20 {border-radius: 20px;}
.boxShadow5 {box-shadow: 5px 5px 5px #000000;}/*apply to div or img tags for shadows*/
.boxShadow10 {box-shadow: 10px 10px 10px #000000;}
.textShadow5 {text-shadow: 5px 5px 10px #000000;}/*apply to p, h1, h2, h3, h4, h5, h6 tags for shadows*/
.textShadow10 {text-shadow: 10px 10px 20px #000000;}
*:focus {
	outline:0;
}
#gallery {
	width:100%;/*adjust as needed*/
	padding:10px;/*adjust as needed*/
	margin:0 auto;/*To center the gallery*/
	background-color:rgba(0,0,0,1.00);/*adjust as needed*/
	overflow:auto;/*REQUIRED for background color to display*/
}
#gallery figure {
	float: left;
	margin: 1px 2px;/*adjust as needed*/
	border:none;
}
#gallery figure img {
	cursor: pointer;
	width:100%;
	height:100px;
}
#gallery figure figcaption {
	display:none;/*Initially hides all captions*/
	color:rgba(255,255,255,1.00);/*caption text color - adjust as needed*/
}
#galleryBig, nav, .btn {
	display:none;
}
#gallerySmall {
	display: block;
}
#videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	max-width:853px;/*same width as video itself*/
	width:100%;
	margin:0 auto;/*centers the video*/
}
#videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	max-width:853px;/*same width as video itself*/
	max-height:480px;/*same height as video itself*/
	width: 100%;
	height: 100%;
}
}