@font-face { font-family: 'thetaptap'; src: url('./font/thetaptapnew.eot'); src: url('./font/thetaptapnew.eot?#iefix') format('embedded-opentype'), url('./font/thetaptapnew.woff') format('woff'), url('./font/thetaptapnew.ttf') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'thetaptap'; src: url('./font/thetaptap_poster.eot'); src: url('./font/thetaptap_poster.eot?#iefix') format('embedded-opentype'), url('./font/thetaptap_poster.woff') format('woff'), url('./font/thetaptap_poster.ttf') format('truetype'); font-weight: normal; font-style: normal; }

body { margin:0; padding:0; border:0; height:100vh; width:100vw; background:#f4f2e6; color:#454a4d; font-size:5vh; font-family:Verdana; overflow-x:hidden; }

.oranzova	{ color:#ed7860; }
.tyrkysova	{ color:#48929b; }
.modra_1	{ color:#bed9de; }
.modra_2	{ color:#71afba; }
.modra_3	{ color:#518ca0; }
.modra_4	{ color:#37a2a1; }
.ruda		{ color:#8a0212; }
.cervena	{ color:#e83d21; }

.hidden { display:none !important; }
.ttup { text-transform:uppercase !important; }
.fl { float:left !important; }
.fr { float:right !important; }
.cb { clear:both !important; }

h1,h2,h3,h4,h5,h6 { font-family:'thetaptap'; line-height:1.25em; font-weight:normal; margin:0; padding:0; letter-spacing:0; }
h2 { font-size:8.75vh; }
h3 { font-size:6.25vh; }
h4 { font-size:5.0vh; }
h5 { font-size:3.75vh; }
h6 { font-size:2.5vh; }
p { font-size:2.5vh; margin:0; line-height:1.5em; } 
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; }


#ruler { position:absolute; left:0; top:0; width:100vw; height:100vh; opacity:0; z-index:0; }
#debug { display:none; position:fixed; top:0; left:0; background:rgba(0,0,0,0.5); padding:1vw; font-size:2vw; color:#fff; }
#scroller { height:1050vh; }
#scroller > .ruler { width:100vw; height:50vh; border-bottom:2px dotted #f00; margin-bottom:-2px; font-size:4vw; color:#f00; }
#content { position:fixed; top:0; left:0; width:250vw; height:800vh; z-index:2; }
#content > .helper { position:absolute; left:0; top:0; width:100vw; height:100vh; border:2px dashed #000; margin:-2px; font-size:4vw; text-indent:10vw; }
#content .path { width:12vh; height:12vh; line-height:12vh; text-align:center; margin:-6.1vh; border:0.1vh dashed #000; border-radius:6vh; position:absolute; }
#content .object { display:block; position:absolute; }

#content .sipka { display:block; left:-50vw; top:-50vh; z-index:20; position:absolute; background:url('./img/TTT-detem-sipky_1-6.svg') 0 0 no-repeat; background-size:auto 100%; cursor:pointer; opacity:0; -webkit-transition: opacity 500ms; transition: opacity 500ms; }
#content .sipka_1 { width:20.0vh; height:37.5vh; background-position: 0.00% 50%; background-size:auto 100%; margin-left:  0.0vh; margin-top:-37.0vh; }
#content .sipka_2 { width:37.5vh; height:12.5vh; background-position:15.15% 50%; background-size:auto 310%; margin-left:-37.5vh; margin-top:-12.2vh; } 
#content .sipka_3 { width:32.6vh; height:22.1vh; background-position:37.00% 58%; background-size:auto 170%; margin-left:  0.0vh; margin-top: -3.0vh; }
#content .sipka_4 { width:33.0vh; height:18.4vh; background-position:57.70% 50%; background-size:auto 204%; margin-left:-33.0vh; margin-top:-18.4vh; }
#content .sipka_5 { width:37.5vh; height:14.5vh; background-position:80.00% 50%; background-size:auto 260%; margin-left:  0.0vh; margin-top: -9.8vh; }
#content .sipka_6 { width:31.2vh; height:25.2vh; background-position:100.1% 47%; background-size:auto 149%; margin-left: -0.8vh; margin-top:-25.2vh; }
#content #sipka_0 { left:89vh; top:73vh; }
#content #sipka_1 { left:calc(150vw - 44vh); top:23.5vh;  }
#content #sipka_2 { left:142vw; top:130vh; -webkit-transform:rotate(-60deg); transform:rotate(-60deg); }
#content #sipka_3 { left:199vw; top:289vh; -webkit-transform:rotate(-70deg); transform:rotate(-70deg); }
#content #sipka_4 { left:230vw; top:327vh; -webkit-transform:rotate(-30deg); transform:rotate(-30deg); }
#content #sipka_5 { left:calc(50vw + 30vh); top:322vh; }
#content #sipka_7 { left:196vw; top:481vh; }
#content .sipka.active { opacity:1; }


#content #ttt_ruka_pozadi { width:110vw; right:140vw; top:0; height:100vh;}
#content #ttt_ruka_cesta { height:120vh; right:calc(100vw - 52vh); top:5vh; z-index:8; }
#content #ttt_ruka_stin { height:40vh; width:126vh; left:-43vh; top:67vh;  }
#content #ttt_ruka { height:70vh; width:115vh; left:0; top:30vh;  overflow:hidden; z-index:9; }
#content #ttt_ruka > img { height:140vh; position:absolute; top:0; left:-18vh; }
#content #ttt_ruka.cvrnk > img { top:-74vh; }
#content #ttt_ruka_kybl { left:calc(100vw - 60vh); top: 10vw; height:40vh; }
#content #ttt_facebook_kybl { position:absolute; left:calc(100vw - 29vh); top:calc(10vw + 10vh); display:block; width:10vh; height:10vh; background:url('./img/TTT-detem-FB.png') 0% 100% no-repeat; background-size:200% 200%; cursor:pointer; z-index:15; opacity:0.8; -ms-transition: opacity 200ms ease; transition: opacity 200ms ease; }
#content #ttt_facebook_kybl:hover { opacity:1; }


#content #ttt_logo { width:70vh; height:70vh; left:150vw; top:10vh; margin-left:-35vh; }
#content #ttt_logo_hrabe { width:15vw; right:56vw; top:6vh; } 
#content #ttt_logo_mrak { height:50vh; right:45vw; top:100vh; margin-top:-50vh; }
#content #ttt_logo_text { left:calc(200vw - 63vh); top:78vh; width:32vh; height:12vh; }
#content #ttt_logo_text > h4 { text-indent:-10vh; font-weight:bold; }

#content #ttt_prase_pozadi { width:100vw; height:100vh; right:50vw; top:100vh; }
#content #ttt_prase_za		{ height:50.0vh; left:calc(150vw - 63vh); top:150vh; cursor:pointer; }
#content #ttt_prase_pred	{ height:44.9vh; left:calc(150vw - 65vh); top:150vh; cursor:pointer; z-index:12; }
#content #ttt_prase_oko		{ height:5vh; width:6vh; left:calc(150vw - 57vh); top:162vh; overflow:hidden; z-index:13; background:#rgba(0,0,0,0.5)}
#content #ttt_prase_oko > img { display:block; height:100%; margin-left:10%; }
#content #ttt_prase_oko.zavrene > img { margin-left:-135%; }
#content #ttt_prase_text { right:50vw; margin-right:20vh; top:115vh; width:50vh; height:22.5vh; text-align:center; }
#content #ttt_prase_text > h2 { line-height:1em; font-weight:bold; }
#content #ttt_prase_text > h4 { line-height:1em; font-size:6.5vh; }
#content #ttt_prase_text > h3 { line-height:1em; font-size:7vh; }
/*
#content #ttt_prase > #ttt_prase_horni_dira { height:14%; width:16%; position:absolute; left:36%; top:0; overflow:hidden; }
#content #ttt_prase > #ttt_prase_horni_dira > img { display:block; height:100%; margin-left:25%; }
#content #ttt_prase > #ttt_prase_zadni_dira { display:none; height:9%; position:absolute; left:36.5%; top:40.5%;  }
#content #ttt_prase.horni_dira > #ttt_prase_horni_dira > img { margin-left:-86%; }
#content #ttt_prase.zadni_dira > #ttt_prase_zadni_dira { display:block; }
*/

#content #ttt_schody { width:150vw; height:100vh; left:100vw; top:200vh; }
#content #ttt_schody > #ttt_schody_pozadi { display:block; width:150vw; height:100vh; }
#content .koule { position:absolute; left:-100vh; top:-100vh; width:20vh; height:20vh; font-size:4vh; margin:-10vh; text-align:center;  }
#content .koule { -o-transition: margin-left 2000ms cubic-bezier(0.075, 0.82, 0.165, 1); -ms-transition: margin-left 2000ms cubic-bezier(0.075, 0.82, 0.165, 1); -webkit-transition: margin-left 2000ms cubic-bezier(0.075, 0.82, 0.165, 1); transition: margin-left 2000ms cubic-bezier(0.075, 0.82, 0.165, 1); }
#content .koule > em { display:block; position:absolute; top:94%; left:0; width:100%; height:12%; background:url('./img/TTT-detem-stin-koule.svg#svgView(preserveAspectRatio(none))') 0 0 no-repeat; background-size:100% 100%; }
#content .koule > div { width:20vh; height:20vh; position:absolute; left:0; top:0; -webkit-border-radius:10vh; -moz-border-radius: 10vh; border-radius: 10vh;  }
#content .koule > span { font-family:'thetaptap'; display:block; position:absolute; top:50%; line-height:1em; margin-top:-0.8em; width:100%; color:#fff; opacity:0.9; text-transform:uppercase; }
#content .koule > span { -o-transition: -o-transform 2000ms cubic-bezier(0.075, 0.82, 0.165, 1); -ms-transition: -ms-transform 2000ms cubic-bezier(0.075, 0.82, 0.165, 1); -webkit-transition: -webkit-transform 2000ms cubic-bezier(0.075, 0.82, 0.165, 1); transition: transform 2000ms cubic-bezier(0.075, 0.82, 0.165, 1);  }
#content .koule > span > strong { font-size:1.5em; line-height:0.8em; font-weight:normal; }
#content .koule > strong { display:block; width:20vh; position:absolute; left:0; top:0; height:20vh; background:url('./img/TTT-detem-kulicka-odlesky.png') 50% 50% no-repeat; background-size:120% 120%;  opacity:0.4; -webkit-border-radius:10vh; -moz-border-radius: 10vh; border-radius: 10vh; }
#content #ttt_koule_0 { font-size:5.0vh; z-index: 9; }	#content #ttt_koule_0 > div	{ background:#fac226; }	#content #ttt_koule_0 > span	{ color:#0d8b8a; }
#content #ttt_koule_1 { font-size:4.0vh; z-index: 9; }	#content #ttt_koule_1 > div	{ background:#7f9da8; }	#content #ttt_koule_1 > span	{ color:#eff7f9; }
#content #ttt_koule_2 { font-size:5.0vh; z-index:11; }	#content #ttt_koule_2 > div	{ background:#cd574d; }	#content #ttt_koule_2 > span	{ color:#ebf5f7; }
#content #ttt_koule_3 { font-size:4.0vh; z-index: 9; }	#content #ttt_koule_3 > div	{ background:#bc98b9; }	#content #ttt_koule_3 > span	{ color:#ece7db; }
#content #ttt_koule_0.bounced > span { -webkit-transform: rotate(-0.5rad); -ms-transform: rotate(-0.5rad); transform: rotate(-0.5rad); }
#content #ttt_koule_3.bounced > span { -webkit-transform: rotate(0.25rad); -ms-transform: rotate(0.25rad); transform: rotate(0.25rad); }
#content #ttt_schody_text { left:72vw; top:9vh; width:68vh; height:20vh; text-align:center; }
#content #ttt_schody_text > h5 { font-size:5vh; }
#content #ttt_schody_text > h2 { vertical-align:top; display:inline-block; font-size:20.0vh; margin-top:-3vh; }
#content #ttt_schody_text > div { vertical-align:top; display:inline-block; margin-top:1vh; text-align:left; }
#content #ttt_schody_text > div > h3 { margin-bottom:-2vh; }
#content #ttt_schody_text > div > h2 { font-size:9.0vh; }

#content #ttt_buben_pozadi { right:0; top:300vh; width:196.5vw; height:100vh; }
#content #ttt_buben_front { height:40vh; width:70vw; right:-5vw; top:360vh; z-index:12; }
#content #ttt_buben_back  { height:40vh; width:70vw; right:-5vw; top:360vh; z-index:8; }
#content #ttt_buben_text { left:156vw; top:328vh; width:85vh; height:15vh; text-align:center; }
#content #ttt_buben_text h4 { font-size:6vh; }

#content #ttt_klouzacka_za   { left:50vw; height:180.7vh; top:319vh; z-index:8; }
#content #ttt_klouzacka_pred { left:50vw; height:166.0vh; top:329vh; z-index:12; }
#content #ttt_klouzacka_text { right:calc(100vw - 7vh); top:306vh; width:102vh; height:36vh; text-align:center; }
#content #ttt_klouzacka_text h2 { font-size:8vh; line-height:0.9em; }

#content #ttt_dulek { width:200vw; left:50vw; top:400vh; height:200vh; background:#E7E4D6; }
#content #ttt_dulek > #ttt_dulek_dira_pozadi { width:250vw; height:187vh; position:absolute; left:0vw; top:0vh; background-color: #f39d86; background-image: -webkit-linear-gradient(top, #f39d86, #775345); background-image: linear-gradient(to bottom, #f39d86, #775345); }
#content #ttt_dulek > #ttt_dulek_pozadi { position:absolute; left:calc(172vw - 344.5vh); top:0; display:block; width:400vh; height:107vh; margin-top:90vh; }
#content #ttt_dulek > #ttt_dulek_cover_left { position:absolute; left:0; width:calc(172vw - 344.5vh); top:0; display:block; height:107vh; margin-top:90vh; background:#E7E4D6; }
#content #ttt_dulek > #ttt_dulek_cover_right { position:absolute; left:calc(172vw + 55.5vh); width:100vw; top:0; display:block; height:107vh; margin-top:90vh; background:#E7E4D6; }
#content #ttt_dulek > #ttt_dulek_mraky { left:70vw; width:120vw; top:-7vh; }
#content #ttt_dulek_mraky_text { right:5vw; top:425vh; width:90vw; height:18vh; text-align:center; }
#content #ttt_dulek_mraky_text > h2 { line-height:1em; color:#226f89; }
#content #ttt_dulek_dira_text	{ position:absolute; left:160vw; top:510vh; width:40vw; height:80vh; text-align:left; text-align:center; }
#content #ttt_dulek_dira_text > a.prispejte { display:block; width:50vh; margin:0 auto 0 auto; text-align:center; }
#content #ttt_dulek_dira_text > a.prispejte > img { display:block; width:44vh; margin:0 auto 0 auto; }
#content #ttt_dulek_dira_text > a.prispejte > strong { display:inline-block; text-align:center; padding:5vh 1vh 0 1vh; font-family:'thetaptap'; font-size:6vh; }
#content #ttt_dulek_dira_text > a.prispejte > span { display:block; height:1vh; width:44vh; margin:0 auto 0 auto; background:url('./img/TTT-detem-podtrzitko.png') 0 100% no-repeat; background-size:100% auto; animation: blinker 1s linear infinite; }
#content #ttt_dulek_dira_text > a.prispejte:hover > span { animation:none; }
#content #ttt_dulek_dira_text > h5 { text-align:center; margin-top:12vh; font-weight:bold; }
#content #ttt_dulek_dira_text > #ttt_facebook_dira { margin:2vh auto; }
/* animation: blinker 1s linear infinite; */

#content #ttt_facebook_dira { display:block; width:10vh; height:10vh; margin:2vh auto 2vh auto; background:url('./img/TTT-detem-FB.png') 0% 0% no-repeat; background-size:200% 200%; cursor:pointer; opacity:0.8; -ms-transition: opacity 200ms ease; transition: opacity 200ms ease; }
#content #ttt_facebook_dira:hover { opacity:1; }

#content #ttt_dulek_dira_sipka { position:absolute; left:200vw; top:590vh; margin-left:-1.5vh; z-index:10; display:block; margin:0px auto; width:3vh; height:5.2vh; background:url('./img/TTT-detem-sipicka.png') 50% 50% no-repeat; background-size:100% 100%; }

#content #ttt_svitek { left:150vw; top:600vh; background:#e8e4d6; height:150vh; position:relative; }
#content #ttt_svitek_pozadi { display:block; position:absolute; left:0; bottom:-9vw; width:100vw; }
#content .ball { position:absolute; z-index:10; left:82vh; top:77vh; width:12vh; height:12vh; margin:-6vh; }
#content .ball > em 	{ display:block; width:100%; height: 25%; background:url('./img/TTT-detem-kulicka-stin.png'   ) 0 0 no-repeat; background-size:100% 100%; position:absolute; top:0; left:0; margin-top:81%; opacity:0.5;  -webkit-transition: opacity 200ms ease; transition: opacity 200ms ease; }
#content .ball > svg 	{ display:block; width:100%; height:100%; position:absolute; top:0; left:0; }
#content .ball > span 	{ display:block; width:100%; height:100%; background:url('./img/TTT-detem-kulicka-odlesky.png') 0 0 no-repeat; background-size:100% 100%; position:absolute; top:0; left:0; opacity:0.5; }
#content #ball > span 	{ -webkit-transition: opacity 200ms ease; transition: opacity 200ms ease; cursor:pointer; }
#content #ball:hover > span { opacity:0.3; }
#content #ball.animated { -moz-transition: width 5000ms ease, height 5000ms ease, margin 5000ms ease; -o-transition: width 5000ms ease, height 5000ms ease, margin 5000ms ease; -ms-transition: width 5000ms ease, height 5000ms ease, margin 5000ms ease; transition: width 5000ms ease, height 5000ms ease, margin 5000ms ease; }
#content #ball.small { width:6vh; height:6vh; margin:-3vh; }
#content #ball.no_shadow > em { opacity:0; }
#content #ball.spin_cw1	 > svg	{ -webkit-animation:spin_cw  1.0s linear infinite; -moz-animation:spin_cw  1.0s linear infinite; animation:spin_cw  1.0s linear infinite; }
#content #ball.spin_cw2	 > svg	{ -webkit-animation:spin_cw  0.5s linear infinite; -moz-animation:spin_cw  0.5s linear infinite; animation:spin_cw  0.5s linear infinite; }
#content #ball.spin_ccw2 > svg	{ -webkit-animation:spin_ccw 1.0s linear infinite; -moz-animation:spin_ccw 1.0s linear infinite; animation:spin_ccw 1.0s linear infinite; }
#content #ball.spin_ccw2 > svg	{ -webkit-animation:spin_ccw 0.5s linear infinite; -moz-animation:spin_ccw 0.5s linear infinite; animation:spin_ccw 0.5s linear infinite; }
#content #ball_5 > em, #content #ball_6 > em, #content #ball_7 > em, #content #ball_8 > em, #content #ball_9 > em { display:none; }
#content #ball > svg > path { fill:#c0574f; }

#content #ttt_svitek_text	{ position:absolute; left:16vw; top: 10vh; width:68vw; height:80vh; text-align:center; }
#content #ttt_svitek_text > div { width:32vw; }
#content #ttt_svitek_text > div > div { width:32vw; height:18vw; margin:6vh 0 6vh 0; background:#000; position:relative; }
#content #ttt_svitek_text > div > div > img { display:block; width:100%; height:100%; cursor:pointer; }
#content #ttt_svitek_text > div > div > svg { position:absolute; width:3.2vw; height:2.78vw; left:50%; top:50%; display:block; margin:-1.6vw 0 0 -1.39vw; opacity:1; cursor:pointer; }
#content #ttt_svitek_text > div > div > iframe { display:block; width:100%; height:100%; }
#content #ttt_svitek_footer	{ position:absolute; left:25vw; bottom: 10vw; width:65vw; height:18vh; text-align:center; font-size:2vh; }
#content #ttt_svitek_footer > p { font-size:2vh; }
#content #ttt_svitek_copy	{ position:absolute; left:10vw; bottom:  1vw; width:80vw; height: 4vh; text-align: right; font-size:1vh; color:#aba59c; }
#content #ttt_svitek_copy > p { font-size:2vh; }

#vertical { display:none; }
body.turn_around #scroller { height:100vh; }
body.turn_around #content { display:none; }
body.turn_around #vertical { display:block; position:absolute; top:0; left:0; width:100vw; height:100vh; }
body.turn_around #vertical #vertical_logo { display:block; position:absolute; top:5vh; left:calc(50% - 45vw); width:90vw; }
body.turn_around #vertical #vertical_logo_text { display:block; position:absolute; top:90vw; left:5vw; width:90vw; text-align:center; }
body.turn_around #vertical #vertical_logo_text > h4 { letter-spacing:0.2vh; }





@-moz-keyframes 	spin_cw { 100% { -moz-transform: 	rotate(360deg); } }
@-webkit-keyframes 	spin_cw { 100% { -webkit-transform: rotate(360deg); } }
@keyframes 			spin_cw { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@-moz-keyframes 	spin_ccw { 100% { -moz-transform: 	 rotate(-360deg); } }
@-webkit-keyframes 	spin_ccw { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes 			spin_ccw { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

@keyframes blinker { 50% { opacity: 0; }}