/*
Theme Name: Blacktail 20-21
Text Domain: blacktailmountain
Version: 3.0
Description: Responsive, 2020 WooCommerce Store Custom built for Blacktail Mountain Ski Area
Tags: responsive
Author: Corinne A Earl
Author URI: 
*/

/** COLORS

New Green #6A8338
Lime Green #bdcc2e
Bright Green #f4f99b
Dark Grey #666666
Bluebird #29abe2
Light Grey #e6e6e6

**/

:root {
	--new-green: #6a8338;
	--lime-green: #bdcc2e;
	--bright-green: #f4f99b;
	--dark-grey: #666666;
	--bluebird: #29abe2;
	--light-bluebird: #a4ddf5;
	--light-grey: #e6e6e6;
	--transparency: rgba(102, 102, 102, .8);
}

html,
body {
	margin: 0;
	padding: 0;
}

/** FONTS **/

body {
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: #000000;
	color: rgb(0, 0, 0);
}

i {
	font-size: 1.5rem;
	padding: 0 .5rem 0 .5rem;
}

a {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color: var(--new-green);
}

h1,
h2 {
	font-size: 1rem;
	line-height: 1rem;
	margin: 0;
}

h3 {
	font-size: 1rem;
    line-height: 1rem;
    text-transform: uppercase;
	margin: 0;
}

h4 {
	font-size: .8rem;
	text-transform: uppercase;
}

/** ELEMENTS **/

img,
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
	max-width: 100%;
	height: auto;
}

button {
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
	text-decoration: none;
	color: var(--bright-green);
	filter: drop-shadow(2px 2px 2px black);
	background: none;
	border: none;
	margin: 5px;
}

button:hover,
button:focus {
	color: var(--lime-green);
	background: rgba(0, 0, 0, .2);
}

button.booking {
	background: var(--bluebird);
	color: var(--light-grey);
	padding: .5rem 1rem;
	border-radius: 3px;
}

button.booking a {
	color: var(--light-grey);
}

button.booking:hover {
	background: var(--light-bluebird);
	color: var(--dark-grey);
}

button.booking a:hover {
	color: var(--dark-grey);
}

table.bookit {
	width: 75%;
}

.bookit tbody tr td {
	border: 2px solid var(--light-grey);
	padding: 2px;
}

input {
	border: 1px solid #bdcc2e;
	border-radius: .5rem;
	text-align: center;
	height: 2rem;
}

.red {
	color: red;
}

.wp-block-table.alignleft.SeasonPassTable {
	width: 100%;
}

/** LAYOUT **/

#wrapper {
	width: 100%;
	margin: 0;
}

/** PREHEADER **/

#preheader {
	background: var(--lime-green);
	padding: .5rem;
	height: min-content;
}

.contact-text {
	display: none;
}

#preheader,
#postFooter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

#contact,
.socials,
#copyright {
	display: flex;
}

#preheader a {
	color: #000000;
}

.socials {
	justify-content: flex-end;
}

#contact {
	align-self: flex-start;
	align-content: center;
}

#copyright,
#postFooter .socials {
	align-content: flex-end;
}

.socials img,
#contact img {
	padding: 0 10px;
}

/** LOGO **/

#logo {
	width: 110px;
	margin: 0 auto;
}

#logo img {
	width: 100px;
	height: auto;
}

.overlay,
.logo-overlay {
	position: absolute;
	display: none;
	border-radius: 50%;
	background: var(--transparency);
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	text-align: center;
	justify-content: center;
	color: var(--bright-green);
	border: none;
}

.logo-overlay {
	z-index: 3;
	width: 95px;
	height: 95px;
	align-items: center;
	font-size: 1rem;
}

a.circle:hover .overlay,
a.circle:focus .overlay,
a.circle:hover .logo-overlay,
a.circle:focus .logo-overlay {
	display: none;
}

.circle span {
	font-size: 1rem;
	color: var(--bright-green);
}

