.animstudio { position: relative; width: 100%; max-width: 1030px; height: 0; padding-bottom: 52.46%; margin-bottom: 40px; background: none; }
.animstudio .background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/o/impuls/animace/studio-back.svg) no-repeat; background-size: contain; }
.animstudio .foreground { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/o/impuls/animace/studio-front.svg) no-repeat; background-size: contain; }

.animstudio .background .holub { position: absolute; right: 29%; top: 31.2%; width: 6%; height: 10%; }

.on-air { position: absolute; top: 70px; right: 60px; width: 55px; height: 25px; z-index: 10; cursor: pointer; background: url(/o/impuls/animace/on-air.svg) no-repeat; background-size: contain }

.btn-radioimpuls, .btn-ceskyimpuls { position: absolute; top: 70px; right: 55px; width: 90px; height: 30px; z-index: 10; cursor: pointer; background: url(/o/impuls/animace/btn-radioimpuls.svg) no-repeat; background-size: contain }
.btn-ceskyimpuls { top: 110px; background-image: url(/o/impuls/animace/btn-ceskyimpuls.svg); }



.animstudio .hrnek {position: absolute;left: 50%;bottom: 49.5%;width: 5%;height: 10%;background: no-repeat;background-size: contain;background-image: url(//1gr.cz/o/impuls/animace/hrnek1.svg)}
.animstudio .hrnek1 { background-image: url(//1gr.cz/o/impuls/animace/hrnek1.svg) }
.animstudio .hrnek2 { background-image: url(//1gr.cz/o/impuls/animace/hrnek2.svg) }
.animstudio .hrnek3 { background-image: url(//1gr.cz/o/impuls/animace/hrnek3.svg) }
.animstudio .hrnek4 { background-image: url(//1gr.cz/o/impuls/animace/hrnek4.svg) }
.animstudio .hrnek5 { background-image: url(//1gr.cz/o/impuls/animace/hrnek5.svg) }

.animstudio .container-postavy { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.animstudio .postava { display: none; position: absolute; }
.animstudio .postava.pritomna { display: block }
.animstudio .postava img { width: 100%; height: auto; }
.animstudio .postava .bublina { display: none; position: absolute; width: 130px; /*min-height: 40px; padding: 2px;*/ padding: 10px; text-align: center; font-size: 12px; font-family: arial; border-radius: 30px; background: #fff no-repeat; background-size: contain; }
.animstudio .postava.mluveni .bublina { display: block; font-family: 'Chivo', sans-serif; }
.animstudio .postava .bublina:before { content: ""; position: absolute; background: no-repeat }

/*pozice 1*/
#postava-honza_danek { width: 34.4%; height: 63%; top: 26.8%; left: 10.3%; }
#postava-vlasta_korec { width: 36%; height: 61%; top: 31%; left: 7%; }
#postava-jan_benesovsky { width: 32.4%; height: 61%; top: 29%; left: 10.3%; }
#postava-fanda_matejicek { width: 32%; height: 60%; top: 30%; left: 11.3%; }
#postava-pavel_kokes { width: 32.6%; height: 63%; top: 28%; left: 10.1%; }
#postava-ludvik_pospisil { width: 37.6%; height: 65%; top: 26.7%; left: 7%; }
#postava-lenka_haluzova { width: 27.5%; height: 60%; top: 31%; left: 12%; }
#postava-alexandr_komarnicky { width: 44.5%; height: 66%; top: 26.5%; left: 8%; }
#postava-zdenek_sekanina { width: 34.5%; height: 65%; top: 28.8%; left: 8.5%; }

#postava-honza_danek .bublina,
#postava-vlasta_korec .bublina,
#postava-jan_benesovsky .bublina,
#postava-fanda_matejicek .bublina,
#postava-pavel_kokes .bublina,
#postava-ludvik_pospisil .bublina,
#postava-lenka_haluzova .bublina,
#postava-alexandr_komarnicky .bublina,
#postava-zdenek_sekanina .bublina { max-width: 160px; bottom: 94%; right: 60%; }

#postava-honza_danek .bublina:before,
#postava-vlasta_korec .bublina:before,
#postava-jan_benesovsky .bublina:before,
#postava-fanda_matejicek .bublina:before,
#postava-pavel_kokes .bublina:before,
#postava-ludvik_pospisil .bublina:before,
#postava-lenka_haluzova .bublina:before,
#postava-alexandr_komarnicky .bublina:before,
#postava-zdenek_sekanina .bublina:before { top: 100%; right: 25px; width: 56px; height: 23px; background-image: url(/o/impuls/animace/bublikus-bot-r.png) }


/*pozice 2*/
#postava-eva_hronkova { width: 36.4%; height: 73%; left: 26.4%; top: 22.8%; }
#postava-monika_dolezalova { width: 38.5%; height: 62%; left: 25%; top: 23%; padding-top: 2.5%; }
#postava-sasa_hemala { width: 35.5%; height: 70%; left: 26.7%; top: 21%; padding-top: 2%; }
#postava-vaclav_komarek { width: 37%; height: 68%; left: 25.5%; top: 23%; }
#postava-mirek_tausig { width: 41.4%; height: 62%; left: 24%; top: 24.8%; padding-top: 2%; }

#postava-eva_hronkova .bublina,
#postava-monika_dolezalova .bublina,
#postava-sasa_hemala .bublina,
#postava-vaclav_komarek .bublina,
#postava-mirek_tausig .bublina { max-width: 160px; bottom: 95%; right: 36%; }

#postava-eva_hronkova .bublina:before,
#postava-monika_dolezalova .bublina:before,
#postava-sasa_hemala .bublina:before,
#postava-vaclav_komarek .bublina:before,
#postava-mirek_tausig .bublina:before { bottom: -18px; right: -10px; width: 50px; height: 42px; background-image: url(/o/impuls/animace/bublikus-2.png) }


/*pozice 3*/
#postava-petr_vondracek { width: 37.3%; height: 65%; left: 39%; top: 19%; }
#postava-petr_vondracek .bublina { max-width: 115px; min-width: 80px; top: 0%; left: 57%; }
#postava-petr_vondracek .bublina:before { top: 100%; right: 20px; border: solid 4px transparent; border-top: 10px #fff }
#postava-petr_vondracek .bublina:after { content: ""; border: solid transparent; border-width: 14px 5px; border-top-color: #fff; position: absolute; bottom: -19px; left: 6px; transform: rotate(23deg); }

/*pozice 4*/
#postava-marek_007 { width: 38.3%; height: 67%; left: 53%; top: 29%; }
#postava-veronika_culkova { width: 29%; height: 55%; left: 55%; top: 36%; }
#postava-jiri_kolbaba { width: 34.7%; height: 63%; left: 55%; top: 31.5%; z-index: 1; }
#postava-ales_ruzicka { width: 34.2%; height: 59%; left: 53%; top: 35.5%; z-index: 1; }
#postava-zpravar { width: 30.8%; height: 61%; left: 56.9%; top: 31.5%; z-index: 1; }
#postava-zpravarka { width: 32.45%; height: 62.3%; left: 56%; top: 34.5%; z-index: 1; }
#postava-zuzana_bubilkova { width: 33.3%; height: 68%; left: 56%; top: 25%; z-index: 1; }
#postava-lada_vonz { width: 490px; height: 459px; left: 525px; top: 118px; z-index: 1; }
#postava-host_muz { width: 41%; height: 70%; left: 52%; top: 27%; z-index: 1; }
#postava-host_zena { width: 33.6%; height: 63%; left: 52.5%; top: 37%; z-index: 1; }

#postava-marek_007 .bublina,
#postava-veronika_culkova .bublina,
#postava-jiri_kolbaba .bublina,
#postava-ales_ruzicka .bublina,
#postava-zpravar .bublina,
#postava-zpravarka .bublina,
#postava-zuzana_bubilkova .bublina,
#postava-lada_vonz .bublina,
#postava-host_muz .bublina,
#postava-host_zena .bublina { max-width: 110px; bottom: 78%; left: 75%; }

#postava-marek_007 .bublina:before,
#postava-veronika_culkova .bublina:before,
#postava-jiri_kolbaba .bublina:before,
#postava-ales_ruzicka .bublina:before,
#postava-zpravar .bublina:before,
#postava-zpravarka .bublina:before,
#postava-zuzana_bubilkova .bublina:before,
#postava-lada_vonz .bublina:before,
#postava-host_muz .bublina:before,
#postava-host_zena .bublina:before { width: 11%; height: 40%; left: 95.5%; top: 30%; z-index: -1; margin: 0 0 -18px -2px; background-image: url(/o/impuls/animace/bublikus-3.png); background-size: contain; }

#postava-marek_007 .bublina:after,
#postava-veronika_culkova .bublina:after,
#postava-jiri_kolbaba .bublina:after,
#postava-ales_ruzicka .bublina:after,
#postava-zpravar .bublina:after,
#postava-zpravarka .bublina:after,
#postava-zuzana_bubilkova .bublina:after,
#postava-lada_vonz .bublina:after,
#postava-host_muz .bublina:after,
#postava-host_zena .bublina:after { content: ""; border: solid; border-width: 4px 4px; border-color: #fff transparent transparent #fff; position: absolute; top: 100%; left: 27px; }


/*debug prvky*/
.debug-top {margin-top:1em; overflow:hidden}
.debug-top h4 {float:left; margin-top:.3em}
.casomira { float: right; /* width: 70px; */ padding: 4px; border: solid 2px #ddf; }
#casomira { text-align: right; display: inline-block; width: 45px; }

.debug-box { clear: both; width:100%; max-width: 1000px; }
.debug-box form { float: left; margin-bottom:1em }
.debug-box form h4 { margin-bottom: 5px }
.debug-box label { display: inline-block }
.debug-box label span { display: block }


@media (max-width:1000px) {
	.animstudio { transform: scale(1.4); transform-origin: 50% 0%; margin-bottom: 30%;; }
	.animstudio .postava.mluveni .bublina { display: none }
	.on-air, .btn-radioimpuls, .btn-ceskyimpuls { display: none }
}