@charset "UTF-8";
/* CSS Document */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;	
	font-size: 100%;
}
a{
	text-decoration: none;
}


#construction {
	display: flex;
	margin-top: 10%;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	
}

/* ---- Header ----*/
header {
	width: 100%;
	top:0px;
	position: relative;
	background-color: #462511;
}
header::after {
	content: "";
	display: table;
	clear: both;
}
#header-background{
	width: 100%;
	background:url("../img/template/background.jpg");
	background-size: cover;
	background-position: center;
}
#toolbar {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
#site-logo{
	margin: 2rem 0;
}
#site-logo img{
	width: 14vw;
	min-width: 150px;
}



/* ---- Navigation ----*/
.dropdown {
	display: flex;
	margin-right: 3rem;
	position: relative;
}
.dropbtn { 
	width: 60px;
	display: block;
	margin: 50px auto;
    padding: 8px 10px;
   	transition: all 0.5s;
	background: none;
	border: none;
	-webkit-transition: all 0.5s;
}
.dropbtn div{
     height: 5px;
     background: #fff;
     margin: 7px 0px 7px 0px;
     border-radius: 25px;
     transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.two { 
	width: 30px; 
}
.three { 
	width: 50px;
}
.dropbtn:hover div { 
	width: 60px;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #462511;
  	min-width: 30px;
 	z-index: 1;
	list-style: none;
	margin-top: 2rem;
}
.dropdown-content li {
	display: flex;
	border: 1px solid #684A28;
} 
.dropdown-content a {
	color: #F5F1EE;
  	text-decoration: none;
 	display: block;
	text-align: center;
	justify-content: center;
	font-weight: 300;
	padding:10px 30px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.dropdown-content a:hover {
	color: #C69C6D;
}
.show {
	display:block;
}
#site-nav {
  	display: none;
}



/* ---- Search Bar ----*/
#search-bar {	
	width: 100%;
	height: 4rem;
	position: relative;
	background-color: #462511;
}
#free-find {
	float: right;
	position: relative;
	margin: 1rem 1rem 0 0;
	display: inline-block;
}
#input {	
	width:200px; 
	font-size:14px;
}
#search {	
	font-size:14px;
	background-color: #C69C6D;
	color: #462511;
	padding: 1px 4px;
	border: none;
}
#search:hover{
	color: #F5F1EE;
}
#credit {
	text-decoration: none;
	color: #C69C6D;
	font-size: 7pt;
}



/* ---- Center Content & Sticky Footer---- */
main {
	margin: auto;
} 
.wrap {
	min-height: calc(100vh - 10rem);
}



/* ---- Titles ---- */
#title, #drink-wheel-titles {
	display: flex;
	flex-direction: column;
	width: 80%;
	margin: auto;
	margin-top: 4rem;
	margin-bottom: 2.5rem;
}
h1 {
	color: #562D0F;
	text-transform: none;
	font-size: 230%;
	font: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	text-align: center;	
	font-weight: 300;
	margin: 0 0 .5rem;
}
.two-line{
	margin: -2px;
}
h2{ 
	color: #8A4810;
	text-transform: none;
	font-size: 120%;
	font-family: 'Source Sans Pro', sans-serif;	font-weight: lighter;
	font-weight: 100;
	font-style: italic;
	text-align: center;	
}
h3{
	color: #8A4810;
	text-transform: none;
	font: Times, Times New Roman, Georgia, serif;
	font-weight: 400;
	font-size: 150%;
	letter-spacing: 0rem;
	text-align: left;	
	padding: .5rem 1rem;
}
h3:hover {
	opacity: .7;
}
h4 {
	color: #562D0F;
	text-transform: none;
	font-size: 300%;
	font: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	text-align: center;	
	font-weight: 300;
	padding-bottom: 2rem;
	margin: 0 0 .5rem;
  	border-bottom: 5px double;
}
h5 { 
	color: #8A4810;
	text-transform: none;
	font-size: 100%;
	line-height: 1.3;
	font-family: 'Source Sans Pro', sans-serif;	font-weight: lighter;
	font-weight: 100;
	font-style: italic;
	text-align: center;	
	border-bottom: 5px double;
	padding-top: .5rem;
	padding-bottom: 2rem;
}
h5 a{
	color: #8A4810;	
	opacity: .6;
}
h5 a:hover { 
	opacity: .4;
}
h6{
	color: #562D0F;
	text-transform: none;
	font-size: 150%;
	font: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	text-align: center;	
	font-weight: 300;
	margin: 0 0 .5rem;
}
p {
	color: #562D0F;
	text-transform: none;
	font-size: 100%;
	line-height: 1.5;
	letter-spacing: 0rem;
	font-family: 'Source Sans Pro', sans-serif;	font-weight: lighter;
	text-align: left;
	padding: .5rem 1rem;
	margin-bottom: 2rem;
}
p a{
	color: #8A4810;	
	opacity: .7;
}
p a:hover {
	opacity: .5;
}


