@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap);
:root {
    --lightblue-color: #2268C4;
}
body {
    font-family: "Quicksand", "Helvetica Neue", sans-serif;
    background:#fefefe;
    font-weight:500
}
.main-background, .article-background {
    min-height: 47vw;
    background: url('../img/uvod.jpg') no-repeat top center;
    background-size: auto;
    background-size: cover;
    max-width: 1600px;
}

.main-background div {
    padding-top: 6vw;
    padding-left: 2rem;
}
.main-background h1, .article-background h1 {
    font-size: 4.4vw;
    font-weight: 700;
    margin-bottom: 1vw;
    text-shadow: #111 2px 2px 3px;
    color:#fff;
}
.article-background {
    background: url('../img/zahlavi.jpg') no-repeat top center;
    background-size: auto;
    background-size: cover;
    max-width: 100%;
}

.article-background {
    min-height: 17vw;
}

.article-background div {
    padding-top: 7vw;
    padding-left: 2rem;
}
.article-background h1 {
    font-size: 4.0vw;
    margin-top: 10px;
}
.main-background h2 p {
    font-size: 2.4vw;
    line-height: 3.2vw;
    text-shadow: #111 2px 2px 3px;
    color:#fff
}
.nav-vice {cursor:pointer}
.nav-vice span {font-size:1.25rem;position:relative;top:-1px;left:0}

#menu-vice {width:200px;padding:0.5rem;display: none;position:absolute;margin-left:-138px;background:rgba(10, 10, 10, 0.9)}
#menu-vice li {margin:5px 8px;padding:0;display: block !important}
#menu-vice a {font-size:1.05rem;color:#fff;text-decoration: none;display: block !important;width:100%}

.container-article ul li {margin:0.2em 0}
.container-article ul {margin-bottom: 1rem;margin-top:-0.5rem}
.container-article img { width: 100%;height: auto;}
.container-news img { width: 65% !important;height: auto;}

