:root {
    --white: #fff;
    --dark: #111;
    --dark1: #333;
    --dark2: #666;
    --silver-d: #ddd;
    --red: #dd0000;
    --orange: #ff8531;
}

.bg-white { background: var(--white); }
.white { color: var(--white); }
.dark { color: var(--dark); }
.dark2 { color: var(--dark2); }
.red { color: var(--red); }

.ico-violet {
    color: #6f42c1;
    background: transparent;
    border-color: #fff;
}

.w-1em { width: 1em !important; }
.w-2em { width: 2em !important; }
.w-3em { width: 3em !important; }
.w-4em { width: 4em !important; }
.w-5em { width: 5em !important; }
.w-6em { width: 6em !important; }
.w-7em { width: 7em !important; }
.w-8em { width: 8em !important; }
.w-9em { width: 9em !important; }
.w-10em { width: 10em !important; }

.w-10per { width:10% !important; }
.w-20per { width:20% !important; }
.w-25per { width:25% !important; }
.w-30per { width:30% !important; }
.w-40per { width:40% !important; }
.w-50per { width:50% !important; }
.w-60per { width:60% !important; }
.w-70per { width:70% !important; }
.w-75per { width:75% !important; }
.w-80per { width:80% !important; }
.w-90per { width:90% !important; }
.w-100per { width:100% !important; }

.margin-bottom-1m { margin-bottom: 1em !important; }
.margin-bottom-2m { margin-bottom: 2em !important; }
.margin-bottom-3m { margin-bottom: 3em !important; }
.margin-bottom-4m { margin-bottom: 4em !important; }
.margin-bottom-5m { margin-bottom: 5em !important; }

.left1m { margin-left:1em; }
.left2m { margin-left:2em; }
.left5m { margin-left:5em; }
.right05m { margin-right:0.5em; }
.right1m { margin-right:1em; }
.right2m { margin-right:2em; }
.right5m { margin-right:5em; }

/* override some BS classes */
.card {
    border-width: 1px !important;
    border-radius: .5em !important;
}

.font-spc-1 { letter-spacing: 0.1em; }
.font-spc-2 { letter-spacing: 0.2em; }
.font-spc-3 { letter-spacing: 0.3em; }

.medium { font-weight: 500; }
.bold { font-weight: 600; }
.fullwidth { width:100% !important; }
.nopad { padding:0 !important; }
.nomargin { margin:0 !important; }
.left { float:left !important; }
.right { float:right !important; }
.relative { position:relative; margin:0 auto; }

.pad5 { padding: 5px; }
.pad10 { padding: 10px; }
.pad15 { padding: 15px; }
.pad20 { padding: 20px; }
.pad30 { padding: 30px; }
.pad40 { padding: 40px; }
.pad50 { padding: 50px; }

.bottom-05em { margin-bottom:0.5em !important; }
.bottom-075em { margin-bottom:0.75em !important; }
.bottom-1em { margin-bottom:1em !important; }
.bottom-2em { margin-bottom:2em !important; }

.clear,
.clearbox {
    display:block !important;
    clear:both !important;
    width:100% !important;
}
.dontshow { display:none; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.first_upper::first-letter { text-transform: uppercase; }
.pointer { cursor:pointer; }
.top5 { margin-top:5px; }
.top10 { margin-top:10px; }
.top20 { margin-top:20px; }
.top50 { margin-top:50px; }
.top100 { margin-top:100px; }
.top160 { margin-top:160px; }

.h-05em { height: 0.5em; }
.h-075em { height: 0.75em; }
.h-1em { height: 1em; }
.h-2em { height: 2em; }
.h-3em { height: 3em; }
.h-4em { height: 4em; }
.h-5em { height: 5em; }
.h-6em { height: 6em; }
.h-7em { height: 7em; }

.flu::first-letter {
    text-transform: uppercase;
}

a {
    color: var(--red);
    font-weight: 500;
}
a:hover {
    color: var(--orange);
}

.btn {
    border-radius: 8px;
    font-weight: 600;
}

/* sticky footer fix */
html, body {
    height: 100%;
    margin: 0;
    font-size: 18px;
}
.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* všechno kromě footeru zabere prostor */
main { flex: 1; }
/* footer zůstane dole */
#footer { flex-shrink: 0; }

body {
    background-color:var(--white);
    font-family: 'Signika', sans-serif;
    line-height: 1.6;
    color: var(--dark1);
}

main.main-pad {
    padding-right:0;
    padding-top: 120px;
    padding-bottom: 80px;
    padding-left: clamp(2rem, 10vw, 24em);
}

#navbarNav .container {
    padding-right:0;
}
#navbar_main {
    font-size:120%;
    letter-spacing: -0.25px;
    min-height:80px !important;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(6px);
}

