:root {
	--primary: #2b69e9;
	--brand-secondary: #28AB0F;

	--active-store: #084013;
	--icon-green: #28ab0b;

	--listing-background: #090b13;
	--list-background: #2e2e2e;

	--list-link: #fdfdfd;
	--icon-arrow: #9295a7;

	--list-text-light: #9e9e9e;

	--success: #0BDA51;
	--error: #ff0000;
}
html {
	box-sizing: border-box;
}
*,
*::before,
*::after {
	box-sizing: inherit;
}
body {
	font-size: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Oswald', sans-serif;
	background-repeat: no-repeat;
	background-position: center top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
}
img {
	width: 100%;
	height: auto;
	display: block;
}
.container {
	padding-top: calc(60px + 1rem);
	padding-left: 1rem;
	padding-right: 1rem;
	min-height: 100vh;
	position: relative;
	/* --- */
	flex-direction: column;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
@media (min-width: 768px) {
.container {
		padding-left: 0;
		padding-right: 0
}
	}
header {
	position: relative;
	height: 60px;
	background: #262626;
	padding: 0 20px;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.4);
}
.nav-wrapper {
	display: flex;
	max-width: 980px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
}
.nav-wrapper .brand {
		width: 100%;
		max-width: 124px;
		margin-right: 1rem;
	}
.nav-wrapper .mobile-nav-holder {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background-color: #333;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease-out;
		z-index: 20;
		box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.4);
	}
@media (min-width: 768px) {
.nav-wrapper .mobile-nav-holder {
			position: static;
			background: transparent;
			max-height: none;
			transition: none;
			box-shadow: none
	}
	}
.nav-wrapper .main-nav {
		/*position: absolute;
		left: 0;
		top: 100%;*/
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;
		height: auto;
		align-items: center;
		width: 100%;
		background: #444;
	}
@media (min-width: 768px) {
.nav-wrapper .main-nav {
			padding: 1rem 0;
			position: static;
			display: flex;
			flex: 1 0 auto;
			flex-direction: row;
			justify-content: flex-end;
			height: 100%;
			align-items: center;
			width: 100%;
			background: transparent
	}
	}
.nav-wrapper .search-wrapper {
		flex: 1 0 auto;
		width: 100%;
		padding: 1.3rem 0;
		border-bottom: 1px solid rgba(255,255,255, 0.31);
	}
@media (min-width: 768px) {
.nav-wrapper .search-wrapper {
			border-bottom: 0;
			padding: 0;
			width: initial
	}
	}
.nav-wrapper .search__input {
		border: 0;
		padding: 0.25rem 0.5rem 0.25rem 1rem;
		z-index: 2;
		position: absolute;
		top: 50%;
		bottom: 0;
		left: 0;
		width: calc(100% - 42px);
		opacity: 1;
		cursor: pointer;
		background: transparent;
		color: #fff;
		font-size: 1.125rem;
		font-family: "Oswald", sans-serif;
		font-weight: 300;
		outline: 0;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
		height: 32px;
	}
@media (min-width: 768px) {
.nav-wrapper .search__input {
			padding: 0.25em 1em;
			opacity: 0;
			z-index: initial;
			width: 100%;
	}
	}
.nav-wrapper .search__input::-webkit-input-placeholder {
			color: #fff;
			opacity: .8;
		}
.nav-wrapper .search__input::placeholder {
			color: #fff;
			opacity: .8;
		}
.nav-wrapper .search {
		border: 2px solid #2B69E9;
		display: flex;
		border-radius: 50px;
		justify-content: flex-end;
		overflow: hidden;
		font-size: 1.25rem;
		position: relative;
		width: 250px;
		height: 50px;

		padding: 2px;
		margin: 0 auto;
	}
@media (min-width: 768px) {
.nav-wrapper .search {
			width: 50px;
			transition: width 450ms cubic-bezier(0.18, 0.89, 0.32, 1);
	}
	}
.nav-wrapper .search__submit {
			border: 0;
			background: #2B69E9;
			color: #fff;
			width: 42px;
			height: 42px;
			position: relative;
			border-radius: 50%;
		}
@media (min-width: 768px) {
.nav-wrapper .search__submit {
				background: none;
				z-index: -1;
		}
	}
