/*styling for the clock*/
.swiper-slide .name{text-align: center;font-size: 16px;color: #fff;margin-bottom: 10px;font-weight: 600;transition: all .3s;cursor: pointer;}
.swiper-slide .name:hover{color: #f96326;}
.swiper-slide .date{text-align: center;font-size: 14px;color: #fff;transition: all .3s;cursor: pointer;}
.swiper-slide .date:hover{color:#f96326;}
.swiper-container{overflow: hidden;width: 1200px;display: flex;justify-content: space-around;margin: 0 auto;padding: 25px 0;}
@media(max-width:769px){
	.swiper-container{padding: 15px 0;}
	.swiper-slide .name:hover{color: #fff;}
	.swiper-slide .date:hover{color:#fff;}
}
.time
{
	position: relative;
	width: 150px;
	height: 150px;
	padding: 0;
	list-style: none;
	margin: 10px auto 5px;
	background: url('../images/clock.png') no-repeat;
	background-size: 100%;
	
}
.seconds,
.minutes,
.hours
{
	position: absolute;
	width: 2.5px;
	height: 100%;
	top: 0;
	left: 50%;
}
.hours{z-index: 10;}
.minutes{z-index: 20;}
.seconds{z-index: 30;}

.hours>span
{
	background: url('../images/hour.png') no-repeat;
	display: inline-block;
	margin-top: 39px;
	width: 2.5px;
	height: 75px;
	background-size: 100%;
}
.minutes>span
{
	background: url('../images/minutes.png') no-repeat;
	display: inline-block;
	margin-top: 18.75px;
	width: 1.875px;
	height: 75px;
	background-size: 100%;
}

.seconds>span
{
	background: url('../images/seconds.png') no-repeat;
	display: inline-block;
	margin-top: 8.75px;
	width: 2.5px;
	height: 75px;
	background-size: 100% auto;
}

@media(max-width:1200px){
	.swiper-container{width: auto;}
	.time{position: relative;width: 120px;height: 120px;}
	.swiper-slide .name{font-size: 14px;}
	.swiper-slide .date{font-size: 12px;}
	.seconds,.minutes,.hours{position: absolute;width: 2px;}
	.hours>span{width: 2px;height: 60px;background-size: 100% auto;margin-top: 31.25px;}
	.minutes>span{width: 1.5px;height: 60px;background-size: 100% auto;margin-top: 12.25px;}
	.seconds>span{width: 2px;height: 60px;background-size: 100% auto;margin-top: 7px;}
}
@media(max-width:769px){
	.time{position: relative;width: 100px;height: 100px;}
	.swiper-slide .name{font-size: 14px;}
	.swiper-slide .date{font-size: 12px;}
	.seconds,.minutes,.hours{position: absolute;width: 1.6px;}
	.hours>span{width: 1.6px;height: 50px;background-size: 100% auto;margin-top: 27px;}
	.minutes>span{width: 1.2px;height: 50px;background-size: 100% auto;margin-top: 14.2px;}
	.seconds>span{width: 1.6px;height: 50px;background-size: 100% auto;margin-top: 7.6px;}
}