@font-face {
    font-family: 'abacumin_proregular';
    src: url('fonts/acuminpro-medium-webfont.ttf') format('truetype');
	font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'abapercu_probold';
    src: url('fonts/apercupro-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'abapercu_proregular';
    src: url('fonts/apercupro-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


:root {
	--color1: #333;
	--color2: #e6e6e6;
	--color3: #fff;
	--color4: #ff008c;
}

::selection {
	color: var(--color3);
	background-color: var(--color4);
}

*:focus {
	outline: none;
}

body {
	color: var(--color1);
	font-family: "abapercu_proregular", sans-serif;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

h1 {
	color: var(--color4);
}

h1 img {
	width: 7em;
	vertical-align: middle;
}

h2 {
	width: 60%;
    margin: 3em auto 1em;
}

#no_res {
	width: 60%;
    margin: 3em auto 1em;
}

strong {
	font-family: "abapercu_probold", sans-serif;
}

header {
	text-align: center;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--color2);
	align-items: center;
    height: 8em;
	padding: 0 3em;
}

nav {
	width: 60%;
	transition: 0.2s ease-in;
}

nav ul {
	margin: 0;
    padding: 2em 0;
}

nav ul li {
	display: inline-block;
	list-style: none;
	width: 19%;
}

nav ul li a {
	padding: 1em 0;
    text-decoration: none;
    color: var(--color1);
    font-family: "abacumin_proregular", sans-serif;
    font-size: 1.2em;
    transition: 0.2s ease-in;
    width: 80%;
    margin: 0 10%;
    display: inline-block;
    vertical-align: middle;
}

nav ul li a:hover {
	color: var(--color4);
}

#menu_icon, #close_icon {
	font-size: 2em;
	vertical-align: middle;
	width: 15%;
	margin-left: 15%;
	font-weight: bold;
	display: none;
}

.submenu {
	position: absolute;
    padding: 0;
	z-index: 10;
	width: 10.75%;
	display: none;
}

#opere_li:hover .submenu {
	display: block;
}

.submenu li {
	display: block;
	width: 100%;
}

.submenu li a {
	width: 100%;
    color: var(--color3);
    background-color: var(--color1);
    display: block;
    padding: 0.7em 0;
    margin: 0;
}

.submenu li a:hover {
    background-color: var(--color4);
	color: var(--color3);
}

header form input {
	color: var(--color1);
	border: 1px solid var(--color1);
	border-radius: 1em;
	padding: 0.5em 0.8em;
}

header form input[type=submit] {
	background-color: var(--color2);
    border-color: var(--color2);
}

header form input[type=submit]:hover {
	background-color: var(--color4);
    border-color: var(--color4);
    color: var(--color3);
}

header form input:focus, header form input[type=submit]:focus {
	border: 1px solid var(--color4);
    outline: none;
}

header h2 {
	width: initial;
    margin: 0;
}

#form-login {
    display: flex;
    flex-direction: column;
    margin: 10em auto 10em;
    align-items: center;
}

#form-login input {
	color: var(--color1);
    border: 1px solid var(--color1);
    border-radius: 1em;
    padding: 0.5em 0.8em;
	margin: 0.4em 0 0.8em;
	width: 12em;
    box-sizing: content-box;
	font-size: 0.9em;
}

#form-login input[type=submit]{
	background-color: var(--color2);
    border-color: var(--color2);
	margin-top: 1.2em;
}

#form-login input[type=submit]:hover {
	background-color: var(--color4);
    border-color: var(--color4);
    color: var(--color3);
}

#form-login input:focus {
	border: 1px solid var(--color4);
    outline: none;
}

#form-login label {
	font-size: 0.9em;
}

#form-login #posted {
	color: var(--color4);
}

#content {
	width: 60%;
    margin: auto;
	min-height: 80vh;
}

#content_anteprima {
	width: 60%;
    margin: 3em auto;
	min-height: 80vh;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: space-between;
}

.current {
	color: var(--color4);
}

.preview {
	margin: 7em auto;
    display: block;
    max-width: calc(100% - 3em);
    max-height: 80vh;
    object-fit: contain;
    cursor: zoom-in;
}

