/*css reset */

* , *::after, * ::before {
	box-sizing:border-box;
}

:root {
	--color-neutral-light:#FFFFFF;
	--color-neutral-medium:#E6E4E4;
	--color-neutral-dark:#4D4B4B;

	--color-main-light:#E8F1E6;
	--color-main-medium:#4A7856;
	--color-main-dark:#264733;

	--color-sub-light:#F2E6D9;
	--color-sub-medium:#C27B48;
	--color-sub-dark:#8A4A2D;

	--color-black:#000;
	--color-white:#fff;


	--header-height:3rem;
	--spacing:1rem;



	--font-sans:"fields", sans-serif;
	--font-serif: "Lora", serif;
}


.lora-<uniquifier> {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.fields-<uniquifier> {
font-family: "fields", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}


body {
	margin:0;
	font-size:100%;
	font-family:var(--font-sans);
	/*font-family: lora, serif;*/

}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-serif);
	/*font-family: fields, sans-serif;*/
}

a{ 
	color:inherit;
	font-weight:bold;
	text-decoration:none;
 }
a:hover {
	text-decoration: underline;
}





/* LAYOUT CLASSES */

/*want a container for a page, one to put a max to a page, and also to center the design to the screen*/

.container{
	/* max-width is 800px to 1200px */

	max-width:800px;
	margin-right: auto;
	margin-left: auto;
}


.display-flex { 
	display:flex;  
	align-items: center;
}
.display-inline-flex { display:inline-flex; }
.display-block { display:block; }
.display-inline-block { display:inline-block; }

.flex-stretch { 
	flex: 1; 
}
.flex-none { flex: none; }

.flex-align-center { align-items:center; }
.flex-justify-center { justify-content:center; }

.flex-column { flex-direction:column; }
.flex-wrap { flex-wrap:wrap; }








/* Small Classes */

@media (min-width: 900px)
	.col-md-4{
		width: 33.3333%;
	}

.media-image {
	max-width: 100%;
	vertical-align: text-bottom;
}

.hidden {
	display: none;
}

/* COMPONENT DESIGN */

/* COMPONENT CLASSES */

.nav ul {
	list-style-type:none;
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
}
	.nav a {
		display:block;
		padding:0.2em 0.5em;
	}
	.nav a:hover {
		background-color: var(--color-main-medium);
		color: var(--color-white);
		text-decoration:none;
	}

	/* add Active */
	.nav .active a {
		background-color: var(--color-main-light);
		color: inherit;
	}


.nav-material ul,
.nav-crumbs ul,
.nav-pills ul,
.nav-stretch ul,
.nav-flex ul {
	display:flex;
}

.nav-material li,
.nav-stretch li {
	flex: 1 1 auto;
	text-align:center;
}


.nav-pills a {
	border-radius:2em;
	padding: 0.5em 1em;
}

.nav-crumbs a {
	display:inline-block;
}

.nav-crumbs .active a,
.nav-crumbs a:hover {
	background-color:transparent;
	color:inherit;
	text-decoration:underline;
}

.nav-crumbs li:not(:first-child)::before {
	content:'/';
}

.nav-material a{
	padding: 0.5em 1em;
	position: relative;
}
.nav-material .active a {
	background-color:transparent;
	color:inherit;
}
.nav-material a:hover {
	background-color:var(--color-neutral-light);
	color:inherit;
}
.nav-material a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-color: var(--color-main-medium);
	transition: all 0.3s;
}
.nav-material .active a::after {
	height:4px;
}


/* Navbar */


.navbar {
	background-color: #264733;
	color: var(--color-main-light);
	line-height:var(--header-height);
	margin-bottom: 1em;
}


	.navbar h1{
		font-size:1em;
		margin:0;
		font-family:var(--font-sans);
	}

 /* Change the distance in between the "links" */

	.navbar a{
		padding:0 0.5em;
	}

	.flush>.navbar {
		margin-bottom:0;
	}

	/* Navbar + nav links in Fields */
.navbar, .navbar a,
.nav, .nav a,
.nav-material, .nav-material a {
  font-family: "fields", sans-serif;
}



/* CARD COMPONENT */

.card {
	background-color: var(--color-white);
	margin-top:1em;
	margin-bottom:1em;
	padding:1em;

	overflow:hidden;
	position:relative;
}

	.card.soft {
		border-radius:0.5em;
		box-shadow: 0 0 10px rgba(0,0,0,0.1);
	}

	.card.hard {
		border-radius:0.2em;
		border: 2px solid var(--color-main-medium);
	}

	.card.dark {
		background-color: var(--color-main-dark);
		color:var(--color-main-light);
	}

	.card.medium {
		background-color: var(--color-main-medium);
	}

	.card.flat {
		padding:0;
	}


