@charset "utf-8";
/* estilos bem bacanos de miguelrcardoso.com */

/* JANELA */
html {
	font-size: 12px;
	scroll-behavior: smooth;
}

#mobile {
	display: block;
}

/* TIPOGRAFIA */
.bodycopy {
	font-family: cliffordeighteenroman, serif;
	font-style: normal;
	font-size: 1.5rem;
	line-height: 1.8rem;
}

.bodycopy i {
	font-family: cliffordeighteenitalic, serif;
	font-style: italic;
}

.descricao {
	text-align: center;
	letter-spacing: 20px;
}

.link-fade {
	opacity: 1;
	transition: 0.5s;
	color: #f9de35;
	text-decoration: none;
}
.link-fade:link {
	opacity: 1;
	color: #f9de35;
	text-decoration: none;
}
.link-fade:visited {
	opacity: 1;
	color: #f9de35;
	text-decoration: none;
}
.link-fade:hover {
	opacity: 0.5;
	color: #f9de35;
	text-decoration: none;
}
.link-fade:active {
	opacity: 0.5;
	color: #f9de35;
	text-decoration: none;
}

.botao-tema {
	opacity: 1;
	cursor: pointer;
	transition: 0.5s;
}

.botao-tema:hover {
	opacity: 0.5;
}

.primeira {
  float: left;
  font-family: behrensantiquainitialen, serif;
  font-size: 6rem;
  line-height: 6.4rem;
  margin-top: 0.4rem;
  margin-right: 1rem;
  margin-left: 0;
}

.primeiroparagrafo {
	margin-top: 0rem;
}

.simbolo {
	height: 1.5rem;
}

#menu .menu {
	font-size: 1.5rem;
	line-height: 1.8rem;
	margin-bottom: 1.5rem;
}

#menu .subtitulos {
	font-family: cliffordeighteenitalic, serif;
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.8rem;
}

#menu .itens {
	font-family: cliffordeighteencaps, sans-serif;
	font-style: small-caps;
	text-transform: lowercase;
	font-size: 1.5rem;
	line-height: 1.8rem;
}

.titulo {
	font-family: cliffordeighteencaps, sans-serif;
	font-style: small-caps;
	text-transform: lowercase;
	font-size: 1.5rem;
	line-height: 1.8rem;
	animation: none;
	pointer-events: auto;
}

.titulo-mobile {
	font-family: cliffordeighteenroman, sans-serif;
	font-style: normal;
	text-transform: none;
	font-size: 3rem;
	line-height: 3rem;
	text-align: center;
}

.centrado {
	text-align: center;
}

.smallcaps {
	font-family: cliffordeighteencaps, sans-serif;
	font-style: small-caps;
	text-transform: lowercase;
}

.legenda {
	font-family: draftingmonolight, sans-serif;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.4rem;
}

.legenda i {
	font-family: draftingmonolightitalic, sans-serif;
	font-style: italic;
}

#legenda-intro {
	z-index: 8;
	position: absolute;
	color: #f9de35;
	display: none;
	transition: 1s;
	opacity: 0;
	animation: surgir 2s ease-out forwards;
	animation-delay: 1s;
}

.preto {
	color: #000;
}

/* LAYOUT */
#intro-video {
	position: absolute;
	left: 0;
	z-index: 7;
	height: 100vh;
	width: 100%;
	object-fit: cover;
	background-color: #000;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

.logos {
	position: relative;
	width: 50%;
	left: 25%;
	margin-bottom: 2rem;
}

.logo {
	width: 2.2rem;
}

#duas-imagens {
	position: relative;
	width: 100%;
}

#duas-imagens img.topo {
	width: 100%;
	position: absolute;
	left: 0;
    right: 0;
	cursor: pointer;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

#duas-imagens img.topo:hover {
	opacity: 0;
}

.imagem {
	width: 100%;
}

#separador, #separador2 {
	position: relative;
	left: 25%;
	width: 50%;
	margin-bottom: 1rem;
}

.zoomi {
	z-index: 0;
	position: relative;
	width: 100%;
	height: auto;
	margin-bottom: 1rem;
	transition: all 0.5s ease;
	cursor: zoom-in;
}

