/* lopuchovska.cz — modern minimal CSS, no Bootstrap */

/* reset */
*, *::before, *::after { box-sizing: border-box }
body { margin: 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.43; color: #333; background: #2f3133 }
html { font-size: 62.5% }
figure, footer, header, nav { display: block }
figure { margin: 0 }
img { border: 0; vertical-align: middle; max-width: 100% }
a { color: #428bca; text-decoration: none }
a:focus, a:hover { color: #2a6496; text-decoration: underline }
a:focus { outline: thin dotted #333; outline-offset: -2px }
b, strong { font-weight: 700 }
hr { height: 0; border: 0; border-top: 1px solid #eee; margin: 20px 0 }
p { font-family: Arial, sans-serif; font-size: 15px; line-height: 22px; color: #000; padding: 0; margin: 0 0 11px }
h1, h2 { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 500; line-height: 1.1; margin: 20px 0 10px }
h1 { font-size: 36px }
h2 { font-family: Georgia, serif; font-size: 26px; line-height: 28px; color: #474848; margin: 0; padding: 35px 0 }
ul { margin-top: 0; margin-bottom: 10px }
ul ul { margin-bottom: 0 }
select { text-transform: none }

/* print */
@media print {
  * { text-shadow: none !important; color: #000 !important; background: transparent !important; box-shadow: none !important }
  a, a:visited { text-decoration: underline }
  a[href]::after { content: " (" attr(href) ")" }
  img { page-break-inside: avoid; max-width: 100% !important }
  @page { margin: 2cm .5cm }
  h2, p { orphans: 3; widows: 3 }
  h2 { page-break-after: avoid }
}

/* layout */
.container { max-width: 1170px; margin: 0 auto; padding: 0 15px }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px }
.col-md-2, .col-md-4, .col-md-6, .col-md-8, .col-md-12 {
  padding: 0 15px; width: 100%
}
@media (min-width: 992px) {
  .col-md-2 { width: 16.667% }
  .col-md-4 { width: 33.333% }
  .col-md-6 { width: 50% }
  .col-md-8 { width: 66.667% }
}
.kontakt-row { justify-content: center }
.row_6 { padding: 30px 0 72px; background: #fff }
.row_9 { padding: 31px 0 90px; background: #fff }

/* header */
header { background: #2f3133; text-align: center }
.navbar-brand_ { display: block; text-align: center; padding: 0; margin: 68px auto 60px }
.navbar-brand_ img { max-width: 100% }
.menuheader { background: #545658 }
.tm_navbar { position: relative; padding: 26px 0 22px; margin: 0; background: none; border: none }
.tm_navbar .nav { display: inline-flex; flex-wrap: nowrap; justify-content: center; padding: 0; margin: 0; list-style: none }
.tm_navbar .nav li { padding: 0 26px 0 27px; position: relative }
.tm_navbar .nav > li { padding-bottom: 8px }
.tm_navbar .nav li a { text-decoration: none; color: #fff; font-family: Georgia, serif; font-size: 22px; line-height: 24px; font-weight: 400; background: transparent; padding: 0; border: none; text-shadow: 1px 1px 2px #333639 }
.tm_navbar .nav > li > a .sf-sub-indicator { width: 7px; height: 4px; display: inline-block; top: 30px; left: 45%; position: absolute; z-index: 5 }
.tm_navbar .nav li a:hover { color: #90ff7f; text-decoration: none }
.tm_navbar .nav > li.active > a,
.tm_navbar .nav > li.active > a:hover,
.tm_navbar .nav > li.active > a:focus { color: #90ff7f; background: transparent }

/* dropdown submenu */
.tm_navbar .nav ul { position: absolute; display: none; top: 100%; left: 0; width: auto; padding: 20px 24px 10px; list-style: none; z-index: 11; background: #545658; margin: 0; text-align: center; white-space: nowrap }
.tm_navbar .nav li:hover > ul { display: block }
.tm_navbar .nav ul li { text-align: left; width: auto; padding: 6px 0; display: block; position: relative; z-index: 10; white-space: nowrap; float: none }
.tm_navbar .nav ul li a { text-align: left; position: relative; color: #fff; padding: 0; font-family: Georgia, serif; font-size: 20px; line-height: 22px; font-weight: 400; margin: 0 0 0 10px; text-shadow: none }
.tm_navbar .nav ul li a:hover { color: #64b258 }
.tm_navbar .nav > li > ul li > a:hover { text-decoration: none; color: #64b258 }

/* mobile menu */
.select-menu { display: none !important }
@media (max-width: 950px) {
  .sf-menu { display: none !important }
  .select-menu { display: block !important; color: #fff; border: 1px solid #343434; background: #343434 !important; box-shadow: none; position: relative; width: 100%; margin: 0; padding: 5px }
  .select-menu option { padding: 0 }
}

/* gallery — flexbox rows */
.pad_bot3 { padding-bottom: 42px }
.containerExtra { margin-left: 0 }
#container { display: flex; flex-wrap: wrap; gap: 30px }
.element { width: calc(25% - 22.5px); position: relative; color: #222 }
.element > a { display: block; margin: 0 }
.element > a figure { display: block; position: relative; margin: 0 0 18px; padding: 0; height: 220px }
.element > a figure img { width: 100%; height: 100%; object-fit: contain }
.element > a span, .element span { position: relative; text-transform: uppercase; font-family: Georgia, serif; font-size: 12px; line-height: 20px; color: #797979; margin: 0; padding: 0; text-decoration: none }
.description { display: block; position: relative }
@media (max-width: 1169px) { .element { width: calc(33.333% - 20px) } }
@media (max-width: 799px) { .element { width: calc(50% - 15px) } }
@media (max-width: 479px) { .element { width: 100% } }

/* footer */
footer { padding: 64px 0 }
.footercol { width: 100% }
.footerpriv { margin-top: 21px; margin-right: 66px; text-align: right }
.footerpriv, .footerpriv a { font-family: Georgia, serif; font-size: 16px; line-height: 22px; font-weight: 400; color: #f2eee5 }
.footerpriv a { text-transform: uppercase }
.footerpriv a:hover { text-decoration: none; color: #90ff7f }

@media (max-width: 950px) {
  .footercol { width: 100%; margin-bottom: 20px }
  .footercol, .footerpriv { text-align: center }
  .footerpriv { margin-top: 0; margin-right: 0; font-size: 14px }
  .footerpriv a { font-size: 14px }
}

.center { display: block; margin: 0 auto }
.text-center { text-align: center }

/* touchTouch lightbox */
#galleryOverlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0; z-index: 100000; background: rgba(0,0,0,.8); overflow: hidden; display: none; transition: opacity 1s ease }
#galleryOverlay.visible { opacity: 1 }
#gallerySlider { height: 100%; left: 0; top: 0; width: 100%; white-space: nowrap; position: absolute; transition: left .4s ease }
#gallerySlider .placeholder { background: url(/shared/preloader.gif) no-repeat 50%; height: 100%; line-height: 1px; text-align: center; width: 100%; display: inline-block }
#gallerySlider .placeholder::before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px }
#gallerySlider .placeholder img { display: inline-block; max-height: 100%; max-width: 100%; vertical-align: middle }
#gallerySlider.rightSpring { animation: rightSpring .3s }
#gallerySlider.leftSpring { animation: leftSpring .3s }
@keyframes rightSpring { 0% { margin-left: 0 } 50% { margin-left: -30px } to { margin-left: 0 } }
@keyframes leftSpring { 0% { margin-left: 0 } 50% { margin-left: 30px } to { margin-left: 0 } }
#nextArrow, #prevArrow { border: none; text-decoration: none; background: url(/shared/arrows.png) no-repeat; opacity: .5; cursor: pointer; position: absolute; width: 43px; height: 58px; top: 50%; margin-top: -29px; transition: opacity .2s ease }
#nextArrow:hover, #prevArrow:hover { opacity: 1 }
#prevArrow { background-position: 0 0; left: 40px }
#nextArrow { background-position: 100% 0; right: 40px }
@media (min-width: 480px) and (max-width: 767px) {
  #gallerySlider .placeholder img { width: 400px }
}