/* https://json2csharp.com/css-tools/scss-to-css */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,800&family=Barlow:wght@800;900&family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Titillium+Web:wght@600&display=swap');

@font-face {
	font-family: 'shiro-icon';
	src: url('../fonts/shiro-icon.eot?56132354');
	src: url('../fonts/shiro-icon.eot?56132354#iefix') format('embedded-opentype'),
		 url('../fonts/shiro-icon.woff2?56132354') format('woff2'),
		 url('../fonts/shiro-icon.woff?56132354') format('woff'),
		 url('../fonts/shiro-icon.ttf?56132354') format('truetype'),
		 url('../fonts/shiro-icon.svg?56132354#shiro-icon') format('svg');
	font-weight: normal;
	font-style: normal;
  }


:root {

	--bg: #f1f1f1;
	--bg-header: #cccccc;
	--color-light: #cccccc;
	--color-grey: #999999;
	--color-dark: #444444;
	--color-darker: #000000;
	--color-theme: #d55133;
	--color-mobileBg: #304b53;
	--off-white: #e0e0e0;
	--breakpoint-sm: 600px;
	--breakpoint-md: 900px;
	--breakpoint-lg: 1200px;
	--breakpoint-xl: 1800px;
	--swiper-theme-color: #444 !important;

	/* font-size: calc(1rem + 0.25vw); */
	/* font-size: clamp(.9em, 1.25vw, 1em); */
}

body {
	font-family: 'Archivo', sans-serif;
	font-size: 1em;
	color: var(--color-dark);
	background-color: var(--bg);
	position: relative;
}

b {
	font-weight: 800;
}

i {
	font-style: italic;
}

body {

	&.mobile.home > header {

		@media (width < 900px) {
			min-height: 60vh; 
		}
	}

	&.mobile .logo-item h5{
		text-align: center;
		font-size: .8em;
	}

	& > header {
		
		position: relative;
		width: 100%;
		background-position: center;
		background-size: cover;

		min-height: 8em;

		&::after{
			content: '';
			display: block;
			position: absolute;
			bottom: -1px;
			left: 0;
			width: 100%;
			height: 15px;
			z-index: 10;
			background-image: url("../assets/stroke.png");
			background-position: center bottom;
			background-repeat: repeat-x;
		}

		&.header-bar::after{
			background-image: url("../assets/stroke-grey.png");
		}

		& #main-menu-wrap{

			position: fixed;
			top: 0;
			z-index: 20;
			width: 100%;
			background: linear-gradient(0deg, rgba(0,0,0,0) .5em, rgba(0,0,0,.6) 100%);
			color: #fff;
			padding: 1.5em 0 1.5em 0;
			
			@media (width < 900px) {
				padding: .5em 0;
			}

			&::before{
				content: '';
				position: absolute;
				inset: 0 0 0 0;
				width: 100%;
				height: 100%;
				background-color: var(--color-mobileBg);
				transition: all .5s ease;
				opacity: 0;
			}

			& .header-social{
				z-index: 20;
				color: #fff;
				display: flex;
				gap: .75em;

				& a::before{
					font-family: 'shiro-icon';
					font-size: 1.25em;
				}
				
				& a.facebook::before{ content: '\E84E'; }
				& a.twitter::before{ content: '\F099'; }
				& a.instagram::before{ content: '\E850'; }
				& a.youtube::before{ content: '\F315'; }

				& span {
					display: none;
				}
			}
		}

		.scrolled & #main-menu-wrap{
			&::before{
				opacity: 1;
			}
		}

		.scrolled:not(.mobile) & #main-menu-wrap{
			padding: 1.5em 0 1.25em 0 !important;
		}

		& #main-menu{

			display: flex;
			gap: 0 1.25em; 
			justify-content: space-between;
			align-items: start;

			& .navigation{

				display: flex;
				flex-direction: column;
				gap: .75em;

				& .nav-breadcrumb{
					display: none;
				}

				& nav{
					display: flex;
					flex-direction: column;
					gap: 0.35em;
					font-size: .95em;
				}

				& nav > ul{
					display: flex;
					flex-wrap: wrap;
					gap: 0.25em 1em;
					margin-left: auto;
					width: max-content;
				}

				& nav > ul > li > a {
					opacity: .9;
					transition: opacity .3s ease;
					&:hover{
						opacity: 1;
					}
				}
				
				& nav > ul.menu-institutional > li > a {
					margin-bottom: .5em;
					font-weight: 800;
				}

				& nav > ul > li > ul > li > a {
					opacity: .75;
					transition: opacity .2s ease;
					&:hover{
						opacity: 1;
					}
				}
 
				& nav > ul {
					position: relative;
					& > li{
						display: inline-block;
					}
				}

				& nav > ul > li > ul {
					display: none;
					position: absolute;

					background-color: #1d2d32;
					padding: .35em .75em;
					margin: 0 0 0 -.75em;
					max-width: 15em;
					z-index: 25;
				}

				& nav > ul > li:hover > ul {
					display: block;
				}

				& nav > ul > li > ul > li {
					display: block;
					padding: .5em 0;
					font-weight: 500;
					letter-spacing: .5px;
					line-height: 1.05;
				}
				
				& nav > ul > li > ul > li a {
					color: #ffffff;
				}
			}

			& .navigation-tools{
				display: flex;
				align-items: center;
				gap: 1.25em;
			}

			@media (width < 900px) {
				
				flex-direction: column;
				box-sizing: border-box;
				
				& .navigation-tools{
					position: fixed;
					top: 1.25em;
					right: 2em;
					flex-direction: row-reverse;
				}
			
				& .navigation{

					z-index: 1;
					width: 100%;
					flex-grow: 1;
					flex-shrink: 1;

					gap: 20px;
					max-height: calc(100vh - 170px);

					& .search-autocomplete{
						width: 100%;
					}

					& .search-autocomplete,
					& .header-social,
					& .nav-menu{
						display: none;
					}

					& nav{
    					width: 100%;
						overflow: auto;
						gap: 1.5em;
						margin-top: 1em;
						font-size: 1.05em;
					}

					& nav > ul{
						width: 100%;
						display: flex;
						flex-direction: column;	
						margin: 0;
						
						font-size: 1.2em;
						line-height: 1.5;
						position: unset;

						& li a.children::after{
							content: "+";
							margin-left: 1em;
							opacity: .5;
						}

						& li.selected a.children::after{
							content: "-";
						}

						& ul{
							position: relative;
						}
					}
				}

				& .header-social{
					position: fixed;
					bottom: .75em;
					gap: 1.1em;
					font-size: 1.5em;
				}

				& .search-autocomplete {
					font-size: 1.25em;
				}
			}
		}

		& h1{
			font-weight: 800;
			font-size: clamp(1.75em, 5vw, 2.1em);
			flex-grow: 1;
			z-index: 1;
			height: 60px;
		}

		& .logo{
			content: '';
			display: block;
			background: url(../assets/projeto-portinari.png);
			background-size:contain;
			background-repeat: no-repeat;
			background-position: center;
			width: 7em;
			height: 2em;

			& span{
				display: none;
			}

			@media (width < 900px) {
				width: 7.25em;
				margin: 0; 
				height: 60px;
			}
		}

		& .lang-menu{

			font-size: .8em;
			display: flex;
			gap: .5em;

			& li.active a{
				font-weight: 700;
			}
		}

		& #menuSearch{

			transition: opacity .3s ease;
			opacity: .85;
			z-index: 2;

			&:hover{
				opacity: 1;
			}

			&::before{
				content: '\E80D';
				border: 2px solid #fff;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 2.25em;
				height: 2.25em;
				line-height: 1;
				font-weight: 400;
				font-family: 'shiro-icon';
				font-size: .75em;
			}
		}
		
		& #menuToggle{
			display: none;
			z-index: 2;
			@media (width < 900px) {
				display: flex;
			}
		}

		& #menuToggle::before{
			content: '\E805';
			font-size: 2em;
			font-weight: 400;
			font-family: 'shiro-icon';
		}

		& .lang-pages{
			z-index: 3;
			@media (width < 900px) {
				& li.active{
					display: none;
				}
			}
		}
	}
		
	.hero{

		width: calc(100vw - 1px);
		height: 70vh;
		position: relative;
		overflow: hidden;

		& video{
			position:absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	
	}

	&.menu-expanded {

		@media (width < 900px) {
				
			& #main-menu{
				padding: 0 0 150px 0;
			}
			
			& h1{
				height: 100px;
			}
	
			& .navigation{
				height: 100%;
			}
	
			& #main-menu nav > ul > li:hover > ul {
				display: none !important;
			}
	
			& #main-menu nav > ul > li.selected > ul {
				position: relative;
				display: flex !important;
				flex-direction: column;
				background: transparent;
				margin: 0 0 .75em 0;
			}

			& #main-menu nav > ul.menu-institutional > li > a {
				margin-bottom: 0 !important;
			}

			& #main-menu::before{
				position: fixed;
				inset: 0 0 0 0;
				content: "";
				background-color: var(--color-mobileBg);
			}
	
			& .search-autocomplete,
			& .header-social,
			& .nav-menu{
				display: flex !important;
			}

			& #menuToggle::before{
				content: '\E820';
				font-weight: 400;
			}
			
			& .autocomplete-component-results.open  {
				gap: .25em;
			}
		}
	}
}