/* ---- Footer ---- */
footer {
	width: 100%;
	height: 12rem;
	bottom: 0px;
	position: relative;
	background-color: #462511;
	margin-top: 1.5rem;
}
#footer-nav ul{
	padding-top: 2rem;
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 80%;
	margin: auto;
}
#footer-nav ul li a { 
	color: #F5F1EE;
	text-decoration: none;
	font-size: 100%;
	line-height: 1.5;
	font-weight: 100;
	text-align: center;
	margin: .51rem;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
#footer-nav ul li a:hover{
	color: #C69C6D;
}
#copyright {
	color: #F5F1EE;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 100;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-align: center;
	padding-top: 2rem;
}



/* ---- Home Image Grid ---- */
#home-grid {
    display: flex;
	flex-direction: column;
	justify-content: center;
    padding-bottom: 1.5rem;
    margin: 1rem;
}
#home-grid img{
    width: 100%;
    height: auto;
    padding: .5rem 1rem;
}
.topic:hover {
	opacity: .85;
}



/* ---- Recipes/Contact Image Grid ---- */
#recipe-grid { 
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding-bottom: 1rem;
	margin: 0 1rem 1rem;
}
.recipe-section {
	align-self: center;
	width: 40vw;
	max-width: 300px;
	margin: .5rem;
}
.recipe-section:hover, .recipe-section:focus, .contact-section:hover, .contact-section:focus {
	opacity: .8;
}
#recipe-grid img, #contact-grid img{
	width: 100%;
}
.caption {
	width: 100%;
	background: rgba(86, 45, 15, .45);
	color: #F5F1EE;
	font-size: 90%;
	font: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	text-align: center;
	z-index: 1;
	padding: 1rem;
}
figure {
	position: relative;
}
figcaption {
	position: absolute;
	bottom: 0;
}
#contact-grid { 
    display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	padding-bottom: 1rem;
	margin: auto;
}
.contact-section {
	max-width: 80%;
	margin: auto;
	margin-bottom: 1rem;
}



/* ---- Recipe List ---- */
.recipe-list {
    display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
    padding-bottom: 1.5rem;
    margin: 1rem;
}
.recipe {
	width: 85%;
	align-self: center;
    display: flex;
	flex-direction: column;
}
.recipeListPhoto img, .recipeListPhotoOriginal img, .recipeListPhotoBackup img {
	display: block;
    max-width: 300px;
    margin-bottom: .5rem;
    margin-left: 1rem;
	align-self: center;
}
.recipeListPhotoBackup img{
	display: none;
}
.recipe-description{
	font-size: 100%;
}
.drink-wheel-list {
    display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
    padding-bottom: 1.5rem;
    margin: 1rem;
}
.drink-recipe {
	width: 80%;
	align-self: center;
    display: flex;
	flex-direction: row;
}
.diet-logo{
	display: flex;
	flex-direction: row;
}
.dietary {
	max-width: 30px;
	max-height: 30px;
}
.dietary:hover{
    position:relative;
 	top:-25px;
	max-width:70px;
    max-height:70px;
    z-index:999;
}



