@charset "utf-8";
@font-face {
    font-family: 'cantarellregular';
    font-display: fallback;
    src: url('cantarell-regular-webfont.eot');
    src: url('cantarell-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('cantarell-regular-webfont.woff') format('woff'), url('cantarell-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cantarellbold';
    font-display: fallback;
    src: url('cantarell-bold-webfont.eot');
    src: url('cantarell-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('cantarell-bold-webfont.woff') format('woff'), url('cantarell-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 100%;
}

body {
    font-family: 'cantarellregular', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #fff;
    /*letter-spacing: 0.08em;*/
    font-size: 1.4rem;
    background-color: #333;
}

strong {
    font-family: 'cantarellbold', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

h1 {
    font-size: 2.4rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.5rem;
}

p {
    font-size: 1rem;
    line-height: 1.5em;
}

ol,
ul,
dl {
    font-size: 1rem;
}

ul li {
    margin-bottom: 4px;
}

.listek td {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #aaa;
    font-size: 0.9rem;
    padding-right: 0.5rem;
}

.listek h1,
.listek h2,
.listek h3 {
    margin-top: 1em;
    margin-bottom: 0.2em;
}

ul,
ol,
dl {
    padding: 0;
    margin: 0;
}

/*h1 {
	font-family: 'broadmoorregular';  
} */
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
    padding-right: 15px;
    padding-left: 15px;
    letter-spacing: 0.02em;
}

a img {
    border: none;
}

a:link {
    color: #fff;
    text-decoration: underline;
    font-size: 95%;
    letter-spacing: normal;
}

a:visited {
    color: #fff;
    text-decoration: underline;
}

a:hover,
a:active,
a:focus {
    text-decoration: none;
}

.container {
    width: 90%;
    max-width: 920px;
    min-width: 500px;
    margin: 0 5%;
    overflow: hidden;
}

.mobile-only {
    display: none;
}

/* ~~ Sloupce rozvržení ~~ 

1) Odsazení je použito pouze v horní a/nebo spodní části elementu div. Elementy v elementu div vnořené obsahují odsazení po stranách. Tímto způsobem není třeba „počítat“ rámečkový model. Je třeba si uvědomit, že pokud k samotnému elementu div přidáte boční odsazení nebo okraj, budou tyto hodnoty spolu se zadanou šířkou použity k určení *celkové* šířky. Postupovat můžete také takovým způsobem, že z elementu div odstraníte hodnotu odsazení a přidáte do něj druhý element div bez zadané šířky a s odsazením, které ve vašem návrhu chcete použít.

2) Všechny sloupce jsou plovoucí a neobsahují tedy žádné okraje. Pokud je přidání okrajů nezbytné, nevkládejte je ve směru, ve kterém budou plout (např. pravý okraj u elementu div, který bude plout vpravo). V mnoha případech lze místo toho použít odsazení. V případě elementů div, kde toto pravidlo nelze dodržet, použijte v pravidlech elementu div příkaz „display:inline“. Zabráníte tak výskytu chyby, která u některých verzí prohlížeče Internet Explorer způsobuje zdvojení okrajů.

3) Vzhledem k tomu, že třídy mohou být v dokumentu použity několikrát (stejně tak několik tříd může být použito na jeden element), jsou sloupce označeny názvem třídy namísto ID. Např. dva elementy div pro boční sloupce můžete podle potřeby vrstvit na sebe. Pokud vám více vyhovuje označení pomocí ID, můžete toto nastavení snadno změnit s podmínkou, že každé ID bude v dokumentu použito pouze jednou.

4) Chcete-li navigační prvky umístit na levé straně namísto na pravé, stačí nechat tyto sloupce plout v opačném směru (všechny vpravo, ne vlevo). Budou tak zobrazeny v opačném pořadí a není potřeba elementy div přesouvat ve zdrojovém kódu HTML.

*/
.sidebar1 {
    float: left;
    width: 20%;
    padding-bottom: 10px;
    text-align: center;
    margin-right: 1%;
}

.content {
    padding: 3%;
    width: 78%;
    float: left;
    background-image: url(images/backdot.png);
    background: rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
}

.content img {
    margin: 30px;
    border: solid 1px #111;
}

.logo {
    margin: 10px;
    margin-top: 20px;
    margin-left: 0px;
    background: url(images/backdot.png) 0 0 repeat;
    background: rgba(0, 0, 0, 0.6);
    padding: 40px 10px 40px 55px;
    display: block;
}

.logo a {
    text-decoration: none;
}

.logo h2 span {
    white-space: nowrap;
}

.logo h2 {
    margin-bottom: 0;
}

.content ul,
.content ol {
    padding: 0 15px 15px 40px; /* Toto odsazení imituje vzhled pravého odsazení ve výše uvedeném pravidle záhlaví a odstavce. Odsazení se nachází ve spodní části, aby v prostoru mezi ostatními elementy v seznamech a v levé části vytvořilo odrážku. Toto nastavení může být podle potřeby upraveno. */
}

/* ~~ Styly navigačních seznamů (pokud se rozhodnete použít předem připravenou rozbalovací nabídku Spry) ~~ */
ul.nav {
    list-style: none; /* Slouží k odebrání značky v seznamu. */
    border-top: 0px none #000; /* Slouží k vytvoření horního okraje odkazů – ostatní jsou vytvořeny pomocí spodního okraje definovaného v elementu LI. */
    margin-bottom: 15px; /* Slouží k vytvoření prostoru mezi prvky navigace a dalším obsahem umístěným níže. */
    font-size: 0.6em;
}

ul.nav li {
    margin-bottom: 10px;
    line-height: 30px;
}

ul.nav a,
ul.nav a:visited {
    padding: 10px;
    display: block;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 15px;
    line-height: 21px;
}

ul.nav a:hover,
ul.nav a:active,
ul.nav a:focus {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
}

.fltrt {
    /* Tuto třídu můžete použít k umístění plovoucího elementu v pravé části stránky. Plovoucí element se musí nacházet před elementem, vedle kterého má být na stránce umístěn. */
    float: right;
    margin-left: 8px;
}

.fltlft {
    /* Tuto třídu můžete použít k umístění plovoucího elementu v levé části stránky. Plovoucí element se musí nacházet před elementem, vedle kterého má být na stránce umístěn. */
    float: left;
    margin-right: 8px;
}

.clearfloat {
    /* Pokud je z kontejneru odebrána vlastnost overflow:hidden, můžete tuto třídu aplikovat na prázdný element div nebo <br /> jako konečný element po posledním plovoucím elementu div (v rámci kontejneru). */
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}

.footer {
    padding-top: 2%;
    width: 99%;
    float: left;
    background-image: url(images/backdot.png);
    background: rgba(0, 0, 0, 0.6);
    margin-top: 20px;
    text-align: center;
}

.footer p {
    font-size: 0.8rem;
}

.tabulka {
    font-size: 13px;
    letter-spacing: 0.03em;
    padding: 5px;
}

.tabulka td {
    border: 1px solid white;
}

.tabulka input {
    border: 1px solid white;
    background-color: transparent;
    color: #fff;
}

.kontakt {
    float: none;
    width: 50%;
}

.kontak-form {
    width: 250px;
}

.content form {
    border: 0px none black;
    display: table;
}

.content #form input,
.content #form textarea {
    background-color: transparent;
    color: white;
    font-family: 'cantarellregular', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    border: 1px solid white;
    /*padding: 5px;*/
    margin: 10px;
    width: 90%;
    overflow: hidden;
}

.content #ctrl {
    display: none;
}

