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

#stranka {
	max-width: 1256px;
	width:100%;
	margin:0 auto;
	background-color:#bbe2fc;
	}

#celek section#seventh h2 {
    padding-bottom: 2em;
}

#celek ul.animate li.active img {
    margin-top: 0;
}

div#celek #first .blockFifty ul {
		margin-left: 20px;
		margin-bottom: 6em;
	}

	div#celek #first .blockFifty:first-child {
		vertical-align: bottom;
	}

#celek section#sixth h2 {
    padding-bottom: 1em;
}

#celek #cinemaAnim .animate {
    margin-bottom: -9em;
}

div#celek div[data-tooltip="true"]:hover .tip {
    display: block !important;
}

div#celek div[data-tooltip="true"]:hover {
    background: white;
    border: 1px solid silver;
}

.tip table {
    border: 1px solid silver;
    border-radius: 5px;
    overflow: hidden;
}

section#sixth h3 {
    font-size: 22px;
}

#celek section#sixth ul > li p {
    font-size: 16px;
}

div#celek div[data-tooltip="true"] img {
    max-height: 28px;
}

div#celek div[data-tooltip="true"] {
    padding: 9px 16px;
    border-radius: 9px;
    border: 1px solid transparent;
}
	
div#celek {
    background: white;
}

#celek .tip ul > li p {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

#celek .marketsBtns {
    padding: 2em 0;
}

#celek .tip ul > li img {
    vertical-align: middle;
}

#celek section#sixth .animate {
    opacity: 1;
}

#celek .tip ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    z-index: 2;
    background: white;
    position: relative;
    border-radius: 5px;
}

#celek .tip {
    display: block;
    position: absolute;
    top: 3em;
    width: 100%;
    border-radius: 5px;
}

#celek .marketsBtns > div {}

#celek section .tip ul > li {
    padding: 0;
    opacity: 1;
}

#celek .tip .triangle {
    content: "";
    top: 15px;
    left: 43%;
    right: 50%;
    display: inline-block;
    position: absolute;
    z-index: 99;
}

#celek .animate {
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	opacity: 0;
}

#clek .tip {
	display:none;
}

section#fourth ul li.active {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    -ms-animation: none;
    animation: none;
}

div#celek h2 {
    margin: 0;
    padding: 1em 0 0 0;
    font-size: 46px;
    text-align: center;
    font-weight: 100;
}

#celek #fourth .blockFifty {
    text-align: right;
}

div#celek h2,
div#celek p,
div#celek ul,
div#celek li,
div#celek a {
    color: #414243;
    font-family: Segoe UI, Arial, Verdana;
}

div#celek * {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#celek .tip table tr:hover {
    background: #F7F7F7;
    cursor: pointer;
}

#celek .blockFifty {
    display: inline-block;
    max-width: 50%;
    vertical-align: top;
    width: 100%;
}

#celek .blockFifty > img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
    opacity: 0;
}

#celek section#first h2 {
    color: #2f8dcd;
    font-weight: 600;
    font-size: 50px;
}


#celek section > p {
    text-align: center;
    font-size: 18px;
}

section#first {
    background-image: -moz-linear-gradient(white, #f0f0f0);
    background-image: -webkit-linear-gradient(white, #f0f0f0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#f0f0f0));
    background-image: -o-linear-gradient(white, #f0f0f0);
    background-image: linear-gradient(white, #f0f0f0);
}

div#celek ul, div#celek li {
    font-size: 18px;
}

div#celek ul {
    list-style-image: url("https://i.alza.cz/Foto/legendFoto/EN/Files/landing-pages/LpApplikace/img/sablona-assets/liBlack.png");
    padding: 0 0 0 2em;
}

div#celek li {
    padding: 1em 1em 0em 1em;
    position: relative;
}

#celek .btns {
    text-align: center;
}

