@font-face {
  font-family: 'LatoBlack';
  src: url('../fonts/Lato-Black.eot');
  src: url('../fonts/Lato-Black.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Lato-Black.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

.grid {
	max-width:68em;
	list-style: none;
	margin: 30px auto;
	padding: 0;
}




.grid li {
    display: list-item;
	display: block;
	float: left;
  margin-bottom:25px;
	padding:20px;
	width:31%;
	opacity: 0;background:#f9f9f9;text-align:center;border-radius:4px;
}
.grid li:hover {opacity: 0;background:#ffffff}
.negrid p{text-align:left;/*text-indent:0 !important;*/}
.negrid li {
    display: list-item;
    float: none;
    margin-bottom: 25px;
    padding: 20px;
    width:95%;
    font-size:1.2em;
    opacity: 1 !important;
    text-align: left;
    border-radius:0px;
}

.negrid li ol {
    display: list-item;
    float: none;
    margin-bottom: 25px;
    padding: 20px;
    width:95%;
    font-size:1.2em;
    opacity: 1 !important;
    text-align: left;
    border-radius:0px;
}
.negrid ol li p{font-size:1em}
.negrid ol{list-style-type:upper-roman;
    margin-block-start: 1em;
    margin-block-end:0em;
    margin-inline-start:0px;
    margin-inline-end: 0px;
    padding-inline-start:0px;}
.negrid ol li ol{list-style:decimal !important;
    margin-block-start: 1em;
    margin-block-end:0em;
    margin-inline-start:0px;
    margin-inline-end: 0px;
    padding-inline-start:0px;}

.negrid ol.podminkyI li{
    list-style-type:decimal;
    display: list-item;
    float: none;
    margin-bottom:5px;
    padding:20px 10px 10px 20px;
    width:95%;
    font:0.8em LatoBlack;
    opacity: 1 !important;
    text-align: left;text-transform:uppercase;line-height:1em;
    border-radius:4px;background:#EFEFEF !important;}
.negrid ol.podminkyI li em{font:1.4em The Met Serif Web-Italic !important;text-transform:none;line-height:1em !important;}
.negrid ol.podminkyI li:hover{
    background:#ffffff !important;}
.negrid ol.podminkyI li.prvni{
    font-size:1em;line-height:1.2em}
.negrid ol.podminkyI li ul{margin-left:10px !important;padding:0;border:0px solid red}
.negrid ol.podminkyI li ul.pismenkovy li{
    list-style-type:upper-alpha !important;
    display: list-item;
    float: none;
    margin-bottom:5px;
    padding:10px;
    width:95%;
    font:1.1em LatoBlack;
    opacity: 1 !important;
    text-align: left;text-transform:uppercase;line-height:1em;
    border-radius:4px;background:none !important;}
li.ocbchodniPodminky a H3,li.ocbchodniPodminky a p{color:#6b7381 !important;}
li.ocbchodniPodminky:hover a H3,li.ocbchodniPodminky:hover a p{color:#000000 !important;}



@media (max-width:500px) {
.negrid p{text-align:left;/*text-indent:0 !important;*/}
.negrid li {
    float: none;
    margin-bottom: 25px;
    padding: 20px;
    width:95%;
    font-size:1.2em;
    opacity: 1 !important;
    text-align: left;
    border-radius:0px;
}
.negrid li ol {
    display: list-item;
    float: none;
    margin-bottom: 25px;
    padding: 20px;
    width:95%;
    font-size:1.2em;
    opacity: 1 !important;
    text-align: left;
    border-radius:0px;
}
.negrid ol li p{font-size:0.8em}

.negrid ol{list-style-type:upper-roman !important;
    margin-block-start: 1em;
    margin-block-end:0em;
    margin-inline-start:0px;
    margin-inline-end: 0px;
    padding-inline-start:0px;
    }
.negrid ol li ol{list-style-type:decimal !important;
    margin-block-start: 1em;
    margin-block-end:0em;
    margin-inline-start:0px;
    margin-inline-end: 0px;
    padding-inline-start:0px;
    }
.negrid ol.podminkyI li.prvni{font-size:1em;line-height:1em}
    }
.grid li.bigImg{display:block;float:left !important;width:50% !important;}
.grid li.smImg {
	display: block;
	float: left;
  margin-bottom:25px !important;
	padding:20px;
	width:31%;
	opacity: 0;text-align:center !important
}




.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}

.grid li a,
.grid li img {
	outline: none;
	border: none;
  /*display: block;*/
	max-width: 100%;text-align:center !important;margin-bottom:10px;
}
.grid li a{color:#6b7381}
.grid li:hover a{color:#000000}



.negrid li a,
.negrid li img {
	outline: none;
	border: none;
  display: inline-block;
	max-width: 100%;text-align:center !important;margin-bottom:0px;text-indent:0;border:0px solid red
}
body.Ccopyright .grid li a{display:inline-block;margin:0;text-indent:0;}

/*.grid li p.text{text-align:left;}*/


/* Effect 1: opacity */
.grid.effect-1 li.animate {
	-webkit-animation: fadeIn 0.65s ease forwards;
	animation: fadeIn 0.65s ease forwards;
}

@-webkit-keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}

@keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}

/* Effect 2: Move Up */
.grid.effect-2 li.animate {
	-webkit-transform: translateY(200px);
	transform: translateY(200px);
	-webkit-animation: moveUp 0.65s ease forwards;
	animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

/* Effect 3: Scale up */
.grid.effect-3 li.animate {
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: scaleUp 0.65s ease-in-out forwards;
	animation: scaleUp 0.65s ease-in-out forwards;
}

@-webkit-keyframes scaleUp {
	0% { }
	100% { -webkit-transform: scale(1); opacity: 1; }
}

@keyframes scaleUp {
	0% { }
	100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

/* Effect 4: fall perspective */
.grid.effect-4 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-4 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	-webkit-animation: fallPerspective .8s ease-in-out forwards;
	animation: fallPerspective .8s ease-in-out forwards;
}

@-webkit-keyframes fallPerspective {
	0% { }
	100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

@keyframes fallPerspective {
	0% { }
	100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

/* Effect 5: fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-5 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-5 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50% -300px;
	transform-origin: 50% 50% -300px;
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
	-webkit-animation: fly .8s ease-in-out forwards;
	animation: fly .8s ease-in-out forwards;
}

@-webkit-keyframes fly {
	0% { }
	100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@keyframes fly {
	0% { }
	100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
}

/* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-6 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-6 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: rotateX(-80deg);
	transform: rotateX(-80deg);
	-webkit-animation: flip .8s ease-in-out forwards;
	animation: flip .8s ease-in-out forwards;
}

@-webkit-keyframes flip {
	0% { }
	100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@keyframes flip {
	0% { }
	100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
}

/* Effect 7: helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-7 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-7 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	-webkit-animation: helix .8s ease-in-out forwards;
	animation: helix .8s ease-in-out forwards;
}

@-webkit-keyframes helix {
	0% { }
	100% { -webkit-transform: rotateY(0deg); opacity: 1; }
}

@keyframes helix {
	0% { }
	100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
}

/* Effect 8:  */
.grid.effect-8 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-8 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: scale(0.4);
	transform: scale(0.4);
	-webkit-animation: popUp .8s ease-in forwards;
	animation: popUp .8s ease-in forwards;
}

@-webkit-keyframes popUp {
	0% { }
	70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(1); opacity: 1;
  }
}

@keyframes popUp {
	0% { }
	70% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1;
  }
}

@media screen and (max-width: 900px) {
	.grid li {
		width:46%;
	}
@media screen and (max-width:900px) {
	.negrid li {
		width:96% !important;
	}

}
@media screen and (max-width:1024px) {
	.grid li {
		width:46%;
	}
@media screen and (max-width:1024px) {
	.negrid li {
		width:96% !important;
	}


}
@media screen and (max-width:1060px) {
	.thunderbird1{display:none;}
.thunderbird1b{display:block;}
#katalogy-cokoladove-probuzeni {
    background: #ffffff url(../images/katalogy-cokoladove-probuzeni_dsc_2995.jpg) no-repeat -402px -165px;
}
#ajala_tmava-70-procent {
    margin: 10px 0 0 0px;
    background: url(../images/cokoladove-probuzeni/velke/ajala_tmava-70-procent.jpg) no-repeat -553px -35px;
    vertical-align: bottom;
    text-align: center;
}
#ajala_tmava-85-procent {
    margin: 10px 0 0 0px;
    background: url(../images/cokoladove-probuzeni/velke/ajala_tmava-85-procent.jpg) no-repeat -553px -35px;
    vertical-align: bottom;
    text-align: center;
}
#ajala_tmava-70-procent_rustik {
    margin: 10px 0 0 0px;
    background: url(../images/cokoladove-probuzeni/velke/ajala_tmava-70-procent_rustikalni.jpg) no-repeat -553px -35px;
    vertical-align: bottom;
    text-align: center;
}

#ajala_tmava-70-procent_pepr {
    margin: 10px 0 0 0px;
    background: url(../images/cokoladove-probuzeni/velke/ajala_tmava-70-procent_pepr.jpg) no-repeat -553px -35px;
    vertical-align: bottom;
    text-align: center;
}

#ajala_tmava-70-procent_nibsy {
    margin: 10px 0 0 0px;
    background: url(../images/cokoladove-probuzeni/velke/ajala_tmava-70-procent_nibsy.jpg) no-repeat -553px -35px;
    vertical-align: bottom;
    text-align: center;
}

#ajala_tmava-70-procent_morska-sul {
    margin: 10px 0 0 0px;
    background: url(../images/cokoladove-probuzeni/velke/ajala_tmava-70-procent_morska-sul.jpg) no-repeat -553px -35px;
    vertical-align: bottom;
    text-align: center;
}

#ajala_tmava-70-procent_chilli {
    margin: 10px 0 0 0px;
    background: url(../images/cokoladove-probuzeni/velke/ajala_tmava-70-procent_chilli.jpg) no-repeat -553px -35px;
    vertical-align: bottom;
    text-align: center;
}

#ajala_tmava-70-procent_kvety-a-pomerance {
    margin: 10px 0 0 0px;
    background: url(../images/cokoladove-probuzeni/velke/ajala_tmava-70-procent_kvety-a-pomerance.jpg) no-repeat -553px -35px;
    vertical-align: bottom;
    text-align: center;
}