.full {
	width: calc(100% - 8em);
	max-width: calc(100% - 8em) !important;
	height: calc(100vh - 8em);
	max-height: calc(100vh - 8em) !important;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #000000ee;
	margin: 0 !important;
	padding: 4em;
	cursor: zoom-out !important;
}

.no_scroll {
	overflow: hidden;
}

.anteprima_preview {
	margin: 3em 0;
    display: block;
    width: calc(50% - 2em);
    flex-basis: calc(50% - 2em);
	height: 40vh;
	background-color: #ffffff00;
	overflow: hidden;
	transition: 0.2s ease-in;
}

.anteprima_preview_empty {
	margin: 3em 0;
    display: block;
    width: calc(50% - 2em);
    flex-basis: calc(50% - 2em);
	height: 40vh;
}

.anteprima_preview:hover {
	background-color: #ff008cff;
}

.anteprima_preview:hover .desc {
	color: var(--color4);
}

.anteprima_preview img {
	object-fit: cover;
	object-position: top;
    width: 100%;
    height: 100%;
	mix-blend-mode: luminosity;
	transition: 0.2s ease-in;
}

.anteprima_preview img:hover {
	filter: grayscale(100%) contrast(150%);
	transform: scale(1.1);
}

.desc {
	position: absolute;
	text-align: center;
	width: 27.2%;
	margin-top: 0.8em;
	color: var(--color1);
	font-size: 1.1em;
	transition: 0.2s ease-in;
}

.desc_no {
	position: absolute;
	text-align: center;
	width: 27.2%;
	margin-top: calc(19vh + 0.8em);
	color: var(--color1);
	font-size: 1.1em;
	transition: 0.2s ease-in;
}

#mancante {
	text-align: center;
    padding: 8em 0;
    color: var(--color2);
    border: 1px solid var(--color2);
    margin: 4em 1.5em;
}

.anteprima_mancante {
	text-align: center;
    padding: calc(20vh - 0.7em) 0;
    color: var(--color2);
    border: 1px solid var(--color2);
    margin: 3em 0;
	width: calc(50% - 2em - 2px);
}

.el_rec {
	margin: 2em 1.5em;
}

.el_rec > .el_key0 {
	background-color: var(--color1);
    width: calc(100% - 2em);
    display: inline-block;
    color: var(--color3);
    padding: 0.3em 1em;
	text-transform: uppercase;
}

.el_rec > .el_key1 {
	border-bottom: 1px solid var(--color2);
	text-transform: uppercase;
	width: 100%;
    display: inline-block;
}

.el_terminal {
	display: flex;
    justify-content: space-between;
	margin: 1em 1.5em;
}

.el_terminal .el_key {
	font-family: "abapercu_proregular", sans-serif;
}

.el_key {
	font-family: "abapercu_probold", sans-serif;
	width: 50%;
}

.el_val {
	width: 50%;
}

.sep {
	border-top: 0;
	border-bottom: 1px solid var(--color2);
}

footer {
	color: var(--color3);
    background-color: var(--color4);
    padding: 3em 0;
    text-align: center;
    margin-top: 7em;
}

footer::selection {
	color: var(--color4);
	background-color: var(--color3);
}

#sostegno {
	margin-top: 3em;
}

#logo_fp {
	width: 6em;
}

.lds-dual-ring {
    width: 4em;
    height: 4em;
    border-radius: 50%;
    border: 0.5em solid var(--color1);
    border-color: var(--color4) transparent var(--color4) transparent;
    animation: lds-dual-ring 1.5s linear infinite;
	margin: auto;
	position: absolute;
    top: 50vh;
    left: calc(50vw - 4em);
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.disabled {
    color: var(--color2);
    pointer-events: none;
}



/*archivio*/

#arch_container {
	width: 70%;
	margin: 3em auto;
	display: flex;
    align-items: baseline;
	min-height: 80vh;
}

#titolo_arc {
	margin-right: 7em;
    text-align: center;
    width: calc(100% - 14em);
}

#menu_arc {
	width: 30%;
	padding-right: 5%;
}

#menu_arc ul li {
	width: 100%;
}

#menu_arc ul li a {
	padding: 0.2em 0;
    font-size: 1em;
    width: 100%;
    margin: 0;
	font-family: "abapercu_proregular", sans-serif;
	transition: none;
}

