<!--

.autor A:link { color: LIGHTSTEELBLUE;}
.autor A:visited { color: LIGHTSTEELBLUE;}
.autor A:active { color: LIGHTSTEELBLUE;}
.autor A:hover { color: LIGHTSTEELBLUE;}
.autor A {text-decoration: none; font-size:24px; font-weight:normal; font-family: arial, "Sans Serif"; text-align: left}

p A:link {transition: background .3s;}
p A:visited { color: white; }
p A:active { color: white;}
p A:hover { color: black; background: url("../e-Tablo.png") fixed;}
p A {background: url("../tlo_09a.jpg") fixed; color: white; text-decoration: none; font-size:22px; font-weight:normal; font-family: arial; text-align: left;}

td A:visited { color: white; }
td A:active { color: white; }
td A {color: white; text-decoration: none; font-size:22px; font-weight:normal; font-family:  Arial; text-align: left;}
td A:link { color: white; transition: background .3s;}
td A:hover { color: black; box-shadow: 0 0 0 black, 0 0 25px LIGHTSTEELBLUE, 0 0 5px black;}

td {font-size:24px;}

ol { margin-left: 6%; font-size: 21px; color:LIGHTSTEELBLUE}
.ol {margin-top: -450px; margin-left: 40%; font-size: 21px; color:LIGHTSTEELBLUE}
.copy { font-size: 14px;font-style: normal; font-weight: normal; margin-left: 0%; color: navy; background-color:LIGHTSTEELBLUE;}

img {margin-top: 6%; margin-left: 7%; box-shadow: 1px 1px 2px black, 0 0 25px LIGHTSTEELBLUE, 0 0 5px LIGHTSTEELBLUE;}
.img {margin-top: 20%; margin-left: 7%; box-shadow: none}

h1 { margin-left: 9%; color:gold}

h2 {margin-top: 20px; margin-left: 5%; font-family:  time new roman; font-size: 29px; color: #00D7B8;
text-shadow: 1px 1px 2px black, 0 0 0 #00D7B8, 0 0 0 #00D7B8;}

h3 {margin-top: -15px; margin-left: 4%; color:LIGHTSTEELBLUE; font-weight:normal}

ol A:link { color: white;  transition: background .3s; font-family: verdana, arial, "Sans Serif";}
ol A:visited { color: white; font-family: verdana, arial, "Sans Serif";}
ol A:active { color: white; font-family: verdana, arial, "Sans Serif";}
ol A:hover { color: black; background-color:LIGHTSTEELBLUE; border-radius: 1px;font-family: verdana, arial, "Sans Serif"; box-shadow: 0 0 0 black, 0 0 10px LIGHTSTEELBLUE, 0 0 10px black;}
ol A {text-decoration: none; font-size:20px; font-weight:normal; font-family: verdana, arial, "Sans Serif"; text-align: left; }



body {background: url("../tlo_09a.jpg") fixed; background-color: #0C1524; color:LIGHTSTEELBLUE; font-family: verdana, arial, "Sans Serif"; font-size: 14px; margin-left: 5px; transition: background .3s;}


#aktualne {position: fixed;
	bottom: 2%;
	left: 5%;
	WIDTH:55%;}

#linia1 {position: fixed;
	bottom: 15px;
	left:10px;
	WIDTH:63%;
box-shadow: 1px 1px 2px black, -10px 10px 10px LIGHTSTEELBLUE, 0 0 0 #00D7B8;}

#linia2 {position: sticky;
	bottom: -4px;
	left:65%;
	WIDTH:350px;
box-shadow: 1px 1px 2px black, -10px 10px 10px LIGHTSTEELBLUE, 0 0 5px LIGHTSTEELBLUE;}


#img {position: fixed;
	top: 65px;
	left: 20px;
	WIDTH:60%;
}

#img_01 {position: fixed;
	top: 12%;
	left: 6%;
	WIDTH:180px;
}

#next_01 {position: absolute;
	top: 675px;
	left: 490px;
	WIDTH:10%;}

#back_01 {position: absolute;
	top: 675px;
	left: 360px;
	WIDTH:10%;}

#next_02 {position: absolute;
	bottom: 10%;
	left: 425px;
	WIDTH:10%;}

#back_02 {position: fixed;
	bottom: 26%;
	left: 40px;
	WIDTH:200px;}


#mail {position: absolute;
	bottom: 4%;
	left: 5%;
	WIDTH:55%;
	font-size: 12px;}




