body {background-color: rgb(173,213,106)/*black/white*/;}

.zagl {
	display: block;
	text-align: center;
	padding: 12px 0 12px 0;
	background-color: rgb(60,60,60);
	color: white; 
}

.sv0, .sv1, .sv2, .sv3, .sv4, .sv5, .sv6, .sv7 {display: block; position: relative; margin: 16px; width: 300px; height: 300px; float: left; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; text-align: center; box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000;}
.sv0 {background-color: rgb(223,135,47);}
.sv0:hover {background-color: rgb(255,111,15);}
.sv1 { background-color: rgb(97,160,63);} .sv1:hover { background-color: rgb(74,208,17);} .sv1:after { content: 'РАСТЕНИЯ';} .sv1:hover:after { /*color: red;*/} 
.sv2{ background-color: rgb(119,60,0);} .sv2:hover{ background-color: rgb(185,94,0);} .sv2:after { content: 'ГРИБЫ';} .sv2:hover:after { color: white;}
.sv3{ background-color: rgb(71,244,254);} .sv3:hover{ background-color: rgb(1,223,235);} .sv3:after { content: 'ОДНОКЛЕТОЧНЫЕ';} .sv3:hover:after { /*color: red;*/}
.sv4{ background-color: rgb(238,15,82);} .sv4:hover{ background-color: rgb(255,32,126);} .sv4:after { content: 'ВИРУСЫ';} .sv4:hover:after { color: white;}
.sv5{ background-color: rgb(211,235,82);} .sv5:hover{ background-color: rgb(230,255,47);} .sv5:after { content: 'ХРОМИСТЫ';} .sv5:hover:after { color: red;}
.sv6{ background-color: rgb(105,32,227);} .sv6:hover{ background-color: rgb(167,102,255);} .sv6:after { content: 'АРХЕИ';} .sv6:hover:after { color: rgb(255,172,172);}
.sv7{ background-color: rgb(180,180,180);} .sv7:hover{ background-color: rgb(220,220,220);} .sv7:after { content: 'БАКТЕРИИ';} .sv7:hover:after { color: red;}

.sv1:after, .sv2:after, .sv3:after, .sv4:after, .sv5:after, .sv6:after, .sv7:after { line-height: 1em; font-size: 2em; color: white;}
.sv3:after  {font-size: 1.7em;}
.sv3:after, .sv5:after, .sv7:after{ color: black; }
/*.sv2:hover:after, .sv3:hover:after, .sv4:hover:after, .sv5:hover:after, .sv6:hover:after, .sv7:hover:after { font-size: 1.8em; content: 'РАЗДЕЛ ГОТОВИТСЯ'; }*/

@media only screen and (max-width: 1200px) {
.sv0, .sv1, .sv2, .sv3, .sv4, .sv5, .sv6, .sv7 {width: 250px; height: 250px;}
.sv1:after, .sv2:after, .sv4:after, .sv5:after, .sv6:after, .sv7:after { font-size: 1.8em; } 
.sv3:after { font-size: 1.4em; } 
.sv1:hover:after, .sv2:hover:after, .sv3:hover:after, .sv5:hover:after, .sv7:hover:after { font-size: 1.6em;}
.sv4:hover:after, .sv6:hover:after { font-size: 1.5em;}
 }
 @media only screen and (max-width: 992px) {
.sv0, .sv1, .sv2, .sv3, .sv4, .sv5, .sv6, .sv7 {width: 200px; height: 200px; margin: 10px;}
.sv1:after, .sv2:after, .sv4:after, .sv5:after, .sv6:after, .sv7:after { font-size: 1.5em; } 
.sv3:after { font-size: 1.1em; } 
.sv1:hover:after, .sv2:hover:after, .sv3:hover:after, .sv5:hover:after, .sv7:hover:after { font-size: 1.3em;}
.sv4:hover:after, .sv6:hover:after { font-size: 1.2em;}
 }
 @media only screen and (max-width: 768px) {
.sv0, .sv1, .sv2, .sv3, .sv4, .sv5, .sv6, .sv7 {width: 170px; height: 170px; margin: 8px;}
.sv1:after, .sv2:after, .sv4:after, .sv5:after, .sv6:after, .sv7:after { font-size: 1.3em; } 
.sv3:after { font-size: 0.9em; } 
.sv1:hover:after, .sv2:hover:after, .sv3:hover:after, .sv5:hover:after, .sv7:hover:after { font-size: 1.1em;}
.sv4:hover:after, .sv6:hover:after { font-size: 1em;}
 } 
 @media only screen and (max-width: 480px) {
.sv0, .sv1, .sv2, .sv3, .sv4, .sv5, .sv6, .sv7 {width: 150px; height: 150px; margin: 7px;}
.sv1:after, .sv2:after, .sv4:after, .sv5:after, .sv6:after, .sv7:after { font-size: 1.1em; } 
.sv3:after { font-size: 0.8em; } 
.sv1:hover:after, .sv2:hover:after, .sv3:hover:after, .sv5:hover:after, .sv7:hover:after { font-size: 0.9em;}
.sv4:hover:after, .sv6:hover:after { font-size: 0.8em;}
 }  
 @media only screen and (max-width: 320px) {
.sv0, .sv1, .sv2, .sv3, .sv4, .sv5, .sv6, .sv7 {width: 130px; height: 130px; margin: 5px;}
.sv1:after, .sv2:after, .sv4:after, .sv5:after, .sv6:after, .sv7:after { font-size: 0.9em; } 
.sv3:after { font-size: 0.7em; } 
.sv1:hover:after, .sv2:hover:after, .sv3:hover:after, .sv5:hover:after, .sv7:hover:after { font-size: 0.7em;}
.sv4:hover:after, .sv6:hover:after { font-size: 0.6em;}
 } 

