html {/* overflow: hidden; */}

body {
	background: white;
	/* height: 100vh; */
	margin: 0px;
	font-family: 'Fredoka One', cursive;
}

h1 {
	font-size: 80px;
}

h2 {
	font-size: 17px;
	letter-spacing: 2px;
	font-family: 'Fredoka One', cursive !important;
}

a {
	text-decoration: none;
	font-family: 'Darker Grotesque', cursive;
}

p {
	font-size: 24px;
	font-family: 'Darker Grotesque', sans-serif;
}

#form {
	/* transform: scale(0.7); */
	transition: 1s;
	padding: 10vw;
	padding-top: 130px;
	outline: 0px;
	/* border: 4px solid black; */
	/* height: calc(80vh - 80px); */
	width: 100vw;
	height: 50%;
	display: flex;
	position: relative;
	/* z-index: 0; */
	top: 0;
	flex-direction: column;
	justify-content: start;
}

#form > div {
	width: 100%;
	height: 50%;
}

#header {
	background: white;
	padding: 10px;
	padding-left: 10vw;
	/* margin-left: 10vw; */
	/* margin-right: 10vw; */
	height: auto;
	padding-right: 10vw;
	/* border-bottom: 3px solid; */
	/* border-color: red; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	/* width: auto; */
	width: 100%;
	z-index: 3;
	box-sizing: border-box;
	box-shadow: -1px -20px 50px 0px black;
}

#header > a, #header > div > a > h2 {
	color: red;
	display: inline-flex;
}

#header > div > a {
	margin-left: 50px;
	display: inline-block;
}

#header > a > hr, #header > div > a > hr {width: 0%;height: 0px;/* overflow: hidden; */margin: 0px;border: 0px solid rgb(255 0 0 / 1);background: none;outline: none;/* margin-top: -1px; */}

#header > a:hover hr, #header > div > a:hover hr {
	width: 99%;
	border: 1px solid rgb(255 0 0 / 1);
	margin-top: -2px;
}

#header > a:first-child {
	margin-right: 70px;
	margin-left: -16px;
}

#header > a > img:first-child {
	height: 70px;
	z-index: 2;
}

.map {
	height: auto !important;
	padding: 0px !important;
}

.map > div {
	padding-bottom: 40px;
	float: right;
	display: inline;
	width: 50%;
	letter-spacing: 1px;
}


.map > div > h1 {
	color: 	red;
	padding-left: 50px;
	padding-right: 10vw;
	font-size: 50px;
	margin-top: 0px;
}

.map > div > p {
	padding-left: 50px;
	font-size: 18px;
}

.splash {
		font-size: 40px;
		color: rgb(0 0 255);
}

.splash > div {
	position: absolute;
	margin-top: 100px;
	width: 79vw;
	mix-blend-mode: darken;
}

.splash > div:first-child {
	
}

.splash	> div:last-child {
	color: red;
	/* margin-top: -488px; */
}

.splash > div > h1 {
	margin: 0px;
}

.splash > div > h1:last-child {
	margin-top: 100px;
	text-align: right;
}


#overlay {
	position: absolute;
	background: red;
	height: 0px;
	width: 100%;
	mix-blend-mode: darken;
	box-sizing: border-box;
	pointer-events: none;
	z-index: 2;
}


input {
	display: block;
	width: calc(100% - 100px);
	height: 50px;
	/* margin-bottom: 100px; */
	/* padding: 10%; */
}



textarea, input {
	background: #f1f1f1;
	border-radius: 20px;
	margin-bottom: 20px;
	padding: 20px;
	padding-bottom: 0px;
	padding-top: 0px;
	width: calc(100% - 40px);
	border: none;
	font-size: 30px;
	font-family: 'Darker Grotesque';
}

textarea {
	/* width: calc(100% - 100px); */
	/* margin-top: 20vh; */
	height: 150px;
	/* min-height: 20vh; */
	display: block;
	/* margin-bottom: 20vw; */
	/* margin-bottom: 30vw; */
	padding-top: 10px;
	border: none;
}

.sent {
	top: -100vh !important;
}

.button {
	color: white;
	background: red;
	width: inherit;
	/* height: 50px; */
	font-size: 30px;
	font-weight: 800;
	padding: 17px;
	border: none;
	border-radius: 30px;
	cursor: pointer;
}

.download {
	border-radius: 20px;
	font-size: 20px;
	cursor: pointer;
	margin-right: 20px;
	margin-bottom: 10px;
	padding-top: 10px;
}

.download > img {
	margin-bottom: -7px;
	margin-left: 10px;
}

:focus {
	outline: none;
}

.sep {
	height: 100vh;
	background: white;
	padding: 10vw;
	width: 100%;
	box-sizing: border-box;
}

.splash {
	box-shadow: inset 0px -20px 50px -40px black;
}

.dark {
	/* background: blue; */
	color: white;
	letter-spacing: 3px;
	padding-right: 0px;
	padding-left: 40vw;
	z-index: 1;
	position: relative;
	height: auto;
}

.dark > div {
	background: blue;
	padding: 10vw;
	padding-top: 7vw;
	padding-bottom: 6vw;
	text-align: right;
	border-radius: 20px 0px 0px 20px;
	box-shadow: black 0px 10px 20px -10px;
}

.dark > div > h1 {
	/* font-size: 80px; */
	margin: 0px;
}

div:nth-of-type(2) {
	/* height: calc(100vh - 123px); */
}

.ouvir {
	height: auto;
}

.ouvir > h1 {
	color: blue;
	word-break: normal;
	margin: 0px;
	/* margin-top: 10px; */
	/* margin-bottom: 40px; */
}

.ouvir > h1 > none {
	color: red;
}

.ouvir > div {
	position: absolute;
	mix-blend-mode: darken;
	background: red;
	width: 0px;
	max-width: 100%;
	margin-left: -10vw;
	height: 240px;
}

.ouvir > p {
	width: 60%;
}

#map {
	width: 50%; height: 600px; float: left
}

#thanks {
	top: 100vh;
	padding: 10vw;
	padding-top: 130px;
	transition: 1s;
	opacity: 0;
	height: 0vh;
	overflow: hidden;
}

.thanks_sent {
	position: absolute;
    top: 0vh !important;
    opacity: 1 !important;
    height: 100vh !important;
}

@media screen and (max-width: 768px) {
  #header {
    height: auto;
  }

  #header > a > img {
	
		
		height: 40px !important;
	}

	#header > a, #header > div > a > h2 {
		font-size: 10px;
		margin-right: 0px !important;
	}

	#header > div > a {
		margin-left: 30px;
	}

	h1 {
		font-size: 40px;
	}

	.dark {
		padding-left: 20vw;
	}

	.dark > div > p {
		margin-left: 10% !important;
	}

	p {
		font-size: 15px;
	}

	.map > div {
		width: 100%;
	}

	#map {
		width: 100%;
	}
}


.marker {
  background-image: url('../img/point.svg');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}