* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
/* General Font: 'Abril Fatface', cursive | 'Krona One', sans-serif */
section {
    position: relative;
    width: 100vw;
}
ol {
    list-style-type: none;
}
ul {
    list-style-type: none;
}
.no_pad {
    padding: 0;
}
a {
    color: #fff;
    text-decoration: none;
}
.left {
    float: left;
}
.right {
    float: right;
}
/* Font sizes */
.font_small {
    font-size: 1vw;
}
.font_medium {
    font-size: 1.75vw;
}
.font_big {
    font-size: 2.25vw;
}
.nowrap {
    text-wrap: nowrap !important;
    white-space: nowrap !important;
}
/* Specific */
body {
    background-color: #fff;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: 'Montserrat', sans-serif;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
body::-webkit-scrollbar {
    display: none;
}
.no_select {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;
}
.error {
    width: 100%;
    color: red;
    display: none;
}
.sucess {
    width: 100%;
    color: green;
    display: none;
}
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.5);
}
.popup .main_div {
    position: absolute;
    width: 30%;
    top: 50%;
    left: 35%;
    transform: translateY(-50%);
    background-color: #fff;
    padding: 2.5%;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.popup div img {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    padding: 2.5%;
}
.popup div img:active {
    transform: scale(0.95);
}
.popup div .loading {
    width: 20%;
    margin: 2% 40%;
}
.popup div .loading:active {
    transform: none;
}
.popup div h5 {
    color: #78ab98;
    font-family: 'Krona One', sans-serif;
}
.popup .red {
    color: red;
}
.popup .green {
    color: green;
}
.popup div a {
    background: #78ab98;
    font-family: 'Krona One', sans-serif;
    color: #fff;
    padding: 3.5% 15%;
    margin: 3% 0;
}
/* Navigation */
nav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    overflow-x: hidden;
    height: auto;
}
nav ol {
    width: 100%;
    display: flex;
    padding: 1.5%;
}
nav ol li {
    text-transform: uppercase;
    font-family: 'Krona One', sans-serif;
    text-align: center;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    display: inline-block;
    padding: 1.2% 0;
    margin: 0 0.75%;
}
  
