@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,600&display=swap');


/* CSS Document */
body {
    margin: 0;
    /* pouze pro šablonu zvlášť, při implementaci smazat! */
    color: #222;
    background: #bae2fc url(https://cdn.alza.cz/Styles/full/images/bg-gradient.png) repeat-x top center;
}

html {
    scroll-behavior: smoothff;
}

#obal {
    margin: 0 auto;
    /*width: calc(100% + 60px);
	margin-left: -30px;*/
    max-width: 1255px;
    /*	max-width: 920px;*/
    background: white;
}

#celek {
    font-family: "Roboto";
    margin: 0 auto;
    height: auto;
    background: white;
}

#celek h1,
#celek h2 {
    font-family: "Roboto";
    font-size: 48px;
    font-weight: 500 !important;
}

#celek p {
    font-family: "Roboto";
    font-size: 15px;
    line-height: 1.4em;
}

#celek strong {
    font-family: "SamsungOne 700";
}

#celek .blok {
    display: block;
}

#celek figure {
    margin: 0;
}

#celek .blok.prvni,
#celek .blok.druhy,
#celek .blok.treti,
#celek .blok.ctvrty,
#celek .blok.paty {
    position: relative;
    padding-bottom: 0%;
}

#celek .blok.prvni .obsah,
#celek .blok.druhy .obsah,
#celek .blok.treti .obsah,
#celek .blok.ctvrty .obsah,
#celek .blok.paty .obsah {
    position: relative;
}

#celek .blok.prvni {
    padding-top: 100px;
    text-align: center;
    padding-left: 60px;
    padding-right: 60px;
    text-align: center;
    align-content: center;
}

#celek .blok.prvni .obsah .obrazek img {
    width: calc(100% + 120px);
    margin-left: -60px;
    position: relative;
    z-index: 1;
    margin-top: -100px;
}

#celek .blok.prvni .obsah .nadpis h1 {
    font-size: 60px;
    display: inline-block;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    letter-spacing: 1.5px;
    color: black;
}

#celek .blok.prvni .obsah .nadpis .podtrzeni {
    margin-top: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid black;
    display: inline-block;
    background: black;
    height: 0px;
    width: 50%;
    position: relative;
    z-index: 2;
    min-width: 35em;
}

#celek .blok.prvni .obsah .nadpis h1 span.tenky {
    font-weight: 300;
}

#celek .blok.prvni .obsah .nadpis h1 span.tenky img {
    height: 0.75em;
}

#celek .blok.prvni .obsah .podnadpis h2 {
    font-size: 30px;
    color: white;
    background: black;
    display: inline;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    z-index: 2;
    letter-spacing: 1.5px;
}



#celek .blok.druhy {
    padding-top: 50px;
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
}


#celek .blok.druhy .obsah .nadpis h2 {
    font-size: 48px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 10px;
    color: black;
}

#celek .blok.druhy .obsah .nadpis h2 span.logo {
    font-weight: 300;
}

#celek .blok.druhy .obsah .nadpis h2 span.logo img {
    height: 0.75em;
}

#celek .blok.druhy .obsah .nadpis h3 {
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 300;
    padding-top: 10px;
    padding-bottom: 50px;
    color: black;
    font-family: "Roboto";
    margin-top: 25px;
    margin-bottom: 25px;
}

#celek .blok.druhy .obsah .duvody {
    padding-left: 20%;
    padding-right: 20%;
}

#celek .blok.druhy .obsah .duvody .duvod {
    padding-top: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #dedede;
}

#celek .blok.druhy .obsah .duvody .duvod.prvni {
    padding-top: 5px;
}

#celek .blok.druhy .obsah .duvody .duvod .nazev h3 {
    font-size: 20px;
    color: black;
    font-family: "Roboto";
    font-weight: 500;
}

#celek .blok.druhy .obsah .duvody .duvod .nazev h3 span.ikonka img {
    height: 0.9em;
    margin-bottom: -0.1em;
    margin-right: 10px;
}

#celek .blok.druhy .obsah .duvody .duvod .popisek p {
    font-size: 15px;
    font-weight: 300;
    font-family: "Roboto";
}

