@charset "UTF-8";
*{

}
*,*:before,*:after {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

.clock1 {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    background: rgba(255,255,255,0.85) url(img/clock_circ_punt.png);
    background-size: cover;
    border-radius: 50%;
}
.clock2 {
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.85) url(img/clock_tri_punt.png);
    background-size: cover;
    border-radius: 50%;
}
.clock3 {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    background: rgba(255,255,255,0.50)url(img/clock_cuad.png);
    background-size: cover;
    border-radius: 0%;
}
	
.hour1, .min1, .sec1, .hour2, .min2, .sec2, .hour3, .min3, .sec3 {
    display: flex;
    position: absolute;
    justify-content: center;
    mix-blend-mode: multiply;
    width: 300px;
    height: 300px;
    align-items: center;
    background-size: cover;
}
.hr1 {
	width: 300px;
    height: 300px;
	background-image: url(img/hour_circ.png);
    background-size: cover;
}
.hr2 {
	width: 300px;
    height: 300px;
	background-image: url(img/tri_hour.png);
    background-size: cover;
}
.hr3 {
	width: 300px;
    height: 300px;
	background-image: url(img/hour_cuad.png);
    background-size: cover;
}

.mn1 {
	width: 300px;
    height: 300px;	
	background: url(img/min_circ.png);
    background-size: cover;
}
.mn2 {
	width: 300px;
    height: 300px;	
	background: url(img/tri_min.png);
    background-size: cover;
}
.mn3 {
	width: 300px;
    height: 300px;	
	background: url(img/min_cuad.png);
    background-size: cover;
}
.sc1 {
	width: 300px;
    height: 300px;
	background-image: url(img/sec_circ.png);
    background-size: cover;	
}
.sc2 {
	width: 300px;
    height: 300px;
	background-image: url(img/tri_sec.png);
    background-size: cover;
    mix-blend-mode: multiply;
}
.sc3 {
	width: 300px;
    height: 300px;
	background-image: url(img/sec_cuad.png);
    background-size: cover;
    mix-blend-mode: multiply;
}
.centro {
    width: 300px;
    height: 300px;
    background: url(img/center.png);
    mix-blend-mode: multiply;
    background-size: cover;
	animation-name: centro;
 	animation-duration: 300s;
	animation-iteration-count: infinite;
}


#mainwrapper header {
    /*Header */
    width: 100%;
    overflow: auto;
}
#mainContent .clock1 .clock2 .clock3 {
    /* Container of all content */
    width: 100%;
    height: 100%;
    display: flex;
}
#tbody {
    width: 100%;
	background-color: aqua;
}	
.logo1, .logo2, .logo3 {
    display: flex;
    position: absolute;
    justify-content: center;
   	width: 300px;
    height: 300px;
    align-items: center;
}
@keyframes centro {
	0%   {filter: hue-rotate(0deg);}
	100% {filter: hue-rotate(360deg);}
}