.navbar-nav a.nav-link {
    margin: 0 0.5em;
    padding: 0.5em 0.5em 0.1em 0.5em;
    border-bottom: 3px solid transparent;
    transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    color: var(--dark);
    font-weight: 500;
    text-decoration: none;
}
.navbar-nav a.nav-link:hover {
    color: var(--red);
    border-bottom: 2px solid var(--red);
}
.navbar-nav a.nav-link.active {
    color: var(--red);
    font-weight: 600;
    border-bottom: 3px solid var(--red);
}

.navbar-nav a.nav-link.home,
.navbar-nav a.nav-link.big {
    padding:0;
    margin:0;
    font-size:160%;
    color: var(--dark);
    border-bottom: 3px solid transparent;
    text-decoration: none;
    transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
}
.navbar-nav a.nav-link.home { margin-right: 0.5em; }
.navbar-nav a.nav-link.big { margin-left: 0.5em; margin-right: 0.5em; }
.navbar-nav a.nav-link.home:hover,
.navbar-nav a.nav-link.big:hover { color: var(--red); }
.navbar-nav a.nav-link.home.active,
.navbar-nav a.nav-link.big.active { color: var(--red); }

/* HTML: <div class="loader"></div> */
/*.loader {*/
/*    width: 50px;*/
/*    padding: 8px;*/
/*    aspect-ratio: 1;*/
/*    border-radius: 50%;*/
/*    background: var(--blue1);*/
/*    --_m:*/
/*            conic-gradient(#0000 10%,#000),*/
/*            linear-gradient(#000 0 0) content-box;*/
/*    -webkit-mask: var(--_m);*/
/*    mask: var(--_m);*/
/*    -webkit-mask-composite: source-out;*/
/*    mask-composite: subtract;*/
/*    animation: l3 1s infinite linear;*/
/*}*/
/*@keyframes l3 {to{transform: rotate(1turn)}}*/

input.error,
textarea.error,
.form-control.error {
    border-color:#dd0000;
    background:#dd9999;
}

h1 { margin-top: 1em; }
h2 { margin-top: 1.5em; }
h3 { margin-top: 1.5em; }
h4 { margin-top: 1.5em; }

h1 { font-size: clamp(26px, 4vw, 36px); }
h2 { font-size: clamp(24px, 3vw, 28px); }
h3 { font-size: clamp(20px, 2.5vw, 22px); }
h1 { color: var(--red); }
h2, h3 { color: var(--dark); }
h4, h5 { color: var(--dark1); }
.highlight, h2.section-title { color: var(--orange); }

h1, .h1 {
    font-weight: 700;
    letter-spacing: 0.5px;
}

h2, .h2 { font-weight: 600; letter-spacing: 0.4px; }
h3, .h3 { font-weight: 600; }
h4, .h4 { font-weight: 500; font-size: 18px; }
h5, .h5 { font-weight: 500;  font-size: 16px; }

body h1:first-child { margin-top: 0 !important; }

#footer {
    background-image:url('../img/field_corner.jpeg');
    background-size: cover;
    background-position: bottom;
    color:#fff;
    padding:0.5em 0 0 0;
    margin:0;
    overflow:hidden;
    min-height:400px !important;
}
#footer a {
    padding: 0.1em 0.5em;
    border-radius: 0.2em;
    color: var(--orange);
}
#footer a:hover {
    color: var(--red);
    background: var(--white);
}
#footer_links a {
    font-size:70%;
    padding: 0.5em 1em;
    margin:0.25em;
    color: var(--white);
    /*background:url('../img/transparent_white50.png');*/
    background: var(--dark1);
    border-radius: 3px;
    text-decoration: none;
}
#footer_links a:first-child { margin-left:0; }
#footer_links a:hover {
    color: var(--red);
    background:var(--white);
}
#footer_text h1,
#footer_text h2,
#footer_text h3,
#footer_text h4,
#footer_text h5,
#footer_text h6 {
    color: var(--orange);
    padding:0;
    margin:0;
}
#footer #footer-alert {
    padding:0.25em 0.5em;
    border-radius: 0.25em;
    color:var(--white);
    background:var(--red);
}
#share-links a {
    color:#fff;
    display:inline-block;
    clear:both;
    padding:0.25em 0.5em 0.25em 0.5em;
    cursor:pointer;
    text-decoration: none !important;
    font-size:200%;
}
/*#share-links a:first-child { padding-left:0; }*/
#share-links a:hover { color: var(--red); }
#share-links a span { display:none; }