#autor {font-family: wingdings;
	font-size: 60px;
	position: fixed;
	bottom: 0px;
	right:1%; 
	vertical-align: middle}

#CSS {position: fixed;
	top: 7px;
	right: 18px;
}

#CSS:hover {
  object-position: 50% 50%;
  object-fit: cover;
}

#CSS:not(:hover) {
  object-position: 50% 50% !important;
  transition: all .3s;
  transform: rotateX(360deg);
}

#header_01 {position: fixed;
	font-size: 14px;
	bottom: 0%;
	right:80px;
	width: 250px}

#tableau {position: fixed;
	top: 8px;
	left: 5px;
	WIDTH:600px}


#img_01:hover {
  object-position: 50% 50%;
  transition: all 0.05s;
  /*transform: rotateY(-360deg);*/
 background: transparent;
}


#img_01:not(:hover) {
  object-position: 50% 50% !important;
  transition: all 0.05s;
  /*transform: rotateY(0deg);*/
 background: transparent;
}
		

#img:hover {
  object-position: 50% 50%;	/* "wjazd" z lewej -300% 50% | "wjazd" z dołu 50% 300%*/
  transition: 1.5s;
  /* transform: rotateZ(-.1deg); */
 opacity: 1;
 background: transparent;
}

#img:not(:hover) {
  object-position: 50% 50% !important;
  transition: all 1.5s;
  transform: rotateZ(0deg);
 opacity: 0.5;
transition: 0.6s;
 background: transparent;
}

.img_02:hover {
  object-position: 50% 50%;
  object-fit: cover;
  transition: all .25s;
transform: rotateY(180deg);
box-shadow: none;
}

.img_02:not(:hover) {
  object-position: 50% 50% !important;
  transition: all .25s;
  transform: rotateY(360deg);
box-shadow: none;
}

.button3 {
  display: inline-block;
  background-color: transparent;
  border: none;
  color: LIGHTSTEELBLUE;		/*  */
  text-align: center;

	font-family: wingdings;
	font-size: 60px;
	position: fixed;
	bottom: 1px;
	right:5px; 
	vertical-align: middle;

  cursor: pointer;
text-shadow: 1px 1px 2px black, 0 0 25px #00D7B8, 0 0 5px black;
}

.button3 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: .5s;
  width: 65px;
  height: 65px;


}

.button3 span:after {
  content: '>';
  position: relative;
  opacity: 1;
  top: 0px;
  right: 0px;
  transition: .5s;
  width: 65px;
  height: 65px;


}

.button3:hover span {
  padding-right: 0px;
  background-color: transparent;
  transform: rotateZ(-360deg);
  transition: .5s;
  width: 65px;
  height: 65px;
text-shadow: none;
}

.button3:hover span:after {
  opacity: 1;
  right: 0px;
  background-color: transparent;
  width: 65px;
  height: 65px;
}


/* Podpowiedź 1 */

.tooltip {
  position: relative;
  display: inline-block;
  font-size: 22px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 310px;
  background-color: #FFF3DB;		/*	#FFF3DB;  */
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: fixed;
  z-index: 1;
  bottom: 45%;
  left: 21.5%;


/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: 15s;
}


.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border-width: 15px;
  border-style: solid;
  border-color: #FFF3DB transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: .9;
transition: .4s;
box-shadow: 1px 1px 2px black, 0 0 25px LIGHTSTEELBLUE, 0 0 10px black;
}

/* Podpowiedź 1a */

.tooltip1 {
  position: relative;
  display: inline-block;
  font-size: 22px;
}

