@import url('//fonts.googleapis.com/css2?family=Pacifico&display=swap');
.tabs{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:space-between;
		align-content:flex-start;
		align-items:flex-start;
		width:100%;
    	margin:0 auto;
		padding:0;
		position:relative;
		}
.tabs input,
.count{
	  	display:none;
		}
.tabs-content{
		display:none;
		width:100%;
		padding:60px 0 0 0;
		}		
.tabs label{
		position:relative;
		display:block;
		color:#FFF;
		font-size:16px;
		font-weight:600;
		line-height:100%;
		text-decoration:none;
		text-transform:uppercase;
		text-align:center;
		padding:10px;
		margin:0 1% 1% 1%;
		width:18%;
		-webkit-transition:all 0.3s ease-out;
		-moz-transition:all 0.3s ease-out;
		-ms-transition:all 0.3s ease-out;
		-o-transition:all 0.3s ease-out;
		transition:all 0.3s ease-out;
		border:1px solid #FFF; 
		/* Градиент и анимация */
		background:linear-gradient(90deg, 
		#F5B601, #E16541, #F18F43, #F5B601, 
		#01BAF5, #476098, #A7489B, #F5B601);
		background-size:800% 100%;
		animation:gradientFlow 12s linear infinite;
		border-radius:15px;
		animation: pulse 2s infinite;
		}

.tabs label:hover{
		color:#FFF;
		cursor:pointer;
		text-decoration:none;
		animation:gradientFlow 6s linear infinite;
		}

.tabs input:checked + label,
.tabs input:checked + label:hover{
		background:#01BAF5;
		color:#FFF;
		cursor:default;
		text-decoration:none;
		animation: pulse 2s infinite;
		}

/* Анимация перелива градиента */
@keyframes gradientFlow{
		0%{
			background-position:0% 50%;
		}
		100%{
			background-position:100% 50%;
		}
}

/* Вендорные префиксы */
@-webkit-keyframes gradientFlow{
		0%{
			background-position:0% 50%;
		}
		100%{
			background-position:100% 50%;
		}
}
@-moz-keyframes gradientFlow{
		0%{
			background-position:0% 50%;
		}
		100%{
			background-position:100% 50%;
		}
}
@-o-keyframes gradientFlow{
		0%{
			background-position:0% 50%;
		}
		100%{
			background-position:100% 50%;
		}
}
	
#tab-all-packages:checked ~ #content-all-packages{
		display:flex;
		}
			

#dynamic-title,
#dynamic-link{
		text-align:left;
		transition all 0.3s ease;
		width:50%;
		display:block;
		}
#dynamic-link{
		position:absolute;
		right:6.8%;
		bottom:9%;
		border-radius:15px;
		font-size:16px;
		font-weight:bold;
		padding:15px 15px 0 15px;
		width:33.55%;
		z-index:500000;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:space-between;
		align-content:flex-start;
		align-items:flex-start;
		background:linear-gradient(90deg, 
		#F5B601, #E16541, #F18F43, #F5B601, 
		#01BAF5, #476098, #A7489B, #F5B601);
		background-size:800% 100%;
		animation:gradientFlow 12s linear infinite;
		border:1px solid #FFF; 
		}
}
#dynamic-link .extra{
		width:27%;
		display:flex;
		flex-direction:column;
		flex-wrap:wrap;
		justify-content:flex-start;
		align-content:flex-start;
		align-items:flex-start;
		}
#dynamic-link b{
		font-family:"Pacifico", cursive;
  		font-weight:400;
  		font-style:normal;
		font-size:30px;
		font-weight:400;
		display:block;
		margin:0 0 0 0;
		width:100%;
		color:#FFF;
		}
#dynamic-link .countdown-timer b{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		align-content:center;
		align-items:center;
		background:#FFF;
		margin:5px 8px 0 0;
		width:35px;
		height:35px;
		font-size:16px;
		color:#FF0000;
		border-radius:100%;
		border:1px solid #FFF;
		background:rgba(255, 255, 255, 0.8);
		background-size: 200% 100%;
		box-shadow: 
			0 0 4px #FFF, 
			0 0 8px #FFF, 
			0 0 12px #FFF;	
		}
