﻿
/*inizio::header*/

.header-container {
	height: 100%;
}

.header-title {
	margin-bottom: 0;
}

.header-title-img {
	height: 43px;
	width: 200px;
}


/*inizio::header-menu-icon*/

.header-menu-icon {
	display: none;
}

.container-bars {
	display: inline-block;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 2rem;
	width: 2rem;
}

.bar1,
.bar2,
.bar3 {
	width: 1.5rem;
	height: 1px/*.2rem*/
	;
	background-color: #333;
	margin: 3px/*.1rem*/
	0;
	transition: 0.4s;
}

.bars-small .bar1 {
	width: 1.3rem;
}

.bars-small .bar2 {
	width: 0.7rem;
}

.bars-small .bar3 {
	width: 1.1rem;
}

.bars-light .bar1,
.bars-light .bar2,
.bars-light .bar3 {
	background-color: #fff;
}

.change .bar1 {
	/*-webkit-transform: rotate(-45deg) translate(-9px, 6px);*/
	/*transform: rotate(-45deg) translate(-.75rem, .0rem);*/
	/*transform: rotate(-45deg) translate(-11px, 2px);*/
	/*transform: rotate(-45deg) translate(0.75rem, 0.1rem);*/
	transform: translate(-0.75rem, 0) rotate(45deg) translate(0.75rem, -0.08rem);
}

.change .bar2 {
	/*opacity: 0;*/
	width: 0;
}

.change .bar3 {
	/*-webkit-transform: rotate(45deg) translate(-8px, -8px);*/
	/*transform: rotate(45deg) translate(-.6rem, .2rem);*/
	/*transform: rotate(45deg) translate(-8px, 0px);*/
	transform: translate(-0.75rem, 0) rotate(-45deg) translate(0.75rem, 0);
}


/*fine::header-menu-icon*/

.header-body {
	height: 100%;
	display: flex;
	flex-direction: column
}

@media (min-width: 992px) {
	/*inizio::header-small*/
	.page-header-small {
		width: 5rem;
		transition: .5s;
		background-color: #FAF9F8e0;
	}
	.page-body-big {
		padding-left: 5rem;
		transition: .5s;
	}
	.page-body-big .footer {
		padding-left: 5rem;
		transition: .5s;
	}
	.page-header-small:hover {
		width: 14rem;
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	}
	.page-header-small .header-container {
		text-align: center;
		overflow: hidden
	}
	.page-header-small .text-menu {
		visibility: hidden;
	}
	.page-header-small .header-title-img {
		clip-path: inset(0px 155px 0px 0px round 0px);
	}
	.page-header-small #menu-contatti-collapse {
		margin-left: 0 !important;
		padding-left: 0 !important;
		/*border: none !important;*/
		display: none;
	}
	.page-header-small .header-toggle {
		visibility: hidden;
	}
	.page-header-small:hover .header-container {
		text-align: left;
		overflow: hidden
	}
	.page-header-small:hover .text-menu {
		visibility: visible;
	}
	.page-header-small:hover .header-title-img {
		clip-path: none;
	}
	.page-header-small:hover #menu-contatti-collapse {
		display: block;
	}
	.page-header-small:hover .header-toggle {
		visibility: visible;
	}
	/*inizio::header-small*/
}

@media(max-width: 992px){
	
	/*inizio::header*/
	.header-container {
		height: auto;
	}
	.header-header {
		display: flex;
		justify-content: space-between;
	}
	.header-title {
		display: inline-block;
		margin: 0;
	}
	.header-title-img {
		width: auto;
		height: 2rem;
	}
	.header-toggle {
		display: none;
	}
	.header-menu-icon {
		display: inline-block;
	}
	.header-body {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.header-body.header-body-hidden {
		display: none;
	}
	/*fine::header*/
}

.rotate {
	transform: rotate(0deg);
	transition: transform 0.2s ease;
}

.rotate.rotate-180 {
	transform: rotate(180deg);
	transition: transform 0.2s ease;
}

.input-search-header-container {
	width: 2rem;
	height: 100%;
	position: absolute;
	top: 0;
	right: 10rem;
	height: 100%;
	padding: 0.25rem;
	opacity: 0%;
	transition: opacity .49s ease-in-out, width ease-in-out .5s;
}

.input-search-header-container.show{
	opacity: 100%;
}

@media (max-width: 575px) {
	.input-search-header-container {
		display: none;
		box-shadow: 0 0.5rem .5rem rgb(0 0 0 / 10%);
	}
	.input-search-header-container.show {
	width: 100%;
	right: 0;
	background-color: white;
	top: 46px;
	display: block;
	}
}
@media (min-width: 576px) {
	.input-search-header-container.show {
	width: 24rem;
	}
}


/*fine::header*/