body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    width: 100%;
    height: 100%;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    font-family: Arial;
    color: #505050;
}

address strong {
    display: block;
}

a {
    text-decoration: none;
    font-family: Arial;
    text-align: center;
}

.goto a {
    background: #dedede;
    display: flex;
    font-weight: 900;
    width: 90%;
    justify-content: normal;
    margin: 0 auto;
    height: 62px;
    align-items: center;
    font-size: 1.1rem;
    border-radius: 10px;
    user-select: all;
    flex-direction: row;
}

.goto a .icon {
    width: 32px;
    margin: 0 20px;
}

.goto a .icon.menu {
    width: 38px;
    margin: 0 18px 0 15px;
}

.goto a:hover {
    background: #89744f;
    color: #fff;
}

header {
    grid-area: hd;
}

main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "hd hd hd"
        "cn cn cn"
        "ft ft ft";
    animation: mbs 4s infinite;
    height: 100%;
    position: absolute;
    margin: 0 auto;
    width: 100%;
}

/* animate main box-shadow */
@keyframes mbs {
    0% {
        box-shadow: inset 0px 0px 16px 6px #356768;
    }

    50% {
        box-shadow: inset 0px 0px 16px 6px #89744f;
    }

    100% {
        box-shadow: inset 0px 0px 16px 6px #356768;
    }
}



nav.social ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

nav.social ul a {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

nav.social ul .icon {
    max-width: 38px;
    display: block;
    margin-bottom: 8px;
}

nav.social ul .icon.whatsapp {
    max-width: 46px;
    margin: -4px;
    margin-bottom: 4px;
}

a.phone {
    font-size: 2rem;
    font-weight: 900;
    display: block;
    letter-spacing: -2px;
    margin: 8px 0;
}

a.phone .icon {
    margin-left: -8px;
    max-width: 52px;
}

address {
    margin: 5px 0 6px 0;
    text-align: center;
    font-size: 13px;
    font-style: normal !important;
}

section {
    margin: 0px;
    min-width: 20%;
}

section.goto {
    grid-area: cn;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    justify-content: center;
}

section:last-child {
    border-top: 2px solid #868686;
    grid-area: ft;
    padding-bottom: 14px;
}

.goto nav ul li {
    margin: 16px auto;
    text-align: center;
}


.logo {
    max-width: 200px;
    margin: 8px auto 0 auto;
    display: block;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.icon {
    max-width: 64px;
}

@media (min-height: 845px) {
    .goto a {
        height: 110px;
    }

    .logo {
        max-width: 80%;
    }

}

@media (min-width: 1000px) {
    main {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "hd hd hd"
            "cn cn cn"
            "ft ft ft";
        animation: none;
    }

    .goto a {
        height: 41px;
    }

    .logo {
        max-width: 240px;
        margin: 0px auto 0 auto;
        display: block;
    }

    .goto a .icon.menu {
        width: 28px;
    }

    .goto a .icon {
        width: 28px;
    }

    nav.social {
        max-width: 500px;
        margin: 0 auto;
    }

    section:last-child {
        padding: 0;
    }

    nav.social ul .icon.whatsapp {
        max-width: 46px;
    }

    nav.social ul .icon {
        max-width: 38px;
    }

    a.phone {
        font-size: 1.5rem;
    }

    address {
        margin: 10px 0;
    }
}