.mt-13 { margin-top: 0% !important;}
/* 
.align-content-center {
    align-content: flex-start !important;
}
*/
.header-logo {margin-bottom: 50px !important;}
/*.footer-logo { margin-top: 0% !important;}*/
footer {
    padding-top: 80px;
}
.footer-bg { 
background-image:linear-gradient(to top, #f9f6f3 0%, rgba(249, 246, 243, 0.95) 10%, rgba(249, 246, 243, 0.6) 20%, rgba(249, 246, 243, 0) 30%), var(--footer-img);
}

.opacity-light {
    opacity: 0.5;
}

.bg-dark-gray, .bg-dark-gray:focus {
    background-color: #000000;
}


.menu_block_item h1 {color: var(--dark-gray) !important; font-size: 3rem; text-align: center !important;}




/*
 * Klientsky skin pro novou Crafto sablonu.
 * Hodnoty vychazi ze stareho skinu:
 * 1) skin_old/custom-skin.css
 * 2) skin_old/custom-extra.css
 */

@font-face {
    font-family: "ApexSerif";
    src: url("/fonts/ApexSerif-Book.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ApexSerif";
    src: url("/fonts/ApexSerif-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PoplarKozel";
    src: url("/fonts/PoplarKozelPro.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/*
 * Vzorovy klientsky skin pro Crafto frontend.
 * Soubor se v aplikaci nacita jako /files/<klient>/template/skin.css
 * az po /crafto/css/style.css, restaurant.css a crafto-custom.css.
 * Staci prepsat hodnoty v :root a pripadne ponechat jen sekce, ktere klient potrebuje.
 */
/*
@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
*/



:root {
    /* Fonty pouzivane Crafto sablonou a tridami .primary-font / .alt-font. */
    --primary-font: "ApexSerif", Arial, sans-serif;
    --alt-font: "PoplarKozel", Arial, sans-serif;

    /* Hlavni barvy Crafto sablony. */
    --base-color: #d39121;
    --white: #ffffff;
    --black: #282725;
    --dark-gray: #383632;
    --medium-gray: #8d8987;
    --extra-medium-gray: #e4e4e4;
    --light-gray: #a8a8a8;
    --very-light-gray: #f9f6f3;
    --light-medium-gray: #eaeaeb;
    --red: #d51f0f;
    --green: #46b57e;
    --yellow: #ecba23;
	
	/*************************************************************************************/
	--gold: #d1a85e;
	--brown: #7e4b18;
	--kozel-dark-gray: #413121; /*tmavě šedá text nadpisů*/
	--kozel-gray:#898989; /*světle šedá text*/
	--dark-red: #ae0f0a; /*červená tmavě*/
	/*************************************************************************************/

    /* Vlastni skin promenne pro jednodussi prepis nizsich selektoru. */
    --skin-body-bg: #ffffff;
    --skin-body-color: var(--kozel-dark-gray); 
    --skin-heading-color: var(--gold);
    --skin-heading-accent-color: var(--dark-red);
    --skin-link-color: var(--gold);
    --skin-link-hover-color: var(--dark-red);
    --skin-navbar-link-active-color: var(--red);
    --skin-navbar-link-color: #ffffff;
    --skin-navbar-link-hover-color: var(--gold);
    --skin-sticky-navbar-bg: #ffffff;
    --skin-sticky-navbar-link-color: var(--gold);
    --skin-sticky-navbar-link-hover-color: var(--kozel-dark-gray);
    --skin-sticky-navbar-link-active-color: var(--dark-red);
    --skin-button-bg: var(--base-color);
    --skin-button-color: #ffffff;
    --skin-button-hover-bg: var(--dark-gray);
    --skin-footer-bg-color: #f9f6f3;
    --skin-footer-color: var(--kozel-dark-gray);

    /* Pouziva .footer-bg v crafto-custom.css. */
    --footer-img: url("images/kozel-footer.jpg");

    /* Pouziva #footer_logo v crafto-custom.css. */
    --fl-img-src: none;
    --fl-img-width: 280px;
    --fl-img-ratio: 280 / 100;
}

.food-name {
/*    font-family: var(--alt-font) !important;
    color: var(--brown);*/
    font-weight:bold;
    font-size: 1.3em !important;
    line-height: 1.5em;
}

.food-price {
/*    font-family: var(--alt-font) !important;*/
    font-size: 1.3em !important;
    line-height: 1.5em;
}
.food-price span {
    font-weight: normal !important;
}
.food-description small{
    font-size: 1em !important;
    line-height: 1.2em;
}



html {
    font-size: 18px;
}

body {
    font-family: var(--primary-font) !important;
    font-size: 17px;
    line-height: 30px;
    font-weight: 400;
    color: var(--skin-body-color);
    background-color: var(--skin-body-bg);
}

.primary-font {
    font-family: var(--primary-font) !important;
}

.alt-font {
    font-family: var(--alt-font) !important;
}

p,
.cms p {
    color: var(--skin-body-color);
    font-size: 1rem;
    line-height: 1.75;
}

a {
    color: var(--skin-link-color);
	font-weight: bold;
}

a:hover,
a:focus {
    color: var(--skin-link-hover-color);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
.cms h1,
.cms h2,
.cms h3,
.cms h4,
.cms h5,
.cms h6 {
    font-family: var(--alt-font) !important;
    color: var(--skin-heading-color) !important;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 20px !important;
}

h1,
.h1,
.cms h1 {
    font-size: 4.375rem;
    line-height: 4.375rem;
}

h2,
.h2,
.cms h2 {
    font-size: 3.438rem;
    line-height: 3.2rem;
    color: var(--skin-heading-accent-color) !important;
}

h3,
.h3,
.cms h3 {
    font-size: 2.813rem;
    line-height: 3.125rem;
}

h4,
.h4,
.cms h4 {
    font-size: 2.375rem;
    line-height: 2.7rem;
}

h5,
.h5,
.cms h5 {
    font-size: 2rem;
    line-height: 2.2rem;
}

h6,
.h6,
.cms h6 {
    font-size: 1.75rem;
    line-height: 1.95rem;
}

/* Header a navigace. */
header .navbar-brand img {
    max-height: 49px;
}

.navbar .navbar-nav .nav-link,
#navbarNav .navbar-nav .nav-link {
    font-family: var(--alt-font) !important;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0 !important;
    color: var(--skin-navbar-link-color);
}

.navbar .navbar-nav .nav-item .nav-link.active {
    opacity: 1;
    color: var(--skin-navbar-link-active-color) !important;
}

.navbar .navbar-nav .nav-item:hover .nav-link,
.navbar .navbar-nav .nav-link.active,
header .navbar .navbar-nav .nav-item a.menu-highlight,
header .navbar .navbar-nav .nav-item a sup {
    color: var(--skin-navbar-link-hover-color) !important;
    opacity: 1;
}

header.sticky.sticky-active .navbar {
    background-color: var(--skin-sticky-navbar-bg) !important;
}

header.sticky.sticky-active .navbar .nav-link,
header.sticky.sticky-active .navbar .navbar-nav .nav-link {
    color: var(--skin-sticky-navbar-link-color) !important;
}
header.sticky.sticky-active .navbar .nav-link.active,
header.sticky.sticky-active .navbar .navbar-nav .nav-link.active {
    color: var(--skin-sticky-navbar-link-active-color) !important;
}

header.sticky.sticky-active .navbar .nav-link:hover,
header.sticky.sticky-active .navbar .navbar-nav .nav-link:hover,
header.sticky.sticky-active .navbar .navbar-nav .nav-item:hover .nav-link {
    color: var(--skin-sticky-navbar-link-hover-color) !important;
}
    
#navbarNav .dropdown-menu li a:hover {
    color: var(--skin-link-hover-color) !important;
}

/* Tlacitka. */
.btn,
[class*="btn-transparent"],
[class*=" btn-transparent"] {
    font-family: var(--primary-font);
    font-weight: 600;
}

.btn.btn-switch-text > span,
.btn.btn-switch-text.btn-small > span {
    padding: 13px 24px 11px;
}

.btn-primary,
.btn.btn-base-color,
.btn.btn-transparent-white-light:hover,
.sticky .header-transparent .header-button .btn {
    background-color: var(--skin-button-bg) !important;
    border-color: var(--skin-button-bg) !important;
    color: var(--skin-button-color) !important;
}

.btn-primary:hover,
.btn.btn-base-color:hover,
.sticky .header-transparent .header-button .btn:hover {
    background-color: var(--skin-button-hover-bg) !important;
    border-color: var(--skin-button-hover-bg) !important;
    color: var(--skin-button-color) !important;
}

/* CMS bloky a obecne sekce. */
section {
    padding-top: 0px;
    padding-bottom: 0px;
}

.cms .text-base-color,
.text-base-color,
.btn-link.text-base-color {
    color: var(--base-color) !important;
}

.bg-base-color,
.bg-base-color-transparent {
    background-color: var(--base-color) !important;
}

.crafto-cta::after {
    background: rgba(0, 0, 0, 0.4);
}

.crafto-cta:hover::after {
    background: rgba(0, 0, 0, 0.55);
}

/* Hlavicka stranky. */
.page-title-extra-large h1,
.hd_strings .fancy-text-style-4 {
    font-family: var(--alt-font) !important;
    font-size: min(15vw, 85px);
    line-height: 1;
}

/* Footer. */
.footer-bg {
    background-color: var(--skin-footer-bg-color);
    color: var(--skin-footer-color);
}

#footer_down {
    background-color: var(--skin-footer-bg-color);
    color: var(--skin-footer-color);
    border: none !important;
	background-image: url("images/bg-footer.webp");
    background-repeat: repeat-x;
    background-position: bottom center;
}

#footer_down .container p{
	font-weight: bold;
	color: var(--skin-footer-color); 
}

#footer_down #footer_logo,
#footer_logo {
    --fl-img-src: none;
    --fl-img-width: 280px;
    --fl-img-ratio: 280 / 100;
}

footer .elements-social li a,
.elements-social .dark li a {
    color: var(--skin-footer-color);
}

footer .elements-social li a:hover,
.elements-social .dark li a:hover {
    color: var(--white) !important;
}

/* Kontaktni obrazek u mapy. */
.map_side_picture {
    background-image: url("/crafto/images/demo-restaurant-contact-01.jpg");
}

/* Rezervacni formular. */
#rForm h2 {
    font-family: var(--alt-font) !important;
    color: var(--skin-heading-accent-color) !important;
}

#rForm .form-control,
#rForm .form-select {
    font-family: var(--primary-font);
    color: var(--skin-body-color);
}

/* Mobilni doladeni. */
@media (max-width: 991.98px) {
    [data-mobile-nav-style="modern"] .navbar-show-modern-bg {
        background: var(--skin-sticky-navbar-bg) !important;
    }

    [data-mobile-nav-style="modern"] .navbar-modern-inner .navbar-nav .nav-item .nav-link,
    [data-mobile-nav-style="modern"] .navbar-modern-inner .navbar-nav .dropdown-menu a {
        color: var(--skin-sticky-navbar-link-color) !important;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 16px;
        line-height: 28px;
    }

    h1,
    .h1,
    .cms h1 {
        font-size: 3.5rem;
        line-height: 3.6rem;
    }

    h2,
    .h2,
    .cms h2 {
        font-size: 2.75rem;
        line-height: 2.9rem;
    }

    h3,
    .h3,
    .cms h3 {
        font-size: 2.2rem;
        line-height: 2.45rem;
    }
}

.category-separator  {
    display: block;
    height: 35px;
    background: url(images/gradient-line.webp) center center / contain no-repeat;
}
}