/* ----------------------------------------- */
/* -------- -------- PAGES  ---------------- */
/* ----------------------------------------- */


@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');


img {
	user-drag: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
}


article {
	padding: 0px !important;
	border-radius: 15px !important;
	height: 90vh;
	overflow: hidden;
}


.topPanel {
	position: fixed !important;
	z-index: 8;
	top: 0px;
	left: 0;
	width: 100% !important;
	height: auto !important;
	background: #37A6F0;
	background: linear-gradient(90deg, #7fdbf1 0%, rgb(52 157 227) 50%, rgb(11 99 155) 100%);

	filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 25px rgba(0, 0, 0, 0.8));
}


.close {
	z-index: 99 !important;
}


.titlesModal {
	width: 100% !important;
	padding: 30px 0 10px 30px;
	border-bottom: none !important;
	font-family: "Archivo Black", sans-serif;
	font-weight: 400;
	font-size: 36px;
	letter-spacing: 2px;
	color: #0c649d;
	text-align: left !important;
	opacity: 0.8;
}


.contentModal {
	position: absolute;
	overflow-y: auto;
	overflow-x: hidden;
	bottom: 0px !important;
	width: 100%;
	height: 80vh;
	padding: 60px 25px 25px 25px;
	/* Firefox standard support: Removed to prevent interfering with custom WebKit width in Chrome/Edge */
	/* scrollbar-width: auto; */
	/* scrollbar-color: #888 #f1f1f1; */
}

/* Chrome, Edge, Safari */
.contentModal::-webkit-scrollbar {
	width: 30px !important;
}

.contentModal::-webkit-scrollbar-track {
	background: #FFF;
	border-radius: 60px !important;
	border-top-left-radius: 0px !important;
	border-top-right-radius: 0px !important;
}

.contentModal::-webkit-scrollbar-thumb {
	background-color: #37a6f0;
	border-radius: 30px;
	border: 4px solid #FFF;
}

.contentModal::-webkit-scrollbar-thumb:hover {
	background-color: #0687dd;
}


.titles_H3 {
	width: fit-content;
	margin: 0 auto 36px;
	padding: 10px 20px;
	font-size: 18px !important;
	text-align: center;
	color: #FFF;
	background-color: rgba(55, 166, 240, 0.2);
	border-radius: 100px;
}


#Carreira_downloadCV {
	width: fit-content;
	height: auto;
	margin: 0 auto 20px auto;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 25px;
}


.Carreira_downloadCV_BT {
	border-radius: 15px;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 2px;
	color: #000 !important;
	background-color: #FFF;
}


	.Carreira_downloadCV_BT:hover{
		background-color: #FFF;
		color: #0056F4 !important;
		filter: drop-shadow(0 0 5px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(255, 255, 255, 1));
	}


.icon_open_in_new {
	width: 16px;
}


.imgProfile_span{
	margin: 0px !important;
}


	.imgProfile {
		width: 100%;
		max-width: 220px;
		border-radius: 15px !important;
		float: left;
		margin: 0 20px 0 0;
	}


#perfil p {
	margin: 0px;
	font-size: 18px;
}


.modal_Perfil_divider {
	width: 100%;
	margin: 36px auto;
}


.modal_Perfil_divider_End {
	width: 100%;
	margin: 25px auto 0 auto;
}


.modal_Perfil_Experiencias li {
	list-style: none;
}


.modal_Perfil_Experiencias li p {
	margin: 25px 0 !important;
	line-height: 25px;
	font-size: 18px;
}


.modal_Perfil_Experiencias li span {
	font-size: 16px;
	margin-left: 20px;
}


.modal_Perfil_Experiencias_Skills_p span {
	font-size: 18px !important;
	line-height: 30px;
}


.modal_Perfil_Experiencias li p strong {
	display: block;
}


.perfil_PhotoStudio{
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
}


	.perfil_PhotoStudio_Description{
		position: relative;
		width: fit-content;
		height: auto;
		margin: 0 auto -27px auto;
		padding: 10px 20px;
		border-radius: 100px;
		background: rgba(21, 108, 173, 0.8);
		z-index: 3;
	}


	.perfil_PhotoStudio_IMG {
		position: relative;
		width: 100%;
		border-radius: 15px;
		z-index: 2;
	}


