@import url( 'roboto-cond.css' );
:root { --plyr-video-background:#C3D1DE; }
html, body { margin:0; height:100%; background-color:#C3D1DE; user-select:none; font-family:'Roboto Condensed'; }
button:disabled { cursor:not-allowed !important; }
/* common for all slides */
#load-id, /* <- IMPORTANT: id in source file 4 view separate source file */
.slide { font-family: 'Roboto Condensed', sans-serif; font-size:calc( 0.7vw + 1.4vh ); }
@media ( orientation: portrait ) { #load-id, .slide { font-size:calc( 1.0vw + 1.5vh ); } }
.swiper { width:100%; height:100%; }
.content-wrapper { position:absolute; width:100%; height:100%; overflow:hidden; }
.content { display:flex; align-items:center; justify-content:center; flex-direction:column; }
.content { position:absolute; width:100%; height:100%; background-color:gray; color:white; cursor:default; text-align:center; background-image:url(../image/bg.jpg); background-size:cover; }
.content.has-video { background-image:none; background-color:#C3D1De; }
.steps-ctnr { position:absolute; top:-1em; z-index:1; width:96%; padding:0 2% .8% 2%; height:5em; min-height:3em; font-size:calc( 6px + .5vw ); padding-top:1.5vw; display:flex; flex-direction:row; justify-content:flex-start; color:black; background-color:white; outline:.2em solid rgb( 192, 0, 0 ); transition:all .3s ease-out; }
.steps-ctnr.hidden { top:-12%; visibility:hidden; }
.steps-ctnr .step-ctnr { position:relative; width:12.5%; height:100%; cursor:pointer; }
.steps-ctnr .step-ctnr .left { position:absolute; bottom:2.5em; height:1em; width:50%; left:0; border-top:1px solid rgb( 68, 114, 196 ); }
.steps-ctnr .step-ctnr .right { position:absolute; bottom:2.5em; height:1em; width:50%; right:0; border-top:1px solid rgb( 68, 114, 196 ); }
.steps-ctnr .step-ctnr:first-child .left,
.steps-ctnr .step-ctnr:last-child .right { border-color:transparent; }
.steps-ctnr .circle { position:absolute; border-radius:50%; width:0.8vw; height:0.8vw; min-width:5px; min-height:5px; bottom:calc( 3.5em - 0.4vw ); left:calc( 50% - 0.4vw ); background-color:white; border:0.1em solid rgb( 68, 114, 196 ); }
.steps-ctnr .circle.achieved { background-color:rgb( 68, 114, 196 ); }
.slide.visited .circle { background-color:white; }
.steps-ctnr .circle.current { background-color:rgb( 198, 0, 0 ); animation: pulse 2s 3; }
.steps-ctnr .step-ctnr .label { position:absolute; bottom:0; width:100%; height:2.5em; text-align:center; color:rgba( 31, 78, 121 ); }
.nav-buttons-ctnr, .confirm-btn-ctnr { position:absolute; bottom:3%; display:flex; flex-direction:row; justify-content:center; }
.button-prev { margin:0 .3em; cursor:pointer; border:.1em solid rgb( 0, 32, 64 ); padding:.5em; width:1em; height:1em; line-height:2em; border-radius:50%; background-color:rgb(191, 227, 249); }
.button-prev:before { content:'\27EA'; position:relative; margin-left:-.15em; top:-.5em; font-size:1.1em; font-weight:bold; color:rgb( 192, 0, 0 ); } 
.button-prev:hover { background-color:rgb(181, 207, 219); }
.button-next { color:rgb( 0,32,96 ); cursor:pointer; border:.1em solid rgb( 0, 32, 64 ); padding:0 1.5em; height:2em; line-height:2em; border-radius:15% / 50%; background-color:rgb(191, 227, 249); }
.button-next:before { content:'DALEJ'; } 
.button-next:after { content:'\27EB'; position:relative; margin-left:.5em; top:-.1em; font-size:1.1em; font-weight:bold; color:rgb( 192, 0, 0 ); } 
.button-next:hover { background-color:rgb(181, 207, 219); }
.button-next.start { position:absolute; bottom:3%; border-radius: 18% / 50%; background-color:transparent; padding-right:1em; }
.button-next.start:before { content:'START'; }
.button-next.start:after { content:''; }
.button-next.start:hover { background-color:rgba( 128, 128, 128, .2 ); }
.button-next.comment { border-radius: 10% / 50%; }
.button-next.comment:before { content:'KOMENTARZ'; }
.button-next.end { border-radius: 10% / 50%; }
.button-next.end:before { content:'ZAKOŃCZ'; }
.button-next.disabled { opacity:.5; pointer-events:none; }
.swiper-button-disabled { display:none !important; }
.swiper-button-next, 
.swiper-button-prev { color:white; opacity: 0.5; }
.swiper-button-next { text-shadow: -1px 0 rgba( 64, 177, 253, .5 ), 0 1px rgba( 64, 177, 253, .5 ), 1px 0 rgba( 64, 177, 253, .5 ), 0 -1px rgba( 64, 177, 253, .5 ); }
.swiper-button-prev { text-shadow: -1px 0 rgba( 64, 177, 253, .5 ), 0 1px rgba( 64, 177, 253, .5 ), 1px 0 rgba( 64, 177, 253, .5 ), 0 -1px rgba( 64, 177, 253, .5 ); }
@media ( hover: none ) { .swiper-button-next, .swiper-button-prev { display:none !important; } }