@media only screen and (max-width: 980px)
{
   
    footer > address button small,
    .logo small
    {
    display: none;
    }
}
/* end header cover elements */

#contact div address a:hover,
#contact div address button:hover
{
	text-decoration: underline;
}

/* footer elements */
footer
{
	position: relative;
	width: 90%;
	padding: 0 2%;
	margin: auto;
	margin-bottom: 0;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
}
footer > address
{
	display: flex;
    flex-direction: row-reverse;
    width: 80%;
    justify-content: space-evenly;
}
footer > div
{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: nowrap;
}
footer > address button
{
	margin: 0.5rem 0;
	position: relative;
}
/* end footer elements */


/* tooltip elements */

footer > address button small,
nav li small,
.logo small
{
    display: block;
	position: absolute;
    top: -1.8rem;
    right: 0;
    visibility: hidden;
    width: max-content;
    font-size: 0.85rem;
    color: #fff;
    background-color: rgba(100, 100, 100, 0.85);
    padding: 0.35rem 0.75rem;
    border-radius: 0.85rem;
    text-align: center;
    z-index: 10;
    line-height: 1;
}
footer > address button small
{
    border-radius: 0.85rem 0.85rem 0.25rem 0.85rem;
}


footer > address button:nth-child(3) small,
footer > address button:nth-child(4) small,
footer > address button:nth-child(5) small
{
    left: 0;
    border-radius: 0.85rem 0.85rem 0.85rem 0.25rem;
}

footer > address button:hover small,
nav li:hover small,
.logo:hover small
{
    visibility: visible;
}
/* end tooltip elements */

/* class icons footer */
address button::before
{
	content: '';
    vertical-align: middle;
    display: inline-block;
    height: 3.25rem;
    width: 3.25rem;
    transition: 500ms all ease;
    border-radius: 0;
}
address button
{
    font-size: 0.9rem;
    color: #404040;
    line-height: 1.7;
    text-align: justify;
}
address button:hover::before,
dialog div > button:hover,
#info div > button:hover
{
	filter: grayscale(50%);
	background-color: #EFF0EB;
	border-radius: 0.5rem;
	transition: 0.3s;
}
.tel::before,
.bg .contact::before
{
	background: url('images/tel.svg') no-repeat;
}
.tel:hover::before,
.bg .contact:hover::before
{
	background: url('images/tel_hover.svg') no-repeat #EFF0EB;
}
.mail::before,
.en .contact::before
{
	background: url('images/post.svg') no-repeat;
}
.mail:hover::before,
.en .contact:hover::before
{
	background: url('images/post_hover.svg') no-repeat #EFF0EB;
}
.contact-form::before
{
	background: url('images/contact_form.svg') no-repeat;
}
.contact-form:hover::before
{
	background: url('images/contact_form.svg') no-repeat #EFF0EB;
}
.market::before
{
	background: url('images/market_1.svg') no-repeat;
}
.market:hover::before
{
	background: url('images/market_1_hover.svg') no-repeat #EFF0EB;
}
.facebook::before
{
	background: url('images/facebook.svg') no-repeat;
}
.about::before
{
	background: url('images/info.svg') no-repeat;
}
.shop::before
{
	background: url('images/market.svg') no-repeat;
}
.product figcaption div:last-of-type a:nth-of-type(1)::before,
.product figcaption div:last-of-type button:nth-of-type(1)::before
{
	background: url('images/market_1.svg') no-repeat;
}
.product figcaption div:last-of-type a:nth-of-type(2)::before,
.product figcaption div:last-of-type button:nth-of-type(2)::before
{
	background: url('images/info.svg') no-repeat;
}
.product figcaption div:last-of-type a:nth-of-type(3)::before,
.product figcaption div:last-of-type button:nth-of-type(3)::before
{
	background: url('images/facebook.svg') no-repeat;
}

.tel::before,
.tel:hover::before,
.mail::before,
.mail:hover::before,
.en .contact::before,
.en .contact:hover::before,
.bg .contact::before,
.bg .contact:hover::before,
.contact-form::before,
.contact-form:hover::before,
.market::before,
.market:hover::before,
.maps::before,
.maps:hover::before,
.BG-EN::before,
.EN-BG::before,
.facebook::before,
.about::before,
.shop::before,
.product figcaption div:last-of-type a:nth-of-type(1)::before,
.product figcaption div:last-of-type a:nth-of-type(2)::before,
.product figcaption div:last-of-type a:nth-of-type(3)::before,
.product figcaption div:last-of-type button:nth-of-type(1)::before,
.product figcaption div:last-of-type button:nth-of-type(2)::before,
.product figcaption div:last-of-type button:nth-of-type(3)::before
{
    background-position:  50% 50%;
	background-size: 70%;
}
button
{
    border: none;
	background-color: transparent;
	font-family: "Comfortaa";
    cursor: pointer;
    padding: 0;
}


@media only screen and (max-width: 980px)
{
	
    footer > address button small
    {
    display: none;
    }
	
}

@media only screen and (max-width: 480px)
{
	.en footer
	{
	    position: sticky;
        bottom: 0;
        width: 100%;
		flex-direction: column;
		background-color: #fffffe;
		z-index: 60;
	}
	.bg footer
	{
        width: 100%;
        flex-direction: column;
        background-color: #fffffe;
	}
	footer > a,
	footer > div
	{
        margin-bottom: 1rem;
        justify-content: center;
	}
	.en footer > div :first-child
	{
        margin-right: 0.35rem;
	}
	.bg footer > div :first-child
	{
        margin-right: 1.5rem;
	}
}


footer > div a,
footer > div button
{
    font-size: 0.8rem;
    color: #606060;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    position: relative;
}

footer > div a:hover,
footer > div button:hover
{
    background-color: #EFF0EB;
    transition: 0.3s;
    text-decoration: none;
}
.sitemap footer a:before
{
    content: none;
    border-top: none;
}
.sitemap footer
{
    border-top: none;
}
footer > div a small
{
    display: block;
    position: absolute;
    top: -1.8rem;
    left: 0;
    visibility: hidden;
    width: max-content;
    font-size: 0.85rem;
    color: #fff;
    background-color: rgba(100, 100, 100, 0.85);
    padding: 0.35rem 0.75rem;
    border-radius: 0.85rem;
    text-align: center;
    z-index: 10;
    line-height: 1;
}
footer > div a:hover small
{
    visibility: visible;
}
@media only screen and (max-width: 980px)
{
    footer > div a small
    {
        display: none;
    }
}