.portfolioModal .contentModal{
	padding: 100px 25px 25px 25px !important;
}


.portfolio_Tools_User_Actions {
	position: fixed;
	top: 80px;
	right: 50px;
	width: 45px;
	min-height: 50px;
	background: #FFF;
}


.Portfolio_Box_Job {
	width: 100%;
	height: fit-content;
	padding: 0;
	background: #FFF;
	border-radius: 20px;
	overflow: hidden;
}


.Portfolio_Job_Title {
	font-family: "Archivo Black", sans-serif;
	font-size: 45px;
	font-weight: bold;
	text-transform: uppercase;
	color: #000;
	margin: 0;
	padding-top: 10px;
}


	.Portfolio_Job_Title span {
		display: block;
		margin: -20px 0 15px 0;
		padding: 0px;
		font-size: 22px;
	}


.Portfolio_Job_Description {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto 20px auto;
	font-size: 22px;
	font-weight: bold;
	line-height: 28px;
	color: #333;
	opacity: 0.6;
}


.portfolio_Job_IMG {
	max-width: 100%;
	margin-top: 20px;
}


.modal_Portfolio_divider_Box {
	width: 100%;
	text-align: center;
	padding: 50px 0;
}


.modal_Portfolio_divider {
	width: 100%;
	max-width: 1024px;
	margin: 36px auto;
}


.modal_Portfolio_divider_End {
	width: 100%;
	max-width: 1024px;
	margin: 100px auto 0 auto;
}


.Portfolio_Box_links {
	display: block;
	margin: 36px auto;
}


.Portfolio_link_EloCorretora {
	border-bottom: none;
	opacity: 0.8;
	background: rgb(21 108 173);
	border-radius: 100px;
	margin: 0;
	padding: 10px 20px;
}

.Portfolio_link_EloCorretora:hover {
	opacity: 1.0;
}


.Portfolio_link_Musicarte {
	border-bottom: none;
	opacity: 0.8;
	background: rgb(41 87 164);
	border-radius: 100px;
	margin: 0;
	padding: 10px 20px;
}

.Portfolio_link_Musicarte:hover {
	opacity: 1.0;
}


.work {
	width: 100%;
}


.vimeo-container {
	width: 100%;
	/* Garante a largura total */
	/* Define a proporção: largura / altura */
	/* Mude para 4 / 3, 1 / 1, ou 16 / 9, etc., conforme seu vídeo */
	aspect-ratio: 16 / 9;
	margin-bottom: -10px;
}

.vimeo-container iframe {
	width: 100%;
	height: 100%;
	/* Ocupa todo o contêiner com a proporção definida acima */
}


.Contatos_links {
	border-bottom: none;
	opacity: 0.8;
	background: rgba(27, 31, 34, 0.85);
	border-radius: 100px;
	margin: 0;
	padding: 10px 20px;
}


.Contatos_links:hover {
	opacity: 1.0;
}


#footer {
	width: auto;
	height: auto;
	background-color: #000;
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1)) drop-shadow(0 0 5px rgba(0, 0, 0, 1));
	margin-bottom: 30px;
}


#footer p {
	font-size: 22px;
	margin: 0;
	opacity: 0;
	transition: opacity 10s ease-in-out !important;
}


.p-visivel {
	opacity: 0.8 !important;
}


#header nav.use-middle:after {
	display: none !important;
}


#downloadCV {
	position: fixed;
	z-index: 3;
	bottom: 15px;
	left: 15px;
	width: auto;
	height: auto;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 25px;
	border-bottom-left-radius: 0;
	opacity: 0;
	transition: opacity 8s ease-in-out, filter 8s ease-in-out !important;
}


