/*
|----------------------------------------------------------------------------
	Flip Time Countdown Builder WordPress Plugin
	Author: MGScoder
	Author URL: https://codecanyon.net/user/mgscoder
|----------------------------------------------------------------------------
*/

/*
|----------------------------------------------------------------------------
	1. COUNTDOWN STYLE
|----------------------------------------------------------------------------
*/	
.mgsflipTimebox {
	margin: 50px auto;
	max-width: max-content;
}
.mgsflipTimebox .flip-clock-wrapper ul {
	margin: 3px;
	width:56px;
}
.mgsflipTimebox .flip-clock-divider .flip-clock-label {
    right: -75px;
    font-size: 16px;
    font-weight: bold;
}
.mgsflipTimebox .flip-clock-wrapper {
    margin: 0;
}
.mgsflipTimebox .flip-clock-wrapper ul li a div.up:after {
	background-color: rgba(128, 128, 128, .5);
}

.mgsflipTimebox .flip-clock-wrapper .flip-clock-meridium {
    font-size: 28px !important;
}
.mgsflipTimebox .flip-clock-wrapper .flip-clock-meridium a {
	color: #fff;
	background-color: #333333;
	border-radius: 6px;
	text-decoration: none;
}
.mgsflipTimebox .flip-clock-wrapper ul.flip-clock-meridium li {
    min-width: 32px;
}
.flipclock1message, .flipclock2message, .flipclock3message, .flipclock4message, .flipclock5message, .flipclock6message, .flipclock14message {
    padding-left: 15px;
    color: #ff0000;
}
.darkbgFlip .flip-clock-divider .flip-clock-label {
    color: #fff;
}

.mgsflipTimebox .flip-clock-wrapper ul li a, .mgsflipTimebox .flip-clock-wrapper ul li a:hover {
    box-shadow: none;
	text-decoration: none;
}

.mgsflipTimebox .flip-clock-wrapper ul li {
	margin-left: 0;
	list-style: none;
	padding: 0
}	
.mgsflipTimebox .flip-clock-wrapper .flip {
    box-shadow: none;
}	


/*-------------- Orange Theme -------------*/
.mgsflipTimebox .orangetheme.flip-clock-wrapper ul li a div div.inn { 
	color: #fff;
	background-color: #fb9902;
} 
.mgsflipTimebox .orangetheme .flip-clock-dot {
	background-color: #fb9902; 
	box-shadow: none;
}
.mgsflipTimebox .orangetheme.flip-clock-wrapper .flip-clock-meridium a {
	color: #fff;
	background-color: #fb9902;
	border-radius: 6px;
}
.mgsflipTimebox .orangetheme.flip-clock-wrapper ul li a div.up:after {
	background-color: rgba(250, 250, 250, .5);
}

/*-------------- DarkOrange Theme -------------*/
.mgsflipTimebox .darkorangetheme.flip-clock-wrapper ul li a div div.inn { 
	color: #fff;
	background-color: #fd5308;
} 
.mgsflipTimebox .darkorangetheme .flip-clock-dot {
	background-color: #fd5308; 
	box-shadow: none;
}
.mgsflipTimebox .darkorangetheme.flip-clock-wrapper .flip-clock-meridium a {
	color: #fff;
	background-color: #fd5308;
	border-radius: 6px;
}
.mgsflipTimebox .darkorangetheme.flip-clock-wrapper ul li a div.up:after {
	background-color: rgba(250, 250, 250, .5);
}

/*-------------- Blue Theme -------------*/
.mgsflipTimebox .bluetheme.flip-clock-wrapper ul li a div div.inn { 
	color: #fff;
	background-color: #0147fe;
} 
.mgsflipTimebox .bluetheme .flip-clock-dot {
	background-color: #0147fe; 
	box-shadow: none;
}
.mgsflipTimebox .bluetheme.flip-clock-wrapper .flip-clock-meridium a {
	color: #fff;
	background-color: #0147fe;
	border-radius: 6px;
}
.mgsflipTimebox .bluetheme.flip-clock-wrapper ul li a div.up:after {
	background-color: rgba(250, 250, 250, .5);
}

