@font-face {
  font-family:'FontAwesome';
  src:url("css/fontawesome-webfont.eot?v=3.2.1");
  src:url("css/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"),url("css/fontawesome-webfont.woff?v=3.2.1") format("woff"),url("css/fontawesome-webfont.ttf?v=3.2.1") format("truetype"),url("css/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");
}

body {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 100;
	color: #000;
	background: url('gfx/bg-body.jpg') repeat top left;
  margin: 150px 0 0 0;
}
kbd {
  padding: 0px 4px;
  background:#f5f5f5;
  color:#808080;
  border: solid 1px #808080;
  border-radius: 2px;
}
form {
  display: inline;
}
input, select, textarea {
  font-family: 'Source Sans Pro';
  padding: 5px;
  font-weight: 200;
  border: 1px solid #cdcdcd;
  font-size: 15px;
}
input[type="file"] {
  border: 0;
}
input.btn-red {
  background: #ed1c24 !important;
  color: #fff !important;
  padding: 10px 15px !important;
  font-size: 120%;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
}
input.btn-red:hover {
  background: #ff2a29 !important;
}
input.button, input[type="submit"] {
  background-image: linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 89%);
  background-image: -o-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 89%);
  background-image: -moz-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 89%);
  background-image: -webkit-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 89%);
  background-image: -ms-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 89%);
  background-color: #fff;
  border: 1px solid #E6E6E6;
  color: #000;
  padding: 3px;
  cursor: pointer;                 
}
input[type="submit"]:disabled {
  cursor: default;
  background: #ccc !important;                 
}
code {
  display: block;
  margin: 10px 0;
  font-family: 'courier', 'courier new';
}
h1 code,
h2 code,
li code,
p code,
div:not(.oferta-karta-opis) > code {
  display: inline-block;
  margin: 0;
}
example {
  display: block;
  padding: 10px;
  background-color: #eee;
}
example h1,
example h2,
example h3,
example h4,
example h5,
example h6 {
  
}

#content input[type="text"], 
#content input[type="password"] {
  width: 300px;
  font-size: 100%; 
}
input.krotki {
  width: 50px !important;
  font-size: 100%; 
}
input.btnBlack {
  background: #000;
  color: #fff;
  margin: 0;
  padding: 1px 3px;
  border: 0;
  cursor: pointer;
}
b, strong {
  font-weight: 700;
}
#content textarea {
  width: 300px;
  height: 120px;
  font-size: 100%;
  padding: 5px; 
}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus {
  background: #f7f6d0;
  border: 1px solid #b9b9b9; 
}

img {
  border: 0;
}
p img {
  max-width: 100%;
}
img.lupa {
  position: absolute;
  margin: 10px;
  width: 30px;
}
h3 img {
  vertical-align: middle;
}
a {
  text-decoration: none;
  color: #929292;
}
a:hover {
  color: #e30119;
}

.clearing {
	clear: both;
	line-height: 0.1%;
	font-size: 0.1%;
	height: 0.1%;
}
ul.alpha,
ol.alpha {
  list-style: lower-alpha;
}
ol.roman {
  list-style: upper-roman;
}
ol.roman ul {
  list-style: decimal;
}
ul.numeric {
  list-style: decimal;
}
ul.numeric li {
  padding-left: 8px;
}
ul.circle {
  list-style: disc !important;
  margin: 0.5% 5% !important;
}
ul.circle li {
  padding: 4px !important;
}
ul.grey {
  list-style: none;
  color: #929292;
  margin: 0;
  padding: 0 0 0.5% 2%;
}
ul.grey a {
  color: #929292;
}
ul.grey a:hover {
  color: #e30119;
} 

.blue {
  color: #2c4592;
}
.darkBlue {
  color: #0a79c1;
}
.orange {
  color: #ff9d01;
}
.green {
  color: #a6d06c;
}
.red {
  color: #e34f26;
}
.darkPink {
  color: #a4268a;
}
.pink {
  color: #f565ad;
}

.box-close {
  text-align: right;
  cursor: pointer;
  margin: 10px 10px 0 10px;
}
.opacity {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  -ms-transition: opacity .25s ease-in-out;
  -o-transition: opacity .25s ease-in-out;
}
.opacity:hover {
  opacity: 0.7;
}
.opAnim {
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  -ms-transition: opacity .25s ease-in-out;
  -o-transition: opacity .25s ease-in-out;
}

.bgAnim, 
input[type="submit"] {
  transition: background .25s ease-in-out;
  -moz-transition: background .25s ease-in-out;
  -webkit-transition: background .25s ease-in-out;
  -ms-transition: background .25s ease-in-out;
  -o-transition: background .25s ease-in-out;
}
.showDelay,
.showOrdered {
  visibility: hidden;
}
.relative {
  position: relative;
}
.boxCentered {
  float: left;
  width: 80%;
  margin-left: 10% !important;
  margin-right: 10% !important;
  box-sizing: border-box;
  background-color: #fff;
}
.boxFull {
  float: left;
  width: 100%;
  box-sizing: border-box;
}
.center {
  text-align: center;
}

.halfBox {
  float: left;
  width: 50%;
  padding-right: 2%;
  box-sizing: border-box;
}
.Box10 {
  float: left;
  width: 10%;
  padding-right: 2%;
  box-sizing: border-box;
}
.Box20 {
  float: left;
  width: 20%;
  padding-right: 2%;
  box-sizing: border-box;
}
.Box30 {
  float: left;
  width: 30%;
  padding-right: 2%;
  box-sizing: border-box;
}
.Box40 {
  float: left;
  width: 40%;
  padding-right: 2%;
  box-sizing: border-box;
}
.Box50 {
  float: left;
  width: 50%;
  padding-right: 2%;
  box-sizing: border-box;
}
.Box60 {
  float: left;
  width: 60%;
  padding-right: 2%;
  box-sizing: border-box;
}
.Box70 {
  float: left;
  width: 70%;
  padding-right: 2%;
  box-sizing: border-box;
}
.borderLeftGrey {
  border-left: 1px solid #d7d7d7;
}
.Box60.borderLeftGrey {
  padding-left: 2%;
}
.borderRightGrey {
  border-right: 1px solid #d7d7d7;
}
.Box40.borderRightGrey {
  margin-right: 2%;
  width: 38%;
}

#backtotop {
  position: fixed;
  bottom: 45px;
  right: 35px;
  background: #6b6b6b url('gfx/backtop.png') no-repeat center center;
  cursor: pointer;
  display: none;
  z-index: 1000;
}


#main  {
	width: 100%;
  min-width: 300px;
  margin: 0 auto;
  color: #000;
  position: relative;
}
#main  p {
	margin: 5px 0;
}
#main  p.redLine {
	margin: 10px 0 4px 0;
  padding-bottom: 2px;
  border-bottom: 1px solid #e30119;
  display: inline-block;
}
#main  .headerBox {
	margin: 1% 0;
  padding: 0 0 0.8% 2%;
  width: 100%;
  border-bottom: 2px solid #e30119;
  display: inline-block;
  box-sizing: border-box;
}
#main  .headerBox h3 {
  margin: 0;
  padding: 0;
  font-size: 140%;
}
/* GÓRNE MENU */

#menufixedSize:before {
  content: "";
  display: block;
  padding-top: 120px;
}

#menufixedSize {
  width: 100%;
  margin: 0;
  position: fixed;
  top: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
