/*GLOBAL*/
.clearfix:before,.clearfix:after{content: " ";display: table;}.clearfix:after{clear: both;}
.container{max-width: 60rem;margin-left:auto;margin-right:auto;}
form input{border:none;border-radius:6px;margin-bottom:10px;padding:0 8px; text-indent:5px;}
form textarea{border:none;border-radius:6px;margin-bottom:10px;padding:.5rem; display:block;font-size:.9rem;min-width: 20rem;}
form button{border:none;border-radius:6px;margin-bottom:10px;padding:.5rem 1rem; cursor: pointer;}
form label{min-width: 8rem; display: inline-block;}
form .input-wrapper{display:block; margin-bottom:1rem;}
form select{border:none;border-radius:6px;padding: 0 .25rem;}

/*header*/
nav{text-align:center;}
nav ul li ul li{display:block;text-align:left;}
nav ul li ul li a{display:inline-block;border-top:none !important;border-bottom:none !important;}
nav ul li:hover > ul{visibility:visible;}
nav ul li ul.open{visibility:visible;}
nav ul li ul{visibility:hidden;position:absolute;z-index:99999;top:100%;left:0;}

/*hero*/
main.hero--on{position:relative;z-index:9;margin-top:22rem;}
main.hero--on aside{margin-top:4rem !important;}
.hero--banner{width:100%;height:25rem;background-size:cover;position:absolute;z-index:1;text-align:center;}
.hero--banner .logo{position:relative;top: 40%;transform: translateY(-50%);}

/*main*/
main{margin-top:2rem;margin-bottom:2rem;}

/*typography*/
h1{font-size:1.5rem;}
h2{font-size:1.3rem;}
h3{font-size:1.2rem;}
h4{font-size:1.1rem;}
h5,h6{font-size:1rem;}
small{font-size:.8rem;}

/*listing*/
body.listing main > section{background-color:#FFF;width:60%;}
body.listing main > section{float:left;}
body.listing main > section h1{font-size:1.5rem;display:block;padding:.75rem 1rem;text-align:center;margin:-1rem 1rem 0 1rem;}
body.listing main > section h1:first-letter{text-transform:uppercase;}
.listing--item--date{display:block;text-align:center;}
.listing--item--date span{display:inline-block;padding:.35rem .95rem;}
.listing--item h2{margin:1rem 0;line-height:2rem;font-size:2rem;text-align:center;}
.listing--item p{padding:.5rem 0;}
.paging{text-align:center;}.paging ul{padding:1rem;}.paging li{display:inline-block;padding:.5rem;}

/*aside*/
body.listing main > aside{width:35%;float:right;margin-top:1rem;}
.aside--widget{margin-bottom:1.5rem;padding-top:1rem;}
.aside--widget--inner{padding:1rem;}.aside--widget--inner p{padding:.5rem 0;}
.aside--widget h3{margin-left:-4px;width:85%;text-indent:1rem;padding:.35rem;font-weight:400;}

/*social links*/
.social--link{display:block;font-size:1.25rem;padding:.25rem;}
.social--link span{vertical-align:middle;text-align:center;display:inline-block;margin-right:1rem;}
.social--link span img{vertical-align:middle;}

/*page*/
body.page main > section{padding:1.5rem;}
body.page main > section > article > h1{font-size:1.5rem;padding-bottom:1rem;}
body.page .page--meta{padding:.5rem 0;font-size:.9rem;}
body.page main > section > article p{padding-bottom:1rem;}
body.page main > section > article ul,body.page main > section > article ol{margin:1rem 2rem;}
body.page main > section > article ul ul,body.page main > section > article ol ol{margin:0 2rem;}
body.page main > section > article ul{list-style:disc;}body.page main > section > article ol{list-style:decimal;}
body.page main a:hover{text-decoration:underline;}

/*featured post*/
aside .feat--post{margin-bottom:1rem;border-bottom:1px solid #f2f2f2;}
aside .feat--post--img{float:left; margin-right:.5rem;}

/*tables*/
table{width: 100%;}
table th{text-align:left; padding: .5rem 0;}
table td{padding: .5rem 0;}

@media (max-width: 960px) {
    nav{display:none;}
    main{margin-top:7rem;}
    body.listing main > section, body.listing main > aside{ float:none; width:80%; margin-left:auto; margin-right:auto;}

    /* Force tables to not be like tables anymore */
    table, table thead, table tbody, table th, table td, table tr{display: block;}
    /* Hide table headers (but not display: none;, for accessibility) */
    table thead tr{position: absolute;top: -9999px;left: -9999px;}
    /* Behave  like a "row" */
    table td {border: none;position: relative;padding-left: 33% !important;}
    /* Now like a table header */
    table td:before {position: absolute;top: 6px;left: 6px;width: 45%;padding-right: 10px;white-space: nowrap;content: attr(data-label); font-weight: bold;}
    /*table row seperation line*/
    table td:last-of-type:after{content: " "; height: 2px; background:#cbc7c7;width: 100%;position: absolute;top:98%;left: 0;}
}