body{margin:0;font-size: calc(4vw - 0.2rem);}

#start{
background:url(fon1.jpg) no-repeat;
background-size:100% 100%;
width:100%;
height:100%
}

#startbtn{
background:url(btnplay.png) no-repeat;
background-size:100% 100%;
position:relative;
bottom:-75%;
width:30%;
height:23%;
opacity:0.8;
}

#svfon{
    background: url(svitok.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 1%;
    left: 10%;
    width: 83%;
    height: 32%;


}

#startbtn:hover{
opacity:1;
}

#logo{
    background: url(logo.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 1%;
    right: 1%;
    width: 10vh;
    height: 10vh;
}

div#c-right{
    position: absolute;
    bottom: 0.5%;
    right:1%;	
}

div#c-right h1{
font-size:10pt;
color:black;
}

#title1{
background:url(title1.png) no-repeat;
background-size:100% 100%;
position:relative;
top:5%;
width:80%;
height:60%
}

.skipans{
background:url(btnskip.png) no-repeat;
background-size:100% 100%;
position:absolute;
width:16%;
height:10%;
left:42%   ;
bottom:0;
opacity:0.8;
}

.skipans:hover{
opacity:1;
}


#block12{
background:url(fon2.jpg) no-repeat;
background-size:100% 100%;
width:100%;
height:100%;
}


#result{
background:url(fon2.jpg) no-repeat;
background-size:100% 100%;
width:100%;
height:100%;
}




.csign{
/*    height: 330px; 
    width: 300px;    */


}
.csign[sel]{
border: 4px dotted black; /* Параметры границы */
}

#info{
position: absolute;
width: 50%;
height: 13%;
right: 30%;
top: 1%;
background: url(info.png) no-repeat;
background-size: 100% 100%;
}


#exit{
position: absolute;
    width: 12%;
    height: 12%;
    right: 0%;
    top: 0%;
    background: url(btnexit.png) no-repeat;
    background-size: 100% 100%;
opacity:0.8;
}

#exit:hover{
opacity:1;
}

#zit1:hover{
opacity:0.8;
}

#zit2:hover{
opacity:0.8;
}
#zit3:hover{
opacity:0.8;
}



#zit{
height:30%;
vertical-align:middle;
}

#zit1{
height:17%;
background:url(brd1.png) no-repeat;
background-size: 100% 100%;
margin-top:1% ;
vertical-align:middle;
}
#zit2{
height:17%;
background:url(brd1.png) no-repeat;
background-size: 100% 100%;
margin-top:1%;
vertical-align:middle;
}
#zit3{
height:17%;
background:url(brd1.png) no-repeat;
background-size: 100% 100%;
margin-top:1%;
vertical-align:middle;
}



#q1{
height:50%;
width:50%;
background:url(q1.png) no-repeat;
background-size: 100% 100%;
margin-top:0%;
top:25%;
}
#q2{
height:50%;
width:50%;
background:url(q2.png) no-repeat;
background-size: 100% 100%;
margin-top:0%;
top:25%;
}




#zit h1{
font-family:Georgia, serif;
    display: block;
    font-size: 40%;
    margin:0;	
    vertical-align:middle;
   text-align: justify;	
}

#zit1 h1{
font-family:Georgia, serif;
    display: block;
    font-size: 40%;
    margin-left:2ex;	
    margin-right:0.5ex;	
    color:white;
}

#zit2 h1{   
font-family:Georgia, serif;
    display: block;
    font-size: 40%;
    margin-left:2ex;	
    margin-right:0.5ex;	
    color:white;
}

#zit3 h1{
font-family:Georgia, serif;
    display: block;
    font-size: 40%;
    margin-left:2ex;	
    margin-right:0.5ex;	
    color:white;	
}

#blockask{
background:url(fon3.jpg) no-repeat;
background-size:100% 100%;
width:100%;
height:100%;
}



#blockask table{
width:60%;
height:90vh;
position: relative;
left: 1%;
}

#blockask table tbody tr td{
vertical-align:middle;
}
td.pcell:hover{
opacity:1;
}



#nextblock{
    	position:absolute;
     	width:15%;
     	height:12%;	
	bottom:0%;
	left:38%;
background:url(btnshow.png) no-repeat;
background-size:100%  100%;
opacity:0.8;
}

#nextblock:hover{
opacity:1;
}


#anew{
    position: absolute;
    width: 12%;
    height: 12%;
    top: 0%;
    left: 0%;
    background: url(btnanew.png) no-repeat;
    background-size: 100% 100%;
	opacity:0.8;
}
#anew:hover{
opacity:1;
}

#anew2{
position: absolute;
    width: 15%;
    height: 15%;
    bottom: 0.5%;
    left: 38%;
    background: url(btnanew.png) no-repeat;
    background-size: 100% 100%;
opacity:0.8;
}

#anew2:hover{
opacity:1;
}

#board0{
    	position:absolute;
     	width:50%;
     	height:30%;	
	top:0%;
	left:20%;
background:url(board0.png) no-repeat;
background-size:100%  100%;
}

#board{
    	position:absolute;
     	width:50%;
     	height:30%;	
	top:30%;
	left:20%;
background:url(brd1.png) no-repeat;
background-size:100%  100%;
}
#res{
    	position:relative;
width: 17%;
height: 46%;
top: 26%;
left: -30%;

background:url(btn10.png) no-repeat;
background-size:100%  100%;


}

#svitok{
    	position:absolute;
     	width:50%;
     	height:30%;	
	bottom:13%;
	left:20.5%;
background:url(svitok.png) no-repeat;
background-size:100%  100%;
}

#svitok h1 {
font-family:Comic Sans MS, cursive;
    display: block;
    font-size: 37%;
    margin-top: 7vh;
   margin-bottom:0.7em;
    font-weight: bold;
}
#svitok p {
font-family:Comic Sans MS, cursive;
    display: block;
    font-size: 37%;
    margin:0.5em;	
    	
}
#svitok p span {
    font-weight: bold;
color:red;
	
}


#block12 table{
width:50%;
height:90vh;
}

.pcell11{
background:url(btn1.png) no-repeat;


}
.pcell12{
background:url(btn2.png) no-repeat;


}
.pcell13{
background:url(btn3.png) no-repeat;

}

.pcell14{
background:url(btn15.png) no-repeat;

}

.pcell21{
background:url(btn5.png) no-repeat;

}

.pcell22{
background:url(btn6.png) no-repeat;

}

.pcell23{
background:url(btn7.png) no-repeat;

}

.pcell24{
background:url(btn8.png) no-repeat;

}

.pcell31{
background:url(btn9.png) no-repeat;

}

.pcell32{
background:url(btn10.png) no-repeat;

}

.pcell33{
background:url(btn11.png) no-repeat;

}

.pcell34{
background:url(btn12.png) no-repeat;

}

.pcell41{
background:url(btn13.png) no-repeat;

}

.pcell42{
background:url(btn14.png) no-repeat;

}

.pcell43{
background:url(btn15.png) no-repeat;

}

.pcell44{
background:url(btn16.png) no-repeat;

}

.pcell51{
background:url(btn17.png) no-repeat;

}

.pcell52{
background:url(btn18.png) no-repeat;

}

.pcell53{
background:url(btn20.png) no-repeat;

}

.pcell54{
background:url(btn14.png) no-repeat;

}

.pcell1{
background:url(btn0.png) no-repeat;
background-size:90%  80%;
}

td.pcell {background-size:90%  80%;opacity:0.8;}