@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');
:root {
    --black-color: #000;
}
html, body {overscroll-behavior: contain;}
body {
    font-family: "Open Sans", "Helvetica Neue", sans-serif;
    background:#fefefe;
    font-weight:400
}
#logo img {max-width: 280px;position:relative;top:5px;left:0}

.slideshow-container {padding:0;background:#fefefe}
.slideshow-container img {width: 100%}

.slideshow-container-article {padding:0;background:#fefefe}
.slideshow-container-article img {width: 100%}

.container.slider-block h1 {position: absolute; font-family: "Acme", sans-serif;font-weight: 400;font-style: normal;}
.container.slider-block h1 {color:#fff;font-size:3.1rem;margin:12vw 0 0 0.4rem}

.container.slider-block-index div {position: absolute;margin:10.5vw 0 0 0.4rem}
.container.slider-block-index div h1 {color:#fff;font-size:2.15rem;text-shadow: 2px 2px 3px #111;margin-bottom: 1.0rem;}
.container.slider-block-index div p {color:#fff;font-size:1.15rem;text-shadow: 2px 2px 3px #111;max-width:27rem;}
.container.slider-block-index div .btn {text-shadow: 2px 2px 3px #111;background:#ee8c36;border-radius:3px;font-size:1.4rem;padding:0.7rem 1.4rem !important}

.nav-vice {cursor:pointer}
.nav-vice span {font-size:1.25rem;position:relative;top:-1px;left:0}

.container {
    max-width: 1200px;
}
.container-article {
    min-height: 54vh
}
.container-article ul li {margin:0.2em 0}
.container-article ul {margin-bottom: 1rem;margin-top:-0.5rem}
.fa-envelope-open {color: var(--black-color)}

p {font-size: 1.1rem;color:#444;line-height:1.9rem}

.header {overscroll-behavior: contain;background-color: rgba(33, 46, 55, 0.4) !important;width:100%;top:0;left:0;position:fixed;height:84px;z-index:1001;}
.header.scrolled {
    background-color: rgba(33, 46, 55, 0.95) !important;
    transition: background-color 200ms linear;
}
.header a {color:#888;text-decoration: none;}
.header a.link {color:#aaa;text-decoration: none;font-size: 1.3rem;margin-right: 10px;}
.header a:hover, .header a.link:hover {color:#ffba33}
.header .lang-icon {border:1px solid #222;margin-top:29px;margin-right: 0}
.header .fb-icon {margin-top:25px;margin-right: 5px}

b, strong {color:#303030;font-weight:600 !important}
.h1, h1 { font-size: 2.1rem;margin-bottom: 2.1rem;color: #111;font-weight: 600}
.h2, h2 { font-size: 1.7rem;margin-bottom: 1.4rem;color: #111;font-weight: 600;text-transform: uppercase;}
.h3, h3 { font-size: 1.5rem;margin-bottom: 1.2rem;font-weight: 600; line-height: 1.7rem}
.h4, h4 { font-size: 1.4rem;margin-bottom: 0.4rem;font-weight: bold}

.article-line {height:2px;border:0;background:#ffb87a;width:15rem;margin:0.6rem auto 2rem auto}
.mb-5 {margin-bottom: 2.5rem !important;}

h1 strong {font-weight: normal}
a {color: var(--black-color);}
a:hover {color: #111}
.margin-bottom-custom-1 {margin-bottom: 3.0rem}
.padding-left-custom-1 {padding-left: 1.2rem}
.btn-left-margin-1 {margin-left: 1rem;margin-top: 0.6rem;}

ul li {list-style-type: square}

.text-danger {color:#cc2525 !important}

.container-fluid {
    padding-right: 1px;
    padding-left: 1px;
}
.flex-menu {
    display: flex;
    justify-content: space-between;
}
.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-top: 1.8rem;
}
ul#navbar li {list-style-type: none;display: inline-block;}
#navbar .nav-link {
    font-size: 1.05rem;
    color:#fff;
    font-weight: 600;
    padding-left: 1.5rem;
    padding-right: 0.2rem;
}
#navbar .nav-link:hover {
    color: #ffc28e;
    transition: ease-in 200ms;
}
.bg-light {background-image: linear-gradient(to top, #ccc 0%, #f6f6f6 50%)}

footer {background: #2c3941;padding: 1.6rem 0 1.6rem 0;margin-top:0;color:#798b96;font-size: 0.85rem;}
footer p, footer div {color:#798b96;font-size: 0.85rem;line-height: 1.7rem}
footer p strong, footer p b {color:#eee}
footer .footer-hr {color:#798b96 !important}

.contact-padding-left {padding-left: 3.3rem}
.contact-padding-left p {margin-bottom: 1.8rem}

#zahlavi {background:#ddd;border-top:1px solid #eaedf1;border-bottom:1px solid #eaedf1}

ul.pagination {margin-top: 1rem}
ul.pagination li {list-style-type: none}
.page-item.active .page-link {
    color: #fff;
    background-color: #1b1b1b;
    border-color: #363636;
}
.page-item a.page-link {
    color: #888;
}

.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:#f9ebdd}
.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.6%;height:164px;overflow:hidden;margin:0 10px 14px 6px;text-align:center
}

.imagefotogalerie img { 
    object-fit: cover;
    width:100%;
    height:164px;
    border: 1px solid #aaadc7;
    border-radius: 6px;
}

.input-max-length {max-width:22rem}
.textarea-max-height {max-height:9.5rem}
.mobile-show {display: none}
label b {font-size: 1.2rem;color:#bd1c1c}
sup {font-size: 1.3rem;color:#bd1c1c;position:relative;top:-2px;left:0}
.error {font-size: 0.95rem;color:#bd1c1c}
.form-label {margin-bottom: 0;margin-top: 0.5rem;}

.btn-primary, .btn:hover, .btn-secondary {
    color: #fff;
    font-size: larger;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 400;
    padding: 0.7rem 1.1rem !important;
    background-color: #2c3941;
    border-color: #3d525f;
}
.btn-secondary {
    color: #999;
    font-size: larger;
    font-weight: bold;
    background-color: #eee;
    border-color: #ddd;
}
.btn:hover {
    color: #fff;
    background-color: #ff983e;
    border-color: #e0791e;
    transition: ease-in-out 0.5s;
}
.form-control, .form-check-input {
    border-color: #99a !important;
}
.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #445 !important;
    outline: 0;
    box-shadow: 0 0 0 0;
}

.karta-grid {
    display: flex;
    width: 1280px;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px
}
.karta-portfolio {
    background: transparent !important;
    display: inline-block;
    margin-bottom: 0 !important;
    border: 0;
}
.karta-portfolio img {
    object-fit: cover;
    max-width: 100% !important;
}
.karta-portfolio, .karta-portfolio img {
    width: 283px;
    height: 330px;
}
.karta {
    background:#fff;
    margin-bottom: 2rem;
    border: 0;
    max-width: 370px;
    min-width: 300px;
}
.karta a {text-decoration: none;display:block}
.karta:hover {
    box-shadow: 0 0 10px 3px rgba(87, 116, 157, 0.2);
    transition: .25s;
}
.karta img {
    object-fit: cover;
    max-width: 95%;
    vertical-align: middle;
    max-height: 520px;
}
.karta .img-container {
    height: 520px;
    border-bottom: 1px solid #eee;
    text-align: center
}
.karta .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.karta h3 {
    color: var(--black-color);
    font-weight: 600;
    font-size: 1.55rem;
    padding:1.9rem 2rem 0.1rem 2rem;
}
.karta p {
    padding:0 2rem 1.6rem 2rem;
}
.karta-uvod p {
    padding-bottom: 0.4rem;
}

.karta p.vypis-eshop {
    padding:0 2rem 0.2rem 2rem;
}

.eshop-detail-foto {
    padding-right: 1rem;
}
.font-price {
    font-size: 1.5rem;
}

.svg-zpet {width:16px;margin-right:8px;position:relative;left:0;top:-2px}
.svg-img  {width:20px;position:relative;left:0;top:-3px}
.svg-img:hover {filter: sepia(60%) saturate(5);}

.greybackground {background-color: #eaeaea;}
.greybackground-padding {padding: 0.1rem 1.0rem 1.6rem 1.1rem;}

.portfolio-boxes {
    margin: 2rem 0 0 0;
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
    gap: 1.8rem;
    align-items: center;
    align-content: space-between;
    justify-content: center;
}
.portfolio-box {
    min-width: 10rem;
    max-width: 10.7rem;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
}
.portfolio-box a.link {
    color:#333;text-decoration: none;font-size: 1.0rem;display: block;margin-top:0.5rem;padding: 0.8rem 0 1.0rem 0;
    border-bottom: 2px solid #fff
}
.portfolio-box a:hover, .portfolio-box a.link.active {color:#e67f43;border-bottom: 2px solid #ff995e}

.product-max-height {
    position: relative;
    left: 0;
    top: 7px;
    max-height: 2.7em;
    padding: 0;
    line-height: 1.4rem;
    overflow: hidden;
    display: block;
}
.detail-product-lineheight {line-height: 1.4rem;}
.text-news {font-size: 0.95rem;line-height:1.6rem;margin-bottom:0}
.datum-news {font-size: 0.9rem;margin-bottom:0;position:relative;left:0;top:-1px;color:#7e5619;}

.kurzy-uvodni-text {border-radius: 4px;border:1px solid #ccc;background:#f2f2f3;padding:1rem 1.2rem 0 1.2rem}
.kurzy-description h5, .kurzy-description h5 a {font-weight: bold;font-size: 1.25rem;}
.kurzy-description .buttons-to-right {text-align: right;margin-right:0.4rem;margin-top: 0.6rem;}
.kurzy-description .content, .kurzy-description .content p {line-height:1.6rem !important;font-size:1rem}
.kurzy-description .content {min-height:106px}
.kurzy-description .content-height {min-height:106px;max-height:106px;text-overflow:ellipsis;overflow:hidden;opacity:0.8}
.kurzy-description .content-height-full {max-height:100%;opacity:1.0}

.btn-primary-small, .btn-primary-small:hover {
    color: #fff;
    font-size: 0.95rem;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 400;
    padding: 0.5rem 1rem !important;
    background-color: #333;
    border-color: #555;
}
.btn-primary-small-grey, .btn-primary-small-grey:hover {
    color: #111;
    font-size: 0.95rem;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 400;
    padding: 0.5rem 1rem !important;
    background-color: #eee;
    border-color: #555;
}
.btn-primary-small:hover {
    background-color: #ff983e;
    border-color: #555;
    color: #111;
}
.btn-primary-small-grey:hover {
    background-color: #ff983e;
    border-color: #aaa;
    color: #000;
}
.order-first {
    order: 1 !important;
}

/* WYSIWYG styles */

img.note-float-left {margin-right:0.8rem}
img.note-float-right {margin-left:0.8rem}

/* 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, #1e2020 0%, #272727 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: #dedede;text-decoration: none;}
.sidenav a:hover {
color: #fff;
}

.sidenav a.link {color:#aaa;text-decoration: none;font-size: 1.3rem;margin-right: 12px;}
.sidenav a:hover, .sidenav a.link:hover {color:var(--black-color)}

.sidenav .closebtn, .sidenav .closebtn:hover {
    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: 1280px) {
    #navbar .nav-link {
        font-size: 0.95rem;
        position:relative;
        top:3px;
        left:0
    }
    #logo img {max-width: 250px}
    #menu-vice a {font-size:0.95rem} 
    .imagefotogalerie {
        width:18.8%;height:154px;overflow:hidden;margin:0 10px 10px 0;text-align:center
    }   
    .imagefotogalerie img { 
        height:154px
    }
    .container.slider-block-index div {position: absolute;margin:9.5vw 0 0 0.4rem}
}

@media (max-width: 1080px) {
    .container.slider-block h1 {color:#fff;font-size:1.2rem;margin:3.7rem 0 0 0.1rem;opacity:0.8}
    #logo {position:absolute;z-index:1200;margin:-3px 0 0 8px}
    #logo img {width:220px}
    .mobile-hidden {display:none}
    .mobile-show {display: block}
    ul.menu-mobile li .nav-link {font-size: 1.2rem;padding-top:0.2rem}
    ul.menu-mobile li .nav-link:hover {color:#fff}
	button.navbar-toggler {
        color:#fff;
        border: 1px solid #444;
        border-radius:3px;
        position: absolute;
        font-weight: 800;
        font-size: 1.1rem;
        background: #222;
        right: 14px;
        opacity: 0.9;
        top: 14px;
        padding: 9px 14px 8px 16px;
        z-index: 1900
    }     
    .lang-icon {border:1px solid #222;margin-top:0;margin-right:0.6rem}
	p {font-size: 0.95rem;color:#333;line-height:1.6rem}
    .h1, h1 { font-size: 1.8rem;margin: 0.5rem 0 0.5rem 0}
    .h2, h2 { font-size: 1.3rem;margin: 0.5rem 0 0.8rem 0}
    .h3, h3 { font-size: 1.25rem}
    .h4, h4 { font-size: 1.1rem}
	.container {
    	width: 100%;
    	max-width: none;
  	}
    .mt-5 {margin-top: 1.5rem !important}
  	#txt-uvod p {padding-right:0}
    footer {font-size: 0.8rem;}
    footer a {color:#ddd}
    .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:49%;height:280px;overflow:hidden;margin:2px;text-align:center
    }    
    .imagefotogalerie img { 
        height:280px
    }
    .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;
    }
    .margin-bottom-custom-1 {margin-bottom: 0}
    .padding-left-custom-1 {padding-left: 1.0rem}
}

@media (max-width: 576px) {
    .order-first {
        order: -1 !important;
    }
    .mobile-pt-4 {
        padding-top: 1.5rem
    }
    .h1, h1 { font-size: 1.5rem;margin: 0.2rem 0 0.7rem 0;line-height: 2.0rem !important;}
    .article-line {margin:0.6rem auto 0.6rem auto}
    .greybackground-padding {padding: 1.3rem 0.5rem 1.6rem 0.5rem;}
    .slideshow-container {height: 140px}
    .imagefotogalerie {
        width:99%;height:230px;overflow:hidden;margin:2px;text-align:center
    }    
    .imagefotogalerie img { 
        height:230px
    }
    .contact-padding-left {padding-left: 1rem}
    .contact-padding-left p {margin-bottom: 1.1rem}
    .img-fluid {max-width: 99%;}
    footer {padding: 1.4rem 1rem 0.7rem 1rem}
    footer p {font-size: 0.8rem;line-height: 1.4rem}
}