html, body {
	height: 100%;
}

html {
	background-image: url('../images/pluspoint-home-appliane.png');
	background-position: center;
	background-repeat: repeat;
}

body {
	background-color: rgba(44,62,80 , 0.6 );
	background-image: url('../images/pattern.png');
	background-position: center;
	background-repeat: repeat;
	font-family: 'Raleway', 'Arial', sans-serif;
}
img{max-width:100%;}

.clock-item .inner {
	height: 0px;
	padding-bottom: 100%;
	position: relative;	
	width: 100%;
}

.clock-canvas {
	background-color: rgba(255, 255, 255, .2);
	border-radius: 50%;
	height: 0px;
	padding-bottom: 100%;
}

.text {
	color: #fff;	
	font-size: 30px;
	font-weight: bold;	
	margin-top: -25px;
	position: absolute;
	top: 50%;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
	width: 100%;
}

.text .val {
	font-size: 25px; margin: 0;
}

.text .type-time {
	font-size: 8px;
}
.color1 {color:#091f40;}
.color2 {color:#872b91;}
.logo {background-color:#fafafa; text-align:center; margin:0 auto 30px;}
.logo img{max-width:250px;}
.info { text-align:center; padding:0 20px; color:#fff; max-width: 700px;  margin: 0 auto 50px;}
.info h3 { line-height:1.4;}
.footer { color:#fff; text-align:center;margin-top:50px;}
@media (min-width: 1200px){
	.container {   width: 400px;}
}
@media (min-width: 992px){
	.container {    width: 400px;}
}
@media (min-width: 768px){
	.container {width: 400px;}
}
@media (min-width: 768px) and (max-width: 991px) {
	.clock-item {
		margin-bottom: 30px;		
	}
}

@media (max-width: 767px) {
	.clock-item {
		margin: 0px 30px 30px 30px;
	}
}