body {
	background: #F9D1AA;
	color: #110F14;
}

#symbol {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

#logo {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 10;
}

#newsletter {
	width: 30%;
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 10;
}

#newsletter p {
	color: #110F14;
	padding: 0 42px 10px 0;
	font: normal normal 20px/1 "Switzer";
	leading-trim: both;
	text-edge: cap;
}

h2 {
	margin-bottom: 40px;
	font: bold italic 32px/1 "Exposure";
	leading-trim: both;
	text-edge: cap;
}

form {
	position: relative;
	width: 100%;
}


.images img {
	position: absolute;
	z-index: 1;
	width: 20%;
	height: auto;
	display: block;
	mix-blend-mode: multiply;
	opacity: 0;
	animation: showOne 12s ease-in-out infinite;
}

.images img:nth-child(1) { animation-delay: 0s; }
.images img:nth-child(2) { animation-delay: -9s; }
.images img:nth-child(3) { animation-delay: -6s; }
.images img:nth-child(4) { animation-delay: -3s; }

@keyframes showOne {
	0%    { opacity: 0; }
	4%    { opacity: 1; }   /* fade in */
	21%   { opacity: 1; }   /* fica visível */
	25%   { opacity: 0; }   /* fade out */
	100%  { opacity: 0; }
}


input[type="email"] {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #110F14;
	color: #110F14;
	padding: 0 42px 10px 0;
	font: normal normal 20px/1 "Switzer";
	leading-trim: both;
	text-edge: cap;
}

button[type="submit"] {
	position: absolute;
	right: 0;
	bottom: 13.5px;
	cursor: pointer;
}

#shadow { display: none; }


@media (max-width: 768px) {
	
html, body { overflow: hidden; }

#logo { display: none; }

#newsletter {
	width: calc(100% - 40px);
}

h2 { font-size: 24px; }

#symbol { top: calc(50% - 40px); }

#symbol svg {
	fill: #fff !important;
	height: 144px;
	width: auto;
}

#symbol path { fill: #fff !important; }

.images { position: fixed; width: 100%; height: calc(100dvh - 186px); z-index: -1; overflow: hidden; left: 0; top: 0; mix-blend-mode: multiply; }

.images img {
	position: absolute;
	width: auto !important;
	min-width: 100%;
	height: auto !important;
	min-width: 100vh;
	object-fit: cover;
	left: 50% !important;
	top: 50% !important;
	right: inherit !important;
	bottom:  inherit !important;
	transform: translate(-50%, -50%) !important;
	display: block;
}

#shadow {
	display: block;
	position: fixed;
	width: 100%;
	height: 126px;
	bottom: 186px;
	left: 0px;
	background: linear-gradient(180deg, rgba(249, 209, 170, 0) 0%, #F9D1AA 100%);
	z-index: 5;
}

}