#celek a.btn.green {
    padding: 1em 2em;
    margin: 1em;
    border-radius: 4px;
    background: #60bb46;
    background: -moz-linear-gradient(#72ce4d, #60bb46);
    background: -webkit-linear-gradient(#72ce4d, #60bb46);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#72ce4d), to(#60bb46));
    background: -o-linear-gradient(#72ce4d, #60bb46);
    background: linear-gradient(#72ce4d, #60bb46);
    border-bottom: 1px solid #18900d;
    color: white;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
}

#celek a.btn.green:hover {
}

#celek .blockFifty .ikonka {
    position: absolute;
    top: 0;
    right: 7em;
}

#celek .blockFifty {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding-top: 4em;
}

#celek .blockFifty .bottom {
    max-width: 130%;
    display: block;
}

div#celek ul, div#celek li {
    font-size: 18px;
}

div#celek ul {
    list-style-image: url("https://i.alza.cz/Foto/legendFoto/EN/Files/landing-pages/LpApplikace/img/sablona-assets/liBlack.png");
    padding: 2em 0 1em 6em;
}

div#celek li {
    padding: 1em 1em 0em 1em;
}


#celek .marketsBtns a {
    padding: 10px 9px;
    display: inline-block;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 5px;
}

#celek .marketsBtns a:hover,#celek .marketsBtns a.active {
    background: white;
    border: 1px solid silver;
}

#celek .marketsBtns a img {
    max-width: 100%;
    display: block;
}

#celek #cinemaAnim nav {
    display: block;
    text-align: center;
    margin-bottom: 3em;
    position: relative;
    z-index: 9;
}

#celek #cinemaAnim nav a {
    padding: 4px 10px;
    display: inline-block;
    border: 1px solid #d6ecfc;
    border-radius: 3px;
    text-decoration: none;
    color: #12100c;
    margin: 1em 0.3em;
    background-color: #d6ecfc;
    position: relative;
    opacity: 0;
}

#celek .cinemas.animated {
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	-moz-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	text-align: center;
	height: 10em;
	position: relative;
	z-index: 1;
	max-width: 100%;
	display: block;
	opacity: 0;
}

#celek .cinemas.animated a {
    text-decoration: none;
    display: inline-block;
    margin: 0em -2em;
}

#celek #cinemaAnim nav a:hover,#celek #cinemaAnim nav a.active {
    background: white;
}

#celek .blocks {
    margin-top: 4em;
}

div#cinemaAnim {
    background-image: url('https://i.alza.cz/Foto/legendFoto/EN/Files/landing-pages/LpApplikace/img/sablona-assets/elipsa.png');
    background-size: 86%;
    background-position: center 2em;
    background-repeat: no-repeat;
    position: relative;
}

#celek .phone.animated {
    text-align: center;
    position: relative;
    z-index: 2;
}

#celek .phone.animated img {
    max-width: 100%;
}

#celek .leftIcons,#celek .rightIcons {
    position: absolute;
    z-index: 0;
}

#celek .leftIcons {
    width: 50%;
    height: 100%;
}

/*Ikonky Levá*/

#celek .leftIcons img:nth-child(1) {
    left: 33%;
    top: 3em;
    position: relative;
}

#celek .leftIcons img:nth-child(2) {
    left: 4%;
    top: 10em;
    position: relative;
}

#celek .leftIcons img:nth-child(3) {
    left: -12%;
    top: 20.5em;
    position: relative;
}

/*Ikonky Pravá*/

#celek .rightIcons {
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
}

#celek .rightIcons img:nth-child(1) {
    right: -58%;
    position: relative;
    top: 43px;
}

#celek .rightIcons img:nth-child(2) {
    right: -67%;
    position: relative;
    top: 140px;
}

#celek .rightIcons img:nth-child(3) {
    right: -61%;
    position: relative;
    top: 280px;
}

#celek .cinemas.animated a:first-child,
#celek .cinemas.animated a:last-child {
    top: 2pc;




    z-index: 1;
}

