@font-face {
    font-family: Fregate;
    src: url(/assets/fonts/Fregat_regular.otf);
}

body {
    background-color: black;
    font-family: Fregate, sans-serif;
    color: #fff;
}

a {
    outline: 0;
}

header .row {
    background: url(/assets/img/bricks.png);
}

header .col:nth-child(1){
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0+100;Neutral+Density */
    background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=2 ); /* IE6-9 */
}

.nav {
    -webkit-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.45); 
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.45);
    position: relative;
    z-index: 1000;
}


.nav a {
    font-size: 16pt;
    text-decoration: none;
    color: #dbdee3;
}

.nav a:hover {
    color: #fff;
}

.nav .row .row .col {
    background-position: top left;
    background-size: auto 100%;
    display: flex;
    height: 4rem;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
    outline: solid 2px #361603;
}

.nav-hall {
    background-image: url(/assets/img/mobile-nav-hall.png);
}
.nav-karaoke {
    background-image: url(/assets/img/mobile-nav-karaoke.png);
}
.nav-delivery {
    background-image: url(/assets/img/mobile-nav-delivery.png);
}
.nav-merch {
    background-image: url(/assets/img/mobile-nav-merch.png);
}

.social, .stats {
    display: flex;
    justify-content: center;
    align-items: center;
}

.social a {
    justify-content: center;
    color: #d1be8a;
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: solid 1px #d1be8a;
    padding: 0.2rem;
    margin: 0 0.2rem;
    align-items: center;
    text-decoration: none;
    background-color: rgba(209,190,138,.3);
    filter: drop-shadow(5px 5px 1px #000000);
}

.social a:hover {
    background-color: rgba(209, 190, 138, .7);
    color: #000;
}

.stats {
    color: #d1be8a;
}

.stats h4 {
    font-size: 120%;
}

.view {
    width: 100%;
    height: 360px;
    background-image: url(/assets/img/view.jpg);
    background-size: auto 100%;
}

.hello {
    height:  0;
    padding-bottom:  20%;
    text-align: center;
}

.hello img {
    width: 95%;
    margin: -5% auto 0 auto;
    position: relative;
    z-index: 100;
}

.beer-image {
    width: 36vw;
}

.wood {
    background-image: url(/assets/img/wood.jpg);
}

#date-message {
    font-size: 120%;
    color: #000;
    background-color: #EDC05C;
}

#slider .carousel-item {
    height: 0;
    padding-bottom: 50%;
    background-position: center center;
    background-size: cover;
}

#slider-actions .carousel-item {
    height: 0;
    padding-bottom: 100%;
    background-position: center center;
    background-size: cover;
    border: solid 1px #020a00;
}

#slider-program .carousel-item {
    height: 0;
    padding-bottom: 69.5%;
    background-position: center center;
    background-size: cover;
    position: relative;
    border: solid 1px #020a00;
}

.program .carousel-item button {
    display: none;
}

.program .carousel-item a.prefill, .program .carousel-item a.prefill:hover, .program .carousel-item button {
    position: absolute;
    top: 30%;
    left: 20%;
    width: 60%;
    text-align: center;
    background-color: rgba(255,255,255,.8);
    color: #000;
    padding: 5%;
    font-size: 150%;
    text-decoration: none;
    border-radius: 20px;
}

/* .program .carousel-item a.tickets, .program .carousel-item a.tickets:hover {
    position: absolute;
    top: 55%;
    left: 20%;
    width: 60%;
    text-align: center;
    background-color: rgba(255,255,255,.8);
    color: #000;
    padding: 5%;
    font-size: 150%;
    text-decoration: none;
    border-radius: 20px;
} */

.size-1 {
    font-size: 200%;
}

.size-2 {
    font-size: 150%;
}

.ten {
    font-size: 10pt;
}

h3 {
    font-size: 20pt;
}

h3 strong {
    color: #91c11c;
    font-weight: normal;
}

.bg-green {
    background-image: url(/assets/img/bg-green.png);
    background-position: 10px 10px;
}

.carousel-control-next, .carousel-control-prev {
    width: 9%; 
}

.beer {
    background-color: #1d1916;
    background: linear-gradient(to bottom, rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 30%), url(/assets/img/bg_beer.jpg) center/cover;
}

.beer h1 {
    background-color: #91c11c;
    display: inline-block;
    padding: 0.4rem 1rem;
    color: #000;
}

.beer-slider-container {
    background-color: rgb(173 144 100 / 84%);
    padding: 2rem;
    border-radius: 2rem;
    min-height: 85vh;
}

h1 {
    font-size: 3.5rem;
    line-height: 90%;
}

.dark {
    color: #100e0c;
}


.slider {
    overflow: hidden;
    width: calc(100%-6rem);
}

.slides {
    display: block;
    position: relative;
}

.strip {
    display: flex;
    position: relative;
    padding: 1px;
}