#dynamic-link .countdown-timer i{
		font-style:normal;
		display:none;
		}
#dynamic-link .extra p,
#dynamic-link p{
		display:block;
		background-repeat:no-repeat !important;
		background-size:cover !important;
		background-position:top center !important;
		padding:23px 15px;
		color:#FFF;
		font-size:23px;
		font-weight:bold;
		line-height:1;
		width:42%;
		border-radius:12px;
		}
#dynamic-link .extra p{
		display:none;
		}
#dynamic-link a{
		color:#FFF;
		text-decoration:none;
		font-weight:bold;
		padding:20px 12px;
		border:1px solid #01BAF5;
		border-radius:12px;
		display:block;
		background:#01BAF5;
		font-style:italic;
		width:20%;
		text-align:center;
		font-size:20px;
		-webkit-transition:all 0.3s ease-out;
		-moz-transition:all 0.3s ease-out;
		-ms-transition:all 0.3s ease-out;
		-o-transition:all 0.3s ease-out;
		transition:all 0.3s ease-out;
		}
#dynamic-link a:hover{
		background-color:#F5B601;
		color:#FFF;
		}
.countdown-timer{
		font-size:14px;
		color:#FFF;
		font-weight:bold;
		text-align:left;
		width:100%;
		}
#countdown{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:flex-start;
		align-content:flex-start;
		align-items:flex-start;
		font-size:20px;
		width:100%;
		margin:10px 0 0 0;
		}
@keyframes fadeIn{
		from{ opacity:0; transform:translateY(-10px); 
		}
		to{ 
		opacity:1; transform:translateY(0); 
		}
}				
@media (max-width:1919px){
}
@media (max-width:979px){
.tabs label{
		font-size:16px;
		}
}
@media (max-width:768px){
.blocks-content-catalog .blocks-catalog{
		flex-direction:row;
		justify-content:space-between;
		}
.tabs label{
		width:50%;
		padding:4%;
		font-size:12px;
		margin:0 0 0 -0.5%;
		}
.tabs label:nth-child(4){
		margin:0 -0.5% 0 0;
		}
.tabs label:before{
		margin:0;
		}
.tabs .label_ok{
		padding:2%;
		}
.tabs-content{
		padding:15px 0 0 0;
		}

#dynamic-title,
#dynamic-link{
		text-align:center;
		}
#dynamic-title{
		width:90%;
		margin:15px auto 0 auto;
		}
#dynamic-link{
		position:relative;
		width:100%;
		right:inherit;
		top:inherit;
		padding:0 7%;
		flex-direction:row;
		justify-content:space-between;
		align-content:center;
		align-items:center;
		margin:20px auto 0 auto;
		border-radius:0;
		border:0;
		}
#dynamic-link .extra{
		width:25%;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:flex-start;
		align-content:center;
		align-items:center;
		text-align:left;
		padding:20px 0;
		}
#dynamic-link .extra div{
		width:100%;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:flex-start;
		align-content:center;
		align-items:center;
		text-align:left;
		}
#dynamic-link p{
		width:52%;
		margin:0;
		padding:15px 15px;
		font-size:19px;
		text-align:left;
		}
#dynamic-link b{
		width:100%;
		display:block;
		margin:0;
		font-size:20px;
		}
#dynamic-link .countdown-timer{
		display:inline-block !important;
		font-size:14px;
		text-align:left !important;
		width:100% !important;
		}
#dynamic-link .countdown-timer b{
		margin:10px 5px 0 0;
		width:30px;
		height:30px;
		font-size:14px;
		}
#dynamic-link .countdown-timer i{
		display:none;
		}
#dynamic-link #countdown{
		font-size:13px;
		}
#dynamic-link a{
		width:15%;
		padding:16px 5px;
		font-size:14px;
		border-radius:12px;
		margin:0;
		}
#countdown{
		margin:0;
		}
}
@media (max-width:500px){
#dynamic-link .extra{
		width:34%;
		padding:20px 0;
		}
#dynamic-link p{
		width:43%;
		padding:17px 10px;
		font-size:18px;
		}
#dynamic-link a{
		width:18%;
		font-size:13px;
		padding:17px 5px;
		}
}