#menufixed {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0 5px 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
}
#menu-logo {
  width: 80%;
  height: 90%;
  float: left;
  margin: 22px 0 0 0;
  position: relative;
  overflow: hidden;
}
#menu-logo img {
  max-width: 100%;
  max-height: 100%;
}

#menu-list {
  height: 30px;
  width: 25px;
  float: left;
  padding: 0;
  margin: 13px 0 0 15px;
}
.menu-icons {
  float: right;
  text-align: right;
  padding: 0;
  margin: 2px 5% 0 0;
  width: 50%;
}
.menu-home {
  padding: 0;
  position: relative;
  width: 80%;
  z-index: 1000;
  float: left;
  margin: -60px 0 0 10%;
  background-color: #fff;
}

.menu-home a {
  color: #fff;
  text-decoration: none;
  padding: 0;
  font-size: 100%;
}
.menu-home img {
  width: 100%;
}
#menufixed ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menufixed ul li {
  float: left;
  font-weight: 600;
  font-size: 90%;
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
  position: relative;
}
#menufixed ul li:hover {
  background: #e30119;
  display: block;
}

#menufixed ul li.selected,
#menufixed ul li.hover {
  background: #e30119;
}

#menufixed ul.submenu {
  margin: 0;
  padding: 0;
}
#menufixed div.submenu2 {
  background: #fff;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 110;
  margin: 0;
  padding: 0;
  visibility: hidden;
  width: 100%;
  min-height: 250px;
  opacity: 0;
  border-top: 2px solid #e30119;  
}
#menufixed ul.submenu li:hover + div.submenu2,
#menufixed ul.submenu li:not(:hover) + div.submenu2:hover {
  visibility: visible;
  opacity: 1;
}
div.submenu2:hover - li  {
  background: #e30119;
}
#menufixed ul.submenu li {
  float: left;
  margin: 0;
  padding: 10px 1.5%;
}
#menufixed ul.submenu li a {
  color: #fff;
}

#menufixed .submenuSchool {
  display: inline-block;
  width: 23.8%;
  margin: 10px 0.4% 0 0.4%;
  border-bottom: 3px solid #b3b3b3;
  text-align: center;
  padding-bottom: 4px;
  color: #000;
  font-weight: 600;
  font-size: 120%;
  cursor: pointer;
}
#menufixed .submenuSchool:hover,
#menufixed .submenuSchool.selected {
  border-bottom: 3px solid #e00018;
  color: #e00018;
}
.borderRed {
  border-bottom: 2px solid #e30119;
}

/* -------------------- */

/* IKONY  */

[class^="icon-"], [class*=" icon-"] {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
.icon-home:before {content: "\f015";}
.icon-plus:before{content:"\f067";}
.icon-minus:before{content:"\f068";}
.icon-map-marker:before{content:"\f041";}
.icon-phone:before{content:"\f095";}
.icon-envelope-alt:before{content:"\f003";}
.icon-trash:before{content:"\f014";}
.icon-ok:before{content:"\f00c";}
.icon-chevron-left:before{content:"\f053"}
.icon-chevron-right:before{content:"\f054"}


/* ŚCIEŻKA */

.sciezka {
  display: inline-block;
  padding: 0 0 0.7% 0;
  font-weight: 100;
  font-size: 100%;
  position: relative;
  z-index: 1;
  color: #777; 
}
.sciezka a {
  display: inline-block;
  background: #fff;
  padding: 0 10px;
  position: relative;
  z-index: 2; 
  color: #777;
}
.sciezka a.home {
  font-size: 150%;
  color: #777;
  text-align: center;
  z-index: 99;
}
.sciezka a.home i {
  vertical-align: -1px;
}
.sciezka a:hover {
  color:#222;
}

/* content -------------------- */
#content-admin {
	width: 100%;
}


/* PODSTRONY */

/* GENERAL STYLES */

.table {
  display: table;
  width: 100%;
}
.tableRow {
  display: table-row;
}
.tableCell {
  display: table-cell;
}
h4 {
  padding: 0;
  margin: 5px 0;
  font-size: 110%;
}
h4.subTitle {
  margin: -10px 0 8px 0;
  font-size: 120%;
}
h4.red,
p.red {
  color: #e00018;
}
h4.break {
  margin: 1% 0;
}

.lineFullBlack {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #000;
}
.lineFullGrey {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #929292;
}

