#zones_nav{
	width:1200px;
	margin: 0 auto;
	list-style-type: none;
	padding:0;
	padding-top:14px;
	display:flex;
	flex-direction:row;
	justify-content: space-around;
	overflow: hidden;
}
#zones_nav li{
	border-radius:4px;
	width:297px;
	height:60px;
	position:relative;
	overflow: hidden;
}
.zone_button{
	box-sizing:border-box;
	vertical-align:center;
	font-size:25px;
	padding:8px 0 0 15px;
	display:block;
	width:100%;
	height:100%;
	
}
.zone_button::before{
	content:'';
	position:absolute;
	margin-top:-180px;
	margin-left:-480px;
	border-radius:100%;
	width:420px;
	height:400px;
	background-color:white;
	opacity:0.3;
	transition:margin-left 0.5s ease-in-out;
	
}
.zone_button:hover{
	cursor: pointer;
}
.zone_button:hover::before{
	margin-left:-80px;
}
.zone_button span{
	line-height:36px;
	font-size:35px;
	padding-right:10px;
	
}
#zones{
	position:relative;
	width:1197px;
	margin-left:auto;
	margin-right:auto;
}
.zone{
	height:inherit;
	overflow:hidden;
	position:absolute;
	margin:0 auto;
	width:100%;
	transition: height 0.6s;
	z-index:1;
	
}
#strefa_aktualnosci:checked ~ #zones :nth-child(3),
#strefa_kandydat:checked ~ #zones :nth-child(5),
#strefa_uczen:checked ~ #zones :nth-child(7),
#strefa_rodzic:checked ~ #zones :nth-child(9){
	z-index:3 !important;
	animation-name: height;
	animation-duration: 0.6s;
}
@keyframes height {
    0%   {height: 0%;}
    100% {height: inherit;}
}

@media (min-width: 951px){
#strefa_aktualnosci:checked ~ #zones_nav :nth-child(1),
#strefa_kandydat:checked ~ #zones_nav :nth-child(2),
#strefa_uczen:checked ~ #zones_nav :nth-child(3),
#strefa_rodzic:checked ~ #zones_nav :nth-child(4)
{
	height:65px;
	border-radius:4px 4px 0 0;
}
}
@media (max-width: 1250px) {
	#zones_nav
	{
		width:1130px;
	}
	#zones_nav li
	{
		width:280px;
	}
	#zones{
	width:1128px;
}
	
}
@media (max-width: 1150px){
	#zones{
	width:95.5%;
}
	#zones_nav
	{
		width:96%;
		margin-top:2%;
	}
	#zones_nav li
	{
		width:24.5%;
		text-align:center;
	}
	.zone_button{
		padding:8px 0 0 0;
	vertical-align:center;
	font-size:20px;
	
	}
	.zone_button span{
		margin-left:-25px;
		line-height:36px;
		font-size:30px;
		padding-right:10px;
		
	}
	
}

@media (max-width: 950px){
	#zones{
	margin-top: 10px;
	width:94.7%;
}
	#zones_nav
	{
		flex-wrap:wrap;
	}
	#zones_nav li
	{
		width:49%;
		
		margin-top:1vw;
		text-align:left;
	}
	.zone_button{
		padding:8px 0 0 40px;
	vertical-align:center;
	font-size:25px;
	
	}
	.zone_button span{
		line-height:36px;
		font-size:35px;
		padding-right:10px;
		
	}
}
@media (max-width: 580px){
	
	#zones_nav li
	{
		width:90%;
		margin-top:3px;
	}
}
@media (max-width: 360px){
	#zones_nav{
		width:360px;
		
		}
	#zones_nav li
	{
		width:324px;
		margin-top:3px;
	}
	#zones{
	width: 340px;
	margin-left:10px;
}
}