/* --------------------- HEADER ---------------------*/

.header-kontakt{
    /* Zaloha: JPG pro prohlizece bez podpory image-set() / WebP */
    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255 , 0.2)),
    url("../img/kontakt.jpg") center no-repeat;
    /* Moderni prohlizece: WebP, JPG jen kdyz WebP neumi */
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255 , 0.2)),
    image-set(url("../img/kontakt.webp") type("image/webp"), url("../img/kontakt.jpg") type("image/jpeg"));
    background-size: 100%, 100%;
    height: 323px;   
}


@media (max-width: 480px) {
    .header-kontakt {
        /* Male displeje: mensi WebP (1000 x 668 px) */
        background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255 , 0.2)),
        image-set(url("../img/kontakt-mobil.webp") type("image/webp"), url("../img/kontakt.jpg") type("image/jpeg"));
        background-size: auto 323px;
    }
}
.benefit{
    text-align: center;
    margin-top: 65px;
    margin-left: 6%;
    margin-right: 6%;
}

.benefit p{
    font-size: 0.88em;
    line-height: 1.6em;
}

/* ---------- OBSAH STRANKY ---------*/

.stranky-content {
    padding-top: 4%;
    margin-bottom:0;
}
.stranky-content{
    padding-bottom:6%;
}
.stranky-content h1 {
    padding-bottom: 4%;
}
@media (max-width: 700px) {
    .stranky-content{
        padding-top: 8%;
        padding-bottom:16%;
    }
    .stranky-content-NM{
        padding-top: 8%;
    }
}

/* Nadpisy sloupcu (Kontakt / Kurzy probihaji / Provozovatel).
   Byly to h3, kvuli hierarchii nadpisu jsou z nich h2. Globalni h2 ma
   pismo Allura, barvu a velikost 2.125em - tady se vse vraci na vzhled
   puvodniho h3 (vcetne vychozich okraju 1em). */
.kontakt .kontakt-nadpis{
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    color: inherit;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 1em 0;
    padding: 0;
}
/* Nazev skoly v kontaktu: v textu jednotne "Vědomé masáže", vizualne verzalky jako driv */
.nazev-velke{
    text-transform: uppercase;
}
.kontakt a{
    margin-top:0;
    padding-top:0;
}
.kontakt p{
    text-align: center;
    font-size: 0.88em;
    line-height: 1.6em;
}

.kontakt{
    width: 100%;
}
.sec-kontakt{
    width:33.3333%;
    float: left;
    padding: 0 0.625em 0 0.625em; 
}
.sec-kontakt a{
    color: rgb(15,59,137);
}

@media (max-width: 790px) {
    .sec-kontakt{
        width:50%;
        margin-bottom: 0.625em;
    }
    .sec-kontakt:nth-child(2){
        padding-bottom: 24px;
    }
}
@media (max-width: 550px) {
    .sec-kontakt{
        width:100%;
    }
    .sec-kontakt:nth-child(2){
        padding-bottom: 0;
    }
}

.kontakt-mapa{
    width: 100%;
    margin-top: 5%;
    text-align: center;
    margin-bottom: 3em;
}
.ramecek{
    background: #FFFFFF;
    padding: 12px;  
    margin:0;
}

/* Jedna mapa misto sedmi kopii (.r0 - .r6). Rozmery na jednotlivych
   breakpointech presne odpovidaji puvodnim iframum, vzhled je stejny.
   width 100 % + max-width: mapa se na uzkem displeji nikdy nevysune ven. */
.mapa{
    width: 100%;
    max-width: 1100px;
    height: 420px;
    border: 0;
}
@media (max-width: 1400px) {
    .mapa{ max-width: 976px; }
}
@media (max-width: 1240px) {
    .mapa{ max-width: 870px; height: 310px; }
}
@media (max-width: 950px) {
    .mapa{ max-width: 680px; }
}
@media (max-width: 740px) {
    .mapa{ max-width: 580px; height: 225px; }
}
@media (max-width: 620px) {
    .mapa{ max-width: 415px; }
}
@media (max-width: 460px) {
    .mapa{ max-width: 255px; height: 200px; }
}

.kontakt-text{
    padding: 0 10% 0 10%;
}
/* ---------- MAIN LINK (presunuto z inline <style> v index.php) ---------*/
.main-link-kurzy {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)),
          url(/img/skola-masazi.jpg) center center no-repeat;
}

/* ---------- FOTOGALERIE STUDIA JOGAZA ---------
   Mrizka, mobilni posuvnik i zvetsenina jsou spolecne ve style.css
   (.galerie, .galerie-polozka, .galerie-uvod, .lightbox) - stejne jako
   na strance Nasi absolventi. Tady je jen obal se stejnou geometrii
   jako .galerie-sekce ve style-absolventi.css. */
.galerie-sekce {
    box-sizing: border-box;
    max-width: 1140px;
    margin: 1em auto 0;
    padding: 0 20px;
}
@media (max-width: 480px) {
    .galerie-sekce {
        padding-left: 5%;
        padding-right: 5%;
    }
}

/* Odsazeni cele sekce od popisku mapy nad ni a mezera mezi textem
   a fotkami. Nadpis a text jsou v .container > .kontakt > .kontakt-text,
   tedy stejne pismo i sirka jako popisky pod mapami. */
.fotogalerie {
    margin-top: 4.5em;
}
.fotogalerie .kontakt {
    margin-bottom: 1.6em;
}
@media (max-width: 700px) {
    .fotogalerie { margin-top: 3em; }
}

/* Fotky v galerii bez zakulacenych rohu (stejne jako na strance Fotografovani).
   Zakladni styl galerie ve style.css ma border-radius 10px - tady se rusi jen pro Kontakt. */
.fotogalerie .galerie-polozka img {
    border-radius: 0;
}