* {
	margin: 0;
	padding: 0;
	/* height: 100%; */
	font: normal 'Alegreya Sans', sans-serif;
}

section.bg {
  background: url(https://source.unsplash.com/random/?nature) fixed center; 
  background-size: cover;
  width: 100%;
  height:100%;
  opacity: 0.8;
}

#map {
	height: 300px;
	width: inherit;
}

.container-flex-column {
  display: flex;
	flex-direction:column;
  justify-content: center;
  height: 100%;
} 

div.screen {
  padding: 1% 15%;
	background: rgba(2, 43, 37, 0.329);
	color: white;
}

input[type="checkbox"] {
	z-index: -1;
	background-color: black !important;
}

input[type="checkbox"]:active+label {
	padding-left: 10px;
	color: white;
}

input[type="checkbox"]:checked+label::before {
	top: 5px;
	background: rgba(52, 185, 112, 0.753);
}

label[for="celsius"],
label[for="celsius"]::before {
	-webkit-transition: 100ms all ease-in-out;
	transition: 100ms all ease-in-out;
}

label[for="celsius"] {
	position: relative;
	display: inline-block;
	padding-top: 15px;
	padding-left: 7px;
	cursor: pointer;
}

button,
input[type="text"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
  border-radius: 6px;
  color: white;
}

input[type="text"] {
	box-sizing: border-box;
	box-shadow: 0 2px 1px rgba(252, 252, 252, 0.801);
	margin: 3px;
	padding: 7px;
	font-size: 1.1em;
	width: 70%;
	background-color: rgba(17, 16, 16, 0.795);
}

/* reutilizables */

.right {
	float: right;
}

.left {
	float: left;
}

.center {
	text-align: center;
}

input::placeholder {
  color: rgba(224, 221, 221, 0.527);
  font-size: 14px;
}

legend {
	font-size: 1.5em;
	padding: 14px;
}

figure img {
	width: 9%;
	padding-top: 7px;
}

fieldset {
	border: none;
	padding: 0 auto;
	/* color: white; */
}

label {
	font-weight: 400;
	font-size: 1.3em;
}

button:not(#back) {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.15);
	margin-left: 6%;
	padding: 13px;
	-webkit-transition: 200ms all ease-in-out;
	transition: 200ms all ease-in-out;
	width: 40%;
	font-weight: 700;
	text-transform: uppercase;
	background: rgba(26, 117, 98, 0.822);
	color: white;
}

button:not(#back):hover {
	cursor: pointer;
	background: #67f1c3a6;
	/* padding: 12px; */
}

button:not(#next) {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.15);
	margin-left: 6%;
	padding: 13px;
	-webkit-transition: 200ms all ease-in-out;
	transition: 100ms all ease-in-out;
	width: 30%;
	font-weight: 700;
	text-transform: uppercase;
	background: rgba(26, 117, 98, 0.822);
	color: white;
}

button:not(#next):hover {
	cursor: pointer;
	background: #67f1c3a6;
}

/* animaciones */

.fadein-stagger>* {
	opacity: .5;
	-webkit-transition-property: opacity, -webkit-transform;
	transition-property: opacity, -webkit-transform;
	transition-property: opacity, transform;
	transition-property: opacity, transform, -webkit-transform;
	-webkit-transition-duration: 70ms;
	transition-duration: 70ms;
	-webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	-webkit-transform: translateY(-30px);
	transform: translateY(-30px);
}

.fadein-stagger>*:nth-of-type(1) {
	-webkit-transition-delay: 50ms;
	transition-delay: 50ms;
}

.fadein-stagger>*:nth-of-type(2) {
	-webkit-transition-delay: 100ms;
	transition-delay: 100ms;
}

.fadein-stagger>*:nth-of-type(3) {
	-webkit-transition-delay: 150ms;
	transition-delay: 150ms;
}

.fadein-stagger>*:nth-of-type(4) {
	-webkit-transition-delay: 200ms;
	transition-delay: 200ms;
}

.fadein-stagger>*:nth-of-type(5) {
	-webkit-transition-delay: 250ms;
	transition-delay: 250ms;
}

.fadein-stagger>*:nth-of-type(6) {
	-webkit-transition-delay: 300ms;
	transition-delay: 300ms;
}

.fadein-stagger>*:nth-of-type(7) {
	-webkit-transition-delay: 350ms;
	transition-delay: 350ms;
}

.fadein-stagger>*.js-animated {
	opacity: 1;
	-webkit-transform: translateX(0) translateY(0);
	transform: translateX(0) translateY(0);
}

/* fin de animaciones */


.city {
	margin-bottom: 0;
	font-size: 1.2em;
	font-weight: 700;
	text-align: center;
	color: white;
}

.summary {
	margin-bottom: 0;
	margin-top: 1.4rem;
	font-size: 1em;
	font-weight: 400;
	text-align: center;
}

.hourly {
	word-wrap: break-word;
}

.hourly b {
	display: block;
	padding: 0.5rem 0 0.5rem 0;
	color: white;
}

.hourly ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.hourly ul li {
	margin: 0.19;
}

.graphic {
	box-shadow: 0 1px 0 rgba(71, 71, 71, 0.48), 0 1px 0 rgba(255, 255, 255, 0.1);
	margin-bottom: 1rem;
	width: 100%;
}

.graphic canvas {
	display: inline;
}

#forecast {
	height: 100%;
	margin: auto;
  width: 100%;
  text-align: center;
}

#forecast>li,
#forecastWeek>div {
	box-shadow: 0 3px 6px rgba(107, 106, 106, 0.16), 0 3px 6px rgba(238, 237, 237, 0.966);
	border-radius: 2px;
	margin: 1rem 0.5rem;
	padding: 0.5rem;
  background: #157279be;
}

.card {
	padding: 0.5rem;
}

.front.card>div {
	box-shadow: 0 1px 0 rgba(56, 56, 56, 0.48), 0 1px 0 rgba(255, 255, 255, 0.1);
	padding-bottom: 1rem;
}



.list-reset {
	list-style-type: none;
	margin: 0;
	padding: 0;
}