.strip > a {
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 25%;
    flex-shrink: 0;
    padding: .3rem;
    position: relative;
    font-size: 90%;
}



.strip a:hover {
    background-color: rgba(255, 255, 2555, .3);
    color: #000;
}

.menu {
    padding-top: 1px;
    padding-right: 0;
    padding-left: 0;
}

.menu h1 {
    text-align: right;
    margin-right: 5rem
}

.menu h1 span {
    background-color: #4D7627;
    padding: 1rem 10px 0 10px;
    box-shadow: 0px 3px 3px 2px rgba(0,0,0,.6);
}

.menu .strip a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

.menu .strip .active {
    background-color: #4D7627;
}

.menuContent {
    background-color: #1f1614;
    padding: 2rem;
}

.menuContent > div {
    display: none;
}

.menuContent > div.active {
    display: flex;
}

.menu-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    font-size: 90%;

}

.menu-item .thumb {
    display: block;
    width: 100%;
    padding-bottom: 70%;
    margin-bottom: 1rem;
    background-size: cover;
    background-position: center center;
}

.menu-item h4 {
    font-weight: 600;
    font-size: 110%;
}

.menu-item p {
    flex-grow: 1;
}

.menu-item p {
    flex-grow: 1;
    line-height: 120%;
}

.menu-item .output {
    font-size: 70%;
}

.menu-item .price a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 110%;
    padding: .3rem 0 .3rem .5rem ;
    background-color: rgba(255,255,255, .2);
    position: relative;
    padding-top: .5rem;
}

.menu-item .price a.clickable:hover, .menu-item.in_cart .price a.clickable:hover {
    background-color: rgba(137,243,66,.43);
    color: #fff;
}

.menu-item.in_cart .price a {
    background-color: rgba(137,243,66,.43);
    color: #000;
}

.menu-item .price .icon {
    position: absolute;
    top: .4rem;
    right: 3px;
}

.menu-item .price .icon-done {
    display: inline;
}

.menu-item .price .icon-close {
    display: none;
}

.menu-item.in_cart .price .icon-done {
    display: none;
}

.menu-item.in_cart .price .icon-close {
    display: inline;
}

.menuContent.type-delivery .menu-item.undeliverable .price, .menuContent.type-delivery .menu-item.undeliverable .price a {
    cursor: not-allowed !important;
}

#orderMenu table {
    width: 100%;
}

#orderMenu tr {
    background-image: url(/assets/img/dots-2.png);
    background-repeat: repeat-x;
}

#orderMenu tr:nth-child(1) {
    background-image: none;
}

#orderMenu td {
    text-align: center;
    padding: 0.1rem;
    font-size: 90%;
}

.slider-button {
    color: #fff;
    margin: 0 1rem
}

.order {
    background-color: #1f1614;
}

.order h1 {
    font-size: 2.8rem;
    margin-bottom: 3rem;
}

.order h1 img {
    margin-top: -5px;
}

.order h1:before {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
    background-image: url(/assets/img/dots-1.png);
    margin-bottom: 3rem;
}

#order-type-selector {
    margin-top: 2rem;
}

#order-type-selector .col {
    text-align: center;
}

#order-type-selector button {
    color: rgba(255, 255, 255, .9);
}

[aria-controls="paymentDetails"][aria-expanded="false"] .less {
    display: none;
}

[aria-controls="paymentDetails"][aria-expanded="true"] .more {
    display: none;
}

.qty-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qty-cell .qty {
    display: inline-block;
    min-width: 2rem;
    text-align: center;
}

.qty-cell button {
    color: #6f6660;
    margin: .3rem -.1rem -.3rem;
}

#order-type-selector button img {
    margin-right: .8rem;
    filter: invert(99%) sepia(8%) saturate(1004%) hue-rotate(158deg) brightness(115%) contrast(100%);
    opacity: .3;
}


#order-type-selector button.active {
    background-color: rgba(137, 243, 66, .4);
    border: 0;
}

#order-type-selector button.active img {
    filter: none;
    opacity: .9;
}

#order-options .form-control {
    background-color: rgba(255, 255, 255, .43);
    border: none;
    margin-bottom: 1rem;
}

#order-options .form-control::placeholder {
    color: #212121;
}

#orderVerbose {
    font-size: 75%;
    color: #f2b200;
}

.invite > p {
    display: inline-flex;
    align-items: center;
}

.invite .material-symbols-outlined {
    font-size: 250%;
}

.invite .on {
    color: #89f343;
}

.invite .off {
    color: #fff;
}

.big-button {
    border-radius: 0;
    background-color: #4D7627;
    font-size: 120%;
    color: #fff;
    padding: .5rem 5rem;
    margin: 3rem;
}

#reset-button {
    background-color: #b54025;
}

.big-button:disabled {
    background: transparent;
    outline: solid 1px #fff;
    opacity: .5;
}