#celek .cinemas.animated a {
    position: relative;
}

#celek .cinemas.animated a:nth-child(2),
#celek .cinemas.animated a:nth-child(6) {
    top: 1.5pc;
    z-index: 2;
}

#celek .cinemas.animated a:nth-child(3),
#celek .cinemas.animated a:nth-child(5) {
    top: 1pc;
    z-index: 3;
}

#celek .cinemas.animated a:nth-child(4) {
    z-index: 5;
    top: 9.5px;
}

section#third .vyvolavaciCislo {
    background-image: url("https://i.alza.cz/Foto/legendFoto/EN/Files/landing-pages/LpApplikace/img/sablona-assets/pozadishowroom.png");
    background-position: center top;
    overflow: hidden;
    text-align: center;
    height: 100%;

    max-height: 800px;
    opacity: 1;
}

section#third .vyvolavaciCislo > img {
    top: 7em;
    margin-top: 1em;
    left: 7em;
    position: relative;
    max-width: 100%;
    opacity: 0;
}

section#fourth {
    background: #52B6E1;
}

#celek section.animate li {
    opacity: 0;
}

section#fourth h2,
section#fourth p,
section#fourth li {
    color: white;
}

section#fourth ul {
    list-style-image: url("https://i.alza.cz/Foto/legendFoto/EN/Files/landing-pages/LpApplikace/img/sablona-assets/liWhite.png");
    text-align: left;
    display: inline-block;
}

section#fourth ul strong {
    font-weight: 600;
}

.divider.touch {
    text-align: center;
}

section#fifth {
    background-color: #63be47;
    background-image: url("https://i.alza.cz/Foto/LegendFoto/EN/Files/landing-pages/LpApplikace/img/sablona-assets/otisk.png");
    background-position: center center;
    background-repeat: no-repeat;
}

section#fifth h2, section#fifth p {
    color: white;

}

#celek section p strong {
    font-weight: 500;
}

section#fifth {
    padding: 2em 0 4em 0;
}

.divider.touch img {
    display: block;
    margin: 0 auto;

    max-width: 100%;
}

section#sixth ul {
    padding: 0;
    display: block;
    list-style: none;
}

section#sixth ul figure {
    margin: 0;
}

section#sixth ul {
    -webkit-column-count: 2;
    -webkit-column-gap: 1em;
	-moz-column-count: 2;
	-moz-column-gap: 1em;
    column-count: 2;
    column-gap: 1em;
}

section#sixth ul li img,
section#sixth ul li figcaption {
    display: inline-block;
    vertical-align: top;
}

section#sixth ul li figcaption {
    max-width: 59%;
}

section#sixth ul li img {
    max-width: 24%;
    margin: 1em;
}

section#sixth h3,section#sixth strong {
    font-weight: 500;
}

.phoneBottom > img {
	margin: 0 auto;
	display: block;
	max-width: 100%;

	position: relative;
}

section#seventh {
    background: #f5f5f5;
    background: -moz-linear-gradient(#f5f5f5, white);
    background: -webkit-linear-gradient(#f5f5f5, white);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(white));
    background: -o-linear-gradient(#f5f5f5, white);
    background: linear-gradient(#f5f5f5, white);
    padding: 5em 0 15em 0;
}


/*animace*/
#celek .animate.active {
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    opacity: 1;
}

#celek .wrapTip {
    padding: 9em 0 0 0em;
    width: 100%;
    display: block;
    position: absolute;
}

/*animace vysunutí*/
#celek .active .blockFifty > img,
#celek .blockFifty.active > img,
#celek section#third .vyvolavaciCislo.animate.active > img,
#celek .active .phoneBottom > img,
#celek .phoneBottom.animate.active img {
    -webkit-animation: moveFromBottom 0.6s ease-in-out 1;
    -ms-animation: moveFromBottom 0.6s ease-in-out 1;
    animation: moveFromBottom 0.6s ease-in-out 1;
    top: 0;
    opacity: 1;
}