.downloadCV_BT_Home {
	border-radius: 15px;
	border-bottom-left-radius: 0;
	font-size: 14px;
	font-family: "Archivo Black", sans-serif;
	font-weight: bold;
	letter-spacing: 0;
	color: #000 !important;
	background-color: #FFF;
}


	.downloadCV_BT_Home:hover{
		background-color: #FFF;
		color: #0056F4 !important;
		filter: drop-shadow(0 0 5px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(255, 255, 255, 1));
	}


.downloadCV-visivel {
	opacity: 1 !important;
}








/* ------------------------------------- */
/* -------------- Planeta -------------- */
/* ------------------------------------- */


@keyframes girar {

	/* O movimento vai de 0 graus (início) a 360 graus (volta completa) */
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


#planeta {
	position: fixed;
	width: 100%;
	z-index: 2;
	top: 0px;
}


#planeta_img {
	width: 100%;
	opacity: 0;
	transition: opacity 8s ease-in-out !important;

	/* Animação do Satélite girando */
	animation-name: girar;
	/* Nome dos keyframes que definimos */
	animation-duration: 1000s;
	/* Tempo para uma volta completa (muito suave) */
	animation-timing-function: linear;
	/* Garante velocidade constante (sem aceleração/desaceleração) */
	animation-iteration-count: infinite;
	/* Repetição infinita */
}




.planeta-img-visivel {
	opacity: 1 !important;
}








/* ------------------------------------- */
/* ------------- Astronauta ------------ */
/* ------------------------------------- */


@keyframes flutuar {
	0% {
		transform: translateY(0px);
		/* Posição base */
	}

	50% {
		transform: translateY(-30px);
		/* Move 15px para cima */
	}

	100% {
		transform: translateY(0px);
		/* Volta à posição base */
	}
}


#astronauta_img {
	position: fixed;
	z-index: 5;
	top: 40%;
	right: 25%;
	opacity: 0;
	filter: blur(5px);
	transition: opacity 8s ease-in-out, filter 8s ease-in-out !important;

	/* Animação de gravidade */
	animation-name: flutuar;
	animation-duration: 4s;
	/* Ajuste para mais lento ou rápido */
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}


.astronauta-fast-fade {
	transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out !important;
}


.astronauta-img-visivel {
	opacity: 1 !important;
	filter: blur(0px) !important;
}











/* ------------------------------------- */
/* --------- Nave do Astronauta -------- */
/* ------------------------------------- */


@keyframes nave_astronauta_flutuar {
	0% {
		transform: translateY(0px);
		/* Posição base */
	}

	50% {
		transform: translateY(-30px);
		/* Move 15px para cima */
	}

	100% {
		transform: translateY(0px);
		/* Volta à posição base */
	}
}


#nave_astronauta_img {
	opacity: 0;
	transition: opacity 8s ease-in-out, filter 8s ease-in-out !important;
	position: fixed;
	width: 600px;
	bottom: -70px;
	right: -50px;
	z-index: 4;
	cursor: url('../../images/cursor_incandescent.png') 48 48, pointer !important;

	/* Animação de gravidade */
	animation-name: nave_astronauta_flutuar;
	animation-duration: 12s;
	/* Ajuste para mais lento ou rápido */
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}


	.nave_astronauta-fast-fade {
		transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out !important;
	}


	.nave_astronauta_img-visivel {
		opacity: 1 !important;
	}








/* ------------------------------------- */
/* ------------ Disco Voador ----------- */
/* ------------------------------------- */


#naves_espaciais {
	position: fixed;
	width: 100%;
	height: 220px;
	top: 30px;
	left: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}


.spaceship-img {
	position: absolute;
	top: 30px;
	opacity: 1;
	transition: transform 8s linear;
	will-change: transform;
}


.nave-7 img {
	/* Rotaciona a imagem interna enquanto a div container se move */
	animation: girar 20s linear infinite;
}








/* ------------------------------------- */
/* --------- Slogans Animation --------- */
/* ------------------------------------- */


#slogans {
	margin: 0px !important;
	line-height: 0px !important;
}


.slogans-fade-out {
	opacity: 0 !important;
	transition: opacity 1s ease-in-out;
}








/* ------------------------------------- */
/* -------- User Flow - Actions -------- */
/* ------------------------------------- */


