ul.lineHeadEvents {
	list-style: none;
	padding: 35px 0 20px 0;
	margin: 0;
}

 ul.lineHeadEvents li {
	display: inline-block;
	margin: 0 1%;
	cursor: pointer;
	user-select: none; 
}

 ul.lineHeadEvents li a {
	font-size: 25px;
    color: #e1e1e1;
    font-weight: bold;
	text-decoration: none;
 }

 /*ul.lineHeadEvents li a {
	display: block;
	padding: 10px;
	color: rgb(17, 17, 17);
	font-size: 17px;
	text-decoration: none;
	outline: none;
}*/

 ul.lineHeadEvents li.active {
	padding: 10px 20px;
	outline: 1px solid rgb(58, 123, 191);
}

 ul.lineHeadEvents li.active a {
	 color: #333;
 }

.eventsList .event {
	margin: 3% 0;
	position: relative;
	font-size: 0;
	ovarflow: hidden;
}

.eventsList .event:nth-child(odd) {
	background: -moz-linear-gradient(bottom, rgba(211,208,222,0) 0%, rgba(211,208,222,1) 98%, rgba(211,208,222,1) 100%);
	background: -webkit-linear-gradient(bottom, rgba(211,208,222,0) 0%,rgba(211,208,222,1) 98%,rgba(211,208,222,1) 100%);
	background: linear-gradient(to top, rgba(211,208,222,0) 0%,rgba(211,208,222,1) 98%,rgba(211,208,222,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d3d0de', endColorstr='#d3d0de',GradientType=0 );
}

.eventsList .event:nth-child(even) {
	background: -moz-linear-gradient(bottom, rgba(169,190,222,0) 0%, rgba(169,190,222,1) 98%, rgba(169,190,222,1) 100%);
	background: -webkit-linear-gradient(bottom, rgba(169,190,222,0) 0%,rgba(169,190,222,1) 98%,rgba(169,190,222,1) 100%);
	background: linear-gradient(to top, rgba(169,190,222,0) 0%,rgba(169,190,222,1) 98%,rgba(169,190,222,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a9bede', endColorstr='#a9bede',GradientType=0 );
}

@media (min-width: 576px) {
	.eventsList .event {
		ovarflow: auto;
	}
}

.eventsList .image {
	width: 100%;
	vertical-align: middle;
	display: inline-block;
	box-sizing: border-box;
	border: 1px solid #3a7bbf;
	vertical-align: top;
}

@media (min-width: 576px) {
	.eventsList .image {
		width: 48%;
		marrgin-right: 4%;
	}
}

@media (min-width: 768px) {
	.eventsList .image {
		width: 20%;
		margin-right: 0;
	}
}


.eventsList .content {
	width: 100%;
	padding-top: 1%;
	padding-right: 5%;
	padding-bottom: 1%;
	box-sizing: border-box;
	max-height: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	display: inline-block;
	vertical-align: middle;
}

@media (min-width: 576px) {
	.eventsList .content {
		width: 48%;
		margin-left: 4%;
		
		position: relative;
	}
}

@media (min-width: 768px) {
	.eventsList .content {
		width: 75%;
		margin-left: 5%;
	}
}

.eventsList .image img {
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
}

.eventsList .other {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.eventsList button.registration {
	border: none;
	cursor: pointer;
	font-family: inherit;
}
.eventsList button.registration,
.eventsList .registration a {
	display: inline-block;
	padding: 10px 20px;
	background-color: rgba(52, 55, 122, 1);
	transition: background .3s;
	
	font-size: 1.2rem;
	color: #ffffff;
	text-decoration: none;
}
.eventsList button.registration:hover,
.eventsList .registration a:hover {
	background-color: rgba(52, 55, 122, .75);
}

.eventsList .date {
	margin-left: auto;
	font-size: 1.2rem;
	text-align: right;
	/*text-align: left;
	width: 320px;*/
}
@media (max-width: 576px) {
	.eventsList .date{
	background-color: rgba(255, 255, 255, 0.75);
    padding: 0 5px;
	}
}
.eventsList .header {
	display: inline-block;
	width: 100%;
	color: #000;
	text-decoration: none;
	vertical-align: top;
	background-color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 576px) {
	.eventsList .header {
		background-color: transparent;
	}
}

.eventsList .header h2 {
	margin: 0 0 2% 0;
	font-size: 22px;
	line-height: 22px;
	padding: 2% 3% 1% 3%;
}

@media (min-width: 576px) {
	.eventsList .header h2 {
		font-size: 24px;
		line-height: 24px;
		padding: 0;
	}
}

@media (min-width: 768px) {
	.eventsList .header h2 {
		font-size: 26px;
		line-height: 26px;
		padding: 0;
	}
}

.eventsList .description {
	display: none;
	width: 96%;
	
	font-size: 16px;
	vertical-align: top;
	padding: 2% 4% 4% 0;
}

@media (min-width: 576px) {
	.eventsList .description {
		display: inline-block;
	}
}

.eventsList .animation {
	display: none;
	text-align: center;
}

.eventsList .animation img {
	vertical-align: top;
	animation: mainMediaAnimationLoading 1s infinite linear;
}

@keyframes mainMediaAnimationLoading {
	0% {
		-webkit-transform: scale(1, 1) rotate(0deg);
		-khtml-transform: scale(1, 1) rotate(0deg);
		-moz-transform: scale(1, 1) rotate(0deg);
		-ms-transform: scale(1, 1) rotate(0deg);
		-o-transform: scale(1, 1) rotate(0deg);
		transform: scale(1, 1) rotate(0deg);
	}
	25% {
		transform: scale(0.4, 0.6) rotate(90deg);
	}
	50% {
		transform: scale(0.9, 0.5) rotate(180deg);
	}
	75% {
		transform: scale(0.5, 0.7) rotate(270deg);
	}
	100% {
		-webkit-transform: scale(1, 1) rotate(360deg);
		-khtml-transform: scale(1, 1) rotate(360deg);
		-moz-transform: scale(1, 1) rotate(360deg);
		-ms-transform: scale(1, 1) rotate(360deg);
		-o-transform: scale(1, 1) rotate(360deg);
		transform: scale(1, 1) rotate(360deg);
	}
}