body {
	background: #FDF2E9;
		
}
/*  початкове вікно   */
#headstart{
	width:100%;
	height: 50px;
	background: #E8F8F5;  
	margin:5px;
	font-size:24pt;
	color:#0d686b;
	font-weight: bold;	
	min-width:1024px;
	text-align:center;	  
}
#footerend {
	width:100%;
	height: 40px;
	background: #E8F8F5;
	margin: 10px 5px;
	min-width:1024px;
}
#bodywn{
	margin: 0 auto;
	width:1024px;
	height: 600px;	
	display:block;
	position:relative;	
}

#s1, #s2, #s3, #s4 {
	position: absolute;
	width: 120px;  
	height: 120px; 	
}
#s1 { 
	left: 290px;
	top: 140px;	
}
#s1:hover, #s2:hover, #s3:hover, #s4:hover {
	cursor:pointer;	
     -webkit-animation-name: spin;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 2000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 2000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear; 
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;	
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}  
#s2 {
	left: 340px;
	top: 260px;
}
#s3 { 
	left: 580px;
	top: 130px;
}
#s4 { 
	left: 550px;
	top: 260px;
}
#r1, #r2, #a1, #a2 {
	position: absolute;
	width: 100px;  
	height: 100px; 	
	border: 0px solid #046374;
}
#r1:hover, #r2:hover, #a1:hover, #a2:hover {
	cursor:pointer;	
	border: 3px solid #046374;	
}
#r1 {
	left: 190px;
	top: 20px;
}
#r2 {
	left: 70px;
	top: 100px;
}
[data-tooltip] {
    position: relative; 
   }
[data-tooltip]::after {
	font-size:14pt;
    content: attr(data-tooltip); 
    position: absolute; 
    width: 130px; 
    left: 50; top: 0; 
    background: #3989c9; 
    color: #fff; 
    padding: 0.5em; 
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 
    pointer-events: none; 
    opacity: 0; 
    transition: 1s; 
   } 
[data-tooltip]:hover::after {
    opacity: 1; 
    top: 2em; 
	z-index:100;
   }
#a1 { 
	left: 740px;
	top: 20px;
}
#a2 { 
	left: 860px;
	top: 100px;
}
#readmy {
	position: absolute;
	background: url("img/fonhelp.png") no-repeat;
	display: none; 
	width: 1024px;
	height: 600px;
	left: 0px;
	top: 0px;
	margin: auto;	
}
#imglogo {
	position: absolute;
	left: 60px;
	top: 60px;
}
#imgavtor {
	position: absolute;
	left: 100px;
	top: 210px;
}
#year {
	position: absolute;
	left: 190px;
	top: 220px;	
	font-size:24pt;
	color:#0d686b;
	font-weight: bold;		
}
#book {
	position: absolute;
	width: 240px;
	left: 85px;
	top: 350px;	
	font-size:24pt;
	color:#0d686b;
	font-weight: bold;
	text-shadow: 2px 2px 5px red;	
}
#book:hover {
	cursor:pointer;	
}
#specification {
	position: absolute;
	left: 70px;
	top: 320px;		
}
#opys {
	position: absolute;
	width: 550px;
	left: 420px;
	top: 40px;	
	font-size:20pt;
	color:#0d686b;
	font-weight: bold;		
}
#opysp {
	position: absolute;
	width: 380px;
	left: 420px;
	top: 490px;	
	font-size:16pt;
	color:#0d686b;
	font-weight: bold;		
}
.kl {
	font-size:24pt;
	color:#0d086b;
	font-weight: bold;		
}
.kl2 {
	width: 400px;	
	font-size:14pt;
	color:#0d0800;
	font-weight: bold;		
}
#vyhid {
	position: absolute;
	left: 830px;
	top: 450px;
}
#vyhid:hover {
	cursor:pointer;	
}
#prav {
	position: absolute;
	display:none;
	width: 530px;
	height: 520px;
	left: 400px;
	top: 30px;	
	font-size:16pt;
	color:#0d686b;
	background:#fff;
	
}
#vyhidh {
	position: absolute;
	left: 430px;
	top: 420px;
}
#vyhidh:hover {
	cursor:pointer;	
}
.prav2 {
	font-size:14pt;	
}
#errmod {
	position: absolute;
	display:none;
	width: 580px;
	height: 350px;
	left: 210px;
	top: 150px;	
	background:url("img/modal.png") no-repeat;	
}
#pom {
	position: absolute;
	width:120px;
	font-size:20pt;
	color:#2d686b;	
	left: 90px;
	top: 90px;		
}
#oppom {
	position: absolute;	
	width:300px;
	font-size:20pt;
	color:#0d686b;	
	left: 100px;
	top: 140px;	
}
#zmodal {
	position: absolute;	
	width:55px;
	left: 430px;
	top: 85px;	
}
#zmodal:hover {
	cursor:pointer;	
}