/*animace odrážky*/
#celek .blockFifty > ul li.active {
	-webkit-transition: opacity 0.5s ease-in-out;
	-webkit-animation: moveLeft 0.6s ease-in-out 1;
	-ms-animation: moveLeft 0.6s ease-in-out 1;
	-o-animation: moveLeft 0.6s ease-in-out 1;

	animation: moveLeft 0.6s ease-in-out 1;
	opacity: 1;
	}
	
/*animace navigace*/
#celek #cinemaAnim nav a.animeA {
	-webkit-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	-webkit-animation: navigace 0.1s ease-out;
	-ms-animation: navigace 0.1s ease-out;
	-o-animation: navigace 0.1s ease-out;
	-moz-animation: navigace 0.1s ease-out;
	animation: navigace 0.1s ease-out;
	opacity: 1;
}

#celek #cinemaAnim .active .cinemas.animated {
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-animation: pohyb 0.5s ease-out;
	-ms-animation: pohyb 0.5s ease-out;
	-o-animation: pohyb 0.5s ease-out;
	-moz-animation: pohyb 0.5s ease-out;
	animation: pohyb 0.5s ease-out;
	opacity: 1;
	display: block;
	height: 245px;
}

/*animace ikonky*/
#celek ul.animate li.active img{
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	-ms-transform: scale(1,1);
	-o-transform: scale(1,1);
	transform: scale(1,1);
	-webkit-animation: ikonky 0.5s ease-in-out;
	-moz-animation: ikonky 0.5s ease-in-out;
	-ms-animation: ikonky 0.5s ease-in-out;
	-o-animation: ikonky 0.5s ease-in-out;
	animation: ikonky 0.5s ease-in-out;
	opacity: 1;
	position: relative;
}

/*animace image*/
#celek section#sixth ul > li {
    height: 230px;
}

/*animace z pravé strany*/
#celek .blockFifty > img.animateRight.active {
    -webkit-animation: moveRight 0.6s ease-in-out 1;
    -ms-animation: moveRight 0.6s ease-in-out 1;
    animation: moveRight 0.6s ease-in-out 1;
    position: relative;
    opacity: 1;
}

#celek ul.animate li img {
    opacity: 0;
}

#celek .phoneBottom.animate.active img {
    position: relative;
}

#celek .phoneBottom {
    overflow: hidden;
}

div#celek div[data-tooltip="true"]:hover .tip:before {
    content: "";
    width: 18px;
    height: 15px;
    display: block;
    background-image: url("https://i.alza.cz/Foto/LegendFoto/EN/Files/landing-pages/LpApplikace/img/arrow.png");
    background-position: center;
    background-size: cover;
    margin: 0 auto;
    z-index: 99;
    position: relative;
    margin-bottom: -1px;
}

#celek .marketsBtns > div {
    display: inline-block;
    position: relative;
}

#celek .tip {
    max-width: 250px;
    width: 250px !important;
    display: none;
    margin-top: 0em;
    padding-top: 2em;
    top: 30px;
    left: -44px;
}

#celek .tip table tr td {
    border-bottom: 1px solid silver;
}

.tip table {
    border-spacing: 0;
}

#celek .tip table tr:last-child td {
    border-bottom: 0;
}

#celek .tip table tr td {
    padding: 8px;
}

div#celek .over {
    overflow: hidden;
}

#celek a.btn.green:hover {
    background: #45A928;
}

/*animace pohyb*/
@-webkit-keyframes pohyb {
	from{margin:0 0 -9em 0;}
	to{margin:0 0 -2em 0;}
	}
	
@keyframes pohyb {
	from{margin:0 0 -9em 0;}
	to{margin:0 0 -2em 0;}
	}

/*animace vysunutí*/
@-webkit-keyframes moveFromBottom {
	from{top:-1em}
	to{top:0}
	}