/** V-NAV **/

#v-menu {
	display: none;
}

#vertNav {
	position: fixed;
	right: 0px;
	z-index: 3;
	margin: 0;
	padding: 1.2rem 2rem;
}

#menu-items {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.menuIcon {
	width: 60px;
	height: auto;
}

/** TOPNAV **/

#topNav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	background: var(--transparency);
	font-family: 'Poppins', sans-serif;
	color: #ffffff;
	text-shadow: 2px 2px 2px black;
}

.separator,
.lastBox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: flex-end;
	padding-top: 5px;
}

.icon {
	width: 35px;
	height: auto;
	filter: drop-shadow(2px 2px 2px black);
}

.separator.mobile {
	width: 33%;
}

.not-mobile {
	display: none;
}

.expandArr::after {
	content: url(images/icons/Expand.png);
	filter: drop-shadow(2px 2px 2px black);
	margin-right: 1px;
	padding: 0 .5rem;
}

.columnDisp {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}

/** FLYOUT **/

#flyout,
#camView {
	display: none;
}

.expand,
.webcam {
	display: flex !important;
	flex-direction: column;
	align-items: center;
}

#cam-slider {
	display: flex;
	justify-content: space-between;
}

button.flyout,
button.gpnf-add-entry,
.gform_save_link {
	border: 1px var(--bright-green);
	background: rgba(0, 0, 0, .2);
	border-style: double;
	padding: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

#weather,
#snowReport,
#grooming {
	display: flex;
	justify-content: space-around;
	padding: .5rem;
	height: 150px;
}

#grooming,
#snowReport,
#weather,
#topNav {
	border-bottom: 2px silver;
	border-bottom-style: inset;
}

#weather {
	flex-wrap: wrap;
	height: auto;
}

#weather img {
	max-height: 150px;
	padding: .5rem;
}

#station {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/** HERO **/

#hero {
	background-size: cover;
	background-position: center center;
	padding-top: 35%;
}

#triImages {
	display: flex;
	grid-row: 1 / -1;
	grid-column: 1 / -1;
}

.hero-text h1,
.hero-text h2,
.hero-text h2 {
	background: var(--transparency);
	font-family: 'Poppins', sans-serif;
	color: #ffffff;
	text-shadow: 2px 2px 2px black;
	padding: 1rem;
}

.hero-text a h1,
.hero-text a h2,
.hero-text a h2 {
	color: var(--bright-green);
}

.hero-text a h1:hover,
.hero-text a h2:hover,
.hero-text a h2:hover {
	text-decoration: underline;
}

.triptych {
	background-size: cover;
	background-position: center center;
	width: 33.3%;
	padding-top: 25%;
}

.alert {
	background-color: var(--bluebird);
	width: 100%;
	display: flex;
	justify-content: space-around;
	padding: .5rem 0;
}

.alert a,
.alert i {
	text-transform: uppercase;
	color: white;
	text-align: center;
	font-size: 1rem;
}

/** MAIN **/

.info,
.infobox {
	background: var(--light-grey);
	margin: .5rem 0;
	padding: .5rem .5rem;
	color: black;
	border: 1px solid var(--lime-green);
	min-height: 150px;
	height: auto;
}

.infobox {
	flex: 1 0 90%;
}

.skistay {
	border: 2px solid white;
	border-radius: 1rem;
	margin-bottom: 1rem;
}

.skistay p {
	padding-left: 2rem;
}

.calendar {
	width: 90%;
	height: 600px;
}

.bmssTable {
	font-size: .5rem;
}

.map-responsive {
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	height: 0;
}

.map-responsive iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}

#content {
	padding: .5rem;
	margin: 0;
	height: fit-content;
}

.breadcrumb {
	font-size: 1rem;
	grid-column: 1 / -1;
}

article {
	grid-column: 1 / -1;
}

.coverImage {
	max-width: 100%;
	height: auto;
}

article.snow-report {
	grid-column: 1 / 2;
}