.mobile-menu__title {
    display: none;
}

.mobile-menu input {
    display: none;
}

@media only screen and (max-width: 600px) {
    body {
        font-family: 'cantarellregular', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        margin: 0;
        padding: 0;
        color: #fff;
        letter-spacing: normal;
        font-size: 1.4rem;
        background-color: #333;
    }

    .container {
        width: 100%;
        min-width: 200px;
        margin: 0;
        padding: 0 10px;
        overflow: hidden;
        box-sizing: border-box;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        letter-spacing: normal;
    }

    strong {
        font-family: 'cantarellbold', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    h3 {
        /*font-size: 1rem;*/
    }

    h4 {
        font-size: 1rem;
    }

    p {
        /*font-size: 1rem;*/
        /*line-height: 1.4em;*/
    }

    ol,
    ul,
    dl {
        /*font-size: 0.8rem;*/
    }

    .kontakt {
        float: none;
        width: 50%;
    }

    .sidebar1 {
        float: none;
        width: 100%;
        padding-bottom: 0;
        text-align: center;
        margin-right: 5px;
    }

    .content {
        padding: 21px 7px;
        width: 100%;
        float: none;
        background-image: url(images/backdot.png);
        background: rgba(0, 0, 0, 0.6);
    }

    .logo {
        margin: 5px 0;
        margin-top: 20px;
        background: url(images/backdot.png) 0 0 repeat;
        background: rgba(0, 0, 0, 0.6);
        padding: 20px 5px 20px 5px;
        display: block;
    }

    .content ul,
    .content ol {
        padding: 0 15px 15px 40px; /* Toto odsazení imituje vzhled pravého odsazení ve výše uvedeném pravidle záhlaví a odstavce. Odsazení se nachází ve spodní části, aby v prostoru mezi ostatními elementy v seznamech a v levé části vytvořilo odrážku. Toto nastavení může být podle potřeby upraveno. */
    }

    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }

    ul.nav {
        border-top: 0px none #000;
        margin-bottom: 10px;
        font-size: 0.6em;
        display: none;
    }

    ul.nav li {
        margin-bottom: 4px;
    }

    ul.nav a,
    ul.nav a:visited {
        padding: 15px 5px 15px 5px;
        display: block;
        text-decoration: none;
        background: url(images/backdot.png) 0 0 repeat;
        color: #fff;
        margin: 0;
    }

    .footer {
        padding-top: 2%;
        width: 100%;
        float: left;
        background-image: url(images/backdot.png);
        background: rgba(0, 0, 0, 0.6);
        margin-left: 0%;
        margin-top: 10px;
        text-align: center;
    }

    .footer p {
        font-size: 0.6rem;
    }

    .tabulka {
        font-size: 13px;
        letter-spacing: 0.03em;
        padding: 5px;
    }

    .mobile-menu {
        display: block;
        position: relative;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
        min-height: 46px;
    }

    .mobile-menu__title {
        padding: 0 20px;
        display: block;
        text-decoration: none;
        background: url(images/backdot.png) 0 0 repeat;
        color: #fff;
        width: 100%;
        box-sizing: border-box;
        font-size: 0.7em;
        line-height: 46px;
        margin-top: 7px;
        margin-bottom: 7px;
        -ms-text-align-last: right;
        text-align: left;
        opacity: 0.80;
    }

    .mobile-menu input {
        display: block;
        width: 100%;
        height: 46px;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;

        cursor: pointer;

        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */

        -webkit-touch-callout: none;
    }

    .mobile-menu span.mobile-menu__hamburger {
        display: block;
        width: 27px;
        height: 2px;
        position: absolute;
        top: 16px;
        right: 12px;

        background: #fff;
        border-radius: 3px;

        z-index: 1;

        transform-origin: 4px 0px;

        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
    }

    .mobile-menu span.hamburger-2 {
        top: 22px;
        transform-origin: 0% 100%;
    }

    .mobile-menu span.hamburger-3 {
        top: 28px;
        transform-origin: 0% 100%;
    }

    .mobile-menu input:checked ~ span.mobile-menu__hamburger {
        opacity: 1;
        transform: rotate(45deg) translate(-1px, 1px);
    }

    .mobile-menu input:checked ~ span.hamburger-2 {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    .mobile-menu input:checked ~ span.hamburger-3 {
        transform: rotate(-45deg) translate(-3px, 2px);
    }

    .mobile-menu input:checked ~ ul.nav {
        display: block;
    }
}

@media only screen and (max-width: 768px) and (min-width: 500px) {
    body {
        letter-spacing: normal;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        letter-spacing: normal;
    }
}

/** **/

.gallery-image {
    display: block;
    width: 180px;
    overflow: hidden;
    margin: 2%;
    border: solid 1px #111;
    border-radius: 3px;
    box-sizing: border-box;
}

.gallery-image--full-width {
    float: none;
    width: auto;
    max-width: 100%;
}

.gallery-image--half-width {
    width: auto;
    max-width: 46%;
}

.gallery-image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
    border: 0;
}

.group {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.group--vertical {
    flex-direction: column;
}

.group--shamans {
    max-width: 215px;
}

.group--shamans + .gallery-image,
.group--shamans .gallery-image {
    margin: 10px;
}

.pricelist {
    margin: 15px 0;
}

.pricelist td {
    font-size: 15px;
    padding: 4px 15px;
}