/*Any card that is a direct child of a column */
/*Any element that has a class that has inside of it a col dash in it */
	[class*='col-']>.card {
		height: 100%;
		margin: 0;
	}

	.card-section~.card-section {
		border-top: 1px solid var(--color-neutral-light);
	}

	.card-section {
		padding: 1em;
	}

/* VIEW WINDOW */


.view-window {
	height:50vh;
	position:relative;
	overflow:hidden;
	background-size:cover;
	background-position: center;
	background-attachment: fixed;  /*this is not work on mobile */

}



/*Styleguide for Tables*/

.table {
	width:100%;
	border-collapse: collapse;
}

.table th,
.table td {
	text-align:left;
	padding:0.2em 0.5em;
}

.table.striped tbody tr:nth-child(odd) {
	background-color:var(--color-neutral-light);
}

.table.lined.all th:not(:first-child),
.table.lined.all td:not(:first-child),
.table.lined.vertical th:not(:first-child),
.table.lined.vertical td:not(:first-child) {
	border-left: 1px solid var(--color-neutral-medium);
}

.table.lined.all tbody tr,
.table.lined.all tbody tr {
	border-top: 1px solid var(--color-neutral-medium);
}

.table.lined.all,
.table.lined.border {
	border: 1px solid var(--color-neutral-medium);
}


/* Make a Figure */

.figure {
	display: block;
	margin:0;
	background-color:var(--color-white);
	overflow: hidden;
}

/* By default, a figure image*/

.figure img {
	width:100%;
	height: auto;
	vertical-align: text-bottom;
	display: block;
	object-fit: cover;
}


.figure figcaption {
	padding: 1em;
}

.figure.product-overlay {
	position: relative;
}

.figure.product-overlay figcaption{
	position: absolute;
	padding: 0.75rem 1rem;
	display: grid;
}

.figure.product-overlay .look{
	display: flex;
	justify-self: space-between;
	align-items: center;
	font-weight: 600;
}



/* FORMS */
.form-control {
	margin: 1em 0;
}
.form-select>select,
.hotdog input,
.hotdog,
.form-button,
.form-input,
.form-item{
	display: inline-block;
    background-color: transparent;
    border-width: 0;
    font: inherit;
    -webkit-appearance: none;
    color: inherit;
    width: 100%;
    outline:0;
}
.form-input {
    border-bottom: 1px solid var(--color-neutral-light);
    padding: 0.5em 1em;
}
.form-input:focus {
	border-bottom-color:var(--color-main-light);
}

.form-label{
	font-size: 0.8em;
	color: var(--color-neutral-dark);
    display: block;
    width: 100%;
}


.form-button {
    background-color: var(--color-neutral-medium);
    padding: 0.5em 1em;
    border-radius: 1.5em;
    cursor:pointer;
    text-align: center;
}

.form-button.inline {
	width: initial;
}

.form-button:hover {
	text-decoration:none;
}
.form-button:active {
	background-color: var(--color-main-light);
}

.hotdog {
    background-color: var(--color-neutral-medium);
    border-radius: 2em;
    padding: 0.5em 1.5em;
    display: flex;
}

.hotdog.dark{
	background-color: var(--color-neutral-dark);
	color: var(--color-neutral-medium);
}

.hotdog.light{
	background-color: var(--color-white);
	color: var(--color-black);
}


.form-select>select {
	display: block;
    padding: 0.5em 1.3em;
    background-color: var(--color-neutral-medium);
    border-radius: 1.5em;
    cursor: pointer;
}

.form-select {
	position: relative;
}

.form-select::after {
	content: '▾';
	font-family: lora, serif;
	font-size: 1.2em;
	position: absolute;
	top: 50%;
	right: 0.2em;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--color-neutral-dark);
}



/* Toggle */
.toggle label {
	font-size: 1.3em;
    display: inline-block;
    width: 2em;
    height: 1em;
    border: 0.1em solid var(--color-neutral-dark);
    background-color: var(--color-main-medium);
    border-radius: 1em;
    position: relative;
}

.toggle label::after {
	content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    border-radius: 1em;
    position: absolute;
    background-color: var(--color-white);
    transition: all 0.3s;
}

.toggle input:checked + label::after {
	transform: translateX(1em);
}



/* Alerts */
.alert {
	margin-top: 1em;
  display: flex;
  align-items: center;
  padding: 12px 20px;
  margin-bottom: 12px;
  border-radius: 6px;
  font-size: 1.1em;
  color: white;
}

.alert span {
  margin-right: 12px;
  font-size: 1.6em;
}
.sales {
  background-color: #2196f3; /* Blue */
}

.maintenance {
  background-color: #4caf50; /* Green */
}

.arrival {
  background-color: #ff9800; /* Orange */
}

.warning{
  background-color: #f44336; /* Red */
}