:root {
  --hlavni-barva: #0a2958;
  --svetla-barva: #f1f1f1;
}

body {
font-family: "Source Sans 3", sans-serif;
font-weight: 300;
font-size: 1.1em;
font-style: normal; }

h1 {
font-size: 1.4em;
font-weight: 300 !important; }

h2 {
font-size: 1.2em;
font-weight: 700; }

.nav-link {
font-weight: 400;
color: black;
text-transform: uppercase; }

.dark-bg {
background-color: var(--hlavni-barva);
color: #fff;
}

.light-bg {
background-color: var(--svetla-barva);
color: #242424;
}

.baloon-bg {
background-repeat: no-repeat;
background-image: url('../img/baloon.png');
background-position: -80px 50%;
background-size: auto 80%; }

.gallery {
display: grid;
justify-items: center;
grid-template-columns: 1fr;
gap: 10px;
}

.photo {
overflow: hidden;
box-sizing: border-box;
transition-duration: 0.5s; }

.photo:hover{
cursor: pointer;
filter: brightness(1.2);
}

.photo img {
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
object-position: center center;
}

.button-white {
border: 2px solid white;
text-align: center;
padding: 15px 25px;
text-decoration: none;
font-size: 0.8em;
font-weight: bold;
color: white;
transition: background-color 300ms ease; }

.button-white:hover {
background-color: rgba(255,255,255,0.3); }


.button-dark {
border: 2px solid var(--hlavni-barva);
text-align: center;
padding: 15px 25px;
text-decoration: none;
font-size: 0.8em;
font-weight: bold;
color: var(--hlavni-barva);
transition: background-color 300ms ease; }

.button-dark:hover {
background-color: rgba(0,0,0,0.3); }


.button-blue {
border: 2px solid var(--hlavni-barva);
background-color: var(--hlavni-barva);
text-align: center;
padding: 15px 25px;
text-decoration: none;
font-size: 0.8em;
font-weight: bold;
color: var(--svetla-barva);
transition: background-color 300ms ease; }

.button-blue:hover {
background-color: #2a4978 }

.nav-link {
color: black;
position: relative;
padding-bottom: 4px; }

.nav-link::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background-color: black;
transition: width 0.3s ease, left 0.3s ease; }

.nav-link:hover::before {
width: 100%;
left: 0; }

#social img {
height: 32px;
width: auto; }

#sluzby img {
max-height: 4em;
width: auto; }

.contact {
display: flex;
justify-content: center; }

#kontakt .contact img {
max-height: 35px;
width: auto; }

.contact a {
color: black; }

#ivanka {
max-width: 55%;
height: auto; }

#white {
position: relative;
margin-top: -150px;
z-index: 500;
height: 150px;
background-image: url('../img/white-wave.png');
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: 100% 100%; }

#copyright {
margin-top: -50px;
min-height: 120px;
background-image: url('../img/copyright.png');
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: cover; }

.quotation {
/*
background-image: url('../img/quot.png');
background-repeat: no-repeat;
background-position: 100% 100%;
background-size: 50px auto;
*/
font-style: italic;
font-size: 1.7em; }

#citat .contact {
align-items: center; }

#portrait {
border-radius: 50%;
display: none;
height: 10em;
width: auto; }

.opinion {
position: relative;
color: #8888b2;
background-color: white; }

.opinion-name {
position: absolute;
bottom: 0; }

.hidden {
display: none; }

.opinion b {
color: black; }

#certifikat {
height: 7em;
width: auto; }

.text-secondary {
color: #444 !important; }

@media (min-width: 767.98px) {
    .gallery {
    grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 991.98px) {
    .gallery {
    grid-template-columns: 1fr 1fr 1fr; }

    .opinion {
    overflow: hidden;
    height: 180px; }

    #portrait {
    display: flex; }

    .quotation {
    background-position: 85% 110%; }
}

@media (min-width: 1199.98px) {
    .gallery {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}