/*       __                           
        / /___ ___ __________________/
   __  / / __ `__ \ ___jennifer_____/
  / /_/ / / / / / /____morehead____/
  \____/_/ /_/ /_/_____GR66_______/ 
*/


/* :::::::::::::::::::::::::::::::::
::::::: CSS RESET ::::::::::::::::::
::::::::::::::::::::::::::::::::::::*/

	* {
		margin: 0;
		padding: 0;
	}

/* :::::::::::::::::::::::::::::::::
:::::::HTML5 SEMANTIC TAGS :::::::::
::::::::::::::::::::::::::::::::::::*/


	a  {
		text-decoration: none;
	}

 	body { 		
		font-family: 'Lato', sans-serif;
		line-height: 1.6;
 	}

 	footer {
 		margin: 8vh 0vw 3vh 0vw;
 		padding: 2vh 0vw;
 		background-color: whitesmoke;
	}

	footer ul {
		list-style: none;
	}

 	h1,h2,h3 {
 		font-family: 'Eczar', serif;
		letter-spacing: 0.1em;
  		color: black;
 	}

 	h3 {
 		font-size: 1.188em;
 	}

 	h4,h5 {
 		font-family: 'Lato', sans-serif;
 	}

 	h4 {
 		font-size: 1.063em;
 	}

 	h5 {
 		font-size: 1.000em;
 	}

 	header {
 		position: fixed;
 		z-index: 1;
 		top: 0vh;
 		width: 100vw;
 		background-color: white;
 	}

 	hr {
 		margin-bottom: 1vh;

 	}

 	p {
 		font-family: 'Lato',sans-serif;
 		/*font-size: .9em;*/
 		font-size: 	.938em;
 		line-height: 1.6;
 	}

/* ::::::::::::::::::::::::::::::::::::::::::::
:::::::TRANSITIONS:::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::*/

	.hover-scale a{
		transition: transform .2s;
			-moz-transition: transform .2s;
			-ms-transition: transform .2s;
			-o-transition: transform .2s;
			-webkit-transition: transform .2s;
	}
		.hover-scale a:hover {
			transform: scale(1.25);
				-moz-transform: scale(1.25);
				-ms-transform: scale(1.25);
				-o-transform: scale(1.25);
				-webkit-transform: scale(1.25);
		}


/* ::::::::::::::::::::::::::::::::::::::::::::
::::::: MOBILE: 600 or SMALLER:::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::*/
 
	@media screen and (max-width: 600px) {

}

/* ::::::::::::::::::::::::::::::::::::::::::::
::::::::TABLET: 768PX OR WIDER:::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::*/
 
	@media screen and (min-width: 768px) {
}


/* ::::::::::::::::::::::::::::::::::::::::::::
::::::: DESKTOP: 992PX OR WIDER:::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::*/

	@media screen and (min-width: 992px) {

}
/* :::::::::::::::::::::::::::::::::
::::::: IDs & CLASSES:::::::::::::::
::::::::::::::::::::::::::::::::::::*/

 	#about-text {
 		display: inline-block;
 		vertical-align: top;
 		padding: 0vh 2vw;
 		max-width: 33vw;
 		text-align: left;

 	}

 	#about-text article {
 		padding-bottom: 1vh;
 	}


 	#about-image {
 		display: inline-block;
 		vertical-align: top;
 		padding: 0vh 2vw;
 		/*background-color: blue;*/
 	}

 	#about-image img {
 		width: 30vw;
 	}

 	.beer-label-seasonal {
 		display: inline-block;
 		vertical-align: top;
 		padding: 0vh 2vw;
 		width: 25vw;
 		text-align: left;
 	}

 	.beer-label-seasonal img{
 		max-width: 20vw;
 		margin: auto;
 	}

 	.beer-label-seasonal h4 {
 		padding-top: 1vh;
 	}

 	.beer-row {
 		display: block;
 		padding: 2vh 0vh;
 		margin-bottom: 2vh;
 	}

	.footer-column {
		display: inline-block;
		padding: 1vh 6vw;
		vertical-align: top;
		/*background-color: orange;*/
	}

	.header-icon {
		position: absolute;
 		z-index: 1;
 		width: 4vw;
 		top: 6vh;
 		right: 5vw;
 		margin-top: -3vh;	
  		color: #414a4c;
	}

	#header-image {
		position: absolute; /*absolute to header*/
 		top: -4vh;
 		right: 0;
 		width: 30vw;
	}

	#home-image {
		display: inline-block;
		width: 60vw;
		vertical-align: top;
		background-color: white;
	}

	#home-tagline {
		margin-bottom: 2vh;

	}

	#home-instagram a{
		color: #e13b35;
	}


	.hth101-column {
		display: inline-block;
		padding: 0vh 5vw;
		vertical-align: top;
		width: 30vw;;
		text-align: left;
		line-height: 1.6;
	}

	.hth101-column article{
		padding: 1vh 0;
	}

	.hth101-column h3 {
 		font-size: 2em;
	}

	.menu-column {
		display: inline-block;
		vertical-align: top;
		max-width: 33vw;
		padding: 0vh 5vw;
		text-align: left;
	}

	#menu-image img{
		width: 100vw ;
	}
	.nav-main {
		list-style:none;
		margin:0;
		padding:0;
		text-align:center;

	}

		.nav-main li {
			display: inline;
		}

		.nav-main a {
			display: inline-block;
			margin-top: 3vh;
			padding: .8vh 1.7vw;
  			font-family: 'Eczar', serif;
  			font-size: 1.188em;
			font-weight: 700;
			letter-spacing: 0.06em;
  			color: #414a4c;
		}

 	.nav-top img{
 		display: block; /*this allows margin auto to work instead 
 		making absolute to header*/
 		width: 30vw;
 		margin: 2vh auto 0vh auto;
 	}


	.page {
		width: 100vw;
		min-height: 77vh;
		padding-top: 23vh;
		text-align: center;
	}

	.page-content {
		width: 100vw;
	}

/*::::::::::::::::::::::::::::::::::::::::::::::
:::::::: COLOR CLASSES::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::*/


	.gray {
		background-color: gray;
	}

	.gray-hover:hover {
			background-color: gray;
		}

					
	.red {
		background-color: red;
	}

		.red-hover:hover {
			background-color: red;
		}