/* ---- Recipe  ---- */
.recipe-image, .recipe-image-portrait, .recipe-image-wide, .recipe-image-wide2 {
	display:flex;
	flex-direction: column;
	margin: auto;
	width: 90%;
	flex-wrap: wrap;
}
.recipe-image img, .recipe-image-portrait img, .recipe-image-wide img, .recipe-image-wide2 img {
	max-width: 85%;
	margin: auto;
	margin-bottom: 1rem;
}
.recipe-titles:hover, .playlist-title:hover{
	opacity: 100%;
}
.ingredients, .directions {
	padding: 0 1rem 1rem;	
}
.ingredients ul, .directions ol, .note{
	padding-top: 2rem;
	list-style: none;
	text-align: left;
	padding: 0 .5rem;
	margin-bottom: 1rem;
}
.ingredients ul li, .directions ol li{
	color: #562D0F;
	font-family: 'Source Sans Pro', sans-serif;	font-weight: lighter;
	line-height: 1.5;
	padding-top: .5rem;
	font-size: 100%;
	margin-left: .5rem;
}
.ingredients ul li a, .directions ol li a{
	color: #8A4810;	
	opacity: .6;
}
.ingredients ul li a:hover, .directions ol li a:hover { 
	opacity: .4;
}
.directions ol li{
	list-style: decimal;
	margin-left: 1.5rem;
}
.direction-sub-list li{
	list-style: none;
} 
.instructions{
	margin-bottom: 4rem;
}
.ingredient-section { 
	padding-top: .75rem;
	margin-left: 1rem;
	text-align: left;
    font-size: 110%;
	font-weight: 300;
	font-family: Times, Times New Roman, Georgia, serif;
}
.note{
	padding: 1.5rem 0;
	font-size: 100%;
}
.drink-wheel-sub{
	border:none;
	padding: 0;
}
.drink-wheel{
    margin: auto;
    width: 80%;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}
.alcohol {
	font-size: 200%;
	padding-top: 2rem;
}
.drink-wheel-recipe {
	flex: 1 300px;
}
.drink-note {
	text-align: left;
	margin-bottom: 1rem;
}
.dish {
	flex-direction: column;
}
.nutrition{
	display: flex;
	flex-direction: row;
	max-width: 80%;
	margin: auto;
	justify-content: center;
}
.nutrition-label{
	flex: 1;
	background-color: #773300;
	padding: .75rem;
	width: 60%;
	margin: auto;
	margin: 0 .5rem;
	max-width: 125px;
}
.nutrition-value{ 
	color: #F5F1EE;
	text-align: center;
	font-size: 100%;
}
.nutrition-data{
	color: #F5F1EE;
	font-size: 100%;
	padding-bottom: .5rem;
}
.time{
	margin-bottom: 1rem;
}
.time-label{
	background-color: #663817;
}
.ingredients ul li br{
	display: none;
}
.emphasized {
    font-size: 110%;
	font-weight: 300;
	font-family: Times, Times New Roman, Georgia, serif;
}



