/*

TODO
- .section for homepage? replace with .homepage or .offset-b--mobile?

*/


/* section */
/*
.homepage section{
	margin-bottom: 2em}
.homepage section:first-child{
	margin-bottom: 0}
@media screen and (min-width: 29.938em) {
	.homepage section{
		margin-bottom: 0}
}
*/
/* DELETE
.tpl-home .section{
	margin-bottom: 3em}
@media screen and (min-width: 29.938em) {
	.tpl-home .section{
		margin-bottom: 0}
}
*/

/* block */
.block{
	margin: 0 0.625rem}
@media screen and (min-width: 22.5em) {
	.block{
		margin: 0 1.25rem}
}
@media screen and (min-width: 29.938em) {
	.block{
		margin: 0 1rem}
}
@media screen and (min-width: 48em) {
	.block{
		margin: 0 auto;
		max-width: 628px}	
}
@media screen and (min-width: 60em) {
	.block{
		max-width: 844px}
}
@media screen and (min-width: 64em) {
	.block{
		max-width: 952px}
}
@media screen and (min-width: 80em) {
	.block{
		max-width: 1060px}
}
@media screen and (min-width: 90em) {
	.block{
		max-width: 1266px}	
}

/* box */
.box{
	padding: 2rem 0}
.box--mobile {
	padding: 1rem 0 !important;
}
@media screen and (max-width: 29.938em) {
	.box--mobile{
		padding: 1rem 0 !important}
	.box--listed{
		padding: 0 !important;
		padding-bottom: 2rem !important}
}
@media screen and (min-width: 29.938em) {
	.box{
		padding: 2rem 1rem}
}
/*
.box{
	padding: 1rem 0}
@media screen and (min-width: 29.938em) {
	.box{
		padding: 1rem}
}
*/
@media screen and (min-width: 30em) {
	.box{
		padding: 2rem 1rem}
}

@media screen and (min-width: 48em) {
	.box{
		padding: 3rem 2rem}
}
@media screen and (min-width: 60em) {
	.box{
		padding: 3rem 1.25rem}
}
@media screen and (min-width: 64em) {
	.box{
		padding: 3rem 3.25rem}
}
@media screen and (min-width: 90em) {
	.box {
    	padding: 128px}
	.footer .box {
    	padding-right: 0}
}