.nav-wrapper .search__submit svg {
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-46%, -50%);
				        transform: translate(-46%, -50%);
				width: 16px;
				height: auto;
			}
@media (min-width: 768px) {
		.nav-wrapper .search:focus-within {
			width: 250px;
		}

			.nav-wrapper .search:focus-within .search__input {
				opacity: 1;
				z-index: initial;
				width: calc(100% - 32px);
			}

			.nav-wrapper .search:focus-within .search__submit {
				background: #2B69E9;
				color: #fff;
				z-index: initial;
				cursor: pointer;
			}
	}
/*& .search:focus-within {
		width: 250px;

		& .search__input {
			opacity: 1;
			z-index: initial;
			width: calc(100% - 50px);
		}

		& .search__submit {
			background: #2B69E9;
			color: #fff;

		}
	} */
.nav-wrapper .menu {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: center;
		width: 100%;
	}
@media (min-width: 768px) {
.nav-wrapper .menu {
			text-align: left;
			width: auto;
	}
	}
.nav-wrapper .menu li {
			padding: 0;
			display: block;
		}
.nav-wrapper .menu li:first-of-type a {
					border-top: 0;
				}
@media (min-width: 768px) {
.nav-wrapper .menu li:first-of-type a {
						border-top: 1px solid rgba(255,255,255, 0.31);
						padding-top: .5rem;
						border-top: 0;
						padding-top: 0;
						margin-top: 0
				}
	}
@media (min-width: 768px) {
.nav-wrapper .menu li:last-of-type a {
						border-top: 0;
						padding-bottom: 0
				}
	}
@media (min-width: 768px) {
.nav-wrapper .menu li {
				display: inline;
				padding: 0 .5rem;
	}

				.nav-wrapper .menu li:first-of-type {
					padding-left: 0;
				}

				.nav-wrapper .menu li:last-of-type {
					padding-right: 0;
				}
	}
.nav-wrapper .menu li a {
				display: block;
				color: #fff;
				text-decoration: none;
				font-size: 1.125rem;
				font-family: "Oswald", sans-serif;
				font-weight: 300;
				padding: 1rem 0;
				border-top: 1px solid rgba(255,255,255, 0.31);
			}
.nav-wrapper .menu li a.link--active {
					color: var(--primary);
				}
@media (min-width: 768px) {
.nav-wrapper .menu li a {
					display: initial;
					border: 0;
	}
	}
.nav-wrapper .menu li a:hover {
					color: #2B69E9;
				}
form fieldset {
		margin: 0;
		padding: 0;
		border: 0;
		line-height: 0;
	}
.mobile-nav-btn {
	color: #fff;
	display: block;
	width: 40px;
	height: 35px;
	padding: 0.3125rem;
	position: absolute;
	right: 20px;
	cursor: pointer;
}
.mobile-nav-btn .mnb1,
	.mobile-nav-btn .mnb2,
	.mobile-nav-btn .mnb3 {
		width: 30px;
		height: 4px;
		background: #ccc;
		margin: 6px 0;
		transition: 0.3s;
		opacity: 1;
		border-radius: 50px;
	}
.mobile-nav-btn .mnb1 {
		margin-top: 0;
	}
.mobile-nav-btn .mnb3 {
		margin-bottom: 0;
	}
.mobile-nav-btn.active .mnb1 {
		-webkit-transform: rotate(-45deg) translate(-7px, 7px);
		        transform: rotate(-45deg) translate(-7px, 7px);
	}
.mobile-nav-btn.active .mnb2 {
		opacity: 0;
	}
.mobile-nav-btn.active .mnb3 {
		-webkit-transform: rotate(45deg) translate(-7px, -7px);
		        transform: rotate(45deg) translate(-7px, -7px);
	}
.mobile-nav-btn > div {
		pointer-events: none;
	}
@media (min-width: 768px) {
.mobile-nav-btn {
		display: none;
	}
	}