/* ---- Drink Spinner  ---- */
.spinner-wrap{
	background-image: url("../img/template/arrow.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px;
}
.spinnerrules{
}



/* ---- Music  ---- */
.music-grid{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	margin: auto;
}
.spotify-playlist{
	margin: 0 1rem;
	width: 320px;
}
.playlist-title, .playlist-description{
	padding: 0;
	text-align: center;
}
.playlist-description{
	margin-bottom: 1rem;
}
.playlist {
 	margin-bottom:4rem; 
}
.music-categories {
	font-size: 200%;
	padding-bottom: 1rem;
	margin-top: 1rem;
}



/* ---- Calendars  ---- */
#calendars{
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	width: 80%;
	margin: auto;
	margin-bottom: 4rem;
}
.month {
 	width:315px; 
	max-width: 315px;
	min-width: 315px;
	font: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	box-shadow:5px 5px 15px #949392; 
	margin: 1rem; 
	padding:0 0 10px;
	background-color: #F2F0EF;
}
.days {
	font: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 150%;
	font-weight: 500;
  	color: #fff; 
	padding: 1rem;
	margin: 0; 
	text-align:center; 
	letter-spacing:1px;
	margin-bottom: 5px;
}
.month span {
    font:100%; 
    font-weight:400; 
    color: #000; 
    text-align:center; 
    width:42px; 
    height:42px; 
    display:inline-block; 
    float:left; 
    overflow:hidden; 
    line-height:40px;
	margin-left: 2.5px;
}
#newYear, #michelle, #george, #ginny, #winter, #mlk, #sam, #valentines, #presidents, #sara, #jordan, #wendy, #andrew, #daylight, #paddy, #mike, #matt, #ellenBob, #beth, #benSherin, #sherin, #justin, #easter, #carlie, #linda, #katie, #jess, #tessa, #alexandra, #cinco, #mothers, #jenScott, #johnMichelle, #grandma, #katieMatt, #church, #john, #johnO, #ellen, #dennis, #logan, #fathers, #juneteen, #tara, #vicki, #bobPaula, #jayson, #jeremySam, #alexandraJohn, #fourth, #jonathan, #dickLinda, #twins, #bob, #nate, #okt, #labor, #victoriaNathaniel, #jonathanTara, #ben, #scott, #paula, #bethGeorge, #pumpkins, #indigenous, #wendyDennis, #jeremy, #dick, #ray, #scotty, #fall, #joan, #veterans, #estelle, #pie, #thanks, #leftover, #owen, #jen, #eve, #brunch, #ginnyMike, #newYears {
	display: none;
}
.date {
    border:2px solid #C9C8C7; 
    box-sizing:border-box; 
    border-radius:200px;
}
.event {
    border:2px solid tomato; 
    box-sizing:border-box; 
    border-radius:200px;
}
.holiday {
    border:1px dashed #C9C8C7; 
    box-sizing:border-box; 
    border-radius:200px;
}
span[data-title]:hover:after, 
div[data-title]:hover:after {
    font:11px 'Roboto'; 
    font-weight:400; 
    content:attr(data-title); 
    position:absolute; 
    margin:0 0 100px; 
    background:#949392; 
    border:1px solid #f7f3eb; 
    color:#f7f3eb; 
    padding:5px; 
    z-index:9999; 
    min-width:50px; 
    max-width:150px;
}

#january{
	background: #1ba1e2 /*linear-gradient(0.25turn, #1ba1e2, #0050ef);*/
}
.january-event span{
	width:100%; 
    background-color: #1ba1e2;
	color:#fff;
	box-shadow:1px 1px 5px #949392; 
}

#february{
	background: #0050ef /*linear-gradient(0.25turn, #0050ef, #6a00ff);*/
}
.february-event span{
    width:100%; 
    background-color: #0050ef;
	color:#fff;
	box-shadow:1px 1px 5px #949392; 
}

#march{
	background: #6a00ff /*linear-gradient(0.25turn, #6a00ff, #008a00 70%);*/
}
.march-event span{
    width:100%; 
    background-color: #6a00ff;
	color:#fff;
	box-shadow:1px 1px 5px #949392; 
}

#april{
	background: #008a00 /*linear-gradient(0.25turn, #008a00, #a4c400);*/
}
.april-event span{
    width:100%; 
    background-color: #008a00;
	color:#fff;
	box-shadow:1px 1px 5px #949392; 
}

#may{
	background: #a4c400 /*linear-gradient(0.25turn, #a4c400, #f472d0 70%);*/
}
.may-event span{
    width:100%; 
    background-color: #a4c400;
	color:#fff;
	box-shadow:1px 1px 5px #949392; 
}

#june{
	background: #d80073 /*linear-gradient(0.25turn, #f472d0, #d80073);*/
}
.june-event span{
    width:100%; 
    background-color: #d80073;
	color:#fff;
	box-shadow:1px 1px 5px #949392; 
}

#july{
	background: #aa00ff /*linear-gradient(0.25turn, #d80073, #aa00ff);*/
}
.july-event span{
    width:100%; 
    background-color: #aa00ff;
	color:#fff;
	box-shadow:1px 1px 5px #949392; 
}

#august{
	background: #f0a30a /*linear-gradient(0.25turn, #aa00ff, #f0a30a);*/
}
.august-event span{
    width:100%; 
    background-color: #f0a30a;
	color:#fff;
	box-shadow:1px 1px 5px #949392; 
}

#september{
	background: #fa6800 /*linear-gradient(0.25turn, #f0a30a, #e51400);*/
}
.september-event span{
    width:100%; 
    background-color: #fa6800;
	color:#fff;
	box-shadow:1px 1px 5px #949392; 
}

