html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    float:left;
}

#menu{z-index:999;position:absolute;left:5%;bottom:10%;width:90%;background-color:rgba(66,166,42,0.9);background-color:#42a62a\9;font-family:arial,sans-serif;font-weight:normal;font-size:100%;color:white;}
#menu li{float:left;list-style:none;padding:1em;margin:0;}
#menu li:nth-of-type(1){padding-left:2em;}
#menu a{color:white;text-decoration:none;}
#menu img{height:1em;vertical-align:middle;border:0;}
#logo{height:0.75em !important;width:17.875em;}

#fullscreen{
	position:fixed;
	margin:0;
	padding:0;
	display:none;
	background-size:cover;
	background-position: center center;
	z-index:998;
}
#fullscreen:hover,.brick:hover{
	cursor:pointer;
}

#container {
    float: left;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
}
.single {
    margin: 0;
    padding: 0;
    float: left;
	position:relative;
}
.brick{
	width:100%;
	height:100%;
	margin: 0;
    padding: 0;
    float: left;
    background-size: cover;
	background-position: center center;
	position:absolute;
	left:0;
	top:0;
	-webkit-animation-name: cf4FadeInOut;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 60s;

	-moz-animation-name: cf4FadeInOut;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 60s;

	-o-animation-name: cf4FadeInOut;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-duration: 60s;

	animation-name: cf4FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 60s;
}

@-webkit-keyframes cf4FadeInOut {
0%{opacity:0;z-index:1;}
1.66%{opacity:1;z-index:2;}
33.33%{opacity:1;z-index:2;}
35%{opacity:0;z-index:1;}
100%{opacity:0;z-index:1;}
}

@-moz-keyframes cf4FadeInOut {
0%{opacity:0;z-index:1;}
1.66%{opacity:1;z-index:2;}
33.33%{opacity:1;z-index:2;}
35%{opacity:0;z-index:1;}
100%{opacity:0;z-index:1;}
}

@-o-keyframes cf4FadeInOut {
0%{opacity:0;z-index:1;}
1.66%{opacity:1;z-index:2;}
33.33%{opacity:1;z-index:2;}
35%{opacity:0;z-index:1;}
100%{opacity:0;z-index:1;}
}

@keyframes cf4FadeInOut {
0%{opacity:0;z-index:1;}
1.66%{opacity:1;z-index:2;}
33.33%{opacity:1;z-index:2;}
35%{opacity:0;z-index:1;}
100%{opacity:0;z-index:1;}
}

.single div:nth-of-type(3),.single div:nth-of-type(2){opacity:0;}
.single div:nth-of-type(1){z-index:2;}

.single0 div:nth-of-type(1),.single6 div:nth-of-type(1),.single9 div:nth-of-type(1),.single15 div:nth-of-type(1){-webkit-animation-delay:40s;-moz-animation-delay:40s;-o-animation-delay:40s;animation-delay:40s;}
.single0 div:nth-of-type(2),.single6 div:nth-of-type(2),.single9 div:nth-of-type(2),.single15 div:nth-of-type(2){-webkit-animation-delay:20s;-moz-animation-delay:20s;-o-animation-delay:20s;animation-delay:20s;}
.single0 div:nth-of-type(3),.single6 div:nth-of-type(3),.single9 div:nth-of-type(3),.single15 div:nth-of-type(3){-webkit-animation-delay:0s;-moz-animation-delay:0s;-o-animation-delay:0s;animation-delay:0s;}

.single1 div:nth-of-type(1),.single7 div:nth-of-type(1),.single10 div:nth-of-type(1),.single12 div:nth-of-type(1){-webkit-animation-delay:45s;-moz-animation-delay:45s;-o-animation-delay:45s;animation-delay:45s;}
.single1 div:nth-of-type(2),.single7 div:nth-of-type(2),.single10 div:nth-of-type(2),.single12 div:nth-of-type(2){-webkit-animation-delay:25s;-moz-animation-delay:25s;-o-animation-delay:25s;animation-delay:25s;}
.single1 div:nth-of-type(3),.single7 div:nth-of-type(3),.single10 div:nth-of-type(3),.single12 div:nth-of-type(3){-webkit-animation-delay:5s;-moz-animation-delay:5s;-o-animation-delay:5s;animation-delay:5s;}

.single2 div:nth-of-type(1),.single4 div:nth-of-type(1),.single11 div:nth-of-type(1),.single13 div:nth-of-type(1){-webkit-animation-delay:50s;-moz-animation-delay:50s;-o-animation-delay:50s;animation-delay:50s;}
.single2 div:nth-of-type(2),.single4 div:nth-of-type(2),.single11 div:nth-of-type(2),.single13 div:nth-of-type(2){-webkit-animation-delay:30s;-moz-animation-delay:30s;-o-animation-delay:30s;animation-delay:30s;}
.single2 div:nth-of-type(3),.single4 div:nth-of-type(3),.single11 div:nth-of-type(3),.single13 div:nth-of-type(3){-webkit-animation-delay:10s;-moz-animation-delay:10s;-o-animation-delay:10s;animation-delay:10s;}

.single3 div:nth-of-type(1),.single5 div:nth-of-type(1),.single8 div:nth-of-type(1),.single14 div:nth-of-type(1){-webkit-animation-delay:55s;-moz-animation-delay:55s;-o-animation-delay:55s;animation-delay:55s;}
.single3 div:nth-of-type(2),.single5 div:nth-of-type(2),.single8 div:nth-of-type(2),.single14 div:nth-of-type(2){-webkit-animation-delay:35s;-moz-animation-delay:35s;-o-animation-delay:35s;animation-delay:35s;}
.single3 div:nth-of-type(3),.single5 div:nth-of-type(3),.single8 div:nth-of-type(3),.single14 div:nth-of-type(3){-webkit-animation-delay:15s;-moz-animation-delay:15s;-o-animation-delay:15s;animation-delay:15s;}

@media screen and (max-width: 640px) and (max-height: 480px) {
    .single {
        width: 50% !important;
        height: 50% !important;
    }
	#fullscreen{
		width:100% !important;
		height:100% !important;
		top:0 !important;
		left:0 !important;
	}
}

@media screen and (orientation:portrait) {
    .single {
        width: 50%;
        height: 25%;
    }
	#fullscreen{
		width:100%;
		height:50%;
		top:25%;
		left:0;
	}
}

@media screen and (orientation:landscape) {
    .single {
        width: 25%;
        height: 50%;
    }
	#fullscreen{
		width:50%;
		height:100%;
		top:0;
		left:25%;
	}
}

@media screen and (min-width: 1280px) , (min-height: 960px) {
    .single {
        width: 25%;
        height: 25%;
    }
	#fullscreen{
		width:50%;
		height:50%;
		top:25%;
		left:25%;
	}
}