@charset "utf-8";
/* CSS Document */
.uilayout{
	padding:0;
	margin:0;
	width:100%;
	height:calc(100% - 30px);
	
}
.col{
	height:100%;
	width:100%;
	display:table;
	
}

.layout{
	position:relative;
}
.col .layout{
	height:100%;
	display:table-cell;
}
				/* one item */
                .uilayout .col .layout:first-child:nth-last-child(1) {
                    /* -or- li:only-child { */
                    width:100%;
                  height:100%;
                }

        /* two items */
                .uilayout .col .layout:first-child:nth-last-child(2),
                .uilayout .col .layout:first-child:nth-last-child(2) ~ .layout {
                    width:50%;
                 height:100%;
                }



        /* three items */
                .uilayout .col .layout:first-child:nth-last-child(3),
                .uilayout .col .layout:first-child:nth-last-child(3) ~ .layout {
                    width:33.3333%;
                   height:100%;
                }

        /* four items */
                .uilayout .col .layout:first-child:nth-last-child(4),
                .uilayout .col .layout:first-child:nth-last-child(4) ~ .layout {
                    width: 25%;
                   height:100%;
                }

            /* five items */
                .uilayout .col .layout:first-child:nth-last-child(5),
                .uilayout .col .layout:first-child:nth-last-child(5) ~ .layout {
                    width: 20%;
                   height:100%;
                }
				
				
.row{
	height:100%;
	width:100%;
	display:block;
	
}

.row .layout{
	width:100%;
	display:block;
}
		/* one item */
                .uilayout .row .layout:first-child:nth-last-child(1) {
                    /* -or- li:only-child { */
					width:100%;
                    height:100%;
                  
                }

        /* two items */
                .uilayout .row .layout:first-child:nth-last-child(2),
                .uilayout .row .layout:first-child:nth-last-child(2) ~ .layout {
                    height:50%;
                 width:100%;
                }



        /* three items */
                .uilayout .row .layout:first-child:nth-last-child(3),
                .uilayout .row .layout:first-child:nth-last-child(3) ~ .layout {
                    height:33.3333%;
                   width:100%;
                }

        /* four items */
                .uilayout .row .layout:first-child:nth-last-child(4),
                .uilayout .row .layout:first-child:nth-last-child(4) ~ .layout {
                    height: 25%;
                   width:100%;
                }

            /* five items */
                .uilayout .row .layout:first-child:nth-last-child(5),
                .uilayout .row .layout:first-child:nth-last-child(5) ~ .layout {
                    height: 20%;
                   width:100%;
                }
				
				
@media only screen and (max-width:800px) {
	.col{
	height:100%;
	width:100%;
	display:block;
	
}
.layout{
	position:relative;
}
.col .layout{
	width:100%;
	display:block;
}
				/* one item */
                .uilayout .col .layout:first-child:nth-last-child(1) {
                    /* -or- li:only-child { */
                    width:100%;
                    height:100%;
                }

        /* two items */
                .uilayout .col .layout:first-child:nth-last-child(2),
                .uilayout .col .layout:first-child:nth-last-child(2) ~ .layout {
                    height:50%;
                    width:100%;
                }



        /* three items */
                .uilayout .col .layout:first-child:nth-last-child(3),
                .uilayout .col .layout:first-child:nth-last-child(3) ~ .layout {
                    height:33.3333%;
                   width:100%;
                }

        /* four items */
                .uilayout .col .layout:first-child:nth-last-child(4),
                .uilayout .col .layout:first-child:nth-last-child(4) ~ .layout {
                    height: 25%;
                   width:100%;
                }

            /* five items */
                .uilayout .col .layout:first-child:nth-last-child(5),
                .uilayout .col .layout:first-child:nth-last-child(5) ~ .layout {
                    height: 20%;
                   width:100%;
                }
}