.cir0, .cir1, .cir2, .cir3, .cir4, .cir5, .cir6, .cir7 {}
.cir0 {margin-top: 45px; font-size: 2em;}
.cir1 {margin-top: 45px; font-size: 2em;}
.cir2 {margin-top: 60px; font-size: 2em;}
.cir3 {margin-top: 55px; font-size: 2em;}
.cir4 {margin-top: 50px; font-size: 1.6em;}
.cir5 {margin-top: 45px; font-size: 2em;}
.cir6 {margin-top: 45px; font-size: 2em;}
.cir7 {margin-top: 60px; font-size: 2em;}

@media only screen and (max-width: 1200px) {
.cir0 {margin-top: 20px; font-size: 1.7em;}
.cir1 {margin-top: 30px; font-size: 1.7em;}
.cir2 {margin-top: 35px; font-size: 1.7em;}
.cir3 {margin-top: 20px; font-size: 1.7em;}
.cir4 {margin-top: 25px; font-size: 1.3em;}
.cir5 {margin-top: 20px; font-size: 1.7em;}
.cir6 {margin-top: 20px; font-size: 1.7em;}
.cir7 {margin-top: 25px; font-size: 1.7em;}
 }
@media only screen and (max-width: 992px) {  
.cir0 {margin-top: 20px; font-size: 1.4em;}
.cir1 {margin-top: 25px; font-size: 1.4em;}
.cir2 {margin-top: 30px; font-size: 1.4em;}
.cir3 {margin-top: 15px; font-size: 1.4em;}
.cir4 {margin-top: 20px; font-size: 1em;}
.cir5 {margin-top: 15px; font-size: 1.4em;}
.cir6 {margin-top: 15px; font-size: 1.4em;}
.cir7 {margin-top: 20px; font-size: 1.4em;}
 } 
@media only screen and (max-width: 768px) {
.cir0 {margin-top: 20px; font-size: 1.2em;}
.cir1 {margin-top: 20px; font-size: 1.3em;}
.cir2 {margin-top: 25px; font-size: 1.3em;}
.cir3 {margin-top: 15px; font-size: 1.3em;}
.cir4 {margin-top: 20px; font-size: 0.9em;}
.cir5 {margin-top: 15px; font-size: 1.3em;}
.cir6 {margin-top: 15px; font-size: 1.3em;}
.cir7 {margin-top: 25px; font-size: 1.1em;}
 } 
 @media only screen and (max-width: 480px) {
.cir0 {margin-top: 20px; font-size: 1.2em;}
.cir1 {margin-top: 25px; font-size: 1.2em;}
.cir2 {margin-top: 25px; font-size: 1.2em;}
.cir3 {margin-top: 15px; font-size: 1.2em;}
.cir4 {margin-top: 20px; font-size: 0.8em;}
.cir5 {margin-top: 15px; font-size: 1.2em;}
.cir6 {margin-top: 15px; font-size: 1.2em;}
.cir7 {margin-top: 25px; font-size: 1.1em;}
 } 
 @media only screen and (max-width: 320px) {
.cir0 {margin-top: 10px; font-size: 1em;}
.cir1 {margin-top: 15px; font-size: 1em;}
.cir2 {margin-top: 20px; font-size: 1em;}
.cir3 {margin-top: 15px; font-size: 1em;}
.cir4 {margin-top: 15px; font-size: 0.7em;}
.cir5 {margin-top: 10px; font-size: 1em;}
.cir6 {margin-top: 15px; font-size: 1em;}
.cir7 {margin-top: 15px; font-size: 1em;}
 } 

.cir0 img, .cir1 img, .cir2 img, .cir3 img, .cir4 img, .cir5 img, .cir6 img, .cir7 img {width: 140px;}
 @media only screen and (max-width: 992px) {
.cir0 img, .cir1 img, .cir2 img, .cir3 img, .cir4 img, .cir5 img, .cir6 img, .cir7 img {width: 110px;}
 }
  @media only screen and (max-width: 768px) {
.cir0 img, .cir1 img, .cir2 img, .cir3 img, .cir4 img, .cir5 img, .cir6 img, .cir7 img {width: 90px;}
 }
  @media only screen and (max-width: 480px) {
.cir0 img, .cir1 img, .cir2 img, .cir3 img, .cir4 img, .cir5 img, .cir6 img, .cir7 img {width: 70px;}
 } 

.cir0 p, .cir1 p, .cir2 p, .cir3 p, .cir4 p, .cir5 p, .cir6 p, .cir7 p {position: relative; top: -30px; font-weight: bold;}
.cir0 p {color: white; top: -35px;}
.cir1 p {color: white;}
.cir2 p {color: white;}
.cir3 p {color: black;}
.cir4 p {color: black;}
.cir5 p {color: white;}
.cir6 p {color: white;}
.cir7 p {color: black;}
@media only screen and (max-width: 1200px) {
.cir0 p, .cir1 p, .cir2 p, .cir3 p, .cir4 p, .cir5 p, .cir6 p, .cir7 p {position: relative; top: -20px;}
.cir0 p {top: -35px;}
 }
 @media only screen and (max-width: 992px) {
.cir0 p, .cir1 p, .cir2 p, .cir3 p, .cir4 p, .cir5 p, .cir6 p, .cir7 p {position: relative; top: -15px;}
.cir0 p {top: -25px;} 
 }
  @media only screen and (max-width: 768px) {
.cir0 p {position: relative; top: -25px;}
 } 
  @media only screen and (max-width: 480px) {
.cir0 p {position: relative; top: -25px;}
 }