/**
 * @file
 * Styles are organized using the SMACSS technique. @see http://smacss.com/book/
 *
 * When you turn on CSS aggregation at admin/config/development/performance, all
 * of these @include files will be combined into a single file.
 */

/**
 * Column widths
 */
.half-width,
.third-width,
.quarter-width,
.quarter-half-width {
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

@media all and (min-width: 480px) {
  .half-width,
  .third-width,
  .quarter-width,
  .quarter-half-width {
    width: 50%;
    float: left;
  }
  
  /* Max-width items */
  .max-width-33 {
    max-width: 33%;
  }
  
  .max-width-40 {
    max-width: 40%;
  }
  
  .max-width-50 {
    max-width: 50%;
  }
  
  .max-width-60 {
    max-width: 60%;
  }
}
@media (min-width: 640px) {
  .third-width,
  .quarter-width {
    width: 33.33333%;
  }
}

@media (min-width: 800px) {
  .quarter-half-width {
    width: 25%;
  }
}

@media (min-width: 930px) {
  .quarter-width {
    width: 25%;
  }
}

/******************************************************************************************************************************//*
* Responsive grid items
********************************************************************************************************************************/

.grid-item,
.views-row-grid {
  padding: 1em 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.grid-item.three,
.views-row-grid.three {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media (min-width: 400px) {
  .grid-item,
  .views-row-grid {
    width: 50%;
    float: left;
    padding-left: 2%;
    padding-right: 2%;
  }
  .grid-item.three,
  .views-row-grid.three {
    width: 50%;
    float: left;
    padding: 1em;
  }
}
@media (min-width: 640px) {
  .grid-item,
  .views-row-grid {
    width: 33.33333%;
  }
  .grid-item.three,
  .views-row-grid.three {
    width: 33.33333%;
  }
  .grid-item.three.views-row-4, .grid-item.three.views-row-7,
  .views-row-grid.three.views-row-4,
  .views-row-grid.three.views-row-7 {
    clear: both;
  }
}

@media (min-width: 800px) {
  .no-sidebars .grid-item, .no-sidebars
  .views-row-grid {
    width: 25%;
  }
}
@media (min-width: 1320px) {
  .two-sidebars .grid-item, .two-sidebars
  .views-row-grid {
    width: 33.33333%;
  }
  .one-sidebar .grid-item, .one-sidebar
  .views-row-grid {
    width: 25%;
  }
  .no-sidebars .grid-item, .no-sidebars
  .views-row-grid {
    width: 20%;
  }
  .grid-item.four,
  .views-row-grid.four {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 25%;
    float: left;
  }
  .grid-item.four.views-row-5, .grid-item.four.views-row-9,
  .views-row-grid.four.views-row-5,
  .views-row-grid.four.views-row-9 {
    clear: both;
  }
}