:root { --saturated: #695d5c; --background: #e9e7e2; --dividers: #7d1e136b; }

* { box-sizing: border-box; }

html, body { padding: 0; margin: 0; height: 100%; background-color: var(--saturated); font-family: 'Ysabeau', sans-serif; }
body { font-size: 12pt }
div { margin: 0 }
b { font-weight: 700 }

#main-container { min-height: 100%; margin: auto; background-color: white; }
#header { padding: 1.4rem; border-top: solid 5px var(--saturated); color: var(--saturated) }
#slogan { font-family: 'Island Moments', serif; font-size: 3rem; position: relative; z-index: 1; text-align: left; max-width: 1200px; margin: auto; margin-top: 0; width: 100%; padding: 0 3rem; }

h1 { margin: 0.5rem 0 0.8rem 0; text-align: center; padding: 0rem; font-size: 3rem; }
h2 { position: relative; text-align: center; font-size: 2rem; line-height: 1.2rem; margin: 0; margin-bottom: 2.6rem; width: fit-content; font-weight: 400; }
h2::after { content: ''; position: absolute; bottom: -1.6rem; left: 1rem; right: 1rem; height: 3px; background-color: var(--dividers); }
h1, h2 { font-weight: 700; font-family: 'Cormorant SC', serif; }

ul { display: flex; justify-content: center; width: 100%; padding: 0.5rem; margin: 0; }
li { list-style-type: none; margin: 0; padding: 0 2rem; border-right: 2px solid var(--dividers); font-weight: 500; line-height: 0.9rem; }
li a { color: black; text-decoration: none; white-space: nowrap; }
li:last-child { border-right: none; }

a { color: black; text-decoration: none; text-underline-offset: 2px; text-decoration-color: var(--dividers); text-decoration-thickness: 2px; }
a:hover { text-decoration: underline; color: var(--saturated); }

#jmeno { font-size: 1.6rem; line-height: 1.8rem; text-align: center; color: var(--saturated); margin: 1rem 0; }
#fce { font-weight: 300; font-size: 1.4rem; }

.text { margin: auto; padding: 3rem; display: flex; flex-direction: column; align-items: center; max-width: 1200px; min-width: 0; flex-basis: auto; }
.text p { text-align: center; margin: 1rem 0; padding: 0 2rem; line-height: 1.6rem; font-weight: 500; max-width: 100%; }

.suda { background-color: var(--background); }

.sloupce { display: flex; flex-wrap: wrap; justify-content: center; align-items: space-around; z-index: 2; position: relative; }
.sloupec { background-color: white; padding: 3rem; flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 300px; margin-bottom: 2rem;}
.sloupec img { height: 75px; margin-bottom: 1.6rem; flex-basis: auto; }
.sloupec h3 { font-size: 1.6rem; margin: 0; margin-bottom: 1rem; font-family: 'Cormorant SC', serif; font-weight: 700; text-align: center; min-height: 65px; display: flex;  align-items: center; }

.sluzba { line-height: 1.4rem; text-align: center; max-width: 100%; }

#sluzby { position: relative; background-position: bottom right; background-size: cover; background-repeat: no-repeat; background-color: var(--background) } /*background-image: url('ManetLight.jpg'); }*/
#sluzby::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; background: rgba(255, 255, 255, 0.75); z-index: 0; }
#sluzby .text { z-index: 1; position: relative; }

#obr { background-color: var(--saturated); background-image: url('Manet.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center left; min-height: 500px; text-align: left; padding: 3rem 6rem; display: flex; align-items: center; position: relative; overflow-x: hidden; color: white; font-weight: 100; font-size: 2em; }
.gradient-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0,0,0,0.5) 300px, rgba(0, 0, 0, 0) 100%); z-index: 0; max-width: 650px; min-width: 400px; }

/* #kontakt { display: flex; } */
#kontakt { position: relative; }
#kontakt .text { display: flex; max-width: 1200px; align-items: flex-start; padding: 3rem; }
#kontakt .text .text-col { width: 50% ;}
#kontakt .text .text-col h2 { text-align: center; margin: auto;  margin-bottom: 2.6rem; }
#kontakt p { text-align: left; margin: 2em }
#kontakt .details { width: 100%; display: flex; flex-direction: column; padding-top: 2rem; }
#kontakt .detail { display: flex; margin-bottom: 1.6rem; font-size: 1.2rem; align-items: flex-start; }
#kontakt .detail .icon { min-width: 1.5rem; text-align: left; margin-right: 1rem;}
#kontakt .detail .icon img { width: 1rem; margin-top: 0.4rem; min-height: 1.6rem;}
#kontakt .detail .value { line-height: 2rem; word-break: break-word; }
#kontakt #map { position: absolute; top: 3rem; right: 3rem; bottom: 3rem; left: 50%; }
#kontakt #map iframe { width: 100%; height: 100%; border: none; }

#footer { padding: 0.6rem; background: white; font-size: 0.8rem; background: var(--background); }
#footer a:hover { color: black; }

#map { flex: 1 }

@media screen and (max-width: 1024px) {
    .sloupce { flex-direction: column; }
    .sloupec h3 { min-height: 0; }
}

@media screen and (max-width: 700px)
{
    body { font-size: 14pt; }
    h1 { font-size: 2.2rem; }

    #obr { padding: 3rem 2rem; }
    #slogan { padding: 0 1rem; }

    .text { padding: 3rem 1rem; }
    .text p { padding: 0 1rem; }

    .sloupec { margin: 1rem; padding: 2rem 1rem; min-width: 200px; }
    .sluzba { line-height: 1.6rem; }

    #kontakt #map { position: relative; left: 0; width: 100%; height: 300px; top: 0;}
    #kontakt .text { padding: 3rem 1rem; }
    #kontakt .text .text-col { width: 100%; }
}