body {
    min-width: 320px;
    margin: 0;
    padding: 0;
    
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 700;
    color: #000000;

    background-color: #ffffff;
}
#my-listbox-header {
    text-align: center;
    display: none;
}

@font-face {
    font-family: 'CrashCTT'; 
    src: local('CrashCTT'),
        url('/fonts/CrashCTT.ttf') format('ttf'),
        url('/fonts/CrashCTT.woff') format('woff'),
        url('/fonts/CrashCTT.woff2') format('woff2');
}

.btn {

    background-color: #ff0000;
    
    width: 185px;
    height: 55px;
    margin: 10px 0 0 30px;
    border-radius: 5px;
    
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 700;
    text-shadow: 0.4px 0.4px 0 black, -0.4px -0.4px 0 black, -0.4px 0.4px 0 black, 0.4px -0.4px 0 black;
    text-align: center;
    color: #fff;
    font-size: 15px;

}

.dropdown-menu {

    margin: 0 0 0 30px;
    width: 185px;
    height: 61px;
    border-radius: 5px;
    

    

    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 700;
    text-shadow: 0.4px 0.4px 0 black, -0.4px -0.4px 0 black, -0.4px 0.4px 0 black, 0.4px -0.4px 0 black;
    text-align: center;
    color: #fff;
    font-size: 20px;
}

.dropdown-menu li{
    border: 1px solid rgba(0, 0, 0, 1);
    border-radius: 5px;

    background-color: #FF0000;
}

.dropdown-item {
    cursor: pointer;
    padding: 0 30px;
}

img {
    max-width: 100%;
    height: auto;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden; 
}

.modal {
    position: fixed;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    display: flex;
  
    background-color: #ff0000;
    opacity: 0.95;
}
  
.modal__wrapper {
    width: 250px;
  
    margin: auto;
    padding: 15px;
    background-color: #ffffff;
    text-align: center;
}
  
.button {
    display: inline-block;
    margin-right: 16px;
    padding: 10px 30px;
  
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    vertical-align: middle;
    text-transform: uppercase;
  
    background-color: #000000;
    border: none;
}
  
.modal--close {
    display: none;
}
  
.modal--open {
    display: none;
}
  
.modal__less {
    
    width: 400px;
  
    margin: auto;
    padding: 15px;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 700;
    background-color: #ffffff;
    text-align: center;
}

.modal__less p {
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 700;
    font-size: 20px;
}


.page-header {
    display: flex;
    flex-direction: column;
    height: 600px;

    position: relative;
    overflow: hidden;
}

.page-header__table {
    display: flex;
    flex-direction: column;
    height: 600px;

    position: relative;
    overflow: hidden;
    /* height: auto; */
}

.main-nav {
    background: #000000; 
}

.page-header__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    height: 65px;

    
}