.banerFull {
  width: 100%;
  padding: 3.12% 0 3% 12%;
  margin: 1% 0 2% 0;
  box-sizing: border-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.banerSmall {
  width: 31%;
  padding: 3.12% 0 3% 12%;
  box-sizing: border-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  float: left;
}
a .banerSmall {
  color: #000;
}
a:nth-of-type(1) .banerSmall {
  margin: 5% 3% 2% 16%;
}
a:nth-of-type(2) .banerSmall {
  margin: 5% 16% 2% 3%;
}
.banerFull h2,
.banerSmall h2 {
  font-size: 140%;
  margin: 0;
  padding: 0;
}
.tytulMed {
	display: inline-block;
	width: 100%;
	padding: 0;
	color: #000;
	margin: 0 0 5px 0;
  text-align: center;
  text-transform: uppercase;
}
.tytulMed.break {
  margin-top: 50px;
}

.tableCell .tytulMed {
  width: 60%;
}
.tytulMed h2 {
	font-size: 200%;
	line-height: 100%;
	margin: 0;
	padding: 0;
	font-weight: 400;
}
.tytulMed h3 {
	font-size: 150%;
	line-height: 100%;
	margin: 0;
	padding: 0;
	font-weight: 400;
}
.tytulMed h4 {
	font-size: 120%;
	line-height: 100%;
	margin: 0;
	padding: 0;
	font-weight: 400;
}

.title-page {
	display: inline-block;
	width: 100%;
	color: #4d4d4d;
	margin: 0 0 20px 0;
  border-bottom: 3px solid #e30119;
  box-sizing: border-box;  
}
.submenuSchool-title,
.title-page {
  background-repeat: no-repeat;
  background-position: left center;
}
.submenuSchool-title.ico-oferta,
.title-page.ico-oferta {
  background-image: url('gfx/ico-oferta2.png');
}
.submenuSchool-title.ico-pomoce,
.title-page.ico-pomoce {
  background-image: url('gfx/ico-pomoce2.png');
}
.title-page.ico-aktualnosci {
  background-image: url('gfx/ico-aktualnosci2.png');
}
.title-page.ico-konferencje {
  background-image: url('gfx/ico-konferencje2.png');
}
.title-page.ico-materialy {
  background-image: url('gfx/ico-materialy2.png');
}
.title-page.ico-lupa {
  background-image: url('gfx/ico-lupa2.png');
}
.title-page.ico-poradnik {
  background-image: url('gfx/ico-poradnik2.png');
}
.title-page.ico-kontakt {
  background-image: url('gfx/ico-kontakt2.png');
}
.title-page.ico-autorka {
  background-image: url('gfx/ico-autorka2.png');
}
.title-page.ico-firma {
  background-image: url('gfx/ico-firma2.png');
}
.title-page.ico-zamow {
  background-image: url('gfx/ico-dotacja2.png');
}


.title-page.break {
  margin-top: 40px;
}

.title-page a {
	color: #000;
}
.title-page h1, 
.title-page h2 {
	margin: 0;
	padding: 0;
	font-weight: 700;
}
.title-page h3 {
	margin: 0;
	padding: 0;
	font-weight: 700;
}
.title-page h4 {
	margin: 0;
	padding: 0;
	font-weight: 700;
}
.whitePage {
  background: #fff;
  padding: 10px 1%;
}     
.whitePage2 {
  background: #fff;
  padding: 10px 1% 0 1%;
}     
input.red {
  background: #e00018;
}
input.blue {
  background: #2c4592;
}
input.grey {
  background: #dcdcdc;
}

.titleBlue {
  color: #1fbece;
}
.titleRed {
  color: #b71d4c;
}
.blueGradient,
.redGradient,
.orangeGradient {
  padding: 0 0 10px 0;
  margin: 10px 0 !important;
  font-size: 110%;
  font-weight: 600;
  display: block;
  position: relative;
}
.blueGradient:after,
.redGradient:after,
.orangeGradient:after {
    content:"";
    display: block;
    height: 5px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.blueGradient:after {
    background: linear-gradient(270deg, rgba(255,255,255,1) 20%, rgba(0, 145, 208, 0.7) 100%);    
}
.redGradient:after {
    background: linear-gradient(270deg, rgba(255,255,255,1) 20%, rgba(196, 13, 66, 0.7) 100%);    
}
.orangeGradient:after {
    background: linear-gradient(270deg, rgba(255,255,255,1) 20%, rgba(217, 151, 58, 0.7) 100%);
}

.blueGradient.ico,
.redGradient.ico,
.orangeGradient.ico {
  margin: 50px 0 30px 0 !important;
}

.podtytul {
  width: 100%;
  margin: 0 0 40px 0;
  text-align: center;
  font-size: 130%;
}
.podtytul.break {
  margin: 0 0 80px 0;
}
.podtytul.smallFont {
  font-size: 100%;
}
.box,
.boxFree {
  background: #fff;
  vertical-align: top;
}
.boxFree.ramka {
  border: 1px solid #d7d7d7;
}
.box.fullImg img:not(.lupa) {
  width: 100%;
  max-width: 100%;
}
.box.download {
  display: inline-flex !important;
}
.boxVideoPlayer {
  position: relative;
  display: inline-block;
  margin-top: 1%;
  width: 33%;
}
.boxVideoPlayer img {
  width: 100%;
  max-width: 100% !important;
}
.boxPlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  cursor: pointer;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('gfx/przycisk play_szary.png');
  background-size: clamp(45px, 15%, 70px);
}
.boxPlay a {
  position: absolute;
  width: 100%;
  height: 100%;
}
.boxPlay.large {
  background-size: 40%;
}
.boxPlay:hover,
.boxDesc:hover .boxPlay,
.demoBook-box:hover .boxPlay {
  background-image: url('gfx/przycisk play_czerwony.png');
}

.oneBox {
  float: left;
  position: relative;
}
.box,
.boxFree {
  position: relative;
}
.boxFree img,
.oferta-karta-opis .boxFree img {
  max-width: 100%;
}

.oneBox .box {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  padding: 1%;
  margin-top: 1.5%;
}

.twoBoxes {
  float: left;
  position: relative;
}
.twoBoxes .box {
  display: inline-block;
  min-height: 300px;
  padding: 10px;
  box-sizing: border-box;
}
.twoBoxes .box:nth-of-type(2n+1) {
  margin: 15px 1.5% 0 0;  
}
.twoBoxes .box:nth-of-type(2n+2) {
  margin: 15px 0 0 0;
}
.twoBoxes .box:hover {
   
}
.twoBoxes.full {
  width: 100%;
}

.boxesSide {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.boxesSide .userLog img {
  height: 20px;
}


.twoBoxesFlex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
}
.twoBoxesFlex.center {
  align-items: center;
}
.twoBoxesFlex .boxVideo,
.twoBoxesFlex .box {
  display: inline-block;
  flex-basis: 49.5%;
  margin-bottom: 1%;
}
.twoBoxesFlex .boxVideo {
  aspect-ratio: 16/9;
}

.threeBoxes {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.threeBoxes.videos {
  width: 100%;
}
.threeBoxes .box,
.threeBoxes .boxFree {
  display: inline-block;
  margin: 1.5% 1.5% 0 0;
  padding: 10px;
  box-sizing: border-box;
  vertical-align: top;
}
.threeBoxes .boxFree {
  
}
.threeBoxes .box {
  min-height: 390px;
}
.threeBoxes > .box:nth-of-type(3n+3),
.threeBoxes > .boxFree:nth-of-type(3n+3) {
  margin-right: 0;
}
.threeBoxes .box:hover {
   
}
.threeBoxes .boxDouble {
  width: 66%;
  display: inline-block;
  margin: 10% 0 0 0;
  vertical-align: top;
}
.fourBoxes {
  float: left;
  position: relative;
}
.fourBoxes .box,
.fourBoxes .boxFree {
  display: inline-block;
  vertical-align: top;
  margin: 10px 1% 10px 0;
  border-radius: 10px;
  box-sizing: border-box;
}
.fourBoxes > .box:nth-of-type(4n+4),
.fourBoxes .boxFree:nth-of-type(4n+4) {
  margin: 10px 0 10px 0;
}
.fourBoxes .boxBorderRed .boxFree,
.fourBoxes .boxBorderGrey .boxFree {
  margin: 0 2%; 
}

.fourBoxesFlex {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.fourBoxesFlex .box {
  display: inline-block;
  margin: 1.5% 1.5% 0 0;
  width: 23%;
  padding: 10px;
  box-sizing: border-box;
  vertical-align: top;
}
.fourBoxesFlex .box img {
  max-width: 100%;
}


.borderedRed {
  margin: 10px 2%;
  padding: 0 15%;
  box-sizing: border-box;
  border: 1px solid #e00018;
  border-radius: 10px;
}
.borderedGrey {
  margin: 10px 0;
  padding: 0 15%;
  box-sizing: border-box;
  border: 1px solid #4d4d4d;
  border-radius: 10px;
}
.boxBorderRed {
  width: 48%;
  margin: 10px 1%;
  padding: 2%;
  box-sizing: border-box;
  border: 1px solid #e00018;
  border-radius: 10px;
  display: inline-block;
  float: left;
}
.boxBorderGrey {
  width: 48%;
  margin: 10px 1%;
  padding: 2%;
  box-sizing: border-box;
  border: 1px solid #4d4d4d;
  border-radius: 10px;
  display: inline-block;
  float: left;
}

.boxGreen {
  background: #0f6b6c;
}
.boxYellow {
  background: #e9c438;
}
.boxName {
  float: left;
  position: relative;
  width: 100%;
  margin: 8px 0;
  font-weight: 600;
  font-size: 150%;
  color: #4c4c4c;
  box-sizing: border-box;
  background-repeat:  no-repeat;
  background-position:  left center;
}
.boxName h2 {
  font-size: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}
.boxDesc a {
  text-decoration: underline !important;
}
.boxName a,
.boxScrollList a {
  color: #4c4c4c;
  text-decoration: none !important;
}
.box a:hover,
a.red,
.boxName a:hover {
  color: #e30119 !important;
}
.box.bgProgramowanie {
  background-image: url('gfx/bg-main-prog.jpg');
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
}
.boxName .table .tableCell {
  height: 55px;
  vertical-align: middle;
}
.boxName span {
  color: #000;
  font-size: 180%;
  font-weight: 100;
  line-height: 110%;
}
.boxName .arrowBoxDesc-all {
  position: absolute;
  top: 36%;
  right: 14%;
  font-size: 80%;
  font-weight: 400;
}
.boxName .arrowBoxDesc-left {
  right: 8%;
  width: 4%;
  left: none;
}
.boxName .arrowBoxDesc-right {
  right: 0;
  width: 6%;
}
.boxDesc {
  float: left;
  width: calc(100% - 80px);
  color: #4c4c4c;
  margin: 10px 20px 0 60px;
  overflow: hidden;
  position: relative;
}
.box.bgProgramowanie .boxDesc {
  margin: 0 20px 0 40px;
}
.arrowBoxDesc-left:before,
.arrowBoxDesc-right:before {
  padding-top: 100%;
  content: "";
  display: block;
}
.arrowBoxDesc-left,
.arrowBoxDesc-right {
  position: absolute;
  top: 33%;
  width: 15%;
  background-repeat: no-repeat;
  beckground-size: 100% auto;
  cursor: pointer;
}
.arrowBoxDesc-left {
  background-image: url('/gfx/arrow-leftWhite.jpg');
}
.arrowBoxDesc-right {
  background-image: url('/gfx/arrow-rightWhite.jpg');
}
.boxDesc .arrowBoxDesc-left {
  left: 0;
}
.boxDesc .arrowBoxDesc-right {
  right: 0;
}
.boxDesc-cover-info {
  position: absolute;
  top: 10%;
  left: 0;
  z-index: 100;
}
.boxDesc-cover {
  float: left;
  width: 100%;
  color: #000;
  margin: 0 0 6px 0;
  text-align: center;
  opacity: 0.75;  
}
.boxDesc-cover:hover {
  opacity: 1;  
}
.boxDesc-coverLeft {
  float: left;
  height: 190px;
  color: #000;
  margin: 0 0 6px 0;
  text-align: center;  
}
.boxDesc-cover img,
.boxDesc-coverLeft img {
  max-width: 60%;
  box-shadow: 0px 0px 15px #d7d7d7;
  transition: box-shadow .25s ease-in-out;
  -moz-transition: box-shadow .25s ease-in-out;
  -webkit-transition: box-shadow .25s ease-in-out;
  -ms-transition: box-shadow .25s ease-in-out;
  -o-transition: box-shadow .25s ease-in-out;  
}
.boxDesc-cover img:hover,
.boxDesc-coverLeft img:hover {
  box-shadow: 0px 0px 15px #000;  
}
.boxSchool {
  width: 100%;
  margin-bottom: 10px;
  background-position: center center;
  background-size: auto 70px;
  background-repeat: no-repeat;
  /*background-image: url('gfx/ico-profilSzkoly.png');*/
  text-align: center;
  /*padding-top: 100px;*/
  font-size:  140%;
  font-weight: 600;
  color:  #444;
}
.boxSchool:hover {
  /*background-image: url('gfx/ico-profilSzkoly-hover.png');*/
  color: #e30119;
}
.boxDesc-image {
  width: 100%;
  margin: 0 0 6px 0;
  text-align: center;  
}
.boxDesc-image.small {
  width: 77%;
  margin: 0 11% 0;
  text-align: center;  
}
.boxDesc-image.small2 {
  width: 89% !important;
  margin: 0 3% 6px 3% !important;
  text-align: center;  
}
.boxDesc-image img {
  max-width: 100%;
  max-height: 100%;  
}
.boxDesc-video {
  width: 100%;
  margin: 0 0 6px 0;
  text-align: center;
  position: relative;  
}
.boxDesc-video:before {
  display: block;
  content: "";
  padding-top: 56%;  
}
.boxDesc-videoPlayer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;  
}

.boxDesc-ikona {
  float: left;
  width: 100%;
  min-height: 70px;
  color: #4d4d4d;
  margin: 4% 0 8% 0;
  text-align: center;
}
.boxFree.ramka.shadow {
  opacity: 0.75; 
  box-shadow: 0px 0px 15px #d7d7d7;
  transition: box-shadow .25s ease-in-out;
  -moz-transition: box-shadow .25s ease-in-out;
  -webkit-transition: box-shadow .25s ease-in-out;
  -ms-transition: box-shadow .25s ease-in-out;
  -o-transition: box-shadow .25s ease-in-out;   
}
.boxFree.ramka.shadow:hover {
  opacity: 1;  
  box-shadow: 0px 0px 15px #000;  
}
.boxDesc-ikona img {
  max-width: 75% !important;
  max-height: 70px;
}
.boxDesc-title {
  float: left;
  width: 100%;
  color: #4d4d4d;
  margin: 0 0 6px 0;
  text-align: center;
}
.boxDesc-title.left {
  text-align: left;
}
.box .boxDesc-title {
  min-height: 33px;
}
.boxDesc-title a {
  color: #4d4d4d;
}
.boxDesc-title a:hover,
.boxDesc:hover .boxDesc-title {
  color: #e00018 !important;
}
.boxDesc-price {
  float: left;
  width: 100%;
  color: #4d4d4d;
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 150%;
}
.boxDesc-skorzystam,
.boxDesc-skorzystano {
  display: block;
  margin-top: 25px;
  font-weight: 600;
  text-align: right;
}
.boxDesc-skorzystam input {
  border: 0;
}
.boxDesc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.boxDesc ul li:before {
  content: "• ";
  font-size: 200%;
  color: #e30119;
  padding-right: 5px;
  line-height: 60%;
}
.boxDesc ul li {
  display: block;
  margin: 0 0 10px 0;
  padding: 0; 
}
.boxRight {
  position: absolute;
  right: 2%;
  bottom: 5%;
  display: inline-block;
  box-sizing: border-box;
}
.threeBoxes .boxRight {
  right: 5%;
} 

.boxRotate {
  width: 1000%;
  position: relative;
  height: 100%;
  text-align: left;
}
.boxRotateList {
  width: 10%;
  display: inline-block;
}
.boxScroll {
  width: 100%;
  position: relative;
  height: 200px;
  text-align: left;
  float: left;
}
.boxScrollList {
  width: 100%;
  display: inline-block;
  margin-bottom: 15px;
  float: left;
}

.boxIco {
  float: left;
  width: 100%;
  text-align: center;
  margin: 0 0 10px 0;
}
.boxIco img {
  max-width: 100%;
  max-height: 100%;
}
.boxButton {
  float: left;
  width: 100%;
  text-align: center;
  margin: 30px 0;
}
.btn {
  border-radius: 14px;
  font-size: 100%;
  padding: 5px 25px !important;
  margin: 5px 0;
  display: inline-block;
  cursor: pointer;
  font-weight: 600;
}
.btn.small {
  font-size: 80%;
  padding: 4px 14px !important;
  margin: 2px 0;
  font-weight: 600;
}
.btn.red {
  color: #fff !important;
  background: #e30119;
}
.btn.redIP {
  color: #fff !important;
  background: #a10046;
}
.btn.blue {
  color: #fff;
  background: #2c4592;
}
.btn.shadow {
  box-shadow: 2px 4px 5px #000;
}
.btn.grey {
  color: #fff;
  background: #444;
}

.InfoUnderBoxes {
  width: 100%;
  text-align: center;
  margin: 30px 0;
  float: left;
  font-size: 24px;
  font-weight: 100;
}

a.btn-white {
  border: 1px solid #000;
  border-radius: 8px;
  color: #000;
  padding: 3px 25px;
  font-size: 24px;
  background: #fff; 
}
a.btn-white:hover {
  background: #ed4625;
  border: 1px solid #ed4625;
  color: #fff; 
}

.titleAboveBoxes {
  color: #4d4d4d;
  width: 100%;
  display: inline-block;
}
.titleAboveBoxes h2 {
  margin: 20px 0 10px 0;
  padding: 0;
  font-size: 130%;
}
.fiveBoxes.bordered {
  border: 1px solid #4d4d4d;
  float: left;
  padding: 10px 0;
  width: 100%;
  box-sizing: border-box;
}
.fiveBoxes .box {
  display: inline-block;
  vertical-align: top;
  margin: 15px 0.5%;
}
.fiveBoxes.TwoOfFive {
  width: 38%;
  /*min-height: 470px;*/
}
.fiveBoxes.ThreeOfFive {
  width: 60%;       
  margin-right: 2%;
  /*min-height: 470px;*/
}
.fiveBoxes.TwoOfFive .box {
  float: left;
  width: 49%;
  margin: 15px 0.5%;
}
.fiveBoxes.ThreeOfFive .box {
  float: left;
  width: 32.33%;
  margin: 15px 0.5%;
}

.nextToBoxes .box {
  float: left;
  margin: 10px 0.3% 10px 0;
  max-width: 5%;
}
.box.logo {
  text-align: center;
}
.box.logo img {
  max-width: 100%;
  max-height: 100%;
}
.logsBox {
  margin: 10px auto 40px;
  overflow: hidden;
  width: 60%;
  position: relative;
}
.logsBox-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  height: 100%;
  background: url('gfx/left.png') repeat-y;
  background-size: 100%;
}
.logsBox-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 10%;
  height: 100%;
  background: url('gfx/right.png') repeat-y;
  background-size: 100%;
}
#logs-list,
#logs-list2 {
  width: 1000%;
}