#calendar {
	grid-column: 1 / 2;
}

#snowSidebar {
	grid-column: 2 / 3;
}

#groomingSidebar {
	grid-column: 3 / 4;
}

#eventsSidebar {
	grid-column: 2 / 4;
	max-height: 600px;
	overflow-y: scroll;
}

.eventTitle {
	font-weight: 900;
	text-transform: uppercase;
}

.eventDate {
	font-weight: 300;
	padding-left: 1rem;
}

article.snow-report,
#groomingSidebar,
#snowSidebar {
	background-color: var(--light-grey);
	border: 1px solid var(--lime-green);
	margin: 1rem;
	padding: .5rem;
	border-radius: 1rem;
}

.navigation {
	text-align: center;
}

.reports {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem 0;
}

.reports li {
	display: flex;
	justify-content: start;
	font-size: 1rem;
	padding: 0;
	margin: 0;
	line-height: 1.5;
}

/** FOOTER **/

#footer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	z-index: 0;
}

#newsletter,
#postFooter {
	background: var(--dark-grey);
	font-size: 16px;
	text-align: center;
	color: white;
	border: 1px solid var(--lime-green);
	padding: 15px;
}

#newsletter li,
#employment li,
#form-wrap {
	display: flex;
	flex-direction: column;
	list-style: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
}

#form-wrap p {
	margin: 0 6px;
}

.sendpress-submit {
	margin-top: 0 !important;
}

#about {
	background: white;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 2px;
}

#employment {
	background: var(--bluebird);
	color: var(--light-grey);
	font-size: 16px;
	text-align: center;
	border: 1px solid var(--light-grey);
}

.links {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}

#postFooter .links {
	width: 100%;
	margin: 0;
}

.links a {
	width: 25%;
}

.links img {
	max-height: 150px;
	max-width: 100%;
}

#footerLinks {
	display: flex;
	justify-content: center;
}

#postFooter .socials a {
	color: var(--light-grey);
}

#footerLinks ul {
	list-style: none;
	width: 100%;
	padding: 0;
}

#footerLinks ul li::before, #footerLinks ul li::after {
	content: "\f071";
	font-family: "FontAwesome";
	font-weight: 600;
	padding: 0 5px 0 5px;
	color: var(--bright-green);
}



#footerLinks li a {
	color: var(--bright-green);
	text-decoration: none;
}

#footerLinks li a:hover, #footerLinks li a:active {
	color: var(--light-grey);
	text-decoration: underline;
}

#footerLinks a:active {
	color: white;
}

#bottom {
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
}

#bottom .socials {
	justify-content: space-around;
}

/** WOOCOMMERCE **/

.woocommerce .woocommerce-breadcrumb a {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color: var(--new-green);
}

/** CART **/

.show-cart {
	position: fixed;
	top: 106px;
	width: min-content;
	background: rgba(0, 0, 0, .2);
	z-index: 2;
}

