body {
            margin: 0;
            overflow: hidden;
            background-color: black;
         
            justify-content: center;
            align-items: flex-end;
            height: 100vh;
        }

.przykrywka  {position: absolute;
            top: 4%;
            right:23%;
            z-index: 1000;
}


#rotate {  position: absolute;
            top: 36%;
            left:4%;
}

#rotate2 {  position: absolute;
            top: 5%;
            right:20%;
}

#reverseRotate2 {  position: absolute;
            top: 5%;
          right:10%;
}



#reverseRotate {  position: absolute;
            top: 36%;
         left:8%;
}

.tytul  {
        position: absolute;
            top: 2%;
          left:30%;
            font-size: 24px;
            color: #00ffff;
        }


  .mojtext {
             position: absolute;
            top: 38%;
           left:3%;
            font-size: 20px;
            color: #ffff00;
        }

#rotationSlider {
            position: absolute;
            top: 50%;
           left: 2%;
            width: 10%;
            }
            
     .img2 {
              position: absolute;
            top: 52%;
            left: 2%;
           }
           
    .info {
	position: absolute;
	top: 20px;
	font-family: Verdana;
	text-align: center;
	z-index: 100;
	display:block;
	color: #fff;
	font-size: 20px;
}

.info2 {
	position: absolute;
	bottom: 6%;
	margin-left: 40%;
	width: 20%;
	
	z-index: 100;
	display:block;
	color: #fff;
	font-size: 20px;
}
.info3 {
	position: absolute;
	top: 100px;
	margin-left: 10px;
	z-index: 100;
	display:block;
	color: #fff;
	font-family: Verdana;
	font-size: 12px;
	color: #ffff00;
	border: 1px solid #aaaaaa;
    border-radius: 8px;
	opacity: 0.55;
	padding: 10px 10px 10px 10px;
	}
	.info4 {
	position: absolute;
	top: 5%;
	right:10%;
	font-family: Verdana;
	text-align: center;
	z-index: 100;
	display:block;
	color: #00ffff;
	font-size: 20px;
}

.info4 {
	position: absolute;
	top: 33%;
	left:2%;
	font-family: Verdana;
	z-index: 100;
	color: #00ffff;
	font-size: 12px;
        text-align: left;
}

.info6 {
	position: absolute;
	top: 48%;
	left:2%;
	font-family: Verdana;
	z-index: 100;
	color: #00ffff;
	font-size: 12px;
        text-align: left;
}


.info7 {
	position: absolute;
	top: 72%;
	left:2%;
	font-family: Verdana;
	z-index: 100;
	color: #00ffff;
	font-size: 12px;
        text-align: left;
}

.info8 {
	position: absolute;
	top: 10%;
	left:25%;
	font-family: Verdana;
	z-index: 100;
	color: #00ffff;
	font-size: 12px;
        text-align: left;
}


.info5 {
	position: absolute;
	top: 60%;
	left:2%;
	font-family: Verdana;
	text-align: left;
	z-index: 100;
	color: #00ffff;
	font-size: 12px;
}


	.uwaga {
    color: #00ffff;
	font-weight: 550;
	
	font-size:20;
}


input[type="radio"] {
    display: inline-block;
    width:28px;
    height: 28px;
    margin: -2px 10px 0 0;
    cursor: pointer;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 4px solid #ffffff;
}
input[type="radio"]  {
    background-color: #fff;
}
input[type="radio"]:checked  {
    color: #333;
    font-weight: 700;
}
input[type="radio"]:checked  {
    background-color: #ff8800;
    border: 2px solid #ffffff;
    box-shadow: 2px 2px 2px rgba(0,0,0,.1);
}
 input[type="radio"]:checked  {
    -webkit-transition: background-color 0.24s linear;
    -o-transition: background-color 0.24s linear;
    -moz-transition: background-color 0.24s linear;
    transition: background-color 0.24s linear;
}

 .opcHButton {
position: absolute;
	left: 28%;
	top: 12%;
	width: 50px;
	height: 50px;
	 background-image:url("../images/h.png");
}
.opcHButton:hover {
  background-image:url("../images/h1.png");
}



  .roz1 {
        position: absolute;
	left: 4%;
	top: 36%;
	width: 150px;
	height: 80px;
	 background-image:url("../images/roz1.png");
}
.roz1:hover {
 background-image:url("../images/roz1-h.png");
}
 
 .roz2 {
        position: absolute;
	left: 4%;
	top: 36%;
	width: 150px;
	height: 80px;
	 background-image:url("../images/roz2.png");
}
.roz2:hover {
 background-image:url("../images/roz2-h.png");
}


.zloz2 {
        position: absolute;
	left: 4%;
	top: 36%;
	width: 150px;
	height: 80px;
	 background-image:url("../images/zloz2.png");
}
.zloz2:hover {
 background-image:url("../images/zloz2-h.png");
}


.zloz1 {
        position: absolute;
	left: 4%;
	top: 36%;
	width: 150px;
	height: 80px;
	 background-image:url("../images/zloz1.png");
}
.zloz1:hover {
 background-image:url("../images/zloz1-h.png");
}


    .link3d {
        position: absolute;
	left: 5%;
	top: 62%;
	width: 60px;
	height: 60px;
	 background-image:url("../images/link3d.png");
}
.link3d:hover {
 background-image:url("../images/link3d1.png");
}

.dodruku {
        position: absolute;
	left: 4%;
	top: 73%;
	width: 73px;
	height: 60px;
 background-image:url("../images/pdf1.png");
}
.dodruku:hover {
 background-image:url("../images/pdf2.png");
}