/*
	Qui si richiamano tutti i file che faranno parte dell'header.css
*/
@import '../MainBar/mainbar_02.css';


/* Button Open Search
----------------------------------------------------------*/
	.open-search-bar {
	    position: relative;
	    cursor: pointer;
	    margin-left: 20px;
	}
	.open-search-bar .search-label {
	    margin-right: 10px;
	}
	.open-search-bar span.search-icon {
	    height: 20px;
	    width: 20px;
	    min-width: 20px;
	}
	.open-search-bar .search-label:before {
	    content: "";
	    display: block;
	    width: 100%;
	    height: 1px;
	    background-color: #000;
	    bottom: 0px;
	    position: absolute;
	    left: 0;
	}

/* Floating Div
----------------------------------------------------------*/
	.small-floating-search {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100vh;
	    background-color: rgb(0 0 0 / 49%);
	    visibility: hidden;
	    opacity: 0;
	    pointer-events: none;
	}
	.small-floating-search.active {
	    visibility: visible;
	    opacity: 1;
	    pointer-events: initial;
	}
	.small-floating-search form {
	    position: absolute;
	    top: 3em;
	    right: 2em;
	    width: 640px;
	    padding: 2em;
	    display: flex;
	    align-items: flex-end;
	    transform: scale(0.8);
	    overflow: visible;
	    background-color: #fff;
	    box-shadow: 0 2em 6.6em rgba(0, 0, 0, .5);
	}
	.small-floating-search.active form {
	    transform: scale(1);
	}
	.small-floating-search,
	.small-floating-search form {
	    transition-property: visibility, opacity, transform;
	    transition-duration: 0.2s;
	    transition-timing-function: linear;
	}


	.small-floating-search input {
		position: relative;
		z-index: 2;
		margin-bottom: 0 !important;
	    border: unset;
	    border-bottom: 1px solid #000;
	    border-radius: unset;
	    padding: 10px 0 10px 0;
	    margin-right: 40px;
	    background-color: transparent !important;
	}

	.small-floating-search label {
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    padding-bottom: 10px;
	    z-index: 1;
	    transform: translateY(0);
	    transition-property: transform, font-size;
	    transition-duration: 0.2s;
	    transition-timing-function: linear;
	}
	.small-floating-search label.focused {
	    transform: translateY(-100%);
	    font-size: 15px;
	}