@charset "utf-8";
/* CSS Document */


body {color:#2c2825; font-size:16px; line-height:1.8; font-family: 'Roboto', sans-serif; font-weight: 400;} /*background: linear-gradient(180deg, #04475a 100px, #fff 100px);*/
a {text-decoration: none; font-weight: bold; color: #e04403;} 
a:hover {color: #004d43;} 
p {line-height: 26px;}
h1 {font-weight: bold; font-size: 48px;}
h2 {font-size: 32px;}
.opacity-25 {opacity: 0.25 !important;}
.oftop {margin-top:88px;}
.top {background: rgba(255,255,255,1.00); -webkit-box-shadow: 0px 10px 13px -7px #000000, 0px 5px 15px 5px rgba(0,0,0,0); box-shadow: 0px 10px 13px -7px #000000, 0px 5px 15px 5px rgba(0,0,0,0);}
.logo {max-width: 300px;}
.bg-green {background: #004d43 !important;}
.bg-red {background: #e04403 !important;}

.bg-o-nas {position: relative; width: 100%; max-height: 250px; height: 250px; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.bg-o-nas::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../img/o-nas.jpg'); background-size: cover; background-position: center; opacity: 0.5; /* průhlednost pouze obrázku */ z-index: 0;}
.bg-o-nas-text {position: relative; z-index: 1; text-align: center; font-size: 28px; font-weight: bold; color: #004d43;}
.bg-o-nas-text a {text-decoration: underline;  color: #004d43;}
.bg-o-nas-text a:hover {text-decoration: none;}

.red {color: #e04403;}
.btn {border-radius: 0px; background: #004d43; color:#FFF; border: 0; }
.btn:hover {background: #e04403; color:#FFF; }
*, *::before, *::after {box-sizing: border-box;}
hr {color: #e04403; opacity: 1;}
.navbar-toggler-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");}
.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus {outline: none; box-shadow: none;}
.nav-link {color:#54565a !important; font-size:16px; font-weight: normal;}
.nav-link {position: relative;}
.nav-link:before {content: ""; position: absolute; width: 100%; height: 1px; bottom: 0px; left: 0; background-color: #e04403; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;}
.nav-link:hover:before {visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1);}
.nav-link:hover {color: #e04403 !important;}
.carousel-indicators {bottom:25; height: 0px; padding: 0px; margin: 0px;}
.carousel-caption {top: 50%; transform: translateY(-50%); bottom: initial; left: initial; left:0; background: rgba(255,255,255,0.00); padding: 30px; text-align: left;}
.carousel-caption h3, .carousel-caption h4 {font-size: calc(1.525rem + 1.5vw); text-shadow: 0 0 16px rgba(0,0,0,0.3), 0 0 16px rgba(0,0,0,0.3), 0 0 16px rgba(0,0,0,0.3), 0 0 16px rgba(0,0,0,0.3);}
.carousel-caption h3 {font-weight: bold;}

.angled-btn { position: relative; display: inline-block; background-color: #004d43; color: white; border: none; overflow: hidden; font-size: 1rem; padding: 0.5rem 1.5rem; }
.angled-btn-inv { background-color: #e04403;}
.angled-btn span { position: relative; z-index: 2; }
.angled-btn::before { content: ''; position: absolute; top: 0; right: -10px; height: 100%; width: 18%; background-color: #e04403; transform: skewX(-16deg); transform-origin: right; z-index: 1; transition: width 0.4s ease; pointer-events: none; }
.angled-btn-inv::before {background-color: #004d43;}
.angled-btn:hover::before { width: 115%; }
.angled-btn:focus, .btn {outline: none; box-shadow: none;}
@media (min-width: 1200px) {
.carousel-caption h3, .carousel-caption h4 {font-size: 5.7rem; text-shadow: 0 0 32px rgba(0,0,0,0.3), 0 0 32px rgba(0,0,0,0.3), 0 0 32px rgba(0,0,0,0.3), 0 0 32px rgba(0,0,0,0.3); padding-left: 40px;}
}
.highlight {font-size:20px;}
.highlight span {font-size:38px; font-weight: bold; display: inline-block;}

@media all and (orientation: portrait) 
{

}
@media only screen 
  and (orientation: portrait) { 
.logo {display:inline; max-width: 150px;}
}

.portfolio-box {position: relative; display: block;}
.portfolio-box-caption {display: flex; align-items: center; justify-content: flex-end; flex-direction: column; width: 100%; height: 100%; position: absolute; bottom: 20; opacity: 100%; color: #fff; /*background: rgba(153, 102, 102, 0.9);
    transition: opacity 0.25s ease;*/ text-align: center;}
.portfolio-box-caption a, .carousel-caption a {display: block; width: 270px; background: #f1cb30; color: #345ca6; padding: 8px 12px; border-radius: 8px; font-weight: bold;}
.carousel-caption a {width:auto; display: inline-block; text-transform: uppercase;}
footer {color: #fff; font-size: 14px;}
footer a:hover {color: #fff;}

ul.dot2022 {margin:0px 0; padding:0; list-style: none;}
.dot2022 li::before { content: "\25a0"; font-size:18px; vertical-align:top; margin-right:6px; color: #ffcc1a; position: relative; top: -3;}
.dot2022 li {margin: 0px; padding: 0px; text-indent: -18px; margin-left: 18px; margin-bottom: 10px; line-height: 24px;}

.card {max-width:500px; margin: auto;}

.realizace .card {position: relative;}
.realizace .card-thumbnail {overflow: hidden; position: relative;}
.realizace .card-thumbnail img {transition: transform .5s ease; width: 100%;}
.realizace .card:hover img {transform: scale(1.025);}
.realizace .card-label {position: absolute; top:10px; right:0px; background: rgba(0,77,67,0.50); padding: 4px 8px 0px 8px; color: rgba(255,255,255,1.00);} 
.realizace .card-body {padding: 10px 5px; z-index: 100; position: relative; background: #FFFFFF;}
.realizace .card .card-title a {line-height: 20px;}
.realizace .card .card-text {}

.profile-card-img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover;}

.people a {display: flex; align-items: center; justify-content: center;margin: 10px auto;  border:1px solid rgba(0,0,0,1.00); min-height: 110px; color: rgba(0,0,0,1.00);}
.people a:hover {border: 1px solid #e04403; background: #e04403; color: rgba(255,255,255,1.00);}
.people a div {text-align: center; padding: 18px;  line-height: 24px;}