/* STREFA UCZNIA */

.oferta-karta {
  width: 100%;
  margin: 20px 0 60px 0;
  float: left;
}
.oferta-karta-opis {
  float: left;
  width: 80%;
  padding: 0 1% 0 3%;
  box-sizing: border-box;
}
.klamra {
  position: relative;
  width: 50%;
  display: block;
  padding: 0 2%;
  margin: 0 0 0 2%;
  box-sizing: border-box;
}
.klamraLeft,
.klamraRight {
  position: absolute;
  top: 0;
  width: 2%;
  height: 100%;
  background-size: 100% 100%;
  background-position: center center;
}
.klamraLeft {
  background-image: url('gfx/klamraLeft.jpg');
  left: 0;
}
.klamraRight {
  background-image: url('gfx/klamraRight.jpg');
  right: 0;
}
.oferta-karta-opis img {
  max-width: 35%;
}
.oferta-karta-opis .info-puzzles,
.oferta-karta-opis .info-puzzles2 {
  background-size: 40px auto;
  background-position: 10px center;
  background-repeat: no-repeat;
  padding: 15px 10px 15px 60px;
  border-top:  1px solid #d5d5d5;
  border-bottom:  1px solid #d5d5d5;
  margin: 10px 0;
}
.oferta-karta-opis .info-puzzles {
  background-image: url('gfx/ico-puzzle.png');
}
.oferta-karta-opis .info-puzzles2 {
  background-image: url('gfx/ico-puzzle2.png');
}