p {font-size: 1.1rem;color:#555;line-height:1.8rem}
#header {position:absolute;width:100%;background:rgba(16, 168, 228, 0.8);padding-bottom:4px}
#header-article {position:absolute;width:100%;background:#2268c4;min-height:52px}
.header {background-color:#fff}
.h1, h1 { font-size: 3.1rem;margin: 1.8rem 0 2.2rem 0;color: #333}
b, strong {color:#303030;font-weight:700 !important}
.h2, h2 { font-size: 1.9rem;margin-bottom: 1.1rem;color:#1192c5 }
.h3, h3 { font-size: 1.5rem;margin-bottom: 0.5rem }
.h4, h4 { font-size: 1.3rem;margin-bottom: 0.9rem }

.mb-5 {margin-bottom: 2.5rem !important;}
h1 strong {font-weight: normal}
a {color: var(--lightblue-color);}
a:hover {color: #111}
.text-danger {color:#cc2525 !important}
.container {
    max-width: 1180px;
}

.container-fluid {
    padding-right: 1px;
    padding-left: 1px;
}
.flex-menu {
    display: flex;
    justify-content: space-between;
}
#logo {font-size: 1.65rem;text-decoration: none;white-space:nowrap;color:#f2f2f2;padding-left:0.3rem;position: absolute;margin:-10px 0 0 0}
.logo-article {padding-left: 0 !important;position: relative;top:2px !important;left:0}
.logo-img {max-width:165px;margin-left:1rem;position:relative;top:-3px;left:0;opacity:0.9}
#navbar {
    padding: 0.7rem 0 0 0;
    background-color: transparent !important;
}
ul#navbar li {list-style-type: none;display: inline-block;}
#navbar .nav-link {
    font-size: 1.1rem;
    color:#fff;
    text-shadow: #111 2px 2px 4px;
    padding-right: 1.4rem;
    padding-left: 0;
}
.bg-light {background-image: linear-gradient(to top, #ccc 0%, #f6f6f6 50%)}

.btn-primary {background:#0b243b;border-color: #0b243b}

footer {background: #fff;padding:1rem;margin-top:0;line-height: 2rem;color:#666;border-top: 2px solid #dadeda;}
footer a {color: var(--lightblue-color);}
footer a:hover { color: #888; }

#contact {background:#73c1e6;color:#fff;text-shadow: #456 1px 2px 2px}
#contact a {color:#fff}
#contact a:hover {text-decoration:none}
#contact div.row {
    margin-right: 0;
    margin-left: 0;
    padding: 6px 0;
}
#zahlavi {background:#ddd;border-top:1px solid #eaedf1;border-bottom:1px solid #eaedf1}

svg.header-svg-telephone {width:16px;position:relative;top:-2px;left:-2px;fill:#6ab4e8}
svg.header-svg {width:19px;position:relative;top:-1px;left:-3px;fill:#6ab4e8}

.page-item.active .page-link {
    color: #fff;
    background-color: #1748a8;
    border-color: #1748a8;
}

.list-group-item-primary {
    background-color: #e7f5fb;
}	
.list-group-item-primary:hover {
    background-color: #ceedfc !important;
}	
.list-group-item {
    padding: .45rem 1.0rem;
}
.originalPadding .list-group-item {
    padding: .50rem 1.0rem .55rem 1.0rem;
    cursor: pointer;
}

.input-group {max-width:140px !important;margin-bottom:1.2rem}
.grey {background:#eee}
.text-grey {color:#777}
.text-grey-small {color:#777;font-size:0.7rem;position:relative;left:8px;top:-1px}

.form-control-max-width {max-width:250px !important}

.nav-tabs .nav-link.active {
	background: linear-gradient(to top, #ffffff 0%, #cbebff 80%, #a1dbff 100%);
}

label {margin-bottom:.25rem;margin-left:.1rem}
label span {color:#b10;font-size:1.5rem;position:absolute;margin:-4px 0 0 5px} 
.form-max-width {max-width:590px}
form h5 {margin-bottom:15px}

hr {
	background: #8f8f8f;
	color: #8f8f8f;
	height: 1px;
	border: 0;
}
.article-img-left {max-width:440px;margin-right: 2.6rem;margin-bottom:2rem;margin-top: 0.3rem;}
.article-img-right {max-width:360px;margin-left: 1.6rem;}
.text-big {font-size:1.1rem;color:#655}
dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0;
}
ul li {font-size:1rem;margin-bottom: 0.7rem;}

.imagefotogalerie {
    width:18.8%;height:164px;overflow:hidden;margin:0 10px 10px 0;text-align:center
}

.map-responsive {
    overflow:hidden;
    padding-bottom:30%;
    position:relative;
    height:0;
    border: 1px solid #edd
}
.map-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
.input-max-length {max-width:22rem}
.textarea-max-height {min-height:11.4rem}
.mobile-show {display: none}
label b {font-size: 1.2rem;color:#cc2525}
.error {font-size: 1.0rem;color:#cc2525}
.form-label {margin-bottom: 0;margin-top: 0.5rem;}

.svg-zpet {width:16px;margin-right:8px;position:relative;left:0;top:-2px}
.svg-udalost {width:16px;margin-right:10px;position:relative;left:0;top:-2px;display: inline-block;}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1990; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-image: linear-gradient(to right, rgba(16, 168, 228, 1.0) 0%, rgb(9, 150, 206) 80%);
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  }
  .sidenav li {list-style-type: none;}
  .sidenav a {color: #fff;}
  .sidenav a:hover {
    color: #fff;
  }
  
  /* Position and style the close button (top right corner) */
  .sidenav .closebtn {
    position: absolute;
    top: -2px;
    right: 10px;
    font-size: 38px;
    color:rgb(241, 252, 255);
    margin-left: 50px;
    text-decoration: none;
  }

button.navbar-toggler {
    position: absolute;
    right: 10px;
    top: -100px;
} 

@media (max-width: 1450px) {
    .main-background div {
        padding-top: 8vw;
    } 
    .article-background div {
        padding-top: 6.5vw;
    } 
}


@media (max-width: 1200px) {
    #navbar .nav-link {
        font-size: 1.1rem;
    }
    #navbar {
        padding: 0.7rem 0 0 0;
    }   
    #menu-vice a {font-size:0.95rem} 
    .imagefotogalerie {
        width:18.8%;height:154px;overflow:hidden;margin:0 10px 10px 0;text-align:center
    }   
}

@media (max-width: 1024px) {
    #navbar .nav-link {
        font-size: 0.95rem;
    }
    #navbar {
        padding: 0.7rem 0 0 0;
    }
    .logo-img {max-width:150px;margin-left:0.8rem} 
    .imagefotogalerie {
        width:18.8%;height:128px;overflow:hidden;margin:0 10px 10px 0;text-align:center
    } 
}

@media (max-width: 900px) {
    .container-article {
        padding:0 1rem;
    }
    #navbar .nav-link {
        font-size: 0.9rem;
    }
    .logo-img {max-width:120px;margin-left:0.8rem}
}

@media (max-width: 800px) {
    #header {position:absolute;width:100%;background:rgba(10, 10, 10, 0.0);padding-bottom:12px}
    .mobile-hidden {display:none}
    .mobile-show {display: block}
    ul.menu-mobile li .nav-link {font-size: 1.1rem;}
    .container-news img { width: 100% !important;height: auto;}
	button.navbar-toggler {
        color:#eee;
        border: 1px solid #444;
        border-radius:3px;
        position: absolute;
        font-size: 1.1rem;
        background: #222;
        right: 10px;
        opacity: 0.9;
        top: 9px;
        padding: 7px 10px;
        z-index: 1900
    }     
    .logo-img {position:relative;top:15px;left:-13px;max-width:155px}
	p {font-size: 1.0rem;color:#333;line-height:1.5rem}
    .h1, h1 { font-size: 1.5rem;margin: 1rem 0 1.0rem 0}
    .h2, h2 { font-size: 1.25rem }
    .h3, h3 { font-size: 1.15rem}
    .h4, h4 { font-size: 1.1rem}
	#navbar {
        display: none
	}
	.container {
    	width: 100%;
    	max-width: none;
  	}
  	#txt-uvod p {padding-right:0}
    .container-article.pt-5 {padding-top: 1.4rem !important;}
    .main-background, .article-background {
        min-height: 46vw;
        background: url('../img/uvod.jpg') no-repeat top center;
        background-size: auto;
        background-size: cover;
    }
    .article-background {
        min-height: 14vw;
        background: url('../img/zahlavi.jpg') no-repeat top center;
        background-size: auto;
        background-size: cover;
    }    
    .main-background div, .article-background div {
       padding-top: 9vw;
       padding-left: 1rem;
       padding-bottom: 3.3vw;
    }   
    .main-background h1, .article-background h1 {
        position: absolute;
        top: -1px;
        left: 14px;
        font-size: 1.65rem;
        font-weight: 500;
        text-shadow: #111 2px 2px 3px;
        color:#fff;
    }
    .main-background h2 p {
        margin-top: 5vw;
        font-size: 1.1rem;
        margin-left: -5px;
        line-height: 1.6rem;
        text-shadow: rgb(0, 0, 0) 2px 2px 3px;
        color:rgb(250, 249, 243);
    }       
    #logo {display: none}
    footer {font-size: 0.8rem;}
    footer a {color:#111}
    .mb-5 {margin-bottom: 1.6rem !important;}
    .article-img-right, .article-img-left {max-width:99%;margin-right: 0;margin-bottom: 0.9rem; margin-top: 0.2rem;}
    .imagefotogalerie {
        width:99%;height:220px;overflow:hidden;margin:2px;text-align:center
    }    
    .text-big {
        font-size: 0.85rem;
    }
    .contacts {
        position: absolute;
        right: 10px;
        top: 23px;
        line-height:1.8rem
    }
    svg.header-svg-telephone {width:11px;position:relative;top:-2px;left:-1px;fill:#f05454}
    svg.header-svg {width:13px;position:relative;top:-1px;left:-2px;fill:#f05454}
    ul {
        padding-left:0.7rem !important;
    }
    ul li {
        font-size: 0.9rem;
        margin-bottom: 0.6rem;
    }
    .map-responsive {
        padding-bottom:60%;
    }
}