nav ol li span:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0.75vw;
    background: #78ab98;
    bottom: 2vw;
    transition: all 0.2s ease-out;
    z-index: -1;
}
nav ol li p:hover {
    background-position: 0 11px;
}
.logo_nav {
    margin-right: 6%;
}
nav ol li span:hover:before {
    transform: translateY(10px)
}
.res_btn {
    color: #fff;
    padding: 1.2%;
    border: 2px solid #fff;
}
.logo_img {
    width: 10vw;
    height: auto;
}
.scrolled {
    background-color: #f2f2f2 !important;
    transition: background-color 200ms linear;
}
.scrolled ol li {
    color: black;
}
.scrolled ol li a {
    color: black;
}
.scrolled .res_btn {
    border: 2px solid black;
}
.scrolled ol li span:before {
    background: #78ab98;
}
.mobile_nav_close {
    display: none;
}
.mobile_nav_open {
    display: none;
}
.mobile_nav_logo_out {
    display: none;
}
/* Footer */
footer {
    position: relative;
    width: 100vw;
    background-color: #f2f2f2;
    overflow: auto;
    overflow-x: hidden;
}
footer p {
    width: 100vw;
    float: left;
    text-align: center;
    color: #1d1d1d;
}
footer ol {
    width: 8.5%;
    padding: 2.5%;
    float: left;
    padding-bottom: 0;
}
footer ol li {
    padding: 2.5%;
}
footer ol li img {
    width: 100%;
    cursor: pointer;
    height: auto;
}
.newsletter {
    width: 50%;
    float: left;
    height: auto;
    padding: 2.5%;
}
.newsletter input[type=text] {
    width: 70%;
}
.newsletter input[type=button]:active {
    transform: scale(0.95);
}
.newsletter input {
    color: rgb(117 117 117);
    font-size: 1vw;
    padding: 1.15%;
    border: solid 1px #3e3e3e;
    cursor: pointer;
    font-family: 'Krona One', sans-serif;
    background-color: #fff;
}
.newsletter p {
    text-align: left;
    padding-bottom: 2%;
}
.newsletter h6 {
    color: #353535;
    font-family: 'Krona One', sans-serif;
}
.links {
    width: 20%;
    padding-top: 2.5%;
    float: left;
    display: inline;
}
.links li {
    float: left;
    padding: 1.5%;
}
.links li a{
    color: #1d1d1d;
    text-decoration: none;
}
.links .title {
    color: #353535;
    font-family: 'Krona One', sans-serif;
    float: none;
}
.footer_logo {
    position: absolute;
    width: 17.5%;
    top: 50%;
    right: 2.5%;
    transform: translateY(-50%);
}
/* Home Section */
.home_sec {
    overflow-y: hidden;
    background-image: url('User/Gallery/Home/image.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    -webkit-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
}
.home_sec div {
    top: 50%;
    left: 2.5%;
    position: absolute;
    display: block;
    transform: translateY(-50%);
}
.home_sec h5 {
    font-size: 4vw;
    color: rgba(255, 255, 255, 1);
    border-bottom: 1vw solid #78ab98;
    text-transform: uppercase;
    max-width: 50%;
    white-space: nowrap;
    font-family: 'Krona One', sans-serif;
    cursor: pointer;
}
.home_sec h6 {
    font-size: 1.5vw;
    cursor: pointer;
    position: absolute;
    bottom: 7.5%;
    left: 37.5%;
    width: 25%;
    color: #fff;
    text-align: center;
    padding: 1.5%;
    background-color: #78ab98;
    font-family: 'Krona One', sans-serif;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.home_sec h6:active {
    transform: scale(0.95);
}
/* News Section */
.news_info_sec {
    position: relative;
    width: 100vw;
    height: auto;
    overflow-x: hidden;
}
.top_img_bg {
    position: relative;
    width: 100vw;
    height: 30vw;
    overflow-y: hidden;
    background-image: url('User/Gallery/Home/image.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}
.top_img_bg h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%,-50%);
    font-size: 3vw;
    font-family: 'Krona One', sans-serif;
    padding: 1% 2%;
    border: 0.2vw solid #fff;
    text-transform: uppercase;
    text-align: center;
}
.content {
    width: 100%;
    padding: 3% 2.5%;
}
#line {
    width: 100%;
    padding: 0;
    border-bottom: 1px solid #353535;
}
.news_info_sec .content div {
    position: relative;
    width: 100%;
    padding: 3% 0;
    overflow: auto;
    border-bottom: 1px solid #353535;
}
.news_info_sec .content div img {
    width: 50%;
    height: auto;
    object-fit: cover;
    max-height: 45vh;
}
.news_info_sec .content div h6 {
    position: absolute;
    bottom: 0;
    font-size: 10vw;
    font-family: 'Krona One', sans-serif;
    color: #f2f2f2;
}
.news_info_sec .content div h5 {
    color: #353535;
    font-family: 'Krona One', sans-serif;
}
.news_info_sec .content div div {
    width: 50%;
    padding: 0 1%;
    margin: 0;
    border-bottom: none;
}
/* Menu */
.menu_sec {
    position: relative;
    width: 100vw;
    height: auto;
    overflow-x: hidden;
}
.menu_box {
    position: relative;
    cursor: pointer;
    padding: 5% 0;
    width: 23%;
    height: auto;
    margin: 2.5% 1%;
    border: 1px solid black;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.menu_box:active {
    transform: scale(0.95);
}
.menu_box p {
    position: relative;
    width: 100%;
    text-align: center;
    padding: 2.5% 0;
    font-family: 'Krona One', sans-serif;
    color: #353535;
}
.menu_box img {
    z-index: 0;
    position: absolute;
    width: 50%;
    top: 50%;
    left: 25%;
    transform: translateY(-50%);
}
.menu_box .icon {
    transform: none;
    width: 10%;
    top: 3%;
    left: 1%;
}
/* Special */
.special_sec {
    position: relative;
    width: 100vw;
    height: auto;
    overflow-x: hidden;
}
.special_sec h5 {
    color: #353535;
    font-family: 'Krona One', sans-serif;
    width: 100%;
    text-align: center;
    padding: 2.5%;
    margin-top: 2.5%;
    border-top: 1px solid #353535;
}
.special_btns {
    width: 100%;
    padding: 1%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.special_btns div {
    width: 14%;
    padding: 1% 0;
    margin: 0 0.15%;
    cursor: pointer;
    border: 1px solid black;
}
.special_btns div:active {
    transform: scale(0.95);
}
.special_btns .selected {
    background-color: #353535;
}
.special_btns .selected h6 {
    color: #fff;
}
.special_btns .selected p {
    color: #fff;
}
.special_btns div h6 {
    color: #353535;
    width: 100%;
    text-align: center;
}
.special_btns div p {
    color: black;
    width: 100%;
    text-align: center;
}
.special_day {
    width: 100%;
    padding: 0.5%;
}
.special_day .font_medium {
    font-size: 1.25vw;
}
.special_day ul li{
    margin: 1% 0;
    text-align: center;
}
.special_day .type {
    font-family: 'Krona One', sans-serif;
    padding: 0 1%;
    color: #353535;
}
.special_day .price {
    padding: 0 0.5%;
    color: #353535;
}
/* Contact */
.contact_sec {
    position: relative;
    width: 100vw;
    height: auto;
    overflow-x: hidden;
}
.contact_sec .content div {
    width: 50%;
    padding: 2.5%;
}
.contact_sec .content div h6 {
    color: #353535;
    font-family: 'Krona One', sans-serif;
}
.contact_sec .content div a {
    display: block;
    width: 50%;
    padding: 2.5%;
    margin: 2% 0;
    color: black;
    border: 1px solid black;
    text-align: center;
}
.contact_sec .content div h3 {
    color: #353535;
    font-family: 'Krona One', sans-serif;
}
#map {
    width: 100%;
    height: 20vw;
    background-color: #f2f2f2;
}
/* Reservation */
.res_sec {
    position: relative;
    width: 100vw;
    height: auto;
    overflow-x: hidden;
}
.res_sec .content div {
    width: 50%;
    margin: 0 25%;
}
.res_sec .content div input {
    width: 100%;
    font-size: 1vw;
    padding: 1.15%;
    margin-bottom: 0.5%;
    border: solid 1px #3e3e3e;
    cursor: pointer;
    font-family: 'Krona One', sans-serif;
    background-color: #fff;
}

.res_sec .content div select {
    width: 100%;
    font-size: 1.25vw;
    padding: 1.15%;
    margin-bottom: 0.5%;
    border: solid 1px #3e3e3e;
    cursor: pointer;
    font-family: 'Krona One', sans-serif;
    background-color: #fff;
    color: #757575;
}

.res_sec .content div textarea {
    width: 100%;
    font-size: 1vw;
    padding: 1.15%;
    margin-bottom: 0.5%;
    border: solid 1px #3e3e3e;
    cursor: pointer;
    font-family: 'Krona One', sans-serif;
    background-color: #fff;
    resize: vertical;
}
.res_sec .content div input[type=button] {
    padding: 2%;
    color: #fff;
    background-color: #78ab98;
    margin-top: 2.5%;
    border: none;
}
.res_sec .content div input[type=button]:active {
    transform: scale(0.95);
}
/* Menu Web Page */
.menuWebPage {
    position: relative;
    width: 100vw;
    height: auto;
    overflow-x: hidden;
}
.menuWebPage .MenuPart {
    width: 50%;
    margin: 0.5% 25%;
    padding: 2% 0;
    height: auto;
}
.menuPart h4 {
    font-family: 'Krona One', sans-serif;
    text-align: center;
    border-bottom: 1px solid black;
}
.menuPart .menuFood {
    width: 100%;
    padding: 2.5%;
    margin: 2.5% 0;
    border: 1px solid black;
    overflow: auto;
}
.menuFood img {
    width: 25%;
    height: auto;
}
.menuFood h6 {
    font-family: 'Krona One', sans-serif;
}
.menuFood div {
    padding: 0 2%;
}
.menuFood p {
    max-width: 100%;
}
.loader {
    width: 40px;
    margin: 0 47%;
    aspect-ratio: 1;
    --c: linear-gradient(#000 0 0);
    --r1: radial-gradient(farthest-side at bottom,#000 93%,#0000);
    --r2: radial-gradient(farthest-side at top   ,#000 93%,#0000);
    background: 
      var(--c) ,var(--r1),var(--r2),
      var(--c) ,var(--r1),var(--r2),
      var(--c) ,var(--r1),var(--r2);
    background-repeat: no-repeat;
    animation: l2 1s infinite alternate;
}
@keyframes l2 {
    0%,25% {
      background-size: 8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
      background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
   }
   50% {
      background-size: 8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
      background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
   }
   75% {
      background-size: 8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
      background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
   }
   95%,100% {
      background-size: 8px 100%,8px 4px, 8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px;
      background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(0% - 2px),100% calc(100% + 2px);
   }
}
@media (max-width: 1024px) {
    .nowrap {
        text-wrap: pretty !important;
        white-space: normal !important;
    }
    .popup .main_div {
        width: 75%;
        left: 12.5%;
    }
    .popup div img {
        width: 10.5%;
    }
    section {
        min-height: 0;
        background: #fff;
    }
    body {
        background: #f2f2f2;
    }
    .home_sec {
        min-height: 100vh;
    }
    .font_small {
        font-size: 2.5vw;
    }
    .font_medium {
        font-size: 4.5vw;
    }
    .font_big {
        font-size: 6vw;
    }
    .home_sec div h5 {
        font-size: 10vw;
    }
    .home_sec h6 {
        width: 40%;
        left: 30%;
        font-size: 3.5vw;
        padding: 2.5%;
    }
    footer .social{
        width: 100%;
        display: flex;
        padding: 2.5% 37.5%;
        position: absolute;
        bottom: 27.5%;
        left: 0;
    }
    footer .newsletter {
        width: 100%;
        padding: 5% 7.5%;
        padding-bottom: 0;
    }
    .newsletter input {
        font-size: 2.5vw;
    }
    .newsletter input[type=text] {
        width: 100%;
    }
    .newsletter input[type=button] {
        width: 50%;
        margin: 1% 25%;
    }
    .error {
        text-align: center;
    }
    .sucess {
        text-align: center;
    }
    footer .links {
        width: 100%;
        padding: 25% 7.5%;
        padding-top: 0;
    }
    footer .links li {
        padding: 0.5%;
    }
    .footer_logo {
        top: unset;
        bottom: 2%;
        width: 25%;
        left: 37.5%;
    }
    .top_img_bg {
        height: 50vw;
    }
    .top_img_bg h1 {
        font-size: 6vw;
        padding: 2% 4%;
        text-align: center;
        white-space: nowrap;
    }
    .news_info_sec .content div div {
        padding-bottom: 8.5%;
        width: 100%;
    }
    .news_info_sec .content div img {
        width: 100%;
        margin-bottom: 5%;
    }
    .contact_sec .content div a {
        width: 100%;
        padding: 6.5%;
    }
    #map {
        height: 40vw;
    }
    .res_sec .content div {
        width: 100%;
        margin: 0;
    }
    .res_sec .content div input {
        font-size: 2.5vw;
    }
    .res_sec .content div select {
        font-size: 2.5vw;
    }
    .res_sec .content div textarea {
        font-size: 2.5vw;
    }
    .special_btns div {
        width: 30%;
    }
    .menu_box .icon {
        width: 20%;
    }
    .menu_box img {
        width: 80%;
        left: 10%;
    }
    /* Nav */
    nav {
        height: 100vh;
        background: #f2f2f2;
        display: none;
    }
    nav ol {
        display: grid;
    }
    nav ol li {
        color: black;
        margin: 0;
        padding: 2.5%;
    }
    nav ol li a {
        color: black;
    }
    nav ol .res_btn {
        padding: 2.5%;
        border: 2px solid black;
        margin: 0 20%;
    }
    .logo_img {
        width: 25vw;
    }
    .logo_nav {
        margin-right: 0;
    }
    nav ol li span:before {
        height: 2vw;
        bottom: 3vw;
        left: unset;
        right: 35%;
        width: 30%;
        background: #78ab98;
    }
    .no_pad {
        padding: 2.5%;
    }
    .mobile_nav_close {
        display: block;
        position: fixed;
        right: 1.45%;
        top: 1.5%;
    }
    .mobile_nav_close img {
        width: 7.5vw;
    }
    .mobile_nav_close:active {
        transform: scale(0.95);
    }
    .mobile_nav_open {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 15vw;
        padding: 2.5%;
        z-index: 99;
    }
    .mobile_nav_open:active {
        transform: scale(0.95);
    }
    .mobile_nav_logo_out {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 40vw;
        padding: 2.5%;
        z-index: 99;
    }
}