.cart-icon {
	min-width: 75px;
	min-height: 69px;
	background-image: url('images/icons/shopping-cart-small.png');
	background-repeat: no-repeat;
	background-position: center center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cart-items {
	color: var(--bright-green);
	font-size: 1rem;
	padding: 0 0 1.2rem .5rem;
}

.wc-product-table .cart {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.cart .gform_wrapper {
	width: 100%;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

.wc-product-table .product-details-button,
.wc-product-table .single_add_to_cart_button,
.wc-product-table a.button {
	background-color: var(--light-bluebird);
	box-shadow: 2px 2px var(--dark-grey);
}

/** FORMS **/

div.section {
	border: 2px solid white;
	border-radius: 1rem;
	margin-bottom: 1rem;
}

.gform_save_link {
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
	text-decoration: none;
	color: var(--bright-green);
	filter: drop-shadow(2px 2px 2px black);
	background: none;
	border: none;
	margin: 5px;
}

.gform_save_link:hover,
.gform_save_link:focus {
	color: var(--lime-green);
	background: rgba(0, 0, 0, .2);
}

button.gpnf-add-entry,
.gform_save_link {
	border: 1px var(--bright-green);
	background: rgba(0, 0, 0, .2);
	border-style: double;
	min-width: 150px;
	padding: 5px 0;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--light-bluebird);
}

.gf-upload input {
	min-width: 250px;
	background: #ffffff;
}

.gf-upload .gfield_label,
.gf-upload .gfield_description {
	text-transform: uppercase;
	font-size: .8rem;
	width: auto !important;
	padding-right: 0 !important;
	margin-bottom: 0 !important;
}

.gf-upload .gfield_description,
.field_description_below .gfield_description {
	margin-left: 0 !important;
	padding-top: 0 !important;
}

.woocommerce div.product form.cart .variations select {
	max-width: 100%;
	min-width: min-content;
	display: inline-block;
	margin-right: 1em;
}

.value select {
	min-height: 1.8rem;
	text-align: center;
	width: min-content;
}

.gform_wrapper .description,
.gform_wrapper .gfield_description,
.gform_wrapper .gsection_description,
.gform_wrapper .instruction {
	font-size: .8rem !important;
	clear: none;
}

.gfield_consent_description {
	background: whitesmoke;
}

/** PRODUCTS **/

/** SINGLE PRODUCT **/

.tabs.wc-tabs,
.product_meta {
	display: none;
}

#product {
	padding: 25px;
	background: var(--light-grey);
	border: 1px solid var(--lime-green);
	border-radius: 1rem;
}

select {
	font-size: 1em;
}

.related .products,
.upsells .products {
	border: 2px solid white;
	border-radius: 1rem;
	margin-bottom: 1rem;
	padding: 0 1rem;
}

.woocommerce .products ul,
.woocommerce ul.products {
	padding: 0 1rem;
}

ul.products li.product .button {
	background-color: var(--bluebird);
	color: var(--light-grey);
}

ul.products:hover li.product:hover .button:hover {
	background-color: var(--light-bluebird);
	color: var(--dark-grey);
}

.woocommerce div.product div.images img {
	width: 50%;
}

.woocommerce ul.products li.product .price,
.woocommerce-loop-product__title {
	color: black;
}

.woocommerce ul.products li.product a img {
	display: none;
}

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary,
.wp-block-advgb-columns.advgb-columns-wrapper {
	width: 100%;
}

.onsale {
	display: none;
}

.wc-block-grid__products .wc-block-grid__product-image img,
.wp-block-media-text__media img,
.wp-block-media-text__media video,
.wp-block-image img {
	height: auto;
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--bluebird);
}

.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt.disabled:hover,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce #respond input#submit.alt:disabled:hover,
.woocommerce #respond input#submit.alt:disabled[disabled],
.woocommerce #respond input#submit.alt:disabled[disabled]:hover,
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover,
.woocommerce a.button.alt:disabled,
.woocommerce a.button.alt:disabled:hover,
.woocommerce a.button.alt:disabled[disabled],
.woocommerce a.button.alt:disabled[disabled]:hover,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled]:hover,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt.disabled:hover,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled:hover,
.woocommerce input.button.alt:disabled[disabled],
.woocommerce input.button.alt:disabled[disabled]:hover {
	background: var(--light-bluebird);
}

.wc-bookings-booking-form .form-field input[type="number"] {
	width: min-content;
}

/* 
   Modify the color styles of the WooCommerce Bookings datepicker calendar.
   Add any/all of these styles to your theme's custom CSS, but be sure to change
   the color hex codes to your choice. They're all black here.
*/

/* Month header background color */
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker-header {
	background-color: var(--lime-green);
}

/* Previous/Next month arrow background color */
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-next,
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev {
	background-color: var(--light-grey);
}

/* Previous/Next month arrows if not allowed, and calendar dates that are not available */
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: 0.35;
}