footer {
	padding: 2rem 1rem 0;
	text-align: center;
	font-size: 0.8rem;
	color: #fff;
	width: 100%;

}
.footer__wrapper {
		 max-width: 980px;
		 margin: 0 auto;
		 border-top: 1px solid #fff;
		 font-weight: 400;
	 }
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #555;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
}
.overlay .droplet {
		width:300px;
		height: 300px;
		background-color: #1159DF;
		border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
		-webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg);
		position: relative;
		box-shadow: inset 0 0 20px 0 rgba(255,255,255,.9), 0 4px 10px 0 rgba(0,0,0,.75);
		overflow: hidden;
	}
.overlay .droplet:before, .overlay .droplet:after{
		content:'';
		position: absolute;
		width:470px;
		height: 470px;
		top:-250px;
		left: 80px;
		background-color: #fff;
		-webkit-transform: rotate(-120deg);
		        transform: rotate(-120deg);
	}
.overlay .droplet:before{
		border-radius: 80% 60% 45% 35% / 60% 45% 55% 44%;
		background:rgba(255,255,255,.7);
		-webkit-animation:wave 2s linear infinite;
		        animation:wave 2s linear infinite;
	}
.overlay .droplet:after{
		border-radius: 60% 45% 55% 50% / 35% 45% 60% 80%;
		background:rgba(255,255,255,.5);
		-webkit-animation:wave 2s linear infinite;
		        animation:wave 2s linear infinite;
	}
.overlay .droplet-text {
		width: 70%;
		position: absolute;
		color: #fff;
		-webkit-transform: translate(-75%) rotate(45deg);
		        transform: translate(-75%) rotate(45deg);
		z-index: 5;
		left: 50%;
		top: 50%;
		font-size: 1.5rem;
		text-align: center;
		font-weight: 300;
	}
.overlay .highlight {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		position: absolute;
		top: -55px;
		left: 0;
		background: #fff;
		opacity: .7;
		-webkit-filter: blur(2px);
		        filter: blur(2px);
	}
