* {
   box-sizing: border-box;
 }

body {
  background: #FAFAFA url('../images/page.png');
  background-color: ccccff;
}

/* Create three equal columns that floats next to each other */

.hdr1 {
  background: #FAFAFA url('../images/page.png');

}

.ftr1 {
  background-color: black;
}


.row {
  width: 100%
}

.column-left {
    float: left;
    background: #FAFAFA url('../images/page.png');
    width: 15%;
}

.column-mid {
    float: left;
    background: #FAFAFA url('../images/page.png');
    padding-left: 10px;
    padding-right: 10px;
    width: 70%;
    height: 100%;
}

.column-right {
    float: left;
    background: #FAFAFA url('../images/page.png');
    width: 15%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 660px) {
    .column {
        width: 100%;
        background: #FAFAFA url('../images/page.png');
    }
}