@keyframes moveFromBottom {
	from{top:33em}
	to{top:0}
	}

/*animace odrážky*/
@-webkit-keyframes moveLeft{
	from{left:4em}
	to{left:0}
	}
@keyframes moveLeft {
	from{left:4em}
	to{left:0}
	}

/*animace navig*/
@-webkit-keyframes navigace {
	from{top:-2em;opacity:0}
	to{top:0;opacity:1}
}

@keyframes navigace {
	from{top:-2em;opacity:0}
	to{top:0;opacity:1}
}

/*animace ikonky*/
@-webkit-keyframes ikonky{
	from{-webkit-transform:scale(0,0)}
	to{-webkit-transform:scale(1,1)}
}

@-moz-keyframes ikonky{
	from{-moz-transform:scale(0,0)}
	to{-moz-transform:scale(1,1)}
}

@keyframes ikonky{
	from{transform:scale(0,0)}
	to{transform:scale(1,1)}
}

/*animace pravá strana*/
@-webkit-keyframes moveRight{
    from{left:-30em}
    to{left:0}
}

@-moz-keyframes moveRight{
    from{left:-30em}
    to{left:0}
}

@keyframes moveRight{
    from{left:-30em}
    to{left:0}
}


@media only screen and (max-width: 980px){
	#celek .cinemas.animated {
		height: auto !important;
	}
	#celek .blockFifty .bottom {
		max-width: 100%;
	}


	#celek section#first .blockFifty:first-child {
		vertical-align: bottom;
	}
	
	#celek .blocks {
		margin-top: 4em;
	}
	
	#celek a.btn.green {
		padding: 0.8em 2em;
		width: 40%;
		box-sizing: border-box;
		margin: 1em 0;
	}
	
	div#celek ul {
		margin-left: 2em;
		padding: 0em 0 0 2em;
		margin-top: 0;
	}
	#celek .blockFifty .ikonka {
		right: 0;
	}
	div#cinemaAnim {
		background-size: 100%;
		background-position: center 7em;
	}
}

@media screen and (max-width: 900px){
	#celek .tip ul {
		padding: 0;
	}
	#articlePage #celek section#fourth h2, #articlePage section#fifth h2 {
		font-size: 35px;
		color: white;
		margin-bottom: 1em;
	}

	#articlePage #celek h2 {
		color: black;
		font-size: 35px;
		margin: 0;
		padding: 1em 0;
	}
	#celek * {
		line-height: normal;
	}

	#celek a.btn.green {
		width: 100%;
		display: block;
		text-align: center;
	}
	#celek .blockFifty .bottom {
		width: 100%;
	}
	
	#celek .blockFifty {
		display: block;
		margin: 0 auto;

		max-width: 90%;
	}

	#articlePage div#celek ul,div#celek ul {
		max-width: 500px;
		margin: 0 auto;
		padding: 0;
	}
	
	div#cinemaAnim {
		background:none;
		overflow: hidden;
	}
	#celek .cinemas.animated a {
		margin: 0;
		top: 0 !important;
	}
	#celek #cinemaAnim nav a {
		width: 100%;
		padding: 5px 0;
		margin: 1px 0;
    }
	#celek .blockFifty > img {
		display: block;
		position: relative !important;
	}

	#celek .leftIcons, #celek .rightIcons {
		top: 20%;
	}

	section#sixth ul {
		-webkit-column-count: 1;
		-webkit-column-gap: 0;
		-moz-column-count: 1;
		-moz-column-gap: 0;
		column-count: 1;
		column-gap: 0;
		padding: 0;
	}
	#celek section#sixth ul > li {
		height: auto;
	}
	#celek .tip .triangle {
		top: 20px;
	}
	#celek .phone {
		display: none;
	}

	#celek #cinemaAnim .animate {
		margin-bottom: 0 !important;
	}
}