.news {
    padding:0.75em 1em;
    margin:1em 0 0 0;
    border:2px solid var(--red);
    border-radius: 12px;
    font-size:100%;
    font-weight: normal;
}
.news h2 {
    padding:0 0 0.5em 0;
    margin:0;
    color:var(--red);
}
.news p {
    padding-bottom:0;
    margin-bottom:0;
}
.introduction {
    /*padding:1em 1.5em;*/
    min-height:200px;
    padding:2em 0 0 0;
    margin:0;
}
.introduction h1,
.introduction h2,
.introduction h3,
.introduction h4 {
    margin:0;
    padding:0.25em 0 0.5em 0;
}
.introduction a { text-transform: uppercase; }
.introduction ul li { line-height:2em; }


.current-tips {
    padding:0;
    margin:0;
}
.current-tips h1,
.current-tips h2,
.current-tips h3,
.current-tips h4 {
    margin:0;
    padding:0.25em 0 0.5em 0;
}
/*.current-tips a {*/
/*    text-transform: uppercase;*/
/*}*/


#modal-cookies {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    left:0;
    top:0;
    background: url("../img/transparent_black40.png");
    text-align: center;
    z-index: 1050;
}
#modal-cookies-body {
    position:relative;
    margin: 10% auto;
    width:30%;
    max-width:800px;
    background: #fff;
    border:1px solid #888;
    border-radius: 6px;
    padding:2em;
    text-align: left;
}
#modal-cookie-closer {
    background: #1e81b0;
    border:1px solid #0d70a0;
    color:#fff;
    padding:0.5em;
    cursor:pointer;
    border-radius: 6px;
}
#modal-cookie-closer:hover {
    background: #2f92c1;
    cursor: pointer;
    color:#fff;
}
#modal-cookies-body p {
    display:block;
    float:left;
    text-align: left;
    clear:both;
}


#logo {
    display:block;
    position:fixed;
    left:1.5em;
    top:1em;
    z-index: 1050;
    width:480px;
    height:110px;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out ;
    -ms-transition: all 500ms ease-in-out ;
    -o-transition: all 500ms ease-in-out ;
    transition: all 500ms ease-in-out ;
}
#logo.small {
    width:300px !important;
}

.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.container { position: relative; }
.modal.fade,
.nodal.show { z-index: 1050 !important; }
.modal-dialog { max-width: 600px !important; }


.content_text p {
    line-height: 1.7;
}
.content_text p img.left {
    margin: 0 1em 1em 0;
}
.content_text p img.right {
    margin: 0 0 1em 1em;
}
.content_text p img.left,
.content_text p img.right {
    max-height:300px !important;
}
.content_text h1,
.content_text h2,
.content_text h3,
.content_text h4 {
    clear: both;
    margin:0 0 0.5em 0;
    padding-top: 0.5em;
}


@media only screen and (max-width: 1600px) {
    .navbar-nav.left { padding-left:50px; }
    #logo {
        width:300px !important;
        height:46px !important;
    }
}

@media only screen and (max-width: 1400px) {
    .navbar-nav.left { padding-left:70px; }
    .navbar-nav a.nav-link,
    .navbar-nav a.nav-link.home,
    .navbar-nav a.nav-link.big {
        margin: 0 0.25em;
        padding-left: 0.25em;
        padding-right: 0.25em;
    }
}

@media only screen and (max-width: 1200px) {
    .navbar-nav.left { padding-left:80px; }
}

@media only screen and (max-width: 1024px) {
    .navbar-nav a.nav-link,
    .navbar-nav a.nav-link.home,
    .navbar-nav a.nav-link.big {
        font-size: 90%;
        text-align: center;
    }
    .navbar-nav a.nav-link.big,
    .navbar-nav a.nav-link.home {
        padding:0 0.5em;
        margin:0;
        margin-top:0.25em;
    }
    .navbar-nav a.nav-link.home {
        margin-top:0.1em;
    }
    .container { max-width:94% !important; }
    #modal-cookies-body {
        position: relative;
        margin: 1% auto;
        width: auto;
        max-width: 98%;
        font-size:80%;
    }
}

@media only screen and (max-width: 880px) {
    #logo { display:none; }
    .sidebar { display:none; }
    .left, .right { float: none !important; }
    .introduction { margin:0 0 1.5em 0; }
    .footer_text {
        width:100%;
        padding:0.5em 1em;
    }
}

@media only screen and (max-width: 768px) {
    .navbar-nav a.nav-link,
    .navbar-nav a.nav-link.home,
    .navbar-nav a.nav-link.big { padding: 0.75em 0;
        border-bottom: none;
        font-size: 110%;
    }
    #footer_links { float:left; width:100% !important; text-align: center; margin-bottom:2rem;}
    #footer_copy { float:left !important; width:100% !important; text-align: center; margin-bottom:0.5rem;}
    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    h3 { font-size: 18px; }
    html, body { font-size: 15px; }
    main.main-pad {
        padding-top: 100px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .introduction, .current-tips { padding: 1em; }
    .navbar-collapse {
        background: #fff;
        padding: 1em;
        border-radius: 10px;
        margin-top: 10px;
    }
}
