BODY {font-family: 'Source Code Pro', monospace; margin:0; background: linear-gradient(to bottom, #01386F, #0050A0); background-size:cover; background-attachment:fixed; width:100%; height:100%; color:#fff; font-size:1em;}

@media screen and (min-width:801px) {
.wew {padding:0.5em;}
.ikona {width:12%; display:inline-block; overflow:auto; vertical-align:top; font-size:1em; line-height:1em; margin-bottom:3vh; text-align:center; text-shadow:1px 1px 2px rgba(0,0,0,0.7);}
.info {width:24%; margin-right:1%; margin-bottom:1%; display:inline-block; vertical-align:top; font-size:1em; text-shadow:1px 1px 2px rgba(0,0,0,0.7);}
}
@media screen and (min-width:640px) and (max-width:800px) {
.wew {padding:0.5em;}
.ikona {width:16%; display:inline-block; overflow:auto; vertical-align:top; font-size:1em; line-height:1em; margin-bottom:3vh; text-align:center; text-shadow:1px 1px 2px rgba(0,0,0,0.7);}
.info {width:24%; margin-right:1%; margin-bottom:1%; display:inline-block; vertical-align:top; font-size:1em; text-shadow:1px 1px 2px rgba(0,0,0,0.7);}
}
@media screen and (max-width:639px) {
.ikona {width:33%; display:inline-block; overflow:auto; vertical-align:top; font-size:1em; line-height:1em; margin-bottom:3vh; text-align:center; text-shadow:1px 1px 2px rgba(0,0,0,0.7);}
.info {margin-bottom:1%; display:block; overflow:auto; padding:0.5em; font-size:1em; text-shadow:1px 1px 2px rgba(0,0,0,0.7); clear:both;}
}

.glowna {width:95%; max-width:1000px; margin:0 auto;}
.belka {background: linear-gradient(to bottom, #f0f0f0, #fff); display:block; overflow:auto; padding:0.2em 0.5em 0.2em 0.5em; margin-top:0.4em; margin-bottom:3em;}
.belka_l {color:#0050A0; font-size:1.6em; display:block; width:50%; float:left;}
.belka_p {color:#0050A0; font-size:1.3em; display:block; width:20%; float:right; text-align:right; padding-right:0.6em;}
.belka_p > a {color:#0050A0; font-size:1em;}
.belka_p > a:hover {color:#0050A0; font-size:1em;}

.ikona_gra {width:60%; border:0; margin-bottom:0.4em;}
a.jezyk {padding:0.4em 1em; background:#fff; color:#0050A0; transition:all 300ms ease;}
a.jezyk:hover {background:#0050A0; color:#fff;}

fieldset {width:90%; max-width:900px; margin:0 auto; border:1.6em solid transparent; background:#0050A0;
 -webkit-border-image: url(gf/ramka.jpg) 20 round;
 -o-border-image: url(gf/ramka.jpg) 20 round;
 border-image: url(gf/ramka.jpg) 20 round;
 display:block; overflow:auto; box-shadow:2px 2px 4px 2px rgba(0,0,0,0.7);
}
.leg {background:#fff; color:#0050A0; font-size:1.2em; display:inline-block; padding:0.06em 1.4em 0.06em 0.7em; margin-left:-0.7em;}
legend h1, legend h2 {background:#fff; color:#0050A0; font-size:1em; display:inline-block; padding-left:0.7em; margin-left:-0.7em; margin-bottom:0; letter-spacing:0; word-spacing:0; text-shadow:0 0 0;}
fieldset.pod {width:60%; position:relative; top:-2.5em; right:6em; z-index:7;}
fieldset.rek {width:60%; position:relative; top:-2.5em; left:7em; z-index:10;}
fieldset.rek_box {display:inline-block; position:relative; top:-4em; left:7em; z-index:10; width:20vh; height:25vh;}
.ods {padding:1.4em;}

.info_img {height:3em; border:0; vertical-align:middle; float:left;}
.iko {height:3vh; min-height:3em; border:0; vertical-align:middle;}
.ilu {width:100%; border:0;}
.ilu_d {width:100%; border:0; margin:1em 0;}

.center {text-align:center;}
.oceny_iko {font-size:1.8em; letter-spacing:0.1em; color:#ffc000; background:#01386F; display:inline-block; padding:0.1em 0.4em; border-radius:0.7em; margin-top:0.4em;}

A  {color:#C4E2FF; text-decoration: none; font-size:1em;}
A:hover  {color:#fff;}
a.wew {font-size:1.3em;}

H1 { font-size: 2em; color:#fff; font-weight:normal; margin-top:0px; margin-bottom:1em; letter-spacing:1px; word-spacing:2px; text-shadow:1px 1px 2px rgba(0,0,0,0.7);}
H2 { font-size: 1.5em; color:#fff; margin-top:0px; margin-bottom:1px; font-weight:normal; letter-spacing:1px; word-spacing:3px; text-shadow:1px 1px 2px rgba(0,0,0,0.7);}
INPUT, SELECT, TEXTAREA {background-color:#01478E; color:#fff; border:1px solid #5592CF; border-radius:0.2em; font-size:1em; padding:0.6em;}
INPUT:hover, SELECT:hover, TEXTAREA:hover {background-color:#003A74;}
INPUT:focus, SELECT:focus, TEXTAREA:focus {background-color:#01478E; border:1px solid #fff;}
.guzik {padding:0.3em; color:#fff; background:#FF8B00; border:2px solid #000;}

P,UL,OL {font-size:1.3em; margin:0; letter-spacing: 0px; word-spacing: 0px; line-height:1.5em; text-shadow:1px 1px 2px rgba(0,0,0,0.7);}
p.brak {font-size:1.2em; font-style:italic; color:#BEDCFA;}
p.kom {font-size:1.2em;}
span.data {font-size:1em; color:#76AEE7;}

HR {color:#E3E3E3; margin-top:2px; margin-bottom:2px;}


.yt {width:100%; border:0; height:40em;}
div.ok {background:#5EAF28; color:#fff; font-size:1.2em; padding:0.4em;}
div.warn {background:#bb0000; color:#fff; font-size:1.2em; padding:0.4em;}
.kom_1 {width:100%; max-width:500px;}
.kom_2 {width:100%; max-width:500px; height:120px;}
#koment {cursor:pointer; padding:0.7em 0; display:block; background:#01386F; text-align:center; border-radius:0.7em;}

span.klawisz {padding:0.2em 0.45em; background:#fff; color:#0050A0; min-width:1.5em; height:1.5em; display:inline-block; overflow:auto; vertical-align:middle; border-radius:0.5em; text-align:center; margin-right:2px; margin-bottom:2px; text-shadow:none; box-shadow:1px 1px 3px 3px rgba(0,0,0,0.3);}

div.rek {text-align:center;}
div.rek_obr {display:block; overflow:hidden; padding:0.4em 0.6em; text-align:center;}
.rek_obr_img {border:0; width:100%;}
div.rek_opi {display:block; padding:0.4em 0.6em; font-size:1.3em;}
div.rek_opi > p {font-size:0.9em; text-align:center; line-height:1.1em;}