/* Mobile First, Default */
.column {width: 100%;}
.row {width: 100%;}

/* Animate on Resize */
.row, .column {
  -webkit-transition: all 0.5s ease;  /* Safari and Chrome */
  -moz-transition: all 0.5s ease;     /* Firefox */
  -ms-transition: all 0.5s ease;      /* IE 9 */
  -o-transition: all 0.5s ease;       /* Opera */
  transition: all 0.5s ease;
}

/* mobile up */
@media only screen and (min-width: 768px) {
  .triplet .column, .column {float: left;}
  .column.full {width: 100%;}
  .row .column.one-third {width: 33.3%;}
  .row .column.two-thirds {width: 66.6%;}
}

/* small tablets */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .triplet .column {width: 33.3%;}
  .column {width: 50%;}
  .column.full {width: 100%;}
  .column.half {width: 50%;}
}

/* tablet */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
  .column {width: 33.3%;}
  .triplet .column {width: 33.3%;}
  .column.full {width: 100%;}
  .column.half {width: 50%;}
}

/* desktops */
@media only screen and (min-width: 1200px) {
  .column {width: 25%;}
  .triplet .column {width: 33.3%;}
  .column.full {width: 100%;}
  .column.half {width: 50%;}
}

@media only screen and (min-width: 1450px) {
  #page {
    /*max-width: 1450px;*/
    max-width: 100%;
    margin: auto;
  }
  .triplet .column {width: 33.3%;}
}

/* Box Aspect Ratios */
.box{
  position: relative;
  width: 100%;   /* desired width */
}
.box:before{
  content: "";
  display: block;
  padding-top: 100%;  /* initial ratio of 1:1*/
}
.content{
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.ratio2_1:before{padding-top: 50%;}
.ratio1_2:before{padding-top: 200%;}
.ratio4_3:before{padding-top: 75%;}
.ratio16_9:before{padding-top: 56.25%;}