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


html{
	height: 100%;
	background-color:#DCDCDC;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


/*Style for Footer Bar*/
.footerbar{
	width:100%;
	background-color: #474747; 
	bottom: 0;
	height: 60px;
	position: fixed;
	text-align: center;
	font-size: 16px;
	color: white;
	text-decoration: none;
	padding-bottom: 15px;
	line-height: 30%;
	display: block;

}
	

/* Styles the top navigation bar*/
.menubar {
	background-color: #585858;


	overflow:hidden;
}

/*Style for the navigation buttons*/

.menubar a {
	float: right;
	color: #36B449;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 20px;
	font-weight: bold;
	display: block;
}

/*Style for navigation buttons when hover*/

.menubar a:hover {
	background-color: #36B449;
	color: black;
}

/*Style for active navigation buttons*/
.menubar a.active {
	background-color: #007C0E;
	color: white;
}


/*Style to hide link on small screens*/

.menubar .icon {
  display: none;
}

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one */
@media screen and (max-width : 600px ){
  .menubar a:not(:nth-child(6)) {display: none;}
  .menubar a.icon {
    float: right;
    display: block;  
  }
}

/* The "responsive" class is added to the menubar with JavaScript when the user clicks on the icon. This class makes the menubar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width : 600px ){
  .menubar.responsive {position: relative;}
  .menubar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .menubar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

} 

/*Hide Procreations Brewing Banner with small screens*/
@media screen and (max-width : 1500px) {
	.banner{
		display: none;
	}
}

.storeredirectmessage {
	float: none;
	text-align: center;
	font-size: 17px;
	color: #007C0E;
	font-weight: bold;
	display: block;
	max-width: 100%;
	padding: 0px;
	margin: 15px;

}

.prop65{
	text-align: center;
	font-size: 17px;
	color:black;
	font-weight: bold;
	
	
	max-width: 80%;
	margin: auto;
	padding: 10px;
	clear:both;
}


/*Styling for message on home page*/

.homemessage {
	float: none;
	display: block;	
	text-align: center;
	font-size: 22px;
	color: white;
	font-weight: bold;
	background-color: rgba(50, 50, 50, .8);
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	width: 1385px;
	max-width: 89%;
	padding: 15px;
	border-radius: 10px

}


/*Resize font & pictures with small screens*/
@media screen and (max-width : 600px) {
	.homemessage{
	border-radius: 5px;
	width: 90%;
} }
	
	.ContainerVideo{
	width: 100vw;
	height:100vh;
	position:fixed;
	padding: 0;
	margin: 0;
	left: 0px;
	top: 0px;
	z-index: -1000;
	overflow: hidden;
	background-color: #0D0D0D;
	}
	.Parallax {
		height:100%;
		width:100%;
		object-fit: cover;
}

	.ParallaxVideo video{
		min-height: 100%;
		position: fixed;
		top: 0;
		z-index: -999;	
			
	
	}
	.ParallaxVideo h1{
		color: #1A1A1A;
		font-size: 76px;
		font-weight: 700;
		text-align: center;
		text-transform: uppercase;
			}	

	.footspacer{
		height: 100px;
		background: none;	
	}

/*Enlarges the view of a picture in menu*/
    ul {
      display: flex;
    }

    li {
      list-style-type: none;
      padding: 10px;
      position: relative;
    }
	
/*Hides large images unless hover*/
.large {
	position: absolute;
	left: -9999px;
	z-index: 1;
}

li:hover .large{
	left: 20px;
	top: 0px;
}

.large-image {
	border-radius: 10px;
	box-shadow: 1px 1px 3px 3px rgba(127, 127, 127, 0.15);;
	max-height: 500px;
	z-index: 1;
}

/*Styling for thumbnails on menu*/

.thumbnail {
	border-radius: 4px;
	max-height: 200px;
	z-index: -1;
}

/*Styling for featured items*/
.featured {
	background-color: #B5B5B5;
	color: black;
	width: 90%;
	padding: 30px;
	text-align: left;
	margin: 0 auto;
	font-size: 24px;
	height: 100%;
	max-width: 900px;
}

/* Featured beer image size*/
.featurepicleft{
	width: 200px;
	padding: 15px;
	float: left;
}
.featurepicright{
	width: 200px;
	padding: 15px;
	float: right;
}

/*Resize font & pictures with small screens*/
@media screen and (max-width : 600px) {
	.featured{
	background-color: #B5B5B5;
	color: black;
	width: 90%;
	padding: 30px;
	text-align: left;
	margin: 0 auto;
	font-size: 18px;
	height: 100%;
	max-width: 900px;

	}
	.featurepicleft{
	max-width: 300px;
	text-align: center;
	width: 100%;
	display: block;
	margin: auto;
	margin-bottom: 10px;
	

}
	.featurepicright{
	max-width: 300px;
	text-align: center;
	width: 100%;
	display: block;
	margin-bottom: 10px;
}
}

.featureheader{
	color: #007c0e;
}

.homelogo{
	text-align: center;
	max-height: 300px;
}

.banner {
	height: 80px;
	}

.image{
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 90%;
	border-left: 3px;
	border-right: 3px;
	border-top: 3px;
	border-bottom: 3px;
	border-color: #DCDCDC;
	border-style: solid;
	border-radius: 10px;
	box-shadow: 5px 5px 3px #DCDCDC;
 		
}


/*Resize font & pictures with small screens*/
@media screen and (max-width : 600px) {
	.image{
	background-color: none;
	color: black;
	width: 95%;
	padding: 0px;
	text-align: left;
	margin: auto;
	margin-bottom: 10px;
	font-size: 18px;
	height: 100%;
	border-left: 2px;
	border-right: 2px;
	border-top: 2px;
	border-bottom: 2px;
	border-color: #DCDCDC;
	border-style: solid;
	border-radius: 5px;
	box-shadow: 3px 3px 1px #DCDCDC;
		
	}
}

    .google-maps {
        position: relative;
        padding-bottom: 33.34%; 
        height: 0;
        overflow: hidden;
	width: 1400px;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	border-left: 3px;
	border-right: 3px;
	border-top: 3px;
	border-bottom: 3px;
	border-color: #DCDCDC;
	border-style: solid;
	border-radius: 10px;
	box-shadow: 5px 5px 3px #DCDCDC;
    }

    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }


/*Resize font & pictures with small screens*/
@media screen and (max-width : 600px) {
	.google-maps{
        position: relative;
        padding-bottom: 56.25%; /* Match aspect ratio of Patio Picture */ 
        height: 0;
        overflow: hidden;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	border-left: 3px;
	border-right: 3px;
	border-top: 3px;
	border-bottom: 3px;
	border-color: #DCDCDC;
	border-style: solid;
	border-radius: 5px;
	box-shadow: 3px 3px 1px #DCDCDC;
		
	}
}