* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Open Sans', sans-serif;
	background-color: white;
}

html {
	font-size: 0.625em;
	/* Utilizar agora REM para todos os font-size. Tornará os textos das páginas adaptativo ao tamanho de letra que o usuário configurar no navegador. Para transformar 15px em rem, basta mover a virgula para esquerda: 1,5rem.*/
	scroll-behavior: smooth;
}

#body-container {
	position: relative;
	border: 20px solid white;
	height: 100vh;
}

#slider {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	overflow: hidden;
}

.img-slider {
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

#logo {
	width: 90px;
	padding: 20px 25px;
	background-color: white;
	position: absolute;
	top: 2%;
	left: 2%;
	cursor: pointer;
	z-index: 199;
	transition-delay: 0;
}

#menu-container {
	display: flex;
	padding: 5px;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 36px;
	background-color: white;
	position: absolute;
	top: 2%;
	right: 2%;
	cursor: pointer;
	z-index: 199;
	user-select: none;
	border: 1px solid lightgrey;
}

#menu-text {
	width: 20px;
	height: 15px;
	margin-right: 25px;
	font-size: 1.2rem;
	font-weight: bold;
	color: grey;
	letter-spacing: 3px;
}

#btn {
	width: 20px;
	height: 15px;
	position: relative;
	background-color: white;
	margin-left: 10px;
}

#btn span {
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: grey;
	transition: .5s;
}

#btn-1 {
	top: 0;
}

#btn-2 {
	top: 50.5%;
}

#btn-3 {
	top: 100%;
}

.clicked #btn-1 {
	top: 50%;
	transform: rotate(-45deg)
}

.clicked #btn-2 {
	opacity: 0;
}

.clicked #btn-3 {
	top: 50%;
	transform: rotate(45deg)
}

#btn-prev {
	position: absolute;
	top: 50%;
	left: 2%;
	font-size: 6rem;
	color: white;
	cursor: pointer;
}

#btn-next {
	position: absolute;
	top: 50%;
	right: 2%;
	font-size: 6rem;
	color: white;
	cursor: pointer;
}

#btn-pause,
#btn-play {
	position: absolute;
	font-size: 6rem;
	color: white;
	bottom: 2%;
	left: 2%;
	z-index: 98;
	cursor: pointer;	
}

.disable-btn {
	display: none;
}

#menu {
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	z-index: 99;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;	
	background-color: rgba(255, 255, 255, .0);
	transition: .5s;
	visibility: hidden;
}

#menu li {
	list-style-type: none;
}

#menu a {
	text-decoration: none;
	color: rgba(0, 0, 0, .0);
	display: block;
	padding: 10px;
	font-size: 2rem;
	visibility: hidden;
	transition: .5s;
}

.clicked #menu {
	visibility: visible;
	background-color: rgba(255, 255, 255, .8);
}

.clicked #menu a {
	visibility: visible;
	color: rgba(0, 0, 0, .8);
}

.clicked #logo {
	transition-delay: 0.6s;
	background-color: transparent;
}