/*-------------- Green Theme -------------*/
.mgsflipTimebox .greentheme.flip-clock-wrapper ul li a div div.inn { 
	color: #fff;
	background-color: #23a929;
} 
.mgsflipTimebox .greentheme .flip-clock-dot {
	background-color: #23a929; 
	box-shadow: none;
}
.mgsflipTimebox .greentheme.flip-clock-wrapper .flip-clock-meridium a {
	color: #fff;
	background-color: #23a929;
	border-radius: 6px;
}
.mgsflipTimebox .greentheme.flip-clock-wrapper ul li a div.up:after {
	background-color: rgba(250, 250, 250, .5);
}

/*-------------- Red Theme -------------*/
.mgsflipTimebox .redtheme.flip-clock-wrapper ul li a div div.inn { 
	color: #fff;
	background-color: #d81e1e;
} 
.mgsflipTimebox .redtheme .flip-clock-dot {
	background-color: #d81e1e; 
	box-shadow: none;
}
.mgsflipTimebox .redtheme.flip-clock-wrapper .flip-clock-meridium a {
	color: #fff;
	background-color: #d81e1e;
	border-radius: 6px;
}
.mgsflipTimebox .redtheme.flip-clock-wrapper ul li a div.up:after {
	background-color: rgba(250, 250, 250, .5);
}

/*-------------- Pink Theme -------------*/
.mgsflipTimebox .pinktheme.flip-clock-wrapper ul li a div div.inn { 
	color: #fff;
	background-color: #8501ad;
} 
.mgsflipTimebox .pinktheme .flip-clock-dot {
	background-color: #8501ad; 
	box-shadow: none;
}
.mgsflipTimebox .pinktheme.flip-clock-wrapper .flip-clock-meridium a {
	color: #fff;
	background-color: #8501ad;
	border-radius: 6px;
}
.mgsflipTimebox .pinktheme.flip-clock-wrapper ul li a div.up:after {
	background-color: rgba(250, 250, 250, .5);
}

/*-------------- Purple Theme -------------*/
.mgsflipTimebox .purpletheme.flip-clock-wrapper ul li a div div.inn { 
	color: #fff;
	background-color: #a7194b;
} 
.mgsflipTimebox .purpletheme .flip-clock-dot {
	background-color: #a7194b; 
	box-shadow: none;
}
.mgsflipTimebox .purpletheme.flip-clock-wrapper .flip-clock-meridium a {
	color: #fff;
	background-color: #a7194b;
	border-radius: 6px;
}
.mgsflipTimebox .purpletheme.flip-clock-wrapper ul li a div.up:after {
	background-color: rgba(250, 250, 250, .5);
}

/*-------------- Coffee Theme -------------*/
.mgsflipTimebox .coffeetheme.flip-clock-wrapper ul li a div div.inn { 
	color: #fff;
	background-color: #7b5a26;
} 
.mgsflipTimebox .coffeetheme .flip-clock-dot {
	background-color: #7b5a26;
}
.mgsflipTimebox .coffeetheme.flip-clock-wrapper .flip-clock-meridium a {
	color: #fff;
	background-color: #7b5a26;
	border-radius: 6px;
}
.mgsflipTimebox .coffeetheme.flip-clock-wrapper ul li a div.up:after {
	background-color: rgba(250, 250, 250, .5);
}

