* {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
    overflow-x: hidden;
}

body {
    font: 300 16px/1.412 "Droid Sans", "Helvetica Neue Light","Helvetica Neue","Helvetica","Arial",sans-serif;
    color: #444;
    padding: 2em 0 9em 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

@media only screen and (max-width: 59.999em) {
    body {
        font-size: 14px;
    }
}

.wrap {
    max-width: 61.25em;
    margin: 0 auto;
    padding: 0 .3125em;  
    background: #fff;
}

@media only screen and (min-width: 60em) {

    main {
        float: left;
        width: 67.91836734693878%;
        border-right: 1px solid #f2f2f2;
        padding-right: 1em; 
    }

    main.wide {
        width: 100%;
        padding: 0;
        border: none;
    }

    .sidebar {
        float: right;
        width: 30.92783505154639%;
        margin-bottom: 1em;        
    }

}

@media only screen and (max-width: 45.499em) {

    .u-hidden\@sm, .u-hiddensm {
        display: none;
    }

    .wrap {
        padding: 0 1em;
    }

}

@media only screen and (min-width: 45.5em) and (max-width: 60.624em) {

    .u-hidden\@md, .u-hiddenmd {
        display: none;
    }

}

@media only screen and (min-width: 60.625em) {
    .u-hidden\@lg, .u-hiddenlg {
        display: none;
    }
}