.hero::after {
  clear: both;
  content: "";
  display: block; }
@media only screen and (min-width: 0px) {
  .hero .terminal {
    display: none; } }
@media only screen and (min-width: 850px) {
  .hero .terminal {
    display: block;
    width: calc(50% - 60px);
    float: left;
    margin-left: 40px;
    margin-left: calc(8.33333% - 43.33333px + 80px); } }
@media only screen and (min-width: 0px) {
  .hero .title {
    width: calc(100% - 80px);
    float: left;
    margin-left: 40px; } }
@media only screen and (min-width: 500px) {
  .hero .title {
    margin-top: 0;
    width: calc(100% - 80px);
    float: left;
    margin-left: 40px; } }
@media only screen and (min-width: 850px) {
  .hero .title {
    margin-top: 45px;
    width: calc(33.33333% - 53.33333px);
    float: left;
    margin-left: 40px; } }

.highlights::after, .features::after {
  clear: both;
  content: "";
  display: block; }
@media only screen and (min-width: 0px) {
  .highlights .highlight, .highlights .feature, .features .highlight, .features .feature {
    width: calc(100% - 80px);
    float: left;
    margin-left: 40px; } }
@media only screen and (min-width: 500px) {
  .highlights .highlight, .highlights .feature, .features .highlight, .features .feature {
    width: calc(50% - 60px);
    float: left;
    margin-left: 40px;
    height: 185px; } }
@media only screen and (min-width: 850px) {
  .highlights .highlight, .highlights .feature, .features .highlight, .features .feature {
    width: calc(25% - 50px);
    float: left;
    margin-left: 40px; } }

.footer::after {
  clear: both;
  content: "";
  display: block; }
.footer .copyright {
  width: calc(100% - 80px);
  float: left;
  margin-left: 40px; }