/* Using specific ID selectors combined with the class to override the original 
   "#elementID { transition: ... !important }" rule which has high specificity. 
   ID+Class > ID. */


#nave_astronauta_img.element-fade-out-3s,
#astronauta_img.element-fade-out-3s,
#downloadCV.element-fade-out-3s {
	opacity: 0 !important;
	transition: opacity 3s ease-in-out !important;
}


#nave_astronauta_img.element-fade-in-3s,
#astronauta_img.element-fade-in-3s,
#downloadCV.element-fade-in-3s {
	opacity: 1 !important;
	transition: opacity 3s ease-in-out !important;
}


.element-hidden {
	display: none !important;
}



.element-hidden {
	display: none !important;
}








/* ------------------------------------- */
/* --------      Portfolio      -------- */
/* ------------------------------------- */


.Portfolio_titleModal{
	width: auto;
	height: 100px;
	padding: 0 30px;
	display: flex;
	align-items: center;
	float: left;
}


	.Portfolio_titleModal_H2{
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: none !important;
		font-family: "Archivo Black", sans-serif;
		font-weight: 400;
		font-size: 36px;
		letter-spacing: 2px;
		color: #005289;
		text-align: left !important;
		opacity: 0.8;
	}


.portfolioFilters{
	position: absolute;
	z-index: 10;
	width: 100%;
	top: 75px;
	height: 60px;
	display: flex;
	align-items: center;
}


	.portfolioFilters_Content{
		width: fit-content;
		max-width: 1446px;
		height: 60px;
		margin: 0 auto;
		text-align: left;
		background-color: #FFF;
		border-radius: 100px;
		/*border-top-left-radius: 0;
		border-top-right-radius: 0;*/

		filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 25px rgba(0, 0, 0, 0.8));
	}


	.portfolioFilters_Categories_Col_1{
		width: auto;
		height: 53px;
		padding: 6px 0 0 8px;
		float: left;
	}


	.portfolioFilters_Categories_Col_2{
		width: auto;
		height: 60px;
		margin: 0px;
		padding: 0 16px 0 0;
		font-size: 14px;
		font-weight: bold;
		text-align: right;
		line-height: 64px;
		color: #0b639e;
		float: left;
	}


	.portfolioFilters_Categories_Col_3{
		width: fit-content;
		height: 60px;
		color: #0b639e;
		overflow: hidden;
	}


		.BT_portfolioFilters_Categories{
			width: fit-content !important;
			height: 48px !important;
			margin: 0px;
			padding: 4px 0 0 54px;
			background: url('../../images/icon_filter.png') 16px 10px no-repeat #FFF;
			background-size: 24px;
			border: 3px solid #0056F4;
			border-radius: 100px;
			/*border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;*/
			border-top-color: #FFF;
			border-right-color: #FFF;
			border-bottom-color: #FFF;
			font-size: 16px;
			font-weight: bold;
			line-height: 34px;
			color: #0056F4;
			display: flex;
		}


			/*.BT_portfolioFilters_Categories:hover{
				background: url('../../images/icon_filter2.png') 16px 10px no-repeat #0056F4;
				background-size: 24px;
				border-radius: 25px;
				border-bottom-left-radius: 0px;
				border-bottom-right-radius: 0px;
				color: #FFF;
			}*/


		.portfolioFilters_selectedCategories{
			width: 100%;
			height: 60px;
			display: -webkit-inline-box;
			border-top-right-radius: 100px;
    		border-bottom-right-radius: 100px;
    		overflow: hidden;
		}


			.portfolioFilters_selectedCategories p{
				float: left;
			}


			.nameSelectedCategories{
				width: auto;
				height: 40px;
				margin: 10px 12px 0 0;
				padding: 3px 12px;
				background-size: cover;
				border: 2px solid #000;
				border-radius: 100px;
				color: #FFF;
				font-size: 14px;
				font-weight: bold;
				line-height: 29px;
				text-shadow: 0px 0px 18px #000000 !important;
			}



					#PortfolioCategorie_UXUIProduct 		{ background-image: url('../../images/bg_portfolio_categorias/bg_01.png'); background-size: cover; background-position:center; }
					#PortfolioCategorie_MobileUXUI 		{ background-image: url('../../images/bg_portfolio_categorias/bg_02.png'); background-size: cover; background-position:center; }
					#PortfolioCategorie_IAXDesign 		{ background-image: url('../../images/bg_portfolio_categorias/bg_03.png'); background-size: cover; background-position:center; }
					#PortfolioCategorie_ArtDirection 	{ background-image: url('../../images/bg_portfolio_categorias/bg_04.png'); background-size: cover; background-position:center; }
					#PortfolioCategorie_Design 			{ background-image: url('../../images/bg_portfolio_categorias/bg_05.png'); background-size: cover; background-position:center; }
					#PortfolioCategorie_ArteIA 			{ background-image: url('../../images/bg_portfolio_categorias/bg_06.png'); background-size: cover; background-position:center; }
					#PortfolioCategorie_VideoMotion 		{ background-image: url('../../images/bg_portfolio_categorias/bg_07.png'); background-size: cover; background-position:center; }
					#PortfolioCategorie_Frontend 			{ background-image: url('../../images/bg_portfolio_categorias/bg_09.png'); background-size: cover; background-position:center; }
					#PortfolioCategorie_WebDesign 		{ background-image: url('../../images/bg_portfolio_categorias/bg_10.png'); background-size: cover; background-position:center; }


					#PortfolioCategorie_UXUIProduct:hover,
					#PortfolioCategorie_MobileUXUI:hover,
					#PortfolioCategorie_IAXDesign:hover,
					#PortfolioCategorie_ArtDirection:hover,
					#PortfolioCategorie_Design:hover,
					#PortfolioCategorie_ArteIA:hover,
					#PortfolioCategorie_VideoMotion:hover,
					#PortfolioCategorie_Frontend:hover,
					#PortfolioCategorie_WebDesign:hover		{ background-image: none; }


				.nameSelectedCategories:hover{
					background-color: #0056F4;
					border: 2px solid #0056F4;
					cursor: url('../../images/cursor_add_categorie_portfolio.png') 36 36, pointer;
				}


					.PortfolioCategorie_Selected {
						background-image: none !important;
						height: 50px;
						margin: 10px 12px 0 0;
						background-color: #0056F4;
						border: 2px solid #0056F4;
						border-bottom: 0px;
						border-radius: 20px;
						border-bottom-left-radius: 0px;
						border-bottom-right-radius: 0px;
						line-height: 29px;
						cursor: default !important;
						/*cursor: url('../../images/cursor_remove_categorie_portfolio.png') 24 24, pointer !important;*/
					}