@-webkit-keyframes wave {
	0%{
		-webkit-transform: rotate(0);
		        transform: rotate(0);
	}
	100%{
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}
@keyframes wave {
	0%{
		-webkit-transform: rotate(0);
		        transform: rotate(0);
	}
	100%{
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}
.spinner {
	border: 8px solid var(--ice);
	border-top: 8px solid var(--twitchPurple);
	border-radius: 200px;
	width: 100px;
	height: 100px;
	-webkit-animation: spin 2s linear infinite;
	        animation: spin 2s linear infinite;
	pointer-events: none;
}
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}
@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}
:root {
  --icon-color-primary: inherit;
  --icon-color-secondary: currentColor;
  --icon-sm: 0.8em;
  --icon-lg: 1.2em;
}
.icon {
  color: var(--icon-color-primary); /* icon primary color */
  /*height: 1em;
  width: 1em;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;*/
  width: 100%;
}
/*
.icon use {
  fill: var(--icon-color-secondary);
  stroke: var(--icon-color-secondary);
}

.icon-theme-1 {
  --icon-color-primary: #000000;
  --icon-color-secondary: inherit;
}

.icon-sm {
  font-size: var(--icon-sm);
}

.icon-lg {
  font-size: var(--icon-lg);
}
*/
/* absolute units */
/*
.icon-16 {
  font-size: 16px;
}

.icon-32 {
  font-size: 32px;
}

.icon-hugh {
  font-size: 512px;
}

.icon use {
  --icon-stroke-linecap-butt: butt;
  stroke-miterlimit: 10;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.stroke-round use {
  --icon-stroke-linecap-butt: round;
  stroke-linecap: round;
  stroke-linejoin: round;
}
*/
.icon-rotate-90 {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.icon-rotate-180 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.icon-rotate-270 {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.icon-flip-y {
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}
.icon-flip-x {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.icon-is-spinning {
  -webkit-animation: icon-spin 1s infinite linear;
          animation: icon-spin 1s infinite linear;
}
@-webkit-keyframes icon-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes icon-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.panel {
	margin: 0 auto;
	position: relative;
	max-width: 500px;
	width: 100%;
	background: rgba(255, 255, 255, 0.7);

	padding: 1rem 1.5rem;
	border-radius: 15px;
	color: #404040;
	min-height: 224px;
	box-shadow:
		0px 2.1px 0.9px rgba(0, 0, 0, 0.073),
		0px 3.6px 2.1px rgba(0, 0, 0, 0.101),
		0px 5.8px 4px rgba(0, 0, 0, 0.12),
		0px 9.3px 7.1px rgba(0, 0, 0, 0.139),
		0px 15.3px 13.4px rgba(0, 0, 0, 0.162),
		0px 36px 32px rgba(0, 0, 0, 0.19);
}
.panel-help h1, .panel-about h1, .panel-not-found h1 {
			font-weight: 400;
			border-bottom: 1px solid #aaa;
			padding-bottom: 0.4rem;
		}
.panel-help h2, .panel-about h2, .panel-not-found h2 {
			font-weight: 400;
			font-size: 1.5rem;
			border-bottom: 1px solid #aaa;
			padding-bottom: 0.4rem;
		}
.panel-help p, .panel-about p, .panel-not-found p {
			font-family: "Oswald", sans-serif;
			font-weight: 300;
		}
.panel-not-found span {
			font-size: 1.5rem;
		}
.panel a {
		color: var(--primary);
		text-decoration: none;
	}
.panel .btn {
		border-radius: 0.5rem;
		padding: 0.5rem 1rem;
		color: #fff;
		background: var(--primary);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin: 0.6rem 0 0;
	}
.panel .btn:hover {
			background: #1E4CA8FF;
		}
.panel .btn span {
			width: 32px;
			height: auto;
			display: inline-flex;
			align-items: center;
		}
.panel .btn span svg {
				max-width: 32px;
				margin-right: 0.3rem;
			}
/* search panel */
.panel-search {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
.panel-search > * {
			margin: 0;
		}
.panel-search h1 {
			text-align: center;
			font-size: 2.25rem;
			font-weight: 300;
		}
.panel-search form {
			display: block;
			width: 100%;
		}
.panel-search p {
			font-size: 1.125rem;
			font-weight: 300;
			text-align: center;
		}
.panel-search p strong {
				font-weight: 400;
			}
.panel-search__input {
			padding: 0.3rem;
			border: 0;
			font-size: 1.43rem;
			font-family: "Oswald", sans-serif;
			font-weight: 300;
			color: #404040;
			width: calc(100% - 40px);
			background: transparent;
		}
.panel-search__submit {
			width: 36px;
			height: 36px;
			border: 0;
			background: transparent;
			color: var(--primary);
			cursor: pointer;
		}
.panel-search fieldset {
			border-bottom: 1px solid #404040;
			padding: 0.5rem 0 0.2rem;
			width: 100%;
			display: block;
			line-height: 0;
		}
/* panel help */
.panel-help ol {
			padding: 0 0 0 1rem;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			gap: 0.5rem 1rem;
		}
.panel-help li {
			font-weight: 300;
			width: initial;
			padding-right: 1rem;
			line-height: 1.2;
		}
@media (min-width: 768px) {
.panel-help li {
				width: 47%
		}
	}
.panel-help li::marker {
			font-weight: 400;
		}
.help-card {
		position: relative;
	}
.help__weather-icons {
		margin-bottom: 2rem;
	}
.help__weather-icons,
	.help__moon-icons {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
	}
.help__weather-icons span, .help__moon-icons span {
			width: 46%;
			display: inline-flex;
			align-items: center;
			font-weight: 300;
		}
.help__weather-icons span svg, .help__moon-icons span svg {
				width: 42px;
				height: auto;
				margin-right: 0.3rem;
			}
.help__moon-icons {
		gap: 0 1rem;
	}
.card {
	/*display: none;*/
	margin: 0 auto;
	max-width: 500px;
	width: 100%;
	border-radius: 1rem;
	padding: 1rem;
	color: #fff;
	font-weight: 300;
	position: relative;
	box-shadow:
		0px 2.1px 0.9px rgba(0, 0, 0, 0.073),
		0px 3.6px 2.1px rgba(0, 0, 0, 0.101),
		0px 5.8px 4px rgba(0, 0, 0, 0.12),
		0px 9.3px 7.1px rgba(0, 0, 0, 0.139),
		0px 15.3px 13.4px rgba(0, 0, 0, 0.162),
		0px 36px 32px rgba(0, 0, 0, 0.19);

}
.card h1 {
		font-size: 1.5rem;
		font-weight: 300;
		text-align: center;
		margin: 0 auto 1rem;
		width: calc(100% - 80px);
	}
.card h2 {
		font-size: 1.2rem;
		font-weight: 300;
		text-align: center;
	}
.card-report__top {
		padding-bottom: 1.625rem;
	}
.card-report__top-day-wrapper {
		position: relative;
	}
.card-report__day {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
		transition: opacity .75s ease-in;
		z-index: 1;
	}
.card-report__day--active {
			display: block;
			opacity: 1;
			z-index: 5;
		}
.card-report__forecast-main {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
.card-report__moon {
		min-width: 54px;
	}
@media (min-width: 768px) {
.card-report__moon {
			min-width: 83px;
	}
	}
.card-report__moon-text {
			font-size: 1.125rem;
			text-transform: uppercase;
		}
.card-report__moon-icon {
			max-width: 38px;
			height: 38px;
			position: relative;
		}
.card-report__moon-icon svg {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 64px;
				height: auto;
				-webkit-transform-origin: 50% 50%;
				        transform-origin: 50% 50%;
				-webkit-transform: translate(-32px, -32px);
				        transform: translate(-32px, -32px);
			}
[data-hemisphere="south"] .card-report__moon-icon svg{
					-webkit-transform: scaleX(-1) translate(32px, -32px);
					        transform: scaleX(-1) translate(32px, -32px);
				}
.card-report__icon {
		width: 100%;
		max-width: 190px;
	}
@media (min-width: 768px) {
.card-report__icon {
			max-width: 200px;
	}
	}
.card-report__icon svg {
			width: 100%;
			height: auto;
		}
.card-report__sun {
		font-size: 1rem;
		font-weight: 300;
	}
@media (min-width: 768px) {
.card-report__sun {
			font-size: 1.25rem
	}
	}
.card-report__sun-rise {
		display: flex;
		text-align: inherit;
		max-width: 100px;
		align-items: center;
		height: 30px;
	}
.card-report__sun-rise-icon {
			max-width: 48px;
			line-height: 0;
		}
.card-report__sun-rise-time {
		/*/font-size: 1rem;
		font-weight: bold;/*/
		display: inline-flex;
		align-items: center;
	}
.card-report__sun-set {
		display: flex;
		text-align: inherit;
		max-width: 100px;
		align-items: center;
		height: 30px;
	}
.card-report__sun-set-icon {
			max-width: 48px;
			line-height: 0;
		}
.card-report__sun-set-time {
		display: inline-flex;
		align-items: center;
	}
.card-report__summary {
		text-align: center;
		font-size: 1.5rem;
		margin: 1.2rem 0;
	}
.card-report__forecast-detail {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		gap: 0 1rem
	}
.card-report__precip {
		display: flex;
		align-items: flex-end;
	}
.card-report__precip-icon {
			width: 50px;
			height: 50px;
			position: relative;
		}
@media (min-width: 768px) {
.card-report__precip-icon {
				width: 66px;
				height: 66px;
		}
	}
.card-report__precip-icon svg {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 58px;
				height: auto;
				-webkit-transform: translate(-32px, -28px);
				        transform: translate(-32px, -28px);
			}
@media (min-width: 768px) {
.card-report__precip-icon svg {
					width: 69px
			}
	}
.card-report__precip-text {
			font-size: 1.5rem;
			line-height: 1.6;
		}
.card-report__temp-high {
		display: flex;
		align-items: flex-end;
	}
.card-report__temp-high-icon {
			width: 36px;
			height: 36px;
		}
.card-report__temp-high-text {
			font-size: 2.4rem;
			line-height: 1.2;
		}
@media (min-width: 768px) {
.card-report__temp-high-text {
				font-size: 3rem
		}
	}
.card-report__temp-low {
		display: flex;
		align-items: flex-end;
	}
.card-report__temp-low-icon {
			width: 36px;
			height: 36px;
		}
.card-report__temp-low-text {
			font-size: 2.4rem;
			line-height: 1.2;
		}
@media (min-width: 768px) {
.card-report__temp-low-text {
				font-size: 3rem
		}
	}
.card-report__bottom {
		overflow-x: auto;

	}
.card-report__bottom .card-report__week {
			/*width: 96px;*/
			text-align: center;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.1);
			border-radius: 1rem;
			width: 50%;
			cursor: pointer;
			flex: 1 0 calc(50% - 10px);
		}
@media (min-width: 768px) {
.card-report__bottom .card-report__week {
				width: 30%;
				flex: initial;
		}
	}
.card-report__bottom .card-report__week > * {
				pointer-events: none;
			}
.card-report__bottom svg {
			width: 100%;
			height: auto;
			display: inline-block;
		}
.card-report__bottom .day-active {
			background-color: rgba(0, 0, 0, 0.25);
		}
.card-report__bottom .mobile-instruction p {
				margin: 0.5rem 0 0;
			}
@media (min-width: 768px) {
.card-report__bottom .mobile-instruction {
				display: none;
	}
	}
.card-report__week-view {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 20px 20px;
		overflow-x: auto;
	}
@media (min-width: 768px) {
.card-report__week-view {
			flex-wrap: wrap
	}
	}
.card-report__week-title {
		text-transform: uppercase;
		font-size: 1.125rem;
		padding: 0.5rem 0 0.3rem;
	}
.card-report__week-icon {
		margin: 0 auto;
		max-width: 68px;
		height: auto;
		width: 100%;
		color: #fff;
		line-height: 0;
	}
.card-report__week-temp {
		display: flex;
		justify-content: space-between;
		padding: 0 0.5rem 0.25rem;
		font-size: 1.125rem;
	}
.card-report__week-temp-high {
			width: 50%;
			display: inline-flex;
			align-items: center;
		}
.card-report__week-temp-high svg {
				width: 32px;
				height: auto;
			}
.card-report__week-temp-low {
			width: 50%;
			display: inline-flex;
			justify-content: flex-end;
			align-items: center;
			padding-right: 0.4rem;
		}
.card-report__week-temp-low svg {
				width: 32px;
				height: auto;
			}
.card__charts {
	opacity: 0;
	background: rgba(255,255,255,1);
	position: absolute;
	top: 1rem;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: -1;

}
.card__charts h1 {
		color: #777;
		font-size: 1.125rem;
	}
.card__charts-canvas {
		width: 100%;
		min-height: 200px;
	}
.more-actions--btn {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 1rem;
		top: 1rem;
		border-radius: 50%;
		color: rgba(255, 255, 255, 0.5);
		background-color: rgba(0, 0, 0, 0.1);
		display: inline-flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		z-index: 10;
	}
.more-actions--btn svg {
			pointer-events: none;
			max-width: 22px;
			height: auto;
			width: 100%;
		}
.more-actions--btn:hover {
			color: rgba(255, 255, 255, 1);
			background-color: rgba(0, 0, 0, 0.5);
		}
.more-actions--btn.menu--is-open {
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
		}
.more-actions--btn.menu--is-open .more-actions--menu {
				display: block;
			}
.more-actions--menu {
		display: none;
		padding: 0.5rem 0;
		position: absolute;
		height: 50px;
		top: 100%;
		right: 0;
		width: 160px;
		max-width: 200px;
		background: #fff;
		border-radius: .25rem;
		color: #666;
		box-shadow:  0 3px 7px 1px rgba(0, 0, 0, 0.4);
		text-align: right;
		list-style: none;
		margin: .3rem 0 0;
	}
.more-actions--menu::before {
			content: '';
			width: 0;
			height: 0;
			border: 0 solid transparent;
			border-right-width: 0.5rem;
			border-left-width: 0.5rem;
			border-bottom: 0.5rem solid #fff;
			position: absolute;
			top: -7px;
			right: 6px;
		}
.more-actions--menu > li {
			display: inline-flex;
			align-items: center;
			padding: 0.3rem;
			width: 100%;
		}
.more-actions--menu > li svg {
				margin-right: .2rem;
			}
.more-actions--menu > li:hover {
				background-color: #ddd;
			}
.more-actions--menu:hover {
			color: #000;
		}
.card__close {
	position: absolute;
	right: 1rem;
	top: 1rem;
	color: #777;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 1;
	border: none;
	background: transparent;
	padding: 0;
}
.card__close svg {
		pointer-events: none;
		max-width: 22px;
		height: auto;
		width: 100%;
	}
.card__close:hover {
		color: #333;
	}
/* Copy this @keyframes block to your CSS*/
@-webkit-keyframes down-up {
	0%{
		-webkit-transform: translate(-50%, -150px);
		        transform: translate(-50%, -150px);
		opacity: 0;
		z-index: 12;
	}
	50% {
	-webkit-transform: translate(-50%, 50px);
	        transform: translate(-50%, 50px);
	opacity: .75;
	z-index: 12;
	}
	100% {
		-webkit-transform: translate(-50%, 0);
		        transform: translate(-50%, 0);
		opacity: 1;
		z-index: 12;
	}
}
@keyframes down-up {
	0%{
		-webkit-transform: translate(-50%, -150px);
		        transform: translate(-50%, -150px);
		opacity: 0;
		z-index: 12;
	}
	50% {
	-webkit-transform: translate(-50%, 50px);
	        transform: translate(-50%, 50px);
	opacity: .75;
	z-index: 12;
	}
	100% {
		-webkit-transform: translate(-50%, 0);
		        transform: translate(-50%, 0);
		opacity: 1;
		z-index: 12;
	}
}
/* down-up in reverse */
@-webkit-keyframes up-down {
	0% {
		-webkit-transform: translate(-50%, 0);
		        transform: translate(-50%, 0);
		opacity: 1;
		z-index: 12;
	}
	50% {
		-webkit-transform: translate(-50%, 50px);
		        transform: translate(-50%, 50px);
		opacity: .75;
		z-index: 12;
	}
	100% {
		-webkit-transform: translate(-50%, -150px);
		        transform: translate(-50%, -150px);
		opacity: 0;
		z-index: -1;
	}
}
@keyframes up-down {
	0% {
		-webkit-transform: translate(-50%, 0);
		        transform: translate(-50%, 0);
		opacity: 1;
		z-index: 12;
	}
	50% {
		-webkit-transform: translate(-50%, 50px);
		        transform: translate(-50%, 50px);
		opacity: .75;
		z-index: 12;
	}
	100% {
		-webkit-transform: translate(-50%, -150px);
		        transform: translate(-50%, -150px);
		opacity: 0;
		z-index: -1;
	}
}
/* Add the animation: property to whichever element you want to animate */
.down--up {
	-webkit-animation: down-up .75s ease 0s 1 normal both;
	        animation: down-up .75s ease 0s 1 normal both;
}
.up--down {
	-webkit-animation: up-down .75s ease 0s 1 normal both;
	        animation: up-down .75s ease 0s 1 normal both;
}
.alert {
  /* Original styles
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 400;
  text-align: center;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25);
  width: 80%; */
  top: 80px;
  width: 100%;
  padding: 1rem;
  border-radius: 0.5rem;
  position: absolute;
  z-index: 9999;
  display: inline-block;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: #fff;
  box-shadow: 0 3px 6px 0 rgba(0,0,0,.5);
  text-align: center;
  max-width: 280px;
}
@media (min-width: 768px) {
.alert {
    padding: 1rem 2rem;
}
	}
.alert--success {
    background-color: var(--success);
  }
.alert--error {
    background-color: var(--error);
  }
.panel-help h1, .panel-about h1, .panel-404 h1 {
		font-weight: 400;
		border-bottom: 1px solid #aaa;
		padding-bottom: 0.4rem;
	}
.panel-help h2, .panel-about h2, .panel-404 h2 {
		font-weight: 400;
		font-size: 1.5rem;
		border-bottom: 1px solid #aaa;
		padding-bottom: 0.4rem;
	}
.panel-help p, .panel-about p, .panel-404 p {
		font-family: "Oswald", sans-serif;
		font-weight: 300;
	}
main {
	padding: 1rem;
	/*min-height: 100vh;*/
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 2 0 auto;
}
.bckgd-image {
	position:fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	height: 100vh;
	-webkit-transform: translate3d(0,0,0);
	        transform: translate3d(0,0,0);
}
/*# sourceMappingURL=main.css.map */