/* ---------------------
			RESET
--------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, del, em, font, img, small, strike, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; }  
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {
	margin: 0;
	padding: 0;
}


/* ---------------------
			VARS
--------------------- */
:root {
  --teal: #1e4850;
  --teal-light: #266b78;
  --teal-mist: #d5dedf;
  --white: #ffffff;
  --grey: #676767;
  --black: #121616;
}


/* ---------------------
			BASE
--------------------- */
body {
	position: relative;
	min-height: 100vh;
	width: 100vw;
	font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif; 
	color: var(--black);
}
#header {
	position: sticky;
	top: 0;
	width: 100%;
	height: 60px;
	padding: 0 1vw;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--white);
	background: var(--teal);
	box-sizing: border-box;
}

#header a {
	color: var(--white);
	text-decoration: none;
}
#header a:hover {
	opacity: .8;
}

h1 {
	margin: 4px auto 10px;
	font: 300 36px/1 'Dancing Script', cursive;
}
.headerNav {
	font-size: 16px;
}

.usePulseLoader {
  animation: pulseLoader 1s ease-in-out infinite;
}
@keyframes pulseLoader {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}


/* ---------------------
			HOME
--------------------- */
.dishList-container {
}
.dishList {
	width: 96vw;
	max-width: 1200px;
	margin: 20px auto 80px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.dish {
	flex: 0 0 250px;
	padding: 10px;
	text-decoration: none;
	color: var(--black);
}
.dish-photo {
	width: 250px;
	height: 200px;
	margin-bottom: 5px;
	background-size: cover;
	background-position: 50% 50%;
	border-radius: 3px;
	transition: filter 0.6s ease-in-out, box-shadow 0.6s ease-in-out, border-radius 0.6s ease-in-out;
}
.dish-title {
	margin-bottom: 5px;
	font-size: 1.2em;
}
.dish-descrip {
	margin-bottom: 5px;
	color: var(--grey);
}
.dish:hover .dish-photo {
	filter: saturate(115%) contrast(115%);
	box-shadow: 0 0 5px -1px var(--grey);
	border-radius: 5px;
}
.dish:hover .dish-title {
	color: var(--teal);
}

@media(max-width: 600px) {
	.dish {
		flex-basis: calc(100% - 20px);
	}
	.dish-photo {
		width: 100%;
		height: 250px;
	}
}


/* ---------------------
			DETAILS
--------------------- */
.detailsContainer {
	padding: 2vw;
	display: flex;
	flex-wrap: wrap;
	min-height: 75vh;
}
.details-media,
.details-info {
	flex: 1 0 350px;
	margin-bottom: 60px;
}
@media(max-width: 700px) {
	.details-info { order: -1; }
}
.details-title {
	display: inline-block;
	margin-bottom: 5px;
	font-size: 24px;
}
.details-descrip {
	margin-bottom: 10px;
	color: var(--grey);
}
.details-tags {
	margin-top: -5px;
	margin-bottom: 10px;
}
.about {
	padding: 15px;
	border-radius: 4px;
	background-color: #f1f1f1;
}
.about-stats {
	padding: 0;
	margin: 0 0 -10px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	white-space: nowrap;
}
.about-stats li {
	margin: 0 0 5px;
}

.mediaMain {
	min-height: 300px;
	max-width: 100%;
	margin: 0 2vw 1vw 0;
	border-radius: 6px;
	overflow: hidden;
	font-size: 0;
}
.mediaMain:empty {
	background: url('images/placeholder.jpg') no-repeat center top;
}
.mediaList {
	margin: 0 1vw 0 -1vw;
	padding: 0;
	list-style: none;
	font-size: 0;
	display: flex;
	flex-wrap: wrap;
}
.mediaList li {
	flex: 1 0 70px;
	margin: 1vw;
	border: 2px solid var(--black);
	transition: border-color .3s ease-in-out;
	cursor: pointer;
}
.mediaList li:hover {
	border-color: var(--teal-light);
}
.mediaList li.active {
	border-color: var(--teal);
}
.mediaList li.ghost {
	border: none;
}
.mediaList li:first-child:last-child {
	display: none;
}

.mediaList li img {
	max-height: 90px;
}

.details-media img,
.details-media video {
	max-width: 100%;
	height: 100%;
	max-height: 90vh;
	object-fit: cover;
	object-position: 50% 50%;
}
@media(max-width: 700px) {
	.mediaMain { margin: 0 0 1vw; }
	.mediaList { margin: 0 -1vw; }
}

.details-info h4 {
	margin: 2vh 0;
	color: var(--teal);
	text-transform: uppercase;
}
.ingredients, .directions, .notes {
	white-space: pre-wrap;
	padding-left: 1vw;
	line-height: 1.12;
}
.notes a {
	color: var(--teal);
	text-decoration: underline dotted;
}
.notes a:hover {
	text-decoration: underline solid;
}


/* ---------------------
			DETAILS EDIT
--------------------- */
.details-edit {
	
}

.details-edit textarea,
.details-edit input {
	padding: 4px;
}
.details-edit h3 input,
.details-edit p input {
	width: 45vw;
}
.details-edit textarea {
	width: 45vw;
	height: 200px;
}
.details-edit [size="3"] {
	width: 40px;
}
[type="submit"] {
	width: 200px;
	height: 40px;
	color: var(--white);
	background: var(--teal);
	border-radius: 6px;
	cursor: pointer;
}

.uploadZone {
	margin-right: 2vw;
	padding: 20px;
	border: 2px dashed var(--teal);
	background: var(--teal-mist);
}
.mediaListEdit {

}
.mediaListEdit.mediaList li {
	flex-basis: 120px;
	cursor: default;
}

.confMsg {
	position: fixed;
	top: 30vh;
	left: 50%;
	margin-left: -150px;
	width: 300px;
	padding: 40px;
	font-size: 42px;
	text-align: center;
	background: var(--white);
	border-radius: 6px;
	box-shadow: 0 0 70px 30px rgba(0, 0, 0, .8);
}