/* ==================================================
main root elements
====================================================*/
*{
box-sizing: border-box;
}

*::after,*::before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0;
margin:0;
}

:root{ }  

html{
padding:0;
margin:0;
font-size: 16px;
font-family: sans-serif;
line-height: 1.5;
width:100%;
height: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}

body{
padding:0;
margin:0;
font-size: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height:inherit;
width:100%;
height: 100%;
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#page{
	width:100%;
	float:none;
	clear:both;
	position: relative;
	height: 100%;
	display: block;

}

/* ==================================================
html tags
====================================================*/
a{
text-decoration:none
}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{
display:block
}

img{max-width:100%; height:auto;}

/* ==================================================
core page layout
====================================================*/
#header,
#masthead,
#nav,
#main,
#content,
#footer,
#colophon{
width:100% !important;
display: grid;
height:auto;
float:left;
clear:both;
} 

#content{
grid-template-columns: 30% 70%; 
grid-template-rows: auto;
}

#content #primary-post{
order: 2;
min-height: 70vh;
}

#content #secondary{
order: 1;
padding:2rem 1rem 0 0;
}

/* full width */

#content.fullwidth {
grid-template-columns: 100%; 
grid-template-rows: auto;
}

#content.fullwidth #primary-post{
order: 1;
min-height: 70vh;
}

#content.fullwidth #secondary{
display:none;
}



.block{
width:100%;
display: block;
clear:both;
float:none;
margin:auto;
padding:0; 
max-width: 75rem;
}

.row{
width:100%;
margin:0;
float:left;
display: block;
clear:both; 
}

.row.fullwidth, .fullwidth{

}



.col2{
width:50%;
float:left;
display: inline-block;
clear:none;
}

.col3{
width:33.333333%;
float:left;
display: inline-block;
clear:none;
}

.col4{
width:25%;
float:left;
display: inline-block;
clear:none;
}

 

/* ==================================================
header
====================================================*/
#header{
}


/* ==================================================
nav
====================================================*/
#nav{
}

 

/* ==================================================
main content area
====================================================*/
#main{
}

  

/* ==================================================
footer 
====================================================*/
#footer{
}
 


/* hacks */
.hide-on-mobile{
	display: block !important;
}
.show-on-mobile{
	display:none !important;
}

.hide{
	display: none !important;
}

/* ==================================================
@media (big)
====================================================*/
@media only screen and (min-width: 70rem) {
}


/* ==================================================
@media (small)
====================================================*/
@media only screen and (max-width: 70rem) {
	.block,.row, .row.fullwidth, .fullwidth, .col2, .col3, .col4, .sidebar, aside, .post, article{
	width:100% !important;
	float:left !important;
	display: block !important;
	clear:both !important;
	}

	#content{
	display: grid;
	grid-template-columns: 100%; 
	grid-template-rows: auto;
	}
	#content article{
	order: 1 !important;
	}
	
	#content aside{
	order: 2 !important;
	}

	.card.sbcard { 
	    width: 100% !important;
	}

	/* hacks */
.hide-on-mobile{
	display: none!important;
}
.show-on-mobile{
	display:block !important;
}


 

}