/* Home page: top menu that slides in after the first screen (in the colours of the home page) */
.mtp-homebar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9990;
    background: rgba(227, 215, 199, .95);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 2px 16px rgba(71, 60, 53, .14);
    font-family: 'CirceRounded', Arial, sans-serif;
    transform: translateY(-110%); visibility: hidden;
    transition: transform .35s ease, visibility 0s linear .35s;
}
.mtp-homebar.is-visible { transform: none; visibility: visible; transition: transform .35s ease; }
.mtp-homebar__inner {
    display: flex; align-items: center; justify-content: space-between;
    width: calc(100% - 80px); max-width: 1700px; height: 74px; margin: 0 auto;
}
.mtp-homebar__logo { position: relative; display: block; flex: none; width: 160px; height: 36px; }
.mtp-homebar__mark { display: block; height: 36px; width: auto; filter: brightness(.28); }
.mtp-homebar__circle {
    position: absolute; left: 126px; top: 50%; width: 28px; height: auto; margin-top: -9px;
    animation: mtp-homebar-spin 10s linear infinite;
}
@keyframes mtp-homebar-spin { to { transform: rotate(360deg); } }
.mtp-homebar__menu { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.mtp-homebar__menu > li { margin: 0 0 0 28px; padding: 0; }
.mtp-homebar__menu > li > a {
    position: relative; display: block; padding: 6px 0;
    color: #474747; font-size: 16px; font-weight: 400; line-height: 1.2; text-decoration: none;
    transition: color .2s ease;
}
.mtp-homebar__menu > li > a:hover,
.mtp-homebar__menu > li > a:focus { color: #866f65; }
.mtp-homebar__menu > li.mtp-menu-btn > a {
    padding: 11px 24px; border-radius: 30px; background: #866f65; color: #fff;
    font-size: 13px; letter-spacing: .5px; text-transform: uppercase;
    transition: background-color .2s ease;
}
.mtp-homebar__menu > li.mtp-menu-btn > a:hover,
.mtp-homebar__menu > li.mtp-menu-btn > a:focus { background: #6f5c53; color: #fff; }

/* the round burger of the home page is not needed while the bar with the menu is shown (desktop) */
@media screen and (min-width: 992px) {
    .t450__burger_container { transition: opacity .25s ease; }
    body.mtp-homebar-on .t450__burger_container { opacity: 0; pointer-events: none; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .mtp-homebar__inner { width: calc(100% - 40px); }
    .mtp-homebar__menu > li { margin-left: 18px; }
    .mtp-homebar__menu > li > a { font-size: 14px; }
    .mtp-homebar__menu > li.mtp-menu-btn > a { padding: 10px 16px; font-size: 12px; }
}
/* phones and tablets: logo in the bar, the menu stays in the round burger */
@media screen and (max-width: 991px) {
    /* 78px: the round Tilda burger (48px, 15px from the top and the right) sits exactly in the middle */
    .mtp-homebar__inner { width: calc(100% - 30px); height: 78px; }
    .mtp-homebar__nav { display: none; }
    .mtp-homebar__mark { height: 30px; }
    .mtp-homebar__logo { width: 140px; height: 30px; }
    .mtp-homebar__circle { left: 105px; width: 23px; margin-top: -7px; }
}

/* logged-in administrators: right under the WordPress admin bar */
body.admin-bar .mtp-homebar { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .mtp-homebar { top: 46px; }
}
@media screen and (max-width: 600px) {
    body.admin-bar .mtp-homebar { top: 0; } /* the admin bar scrolls away here */
}

/* the round burger of Tilda is fixed 15px from the top: move it under the admin bar too */
body.admin-bar .t450__burger_container { transform: translateY(32px); }
@media screen and (max-width: 782px) {
    body.admin-bar .t450__burger_container { transform: translateY(46px); }
}
@media screen and (max-width: 600px) {
    body.admin-bar .t450__burger_container { transform: none; }
}