#october{
	background: #e51400 /*linear-gradient(0.25turn, #e51400, #a20025);*/
}
.october-event span{
    width:100%; 
    background-color: #e51400;
	color:#fff;
	box-shadow:1px 1px 5px #949392; 
}

#november{
	background: #a20025 /*linear-gradient(0.25turn, #a20025, #76608a);*/
}
.november-event span{
    width:100%; 
    background-color: #a20025;
	color:#fff;
	box-shadow:1px 1px 5px #949392; 
}

#december{
	background: #76608a /*linear-gradient(0.25turn, #76608a, #1ba1e2);*/
}
.december-event span{
    width:100%; 
    background-color: #76608a;
	color:#fff;
	box-shadow:1px 1px 5px #949392; 
}



/* ---- Photos  ---- */
.slideshow-container {
  width: 90%;
  max-width: 1000px;
  position: relative;
  margin: auto;
  margin-top: 2rem;
}
.mySlides {
  display: none;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.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}
}


/* ---------- 
Print Media 
----------- */
@media print {
	header, #search-bar, footer {
		display: none;
	}
	
	/* ---- fonts ----*/
	h1 {
		font-size: 24pt;
	}
	h2{
		font-size: 12pt;
	}
	h3{
      font-size: 12pt;
	}
	h4{
      font-size: 24pt;
	}
	h5 {
      font-size: 11pt;
	}
	h6 {
      font-size: 18pt;
	}
  	p {
      font-size: 11pt;
	}
	h4, h5{
		border-bottom: none;
	}
	.ingredients ul li, .directions ol li{
		font-size: 11pt;
	}
	.recipe-description{
	font-size: 11pt;
	}
	
	/* ---- images ----*/
	img {
		max-width: 150px;
	}
	.recipe-left-image img{
		float: left;
	}
}



/* ----------
600px-869px 
----------- */
@media only screen and (min-width: 600px){
	/* ---- Navigation ---- */
	.dropdown {
		display: none;	
	}
	#site-nav {
  		display: flex;
	/* ---- 	flex-direction: row;
		flex-wrap: wrap;
		width: 60%;
		line-height: 1.5; ---- */
	}	
	#site-nav ul{
		list-style: none;
		text-align: center;
	}
	#site-nav ul li {
		display: inline-block;
		margin: 0 1vw;
	}
	#site-nav ul li a {
		color: #F5F1EE;
		text-decoration: none;
		text-align: center;
    	font-weight: 300;
		font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	}
	#site-nav ul li a:hover, a:focus{
		color: #C69C6D;
	}	
	#site-nav ul li a, #footer-nav ul li a {
    	font-size: 110%;
	}
	
	/* ---- Center Content ---- */
	main {
		width: 90%;		
	}
			
	/* ---- Titles ---- */
	h1 {
		font-size: 300%;
	}
	h2{
		font-size: 130%;
	}
	h3{
      font-size: 165%;
	}
	h4{
      font-size: 420%;
	}
	h5, p, .recipe-description, .ingredients ul li, .directions ol li, .note {
      font-size: 110%;
	}
	h6 {
      font-size: 200%;
	}
	
	/* ---- Home Image Grid ---- */
	#home-grid {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.topic {
		flex: 1;
		min-width: 300px;
	}
	
    /* ---- Recipes Image Grid ---- */
    .caption {
        font-size: 120%;
    }
    .recipe-section {
        max-width: 200px;
    }

	
    /* ---- Recipe List ---- */
    .recipe {
        flex-direction: column;
    }
	.recipeListPhoto img, .recipeListPhotoOriginal img{
        max-width: 400px;
    }
	
	


 	/* ---- Recipe  ---- */	
	.recipe-image, .recipe-image-portrait, .recipe-image-wide, .recipe-image-wide2{
		width: 80%;
	}
	.recipe-image img, .recipe-image-portrait img, .recipe-image-wide img, .recipe-image-wide2 img {
		max-width: 100%;
	}
	.ingredient-section{
    	font-size: 120%;
	}
	.alcohol, .music-categories{
		font-size: 250%;
	}
	.dish {
		flex-direction: column;
	}	
	.nutrition-value{
		font-size: 150%;
	}
	
	/* ---- Music  ---- */
	.music-grid{
      flex-direction: row;
	}
	.spotify-playlist{
		width: 400px;
	}
	.playlist{
		height: 485px;
	}
}
	



