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

html {
    height: 100%;
    font-size: 100%;
}

body {
    font-family: 'Open Sans';
    color: white;
    min-height: 100%;
}

.navbar {
    padding: 0.5rem;
    background-color: rgb(101,18,95);
}

.navbar > .logo {
    position: relative;
    left: 2rem;
}
.container {
    margin: 0 auto;
    max-width: 64rem;
}
@media (min-width: 640px) {
  html { font-size: 112%; }

     .column {
         float: left;
         padding-left: 1rem;
         padding-right: 1rem;
     }

     .column.full { width: 100%; }
     .column.two-thirds { width: 66.7%; }
     .column.half { width: 50%; }
     .column.third { width: 33.3%; }
     .column.fourth { width: 25%; }
     .column.flow-opposite { float: right; }
}

 @media (min-width: 1024px) {
   html { font-size: 120%; }
 }
 .clearfix::before,
.clearfix::after {
   content: " ";
   display: table;
}

.clearfix::after {
   clear: both;
}