:root {
    --accent-green: #2c833d;
    --white: #fff;
    --dark-gray: #535353;
    --light-gray: #c4c4c4;
    --main-black: #292929;
}

/* Hero  */

.sect-hero-contacts {
    background: url('../images/contacts.jpg') no-repeat;
    background-size: cover;
    background-position: bottom;
    height: 50vh;
    display: flex;
    align-items: center;
}

.hero-contacts-title {
    font-weight: 600;
    font-size: 4rem;
    line-height: 74px;
    color: var(--white);
}

/* Contacts */

.sect-contacts .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contacts-left {
    width: 24%;
}

[class*="ground-pane"] {
    filter: grayscale(1);
}

table {
    width: 100%;
    vertical-align: middle;
}

tr:not(:last-child) td {
    padding-bottom: 45px;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 23px;
    color: var(--main-black);
    width: 100%;
}

tr td span {
    font-size: 1rem;
    color: #888888;
    padding-bottom: 15px;
}

tr td:first-child {
    padding-right: 15px;
    text-align: right;
}


#map {
    width: 72%;
    z-index: 2;
}

@media (max-width: 1000px) {
    
    #map {
    	width: 60% !important;
    	height: 40vh;
    }
}

@media (max-width: 800px) {
	.sect-contacts .container {
		flex-direction: column;
	}
	
	tr td:first-child {
        padding-right: 15px;
        max-width: 20%;
        text-align: right;
    }

    .contacts-left {
        width: 100%;
        margin-bottom: 40px;
    }

    #map {
        height: 500px;
        width: 100% !important;
        height: 60vh !important;
    }
}

@media (max-width: 600px) {
    .hero-contacts-title {
        max-width: 100%;
        font-size: 3rem;
    }

    .sect-contacts .container {
        flex-direction: column;
    }

    tr td:first-child {
        padding-right: 15px;
        max-width: 20%;
        text-align: right;
    }

    .contacts-left {
        width: 100%;
        margin-bottom: 40px;
    }

    #map {
        height: 500px;
        width: 100%;
    }
}

@media (max-width: 400px) {
    .hero-title {
        font-size: 2.25rem;
        line-height: 48px;
    }

    
}