body {font-family: 'Montserrat', sans-serif; font-size: 16px; background-color: #f2f5f7;  }
 h1 {}
 h3 {font-family: 'Playfair Display', serif; font-size: 48px}
 h4 {font-family: 'Playfair Display', serif; font-size: 20px}
@media (max-width: 768px){
h3 {font-family: 'Playfair Display', serif; font-size: 30px}
}

@media (max-width: 768px){
.nemobil {display:none !important;}
}

.zelena {color: green;}
.cervena {color: #c63535;}
.zelena-bg {background-color: #276229;}
.cervena-bg {background-color: #c63535;}
.seda-bg {background-color: #676767;}
.seda1-bg {background-color: #848484;}
.seda2-bg {background-color: #8c8a8b;}
.seda3-bg {background-color: #aaa8a9;}
.seda4-bg {background-color: #bcbabb;}
.seda5-bg {background-color: #d1d0d0;}


/* top navigace */

#lista {text-align: right; height: 45px;}
#lista ul {display: inline-flex;}
#lista .fa-ul {margin-left:0;}
#lista li {padding-top: 8px; padding-bottom: 7px;}
#lista .fa-li {position: inherit; width: 1.5em;}
#lista a {font-size:20px; color: #8ea1b2; font-weight:400;}
#lista a:hover {color: Black; text-decoration: none;}
#lista em {font-size: 14px; font-style: normal; }

.logo {padding: 1rem!important; padding-left: 2rem!important; width: 290px; -webkit-transition: all .3s ease;	-moz-transition: all .3s ease;	-o-transition: all .3s ease;	-ms-transition: all .3s ease;	transition: all .3s ease;}

#menu {background: White;  -webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2); -ms-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);}
#menu h1 {margin: 0; pading: 0; width: 0; height: 0; overflow: hidden;}
#menu.navbar {padding: 0; border-bottom: 1px solid #e7e7e7; z-index: 99; opacity: 0.9;}
#menu .navbar-nav {}
#menu .navbar-brand {padding: 0px 0px; margin-right: 0px;}
#menu .navbar-brand :hover {padding: 0px 0px; opacity:0.8;}
#menu .navbar-nav>li>a h2 {font-size:22px; color: Black; font-weight:300; margin-top: 0px; margin-bottom: 0px; padding: 1rem; margin-right: 1rem; background:White; border-top: 1px white solid; border-bottom: 1px white solid; -webkit-transition: all .3s ease;	-moz-transition: all .3s ease;	-o-transition: all .3s ease;	-ms-transition: all .3s ease;	transition: all .3s ease;}
@media (min-width: 768px) and (max-width: 768px){#menu .navbar-nav>li>a h2 {padding: 12px;}}
@media (max-width: 768px){#menu .navbar-nav>li>a h2  {margin-right:0;}}
#menu .navbar-nav>li>a:hover {text-decoration: none !important;}
#menu .navbar-nav>li>a:hover h2 {color: green; text-decoration: none !important; border-top: 1px  #134c24 solid; border-bottom: 1px  #134c24 solid;}
#menu .navbar-toggler {margin-right: 15px;}

#menu.scrolled {position: fixed; top: 0; right: 0; left: 0; z-index: 1030;}
#menu.scrolled .navbar-brand {height: 90px;}
#menu.scrolled .navbar-nav>li>a h2 {font-size:20px; padding: 17px 10px 13px 10px;	-webkit-transition: all .3s ease;	-moz-transition: all .3s ease;	-o-transition: all .3s ease;	-ms-transition: all .3s ease;	transition: all .3s ease;}
#menu.scrolled .logo {padding: 0.5rem!important; padding-left: 2rem!important; width: 215px;}

@media (max-width: 768px){
.logo {padding: 0.5rem!important; padding-left: 2rem!important; width: 215px;}
.navbar-brand {height: 90px;}
 }


/* home */

#main-slider {margin-top:-123px;}
@media (max-width: 992px){#main-slider {margin-top:0px;}}
.label_skitter p {font-family: 'Playfair Display', serif; font-size:3vw; font-weight: 700; line-height: 1.2em; padding-bottom: 2.5rem;}
.cedule {padding: 2rem!important; color: White; font-size: 1.5vw; display: inline-block; opacity: 0.85; }
.skitter .info_slide_dots {bottom: 20px; }
@media (max-width: 768px){.skitter .info_slide_dots {display:none !important;}}




.border-left-zelena {border-left: 1px solid green;}
.border-left-cervena {border-left: 1px solid #c63535;}
.border-right-zelena {border-right: 1px solid green;}
.border-right-cervena {border-right: 1px solid #c63535;}


#ocekavat .card  {border-radius: 0px !important; border: 0px; color:White;}
#ocekavat .card-img-top {border-radius: 0px !important;}
#ocekavat .card-title {margin-bottom: 0;}
#ocekavat .text-muted {color:White !important; font-style:italic;}
#ocekavat .card-footer {border-top: 0px;}
#ocekavat .card:hover  {background-color:#212529; -webkit-transition: all .3s ease;	-moz-transition: all .8s ease;	-o-transition: all .8s ease;	-ms-transition: all .8s ease;	transition: all .8s ease; }
#ocekavat .card:hover img {opacity:0.6; filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");-webkit-filter:grayscale(1);filter:grayscale(1);filter:gray}.grayscale.grayscale-fade{transition:filter .5s}@media screen and (-webkit-min-device-pixel-ratio:0){.grayscale.grayscale-fade{-webkit-transition:-webkit-filter .5s;transition:-webkit-filter .5s}}.grayscale.grayscale-fade:hover,.grayscale.grayscale-off{-webkit-filter:grayscale(0);filter:grayscale(0)}.grayscale.grayscale-replaced{-webkit-filter:none;filter:none}.grayscale.grayscale-replaced>svg{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.grayscale.grayscale-replaced.grayscale-fade:hover>svg,.grayscale.grayscale-replaced.grayscale-off>svg{opacity:0}
@media (max-width: 768px){
#ocekavat .card-title {font-size: 1.1rem;}
}


#sluzby {background-color:White;}
.nul-margin {margin-top: 0rem; margin-bottom: 0rem;}

#sluzby .list-group-item-action {color: White; font-weight: 500; font-size: 1.25rem; line-height: 1.2;}
#sluzby .list-group-item-action:hover {background-color:#212529; -webkit-transition: all .3s ease;	-moz-transition: all .8s ease;	-o-transition: all .8s ease;	-ms-transition: all .8s ease;	transition: all .8s ease; }



#portfolio .card  {background-color: White; border:1px solid #f5f5f5; border-radius:0px;}
#portfolio .card:hover {opacity: 1; -webkit-transition: all 0.5s ease;	-moz-transition: all 0.5s ease;	-o-transition: all 0.5s ease;	-ms-transition: all 0.5s ease;	transition: all 0.5s ease; background-color:#212529;  color: #fff; }

#portfolio .card .obrazek-reference-obal {position: relative;}
#portfolio .card:hover img {filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");-webkit-filter:grayscale(1);filter:grayscale(1);filter:gray}.grayscale.grayscale-fade{transition:filter .5s}@media screen and (-webkit-min-device-pixel-ratio:0){.grayscale.grayscale-fade{-webkit-transition:-webkit-filter .5s;transition:-webkit-filter .5s}}.grayscale.grayscale-fade:hover,.grayscale.grayscale-off{-webkit-filter:grayscale(0);filter:grayscale(0)}.grayscale.grayscale-replaced{-webkit-filter:none;filter:none}.grayscale.grayscale-replaced>svg{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.grayscale.grayscale-replaced.grayscale-fade:hover>svg,.grayscale.grayscale-replaced.grayscale-off>svg{opacity:0}
#portfolio .card .nazev-projektu {font-family: 'Playfair Display', serif; font-weight: 700; margin-bottom: 20px}

@media (max-width: 768px){
#portfolio .card .nazev-projektu {font-size: 16px;}
}
#portfolio .card a {color: #000;}
#portfolio .card:hover a {text-decoration: none; color: #fff;}
#portfolio .card:hover a:hover {text-decoration: none; color: #a68250;}
#portfolio .card:hover zelena {color: White;}
#portfolio .card:hover .overlay { opacity: 1; -webkit-transition: all .9s ease;	-moz-transition: all .9s ease;	-o-transition: all .9s ease;	-ms-transition: all .9s ease;	transition: all .9s ease; }
#portfolio .overlay .btn-dark {background-color: #276229; opacity:0.85; border-radius:0px; border:white; }
#portfolio .overlay .btn-dark:hover {background-color: rgba(0,0,0,1)}
#portfolio .overlay  {position: absolute; width: 100%; height: 100%; top: 0; opacity: 0;}
#portfolio .overlay .btn-center {position: absolute; top: 35%; left: 0; right: 0; text-align: center;}


/* sluzby */
.top-box {height: 50vh; overflow: hidden; position: relative; background-image: url(img/tvo-europe-002.jpg); background-size: cover; background-position: top center;}
.top-box .cedule {position: absolute; bottom: 5%;}

#provozni {background-color:White;}

.mapa {background-image: url(img/tvo-europe-mapa2.jpg); background-position: center; background-repeat: no-repeat;}
.mapa:hover {opacity: 0.8;}
.cedule-mapa { padding: 1rem!important; color: White; display: inline-block; opacity: 0.85; position: absolute; top: 20px; left: 20px; }
@media (max-width: 768px){
.cedule-mapa {font-size:12px;}
 }

.mapa:hover .cedule-mapa  {opacity: 1.0;}


#kontakty a {color:green;}

footer {font-size: 70%;}
footer a {color:green;}