.oferta-karta-opis .info-trybiki {
  background: url('gfx/ico-trybiki.png'), linear-gradient(270deg, rgba(255,255,255,1) 20%, rgba(232, 241, 250,0.7) 100%);
}
.oferta-karta-opis .info-trybiki2 {
  background: url('gfx/ico-trybiki2.png'), linear-gradient(270deg, rgba(255,255,255,1) 20%, rgba(254, 238, 233, 0.7) 100%);
}

.oferta-karta-opis .ico-artPrawny div {
  background: linear-gradient(270deg, rgba(255,255,255,1) 20%, rgba(232, 241, 250,0.7) 100%);
  padding: 10px 10px 10px 33px;
}

.oferta-karta-opis .info-trybiki,
.oferta-karta-opis .info-trybiki2 {
  background-size: 45px auto, auto;
  background-position: 6px center, 0 0;
  background-repeat: no-repeat, repeat;
  padding: 20px 10px 20px 60px;
  margin: 10px 0;
  position: relative;
}
.oferta-karta-opis .info-trybiki:after,
.oferta-karta-opis .info-trybiki:before,
.oferta-karta-opis .info-trybiki2:after,
.oferta-karta-opis .info-trybiki2:before {
  content:"";
  display: block;
  height: 1px;
  width: 100%;
  position: absolute;
  left: 0;
}
.oferta-karta-opis .info-trybiki:after,
.oferta-karta-opis .info-trybiki:before {
  background: linear-gradient(270deg, rgba(255,255,255,1) 20%, rgba(0, 145, 208,0.7) 100%);
}
.oferta-karta-opis .info-trybiki2:after,
.oferta-karta-opis .info-trybiki2:before {
  background: linear-gradient(270deg, rgba(255,255,255,1) 20%, rgba(196, 13, 66, 0.7) 100%);
}
.oferta-karta-opis .info-trybiki:after,
.oferta-karta-opis .info-trybiki2:after {
  bottom: 0;
}
.oferta-karta-opis .info-trybiki:before,
.oferta-karta-opis .info-trybiki2:before {
  top: 0;
}
.oferta-karta-opis .ico-cwicz,
.oferta-karta-opis .ico-zadania,
.oferta-karta-opis .ico-przyk,
.oferta-karta-opis .ico-redCwicz,
.oferta-karta-opis .ico-redZadania,
.oferta-karta-opis .ico-redPrzyk,
.oferta-karta-opis .ico-orangeCwicz {
  background-size: 40px auto;
  background-repeat: no-repeat;
  background-position: 0 0;
  padding: 17px 0 4px 48px;
  margin: 10px 0 0 0 !important;
}
.oferta-karta-opis .ico-zapoznajOrange,
.oferta-karta-opis .ico-zapoznajBlue,
.oferta-karta-opis .ico-cwiczeniaOrange,
.oferta-karta-opis .ico-cwiczeniaBlue,
.oferta-karta-opis .ico-wartoOrange,
.oferta-karta-opis .ico-wartoBlue,
.oferta-karta-opis .ico-rozgrzewkaOrange,
.oferta-karta-opis .ico-rozgrzewkaBlue {
  background-size: 40px auto;
  background-repeat: no-repeat;
  background-position: 0 0;
  padding-left: 48px;
  padding-top: 13px;
  padding-bottom: 20px;  
}