/* Days of the week header background color */
.ui-datepicker-calendar thead {
	background-color: #000000;
}

/* Days of the week header font color */
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker th {
	color: #000000;
}

/* Past calendar days background color (not available) */
.ui-datepicker-calendar tbody {
	background-color: var(--dark-grey);
}

/* Available calendar days background color */
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable a {
	background-color: var(--bluebird) !important;
}

/* Available calendar day hover background color */
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable a:hover {
	background-color: var(--light-bluebird) !important;
}

/* Fully booked calendar days */
.wc-bookings-date-picker .ui-datepicker td.fully_booked a,
.wc-bookings-date-picker .ui-datepicker td.fully_booked span {
	background-color: var(--new-green) !important;
}

/* Days not bookable based on the availability rules */
.wc-bookings-date-picker .ui-datepicker td.not_bookable {
	background-color: #ffffff !important;
}

/* Today's date on calendar background color */
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-today a {
	background-color: var(--light-bluebird) !important;
}

/* Time Blocks */
#wc-bookings-booking-form .block-picker li a {
	background-color: #ffffff !important;
}

/* Time Blocks Hover */
#wc-bookings-booking-form .block-picker li a:hover {
	background-color: #000000 !important;
}

/* Selected Date*/
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-current-day a {
	background-color: var(--light-grey) !important;
	color: black;
}

/* Selected Time Block */
#wc-bookings-booking-form .block-picker li a.selected {
	background: #ffffff !important;
}

/** TABLET **/
@media (min-width: 688px) {
	/** HEADER **/
	.contact-text {
		display: inline;
	}

	/** MAIN **/

	.bmssTable {
		font-size: 1rem;
		padding: .5em;
	}

	.cam-div {
		display: none;
	}

	.cam-div p {
		max-width: 640px;
		padding: 0 1rem;
	}

	.cam-view {
		width: 640px;
		height: 480px;
	}

	/** FOOTER **/

	.infobox {
		flex: 1 0 600px;
	}

	#newsletter li,
	#employment li,
	#form-wrap {
		flex-direction: row;
	}

	.links {
		flex-wrap: nowrap;
	}

	#bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}