.tooltip1 .tooltiptext1 {
  visibility: hidden;
  width: 310px;
  background-color: #FFF3DB;		/*	#FFF3DB;  */
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: fixed;
  z-index: 1;
  bottom: 45%;
  left: 21.5%;


/* Fade in tooltip1 - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: 15s;
}


.tooltip1 .tooltiptext1::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -0px;
  border-width: 0px;
  border-style: solid;
  border-color: #FFF3DB transparent transparent transparent;
}

.tooltip1:hover .tooltiptext1 {
  visibility: visible;
  opacity: .9;
transition: .4s;
box-shadow: 1px 1px 2px black, 0 0 25px LIGHTSTEELBLUE, 0 0 10px black;
}


.flexible {
  padding: 1px;
}

/* Telefony - 600px i mniejsze */
@media only screen and (max-width: 600px) {
  .flexible {background: transparent;}

.img_02:hover {
  transform: rotateX(180deg);
  box-shadow: none;}

.img_02:not(:hover) {
  transform: rotateX(360deg);
  box-shadow: none;}

  #aktualne {display: none;}
  /*#img_01 {display: none;}*/
  #img {width: 90%; top: 120px; z-index: -1;}
  h2 {font-size: 20px; text-align: center;}
  #back_02 {position: fixed; top: 32%; left: 0px; WIDTH: 100px;}
  .tooltip {display: none;}
  .tooltip1 .tooltiptext1::after {
    content: "";
    left: 15%;
    margin-left: -0px;
    border-width: 0px;}
  #linia2 {position: relative;
	bottom: -4px;
	left: 18%;
	WIDTH:265px; box-shadow: 1px 1px 2px black, -10px 10px 10px   LIGHTSTEELBLUE, 0 0 5px LIGHTSTEELBLUE;}
}


/* Tablety pionowe i duże telefony - 600 px i więcej */
@media only screen and (min-width: 600px) {

  .img_0x:hover {left: 17%}	/*{left: 21%}*/
  #back_02 {left: 20%;}

  #aktualne {display: none;}
  #img {width: 51%; top: 100px;}
  h2 {text-align: center; font-size: 20px;}
  .tooltip1 {display: none;}
  .tooltip .tooltiptext::after {
    content: "";
    left: 15%;
    margin-left: -0px;
    border-width: 0px;}
  #linia2 {right:5px; WIDTH:250px; box-shadow: 1px 1px 2px black, -10px 10px 10px LIGHTSTEELBLUE, 0 0 5px LIGHTSTEELBLUE;}
}

/* Tablety poziome - 768 px i większe */
@media only screen and (min-width: 768px) {

  .img_0x:hover {left: 35%}	/*{left: 39%}*/

  #back_02 {left: 22%;}
  #aktualne {display: none;}
  h2 {text-align: center; left: 59.5%; font-size:24px;}

} 

/* Laptopy/komputery stacjonarne - 992px i więcej */
@media only screen and (min-width: 992px) {

  .img_0x:hover {left: 51%}	/*{left: 54%}*/

  #img {width: 60%; top: 65px;}
  #linia2 {left:65%; WIDTH:350px;}

  .img_02:hover {object-position: 50% 50%;
    object-fit: cover;
    transition: all .25s;
    transform: rotateX(180deg); box-shadow: none;}

  .img_02:not(:hover) {object-position: 50% 550% !important;
    transition: all .25s;
    transform: rotateX(360deg); box-shadow: none;}

  .tooltip {display: none;}
  .tooltip1 {display: contents;}
  #back_02 {position: fixed;
	bottom: 48%;
	left: 40px;
	WIDTH:200px;}

  h2 {text-align: left; font-size:26px;}
} 


/* Laptopy/komputery stacjonarne - 1200px i więcej */
@media only screen and (min-width: 1200px) {


  .img_02:hover {object-position: 50% 50%;
    object-fit: cover;
    transition: all .25s;
    transform: rotateX(180deg); box-shadow: none;}

  .img_02:not(:hover) {object-position: 50% 550% !important;
    transition: all .25s;
    transform: rotateX(360deg); box-shadow: none;}

  .tooltip {display: none;}
  .tooltip1 {display: contents;}
  #back_02 {position: fixed;
	bottom: 36%;
	left: 40px;
	WIDTH:200px;}

  h2 {text-align: left; font-size:26px;}
} 


/* Duże laptopy i komputery stacjonarne - 1620 px i więcej */
@media only screen and (max-width: 1620px) {
  .item1 {display: none;}
}

/* Duże laptopy i komputery stacjonarne - 1620 px i więcej */
@media only screen and (min-width: 1620px) {

  .img_0x:hover {left: 63%}
  h2 {left: 68.3%; font-size:29px;}

.img_02:hover {
  object-position: 50% 50%;
  object-fit: cover;
  transition: all .25s;
  transform: rotateX(180deg);
  box-shadow: none;}

.img_02:not(:hover) {
  object-position: 50% 550% !important;
  transition: all .25s;
  transform: rotateX(360deg);
  box-shadow: none;}

  .tooltip {display: none;}
  .tooltip1 {display: contents;}

  #back_02 {position: fixed;
	bottom: 28%;
	left: 40px;
	WIDTH:200px;}
}


-->