.Portfolio_contentModal {
	position: absolute;
	overflow-y: auto;
	overflow-x: hidden;
	bottom: 0px !important;
	width: 100%;
	height: 80vh;
	padding: 115px 25px 25px 25px;

	/* Firefox standard support: Removed to prevent interfering with custom WebKit width in Chrome/Edge */
	/* scrollbar-width: auto; */
	/* scrollbar-color: #888 #f1f1f1; */
}

/* Chrome, Edge, Safari */
.Portfolio_contentModal::-webkit-scrollbar {
	width: 30px !important;
}

.Portfolio_contentModal::-webkit-scrollbar-track {
	background: #FFF;
	/*border-radius: 60px !important;*/
	border-top-left-radius: 0px !important;
	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
}

.Portfolio_contentModal::-webkit-scrollbar-thumb {
	background-color: #37a6f0;
	border-radius: 30px;
	border: 4px solid #FFF;
}

.Portfolio_contentModal::-webkit-scrollbar-thumb:hover {
	background-color: #0687dd;
}


.Job_VideoMotion_iframe {
	width: 1200px;
	height:675px;
	margin-bottom: 20px;
	border-radius: 10px;
	border-top-left-radius: 30px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}


.PortfolioJob_Unselected{
	display: none;
}








/* ------------------------------------- */
/* --------         Jobs        -------- */
/* ------------------------------------- */