@keyframes animatedHead {
    from {opacity: 0;}
    to {opacity: 1;}
}

body > footer {

	background-color: var(--off-white);
	position: relative;
	margin-top: 2em;
	padding: 3em 0 2.5em 0;

	& .footer-logo{
		content: '';
		display: block;
		background: url(../assets/projeto-portinari2.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left center;
		width: 16em;
		height: 4.5em;
		margin-left: -1em;
	}

	&::after{
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 15px;
		z-index: 10;
		background-image: url("../assets/stroke.png");
		background-position: center bottom;
		background-repeat: repeat-x;
		transform: scaleY(-1);
	}

	& .footer-nav{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: 1em;
	}

	& .contact{
		font-size: .7em;
		letter-spacing: .5px;
		color: Var(--color-darker-gray);
		& a{
			font-weight: 800;
			transition: color .3s ease;
			&:hover{
				color: var(--color-black);
			}
		}
	}

	& nav{

		flex-grow: 1;
		display: flex;
		flex-direction: column;
		margin-top: 1em;
		font-size: .9em;

		& ul{
			font-size: .9em;
			display: flex;
			gap: 0.5em 1em;
			flex-wrap: wrap;
			flex-flow: row wrap;
			white-space: nowrap;
			max-width: 80%;
			margin-bottom: .5em;
		}
		& ul li{
			display: inline-block;
		}
		& ul ul{
			display: none;
		}

		& ul.menu-institutional{
			font-weight: 800;
		}

	}

	& h1{
		font-weight: 800;
		font-size: clamp(1.5rem, 5vw, 3rem);
	}

	& .footer-social{
		display: flex;
		justify-content: end;
		margin-bottom: .75em;
		gap: 1em;

		& a::before{
			font-family: 'shiro-icon';
			font-size: 2em;
		}
		
		& a.facebook::before{ content: '\E84E'; }
		& a.twitter::before{ content: '\F099'; }
		& a.instagram::before{ content: '\E850'; }
		& a.youtube::before{ content: '\F315'; }

		& span {
			display: none;
		}
	}

}

a {
	display: inline-block;
}

button{
	cursor: pointer;
}

[hidden] {
	display: none;
}

.btn{
	display: inline-block;
	padding: .25em 1em;
	border: 1px solid #ffffff;
	background-color: #ffffff;
	border-radius: 1em;
	color: var(--color-darkergrey);
	font-weight: 700;
	transition: all .3s ease;
	& span{
		font-weight: 400;
		font-size: .8em;
		margin-left: .5em;
		opacity: .6;
	}
	&:hover{
		background-color: var(--color-theme);
		border-color: var(--color-theme);
		color: #ffffff;
	}

	&.btn-download{

		font-size: .9em;
		text-transform: lowercase;
		margin: 1.5em 0;

		&::after{
			content: '\E813';
			font-family: 'shiro-icon';
			font-weight: 400;
			margin-left: .5em;
		}
	}

	&.small{
		font-size: .75em;
	}
}

section > header {

	& > div{
		margin-top: 2em;
		margin-bottom: 1em;
		display: flex;
		gap: 1em 3em;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: end;
		width: 100%;
	}

	& h2{
		font-size: 1.6em;
		font-weight: 800;
	}

	& .list-search{
		flex-grow: 1;
		display: flex;
		gap: 1em;
		justify-content: center;

		& .list-search-wrap{

			display: inline-block;
			position: relative;

			& input{
				background-color: #fff;
				border-radius: 2em;
				text-align: left;
				padding: .25em 1em;
				font-size: .9em;
				font-weight: 700;
				line-height: 1.6;
				width: 30vw;
				min-width: 250px;

				&::placeholder{
					color:var(--color-light);
					font-size: .8em;
				}
			}

			& button{
				color: var(--color-light);
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				transition: all .3s ease;
				
				&::before{
					margin: .5em;
					content:'\E80D';
					font-family: 'shiro-icon';

				}
			}

			&:hover button{
				color: var(--color-darker);
			}

		}

		& .list-search-adv{
			color: var(--color-lighter-grey);
			font-style: italic;
			font-size: .9em;
			transition: all .3s ease;
			white-space: nowrap;
		
			&:hover{
				color: var(--color-dark);
			}

			& span::before{
				content: "+";
				margin-right: .25em;
			}
		}
	}

	& .list-tools{
		display: flex;
		justify-content: end;
	}

	& .list-layout{
		display: inline-block;
		border: 1px solid red;
	}

	& .list-order select{
		font-size: .8em;
		font-weight: 800;
		display: inline-block;
		padding: 0 0.5em;
	}
}

.default-list-empty{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 25vh;
	font-weight: 800;
	font-size: 2em;
	color: var(--color-lighter-grey);
}

.default-list-search{

	border: 1px var(--color-light) solid;
	padding: 1em 1.5em;
	margin-bottom: 1em;
	border-radius: .5em;
	display: none;

	&.show{
		display: block;
	}

	& .listSearch-form-fieldset{
		display: flex;
		flex-direction: column;
		/* gap: .5em; */
	}

	& .listSearch-form-item{

		display: grid;
		grid-template-columns: minmax(180px, 1fr) 5fr;
		gap: 0.2em 3em;
		align-items: center;
		margin-bottom: .5em;

		@media (width < 600px) {
			display: block;
		}

		& .listSearch-form-field{

			& > div{
				width: 100%;
				display: flex;
			}

			& .operator{
				font-size: .8em;
			}
		}

		& input[type=text],
		& select{
			width: 100%;
		}
	}

	& button.btn{
		background: var(--color-light);
		padding: .25em 1.5em;
		margin: .5em .25em 0 0;

		&.submit{
			background-color: var(--color-theme);
			color: #ffffff;
		}

		&.reset{
			border-color: var(--color-light);

		}
	}
}


.listSearch-form-label{
    text-transform: uppercase;
    font-size: .7em;
}

.listSearch-form-field > div{
	display: flex;
	align-items: center;
	gap: .75em;
}

.listSearch-form-field select[data-search] {
	all: revert;
}

.listSearch-form-field input[data-search],
.listSearch-form-field select[data-search],
.js-pillbox-containter{
	width: 100%;
	flex-direction: row;
	flex-wrap: wrap;
	gap: .5em;
    width: 100%;
    padding: 0.25em 0.5em;
    box-sizing: border-box;
    font-family: inherit;
    font-weight: 700;
	background-color: #fff;
    border: 1px solid var(--color-light);
    border-radius: 4px;
	font-size: .9em;
}




/* ------------------------------------------------------- */

.js-pillbox-containter{
	width: 100%;
	flex-direction: row;
	flex-wrap: wrap;
	gap: .5em;
    width: 100%;
    padding: 0.25em 0.5em;
    box-sizing: border-box;
    font-family: inherit;
    font-weight: 700;
	background-color: #fff;
    border: 1px solid var(--color-light);
    border-radius: 4px;
}

.js-pillbox-items{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: .5em;
	align-items: center;
}
.js-pillbox-items:empty{
	display: none;
}
.js-pillbox-items input{
	display: inline-flex;
}
.js-pillbox-item{
	background-color: #eee;
	padding: 0.1em 0.5em;
	border-radius: 4px;
	white-space: nowrap;
    display: flex;
	align-items: center;
}
.js-pillbox-item.str{
    background-color: #fefefe;
    border: 1px solid #ddd;
}
.js-pillbox-label{
	font-size: .75em;
	line-height: 1;
}
.js-pillbox-item-remove{
	outline: 0;
	border: 0;
	padding-left: .5em;
	margin-left: .5em;
	color: #999;
	background-color: transparent;
	font-size: .75em;
	cursor: pointer;
}
.js-pillbox-item-remove::before{
	content: "✖";
}

.js-pillbox-text,
.js-pillbox-autocomplete{
	flex-grow: 1;
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	position: relative;
}

.js-pillbox-autocomplete.loading::before{
	position: absolute;
	display: block;
	content: '';
	top: 50%;
	right: 0;
    width: 25px;
    height: 20px;
    background-color: #fff;
	transform: translateY(-50%);
}
.js-pillbox-autocomplete.loading::after{
	position: absolute;
	display: block;
	content: '';
	top: 50%;
	right: 0;
    width: 12px;
    height: 12px;
    border: 2px dotted var(--color-dark);
    border-radius: 20px;

	-webkit-animation: rotatingAutocomplete 2s linear infinite;
	-moz-animation: rotatingAutocomplete 2s linear infinite;
	-ms-animation: rotatingAutocomplete 2s linear infinite;
	-o-animation: rotatingAutocomplete 2s linear infinite;
	animation: rotatingAutocomplete 2s linear infinite;
}

@keyframes rotatingAutocomplete {
	from {
		-ms-transform: translate(0, -50%) rotate(0deg);
		-moz-transform: translate(0, -50%) rotate(0deg);
		-webkit-transform: translate(0, -50%) rotate(0deg);
		-o-transform: translate(0, -50%) rotate(0deg);
		transform: translate(0, -50%) rotate(0deg);
	}
	to {
		-ms-transform: translate(0, -50%) rotate(360deg);
		-moz-transform: translate(0, -50%) rotate(360deg);
		-webkit-transform: translate(0, -50%) rotate(360deg);
		-o-transform: translate(0, -50%) rotate(360deg);
		transform: translate(0, -50%) rotate(360deg);
	}
}



.js-pillbox-autocomplete input{
	border: 0;
	outline: 0;
}

.js-pillbox-autocomplete input::placeholder {
    font-size: .9em;
    font-weight: 400;
	color: #999;
    font-style: italic;
	opacity: 0;
	transition: all .5s ease;
}

.js-pillbox-autocomplete input:focus::placeholder,
.js-pillbox-containter:hover input::placeholder {
	opacity: 1;
}

		.js-pillbox-containter[data-total="0"] .js-pillbox-operator,
		.js-pillbox-containter[data-total="1"] .js-pillbox-operator{
			display: none;
		}
		.js-pillbox-operator{
			width: 3em !important;
			border: 0 !important;
			outline: 0 !important;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			font-weight: 600;
			font-size: .75em;
		}

		.js-pillbox-operator option{
			direction: rtl;
		}

		.js-pillbox-autocomplete .autocomplete-component-results:not(:empty){
			position: absolute;
			width: 100%;
			z-index: 9999;
			display: block;
			border-left: 1px solid #ddd;
			border-right: 1px solid #ddd;
			border-bottom: 1px solid #ddd;
			padding: 0;
			background-color: #ffffff;
			/* margin-top: .5em; */
		}
		
		.js-pillbox-autocomplete .autocomplete-component-results:empty{
			display: none;
		}
		.js-pillbox-autocomplete .autocomplete-component-results::before,
		.js-pillbox-autocomplete .autocomplete-component-results::after {
			display: none;
		}
		
		.js-pillbox-autocomplete .autocomplete-component-results .i-autocomplete-item{
			display: flex;
    		justify-content: space-between;
		}
		.js-pillbox-autocomplete .autocomplete-component-results .i-autocomplete-item .label{
			font-size: 1.1em;
			font-weight: 600;
		}
		.js-pillbox-autocomplete .autocomplete-component-results .i-autocomplete-item .item-section{
			font-size: .8em;
			color: var(--color-red);
			text-transform: uppercase;
			margin-left: 2em;
		}
		.js-pillbox-autocomplete .autocomplete-component-results .i-autocomplete-item .type{
			font-weight: 400;
			opacity: .8;
		}





/* ------------------------------------------------------- */

.js-pillbox-items{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: .5em;
	align-items: center;

	&:empty{
		display: none;
	}

	& input{
		display: inline-flex;
	}
}

.js-pillbox-item{
	background-color: #eee;
	padding: 0.1em 0.5em;
	border-radius: 4px;
	white-space: nowrap;
    display: flex;
	align-items: center;
}
.js-pillbox-item.str{
    background-color: #fefefe;
    border: 1px solid #ddd;
}
.js-pillbox-label{
	font-size: .85em;
	line-height: 1;
}
.js-pillbox-item-remove{
	outline: 0;
	border: 0;
	padding-left: .5em;
	margin-left: .5em;
	color: #999;
	background-color: transparent;
	font-size: .75em;
	cursor: pointer;

	&::before{
		content: "✖";
	}
}


.js-pillbox-autocomplete{

	flex-grow: 1;
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	position: relative;

	&.loading{

		&::before{
			position: absolute;
			display: block;
			content: '';
			top: 50%;
			right: 0;
			width: 25px;
			height: 20px;
			background-color: #fff;
			transform: translateY(-50%);
		}

		&::after{
			position: absolute;
			display: block;
			content: '';
			top: 50%;
			right: 0;
			width: 12px;
			height: 12px;
			border: 2px dotted var(--color-dark);
			border-radius: 20px;
		
			-webkit-animation: rotatingAutocomplete 2s linear infinite;
			-moz-animation: rotatingAutocomplete 2s linear infinite;
			-ms-animation: rotatingAutocomplete 2s linear infinite;
			-o-animation: rotatingAutocomplete 2s linear infinite;
			animation: rotatingAutocomplete 2s linear infinite;
		}

	}
}

.js-pillbox-autocomplete[data-load-all] .input-wrap{
	position: relative;
}
.js-pillbox-autocomplete[data-load-all] .input-wrap::after{
	content:"\E800";
	font-size: .9em;
	font-family: 'shiro-icon';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.active-filter{
	
	display: flex;
	flex-wrap: wrap;
	gap: .5em .5em;
	margin-bottom: 3.5em;
	align-items: baseline;


	& .active-filter-reset{
		color: var(--color-lighter-grey);
		font-style: italic;
		font-size: .75em;
		transition: all .3s ease;

		&:hover{
			color: var(--color-dark)
		}
	}

	& .active-filter-item{

		display: inline-flex;
		gap: .5em;
		border: 1px var(--color-light) solid;
		padding: .2em .75em;
		border-radius: 1em;
		font-size: .8em;
		transition: all .3s ease;

		& .active-filter-label{
			text-transform: lowercase;
		}

		& .active-filter-value{
			font-weight: 700;
		}

		& .active-filter-remove{

			&::after{
				display: block;
				content: "\E820";
				font-family: 'shiro-icon';
				color: var(--color-light);
				transition: color .3s ease;
			}
		}

		& .active-filter-label-separator{
			font-weight: 400;
		}

		&:hover {
			border: 1px var(--color-dark) solid;
			& .active-filter-remove::after{
				color: var(--color-dark);
			}
		}
	}
}


/*    HOME     */


.hero-search{
	margin: 0;
	width: 90%;
	max-width: 1050px;
	text-align: right;
}

/*    LIST / CARDS     */

.default-list section{
	margin-bottom: 3em;
}

.numbered-pagination{
	margin-top: 4em;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2em;

	& a.all{
		display: inline-block;
		padding: 0.25em 1.5em;
		border: 1px solid #ffffff;
		background-color: #ffffff;
		border-radius: 1em;
		color: var(--color-grey);
		font-size: 1.25em;
		font-weight: 700;
		transition: all .3s ease;
		margin-bottom: 1em;

		&:hover{
			background-color: var(--color-theme);
			border-color: var(--color-theme);
			color: #ffffff;
		}
	}

	& select{
		text-align: right;
		font-weight: 800;
	}

	& .disabled{
		opacity: .3;
		pointer-events: none;
		cursor: auto;
	}
}

.card-grid{

	display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	align-items: start;
    gap: 3em 1.5em;
    margin: .5em 0 .5em 0;

	&.notCollection{

		display: flex !important;
		flex-direction:  column;
		gap: 0.25em !important;
		margin: 0;

		& .card::before{
			display: none;
		}

		& .card-text--additional,
		& .card-text--description,
		& .card-thumb{
			display: none;
		}

		& .card-info{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: .5em;
			align-items: baseline;

			& .card-text--title{
				font-size: 1rem !important;
				font-weight: 400 !important;
				text-decoration: underline;
				text-decoration-thickness: 2px;
				text-underline-offset: 0px;
				text-decoration-color: var(--bg);
				transition: all .3s ease;
			}

			&:hover .card-text--title {
				text-decoration-color: var(--color-dark);
				text-underline-offset: 3px;
			}

			& .card-text--type{
				font-size: .5em;
				font-weight: 600;
				text-transform: uppercase;
				order: 9;
			}
		}
	}

	@media (width < 900px) {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}	

	.default-item & {

		& img{
			max-height: 24vh;
		}
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		grid-gap: 2em 1.5em;

		.small &{
			grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
			& .card{
				grid-template-columns: 30% 65%;
				gap: 5%;
				& .card-zoom{
					bottom: auto;
					top: 0;
				}
				& .card-thumb{
					/* text-align: end; */
				}
			}
		}


	}

 	&.mansonry{

		display: block;
		column-gap: 1.5em;
		columns: 175px;

		& > *{
			break-inside: avoid-column;
			margin-bottom: 2em;
		}
	}
}

.home-visualartwork{

	& header {

		margin-bottom: 2em;

		& h2 {
			font-weight: 800;
			font-size: 1.6em;
		}

		display: flex;
		align-items: baseline;
		justify-content: center;
		width: 100%;

		& .header-tools{
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			justify-content: center;
			gap: .8em;
			font-size: 1.1em;
		}

		& .header-more a{
			font-size: .8em;
			font-weight: 600;
			color: var(--color-darker-grey);
			margin: 0 .5em;
			transition: all .5s ease;
			&:hover {
				color: var(--color-theme);
			}
		}		
	}

	& .card{
		gap: .25em;
	}

	& .card-text > *{
		display: inline-block;
		text-wrap: balance;
	}

	& .card-text--type{
		display: none;
	}
	& .card-text--additional{
		margin-left: .25em;
	}
	
}


@keyframes rotate{
	to{ transform: rotate(360deg); }
}

.shiro-content{

	min-height: 3em;
	position: relative;
	
	
	& .loading{
		position: absolute;
		background-color: #f1f1f1cc;
		inset: 0 0 0 0;
		z-index: 9;
	}

	& .loading::after {
		display: block;
		content: '';
		width: 30px;
		height: 30px;
		border: 4px dotted var(--color-dark);
		border-radius: 50%;
		top: 50%;
		left: 50%;
		position: absolute;
		animation: rotate 1.5s linear infinite;
	}

	& .shiro-content-action-wrap{

		text-align: center;
		
		& a{
			font-size: .7em;
			text-transform: uppercase;
			color: var(--color-dark);
			border: 1px var(--color-light) solid;
			padding: 0.5em 1.25em 0.35em 1.25em;
			border-radius: 1em;
			transition: all .3s ease;
			margin-top: 1em; 
			
			&:hover{
				border: 1px var(--color-dark) solid;
			}
		}
	
		& span{
			margin-left: .75em;
			font-weight: 700;
		}
	}
}



.card {
	position: relative;
    display: grid;
    gap: .5em;

	& > *{
		position: relative;
		z-index: 1;
	}

	& .card-thumb{
		position: relative;
	}


	&:hover .card-zoom{
		opacity: .5;
	} 

	& .card-zoom{
		position: absolute;
		bottom: 0;
		right: 0;
		opacity: 0;
		transition: opacity .5s ease;

		&::before{
			color: #fff;
			margin: 0.5em;
			font-family: "shiro-icon";
			content: '\E82D';
			display: block;
			font-size: 1.6em;
			text-shadow: 0px 0px 10px #000000;
		}

		&:hover{
			opacity: 1;
		}
	}


	& img{
		max-height: 50vh; 
	}

	& .card-text--type{
		opacity: .5;
		font-size: .6em;
		text-transform: uppercase;
		font-weight: 800;
		margin-bottom: .5em;
	}

	& .card-text--title{
		font-weight: 700;
		word-break: break-word;
	}

	& .card-text--additional{
		font-weight: 400;
		font-size: .85em;
		line-height: 1.5;
		color: var(--color-darker-grey);
	}

	& .card-text--id{
		font-size: .65em;
		line-height: 2;
	}

	& .card-text--description{
		font-size: .75em;
		line-height: 1.2;
		opacity: .8;
		margin-top: 1em;
	}

	&::before{
		content: '';
		position: absolute;
		background-color: #ffffff;
		inset: -.75em;
		z-index: 1;
		opacity: 0;
		transition: opacity .5s ease;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	}

	&:hover::before{
		opacity: 1;
	}

	& .card-content{
		& .card-info{
			& .value-description{
				font-style: italic;
				margin-top: .75em;
				display: block;
			}
		}
	}

}


/*    BREADCRUMB     */

.breadcrumb{
	display: flex;
    gap: 0.75em;
    color: var(--color-theme);
    text-transform: uppercase;
    letter-spacing: .2px;
    font-size: .8em;
    padding: 2em 0;
	
	& .breadcrumb-separator{
		font-weight: 200;
	}
	& a{
		font-weight: 600;
		white-space: nowrap;
	}
}

/*    ITEM     */

.default-item{

	& h2 {
		font-size: 1.4em;
		font-weight: 800;
	}

	& .highlights{
		margin: 2em auto;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 1.5em;

		& h3{
			text-transform: uppercase;
			font-weight: 700;
			font-size: .65em;
			margin-bottom: .25em;
		}
		& a {
			display: block;
			font-size: .9em;
		}
	}
}

.default-item-hero{

	background-color: var(--off-white);
	
	& img{
		max-width: 100%;
		max-height: 65vh;
		display: block;
	}
}

.default-item-header{

	display: grid;
	grid-template-columns: 250px calc(100% - 280px);
	gap: 2em 3em;
	padding-bottom: 2em;

    @media (width < 900px) {
        grid-template-columns:  calc(100% - 1px); 
    }

	& .audio-wrap{
		display:inline-block;
		margin:4em 1em;
	}

	&.search{
		display: flex;
		flex-flow: row-reverse;
		justify-content: start;
	}

	& .search-item-header-image{
	
		justify-content: end;
	
		& img {
			display: block;
			width: 160px;
			height: 160px;
			object-fit: cover;
			border-radius: 50%;
			box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		}
	}

	& .default-item-header-image{

		width: 100% ;

		@media (width < 900px) {
			order:  -1; 
		}

		& .swiper-slide{
			text-align: center;
			width: 100%;
		}

		& .swiper-button-disabled{
			opacity: .2;
		}

		& .swiper-pagination{
			position: static;
			margin-top: .5em;

			& .swiper-pagination-bullet{
				border-radius: 0;
				margin: 0 3px;
				width: 12px;
				height: 2px;
				color: var(--color-lighter-grey);
				transition: all .3s ease;
			}

			& .swiper-pagination-bullet.swiper-pagination-bullet-active{
				color: #2e2a26;
				height: 4px;
			}
		}

		& .swiper-button-prev::after,
		& .swiper-button-next::after{
			font-size: 2rem;
		}

		& .swiper-button-disabled::after{}

		display: inline-flex;
		margin: 0 auto;
		align-items: center;
		position: relative;

		& a{
			border: 1px solid #fff;
			box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
			display: inline-block;
			width: auto;
			margin: 0 auto;

			&::before{
				color: #fff;
				margin: 0.5em;
				font-family: "shiro-icon";
				content: '\E82D';
				display: block;
				font-size: 2.4em;
				text-shadow: 0px 0px 10px #000000;
				position: absolute;
				top: 50%;
				left: 50%;
				opacity: 0;
				transition: opacity .5s ease;
				z-index: 3;
				transform: translate(-50%, -50%);
			}

			&.video::before{
				color: #fff;
				margin: 0.5em;
				font-family: "shiro-icon";
				content: '\E809';
				display: block;
				font-size: 2.4em;
				text-shadow: 0px 0px 10px #000000;
				position: absolute;
				top: 50%;
				left: 50%;
				opacity: .75;
				transition: opacity .5s ease;
				z-index: 3;
				transform: translate(-50%, -50%);
			}

		}

		& a:hover::before{
			opacity: 1;
		}
	}
}

.default-text-header{
	& header > div{
		display: flex;
		align-items: baseline;
		gap: 1.5em;

		& .item-title{
			margin-top: 0;
		}
	}
}

.default-item article{
	padding-top: 2em;
	padding-bottom: 3em;
}
.default-item .similar-content{
	padding-top: 3em;
	& h2{
		font-size: 1.2em;
		margin-bottom: 1em;
	}
}

.item-title{
	
	/* margin-top: 2em; */
	margin-bottom: 2.5em;
	
	& h2 {

		font-weight: 800;
		text-wrap: balance;
		font-size: clamp(1.45em, 1.65vw, 1.6em);

		& span{
			text-transform: uppercase;
			font-size: .5em;
			font-weight: 600;
			padding-left: 0.75em;
			color: var(--color-lighter-grey);
		}

		&.version{
			font-size: 1em;
			font-style: italic;
			font-weight: 400;
			display: block;
			color: var(--color-grey);
		}
	}

	& .item-code{
		font-size: .7em;
		font-weight: 700;
		color: var(--color-grey);
		margin-bottom: 1.5em;
	}

	& .item-date{
		font-size: 1em;
		margin-top: .5em;
	}
}

.item-description{
    font-size: .8em;
    line-height: 1.35;
}

.default-item details{
	
	padding-top: .75em;
	margin-bottom: 2.5em;

	& > div{
		margin-top: .5em;
		margin-bottom: 2em;
	}

	& summary{
		cursor: pointer;
		user-select: none;
		position: relative;
		
		& h3.property-fieldset{
			font-size: 1.4em;
			color: #bbb;
		}
	}

	& summary::before{
		content: "\E80E";
		/* width: 25px;
		height: 25px; */
		margin: 0 .5em;
		font-family: "shiro-icon";
		font-style: normal;
		font-weight: normal;
		font-size: 1.5em;
		line-height: 1.5em;
		text-align: center;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		color: var(--bg-header);
		transition: color 0.3s ease;
	}

	&[open] > summary::before{
		content: "\E847";
	}

	&:not(:first-child){
		border-top: 1px solid var(--color-grey);
	}
}

.property-row{

	display: grid;
	grid-template-columns:  minmax(180px, 1fr) 3fr; 
	gap: .2em 3em;
	margin-bottom: .65em;
	border-top: 1px dotted #cccccc;
	margin-top: .5em;
	padding-top: .65em;

    @media (width < 600px) {
        grid-template-columns:  1fr; 
    }
	
	& .property-label{

		display: flex;
		flex-wrap: wrap;
		gap: .5em;
		align-items: flex-start;
		align-content: flex-start;
		line-height: 1.4;

		font-size: .85em;
		font-weight: 700;
		color: var(--color-lighter-grey);

		& span{
			font-size: .9em;
		}

		& .property-label-total{
			font-size: .8em;
			font-weight: 800;
			color: var(--color-dark);
			line-height: 1.6;
		}

		& .property-label-order{
			font-size: .7em;
			padding: .25em .5em;
			border-radius: 1em;
			border: 1px #dddddd solid;
			cursor: pointer;
			opacity: 0;
			transition: opacity .3s ease;
		}
	}

	&:hover .property-label .property-label-order{
		opacity: 1;
	}
	
	& .property-value{

		color: var(--color-darker);
		display: fit-content;
		line-height: 1.2;
		display: flex;
		flex-direction: column;
		gap: 0.35em;

		& a{
			text-decoration: underline;
			text-decoration-thickness: 2px;
			text-underline-offset: 0px;
			text-decoration-color:var(--bg);
			transition: all .3s ease;

		}
		& a:hover{
			text-decoration-color: var(--color-dark);
			text-underline-offset: 3px;
		}

		& > div{
			
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			gap: 0 .5em;

			&:hover .value-description{
				opacity: 1;
			}
		}

		& > div:not(:last-child){
			margin-bottom: .2em;
		}

		& .value-separator:empty{
			display: none;
		}
		
		& .value-type{
			font-size: .55em;
			text-transform: uppercase;
			font-weight: 500;
			letter-spacing: .25px;
			color: var(--color-lighter-grey);
		}

		& .property-value-language{
			font-size: .5em;
			text-transform: uppercase;
			font-style: italic;
			color: var(--color-grey)
		}
		& p:not(:last-child){
			margin-bottom: .5em;
		}

		& .taxonomy-separator::before{
			margin: 0 .15em;
			content: '\E802';
			font-family: 'shiro-icon';
			font-size: .8em;
		}
	}
}

.property-value .value-description{
	font-size: .75em;
}

.property-value .value-description::before{
	content: "(";
}

.property-value .value-description::after{
	content: ")";
}

.value-io{

	font-size: .75em;
	font-style: italic;
	
	& .value-io-separator::before{
		content: ">";
		margin: 0.25em;
	}
}

/*    DEFAULT TEXT    */


.default-text{

	max-width: 900px;
	margin-left: auto;
	margin-right: auto;

	font-size: 1em;
	line-height: 1.5em;

	& blockquote{
		margin: 3em 2em 3em 4em !important;
		font-weight: 700;
		font-size: .95em;
		color: var(--color-lighter-grey);
	}

	& > *:not(:first-child){
		margin-top: 1em;
	}

	& p > a {
		text-decoration: underline;
	}

	& h1 {
		font-size: 1.5em;
		font-weight: 800;

		&:not(:first-child){
			margin-top: 2.5em;
		}
	}

	& h2 {
		font-size: 1.25em;
		font-weight: 800;

		&:not(:first-child){
			margin-top: 2.75em;
		}
	}

	& h3 {
		font-size: 1.1em;
		font-weight: 700;
		color: var(--color-dark);
		
		&:not(:first-child){
			margin-top: 2.25em !important;
		}

	}

	& h2 + h3 {
		margin-top: .5em !important;
	}

	& h4 {
		font-size: 1em;
		font-weight: 800;
		text-transform: uppercase;
		color: var(--color-darker-grey);
		margin-top: 2.5em !important;
	}
	
	& h5 {
		font-size: .9em;
		font-weight: 800;
		/* text-transform: uppercase; */
		color: var(--color-dark);
		letter-spacing: .5px;
		margin-top: 2.5em !important;
	}
	
	& h6 {
		font-size: .8em;
		font-weight: 800;
		text-transform: uppercase;
		color: #000;
		letter-spacing: 1px;
		margin-top: 2.5em !important;
	}

	& h2 + h4,
	& h3 + h4 {
		margin-top: .5em !important;
	}

	& ol li{

		margin-left: 1em;
		padding-left: 1em;

		&::marker {
			content: counters(list-item,'.') " ";
			margin-left: 1em;
			color: var(--color-theme);
			font-size: .9em;
			font-weight: bold;
		}

		&:not(:first-child){
			margin-top: 0.75em;
		}
	}

	& ul li{

		margin-left: 1em;
		padding-left: .5em;
		list-style: square;

		&::marker {
			color: var(--color-theme);
			font-weight: bold;
		}

		&:not(:first-child){
			margin-top: 0.75em;
		}
	}

	& .single-person{
		
		display: flex;
		gap: 1em 1.5em; 
		align-items: end;
		margin-bottom: 1.5em;

		& img {
			object-fit: cover;
			width: 40%;
			max-width: 160px;
			aspect-ratio: 1 / 1;
		} 

		& h4{
			text-transform: none;
			color: var(--color-darker-grey);
			font-size: 1.25em;
		}

		& .description {
			display: none;
		}

	}

	& .mention-item{

		margin: 3em auto;
		display: flex;
		justify-content: center;

		& a{

			transition: all .3s ease;
			&:hover{
				box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
			}
		}

		& figure{
			padding: 1em;
			background-color: #ffffff;
			text-align: center;
			max-width: 100%;

			& img {
				width: 100%;
				max-width: 550px;
				max-height: 50vh;
			}
			
			& figcaption{
				font-size: .85em;
				line-height: 1.2em;
				max-width: 450px;
				margin: .5em auto 0 auto;
				padding: 0 1.5em;
				text-align: center;
				& span{
					font-weight: 800;
				}
			}
		}
	}
	
	& p > img {
		
		max-width: 600px;
		max-height: 60vh;
		width: 100%;
		margin: 4em auto;
		display: block;

	} 

	& .gallery-swiper{

		position: relative;
		width: 100%;
		height: 100%;

		& .swiper-slide {
			width: auto;
		}
	  
		& .swiper-slide img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		& img {
			max-height: 25vh;
			display: block;
		} 
		
		& .swiper-pagination{
			position: relative;
			margin-top: .5em;
		}
		
		& .swiper-button-next{
			right: -2em;
			transform: scale(.66) translateY(-50%);
		}

		& .swiper-button-prev{
			left: -2em;
			transform: scale(.66) translateY(-50%);
		}

		& .swiper-button-disabled{
			display: none;
		}

		& .swiper-pagination-bullet{
			width: .8em;
			height: 3px;
			border-radius: 3px;
			margin: 0 3px !important;
		}
		
		& figcaption {
			display: none;
		}
	}
}


/*    HELPER     */

.wrap {
	width: 90%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

.animated-text {
	opacity: 0;
	transform: translate(20px, 0);
	transition: opacity 1s ease, transform 1s ease;
}

.animated-text.visible {
	opacity: 1;
	transform: translate(0, 0);
}

/* ---------------------- */


/*** ADVANCED-SEARCH ***/

:root {
	/* ff = filter fields */
	--ff-x-padding: 10px;
	--ff-y-padding: 5px;
	--ff-border-radius: 5px;

	/* af = active filters */
	--af-x-padding: 10px;
	--af-y-padding: 5px;
	--af-border-radius: 999px;

	--color-beige: #e9e5d7;
	--color-orange: #ea5e1e; 		/* Quote laranja */
	--color-orange-dark: #eb613d; /* Texto laranja */
	--color-red : #B42627; 	/* Quote "Vinho" */
	--color-red-dark : #7d142d; 	/* Quote "Vinho" */

	--color-white: #fff;
	--color-light: #DEDDD5;
	--color-lighter-grey: #999;
	--color-grey: #898886;
	--color-darker-grey: #707070;
	--color-dark: #2e2a26;
	--color-black: #000;

}

#main-menu .search-autocomplete{
	font-size: 1em;
	width: 28em;
	max-width: 100%;
}

.autocomplete-wrapper{
	margin: 0 !important;
	padding: 0;	
	width: 100%;
	display: flex;
	justify-content: end;
	align-items: center;
	gap: 1.5em;
	z-index: 26;
}

.search-autocomplete {
	z-index: 20;
	position: relative;
	margin: 0 !important;
}

.autocomplete-field-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	align-items: center;
	gap: 1.25rem;

	box-sizing: border-box;
	/* width: 90%; */
	margin: 0 auto;
	padding: 0 .25em 0 .5em;
	border-radius: 3em;

	background-color: #00000066;
	z-index: 0;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.autocomplete-field-wrapper.loading::after {
	position: absolute;
	top: 50%;
	right: .5rem;
	content: "";
	display: block;
	width: .9rem;
    height: .9rem;
	border: 2px dotted #fff;
	border-radius: 50%;
	transform: translateY(-50%);

	-webkit-animation: rotatingAutocomplete 1.5s linear infinite;
	-moz-animation: rotatingAutocomplete 1.5s linear infinite;
	-ms-animation: rotatingAutocomplete 1.5s linear infinite;
	-o-animation: rotatingAutocomplete 1.5s linear infinite;
	animation: rotatingAutocomplete 1.5s linear infinite;
}

.autocomplete-field-wrapper.loading .autocomplete-component>button.autocomplete-icon {
	display: none;
}


.autocomplete-field-wrapper h2 {
	white-space: nowrap;
}

.autocomplete-field-wrapper input {
	/* height: 2.5em; */
	padding: .25em 0;
	border-width: 0;
	background-color: transparent;
}

.autocomplete-field-wrapper .autocomplete-component {
	align-items: baseline;
	display: flex;
	gap: .5em;
	& .autocomplete-component-label{
		white-space:nowrap;
		@media (width < 900px) {
			display: none;
		}
	}
}

.autocomplete-field-wrapper .autocomplete-component>button.autocomplete-icon {

	color: #fff;
	opacity: .8;
	transition: all .3s ease;
	
	&:hover{
		opacity: 1;
	}

	&::before{
		content:"\E80D";
		font-family: 'shiro-icon';
		font-size: .9em;
		padding: .5em;
	}
}

.autocomplete-type{
	all: revert;
	border: 0;
	outline: 0;
	font-family: inherit;
	background-color: transparent;
	font-weight: 800;
	text-transform: lowercase;
	font-size: 1em;
	/* padding: 0.2em 0.2em 0.2em 0; */
	line-height: 1.2;
	font-size: .9em;
	color: #ffffffbb;
	& option{
		color: var(--color-dark);
	}
}

.autocomplete-types-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 1em;
	margin-top: 2em;
}

.autocomplete-types-wrapper h3 {
	font-size: .7em;
	text-transform: uppercase;
	text-align: center;
}

.autocomplete-types-wrapper .type-buttons {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	border-width: 1px;
	border-style: solid;
	border-color: var(--color-lighter-grey);
	border-radius: 5px;
	margin-top: .5em;
	overflow: hidden;
}

.autocomplete-types-wrapper .type-buttons button {
	display: grid;
	place-items: center;
	padding: 0.75em 1.25em;
	border-width: 0 1px 0 0;
	border-style: inherit;
	border-color: var(--color-lighter-grey);
	outline: none;
	background-color: var(--color-white);
	color: var(--color-dark);
	cursor: pointer;
	font-weight: 700;
	transition: all .15s ease-out;
}

.autocomplete-types-wrapper .type-buttons button:last-child {
	border-width: 0;
}

.autocomplete-types-wrapper .type-buttons button:hover {
	background-color: var(--color-orange-dark);
	color: var(--color-white) !important;
}
.autocomplete-types-wrapper .type-buttons button:active {
	background-color: var(--color-red);
}

.autocomplete-types-wrapper .type-buttons button.selected {
	color: var(--color-orange);
}

.autocomplete-component {
	position: relative;
	display: flex;
	justify-content: stretch;
	align-items: stretch;
	width: 100%;
	background-color: transparent;
	z-index: 2;
}

.autocomplete-component:before {
	content: "";

	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: var(--ff-x-padding);

	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: auto;
	height: 100%;

	pointer-events: none;
	z-index: 1;
}

.autocomplete-component.load-all:before {
	font-family: "icons";
	content: "\E80D";
}

.autocomplete-component.load-all.open:before {
	content: "\E810";
}

.autocomplete-component.loading:before {
	width: 24px;
	height: 24px;
	background-image: url('../img/spin-dark.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.autocomplete-component input {
	flex-grow: 1;
	box-sizing: border-box;
	width: 100%;
	outline: none;
	z-index: 0;
	color: var(--color-dark);
	font-size: 1em;
	font-weight: 400;
	color: #fff;
}

.autocomplete-component input::placeholder {
	color: var(--color-grey);
	font-size: .75em;
	font-weight: 400;
}

input[readonly] {
	cursor: pointer;
}

.autocomplete-component-results {

	border-radius: .5em;
	display: none;
	position: absolute;
	top: 100%;
	left: 0px;
	right: 0px;
	padding-top: var(--ff-y-padding);
	padding-bottom: var(--ff-y-padding);
	background-color: rgba(255, 255, 255, 0.95);
	z-index: 999;
	max-height: 75vh;
	overflow-y: auto;
	overflow-x: none;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.autocomplete-component-results.open  {
	display: flex;
	flex-direction: column;
}

.autocomplete-component-results:empty  {
	display: none;
}

.autocomplete-component-results:before,
.autocomplete-component-results:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 100%;
	width: 24px;
	height: 12px;
	background-color: inherit;
}

.autocomplete-component-results:before {
	left: 0;
}

.autocomplete-component-results:after {
	right: 0;
}

.i-autocomplete-item {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: nowrap;
	padding: var(--ff-y-padding) var(--ff-x-padding);
	cursor: pointer;
	gap: 1em;
	color: var(--color-darker-grey);
}

.i-autocomplete-item .type{
	font-size: .7em;
	font-weight: 600;
	color: var(--color-mobileBg);
	text-transform: uppercase;
	flex-shrink: 0;
}

.i-autocomplete-item.selected,
.i-autocomplete-item:hover {
	background-color: var(--color-beige);
}

.i-autocomplete-item>* {
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.i-autocomplete-item .item-section {
	order: -1;
	font-size: 0.8em;
}


/* ---  HOME-REALIZATION .SWIPER-SLIDE  --- */

.home-realization .swiper-slide {
	width: auto !important;
}

.home-realization .swiper-button-prev {
	/* background: linear-gradient(-90deg, rgba(241, 241, 241,0) 0%, rgba(241, 241, 241,1) 90%); */
	color: #fff;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
	height: 110%;
	width: max(90px, 15%);
	top: 0;
	left: 0;
	z-index: 99;
	justify-content: start;
}
.home-realization .swiper-button-next {
	/* background: linear-gradient(90deg, rgba(241, 241, 241,0) 0%, rgba(241, 241, 241,1) 90%);	 */
	color: #fff;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    height: 110%;
    width: max(90px, 15%);
    top: 0;
    right: 0;
	z-index: 99;
	justify-content: end;
}

.home-realization .swiper-button-prev::after {
	padding: 1em;

}
.home-realization .swiper-button-next::after {
	padding: 1em;
}

@media (width < 900px) {
	.home-realization .swiper-button-prev::after,
	.home-realization .swiper-button-next::after {
		display: none;
	}
}

.home-realization .swiper-button-disabled {
	display: none;
}

.card.realization{
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: .5rem;
	width: 240px;

	&::before{
		display: none;
	}

	& .card-image{
		position: absolute;
		inset: 0 0 0 0;
		height: 100%;
		width: 100%;
		transition: all 1s ease;
		
		& img {
			height: 100%;
			width: 100%;
			object-fit: cover;
		}
	}

	&:hover .card-image{
		transform: scale(1.1);
	}

	& .card-text--type{
		display: none;
	}

	& .card-content{
		position: absolute;
		bottom: 0;
		padding: 4em 1em 1.5em 1em;
		width: 100%;
		background: rgb(0,0,0);
		background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 50%);		

		& .card-text--title{
			font-size: 1.4em;
		}

		& .card-text{
			display: flex;
			flex-direction: column-reverse;
			color: #eeeeee;
			& .card-text--additional{
				color: var(--color-theme);
			}
		}
	}
}

.home-intro{

	display: flex;
	gap: .5em 3em;
	margin: 6em auto;
	width: 90%;
	max-width: 900px;

    @media (width < 900px) {
        flex-direction: column;
		text-align: center;
		align-items: center;
		justify-items: center;
    }
	
	& > * {
		display: inline-block;
		justify-content: center;
	}

	& .home-intro-btn{
		display: flex;
    	gap: 1em;
		margin-bottom: .5em;

		@media (width < 900px) {
			justify-content: center;
		}	
	}

	& img{
		height: auto;
		max-width: 360px;
		display: block;
		
		&.assinatura{
			width:280px;
			display: block;
			margin-bottom: 1.25em;

			@media (width < 900px) {
				margin: 2em auto 0 auto;
			}	
		}
	}

	&.portinari {

		align-items: center;
		gap: 1em 4em;
		margin: 7.5em auto;

		& .image img{

			height: auto;
			max-width: 220px;
			display: block;
			border-radius: 50%;
			box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		}
	}


	& p{
		font-size: .9em;
		margin: .5em 4em 2em 0;
		line-height: 1.4;

		@media (width < 900px) {
			margin: 1.5em 3em;
		}		
	}
}


.fancybox-caption__body{

	font-size: .9em;
	font-weight: 400;

	& .caption-title{
		font-size: 1.1em;
		font-weight: 800;
	}
	& .caption-date{
		font-size: 1.2em;
	}
	& .caption-ImageObject{
		display: none;
	}
	& .caption-link{
		display: inline-block;
		border: 1px solid #fff;
		padding: 0.15em 2em;
		margin-top: 0.75em;
		text-transform: uppercase;
		font-weight: 700;
		font-size: .8em;
		letter-spacing: 1px;
		border-radius: 1em;
		text-decoration: none !important;

		&:hover{
			background-color: #fff;
			color: #444;
		}
	}
}


/*  ---------- MODAL ------------  */

	dialog{
		box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
		&::backdrop{
			background-color: #1e1e1edd;
		}
		&#dialog{
			width: 85%;
			height: 85%;
			padding: 0; 
			border: 0;
			box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
			overflow: hidden;
			&.fitContent{
				width: max-content;
				height: fit-content;
			}
		}
		& #dialogClose{
			position: absolute;
			top: 0;
			right: 0;
			z-index: 999;
			display: block;
			width: 30px;
			height: 30px;
			border: 0;
			outline: 0;
			background: transparent;
			margin: .25em;
			font-size: 1.1em;
			cursor: pointer;
			&::before {
				content: '\E821';
				font-family: "shiro-icon";
			}
			& span{
				display: none;
			}
		}
	}

		