/** SMALL SCREEN **/
@media (min-width: 1258px) {
	body {
		font-size: 1.5rem;
	}

	i {
		font-size: 2rem;
	}

	h1 {
		font-size: 2.5rem;
		line-height: 2.5rem;
	}

	h2 {
		font-size: 2rem;
		line-height: 2rem;
	}

	h3 {
		font-size: 1rem;
		line-height: 1rem;
	}

	h4 {
		font-size: 1rem;
	}

	/** HEADER **/

	#logo {
		position: absolute;
		z-index: 2;
		display: flex;
		padding: 10px;
	}

	#vertNav {
		padding: .5rem 1rem;
	}

	.menuIcon {
		width: 75px;
		height: auto;
	}

	a.circle:hover .overlay,
	a.circle:focus .overlay,
	a.circle:hover .logo-overlay,
	a.circle:focus .logo-overlay {
		display: flex;
		align-items: center;
		font-size: .8rem;
		color: black;
	}

	a.circle:hover .overlay,
	a.circle:focus .overlay {
		width: 72px;
		height: 72px;
	}

	a.circle:hover,
	a.circle:focus {
		display: flex;
		background: none;
	}

	#topNav {
		position: absolute;
		right: 0;
		z-index: 2;
		width: 70%;
		padding-right: 130px;
		flex-wrap: nowrap;
	}

	#weather {
		display: flex;
		flex-wrap: nowrap;
	}

	#topNav div,
	#weather div,
	#snowReport div,
	#grooming div {
		display: flex;
		justify-content: space-around;
		flex-grow: 1;
		align-content: center;
		padding: 0;
		margin: 0;
		height: 100px;
	}

	#topNav h1,
	#topNav h2,
	#topNav h3,
	#flyout h1,
	#flyout h2,
	#flyout h3 {
		margin: 0;
	}

	#topNav h1 {
		margin: 0;
		padding: 0;
	}

	#topNav h3,
	topNav img {
		margin: 0;
		padding: 0;
	}

	#flyout,
	#camView {
		position: absolute;
		right: 0;
		top: 188px;
		width: 70%;
		padding-right: 130px;
		display: none;
		color: #ffffff;
		z-index: 2;
		background: var(--transparency);
		text-shadow: 2px 2px 2px black;
	}

	.cam-div p {
		max-width: 800px;
		padding: 0 1rem;
	}

	.cam-view {
		width: 800px;
		height: 450px;
	}

	#flyout h1 {
		padding-left: 15px;
	}

	#station img {
		height: 150px;
		padding: 0px 10px;
	}

	#station {
		flex-wrap: nowrap;
	}

	.not-mobile {
		display: inline;
	}

	.separator.mobile {
		width: unset;
	}

	.separator {
		flex-direction: row;
		align-items: center;
	}

	.separator::after {
		content: url(images/icons/Separator.png);
		filter: drop-shadow(2px 2px 2px black);
		margin-right: 1px;
	}

	#hero {
		padding-top: 0;
		min-height: 750px;
	}

	#hero,
	#tri-hero,
	.slide {
		z-index: 0;
		display: grid;
		grid-template-areas: "filler-row filler-row filler-row" "top-left top-middle top-right"
			"middle-left middle-middle middle-right" "bottom-left bottom-middle bottom-right";
	}

	#no-hero {
		min-height: 180px;
	}

	.top-left,
	.top-middle,
	.top-right,
	.middle-left,
	.middle-middle,
	.middle-right,
	.bottom-left,
	.bottom-middle,
	.bottom-right {
		display: flex;
		justify-content: center;
		align-items: center;
		max-width: 100%;
		z-index: 1;
	}

	.none {
		display: none;
	}

	.top-left {
		grid-area: top-left;
	}

	.top-middle {
		grid-area: top-middle;
	}

	.top-right {
		grid-area: top-right;
	}

	.middle-left {
		grid-area: middle-left;
	}

	.middle-middle {
		grid-area: middle-middle;
	}

	.middle-right {
		grid-area: middle-right;
	}

	.bottom-left {
		grid-area: bottom-left;
	}

	.bottom-middle {
		grid-area: bottom-middle;
	}

	.bottom-right {
		grid-area: bottom-right;
	}

	#hero img {
		max-width: 100%;
	}

	#tri-hero img {
		flex: 1;
		width: 33.3%;
		height: auto;
		max-height: 550px;
		overflow: hidden;
	}

	.calendar {
		width: 90%;
		height: 600px;
	}

	/** FOOTER **/

	#about {
		margin: 0 110px;
	}

	.links {
		margin: 0 110px;
	}

	/** MAIN **/

	#content {
		display: grid;
		padding: 1rem 0;
		margin: 0 110px;
		grid-template-columns: 3fr 1fr 1fr;
	}

	#product {
		grid-column: 1 / 4;
		margin: 0 100px;
	}

	/** CART **/

	.show-cart {
		top: unset;
		bottom: 35px;
		right: 0;
	}

	.cart-icon {
		min-width: 120px;
		min-height: 110px;
		background-image: url('images/icons/shopping-cart.png');
	}

	.cart-items {
		font-size: 2rem;
		padding: 0 0 1.2rem .5rem;
	}
}

/** LARGE SCREEN **/
@media (min-width: 1600px) {
	#logo {
		width: 188px;
		display: flex;
		margin: 0;
		position: absolute;
		z-index: 2;
		padding: 10px;
	}

	#logo img {
		width: 188px;
		height: auto;
	}

	.logo-overlay {
		width: 175px;
		height: 175px;
		font-size: 1.5rem;
	}

	.logo-overlay span {
		align-self: flex-end;
		margin-bottom: 18px;
		font-size: 1.5rem;
		color: var(--bright-green);
	}
}