/*  COLUMN SETUP  */
.col {
	display: block;
	float: left;
	padding: 10px 0 10px 20px;
    box-sizing: border-box;
}

.filter .col {
	padding: 10px 0 10px 10px;
}

.col:first-child { padding-left: 0; }


/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%; 
}
.span_2_of_3 {
    width: 66.66%; 
}
.span_1_of_3 {
    width: 33.33%; 
}

/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 75%;
}
.span_2_of_4 {
	width: 50%;
}
.span_1_of_4 {
	width: 25%;
}

/* hlavni kostra */
#left-column {
    width: 100%;
    padding: 0 0 20px 0;
} 

#main-column {
    width: 100%;
    padding: 0;
}

#main-column > div > .span_2_of_3 {
    width: 100%;
    padding: 0 0 20px 0;
}

#main-column > div > .span_1_of_3 {
    width: 100%;
    padding: 0;
}

@media only screen and (min-width: 768px) {

    #left-column {
        width: 25%;
        padding: 0;
    } 

    #main-column {
        width: 75%;
        padding: 0 0 0 20px;
    }

    #main-column > div > .span_1_of_3 {
        width: 268px;
    }
}

@media only screen and (min-width: 1220px) {

    #main-column > div > .span_2_of_3 {
        width: 66.66%;
        padding: 0;
    }

    #main-column > div > .span_1_of_3 {
        width: 33.33%;
        padding: 0 0 0 20px;
    }
}


@media only screen and (max-width: 900px) {
	.recommendation > div > .span_1_of_4 { width: 50%; }
    .recommendation > div > .span_1_of_4:nth-child(2n+1) {padding-left: 0;}
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col { padding: 10px 0; }
    .filter .col { padding: 5px 0; }

    .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }

    .recommendation > div > .span_1_of_4 { width: 100%; }
}