@charset "utf-8";
/* CSS Document */

@keyframes background-change {
  0% {
    background: linear-gradient(175deg, transparent 60%, var(--primary-blue) 70%, var(--primary-blue) 100%);
  }
  25% {
    background: linear-gradient(175deg, transparent 59%, var(--primary-blue) 70%, var(--primary-blue) 100%);
  }
  50% {
    background: linear-gradient(175deg, transparent 58%, var(--primary-blue) 70%, var(--primary-blue) 100%);
  }
  75% {
    background: linear-gradient(175deg, transparent 57%, var(--primary-blue) 70%, var(--primary-blue) 100%);
  }
  100% {
    background: linear-gradient(175deg, transparent 56%, var(--primary-blue) 70%, var(--primary-blue) 100%);
  }
}

.content-item {
	position: relative;
}
	.content-item .card {
		border-radius: 30px!important;
	}
		.content-item .card .date {
			font-size: 12px;
			display: inline-block;
			border: #FFFFFF solid 1px;
			color: #FFFFFF;
			border-radius: 30px!important;
			padding: 5px 10px 5px 10px;
			margin-bottom: 15px;
		}

		.content-item .card .card-background {
			display: block;
			position: absolute;
			width: 94%;
			height: 140px;
			margin-top: 5px;
			margin-left: 5px;
			filter: blur(5px);
			background-size: contain;
			border-radius: 30px!important;
			
		}
		.content-item .card .card-body {
			background-color: var(--primary-blue-70);
			position: relative;
			text-align: right;
			border-radius: 30px 0 0 30px!important;
			-webkit-transition: .3s ease-in-out;
			-moz-transition: .3s ease-in-out;
			-o-transition: .3s ease-in-out;
			transition: .3s ease-in-out;
  		}
		.content-item-small:hover .card .card-body { background-color: var(--primary-blue); }
		
			.content-item .card .card-body h3 {
				font-size: 15px;
				line-height: 30px;
				color: #FFFFFF;
				font-family: 'Barlow', sans-serif;
				text-transform: uppercase;
				border-bottom: 1px solid transparent;
			}
	
		.content-item .card .card-img-left {
			position: relative;
			min-width: 225px!important;
			width: 225px!important;
			border-radius: 0 30px 30px 0!important;
		}
		
		

	.content-item-parny .card .card-body {
		
	}
	
@media only screen and (max-width: 767px){ 
	.content-item .card .date {
		padding: 3px 6px 3px 6px;
		margin-bottom: 10px;
		font-size: 10px;
		border-width: 1px
	}
	
	.content-item {
		position: relative;
	}
		.content-item .card {
			border-radius: 30px!important;
			padding-bottom: 80px;
		}
			.content-item .card .card-img-left {
				min-width: 100%!important;
				width: 100%!important;
				height: auto!important;
				min-width: auto!important;
				border-radius: 30px 30px 0 0!important;
			}
			.content-item .card .card-background {
				display: none!important;
			}
			.content-item .card .card-background-big {
				position: absolute;
				width: 100%;
				height: 100%;
				background: linear-gradient(175deg, transparent 60%, var(--primary-blue) 70%, var(--primary-blue) 100%);
				border-radius: 30px!important;
			}
			
			.content-item .card .card-body {
				position: absolute;
				width: 100%;
				bottom: 0px;
				text-align: right;
				color: #FFFFFF;
				border-radius: 30px!important;
				bottom: 0;
				background: none
		   }
				.content-item .card .card-body h3 {
					font-size: 18px;
					line-height: 26px;
				}
}		

.content-item-big {
	position: relative;
}
	.content-item-big .card {
		border-radius: 30px!important;
		padding-bottom: 80px;
	}
		.content-item-big .card .card-img-left {
			min-width: 100%!important;
			width: 100%;
			height: auto;
			border-radius: 30px 30px 0 0!important;
		}
		
		.content-item-big .card .card-background-big {
			position: absolute;
			width: 100%;
			height: 100%;
			background: linear-gradient(175deg, transparent 60%, var(--primary-blue) 70%, var(--primary-blue) 100%);
			border-radius: 30px!important;
		}	
			.content-item-big:hover .card .card-background-big {
			  animation: background-change 0.1s ease-in-out forwards;
			}		
			
		.content-item-big .card .card-body {
			position: absolute;
			width: 100%;
			bottom: 0px;
			text-align: right;
			color: #FFFFFF;
			border-radius: 30px!important;
			bottom: 0;
			background: none
  	   }
	   
	   		.content-item-big .card .card-body h3 {
				font-size: 20px;
				line-height: 32px;
			}
		
	
@media only screen and (max-width: 767px){ 
	.content-item-big .card .card-body h3 {
		font-size: 18px;
		line-height: 26px;
	}
	
	.content-item-big .card .card-body .card-text { font-size: 12px; }
}