#menu_arc ul li a::before {
	content: "";
    background-image: url(../imgs/file-alt-solidA.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.5em;
    height: 1em;
    -webkit-font-smoothing: antialiased;
    float: left;
    margin: 0.3em 0 1em 0;
	filter: invert(20%) sepia(96%) saturate(7203%) hue-rotate(319deg) brightness(100%) contrast(106%);
}

#menu_arc ul li a.selected_inv {
	font-family: "abapercu_probold", sans-serif;
	color: var(--color4);
}

#menu_arc ul li a.selected_inv::before {
	background-image: url(../imgs/file-alt-solidB.svg);
}


#menu_arc ul li a:hover::before {
	background-image: url(../imgs/file-alt-solidB.svg);
}

#content_inventario {
	width: 70%;
	padding-left: 5%;
    border-left: 2px dotted var(--color2);
}

#content_inventario h2 {
	width: 100%;
    margin: 0;
    padding-bottom: 0.6em;
	font-family: 'abapercu_probold';
}

#content_inventario h3, h4 {
	font-family: 'abapercu_probold';
    border-top: 1px solid var(--color2);
    padding-top: 1em;
    margin-bottom: 0;
	font-size: 1em;
}

#content_inventario h3::first-letter, h4::first-letter {
	text-transform: capitalize;
}

#content_inventario p {
	margin-top: 0;
}

#div_inventario {
    padding-top: 1.4em;
    margin-top: 0em;
	text-align: justify;
}

#div_descrizione h3:first-of-type {
	margin-top: 0;
	padding-top: 2em;
}

#div_unita {
	background-color: var(--color2);
    padding: 2em;
    margin-top: 2em;
}

#div_unita span {
	margin-bottom: 0.6em;
    display: inline-block;
}

#div_unita summary {
	padding: 0.6em;
}

#div_unita summary:hover {
	color: var(--color4);
}

.div_detail {
	background-color: var(--color3);
	padding: 0.6em;
	margin: 0.6em 0;
}

.div_detail h4:first-of-type {
	border-top: none;
    margin: 0;
}



@media screen and (max-width: 800px) {

	header {
		flex-direction: column;
		height: fit-content;
		padding: 0;
	}
	
	h1, header form {
		width: 100%;
		margin: 2rem 0;
	}

	h1 img {
		width: 50%;
    	vertical-align: middle;
	}

	h2 {
		width: 90%;
	}

	#no_res {
		width: 90%;
	}
	
	nav {
		padding: 0;
		width: 100%;
		overflow: hidden;
    	height: 0em;
	}

	.visible {
		display: unset !important;
	}

	.tall_menu {
		height: 33em;
	}
	
	nav ul {
		padding: 0;
	}

	nav ul li {
		display: block;
		width: 100%;
	}

	nav ul li a {
		width: 100%;
    	margin: auto;
	}

	.submenu {
		display: block;
		width: 80%;
		margin: auto;
		position: static;
	}

	#content {
		width: 90%;
	}
	
	.el_key, .el_val {
		word-wrap: break-word;
	}
	
	.full {
		width: calc(100% - 4em);
		max-width: calc(100% - 4em) !important;
		height: calc(100vh - 4em);
		max-height: calc(100vh - 4em) !important;
		padding: 2em;
	}

	.desc, .desc_no {
		width: calc(90% - 3rem);
	}

	#content_anteprima {
		width: 100%;
		flex-direction: column;
	}
	
	.anteprima_preview, .anteprima_preview_empty {
		width: calc(100% - 3em);
		flex-basis: auto;
	}
	
	.anteprima_preview img:hover {
		transform: scale(1);
	}
	
	.anteprima_mancante {
		width: calc(100% - 3em - 2px);
	}
	
	footer {
		padding: 3em 5%;
	}


	/*archivio*/

	#arch_container {
		width: 90%;
		flex-direction: column;
	}

	#menu_arc {
		width: 100%;
		padding: 0;
		height: fit-content;
		display: none;
	}

	.tall_menu {
		display: block !important;
	}

	#titolo_arc {
		margin: 1.5rem;
		width: 100%;
	}

	#content_inventario {
		width: 100%;
		padding-left: 0;
		border-left: none;
	}

	.nascosto {
		display: none !important;
	}

	footer {
		margin-top: 4em;
	}

}