.expandida {
	z-index: 5;
	position: fixed;
	width: auto;
	height: calc(100vh - 4rem);
	margin-bottom: 0.5rem;
	top: 50%;
	left: auto;
	transform: translateY(-50%);
	transition: all 0.5s ease;
	cursor: zoom-out;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0);
  z-index: 4;
  pointer-events: none;
}

.margem-v {
	height: 0.5rem;
}

.intervalo-imagem2 {
	height: 0;
}

.imagem-v {
	height: 100%;
}

.embed-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
}

#cabecalho {
	position: fixed;
	z-index: 6;
	width: calc(100% - 10rem);
	left: 5rem;
	top: 1rem;
	padding: 0;
}

#jpp-simbolo {
	position: fixed;
	z-index: 6;
	top: 1rem;
	height: 7rem;
	display: block;
	left: 50%;
	transform: translateX(-50%);
}

#jpp-simbolo-intro {
	position: absolute;
	z-index: 8;
	top: 1rem;
	height: 7rem;
	display: block;
	left: 50%;
	transform: translateX(-50%);
}

#jpp-id {
	position: absolute;
	z-index: 3;
	height: 7rem;
	right: auto;
	left: 50%;
	transform: translateX(-50%);
	top: 7rem;
}

#jpp-id-index {
	position: absolute;
	z-index: 3;
	height: 7rem;
	right: auto;
	left: 50%;
	transform: translateX(-50%);
	top: calc(100vh + 7rem);
}

#jpp-id-intro {
	position: absolute;
	z-index: 8;
	height: 7rem;
	right: auto;
	left: 50%;
	transform: translateX(-50%);
	top: 7rem;
	transition: 1s;
}

#jpp-simbolo, #jpp-id, #jpp-id-index {
	opacity: 1;
	transition: 0.5s;
}

#jpp-simbolo:hover, #jpp-id:hover, #jpp-id-index:hover {
	opacity: 0.5;
}

#menu-botao {
	position: fixed;
	z-index: 6;
	top: 1rem;
	height: 2rem;
	right: 2rem;
	display: block;
	padding: 0;
	cursor: pointer;
}

#mudar-tema {
	position: fixed;
	z-index: 6;
	top: 1rem;
	left: 2rem;
	height: 3rem;
}

#mudar-tema-intro {
	position: absolute;
	z-index: 8;
	top: 1rem;
	left: 2rem;
	height: 3rem;
	display: none;
}

#degrade {
	z-index: 2;
	position: fixed;
	top: 0;
	left: 0;
	height: 30vh;
	width: auto;
	pointer-events: none;
	user-select: none;
}

#contentor {
	position: absolute;
	z-index: 0;
	width: calc(100% - 4rem);
	top: 13rem;
	right: 2rem;
	padding: 0;
	animation: surgir 2s ease-out forwards;
}

#player {
	position: absolute;
	z-index: 8;
	bottom: 3rem;
	left: 0;
	width: 100%;
	text-align: center;
	transition: 1s;
}

#menu {
	position: fixed;
	z-index: 3;
	top: 0;
	padding-top: 9.5rem;
	padding-bottom: 2rem;
	left: 0;
	width: 100%;
	height: 100vh;
	text-align: center;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1s ease-out;
}

#menu::-webkit-scrollbar {
  display: none;
}

#barra {
	position: fixed;
	z-index: 3;
	top: 0;
	width: 1px;
	height: 100%;
	background-color: #000;
	left: calc(33.3% + 2rem);
}

#galeria {
	position: relative;
	z-index: 1;
	top: 100vh;
	padding: 0;
}
	
#galeria {
	position: relative;
	z-index: 1;
	top: 100vh;
	padding: 0;
}

.inicio {
	height: 100vh;
}

.intervalo5 {
	height: 1rem;
}

.intervalo3 {
	height: 1rem;
}

.intervalo2 {
	height: 1rem;
}

.intervalo-imagem {
	height: 0rem;
}

.fim {
	height: 1rem;
}

