body, html {
	font-size: 1em;
	font-family: Chivo, sans-serif;
	color: #353535;
	text-decoration: none;
	scroll-behavior: smooth;
	overflow-x: hidden;
}
@font-face {
    font-family: "Basteleur-Bold";
    src: url(../fonts/Basteleur-Bold.woff) format('woff');
}

a:link {
  text-decoration: none;
  color: inherit;
}
a:visited {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: none;
  color: inherit;
}
a:active {
  text-decoration: none;
  color: inherit;
}

*::selection { background-color: #7c00ff; color: #0000ff; }
*::-moz-selection { background-color: #7c00ff; color: #0000ff; }

.hide {
	display: none;
}

.menu {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 2000;
	background-color: #7c00ff;
	opacity: 95%;
	padding-top: 6em;
	overflow-y: auto;
}
.menu:hover { cursor: pointer; }
.menu-p {
	color: #FFFFFF;
	text-align: center;
	font-size: 8vw;
	line-height: 1.7;
	font-family: Basteleur-Bold, Chivo, sans-serif;
	letter-spacing: -0.02;
}
.menu-p a:hover { color: #0000FF; }
.icone {
	position: fixed;
	top: 3vh;
	left: 85vw;
	mix-blend-mode: multiply;
	z-index: 2000;
	animation: fly2 30s ease infinite;
}
.icone:hover { cursor: pointer; }

@keyframes fly2 {
	0% { transform: translate(0,0);  }
	20% { transform: translate(0.5em,0.5em); }
	55% { transform: translate(1em,-0.8em); }
	70% { transform: translate(0.5em,-0.8em); }
	100% { transform: translate(0,0); }
}

.spiral {
	width: 10vw;
	animation: rot 20s infinite;
}

@keyframes rot {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(359deg); }
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.pgif {
	width: 94vw;
	position: relative;
	left: 3vw;
	margin: 30vh 0 15vh 0;
	pointer-events: none;
}

.boat {
	width: 85vw;
	position: fixed;
	left: -15vw;
	mix-blend-mode: multiply;
	z-index: 3000;
	pointer-events: none;
	animation: fly 20s ease infinite;
}

@keyframes fly {
	0% { transform: translate(-8em,0); }
	30% { transform: translate(6em,0); }
	55% { transform: translate(-2em,10em); }
	72% { transform: translate(-8em,-2em); }
	100% { transform: translate(-8em,0); }
}

.bike {
	position: fixed;
	right: 10vw;
	bottom: 5vw;
	width: 60vw;
	pointer-events: none;
	z-index: 3000;
	mix-blend-mode: multiply;
	animation: bk 30s ease infinite;
}

@keyframes bk {
	0% { opacity: 0%; transform: translate(35em,0); }
	91% { opacity: 0%; transform: translate(35em,0); }
	91.01% { opacity: 100%; transform: translate(35em,0); }
	98% { opacity: 100%; transform: translate(0,0); }
	99% { opacity: 0%; transform: translate(0,0); }
	100% { opacity: 0%;  transform: translate(0,0); }
}

.botao {
	font-family: Basteleur-Bold, Chivo, sans-serif;
	font-size: 2em;
	margin: 1em 0 1em 0;
	color: #7c00ff;
	text-align: center;
	position: relative;
	width: 70vw;
	left: 15vw;
	padding: 0.5em;
	background-color: #ffffff;
	cursor: pointer;
	border-radius: 10em;
	transition-duration: 0.1s;
	letter-spacing: -0.02;
}
.botao:hover {
	background-color: #0000ff;
}

.titulo-white {
	font-family: Basteleur-Bold, Chivo, sans-serif;
	font-size: 3em;
	margin: 1em 0 1em 0;
	color: #FFFFFF;
	text-align: center;
	position: relative;
	letter-spacing: -0.02;
}

.wrapper {
	margin: 20vw 5vw 0 5vw;
	position: relative;
	z-index: 1000;
	max-width: 1100px;
}

.wrap1 {
	padding: 0 0 10em 0;
}

.texto {
	font-family: Chivo, sans-serif;
	padding-top: 1em;
	font-size: 1em;
	line-height: 1.5;
	width: 90%;
}

.texto-white {
	font-family: Chivo, sans-serif;
	font-size: 1em;
	line-height: 1.5;
	color: #FFFFFF;
	text-align: center;
	margin-top: -2.5em;
	margin-bottom: 1em;
}

.italico {
	font-style: italic;
}

.norm {
	font-weight: 300;
}

.purple {
	color: #7c00ff;
}

.white {
	color: #FFFFFF;
	font-family: Chivo, sans-serif;
	font-size: 1.3em;
	line-height: 1.5;
	text-align: center;
	padding-bottom: 2em;
	font-weight: 700;
}

.white2 {
	color: #FFFFFF;
	font-family: Chivo, sans-serif;
	font-weight: 300;
	font-size: 1em;
	line-height: 1.5;
	text-align: center;
	padding-bottom: 3em;
}

.welcome {
	font-family: Chivo, sans-serif;
	font-weight: 300;
	font-size: 1.5em;
	color: #7c00ff;
	line-height: 1.3;
	width: 90%;
}

.titulo {
	font-family: Basteleur-Bold, Chivo, sans-serif;
	font-size: 1.7em;
	color: #7c00ff;
	line-height: 1.3;
	letter-spacing: -0.02;
}

.photo {
	margin-bottom: -20vw;
	width: 50vw;
	left: 5vw;
	pointer-events: none;
	mix-blend-mode: multiply;
	position: relative;
}

.photoi { animation: photo1 30s ease infinite; } 
.photoh { animation: photo2 27s ease infinite; }
.photos { animation: photo3 33s ease infinite; }

@keyframes photo1 {
	0% { transform: translate(0,0); }
	25% { transform: translate(-3.4em,0); }
	50% { transform: translate(0em,3em); }
	75% { transform: translate(-5em,-2.5em); }
	100% { transform: translate(0,0); }
}

@keyframes photo2 {
	0% { transform: translate(0,0); }
	24% { transform: translate(2em,2em); }
	55% { transform: translate(0,-6em); }
	77% { transform: translate(-1.5em,2em); }
	100% { transform: translate(0,0); }
}

@keyframes photo3 {
	0% { transform: translate(0,0); }
	20% { transform: translate(5em,-2.5em); }
	46% { transform: translate(0em,-1em); }
	80% { transform: translate(-3em,5em); }
	100% { transform: translate(0,0); }
}

.name {
	font-weight: 700;
	color: #7c00ff;
}

.roxo {
	background-color: #7c00ff;
	padding: 3em 0;
}




@media (min-width: 600px) {

	.menu-p {
		font-size: 2em;
	}

}

@media (min-width: 1000px) {

	.menu-p {
		font-size: 4vw;
		line-height: 1.3;
	}
	.icone {
		top: 5vh;
		left: 92vw;
	}
	.spiral {
		width: 5vw;
	}
	.wrapper {
		margin: 10vw 10vw 0 10vw;
	}
	.boat {
		width: 60vw;
		left: -10vw;
	}
	.bike {
		width: 30vw;
	}
	.pgif {
		width: 70vw;
		left: 15vw;
		margin: 15vw 0 5em 0;
	}
	.welcome {
		font-size: 2.5em;
		width: 60%;
		margin: 0 0 0 35vw;
	}
	.white {
		font-size: 2em;
	}
	.photo {
		margin-left: 20vw;
		width: 25vw;
	}
	.texto {
		font-size: 1.3em;
		line-height: 1.5;
		width: 60%;
		margin: 0 0 0 35vw;
	}
	.texto-white {
		font-size: 1.3em;
		margin-top: -3em;
	}
	.botao {
		font-size: 4em;
		width: 50vw;
		left: 25vw;
	}
	.titulo {
		font-size: 2em;
	}
	.titulo-white {
		font-size: 5em;
	}
}