/* BLOCKS
================================================== */

.blocks {
	max-width: 1290px;
	margin: auto
}
.blocks .row > a {
	height: 0;
	display: block;
	margin-bottom: 4%;
	position: relative;
	padding-top: 22%
}
.csscalc .blocks .row > a { 
	padding-top: calc(100% - 30px); 
}
/*.blocks .row > * + div {
	padding: 20px 30px;
    border: 1px solid #EBEBEB;
}*/
.blocks .row > * + div > p{
    font-family: 'DINNextLTPro-Medium';
    font-size: 2.2rem;
    line-height: 3rem;
    letter-spacing: -.01em;
}
.blocks .row > a header {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.05);
    display: block;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    padding: 20px;
}
.blocks .row > a:hover header {
	background: rgba(0,0,0,.5);
}
.blocks .row > a header h1 {
	justify-content: center;
    display: block;
    display: flex;
    font-size: 4rem;
    line-height: 5rem;
    font-family: 'DINNextLTPro-Medium';
    color: white;
    text-align: center;
}
.blocks .row > a header span {
	font-family: 'DINNextLTPro-Regular';
	color: white;
	font-size: 1.8rem;
    line-height:normal;
}
.csscalc .blocks .twelve.columns.logo-soup {
	padding-bottom: 0;
	margin-bottom: 60px;
	width: calc(100% + 3%);
	margin-left: -2%;
	padding: 30px 15px 30px 25px;
}
@media (max-width: 750px) {
	.blocks .logo-soup .two.columns {
		width: 29.333%;
		margin: 2%
	}
	.blocks section.logo-soup {
		margin-left: -30px;
	    margin-right: -30px;
    }
}

.blocks .row > a header h1 img {
	max-width: 100%;
	height: 100%
}
.blocks .byline {
    font-family: 'DINNextLTPro-Medium';
    color: #7E7E85;
    font-size: 1.6rem;
    letter-spacing: .08em;
    display: block;
    line-height: 2rem;
}

.blocks .one-fifth.column  				{ width: 48%; margin: 4%}
.csscalc .blocks .one-fifth.column      { width: calc(50% - 30px); margin: 15px}

@media (min-width: 750px) {
	
	.csscalc .blocks .row > a { 
		padding-top: calc(100% * 6 / 12 - 60px); 
	}
	section.blocks {
	    padding: 60px 0px 60px 15px;
	    width: calc(100% - 30px);
	}

	.blocks .column,
  	.blocks .columns {
    	margin: 2%; 
    }
	.csscalc .blocks .column,
	.csscalc .blocks .columns {
		margin: 15px; 
	}

	.blocks .one.column,
	.blocks .one.columns                    { width: 4.66666666667%; }
	.csscalc .blocks .one.column,
	.csscalc .blocks .one.columns           { width: calc(100% * 1 / 12 - 30px); }
	
	.blocks .two.columns                    { width: 13.3333333333%; }
	.csscalc .blocks .two.columns           { width: calc(100% * 2 / 12 - 30px); }
	
	.blocks .three.columns                  { width: 22%;            }
	.csscalc .blocks .three.columns         { width: calc(100% * 3 / 12 - 30px); }
	
	.blocks .four.columns                   { width: 30.6666666667%; }
	.csscalc .blocks .four.columns          { width: calc(100% * 4 / 12 - 30px); }
	
	.blocks .five.columns                   { width: 39.3333333333%; }
	.csscalc .blocks .five.columns          { width: calc(100% * 5 / 12 - 30px); }
	
	.blocks .six.columns                    { width: 48%;            }
	.csscalc .blocks .six.columns           { width: calc(100% * 6 / 12 - 30px); }
	
	.blocks .seven.columns                  { width: 56.6666666667%; }
	.csscalc .blocks .seven.columns         { width: calc(100% * 7 / 12 - 30px); }
	
	.blocks .eight.columns                  { width: 65.3333333333%; }
	.csscalc .blocks .eight.columns         { width: calc(100% * 8 / 12 - 30px); }
	
	.blocks .nine.columns                   { width: 74.0%;          }
	.csscalc .blocks .nine.columns          { width: calc(100% * 9 / 12 - 30px); }
	
	.blocks .ten.columns                    { width: 82.6666666667%; }
	.csscalc .blocks .ten.columns           { width: calc(100% * 10 / 12 - 30px); }
	
	.blocks .eleven.columns                 { width: 91.3333333333%; }
	.csscalc .blocks .eleven.columns        { width: calc(100% * 11 / 12 - 30px); }
	
	.blocks .twelve.columns                 { width: 96%;}
	.csscalc .blocks .twelve.columns        { width: calc(100% - 30px);}
	
	
		
	
	.blocks .two-thirds.column,
	.blocks .one-half.column,
	.blocks .one-third.column               { width: 48%; }
	
	.blocks .one-fifth.column  				{ width: 16.8%;}
	
	
	.csscalc .blocks .two-thirds.column,
	.csscalc .blocks .one-half.column,
	.csscalc .blocks .one-third.column      { width: calc(50% - 30px); }
	
	.csscalc .blocks .one-fifth.column      { width: calc(100% * 2.4 / 12 - 30px); }

	
	.blocks .one.column              		{ width: 96%;}
	.csscalc .blocks .one.column     		{ width: calc(100% - 30px);}
	
	
	.blocks .alt.row .one-third.column      { width: 48%; }
	.csscalc .alt.row .blocks 
	.one-third.column      					{ width: calc(50% - 30px); }
	
	.blocks .alt.row .two-thirds.column,
	.blocks .alt.row .one-half.column,
	.blocks .alt.row .one.column              { width: 96%;}
	
	
	.csscalc .blocks .alt.row .two-thirds.column
	.csscalc .blocks .alt.row .one-half.column,
	.csscalc .blocks .alt.row .one.column     { width: calc(100% - 30px);}
	
}

@media (min-width: 1000px) {
	
	.csscalc .blocks .row > a { 
		padding-top: calc(100% * 4 / 12 - 60px); 
	}
	
	.blocks .one-third.column               { width: 30.6666666667%; }
	.csscalc .blocks .one-third.column      { width: calc(100% * 4 / 12 - 30px); }
	
	.blocks .two-thirds.column              { width: 65.3333333333%; }
	.csscalc .blocks .two-thirds.column     { width: calc(100% * 8 / 12 - 30px); }
	
	.blocks .one-half.column                { width: 48%;            }
	.csscalc .blocks .one-half.column       { width: calc(50% - 30px); }
	
	.blocks .one.column              { width: 96%;}
	.csscalc .blocks .one.column     { width: calc(100% - 30px);}

	
}