/* ANIMAÇÕES */
@keyframes titulo {
      0% {
        position: static;
		font-family: cliffordeighteencaps, sans-serif;
		font-style: small-caps;
		text-transform: lowercase;
		font-size: 1.5rem;
		line-height: 1.8rem;
      }
      100% {
		position: static;
        font-family: cliffordeighteenroman, sans-serif;
		font-style: normal;
		text-transform: none;
		font-size: 3.5rem;
		line-height: 3.5rem;
      }
}

@-webkit-keyframes surgir { 
    0% { opacity: 0 }
    100% { opacity: 1 }
}

@-moz-keyframes surgir { 
    0% { opacity: 0 }
    100% { opacity: 1 }
}

@-o-keyframes surgir { 
    0% { opacity: 0 }
    100% { opacity: 1 }
}

@-ms-keyframes surgir { 
    0% { opacity: 0 }
    100% { opacity: 1 }
}

@keyframes surgir { 
    0% { opacity: 0 }
    100% { opacity: 1 }
}

@media screen and (max-width: 767px) {
	#desktop {
		display: none;
	}
}

@media screen and (min-width: 768px) {
	html {
	  font-size: 10px;
	}
	#mobile {
		display: none;
	}
	#desktop {
		display: block;
	}
	#jpp-simbolo {
		position: fixed;
		z-index: 6;
		top: 1rem;
		height: 7rem;
		display: block;
		left: 50%;
		transform: translateX(-50%);
	}
	#jpp-simbolo-intro {
		position: absolute;
		top: 1rem;
		height: 7rem;
		display: block;
		left: 50%;
		transform: translateX(-50%);
	}
	#jpp-id, #jpp-id-index {
		position: fixed;
		right: 5rem;
		left: auto;
		top: 1rem;
		transform: none;
	}
	#jpp-id-intro {
		position: absolute;
		right: 5rem;
		left: auto;
		top: 1rem;
		transform: none;
	}
	#menu {
		position: fixed;
		padding-top: 5.75rem;
		padding-bottom: 5.75rem;
		left: 3.5rem;
		width: calc(33.3% - 2rem);
		height: 100vh;
		text-align: center;
		overflow-y: scroll;
		scrollbar-width: none;
		-ms-overflow-style: none;
		pointer-events: auto;
		background: rgba(0, 0, 0, 0);
		opacity: 1;
	}
	#contentor {
		width: calc(56% - 4rem);
		top: 10rem;
		right: 5rem;
	}
	#degrade {
		width: 100%;
		height: auto;
	}
	.intervalo5 {
		height: 5rem;
	}
	.intervalo3 {
		height: 3rem;
	}
	.intervalo2 {
		height: 2rem;
	}
	.zoomi {
		margin-bottom: 0;
	}
	.expandida {
		z-index: 5;
		position: fixed;
		width: auto;
		height: calc(100vh - 4rem);
		margin-bottom: 0.5rem;
		top: 2rem;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.5s ease;
		cursor: zoom-out;
	}
	.primeiroparagrafo {
		margin-top: 3rem;
	}
	.intervalo-imagem {
		height: 3rem;
	}
	#player {
		transform: none;
	}
	.fim {
		height: 2.5rem;
	}
	.titulo {
		font-family: cliffordeighteenroman, sans-serif;
		font-style: normal;
		text-transform: none;
		font-size: 3.5rem;
		line-height: 3.5rem;
		animation: titulo 2s linear forwards;
		pointer-events: none;
	}
	#menu-botao {
		display: none;
	}
	.descricao {
		text-align: left;
		letter-spacing: 10px;
	}
	#mudar-tema {
		top: 2.25rem;
		left: 5rem;
		height: 3.5rem;
	}
	#mudar-tema-intro {
		top: 2.25rem;
		left: 5rem;
		height: 3.5rem;
	}
	.titulo-mobile {
		display: none;
	}
	#legenda-intro {
		width: 20.59rem;
		left: 5rem;
		top: 2rem;
		transform: rotate(0deg);
		display: block;
	}
	.intervalo-imagem2 {
		height: 1rem;
	}
}

@media screen and (min-width: 992px) {
	html {
	  font-size: 12px;
	}
	.margem-v {
		height: 1rem;
	}
}

@media screen and (min-width: 1200px) {
	html {
	  font-size: 12px;
	}
}

@media screen and (min-width: 1600px) {
	html {
	  font-size: 14px;
	}
}