* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.col {padding: 0 5%}
.row .row {margin: 0 -1.5em}
.row:before,.row:after,.cf:before,.cf:after{content:'';display:table}
.row:after,.cf:after{clear:both}
.row,.cf{zoom:1}

@media only screen {
.col {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}

a {
color: #06f;
}
h1 {
font-size: 1em;
}
h4 {
font-family: 'Open Sans', Arial, sans-serif;
font-size: .9em;
font-weight: normal;
color: #090;
}
h5 {
font-size: 1em;
}
h1, h4, h5 {
margin-top: 0;
}
h3, h4 {
margin-bottom: 0.5em;
}
p {
font-size: 0.8125em;
line-height: 1.5;
margin: 0 0 1.5em;
}
ul {margin:0}
code {
font-size: 1.2727em;
color: #777;
}
iframe {
border: 0;
overflow: hidden;
}
.container {
position: relative;
margin: 0 auto 0 auto;
max-width: 960px;
padding: 0;
background: none;
z-index: 0;
}
.footer {
padding-top: 1.5em;
}
.desc {
font-family: 'Open Sans', Arial, sans-serif;
font-size: .9em;
color: #555;
}
.intro {
border-bottom: 1px dotted #bbb;
padding-bottom: 0;
}
.social {
border-top: 1px dotted #bbb;
padding-top: 1.5em;
}
.footer {
border-top: 1px dotted #aaa;
}
.content {
margin-bottom: 1.5em;
}
@media only screen and (min-width: 34em) { /*544px*/
.feature, .info {width: 50%}
.container {padding: 1em 0}
p, ul {font-size: 0.875em}
}
@media only screen and (min-width: 54em) { /*864px*/
.sidebar {display: none;width:0%}
.info {width: 100%  }
.content {
width: 100%;
border: none;
margin-bottom: 0;
}
.info:first-child {border: none}
}
@media only screen and (min-width: 76em) { /*1216px*/
.info {width: 50%}
.info:first-child {border-right: 1px dotted #aaa}
}