/*-------------- Gradient Theme -------------*/
.mgsflipTimebox .gradienttheme.flip-clock-wrapper ul li a div div.inn { 
	color: #fff;
	background-color: #3e4b99;
	background-image: -moz-linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
	background-image: -webkit-linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
	background-image: -o-linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
	background-image: -ms-linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
	background-image: linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
} 
.mgsflipTimebox .gradienttheme .flip-clock-dot {
	box-shadow: none;
	background-color: #3e4b99;
	background-image: -moz-linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
	background-image: -webkit-linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
	background-image: -o-linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
	background-image: -ms-linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
	background-image: linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
}
.mgsflipTimebox .gradienttheme.flip-clock-wrapper .flip-clock-meridium a {
	color: #fff;
	border-radius: 6px;
	background-color: #3e4b99;
	background-image: -moz-linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
	background-image: -webkit-linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
	background-image: -o-linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
	background-image: -ms-linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
	background-image: linear-gradient(90deg, #3e4b99 10%, #d81e1e 100%);
}
.mgsflipTimebox .gradienttheme.flip-clock-wrapper ul li a div.up:after {
	background-color: rgba(250, 250, 250, .5);
}

/*-------------- Gradient Theme 2 -------------*/
.mgsflipTimebox .gradienttheme2.flip-clock-wrapper ul li a div div.inn { 
	color: #fff;
	background-color: #0147fe;
	background-image: -moz-linear-gradient(270deg, #0147fe 0%, #23a929 100%);
	background-image: -webkit-linear-gradient(270deg, #0147fe 0%, #23a929 100%);
	background-image: -o-linear-gradient(270deg, #0147fe 0%, #23a929 100%);
	background-image: -ms-linear-gradient(270deg, #0147fe 0%, #23a929 100%);
	background-image: linear-gradient(270deg, #0147fe 0%, #23a929 100%);
} 
.mgsflipTimebox .gradienttheme2 .flip-clock-dot {
	box-shadow: none;
	background-color: #0147fe;
	background-image: -moz-linear-gradient(270deg, #0147fe 0%, #23a929 100%);
	background-image: -webkit-linear-gradient(270deg, #0147fe 0%, #23a929 100%);
	background-image: -o-linear-gradient(270deg, #0147fe 0%, #23a929 100%);
	background-image: -ms-linear-gradient(270deg, #0147fe 0%, #23a929 100%);
	background-image: linear-gradient(270deg, #0147fe 0%, #23a929 100%);
}
.mgsflipTimebox .gradienttheme2.flip-clock-wrapper .flip-clock-meridium a {
	color: #fff;
	border-radius: 6px;
	background-color: #0147fe;
	background-image: -moz-linear-gradient(270deg, #0147fe 0%, #23a929 100%);
	background-image: -webkit-linear-gradient(270deg, #0147fe 0%, #23a929 100%);
	background-image: -o-linear-gradient(270deg, #0147fe 0%, #23a929 100%);
	background-image: -ms-linear-gradient(270deg, #0147fe 0%, #23a929 100%);
	background-image: linear-gradient(270deg, #0147fe 0%, #23a929 100%);
}
.mgsflipTimebox .gradienttheme2.flip-clock-wrapper ul li a div.up:after {
	background-color: rgba(250, 250, 250, .5);
}

/*-------------- White Theme -------------*/
.mgsflipTimebox .whitetheme.flip-clock-wrapper ul li a div div.inn { 
	color: #23a929;
	background-color: #fff;
} 
.mgsflipTimebox .whitetheme .flip-clock-dot {
	background-color: #fff; 
	box-shadow: none;
}
.mgsflipTimebox .whitetheme.flip-clock-wrapper .flip-clock-meridium a {
	color: #23a929;
	background-color: #fff;
	border-radius: 6px;
}
.mgsflipTimebox .whitetheme.flip-clock-wrapper ul li a div.up:after {
	background-color: rgba(128, 128, 128, .5);
}


/*
|----------------------------------------------------------------------------
	2. RESPONSIVE
|----------------------------------------------------------------------------
*/
@media screen and (min-width: 992px) {	
    .mgsflipTimebox.lessftfullcontainer .flip-clock-wrapper ul {
		height: 50px;
		line-height: 50px;
	}
    .mgsflipTimebox.lessftfullcontainer .flip-clock-wrapper ul li {
		line-height: 50px;
	}
    .mgsflipTimebox.lessftfullcontainer .flip-clock-wrapper ul li a div.up:after {
		top: 24px;
	}
    .mgsflipTimebox.lessftfullcontainer .flip-clock-divider {
		height: 50px;
	}
    .mgsflipTimebox.lessftfullcontainer .flip-clock-dot {
		height: 6px;
		width: 6px;
		left: 7px;
	}
    .mgsflipTimebox.lessftfullcontainer .flip-clock-dot.top {
		top: 17px;
	}
    .mgsflipTimebox.lessftfullcontainer .flip-clock-dot.bottom {
		bottom: 8px; 
	}	
    .mgsflipTimebox.lessftfullcontainer .flip-clock-divider.hours .flip-clock-label {
		right: -66px;
	}
    .mgsflipTimebox.lessftfullcontainer .flip-clock-divider.minutes .flip-clock-label {
		right: -78px;
	}
    .mgsflipTimebox.lessftfullcontainer .flip-clock-divider.seconds .flip-clock-label {
		right: -78px;
	}	
    .mgsflipTimebox.lessftfullcontainer .flip-clock-wrapper ul {
		width: 37px;
	}
    .mgsflipTimebox.lessftfullcontainer .flip-clock-wrapper ul li a div div.inn {
		font-size: 38px;
	}
	.mgsflipTimebox.lessftfullcontainer .flip-clock-meridium {
		font-size: 20px !important;
	}
}

@media screen and (max-width: 991px) {	
	.mgsflipTimebox .flip-clock-wrapper ul {
		width:40px;
	}
	.mgsflipTimebox .flip-clock-wrapper ul li a div div.inn {
		font-size: 46px;
	}
    .mgsflipTimebox .flip-clock-wrapper ul {
		height: 60px;
		line-height: 60px;
	}
    .mgsflipTimebox .flip-clock-wrapper ul li {
		line-height: 60px;
	}
    .mgsflipTimebox .flip-clock-wrapper ul li a div.up:after {
		top: 29px;
	}
    .mgsflipTimebox .flip-clock-divider {
		height: 60px;
	}
    .mgsflipTimebox .flip-clock-dot {
		height: 8px;
		width: 8px;
		left: 6px;
	}
    .mgsflipTimebox .flip-clock-dot.top {
		top: 17px;
	}
    .mgsflipTimebox .flip-clock-dot.bottom {
		bottom: 12px; 
	}	
    .mgsflipTimebox .flip-clock-divider.hours .flip-clock-label {
		right: -72px;
	}
    .mgsflipTimebox .flip-clock-divider.minutes .flip-clock-label {
		right: -85px;
	}
    .mgsflipTimebox .flip-clock-divider.seconds .flip-clock-label {
		right: -85px;
	}
	.mgsflipTimebox .flip-clock-wrapper .flip-clock-meridium {
		font-size: 22px !important;
	}
}
	
@media screen and (max-width: 767px) {	
    .mgsflipTimebox .flip-clock-wrapper ul {
		height: 50px;
		line-height: 50px;
	}
    .mgsflipTimebox .flip-clock-wrapper ul li {
		line-height: 50px;
	}
    .mgsflipTimebox .flip-clock-wrapper ul li a div.up:after {
		top: 24px;
	}
    .mgsflipTimebox .flip-clock-divider {
		height: 50px;
	}
    .mgsflipTimebox .flip-clock-dot {
		height: 6px;
		width: 6px;
		left: 7px;
	}
    .mgsflipTimebox .flip-clock-dot.top {
		top: 17px;
	}
    .mgsflipTimebox .flip-clock-dot.bottom {
		bottom: 8px; 
	}	
    .mgsflipTimebox .flip-clock-divider.hours .flip-clock-label {
		right: -66px;
	}
    .mgsflipTimebox .flip-clock-divider.minutes .flip-clock-label {
		right: -78px;
	}
    .mgsflipTimebox .flip-clock-divider.seconds .flip-clock-label {
		right: -78px;
	}	
    .mgsflipTimebox .flip-clock-wrapper ul {
		width: 37px;
	}
    .mgsflipTimebox .flip-clock-wrapper ul li a div div.inn {
		font-size: 38px;
	}
	.mgsflipTimebox .flip-clock-meridium {
		font-size: 20px !important;
	}
}

@media screen and (max-width: 568px) {
	.mgsflipTimebox .flip-clock-wrapper .flip-clock-meridium {
		font-size: 20px !important;
	}
    .mgsflipTimebox .flip-clock-divider {
		width: 5px;
	}
    .mgsflipTimebox .flip-clock-dot {
		height: 4px;
		width: 4px;
		left: 0;
	}	
    .mgsflipTimebox .flip-clock-divider.days .flip-clock-label {
		right: -86px;
	}
    .mgsflipTimebox .flip-clock-divider.hours .flip-clock-label {
		right: -66px;
	}
    .mgsflipTimebox .flip-clock-divider.minutes .flip-clock-label {
		right: -72px;
	}
    .mgsflipTimebox .flip-clock-divider.seconds .flip-clock-label {
		right: -72px;
	}	
	.mgsflipTimebox .flip-clock-meridium {
		font-size: 18px !important;
	}
	
	.mgsflipTimebox .flip-clock-divider:first-child {
		width: 0;
		right: -3px;
	}
}

@media screen and (max-width: 480px) {
	.mgsflipTimebox .flip-clock-wrapper .flip-clock-meridium {
		font-size: 16px !important;
	}
    .mgsflipTimebox .flip-clock-divider .flip-clock-label {
		font-size: 16px;
	}
    .mgsflipTimebox .flip-clock-divider.days .flip-clock-label {
		right: -56px;
	}
    .mgsflipTimebox .flip-clock-divider.hours .flip-clock-label {
		right: -50px;
	}
    .mgsflipTimebox .flip-clock-divider.minutes .flip-clock-label {
		right: -58px;
	}
    .mgsflipTimebox .flip-clock-divider.seconds .flip-clock-label {
		right: -68px;
	}	
    .mgsflipTimebox .flip-clock-wrapper ul li a div div.inn {
		font-size: 28px;
	}
	.mgsflipTimebox .flip-clock-meridium {
		font-size: 14px !important;
	}		
	.mgsflipTimebox .flip-clock-wrapper ul.flip {
		width: 27px;
		background-color: transparent;
		box-shadow: none;
	}
	.mgsflipTimebox .flip-clock-wrapper ul li {
		width: 27px;
	}	
    
}

@media screen and (max-width: 360px) {
    .mgsflipTimebox .flip-clock-divider .flip-clock-label {
		font-size: 14px;
	}
    .mgsflipTimebox .flip-clock-divider.days .flip-clock-label {
		right: -40px;
	}
    
    .mgsflipTimebox .flip-clock-wrapper ul {
		margin: 2px;
	}		
	.mgsflipTimebox .flip-clock-wrapper ul.flip {
		width: 24px;
	}
	.mgsflipTimebox .flip-clock-wrapper {
		padding-left: 5px;
	}
	.mgsflipTimebox .flip-clock-wrapper ul li {
		width: 24px;
	}	
    
}

@media screen and (max-width: 320px) {
	
	.mgsflipTimebox .flip-clock-wrapper {
		padding-left: 5px;
	}
	.mgsflipTimebox .flip-clock-wrapper ul.flip {
		width: 22px;
	}
	.mgsflipTimebox .flip-clock-wrapper ul li {
		width: 22px;
	}	
    
}