.searchbar {
	background-color:rgba(0,0,0,0.7);
	opacity: 0;
	transition: opacity .3s linear;
	z-index:9999;
	height: 0;
	overflow: hidden;
}

.searchbar--visible {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display: block;
	opacity: 1;
	height: auto;
	overflow: visible;
}

.search-table{
	display: table;
	height: 100%;
	width: 100%;
}

.search-table-cell{
	display: table-cell;
	height: 100%;
	width: 100%;	
	vertical-align: middle;
}

.searchbar--visible .searchbar__form {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}

.search-btn{
	color: rgba(51,51,51,.6);
}

.close-search {
    transition: .3s transform cubic-bezier(0.1, 0, 0.1, 1);
}

.close-search {
    padding: 16px;
    border-radius: 32px;
}

.close-search:hover {
    transform: scale(.9) rotate(180deg);
}

form.search-form input {
    padding: 40px 32px !important;
    border-radius: 3px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
    font-size: 1.5em;
}

.submit-search,
.close-search {
    transition: .3s transform cubic-bezier(0.1, 0, 0.1, 1);
}

.submit-search,
.close-search {
    position: absolute;
    top: 50%;
    width: 56px;
    height: 56px;
    margin-top: -28px;
    cursor: pointer;
}

.submit-search {
    right: 80px;
    padding: 16px;
}

.submit-search i {
    color: #333333;
    font-size: 24px;
}

.submit-search:hover i {
    transform: scale(.9);
}

.close-search {
    right: 32px;
}

.gallery-item{
	margin-bottom: 15px;
}

@media screen and (max-width: 575px) {
    .search-control {
        transform: scale(.67);
    }

    .search-control:hover {
        transform: none;
    }

    .submit-search {
        right: 64px;
        padding: 16px;
    }

    .close-search {
        right: 24px;
    }
}

@media screen and (min-width: 768px) {
	.searchbar__form {
		height:96px;
	}
	
	.searchbar__field {
		padding-left:45px;
		height:96px;
		font-size:2em;
	}
	
	.searchbar__button {
		height: 95px;
		width: 90px;
	}
	
	.searchbar__button .far {
		font-size:2em;
	}
}