#ajala_tmava-85-procent_pistacie-a-maliny {
    margin: 10px 0 0 0px;
    background: url(../images/cokoladove-probuzeni/velke/ajala_tmava-63-procent_pistacie-a-maliny.jpg) no-repeat -553px -35px;
    vertical-align: bottom;
    text-align: center;
}

#ajala_tmava-55-procent_kokosovy-krem {
    margin: 10px 0 0 0px;
    background: url(../images/cokoladove-probuzeni/velke/ajala_tmava-55-procent_kokosovy-krem.jpg) no-repeat -553px -35px;
    vertical-align: bottom;
    text-align: center;
}
}

@media screen and (max-width:750px) {
	.grid li {
		width:44%;
	}
}


@media screen and (min-width:800px) {

	}




@media screen and (max-width:600px) {
	.grid {
		width: 100%;
	}
 .grid li {
		width: 94%;
	}
  .column2 {
    margin:15px;
    -moz-column-count: 1;
    -webkit-column-count:1;
    column-count:1;
}
.lb-outerContainer,.lightbox .lb-image {
    width:100% !important;height:98% !important;
}
.container > header{padding:15px !important;}
/*#lightboxOverlay{height:100% !important;}*/
#lightbox{position:fixed !important;top:100px !important;left:10px !important;width:95%;}
.lightboxOverlay{/*position:fixed !important;top:50px !important;height:390px !important;*/}
.container{height:100% !important;}
body{height:100% !important;}

/*#katalog-navigace{display:none}*/
.nahledVelky{height:505px !important;}

#katalogy-skrin-tety-ze-stokravy
{background:#ffffff url(../images/skrin-tety-ze-stokravy_velka_dsc_0528.jpg) no-repeat -165px 0px;background-size:247% 121%;}
#katalogy-posta{background:#ffffff url(../images/galerie-cokolad-a-miniatury_posta_dsc_0235.jpg) no-repeat -465px -50px;}
#zlomky-herakleitovy{background:#ffffff url(../images/zlomky-herakleitovy_01.jpg) no-repeat -144px -4px;background-size:271% 119%;}
#dobre-chutnani-z-tabora-150{background:#ffffff url(../images/dobre-chutnani-z-tabora-150.jpg) no-repeat -144px -4px;background-size:271% 119%;}
#dobre-chutnani-z-tabora-90{background:#ffffff url(../images/dobre-chutnani-z-tabora-90.jpg) no-repeat -234px -150px;}
#pro-seriozni-hospodyni{background:#ffffff url(../images/pro-seriozni-hospodyni.jpg) no-repeat -109px 0px;background-size: 245% 119%;}
#cokoladove-orisky-boby{background:#ffffff url(../images/cokoladove-orisky-boby.jpg) no-repeat -144px -4px;background-size:271% 119%;}
#cokoladove-orisky-nibsy{background:#ffffff url(../images/cokoladove-orisky-nibsy.jpg) no-repeat -144px -4px;background-size:271% 119%;}
#panela-rapadura{background:#ffffff url(../images/panela-rapadura.jpg) no-repeat -144px -4px;background-size:271% 119%;}
#mazana-od-filipa{background:#ffffff url(../images/je-dulezite-miti-mazanou.jpg) no-repeat -126px 0px;background-size: 245% 119%;}
#kralovska-stoprocentni{background:#ffffff url(../images/kralovska-stoprocentni.jpg) no-repeat -227px -150px;}
#kralovska-jubilejni{background:#ffffff url(../images/kralovska-jubilejni.jpg) no-repeat -220px -150px;}
#kralovska-pro-kralovnu-sladsi{background:#ffffff url(../images/kralovska-pro-kralovnu-sladsi.jpg) no-repeat -234px -150px;}
#katalogy-main{background:#ffffff url(../images/galerie-cokolady-a-miniatury_dsc_0280.jpg) no-repeat -330px -138px}
#skrin-tety-ze-stokravy{background: url(../images/skrin-tety-ze-stokravy_dsc_0528.jpg) no-repeat -53px -5px;}

#jakobjednat #katalogy-logo{top: 90px;left: 6px;}
.thunderbird{overflow:scroll;width:95%;}

.vizual{position:static;width:100%;margin:0px}
#katalog-navigace{position: fixed;left:40px !important;width:50px !important;height:35px;margin: -20px -18px 0 0;background-color: rgba(62,9,11,1) !important;background:#780000 url(../images/icon_menu.png) no-repeat 10px 9px;border-radius:0 0 4px 4px;}
#katalog-navigace:hover{left:7px !important;width:96% !important;height:60%;background-color: rgba(62,9,11,0.8);background-image:none;}

#katalog-navigace .navigOverflow{position:absolute;top:40px;right:10px;height:0px;overflow:hidden;}
#katalog-navigace:hover .navigOverflow{overflow:hidden;width:90% !important;height:80% !important;}
/*#katalog-navigace:hover .navigOverflow{overflow:hidden;width:63%;height:80% !important;border:1px solid lime;}*/
.katalog-bloky{width:100%;border:0 !important;}


div.logo-grey{width:97% !important;margin:10px;text-align:center !important;}
#katalog-titul,#tit-katalog{width:100%}
#tit-katalog{background: url(../images/titulek_katalogy.png) no-repeat 20px -1px;background-size:89% 53%;}
#katalogy-logo{margin:-13px 0 0 81px !important;}
.pata{width:88% !important;}
.katalog-hlavicka{width:330px;margin: 10px 0 0 0px;background-color: rgba(62,9,11,0.3);}


#cokoladove-probuzeni, #skrin-tety-ze-stokravy, #luxusni-gratulace, #filcovinky, #miniatury, #magnetky {
    position: relative;float: left;width: 330px;height: 350px;margin: 0px 0 0 0px;border-radius:4px;}
.katalog-pripravujeme{width:329px;margin: 10px 0 0 0px;border-radius:0 0 2px 2px}
#cokoladove-probuzeni{background-position:-140px -5px;}
#luxusni-gratulace{background-position:-100px -5px;}
#filcovinky{background-position:-100px -5px;}
#miniatury{background-position:-100px -5px;}
#magnetky{background-position:-100px -5px;}

}



.grid ul.prehlednyText{list-style: decimal !important;}