#celek .blok.druhy .obsah .duvody .duvod .popisek a {
    color: black;
}

#celek .blok.druhy .obsah .duvody .duvod .popisek a:hover {
    color: #4388d0;
}

#celek .blok.druhy .obsah .duvody .duvod .popisek img.qr {
    width: 150px;
}

#celek .blok.druhy .obsah .tlacitko {
    padding-top: 50px;
    padding-bottom: 50px;
}

#celek .blok.druhy .obsah .tlacitko img {
    height: 60px;
    opacity: 0.8;
    transition: 0.3s;
    padding-top: 10px;
    padding-bottom: 10px;
}

#celek .blok.druhy .obsah .tlacitko img:hover {
    height: 80px;
    opacity: 1;
    transition: 0.3s;
    padding-top: 0;
    padding-bottom: 0;
}




#celek .blok.treti .obsah .obrazek img {
    width: 60%;
    margin-left: 20%;
    padding-top: 50px;
    padding-bottom: 50px;
}







#celek .blok.ctvrty {
    padding-top: 50px;
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
}


#celek .blok.ctvrty .obsah .nadpis h2 {
    font-size: 48px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 10px;
    color: black;
    margin-top: 25px;
    margin-bottom: 25px;
    font-family: "Roboto";
}

h2 {}

#celek .blok.ctvrty .obsah .nadpis h2 span.logo {
    font-weight: 300;
}

#celek .blok.ctvrty .obsah .nadpis h2 span.logo img {
    height: 0.75em;
}

#celek .blok.ctvrty .obsah .nadpis h3 {
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 300;
    padding-top: 10px;
    padding-bottom: 10px;
    color: black;
    font-family: "Roboto";
}

#celek .blok.ctvrty .obsah .otazky {
    padding-left: 20%;
    padding-right: 20%;
}

#celek .blok.ctvrty .obsah .otazky .otazka {
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #dedede;
}

#celek .blok.ctvrty .obsah .otazky .otazka.prvni {
    padding-top: 50px;
}

#celek .blok.ctvrty .obsah .otazky .otazka .otazka-text h3 {
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
    color: black;
    font-weight: 500;
    font-family: "Roboto";
}

#celek .blok.ctvrty .obsah .otazky .otazka .otazka-text h3 span.ikonka img {
    height: 0.9em;
    margin-bottom: -0.1em;
    margin-right: 10px;
}

#celek .blok.ctvrty .obsah .otazky .otazka .odpoved p {
    font-size: 15px;
    font-weight: 300;
}

#celek .blok.ctvrty .obsah .otazky .otazka .odpoved a {
    color: black;
}

#celek .blok.ctvrty .obsah .otazky .otazka .odpoved a:hover {
    color: #4388d0;
}

#celek .blok.ctvrty .obsah .otazky .otazka .odpoved img.qr {
    width: 150px;
}



.odpoved.odpovedZavrena {
    display: none;

}

.odpoved.odpovedOtevrena {
    animation: zobrazit .5s;
    animation-fill-mode: both
}

@keyframes zobrazit {
    from {
        transform: scale(0.7);
        opacity: 0;
        display: none;
    }

    to {
        transform: scale(1);
        opacity: 1;
        display: block;
    }
}



#celek .blok.paty {
    padding-top: 50px;
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
}


#celek .blok.paty .obsah .nadpis h2 {
    font-size: 48px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 10px;
    color: black;
    font-family: "Roboto";
    font-weight: 400;
}

#celek .blok.paty .obsah .nadpis h2 span.logo {
    font-weight: 300;
}

#celek .blok.paty .obsah .nadpis h2 span.logo img {
    height: 0.75em;
}

#celek .blok.paty .obsah .nadpis h3 {
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 300;
    padding-top: 25px;
    padding-bottom: 19px;
    color: black;
    font-family: "Roboto";
}

#celek .blok.paty .obsah .popisek a {
    color: black;
}

#celek .blok.paty .obsah .popisek a:hover {
    color: #4388d0;
}





#celek .blok.sesty .obsah .obrazek {
    text-align: center;
}

#celek .blok.sesty .obsah .obrazek img {
    width: 200px;
    padding-top: 50px;
    padding-bottom: 50px;
}