.oferta-karta-opis .ico-artPrawny p {
  background-size: 30px auto;
  background-repeat: no-repeat;
  background-position: 0 0;
  padding: 3px 0 4px 32px;
  margin: 10px 0 5px 0 !important;
}
.oferta-karta-opis .ico-cwicz {
  background-image: url('gfx/ico-cwicz-blue.png');
}
.oferta-karta-opis .ico-cwiczeniaOrange {
  background-image: url('gfx/ico-cwicz2-orange.png');
}
.oferta-karta-opis .ico-cwiczeniaBlue {
  background-image: url('gfx/ico-cwicz2-blue.png');
}
.oferta-karta-opis .ico-zadania {
  background-image: url('gfx/ico-zadania.png');
}
.oferta-karta-opis .ico-przyk {
  background-image: url('gfx/ico-przyklad.png');
}
.oferta-karta-opis .ico-redCwicz {
  background-image: url('gfx/ico-cw2.png');
}
.oferta-karta-opis .ico-redZadania {
  background-image: url('gfx/ico-zadania2.png');
}
.oferta-karta-opis .ico-redPrzyk {
  background-image: url('gfx/ico-przyklad2.png');
}
.oferta-karta-opis .ico-orangeCwicz {
  background-image: url('gfx/ico-cwicz-orange.png');
}
.oferta-karta-opis .ico-artPrawny p {
  background-image: url('gfx/ico-paragraf.png');
}
.oferta-karta-opis .ico-zapoznajOrange {
  background-image: url('gfx/ico-zapoznaj2-orange.png');
}
.oferta-karta-opis .ico-zapoznajBlue {
  background-image: url('gfx/ico-zapoznaj2-blue.png');
}
.oferta-karta-opis .ico-wartoOrange {
  background-image: url('gfx/ico-warto2-orange.png');
}
.oferta-karta-opis .ico-wartoBlue {
  background-image: url('gfx/ico-warto2-blue.png');
}
.oferta-karta-opis .ico-rozgrzewkaOrange {
  background-image: url('gfx/ico-rozgrzewka-orange.png');
}
.oferta-karta-opis .ico-rozgrzewkaBlue {
  background-image: url('gfx/ico-rozgrzewka-blue.png');
}



.oferta-karta-opis .cwicz-tresc {
  margin: 0 0 0 48px;
}
.oferta-karta-opis .cwicz-tresc ul,
.oferta-karta-opis .cwicz-tresc ol {
  margin: 10px 13px;
  padding: 0;
}

.oferta-karta-opis .warto {
  position: relative;
  margin: 15px 0 0 30px;
}
.oferta-karta-opis .ico-warto,
.oferta-karta-opis .ico-redWarto {
  position: absolute;
  left: -60px;
  top: -5px;
  width: 30px;
  height: 30px;
  background-size: 30px auto;
  background-repeat: no-repeat;
  background-position: 0 0;
  margin-left: 20px !important;
}
.oferta-karta-opis .ico-warto {
  background-image: url('gfx/ico-warto.png');
}
.oferta-karta-opis .ico-redWarto {
  background-image: url('gfx/ico-warto2.png');
}
.oferta-karta-opis .warto-tresc {
  margin-left: 30px;
}
.oferta-karta-opis .warto-tresc ul,
.oferta-karta-opis .warto-tresc ol {
  margin: 10px;
  padding: 0;
}
.oferta-karta-opis .line-bottom {
  font-weight:  600;
  padding-bottom: 4px;
  border-bottom: 1px solid #d5d5d5;
}

.oferta-karta-opis > article > h1 {
  margin: 50px 0 30px 0;
  font-size: 180%;
}

.oferta-karta-opis h2.temat-pos {
  margin: 40px 0 20px 0;
}
.oferta-karta-opis h2.temat-pos span {
  color: #fff;
  background-color: #2c4592;
  padding: 3px 8px;
  margin-right: 5px;
}
.oferta-karta-opis h2.temat-pos.bgRed span {
  background-color: #a10046;
}
.oferta-karta-opis h3.temat-pos {
  margin: 20px 0 10px 0;
}
.oferta-karta-opis h3.temat-pos span {
  color: #2c4592;
  margin-right: 3px;
}
.oferta-karta-opis h3.temat-pos.red span {
  color: #a10046;
}
.oferta-karta-opis h3.temat-pos.bgRed span {
  background-color: #a10046;
}
.oferta-karta-opis h4.slownik {
  margin: 20px 0 10px 0;
  position: relative;
}
.oferta-karta-opis h4.slownik:after {
  content:"";
  display: block;
  height: 1px;
  width: 100%;
  position: absolute;
  bottom: -4px;
  left: 35px;
  background: linear-gradient(270deg, rgba(255,255,255,1) 20%, rgba(0, 145, 208, 0.7) 100%);    
}
.oferta-karta-opis h4.slownik span {
  color: #fff;
  background-color: #2c4592;
  padding: 3px 8px;
  margin-right: 5px;
  font-size: 120%;
}

.oferta-karta-opis .blue-dots {
  border-left: 3px dotted #2c4592;
  padding: 12px;
  margin: 15px 0;
}

.oferta-karta-opis .h2 ,
p.h2 {
  margin: 10px 0 2px 5px !important;
  font-weight: 700;
}
.oferta-karta-opis .h3,
p.h3 {
  margin: 0 0 2px 15px !important;
}
p.h3 {
  font-weight: 700;
}
.oferta-karta-opis .h4,
p.h4 {
  margin: 0 0 2px 30px !important;
}
.oferta-karta-opis .h5,
p.h5 {
  margin: 0 0 2px 45px !important;
}
.oferta-karta-opis .h6,
p.h6 {
  margin: 0 0 2px 55px !important;
}
.oferta-karta-opis .prezentacja {
  position:  relative;
  width: 100%; 
  max-width: 860px;
}
.oferta-karta-opis .prezentacja:before {
  content: " ";
  display: block;
  padding-top: 60.6%;
}
.oferta-karta-opis .prezentacja iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
}

.oferta-karta-rightColumn {
  float: left;
  width: 20%;
  padding: 0 0 0 2%;
  box-sizing: border-box;
  border-left: 1px solid #d7d7d7;
}
.oferta-karta-rightColumn p {
  margin: 5px 0;
}
.oferta-karta-rightColumn img {
  max-width: 60%;
  margin-bottom: 10px;
}
.oferta-karta-rightColumn a {
  color: #000;
}
.oferta-karta-rightColumn a:hover,
.oferta-karta-rightColumn a.selected {
  color: #e30119;
}
.oferta-karta-rightColumn .btn {
  min-width: 70%;
  text-align: center;
}
.oferta-karta-rightColumn .demoBook-box {
  position: relative;
  width: 100%;
  margin-top: 10%;
}
.oferta-karta-rightColumn .demoBook-box:hover a {
  color: #e30119;
}
.oferta-karta-rightColumn .demoBook {
  position: relative;
  width: 45%;
}
.oferta-karta-rightColumn .demoBook img {
  width: 100% !important;
  max-width: 100% !important;
}

