/* CSS Document */
html, body {min-height: 100%; margin: 0px; font-family: Arial; background-image: linear-gradient(#B4DCFD, #79AED9); background-repeat: no-repeat; background-attachment: fixed;}
body{overflow-y: hidden;}
button {border: 0px solid white; cursor:pointer; background-color:transparent;}
a:active, a:focus {-webkit-tap-highlight-color: transparent;}
p {margin:0px; border-bottom: 0px dotted black; background-color:transparent; padding:10px 0px; display:block;}
/* TOP LINE */
#top_line, #top_line_oferta{width:100%; height:60px; text-align:center; background-color:#1D2635; position: fixed; top: 0; border-bottom: 1px solid #4181A4; box-shadow: 0px 1px 3px black; z-index:1; }
#top_line_oferta{height:80px;}
#top_menu {margin: 0px auto; width:100%; height:60px; padding-left:0px;} @media only screen and (min-width: 768px) {#top_menu {width:300px;}}
#logo{height: 60px; float:left; font-size:28px; color:white; line-height:63px; padding-left:20px;}
#menu_button, #flag{width: 71px; height: 60px; padding:0px; margin-left:0px; cursor:pointer; float:right; overflow:hidden;} @media only screen and (min-width: 768px) {#menu_button{width: 75px;}}
/* powrót */
#powrot{border: 0px solid #134C6B; color:#DDE9F2; font-size:25px; background-color:white; text-align:center; width:180px; float: left; display: block; margin:8px 17px 7px auto; text-decoration: none; padding:4px 14px 7px 10px; background-image: linear-gradient(#186C97, #124864); border-radius:6px;}
@media only screen and (max-width: 768px) {#powrot{position: absolute; left:10px; width: calc(100% - 175px); padding:5px 14px 7px 10px;} #logo{}}
#powrot_oferta{border: 0px solid #134C6B; color:#DDE9F2; font-size:25px; background-color:white; text-align:center; width:295px; display: block; margin:11px auto; text-decoration: none; padding:11px 14px 13px 10px; background-image: linear-gradient(#186C97, #124864); border-radius:10px;}
/* #powrot{color: white; width:160px; border-right: 1px solid #3A6D9D; background-color:#3471B3; float:left; display:flex; justify-content:center;} */
.back{color: black; background-color:#7FBBFB; width:280px; padding: 10px; font-size:30px; border: 0px solid red;cursor:pointer; border-radius: 3px;}
#back_container{background-color: #1D2635; width:100%; position: fixed; text-align:center; top: 0; padding:10px 0px; overflow: hidden;}
#oferta_container{width:290px; margin: auto; padding: 30px; margin-top:100px; font-size:18px; border-radius: 6px;overflow: hidden;}
@media only screen and (min-width: 768px) {#oferta_container{background-color:#D1E2F7; width:490px; padding: 30px;}}
/* #powrot{color: white; width:160px; border-right: 1px solid #3A6D9D; background-color:#3471B3; float:left; display:flex; justify-content:center;} */
.back{color: black; background-color:#7FBBFB; width:280px; padding: 10px; font-size:30px; border: 0px solid red;cursor:pointer; border-radius: 3px;}
#back_container{background-color: #1D2635; width:100%; position: fixed; text-align:center; top: 0; padding:10px 0px; overflow: hidden;}
#oferta_container{width:290px; margin: auto; padding: 30px; margin-top:100px; font-size:18px; border-radius: 6px;overflow: hidden;}
@media only screen and (min-width: 768px) {#oferta_container{background-color:#D1E2F7; width:490px; padding: 30px;}}
/* MENU */
#dropdown_menu_under{width: 100%; height:100%; background-color:black; z-index: -1; position:fixed; top: 0; opacity: 0.0; backdrop-filter: blur(6px);}
#dropdown_menu {height: 0; width: 100%; position: fixed; z-index: 2; left: 0; top: 0; background-color: black; overflow: hidden; border-bottom: 1px solid #293E57; background-image: linear-gradient(black, #141515); box-shadow: 0px 2px 6px black;}
#dropdown_menu_content {background-color:transparent; position: relative; top: 8%; width: 100%; text-align: center; margin-top: 45px;}
/* .dropdown_menu_button, .dropdown_menu_button_small {border-top: 1px solid #4B97BD; background-image: linear-gradient(#186C97, #124864); width: 320px; margin:16px auto; border-radius: 12px; padding: 12px 0px; text-decoration: none; font-size: 26px; color: #F0FAFF; display: block; font-weight:bold;} .dropdown_menu_button:hover {color: white; background-image: linear-gradient(#238ABD, #155271); border-top: 1px solid #6DC2EC;} */
.dropdown_menu_button, .dropdown_menu_button_small {border-top: 1px solid #4B97BD; background-image: linear-gradient(#186C97, #124864); width: 320px; margin:13px auto; padding: 10px 0px; text-decoration: none; font-size: 26px; color: #F0FAFF; display: block; font-weight:bold; border-radius:5px;} .dropdown_menu_button:hover {color: white; background-image: linear-gradient(#238ABD, #155271); border-top: 1px solid #6DC2EC;}
.dropdown_menu_button_small{font-size:25px; padding:10px 0px;}
/* #zobacz_demo_btn {background-color:green;} */
#dropdown_menu_close {position: absolute; top: 10px; right: 10px; font-size: 80px; background-color:black; width:60px; height:60px; overflow:hidden; display: flex; align-items: center; justify-content: center; color: #818181; text-decoration: none;} @media only screen and (min-width: 768px) {#dropdown_menu_close{top: 12px; left: calc(50% + 118px);}}
#company{font-size: 18px; color:#6893C8;padding: 10px 7px; width:300px; margin:10px auto; display:flex; align-items:center; display: block; border-bottom: 1px solid #293E57;}
#wyloguj_btn {margin-top:34px;}
#kontakt_container{color:#DBD5D5; padding:22px 20px 15px 15px; width:295px; margin:35px auto 0px auto; font-size:23px; text-align:left; border-top: 1px solid #293E57;}
#kontakt{color:#6893C8; font-size:25px; margin-bottom:10px; font-weight: bold;}
#email, #telefon{display: flex; align-items: center; margin-bottom:1px; height:40px; letter-spacing:1px;}
.kontakt_icon{padding-right:5px;}
/* CONTENT */
#home{overflow: hidden; color:white; margin-top:20px; overflow-y: scroll; position:absolute; top:0px; width:100%; height:100%}
.spacer20{height:20px;}
/* #podstrona{width: 100%; height:100%; background-color:green; z-index: 4; position:absolute; top: 0;} */
/* #podstrona_close{width: 360px; height:50px; background-color:blue; margin:auto;} */
/* #podstrona_content{width: 360px; height:1000px; background-color:teal; margin:auto;} */
/* #baner{ border-bottom: 0px solid #CCE4F9; border-top: 0px solid #8AB1D0; text-align:center; padding-top:24px; width: 100%; background-color:#9CCBF2; background-image: linear-gradient(#B4DCFD, #79AED9); height:270px; margin:0px auto; color:white; text-align:center; padding-bottom:0px; display: flex; align-items: center; justify-content: center;} */
#baner{ border-bottom: 0px solid #CCE4F9; border-top: 0px solid #8AB1D0; text-align:center; padding-top:0px; width: 100%; height:470px; margin:0px auto; color:white; text-align:center; padding-bottom:25px; display: flex; align-items: center; justify-content: center;}
#baner_big_text{letter-spacing:1px; text-align: left; color: black; font-size:46px; font-weight:bold; margin-bottom:20px;}
#baner_small_text{color:black; font-size:32px; margin-bottom:15px; background-color:transparent; padding:4px; margin:auto; display:block; text-align:left; line-height:40px;}
#baner_smaller_text{color:black; font-size:19px; margin-bottom:20px; margin-top:15px; background-color:transparent; padding:4px; display:block; text-align:left; line-height:32px;}
#liczba{background-color:#8DBFE8; display:inline; padding-inline:7px; border-radius:7px; border: 2px solid #C1E0FB; padding:6px 10px;}
#baner_left{background-color:transparent; height:300px; width:550px; padding-top:20px; border-right: 0px solid black; text-align:left; padding-left:70px;}
#baner_right{ color:black; text-align:left; font-size:18px; background-color:transparent; height:300px; padding-left:0px; position: relative; margin-left:0px; z-index:0; border-radius:0px; border: 0px solid #CCE4F9; border-left: 0px solid #3C7B9D;}
.baner_right_segment{background-color:transparent; margin:5px; height:120px; display:flex; align-items: center;}
/* #telefon_baner{width:280px; height:250px; position: absolute; top:-18px; left:0px;} */
.baner_right_foto{height:100px; width:100px; float:left; border-radius:50%; border: 3px solid #CCE4F9;}
/* #telefon_baner{position: absolute; top:0px; left:0px;} */
.telefon_tekst{background-color:transparent; border-radius:0px; width:450px; height:85px; padding:0px 15px; font-size:18px; line-height: 140%; text-align:left; color: black;}
/* #czytaj_wiecej_telefon{background-color:black; color:white; width:250px; font-size:18px; height:30px;} */
.czytaj_wiecej_telefon{background-color:black; border: 1px solid #6892B3; color:#6892B3; font-size:20px; border-radius:0px; margin-top:14px; margin-top:0px; padding:5px 15px; letter-spacing: 0px; font-weight:bold;}
#telefon_baner{border-radius:50%; overflow:hidden;}
/* @media only screen and (min-width: 768px) { */
/* #baner{height:330px; height:470px; padding-bottom:25px;} */
/* #baner_big_text{font-size:46px; margin-bottom:20px;} */
/* #baner_small_text{font-size:32px; margin-bottom:15px;} */
/* } */
@media only screen and (max-width: 768px) {
#baner{height:200px; width:360px; padding-bottom:20px; padding-top:140px; padding-left: 0px; background-color:transparent;}
#baner_left{width:360px; padding-left:0px; text-align:center;}
#baner_big_text{font-size:27px; margin-bottom:19px; text-align:center;}
#baner_small_text{font-size:21px; margin-bottom:25px; text-align:center;}
#baner_smaller_text{font-size:18px; margin-bottom:25px; display:none;}
#baner_right{display:none;}
}
#logowanie{display: flex; background-color:#84BCEA; font-size:29px; height:60px; width:500px; margin:5px 0px; margin-top:20px; padding:2px; border-radius:19px; padding:5px 1px; margin-bottom:4px; align-items: center; justify-content: flex-start; background-color:#2A7FB3; background-color:transparent;}
#haslo{letter-spacing:1px; height:36px; width:220px; border-width:1px; border: 1px solid #789FBD; padding:12px 14px; padding-left:18px; background-color:#C2DDF8;background-color:#D4E6FF; font-size:28px; font-weight:900; border-radius: 10px 0px 0px 10px; float:left;}
#ok{border-radius: 0px 10px 10px 0px; margin-left:3px; height:62px; width:100px; font-size:35px; font-weight:bold; line-height:10px; display: inline-block; float:left; cursor:pointer; border: 1px solid #789FBD; background-image: linear-gradient(#CBE0F9,#ADCFF7);}
::placeholder {color: #27608E; opacity: 1; font-weight:500; font-size:32px;}
#podlogo{font-weight:bold; float: left; font-size:32px; background-color:#FF8686; color:#480404; text-align:center; margin:8px auto; padding:0px 0px; width: 350px; border-radius:8px;}
@media only screen and (min-width: 768px) {
::placeholder {font-size:32px;}
#opis{font-size:19px; width:400px;}
}
@media only screen and (max-width: 768px) {
#logowanie{justify-content: center; width:360px; padding:0px;}
#haslo{width:190px;}
}
/* .top_menu_button{width: 90px; background-color:#1D2635; color:white; height:40px; padding: 8px 15px; border: 4px; font-size:18px; float:left; font-weight:500; cursor:pointer;border-right: 1px solid #3A6D9D;} */
/* .top_menu_button:after {content: ""; clear: both; display: table;} */
/* #demo{background-color:#3471B3; border-radius: 0px; border: 0px solid teal; padding: 4px 15px;} */
/* #logged_buttons{display:none;} */
/* #mail{float:left;} */
/* #phone{float: left;} */
#przyciski_pod_logowaniem{letter-spacing: 1px; background-color:#1F719D; border-bottom: 0px solid #2A7FB2; border-top: 0px solid #1F71A4; text-align:center; width:100%; margin:auto; margin-top:0px; margin-bottom: 20px; height:70px; text-align:center; display: flex; justify-content: center; align-items: center; }
/* .przycisk_pod_logowaniem{border: 2px solid #134C6B; color:#DDE9F2; font-size:20px; background-color:white; text-align:center; height:50px; width:85px; display: block; float:left; margin:8px; text-decoration: none; padding:12px 13px 6px 13px; background-image: linear-gradient(#186C97, #124864); border-radius:10px;} */
.przycisk_pod_logowaniem{border-left: 1px solid #90C0E7; border-right: 1px solid #90C0E7; color:#DDE9F2; font-size:20px; background-color:#B9D9F2; text-align:center; height:50px; width:85px; display: block; float:left; margin-left:-1px; text-decoration: none; font-weight:regular; padding:10px 13px 8px 13px; background-image: linear-gradient(#186C97, #124864); border-radius:0px;}
@media only screen and (min-width: 768px) {
/* #mini_logo{line-height: 40px;} */
#przyciski_pod_logowaniem{width:100%; height:50px;}
.przycisk_pod_logowaniem{font-size:25px; height:32px; width:200px;}
}
#opis{ /* background-color:white; */ text-align:center; width:340px; margin:auto; font-size: 16px; line-height: 1.3; margin-bottom:30px; color: black;}
#footer{color: #3471B3; text-align:center; width:100%; font-size: 13px; line-height: 1.6; position: fixed; bottom: 0; background-color:#1D2635; padding: 10px 0px;}
@media only screen and (min-width: 768px) {#footer{font-size: 17px;}}
#cookies{ text-decoration:underline; color:black;}
*:focus {outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
.oferta_h1{background-color:black; margin: 0px auto 10px auto; padding:10px; text-align:center; font-size:25px; font-weight:bold; color: teal;}
.oferta_h2, .oferta_h2_centered{background-color:transparent; font-size:20px; margin:0px auto 5px auto; line-height:28px; width:360px; padding-bottom:10px; }
.oferta_h2_centered{text-align:center;}
#opis_platformy{background-color:transparent; width:360px; margin:auto; color:#254964; font-weight:bold; padding:5px 0px 90px 0px;}
.opis_segment{width:360px; background-color:#D9E8FF; background-color:transparent; margin:auto; margin-top: 0px; padding: 0px; border-radius:0px; text-align:center;}
.opis_naglowek{background-color:transparent; font-size:34px; font-weight:bold; padding: 0px 30px 0px 30px;}
.opis_tekst{background-color:transparent; font-size:20px; margin-top:0px; padding: 0px 0px 20px 0px; line-height:140%;}
.baner_foto{height:180px; width:610px; border-radius: 0px; overflow:hidden; padding-bottom:0px; margin-right:3px;}
@media only screen and (min-width: 768px) {
#opis_platformy{width:690px;}
.opis_segment{width:690px;}
.oferta_h1{font-size:40px;}
.oferta_h2{width:640px;}
}
.cennik_container{width:360px; height:158px; background-color:transparent; font-size:16px; margin:auto; margin-top:10px; text-align:center; padding:0px; display: flex; align-items: center; justify-content: center}
.cennik_segment{background-color:gray; width:106px; margin-right: 10px; padding-top:15px; padding-bottom:12px; background-image: linear-gradient(white, #D9EFFF); border-radius:10px;}
.kwota{background-color:transparent; font-size:28px; font-weight:bold; padding:5px; margin-top:10px; border-top: 1px solid #D2DCEA;}
.cennik_opis{background-color:#E1F3FF; border-top: 1px solid #D2DCEA; font-size:18px; height:200px; padding-top:10px;}
.wybierz{background-color:green; border-radius:8px; margin:10px auto; padding:12px 18px; font-size:18px; font-weight:bold; display:block;}
#oferta_krok2{background-color:transparent; height: 0px; margin:10px auto; width:100%; transition: height 1s ease-out; overflow:hidden; display: block;}
#oferta_krok2_inner{background-color:white; width:360px; height:400px; margin:auto; border-radius:10px; font-size:22px;}
@media only screen and (min-width: 768px) {
.cennik_container{width:640px; font-size:26px; margin:auto; margin-top:35px; text-align:center;}
.cennik_segment{background-color:gray; width:240px; float:left;}
.kwota{font-size:28px; font-weight:bold; padding:5px; padding-top:10px; margin-top:15px;}
}
/* ------------------------------------------------------------------------------- HOME - PC ------------------------------------------------------------------------------- */
#instrukcja{margin: 0px; display:none; overflow-y: scroll; height:100%;}
#instrukcja_container{
/* padding: 10px 15px; */
width:360px;
/* background-color:#D1E6FF; */
margin:auto;
margin-top:70px;
/* height:500px; */
text-align:center;
}
/* ------------------------------------------------------------------------------- DZIAŁY ------------------------------------------------------------------------------- */
#dzialy_space{background-color:transparent; height:90px;}
/* @media only screen and (max-width: 700px) {#dzialy_space{background-color:green; height:80px;}} */
#demo_info{font-size:28px; padding:10px; padding-bottom:40px; padding-top:40px; margin-top:10px; text-align:left;}
#aktualnosci{font-size:19px; padding:10px 10px 30px 10px; background-color:#95C8F2; background-color: transparent; line-height:160%; border-bottom:0px solid #6C95B7;}
.demo_div_button{color:black; background-color:#A1CFF4; padding:15px 30px; margin-left:15px; border-radius:8px; text-decoration:none; border:2px solid #DAEEFF;}
@media only screen and (max-width: 768px) {
#demo_info {padding:0px; padding-top:0px; height:130px; margin-top: 0px; margin-bottom:20px; width:100%; line-height:160%}
#demo_top_text{display:block; padding:10px;}
.demo_div_button{margin-top:74px; font-size:23px; padding: 10px 15px; margin-left:0px; margin-right:15px;}
#aktualnosci{padding-left:5px; font-size:16px;}
}
#dzialy{margin: 0px; display:none; overflow-y: scroll; height:100%; position:absolute; top:0px; width:100%;}
#instrukcja_btn{background-color:#CCE4FF; border-width:0px; border-left:5px solid #B0CEF1; float:right; display:block; margin-left: auto; padding:4px 10px; font-size:15px; cursor:pointer;}
/* #aktualnosci{font-size: 13px; padding: 10px 15px; width:320px; margin:auto; margin-top:5px; line-height:1.4; background-color:#D1E6FF; background-color:transparent; border: 0spx solid #AAC3EE;} */
#over_older {padding:0px; padding:10px; font-size:16px; margin-top:20px; width:330px; width:90%; margin:20px auto 0px auto; border-left:0px solid white; clear: both;}
#older{padding:0px;background-color:#D6E6FB; font-weight:bold; width:351px; width:100%; height:50px; font-size:18px; border-radius:0px; margin-top:0px; background-color:#D2E4F9;}
#over_older{padding-top:20px;}
#dzialy_container{
padding-top:10px;
padding-top:0px;
background-color:transparent;
margin: auto;
width: 100%;
width:714px;
}
@media only screen and (max-width: 768px) {#dzialy_container{width:351px;} .dzial_image{width: 162px;} #miesieczne{min-height:88px; border-radius: 5px; margin-top:110px;}}
#miesieczne{width: 100%; background-color:#E0EFFD; font-size:20px; min-height:50px; margin-top:90px; padding:0px;cursor:pointer; border-color:#6B91A4; border-width:1px; border-radius: 5px;}
#miesieczne_image{width: 100%; height: auto; margin:0px; padding:0px; display: block; float:left; border-radius: 4px;}
.dzial_image{width: 100%; height: auto; margin:0px; padding:0px; width: 112px; height:auto; display: block; float:left; border-radius: 8px;}
.dzial_g{color: black; margin-top:40px; border-top:3px solid #6C95B7; margin-bottom:16px; font-size:40px; font-weight: 700; display:flex; align-items:center; height:30px; padding:40px 0px 20px 13px; text-align:left; width:714px;}
.dzial_n{display: inline; margin:14px 7px 0px 7px; padding:25px 25px; font-weight:500; border-width:1px; font-size:25px; font-weight:regular; border-color:#82B5CE; border-radius: 16px; cursor:pointer; background-color:#E0EFFD; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; }
@media only screen and (max-width: 768px) {.dzial_n{ display:block-inlnie; margin:9px 9px 0px 1px; padding:15px 15px; font-size:19px; border-radius:8px;} .dzial_g{}}
#pobierzContainer{width:714px; background-color:transparent; margin-top:40px; font-size:22px; padding-left:10px; padding-bottom:10px;}
#pobierzCwiczenia{background-color:#BCEEDD; font-size:20px; padding:11px; border-radius:11px; border:2px solid #7BA4C6; box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 1px;}
@media only screen and (max-width: 768px) {#pobierzCwiczenia{width:350px; font-size:18px;} #pobierzContainer{width:350px; padding-left:0px;}}
/* @media only screen and (max-width: 370px) {.dzial_n{width:115px; height:70px; ,margin:3px;}} */
/* .dzial_s, .dzial_su {height:40px;} */
/* .dzial_su, .dzial_nu {background-image: url("obrazy/new.svg");background-position: right bottom;background-repeat: no-repeat;} */
.liczba_lekcji{border-radius: 4px; background-color:#B9D7F9; color:#6688AE; height: 36px; height: 40px; width:40px; padding:0px 0px; margin:-10px -10px 0px 0px; display:flex; float: right; font-size:20px; align-items:center; justify-content:center; background-color:#CDDFF2;}
.liczba_lekcji{border-radius: 0px 5px 5px 0px; background-color:#B9D7F9; color:#5E7DA4; height: 36px; height: 50px; width:42px; padding:0px 0px; margin:-15px -15px 0px 0px; display:flex; float: right; font-size:21px; align-items:center; justify-content:center; background-color:#CDDFF2;}
/* ------------------------------------------------------------------------------- LEKCJE - mobile ------------------------------------------------------------------------------- */
#lekcje{height:100%; display:none; overflow-y: scroll; position:absolute; top:0px; width:100%;}
#lekcje_container{margin:80px auto; width:600px;}
.lekcja, .lekcja_demo, .lekcja_nieaktywna{
font-size:22px;
width:600px;
height:46px;
display:block;
padding:10px 10px 12px 16px;
text-align:left;
margin-top:1px;
background-color:#E0EFFD;
background-color:rgba(224, 239, 253, 1);
font-weight:500;
cursor:pointer;
}
.lekcja:hover, .lekcja_demo:hover{
background-color: white;
background-color:rgba(255, 255, 255, 0.9);
}
.lekcja_demo{
/* background-color:green; */
background-image: url("obrazy/demo_lesson.svg");
background-position: left;
background-position: 6px;
background-repeat: no-repeat;
padding-left:80px;
}
.grupa_lekcji{
background: transparent;
color:black;
padding:10px 0px 12px 14px;
margin-top:20px;
margin-bottom:0px;
font-weight:600;
cursor:default;
height:25px;
display:flex;
align-items:center;
height:38px;
font-size: 32px;
width:600px;
}
.lekcja_nieaktywna{
padding-left:35px;
background-image: url("obrazy/locked.svg");
background-position: left;
background-repeat: no-repeat;
/* cursor:not-allowed; */
background-color: #B7D3F4;
color:#394B6A;
color:black;
}
#pod_lekcjami{padding-left:13px; padding-top:15px; font-size:17px; font-weight:600; line-height:1.5;}
.klawisz{background-color:orange; display:inline;}
@media only screen and (max-width: 768px) {
#lekcje_container{margin:80px auto; width:100%}
.grupa_lekcji{width: calc(100% - 10px); padding:10px 0px 12px 10px; font-size:26px;}
.lekcja, .lekcja_demo, .lekcja_nieaktywna{width:100%; font-size:17px; padding:0px; padding-left:20px; height:56px;}
.lekcja_demo{padding-left:80px; font-size:15px;}
.lekcja_nieaktywna{padding-left:40px; font-size:15px;}
}
/* ------------------------------------------------------------------------------- PLAYER ------------------------------------------------------------------------------- */
#player{display: none; background-color:black; justify-content: flex-start; align-items: flex-start; height:100%;}
#player_container{width:100%; margin-top:0px; background-color:#7BA9E1;}
#ekran{height: 100vmin; border-top: 0px solid black; border-bottom: 2px solid black;}
#myCanvas{width:100vmin;height:100vmin;}
#controls{width: 100%; background-color:orange; height:300px;}
/* #postep_outer{background-color:#23395E; width:100%; height:2vmin; border: 1px solid #1D2635; border-width: 0px 0px 1px 1px;} */
/* #postep_inner{background-color:#2354A8; height:2vmin;} */
.small_button{background-color:#3E74CC; background-color:#305B8A; cursor: pointer; width: 50%; height:50px; border: 0px solid black;}
#pSlide{border-right: 2px solid black;}
.big_button{background-color:#6D9DEC; background-color:#4976A6; cursor: pointer; width: 100%; height: calc(100vh - 100vmin - 120px); border: 0px solid black; border-width: 2px 0px 2px 0px;}
.big_button, .small_button:focus {outline:0;}
#endScreen{background-color:#5B91CA; background-color:#7BA9E1; width:100vmin; height:100vmin; float:left; display:flex; justify-content:center; align-items:center; text-align:center; flex-direction:column; font-size:60px;}
#endScreenOver{background-color:#598BC1; color:white; font-size:28px; padding:13px 0px 10px 0px; width:300px; font-weight:600; background-color:black;}
.endScreenUnder{color:black; font-size:15px; background-color:#6598CE; width:280px; padding:12px 10px; margin-top:1px; line-height:1.5; background-color:transparent;}
/* ------------------------------------------------------------------------------- PLAYER - PC ------------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
#player{justify-content: center; align-items: center; width:100vw;height:100vh; background-color: #222222;}
#player_container{border: 0px solid black; height:720px; width:auto; border-radius:20px; overflow:hidden;}
#ekran{display:inline;width:720px;height:720px; border-width: 0px;}
#myCanvas{width:720px;height:720px;}
#controls{display:inline; float:right; width: 280px;}
#postep_outer{background-color:#23395E; width:276px; height:28px; border: 1px solid #1D2635; border-width: 0px 0px 4px 4px;}
#postep_inner{background-color:#3A699B; height:28px;}
.small_button{width: 140px; height:110px; border: 2px solid #1D2635; border-width: 0px 0px 0px 4px;}
#pSlide{border-right: 0px solid black;}
.big_button{width: 280px;height:578px; border: 1px solid #1D2635; border-width: 4px 0px 0px 4px;}
#endScreen{width:720px; height:720px;}
#endScreenOver{font-size:36px; padding:13px 0px 10px 0px; width:420px;}
.endScreenUnder{font-size:20px; width:400px; padding:12px 10px;}
}