#panoDIV {
    width: 100%;
    height: 55vh;
}

.invalid-value {
    background-color: #f2b200 !important;
}

.vgradient-bg {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0+21,0+86,1+100 */
    background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 21%,rgba(0,0,0,0) 86%,rgba(0,0,0,1) 100%), url(/assets/img/bricks.png);
}

.reserved {
	fill: #ff2b00 !important;
	cursor: pointer;
}

.reserved-currently {
	fill: #c5ff4c !important;
	cursor: default !important;
}

#pop_msg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgb(255, 122, 61);
    padding: 1rem;
    width: 100%;
    font-size: 120%;
    color: #000;
}

.logo {
    max-width: 100vw;
}

.jump-top {
    height: 0;
    display: block;
}

.jump-top span {
    border: solid 1px #eee;
    color: #eee;
    border-radius: 50%;
    padding: 10px;
    margin: 5px 0 0 5px;
    background-color: rgba(198, 171, 98, .3);
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.light-body {
    color: #000;
    background-color: #DDd;
}

.content{
    padding: 1rem;
    padding-top: 5rem;
    min-height: 100vh;
}

#merchSlider .strip > a {
    display: block;
    width: 48%;
    height: 0;
    padding: 0 0 48% 0;
    margin: 1%;
    background-position: center center;
    background-size: cover;
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.45);
    text-decoration: none;
}

#merchSlider .strip > a > span {
    width: 100%;
    padding: 1.5rem;
    background-color: rgba(255,255,255,.6);
    color: #000;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#merchSlider .strip > a > span > span:first-child {
    font-size: 120%;
}

.adm-orders-table {
    border-collapse: separate;
}

.adm-orders-table td {
    padding: 0 5px;
}

.adm-state-новый {
    background-color: #e9be32;
}
.adm-state-подтверждён {
    background-color: #22a052;
}
.adm-state-отменён {
    background-color: #666666;
}

.warning {
    color: #1f1614;
    outline: solid 1px #807b79;
    margin: 1rem 0;
    padding: 1rem;
    background-color: #a38d6c;
}

#selfdelivery_time {
    border-radius: 0.375rem;
    padding: 0.2rem 0.5rem;
    margin-top: 0.5rem;
    background-color: rgb(255 255 255 / 72%);
    border: none;
}

@media (min-width: 767.98px) {

    header .col:nth-child(1){
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0+100;Neutral+Density */
        background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
    }
    
    header .col:nth-child(3){
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
        background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
    }

    .nav .row {
        height: 69px;
    }
    
    .nav-part-1 {
        background-image: url(/assets/img/nav-1.png);
        background-size: cover;
    }
    
    .nav-part-2 {
        background-image: url(/assets/img/nav-2.png);
        background-size: cover;
    }
    
    .nav-part-1 > .col, .nav-part-2 > .col {
        position: relative;
        outline: none;
    }

    .nav-hall, .nav-karaoke {
        text-align: end;
    }

    .nav-part-1 .col, .nav-part-2 .col {
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.4+0,0+18 */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    
    }
    
    .nav-part-1 .col:nth-child(1) a {
        padding: 10px 50px 0 0;
    }
    
    .nav-part-1 .col:nth-child(2) a {
        padding: 30px 50px 0 0;
    }
    
    .nav-part-2 .col:nth-child(1) a {
        padding: 10px 0 0 30px;
    }
    
    .nav-part-2 .col:nth-child(2) a {
        padding: 30px 0 0 50px;
    }
    
    .nav .row .row .col {
        background-image: none;
        position: relative;
        outline: none;
    }
    
    .nav a {
        display: block;
        position: absolute;
        top: 0;
        left: 5%;
        width: 95%;
        height: 100%;
    }

    .hello {
        padding-bottom:  12%;
    }

    .hello img {
        margin: -10% auto 0 auto;
    }

    .beer-slider-container {
        min-height: 110vh;
    }

    .beer-image {
        width: auto;
    
    }
    .beer-slider-container {
        min-height: 80vh;
    }

    .strip > a {
        width: 14.29%;
        padding: 1rem;
        font-size: 100%;
    }

    .menu-item h4 {
        font-size: 140%;
    }

    .menu-item p {
        line-height: 150%;
    }

    .menu-item .output {
        font-size: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .order {
        padding: 2rem;
    }

    #orderMenu td {
        padding: .5rem;
        font-size: 100%;
    }

    #order-type-selector button {
        font-size: 2rem;
    }

    .plan-toggle {
        display: flex;
        justify-content: center;
    }

    .plan-toggle svg {
        height: 80vh;
    }
}

@media (min-width: 1400px) {

    .nav-part-1 {
        background-image: url(/assets/img/nav-1-xl.png);
    }
    
    .nav-part-2 {
        background-image: url(/assets/img/nav-2-xl.png);
    }
}