ul.plikiLista {
  margin: 2% 0 0 0;
  padding: 0;
  list-style: none;
}
ul.plikiLista li {
  margin: 0.5% 0;
  padding: 1%;
  list-style: none;
  width: 75%;  
  background-image: url('gfx/ikona-pk-lista.png');
  background-repeat: no-repeat;
  background-position: center right;
  background-size: auto 66%;
}
ul.plikiLista li.ramka {
  margin: 0.5% 0;
  padding: 2% 4%;
  list-style: none;
  width: 95%;  
  background-image: none;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
ul.plikiLista li.ramka:hover {
  background-image: none;
}
ul.plikiLista li .gryLista-tytul,
ul.plikiLista li .tematDodLista-tytul {
  width: 30%;
  display: inline-block;
  vertical-align: top;
  margin-top: 5%;
  font-size: 120%;
  font-weight: 600;  
}
ul.plikiLista li .tematDodLista-tytul {
  width: 66%;
}
ul.plikiLista li .gryLista-logo,
ul.plikiLista li .tematDodLista-logo {
  width: 20%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin-top: 2%;
}
ul.plikiLista li .tematDodLista-logo {
  width: 30%;
}
ul.plikiLista li .gryLista-logo img {
  margin-bottom: 4px;
}
ul.plikiLista li .tematDodLista-logo img {
  max-width: 100%;
}
ul.plikiLista li .gryLista-screens {
  width: 49%;
  display: inline-block;
  vertical-align: top;
  text-align: right;
}
ul.plikiLista li .gryLista-screens img {
  margin: 0 2%;
}
ul.plikiLista li:hover {
  background-image: url('gfx/ikona-pk-lista-hover.png');  
}
ul.plikiLista li:hover a {
  color: #e30119;  
}
ul.plikiLista li a {
  color: #222;
}

/* SPIS TEMATÓW */

h2.tytul-czesci-1 {
  background-color: #2c4592; 
  padding: 10px; 
  margin: 0;
  color: #fff;
}
h2.tytul-czesci-2 {
  background-color: #c6051a; 
  padding: 10px; 
  margin: 0;
  color: #fff;
}
div.spis-rozdzial {
  border-bottom: 1px solid #d6d6d6;
  
}
div.spis-rozdzial h2 {
  display: flex;
  justify-content: space-between;
  padding: 15px 10px;
  margin: 0;
  cursor: pointer;
}
div.spis-rozdzial h2:hover {
  background-color: #d8d8d8;
}
ul.spis-tematy {
  list-style: none;
  font-size: 120%;
  margin: 5px 0 20px 3%;
  padding: 0;
  width:  90%;
}
ul.spis-tematy li {
  margin-bottom: 8px;
}
ul.spis-tematy li a.added {
  color: #444;
}
ul.spis-tematy li a.added:hover {
  color: #e30119;
}

.drag-drop {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.non-drop,
.drag,
.drop {
  display: inline-flex;
  min-height: 66px;
  align-items: center;
}
.non-drop,
.drag {
  padding: 8px;
  box-sizing: border-box;
}
.drop {
  border: 1px dashed #969696;
  background-image: url('gfx/ico-drop.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 50%;
  width: 10%;
  min-width: 110px;
  margin-right: 2%;
  box-sizing: border-box;
}
.non-drop {
  width: 65%;
  min-width: 150px;
}
.drag {
  border: 1px solid rgba(0, 145, 208, 1);
  background: linear-gradient(180deg, rgba(255,255,255,1) 27%, rgba(177,207,235,1) 100%);
  width: 10%;
  min-width: 110px;
  justify-content: center;
  text-align: center;
  cursor: move;
  margin: 0 15px 15px 0;
}
.test {
  display: flex;
  flex-wrap: wrap;
}
.test label {
  display: inline-block;
  width: calc(100% - 20px);  
}
.checkTestDrag,
.checkTest,
.showAnswers {
  border-radius: 0;
  border: 0;
  background-color: #008fcb !important;
  margin-top: 10px;
}
.showAnswers {
  margin-left: 10px;
}
.wzorOdp {
  display: inline-block;
  width: 30px;
}
.wzorOdp-tytul {
  background-color: #f4f4f5;
  display: inline-block;
  height: 100%;
  width: 10px;
}
.wzorOdp-wzor {
  display: inline-block;
}
.wzorOdp-correct,
.wzorOdp-incorrect {
  background-color: #f4f4f5;
  background-size: 15px auto;
  background-position: center 4px;
  background-repeat: no-repeat;
  width: 20px;
  display: inline-block;
}  
.wzorOdp-correct {
  background-image: url('/gfx/ico-testCorrect.png');
}
.testOdp {
  display: inline-block;
  width: calc(100% - 40px);
}
.testResult {
  margin: 6px 0 0 25px;
  padding: 8px 33px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 27px auto;
}

.testResult.bad {
  background-image: url('/gfx/ico-testResultBad.png');
}
.testResult.OK {
  background-image: url('/gfx/ico-testResultOK.png');
}


/* footer ----------------------- */

#footer {
	float: left;
  width: 100%;
	margin: 5px 0 0 0;
	padding: 0;
  color: #222;
}
#footer-content {
  width: 100%;
  margin: 34px auto;
}
.footer-box {
	width: 26%;
	margin: 0 3% 0 3%;
	padding: 0;
  float: left;
  text-align: center;
  line-height: 120%;
}
.footer-box a {
	color: #222;
	text-decoration: none;
}
.footer-tytul {
	width: 100%;
  float: left;
	margin: 0 0 15px 0;
	padding: 0;
  font-size: 15px;
  text-transform: uppercase; 
}
.footer-box-dane {
	width: 100%;
  float: left;
	margin: 0;
	padding: 0;
}
.footer-box-dane span.footer-news-data {
	font-size: 11px;
	color: #858585;
}
.footer-box-ikona {
  float: left;
  width: 100%;
  margin-top: 5px;
}
.footer-box-ikona img { 
  opacity:1;
  transition: opacity .55s ease-in-out;
  -moz-transition: opacity .55s ease-in-out;
  -webkit-transition: opacity .55s ease-in-out;
  -ms-transition: opacity .55s ease-in-out;
  -o-transition: opacity .55s ease-in-out;
}
.footer-box-ikona img:hover {
  filter: alpha(opacity=60);
  opacity: 0.6;
} 
.footer-box-enter {
  width: 100%;
  float: left;
  margin: 10px 0 0 0;
  padding: 0;
  text-transform: uppercase;
}                                               
.footer-box-enter a {
  background: #000;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  padding: 2px 12px;
  -webkit-transition: background 0.5s linear;
  -moz-transition: background 0.5s linear;
  -ms-transition: background 0.5s linear;
  -o-transition: background 0.5s linear;
  transition: background 0.5s linear;
}
.footer-box-enter a:hover {
  background: #6d6d6d;
}
.footer-box-newsletter {
  float: left;
  width: 100%;
  margin: 15px 0 0 0;
  font-size: 14px;
}
.footer-box-newsletter input.newsletter {
  margin: 0;
  padding: 1px 4px;
  width: 70%;
}
.footer-box-newsletter input {
  float: left;
}


/* end footer ----------------------- */

/* BOTTOM */

#site-bottom {
  padding: 20px 6% 10px 6%;
  margin: 20px 0 0 0;
  background: #c6051a;
  color: #fff;
}
#site-bottom a, .bottom-left-links a {
  color: #fff;
}
#site-bottom a:hover, .bottom-left-links a:hover {
  text-decoration: underline;
}
.site-bottom-boxes {
	float: left;
  margin: 10px 0 0 0;
	padding: 0;
}
.site-bottom-boxes img {
	max-width: 100%;
	margin: 0 10px 0 0;
}
.site-bottom-boxes-title {
  color: #fff;
  float: left;
  width: 100%;
  font-weight: 400;
  font-size: 120%;
  padding-left: 20px;
  background: url('gfx/footer-arrow.png') no-repeat left center;
}
.site-bottom-boxes-line {
  color: #fff;
  float: left;
  width: 40px;
  height: 1px;
  border-top: 1px solid #fff;
}
.site-bottom-boxes-info {
  float: left;
  width: 100%;
  color: #fff;
  margin: 15px 0 0 0;
}
.site-bottom-box {
	width: 100%;
	margin: 10px 0 0 0;
	padding: 0;
  float: left;
  line-height: 120%;
}
.site-bottom-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-bottom-box ul li {
  margin: 0;
  padding: 2px 0;
}
.site-bottom-box ul li a {
	color: #fff;
	text-decoration: none;
}
.site-bottom-box ul li a:hover {
	text-decoration: underline;
}
.site-bottom-copy {
	width: 100%;
	margin: 20px 0 0 0;
	padding: 0;
	text-align: center;
}
.site-bottom-copy a {
  color: #fff;
  text-decoration: none;
}
.site-bottom-copy a:hover {
  text-decoration: underline;
}
.bottom-left-links {
  float: right;
  margin: -39px 10px 15px 0;
}
.bottom-left-links a {
 font-size: 14px;
}

