div.matrix-holder{
	margin:0 auto;
    width:300px;
}

div.matrix-holder div.matrix-block{
	width:300px;
    height:300px;
    color:#fff;
}

div.matrix-holder div.matrix-block.double-h, div.matrix-holder div.matrix-block.double-w{
	height:600px;
    width:300px;
}

div.matrix-holder div.matrix-block:nth-child(1), div.matrix-holder div.matrix-block:nth-child(5), div.matrix-holder div.matrix-block:nth-child(9) {
    background-color:#EF357B;
}

div.matrix-holder div.matrix-block:nth-child(2), div.matrix-holder div.matrix-block:nth-child(7), div.matrix-holder div.matrix-block:nth-child(10) {
    background-color:#f3732e;
}

div.matrix-holder div.matrix-block:nth-child(3), div.matrix-holder div.matrix-block:nth-child(6), div.matrix-holder div.matrix-block:nth-child(11) {
    background-color:#F0514E;
}

div.matrix-holder div.matrix-block:nth-child(4), div.matrix-holder div.matrix-block:nth-child(8), div.matrix-holder div.matrix-block:nth-child(12) {
    background-color:#F68627;
}

div.matrix-holder div.matrix-block h2{
    font-family:avenir-light,proxima-nova,helvetica,arial,sans-serif;
    margin:0 0 0.3em 0;
    color:#fff;
    font-weight:300;
    font-size:1.8em;
    line-height:1em;
}

div.matrix-holder div.matrix-block h3{
    font-family:avenir-light,proxima-nova,helvetica,arial,sans-serif;
    margin:0 0 0.3em 0;
    color:#fff;
    font-weight:300;
    font-size:1.5em;
    line-height:1em;
}

div.matrix-holder div.matrix-block div.matrix-block-column{
    box-sizing:border-box;
    width:100%;
    height:100%;
    margin:0px!important;
    background-size:cover;
}

div.matrix-holder div.matrix-block.double-h div.matrix-block-column, div.matrix-holder div.matrix-block.double-w div.matrix-block-column{
    height:50%;
}

div.matrix-holder div.matrix-block div.matrix-block-column.text{
    padding:15px;
}

div.matrix-holder div.matrix-block div.matrix-block-column.text p{
    font-size:1.1em;
}

@media screen and (min-width: 667px) {
	
    div.matrix-holder{
    	width:636px;
    }
    
	div.matrix-holder div.matrix-block{
		width:212px;
		height:212px;
	}
	
	div.matrix-holder div.matrix-block.double-h{
		height:424px;
        width:212px;
	}
    
	div.matrix-holder div.matrix-block.double-w{
		width:424px;
        height:212px;
	}
    
    div.matrix-holder div.matrix-block.double-w div.matrix-block-column{
        width:50%;
        height:100%;
    }
    
    div.matrix-holder div.matrix-block div.matrix-block-column.text p{
        font-size:0.8em;
    }
    
    div.matrix-holder div.matrix-block h2{
        font-size:1.5em;
    }
	
}

@media screen and (min-width: 768px) {
	
    div.matrix-holder{
        width:699px;
    }
    
    div.matrix-holder{
        width:initial;
    }
    
	div.matrix-holder div.matrix-block{
		width:233px;
		height:233px;
	}
	
	div.matrix-holder div.matrix-block.double-h{
		height:466px;
        width:233px;
	}
	
	div.matrix-holder div.matrix-block.double-w{
		width:466px;
        height:233px;
	}
    
    div.matrix-holder div.matrix-block div.matrix-block-column.text p{
        font-size:0.9em;
    }
    
    div.matrix-holder div.matrix-block h2{
        font-size:1.6em;
    }
	
}

@media screen and (min-width: 1024px) {
	
    div.matrix-holder{
        width:1000px;
    }
    
	div.matrix-holder div.matrix-block{
		width:250px;
		height:250px;
	}
	
	div.matrix-holder div.matrix-block.double-h{
		height:500px;
        width:250px;
	}
	
	div.matrix-holder div.matrix-block.double-w{
		width:500px;
        height:250px;
	}
    
    div.matrix-holder div.matrix-block div.matrix-block-column.text p{
        font-size:0.95em;
    }
    
    div.matrix-holder div.matrix-block h2{
        font-size:1.75em;
    }
	
}