/* Базовые стили */
.tabs{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		align-content:flex-start;
		align-items:flex-start;
		width:100%;
		margin:0 auto;
		padding:0;
		}	
.tabs input,
.count{
		display:none;
		}	
.tabs-content{
		display:none;
		width:100%;
		padding:30px 0 0 0;
		}		
.tabs label{
		position:relative;
		display:block;
		background:#F5B601;
		color:#FFF;
		font-size:14px;
		font-weight:600;
		line-height:100%;
		text-decoration:none;
		text-transform:uppercase;
		text-align:center;
		padding:8px 15px;
		margin:0 2% 2% 2%;
		transition:all 1s ease-out;
		width:46%;
		box-sizing:border-box;
		}		
.tabs label:hover{
		background:#CDBA91;
		color:#FFF;
		cursor:pointer;
		text-decoration:none;
		}		
.tabs input:checked + label,
.tabs input:checked + label:hover{
		background:#CDBA91;
		color:#FFF;
		cursor:default;
		text-decoration:none;
		}		
#tab-all-packages:checked ~ #content-all-packages{
		display:flex;
		}
		
/* Маленькие устройства (вертикальные телефоны, 576px и выше) */
@media (min-width:576px){
.tabs label{
		width:auto;
		padding:10px 20px;
		margin:0 1% 1% 1%;
		font-size:15px;
		}	
.tabs-content{
		padding:40px 0 0 0;
		}
}
		
/* Средние устройства (горизонтальные телефоны/маленькие планшеты, 768px и выше) */
@media (min-width:768px){
.tabs{
		justify-content:space-between;
		}	
.tabs label{
		font-size:16px;
		padding:10px 25px;
		margin:0 0.5% 1% 0.5%;
		}	
.tabs-content{
		padding:50px 0 0 0;
		}
}	
/* Большие устройства (планшеты/небольшие ноутбуки, 992px и выше) */
@media (min-width:992px){
.tabs label{
		font-size:17px;
		padding:10px 30px;
		}	
.tabs-content{
		padding:60px 0 0 0;
		}
}	
/* Очень большие устройства (ноутбуки и десктопы, 1200px и выше) */
@media (min-width:1200px){
.tabs{
		justify-content:space-between;
		}
.tabs-content{
		padding:60px 0 0 0;
		}		
.tabs label{
		font-size:17px;
		padding:10px 25px;
		margin:0 1% 1% 1%;
		}
}