/* NAWIGACJA */

.navi {
  float: left;
  width: 100%;
  text-align: center;
  margin: 20px 0;
}
.navi a {
  padding: 0 5px;
  color: #111;
  transition: background .25s ease-in-out;
  -moz-transition: background .25s ease-in-out;
  -webkit-transition: background .25s ease-in-out;
  -ms-transition: background .25s ease-in-out;
  -o-transition: background .25s ease-in-out;
}
.navi a.selected,
.navi a:hover {
  background: #9d58ab;
  color: #fff;
}

.navTematy {
  display: flex;
  align-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0 0 15px 0 !important;
}
.navTematy-prev,
.navTematy-next {
  display: inline-block;
  width: 50%;
}
.navTematy-prev a,
.navTematy-next a {
  font-weight: 400;
}
.navTematy-next {
  text-align: right;
}

/* OKNO Z KOMUNIKATEM */

#przyciemnienie {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  top: 0;
  left: 0;
  z-index: 2000;
}
#przyciemnienie.jasne {
  background: rgba(255,255,255,0.66);
}
.popupGlowna:before {
  display: block;
  padding-top: 60%;
  content: "";
}
.popupGlowna {
  position: fixed;
  width: 50%;
  background-size: cover;
  top: 20%;
  left: 25%;
  z-index: 3000;
  cursor: pointer;
  box-shadow: 2px 4px 5px #000;
  border-radius: 2.4%;
}
.popupGlowna.dzienNauczyciela {
  background-image: url('gfx/baners/banner-Dzien-Nauczyciela-2016.png');
}
.popupGlowna.BozeNarodzenie {
  background-image: url('gfx/baners/banner-Boze-Narodzenie-2016-pro-2-3.png');
}

.messageWindow {
  position: fixed;
  width: 40%;
  height: auto;
  background: #fff;
  color: #444;
  top: 10%;
  left: 30%;
  z-index: 3000;
  border: 4px solid #e30119;
  border-radius: 10px;
  padding: 3%;
  text-align: center;
}
.messageWindow input {
  background: #e30119;
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 100%;
  font-weight: 400;
  padding: 8px 10px;
  margin: 7px;
  display: inline-block;
}
#err_div
{
 	position: absolute;
	top: 200px;
 	left: 33%;
  z-index: 3000;
}
#err_div .t_err
{
 	width: 450px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
 	background: #fff;
 	padding: 3px;
 	opacity: 1;
 
}
#err_div .t_err th
{
 	color: #000;
 	padding: 10px 5px;
 	font-weight: bold;
 	text-align: left;
 	border-bottom: 1px solid #EEEEEE;
 	font-size: 14px;
}
#err_div .t_err td
{
 	color: #000;
}
td.err-middle {
  padding: 10px 0 10px 5px;
  font-size: 12px; 
}
td.err-footer {
  border-top: 1px solid #ddd;
  text-align: right;
  background: #F5F5F5;
  padding: 15px 15px 20px 0; 
}

/* POPUP */

#popup {
  position: fixed;
  left: 50%;
  top: 100px;
  z-index: 9999;
}
#popup img {
  border: 0;
}
.popup_tresc {
  float: left;
  padding-top: 20px;
}
.popup_close {
  float: left;
  width: 35px;
}

/* COOKIE */ 

#cookie-info
{
 	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 10px 0 10px 0;
	background-color: #e0e0e0;
 	margin: 0;
 	z-index: 200;
 	opacity: 0.83;
 	color: #000;
 	line-height: 110%;
  text-align: center;
  border-top: 1px solid #000;
}
#cookie-info input.btnBlack {
  font-size: 100%;
}
#cookie-info div
{
 	width: 100%;
  text-align: center;
  margin-bottom: 4px; 
}
#cookie-info a
{
 	color: #000;
 	text-decoration: none;
}

/* OKIENKO */
#err_div
{
  position: fixed;
  top: 20%;
  left: 33%;
  z-index: 3000;
}
#err_div .t_err
{
  width: 450px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: #fff;
  padding: 3px;
  opacity: 1;
 
}
#err_div .t_err th
{
  color: #000;
  padding: 10px 5px;
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid #EEEEEE;
  font-size: 110%;
}
#err_div .t_err td
{
  color: #000;
}
td.err-middle {
  padding: 10px 0 10px 5px;
  font-size: 100%; 
}
td.err-footer {
  border-top: 1px solid #ddd;
  text-align: right;
  background: #F5F5F5;
  padding: 15px 15px 20px 0; 
}



/* Container styles */
figure {
  margin: 10px 2%;
}
.container {
  padding: 20px 0;
  text-align: center;
}

.chart {
  position: relative;
  display: inline-block;
  text-align: center;
}
.chart figcaption {
  border: 0;
  border-radius: 50%;
  box-sizing: border-box;
}
.fourCircles .chart figcaption {
  height: 225px;
  width: 225px;
}
.sixCircles .chart figcaption {
  height: 150px;
  width: 150px;
}    

/*.chart img {
  position: absolute;
  max-width: 100px;
  max-height: 100px;
  background: white;
} */
/* END Container styles */

/* Colors for the circles and positions for the graphics */

.outer.darkBlue {
  stroke: #0a79c1;
}
.outer.orange {
  stroke: #ff9d01;
}
.outer.green {
  stroke: #a6d06c;
}
.outer.red {
  stroke: #e34f26;
}
.outer.darkPink {
  stroke: #a4268a;
}
.outer.pink {
  stroke: #f565ad;
}

.chart svg {
  position: absolute;
  top: 0;
  left: 0;
}

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 2;
  transition: stroke-dashoffset 1.5s;
  -webkit-animation-play-state: running;
  /* firefox bug fix - won't rotate at 90deg angles */
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.fourCircles .chart:hover .outer {
  stroke-dashoffset: 703 !important;
  -webkit-animation-play-state: paused;
}
.sixCircles .chart:hover .outer {
  stroke-dashoffset: 484 !important;
  -webkit-animation-play-state: paused;
}
.infoCircle.chart:hover .outer {
  stroke-dashoffset: 690 !important;
  -webkit-animation-play-state: paused;
}
/* END Circle colors and graphic positions */


/* Set the initial values for the animation */
.chart[data-percent='100'] .outer {
  stroke-dashoffset: 0;
  -webkit-animation: show100 2s;
  animation: show100 2s;
}

/* END set initial animation values */

/* Keyframes for the initial animation */
@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 710;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes show100 {
  from {
    stroke-dashoffset: 710;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}                 
/* END Keyframes for the initial animation */