#shape { 
	background: blue; 
	width: 100px;
	height: 100px;
}

.container {
	display: none;
}

.sevenam {
	width: 100%
	height:100%;
	transition: background-color 3600s; 
    animation-name: seven;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes seven{
    from {background-color: #fcfcfc;}
    to {background-color: #f4f4f4;}
}

.eight {
	width: 100%
	height:100%;
	transition: background-color 3600s; 
    animation-name: eight;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes eight{
    from {background-color: #f4f4f4;}
    to {background-color: #ececec;}
}

.nine {
	width: 100%
	height:100%;
	transition: background-color 3600s; 
    animation-name: nine;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes nine{
    from {background-color: #ececec;}
    to {background-color: #e4e4e4;}
}

.ten {
	width: 100%
	height:100%;
	transition: background-color 3600s; 
    animation-name: ten;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes ten{
    from {background-color: #e4e4e4;}
    to {background-color: #dcdcdc;}
}

.eleven {
	width: 100%
	height:100%;
	background-color: grey;
	transition: background-color 3600s; 
    animation-name: eleven;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes eleven{
    from {background-color: #dcdcdc;}
    to {background-color: #d4d4d4;}
}

.twelvepm{
	width: 100%
	height:100%;
	transition: background-color 3600s; 
    animation-name: twelve;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes twelve{
    from {background-color: #d4d4d4;}
    to {background-color: #cccccc;}
}

.onepm {
	width: 100%
	height:100%;
	transition: background-color 3600s; 
    animation-name: onepm;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes onepm{
    from {background-color: #cccccc;}
    to {background-color: #c4c4c4;}
}

.twopm {
	width: 100%
	height:100%;
	transition: background-color 3600s; 
    animation-name: twopm;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes twopm{
    from {background-color: #c4c4c4;}
    to {background-color: #b4b4b4;}
}

.threepm {
	width: 100%
	height:100%;
	transition: background-color 3600s; 
    animation-name: threepm;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes threepm{
    from {background-color: #b4b4b4;}
    to {background-color: #a4a4a4;}
}

.fourpm {
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: fourpm;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes fourpm{
    from {background-color: #a4a4a4;}
    to {background-color: #949494;}
}

.fivepm {
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: fivepm;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes fivepm{
    from {background-color: #949494;}
    to {background-color: #838383;}
}

.sixpm {
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: sixpm;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes sixpm{
    from {background-color: #838383;}
    to {background-color: #6c6c6c;}
}

.sevenpm{
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: sevempm;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes sevempm{
    from {background-color: #6c6c6c;}
    to {background-color: #5b5b5b;}
}

.eightpm {
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: eightpm;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes eightpm{
    from {background-color: #5b5b5b;}
    to {background-color: #545454;}
}

.ninepm {
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: ninepm;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes ninepm{
    from {background-color: #545454;}
    to {background-color: #4c4c4c;}
}

.tenpm {
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: tenpm;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes tenpm{
    from {background-color: #4c4c4c;}
    to {background-color: #444444;}
}

.elevenpm {
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: elevenpm;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes elevenpm{
    from {background-color: #444444;}
    to {background-color: #3c3c3c;}
}

.twelveam {
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: twelveam;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes twelveam{
    from {background-color: #3c3c3c;}
    to {background-color: #333333;}
}

.oneam {
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: oneam;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes oneam{
    from {background-color: #333333;}
    to {background-color: #2c2c2c;}
}

.twoam {
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: twoam;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes twoam{
    from {background-color: #2c2c2c;}
    to {background-color: #232323;}
}

.threeam{
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: three;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes three{
    from {background-color: #232323;}
    to {background-color: #1b1b1b;}
}

.fouram{
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: four;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes four{
    from {background-color: #1b1b1b;}
    to {background-color: #131313;}
}

.fiveam {
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: five;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes five{
    from {background-color:  #131313;}
    to {background-color: #000000;}
}

.sixam {
    width: 100%
    height:100%;
    transition: background-color 3600s; 
    animation-name: six;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes six{
    from {background-color:  #ffffff;}
    to {background-color: #fcfcfc;}
}

.clock-video{
    width: 1920px;
    height:1080px;

}