.page-heaeder__logo-link {
    text-decoration: none;
    color: #ff0000;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

.page-heaeder__logo-text {
    font-family: 'CrashCTT', arial;
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

.page-heaeder__logo-text--red {
    text-decoration: none;
    color: #ff0000;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

.cafe-services__social-logo {
    width: 40px;
    fill: #ff0000;
    margin-right: 5px;
    margin-top: 7px;
}

.main-nav {
    position: relative;
    z-index: 20;
}

.main-nav__toggle {
    position: relative;
    display: block;
    width: 50px;
    height: 30px;
    cursor: pointer;
    border: none;
    outline: none;
    background-color: rgba(153, 153, 153, -0.4); 
}
  
.main-nav--closed .main-nav__toggle::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 4px;
    background-color: #ffffff;
    box-shadow: 0 10px 0 0 white, 0 20px 0 0 white; 
}
  
.main-nav--closed .main-nav__toggle:hover::before {
    background-color: #ff0000;
    box-shadow: 0 10px 0 0 #ff0000, 0 20px 0 0 #ff0000; 
}
  
.main-nav--closed .main-nav__toggle:active::before {
    background-color: #800000;
    box-shadow: 0 10px 0 0 #800000, 0 20px 0 0 #800000; 
}
  
.main-nav--closed .main-nav__list {
    display: none; 
}

@keyframes bounce {
    0% {
      transform: translateY(-200px); }
    100% {
      transform: translateY(0); } 
}
  
.main-nav--opened {
    animation: bounce 1.2s; 
}
  
@keyframes upBounce {
    0% {
      transform: translateY(-10px); }
    100% {
      transform: translateY(0); } 
}
  
.main-nav--closed {
    animation: upBounce 1.2s; 
}
  
.main-nav--opened .main-nav__toggle::before, .main-nav--opened .main-nav__toggle::after {
    content: "";
    position: absolute;
    left: 0px;
    width: 50px;
    height: 4px;
    background-color: #ffffff; 
}
  
.main-nav--opened .main-nav__toggle::before {
    transform: rotate(45deg);
    box-shadow: none; 
}
  
.main-nav--opened .main-nav__toggle::after {
    transform: rotate(-45deg); 
}
  
.main-nav--opened .main-nav__toggle:hover::before, .main-nav--opened .main-nav__toggle:hover::after {
    background-color: #ff0000; 
}
  
.main-nav--opened .main-nav__toggle:active::before, .main-nav--opened .main-nav__toggle:active::after {
    background-color: #800000; 
}

.main-nav__list {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none; 

    z-index: 2;
}
  
.main-nav__list a {
    display: block;
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: 25px;
    line-height: 32px;
    text-align: center;
    color: #ffffff;
    
    text-decoration: none;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #485461; 
}

.main-nav__list a:hover {
      color: #ff0000; 
}

.main-nav__list a:active {
      color: #800000; 
}

.nav__item--logo-desktop {
    display: none;
}

.nav__item--logo {
    display: none;
}



.nav__item {
    background-color: #000000;
    cursor: pointer;
}

.nav__item .nav__item--link {
    padding: 0;
}

.nav__item .nav__item--link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav__item .nav__item--inst {
    padding-top: 25px;
    padding-bottom: 25px;
}

.nav__item--title {
    display: block;
    margin: 0;
    padding-right: 20px;
}

.main-nav__video {
    position: absolute;
    z-index: -1;

    width: 100%;
    height: auto;

    margin-left: 50vw;
    transform: translate(-50%);
}

.scrollup {
    position: fixed;
    z-index: 20;
    left: 10px;
    bottom: 10px;
    width: 60px;
}

.scrollup__contact {
    position: fixed;
    z-index: 20;
    left: 10px;
    bottom: 10px;
    width: 60px;
}

.main-nav__img {
    width: 100%;
}

.cafe-services {
    margin-top: 50px;
}

.cafe-services__list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cafe-services__title {
    margin: 0;
    margin-bottom: 15px;

    color: #ff0000;
    font-size: 30px;
    text-align: center;
    text-shadow: 1px 1px 0 black, -1px -1px 0 black, -1px 1px 0 black, 1px -1px 0 black;
}

.cafe-services__title--social {
    color: #ffffff;
    font-size: 30px;
}

.cafe-services__item--social {
    display: flex;
    justify-content: space-around;
}

.cafe-services__item--serb {
    
    display: block;
    width: 250px;
    height: 50px;

    text-decoration: none;
    color: #ff0000;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    
    background-color: #ffffff;
    

    border: outset;
    border-color: #ff0000;
    opacity: 0.9;
    text-shadow: 0.7px 0.7px 0 black, -0.7px -0.7px 0 black, -0.7px 0.7px 0 black, 0.7px -0.7px 0 black;
}

.cafe-services__item--beer {

    display: block;
    width: 250px;
    height: 50px;

    text-decoration: none;
    color: #ff0000;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    
    background-color: #ffffff;
    
    border: outset;
    opacity: 0.9;
    border-color: #ff0000;
    text-shadow: 0.7px 0.7px 0 black, -0.7px -0.7px 0 black, -0.7px 0.7px 0 black, 0.7px -0.7px 0 black;
}

.cafe-services__item--button:hover {
    transform: scale(1.1);
}

.cafe-services__item--button:active {
    opacity: 0.5;
}

.cafe-services__link {
    margin: 0;
}

.cafe-services__animation {
    display: block;
    margin-left: 20px;
}

.cafe-services__animation-logo {
    width: 200px;
}

.blink {
    animation: blink linear 1.3s infinite;
}

@keyframes blink {
    0% { fill: #ffffff;  }
    100% { fill: #000000; }
}

.cafe-services__social {
    display: none;
}

.about-us {
    height: auto;
    margin-top: 0;
    padding-bottom: 20px;

    background-color: #000000;
    background-repeat: no-repeat;
    background-size: cover;
    
}

.about-us__text-wrapper {
    display: flex;
    flex-direction: column;
}

.about-us__title {
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0;

    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

.about-us__text {
    
    margin: 0px 20px 0 20px;
    padding: 30px 10px 30px 10px;

    color: #000000;
    text-align: center;
    text-indent: 30px;
    background-color: rgba(255,255,255, 0.95);
    border-radius: 10px;
}

.pivovaroff__mobile {
    padding: 20px 0;
    
    font-family: 'CrashCTT', arial;
    font-size: 35px;
    font-weight: 400;
    color: #ff0000;

    text-shadow: 0.1px 0.1px 0 rgb(255, 255, 255), -0.1px -0.1px 0 rgb(255, 255, 255), -0.1px 0.1px 0 rgb(255, 255, 255), 0.1px -0.1px 0 rgb(255, 255, 255);
}

.pivovaroff--text {
    font-family: 'CrashCTT', arial;
    font-size: 25px;
    font-weight: 400;
    color: #ff0000;

    text-shadow: 0.1px 0.1px 0 rgb(255, 255, 255), -0.1px -0.1px 0 rgb(255, 255, 255), -0.1px 0.1px 0 rgb(255, 255, 255), 0.1px -0.1px 0 rgb(255, 255, 255);
}

.serb-menu__list {
    text-align: center;
}

.map {
    width: 100%;
    height: 600px;
}

.map__text {
    display: none;
}

.map__address {
    background: #000000;
    padding: 20px;
}

.map__address .map__address--red {
    color: #ff0000;
    
}

.map__address p {
    color: #ffffff;
    text-align: center;
}



.site-footer {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 2;

    margin-top: 20px;

}

.logo {
    display: flex;
    justify-content: center;

    grid-column-start: 2;
    grid-column-end: 3;
}

.site-footer__title {
    display: block;
    margin: 0;
    padding: 0;

    color: #000000;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

.page-heaeder__logo-link--footer {
    display: block;
    margin-right: 15px;
}

.social {
    display: flex;
    justify-content: center;
    
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

.social svg {
    padding: 10px 10px 10px 10px;
}

/* table.html*/

.table {
    margin-top: -500px;
}

.table__title {
    text-align: center;
}

.table__text {
    text-align: center;
}

.table__img-desktop {
    display: none;
}


/* contact.html */

.map-shop__contact {
    display: flex;
    flex-direction: column;
}

.map__address {
    order: 1;
}

.map {
    order: 2;
}


@media (min-width: 1200px) {
    
    .btn {
        font-size: 20px;
    }

    .page-header {
        height: 900px;
        overflow: hidden;
    }

    .main-nav {
        position: fixed;

        display: flex;
        width: 100%;
        height: 110px;

        border-bottom: 1px solid #ffffff;
        
    }

    .main-nav--closed {
        animation: none;
    }

    .main-nav__toggle {
        display: none;
    }

    .page-header__wrapper {
        display: none;
        align-items: center;
        justify-content: end;
        padding-left: 20px;
        padding-right: 20px;
        height: 110px;
        
    }
    .page-header__wrapper a {
        margin-left: 15px;
        margin-right: 15px;

        text-decoration: none;
    }

    .main-nav--closed .main-nav__list{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        
        width: 100%;
        height: 110px;
    }
    
    .nav__item {
        width: 200px;

        background-color: rgba(153, 153, 153, 0.01);
        cursor: pointer;
    }

    .nav__item--pivovaroff {
        margin: 0 150px;
        width: 250px;
    }
    
    .nav__item--pivovaroff a{
        padding: 0;
    
        font-family: 'CrashCTT', arial;
        font-size: 55px;
        font-weight: 400;
        color: #ff0000;
    
        text-shadow: 0.3px 0.3px 0 rgb(255, 255, 255), -0.3px -0.3px 0 rgb(255, 255, 255), -0.3px 0.3px 0 rgb(255, 255, 255), 0.3px -0.3px 0 rgb(255, 255, 255);
    }

    .pivovaroff {
        font-family: 'CrashCTT', arial;
        font-size: 55px;
        font-weight: 400;
        color: #ff0000;
    
        text-shadow: 0.3px 0.3px 0 rgb(255, 255, 255), -0.3px -0.3px 0 rgb(255, 255, 255), -0.3px 0.3px 0 rgb(255, 255, 255), 0.3px -0.3px 0 rgb(255, 255, 255);
    }

    .pivovaroff--text {
        font-family: 'CrashCTT', arial;
        font-size: 45px;
        font-weight: 400;
        color: #ff0000;
    
        text-shadow: 0.3px 0.3px 0 rgb(255, 255, 255), -0.3px -0.3px 0 rgb(255, 255, 255), -0.3px 0.3px 0 rgb(255, 255, 255), 0.3px -0.3px 0 rgb(255, 255, 255);
    }

    .main-nav__list {
        position: static;
        margin: 0;
    }

    .main-nav__list a {
        border-top: none;
        border-bottom: none; 
    }

    .nav__item--link:hover {
        transform: scale(1.1);
    }

    .nav__item--title {
        display: none;

        margin: 0;
        padding: 0;
    }

    .nav__item--logo-desktop {
        display: block;
    }

    .nav__item--logo {
        display: block;
        width: 60px;
        height: 60px;
    }

    .nav__item--icon {
        width: 110px;
    }

    .nav__item-wrapper {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        align-items: center;
    }

    .nav__item--vk {
        display: block;
        font-size: 12px;
        margin: 0;
        padding: 0;
        margin-top: -5px;

        text-decoration: none;
    }

    .main-nav__list a:hover {
        color: #ffffff;
    }

    
    .cafe-services {
        margin-top: 350px;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .cafe-services__list {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        width: 900px;

        margin: 0;
        padding: 0;

        margin-left: 0;
    }

    .cafe-services__title{
        padding-bottom: 20px;
        font-size: 50px;
    }

    .cafe-services__title--social {
        color: #ffffff;
        font-size: 30px;
    }

    .cafe-services__title--social h3 {
        margin: 0;
    }

    .cafe-services__list li:last-child {
        margin: 0;
        padding: 0;
    }

    .cafe-services__item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cafe-services__item--serb {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 100px;
        text-decoration: none;
        color: #ff0000;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        background-color: #ffffff;
        border-radius: 50px;
        border: outset;
        border-color: #ff0000;
        opacity: 0.9;
    }

    .cafe-services__item--beer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 100px;
        text-decoration: none;
        color: #ff0000;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        background-color: #ffffff;
        border-radius: 50px;
        border-color: #ff0000;
        opacity: 0.9;
    }

    .cafe-services__animation {
        display: block;
        margin-left: 140px;
    }

    .cafe-services__animation-logo {
        width: 500px;
    }

    .blink {
        animation: blink linear 1.3s infinite;
    }

    @keyframes blink {
        0% { fill: #ffffff;  }
        100% { fill: #000000; }
    }

    .cafe-services__social {
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 1%;
    }

    .cafe-services__social-logo {
        width: 80px;
        fill: #ff0000;
        background-color: rgba(255, 255, 255, 0.4);
        border-radius: 10px;
    }

    .cafe-services__social-logo--inst {
        border-radius: 25px;
        width: 80px;
        fill: #ff0000;
        background-color: rgba(255, 255, 255, 0.4); 
    }
    

    .main-nav__video {
        top: -50px;
    }

    .scrollup {
        display: block;
        width: 100px;
    }

    .advantages {
        height: 300px;
        margin-top: 150px;
    }

    .advantages__list {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

    .about-us {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        padding-top: 30px;
    }

    .about-us__title {
        font-size: 40px;
        color: #ff0000;
    }

    .about-us__text-wrapper {
        display: flex;
        flex-direction: row;
    }

    .about-us__img {
        height: 770px;
        padding: 30px;
    }

    .about-us__text {
        width: 1000px;

        color: #ffffff;
        background-color: #000000;

        font-size: 28px;
        flex-basis: 50%;
    }

    .serb-menu {
        margin-top: 100px;
        margin-bottom: 80px;
    }

    .serb-menu__list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        margin: 0 150px;
    }

    .serb-menu__item {
        width: 450px;
    }

    .serb-menu__item--delivery {
        width: 300px;
    }

    .serb-menu__item--main {
        width: 600px;
    }

    .map-shop {
        display: flex;
        flex-direction: row;
    }

    .map {
        width: 50%;
        height: 750px;

        position: relative;
    }

    .map__address {
        width: 50%;
        padding-right: 50px;
        background-color: #000000;
    }

    .map__address p {
        color: #ffffff;
        margin: 0;
        text-align: right;
        font-size: 18px;
        line-height: 30px;
    }

    .map__text {
        display: block;
        position: absolute;
        z-index: 1;
        padding: 5px 10px 5px 10px;


        font-family: 'Noto Sans SC', sans-serif;
        font-size: 25px;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
        left: 50%;
        bottom: 5%;
        background-color: rgba(255, 0, 0, 0.6);
        border-radius: 20px;
    }

    .map__hint {
        padding: 10px;
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        color: #ff0000;

        text-shadow: 0.1px 0.1px 0 black, -0.1px -0.1px 0 black, -0.1px 0.1px 0 black, 0.1px -0.1px 0 black;
    }

    .map__balloon {
        padding: 10px;
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 15px;
        font-weight: 700;
        text-align: center;
        color: #000000;
    }

    .map__address {
        order: 2;
    }
    
    .map {
        order: 1;
    }

    .page-header__table {
        height: auto;
    }

    .table {
        margin-top: 111px;
    }

    .table__title {
        font-size: 55px;
        text-align: center;
    }

    .table__text {
        font-size: 30px;
        text-align: center;
    }

    .table__line {
        width: 1200px;
        /* text-align: center; */
    }

    .table__img-desktop {
        display: block;
    }

    .table__img-mobile {
        display: none;
    }

    .page-header__contact {
        height: 110px;
    }

    .map__contact {
        height: 800px;
    }

    .scrollup__contact {
        display: none;
    }

    .page-header__kitchen {
        height: 110px;
    }
}


@media (min-aspect-ratio: 16/9) {
    .main-nav__video {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    .main-nav__video {
        width: auto;
        height: 100%;
    }
}