.events {
	.content-item {
		position: relative;
		.event-image {
			.overlay-image {
				position:   absolute;
				top:        0;
				left:       0;
				right:      0;
				bottom:     0;
				opacity:    1;
				background: rgba(0, 0, 0, 0.3) url("/../images/wave-line.png");
			}
			img {
				width: 100%;
			}
		}
		.event-content {
			text-align: center;
			position:   absolute;
			color:      @thim_color_white;
			top:        100px;
			width:      100%;
			h2 {
				background:      url("/../images/event-heading-bg.png") no-repeat center;
				background-size: contain;
				height:          67px;
				padding-top:     8px;
				color:           #5a5a5a;
				margin-bottom:   60px;
				margin-top:      0;
				font-size:       20px;
			}
			.event-title {
 				font-size:     48px;
				margin-bottom: 35px;
				margin-top:    0;
				color:         @thim_color_white;
				line-height:   100%;
			}
			.time {
				width:  230px;
				margin: auto;
				.time-value {
					text-align:   left;
					position:     relative;
					padding-left: 70px;
					p {
						font-size:     16px;
						margin-bottom: 10px;
						line-height:   100%;
					}
					svg {
						position: absolute;
						left:     0;
						top:      -5px;
						fill:     #fff;
					}
				}

			}
			.button {
				margin-top: 50px;
				a {
					color:            @thim_color_white;
					outline:          none;
					padding:          10px 20px;
 					border-radius:    5px;
					font-weight:      bold;
 					&:hover {
						background-color: transparent;
						color:            @thim_color_white;
						border:           1px solid @thim_color_white;
					}
				}
			}
		}
	}

	.owl-controls.clickable {
		position: absolute;
		bottom:   89px;
		width:    100%;
        .owl-pagination{
            .owl-page{
                span{
                    background: #fff;
                }
            }
            .active {
                span {
                    border:     2px solid @thim_color_white;
                    background: transparent;
                }

            }
            span:hover {
                background: #fff;
            }
        }

	}
}

@media screen and (max-width: 1180px) {
	.events {
		.item {
			.content-item {
				position: relative;
				.event-content {
					top: 40px;
					h2 {
						margin-bottom: 40px;
					}
				}
			}

		}
	}
}

@media (max-width: 1899px) {
	.events {
		.content-item .event-content {
			top: 17%;
			h2 {
				margin-bottom: 30px;
			}
		}
		.owl-controls.clickable {
			bottom: 8%;
		}
	}
}

@media screen and (max-width: 992px) {
	.events {
		.item {
			.content-item {
				position: relative;
				.event-content {
					top: 50px;
					h2 {
						height:        40px;
						font-size:     13px !important;
						margin-bottom: 15px;
					}
					h3 {
						font-size:  25px !important;
						margin-top: 10px;
					}
					.time {
						.time-value {
							text-align:   center;
							padding-left: 25px;
							p {
								font-size:     13px;
								margin-bottom: 5px;
							}
						}
						.time-value::before {
							font-size: 25px;
							top:       3px;
							left:      45px;
						}

					}
					.button {
						margin-top: 25px;
						a {
							color:            @thim_color_white;
							text-decoration:  none;
							outline:          none;
 							font-family:      RobotoSlab;
							font-weight:      bold;
							&:hover {
								text-decoration:  none;
 							}
							padding:          10px 15px;
							border-radius:    4px;
							font-size:        13px;
						}

					}
				}
			}

		}
	}
}

@media screen and (max-width: 789px) {
	.events {
		.item {
			.content-item {
				position: relative;
				.event-content {
					top: 10px !important;
 					.button {
						margin-top: 25px;
						a {

							&:hover {
								text-decoration:  none;
 							}
							padding:       5px 10px;
							border-radius: 3px;
							font-size:     11px;
						}

					}
				}
			}

		}
		.owl-controls.clickable {
			bottom: 0 !important;
			.active {
				span {
					border: 1px solid @thim_color_white !important;
				}
			}
		}
	}
}

@media screen and (max-width: 580px) {
	.events {
		.item {
			.content-item {
				.button {
					margin-top: 10px !important;

				}
				.event-title {
					margin-bottom: 10px;
				}
			}
		}
		.owl-controls.clickable {
			display: none !important;
		}
	}
}

@media screen and (max-width: 425px) {
	.events {
		.item {
			.content-item {
				.event-heading {
					display: none;
				}
				.event-title {
					margin-top: 0;
				}
			}
		}

	}
}