/* ----------
800px 
----------- */
@media only screen and (min-width: 750px){
	.recipe-section {
		max-width: 300px;
	}
}


/* ---------------
870px or landscape
------------------ */
@media only screen and (min-width: 870px), 
	only screen and (min-width: 700px) and (orientation: landscape) { 
	/* ---- Navigation ---- */
	#site-nav ul li a, #footer-nav ul li a {    	
		font-size: 150%;
	}
	
	/* ---- Search Bar ----*/
	#free-find {
		margin: 1rem 6rem 0 0;
	}
	#input {	
		width:300px; 
		font-size:14px;
	}
	
	
	/* ---- Titles ---- */
	h1 {
		font-size: 400%; 
	}
	h2{
		font-size: 140%;
	}
	h3{
     	font-size: 180%;
	}
	h4{
      font-size: 540%;
	}
	h5, p, .recipe-description, .ingredients ul li, .directions ol li, .note, .drink-note {
      font-size: 120%;
	}
	h6 { 
      font-size: 250%;
	}
		
	/* ---- Home Image Grid ---- */
	.topic {
		min-width: 33%;
	}
		
	/* ---- Recipes/Contact Image Grid ---- */
	.caption {
		font-size: 165%;
	}
	#contact-grid { 
		flex-direction: row;
		justify-content: center;
		margin: 0 1rem 1rem;
	}
	.contact-section {
		align-self: center;
		width: 40vw;
		max-width: 300px;
		margin: .5rem;
	}	
		
	/* ---- Recipe List  ---- */	
	.drink-recipe {
		width: 50%;
	}
	.recipeListPhoto img, .recipeListPhotoBackup img{
		display: block;
        max-width: 400px;
    	margin-bottom: 1rem;
	}
	.recipeListPhotoOriginal img{
		display: none;
	}
			
	/* ---- Recipes  ---- */
	.recipe-image-portrait img {
		max-width: 60%;
		margin: auto;
		margin-bottom: 2rem;
	}
	.ingredient-section{
    	font-size: 130%;
	}
	.alcohol, .music-categories{
		font-size: 300%;
	}
	.dish {
		flex-direction: column;
	}
		
	/* ---- Photos  ---- */
	.landscape{
 		max-width: 800px;
	}
	.portait{
  		max-width: 600px;
	}		
}


/* ---------------
1000px and higher
------------------ */
@media only screen and (min-width: 1000px){

	/* ---- Recipe List  ---- */
	.recipe {
        flex-direction: row;
    }	
	.recipeListPhoto img, .recipeListPhotoOriginal img{
        max-width: 300px;
    }
	
	/* ---- Recipe ---- */
	.recipe-image{
		flex-direction: row;
	}
	.recipe-image img{
		max-width: 50%;
		margin: 0 0 1rem 2rem;
		object-fit: cover;
	}		
	.recipe-image-wide img, .recipe-image-wide2 img {
		max-width: 75%;
		margin: auto;
		margin-bottom: 2rem;
	}
}

/* ---------------
1400px and higher
------------------ */
@media only screen and (min-width: 1400px){
	
	/* ---- Center Content ---- */
	main {
		width: 75%;
		max-width: 1800px;
		margin: auto;
	}
	
	/* ---- Titles ---- */
	h1 {
		font-size: 450%; 
	}
	h2{
		font-size: 150%;
	}
	h3{
      font-size: 200%;
	}
	h4{
      font-size: 650%;
	}
	h5, p, .recipe-description, .ingredients ul li, .directions ol li, .note, .drink-note{
      font-size: 130%;
	}
	h6 {
      font-size: 300%;
	}
	.ingredient-section{
    	font-size: 140%;
	}
	.alcohol, .music-categories{
		font-size: 350%;
	}
	.dish {
		flex-direction: column;
	}
	
	
	/* ---- Recipe ---- */
	.ingredients ul li br{
		display: inherit;
	}
	.recipe-image-wide2{
		flex-direction: row;
	}		
	.recipe-image-wide2 img{
		max-width: 50%;
		margin: 0 0 1rem 2rem;
		object-fit: cover;
	}
}