/*  ---------- SHARE BOX ------------  */
	
	.item-tools{
		display: flex;
		gap: .5em;
	}

	#printBtn{

		width: 28px;
		height: 28px;
		border-radius: 50%;
		/* background: #f1f1f1; */
		border: 1px solid var(--color-lighter-grey);
		overflow: hidden;

		text-transform: uppercase;
		font-size: .6em;
		letter-spacing: 1px;
		font-weight: 600;
		transition: all .3s ease;
		display: flex;
		justify-content: center;
		align-items: center;

		&::before{
			content: '\E832';
			font-family: "shiro-icon";
			font-size: 1.6em;
			line-height: 1em;
			color: var(--color-lighter-grey);
			transition: all .5s ease;
			font-weight: 500;
			margin-left: .15em;
		}
		&:hover{
			background-color: var(--color-theme);
			border-color: var(--color-theme);
			&::before{
				color: #fff;
			}
		}
	}
	
	#shareBtn{

		width: 28px;
		height: 28px;
		border-radius: 50%;
		/* background: #f1f1f1; */
		border: 1px solid var(--color-lighter-grey);
		overflow: hidden;

		text-transform: uppercase;
		font-size: .6em;
		letter-spacing: 1px;
		font-weight: 600;
		transition: all .3s ease;
		display: flex;
		justify-content: center;
		align-items: center;

		&::before{
			content: '\E849';
			font-family: "shiro-icon";
			font-size: 1.4em;
			line-height: 1em;
			color: var(--color-lighter-grey);
			transition: all .5s ease;
			font-weight: 400;
		}
		&:hover{
			background-color: var(--color-theme);
			border-color: var(--color-theme);
			&::before{
				color: #fff;
			}
		}
	}

	#shareBox{

		padding: 3em 4em;
		& ul{
			display: flex;
			gap: 3em;
			flex-wrap: wrap;
			justify-content: center;
		}
		& a{
			display: flex;
			flex-direction: column;
			align-items: center;
			& span{
				display: block;
				margin-top: 0.75em;
				text-transform: uppercase;
				font-size: .7em;
				letter-spacing: .5px;
				color: #666;
			}
			&::before{
				font-family: 'shiro-icon';
				font-size: 2em;
				transition: all .5s ease;
			}
			&:hover::before{
				color: var(--color-theme);
			}
			&.facebook::before{
				content: '\E84E';
			}
			&.whatsapp::before{
				content: '\F232';
			}
			&.twitter::before{
				content: '\F099';
			}
			&.linkedIn::before{
				content: '\F0E1';
			}
			&.email::before{
				content: '\E84F';
			}
		}
	}

	.contact-msg {
		font-weight: 800;
		font-size: 1.6em;
		margin-bottom: 2em;
		color: var(--color-grey);

		&.error{
			color: var(--color-theme);
			display: inline-block;
			background-color: rgba(0, 0, 0, 0.05);
			padding: 0.5em 1.5em;
			border-radius: 0.25em;
		}
	}

	.contact-text{
		margin-bottom: 2em;
		font-size: .85em;
		line-height: 1.5;
	}

	.contact-properties{

		& .contact-property-label{
			text-transform: uppercase;
			font-size: .75em;
			font-weight: 700;
			color: var(--color-darker-grey);
			letter-spacing: 1px;
		}

		& .contact-property-description{
			font-size: .65em;
			line-height: 1.5;
			margin-bottom: 1em;
			color: var(--color-lighter-grey);
		}

		& .contact-property-required{
			font-size: 1rem;
			color: var(--color-theme);
		}


		& .contact-property select{
			all: revert;
		}

		& .contact-property{

			margin-bottom: .75em;
			
			& textarea,
			& select,
			& input[type=email],
			& input[type=text]{
				width: 100%;
				border-radius: .5em;
				background-color: #fff;
				padding: .25em .5em;
				font-size: inherit;
				border: 1px solid transparent;
				outline: 0;
			}

			& textarea:focus,
			& select:focus,
			& input[type=email]:focus,
			& input[type=text]:focus{
				/* box-shadow: inset rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
				border: 1px solid var(--color-lighter-grey);
			}

			& button{
				margin-top: 2em;
				font-size: 1.1em;
				font-weight: 700;
				color: #fff;
				background-color: var(--color-theme);
				padding: .25em 1em;
				border-radius: .25em;
			}
		}
	}


	.logo-bar{

		display: flex;
		gap: 2em 7em;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 6em;
		
		& .logo-item{
			display: flex;
			flex-direction: column;
			gap: .25em;
			flex-wrap: wrap;
			width: auto;
		}
	
		& .logo-item-img{
			display: flex;
			flex-wrap: wrap;
			gap: 0em 2.5em;
			width: auto;
			justify-content: center;
		}

		& h5{
			text-transform: uppercase;
			font-weight: 700;
			font-size: .55em;
			color: var(--color-grey);
			letter-spacing: 1px;
		}

		& .title{
			text-transform: uppercase;
			font-weight: 700;
			font-size: .55em;
			color: var(--color-black); 
			letter-spacing: 1px;
		}
		
		& img{
			width: auto;
			height: 100px;
			display: flex;
			max-width:100%;
		}
	}

	.default-media-title{
		margin-bottom: 1.5em;
	}

	.default-media{
		display: flex;
		flex-direction: column;
		gap: 1em;
		margin-top: 2em;
	}

	.default-media-item{
		display: flex;
		align-items: center;
		gap: 1em;
		background: #fff;
		transition: all .3s ease;
		padding-right: 1em;
	}

	.default-media-item:hover{
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	}

	.default-media-item::after{
		font-family: 'shiro-icon';
		content: "\E813";
		display: inline-flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		width: 30px;
    	height: 30px;
		border-radius: 50%;
		background: var(--color-light);
		color: #fff;
		transition: all .3s ease;
	}

	.default-media-item:hover::after{
		background: var(--color-theme);
	}

	.default-media-info{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1.5em;
	}

	.default-media-info .name{
		font-weight: 700;
		padding: 0.5em 0;
		line-height: 1.2;
	}

	.default-media-info .size{
    	font-size: .75em;
		color: var(--color-grey);
	}

	.default-media-item img{
		width: 75px;
		height: 100%;
		min-height: 50px;
		object-fit: cover;
	}

	.numbered-pagination .page-first::before,
	.numbered-pagination .page-prev::before,
	.numbered-pagination .page-next::before,
	.numbered-pagination .page-last::before{
		font-family: 'shiro-icon';
		font-weight: 800;
	}

	.numbered-pagination select option{ padding: 0 .25em; }

	.numbered-pagination .pagination-item { padding: .25em; }
	.numbered-pagination .pagination-item:hover { color: var(--color-theme); }
	.numbered-pagination .pagination-item.current { 
		font-weight: 900;
		color: var(--color-theme);
	}

	.numbered-pagination .page-first::before{ content: '\E801\E801'; }
	.numbered-pagination .page-prev::before{ content: '\E801'; }
	.numbered-pagination .page-next::before{ content: '\E802'; }
	.numbered-pagination .page-last::before{ content: '\E802\E802'; }

@media print {

	body{
		font-size: 12px;
	}

	body >  header{
		display: none;
	}
	
	.default-item-header-image img {
		max-height: 300px !important;
	}
	.card img {
		max-height: 100px !important;
	}

	.similar-content{
		display: none;
	}
}