/*===========================================
* RESPONSIVE IMAGES
* Author: Hamish Gray - hamishjgray@gmail.com
*
* xxxl: 1200px;
* xxl:  970px;
* xl:   800px;
* lg:   650px;
* md:   450px;
* sm:   330px;
*
*-----------------------------------------*/



/*========================================
*  Background image elements for easy image cropping
*========================================*/

.img {
  display: block;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.img:before {
  content: '';
  display: block;
  width: 100%;
}

.img--2-3:before    { padding-top: 150%; }
.img--3-4:before    { padding-top: 133.33333333333%; }
.img--1-1:before    { padding-top: 100%; }
.img--4-3:before    { padding-top: 75%; }
.img--3-2:before    { padding-top: 66.666666666667%; }
.img--16-9:before   { padding-top: 56.25%; }
.img--21-9:before   { padding-top: 42.8571429%; }

@media (min-width: 330px){
  .img--sm-2-3:before    { padding-top: 150%; }
  .img--sm-3-4:before    { padding-top: 133.33333333333%; }
  .img--sm-1-1:before    { padding-top: 100%; }
  .img--sm-4-3:before    { padding-top: 75%; }
  .img--sm-3-2:before    { padding-top: 66.666666666667%; }
  .img--sm-16-9:before   { padding-top: 56.25%; }
  .img--sm-21-9:before   { padding-top: 42.8571429%; }
}

@media (min-width: 450px){
  .img--md-2-3:before    { padding-top: 150%; }
  .img--md-3-4:before    { padding-top: 133.33333333333%; }
  .img--md-1-1:before    { padding-top: 100%; }
  .img--md-4-3:before    { padding-top: 75%; }
  .img--md-3-2:before    { padding-top: 66.666666666667%; }
  .img--md-16-9:before   { padding-top: 56.25%; }
  .img--md-21-9:before   { padding-top: 42.8571429%; }
}

@media (min-width: 650px){
  .img--lg-2-3:before    { padding-top: 150%; }
  .img--lg-3-4:before    { padding-top: 133.33333333333%; }
  .img--lg-1-1:before    { padding-top: 100%; }
  .img--lg-4-3:before    { padding-top: 75%; }
  .img--lg-3-2:before    { padding-top: 66.666666666667%; }
  .img--lg-16-9:before   { padding-top: 56.25%; }
  .img--lg-21-9:before   { padding-top: 42.8571429%; }
}

@media (min-width: 800px){
  .img--xl-2-3:before    { padding-top: 150%; }
  .img--xl-3-4:before    { padding-top: 133.33333333333%; }
  .img--xl-1-1:before    { padding-top: 100%; }
  .img--xl-4-3:before    { padding-top: 75%; }
  .img--xl-3-2:before    { padding-top: 66.666666666667%; }
  .img--xl-16-9:before   { padding-top: 56.25%; }
  .img--xl-21-9:before   { padding-top: 42.8571429%; }
}

@media (min-width: 970px){
  .img--xxl-2-3:before    { padding-top: 150%; }
  .img--xxl-3-4:before    { padding-top: 133.33333333333%; }
  .img--xxl-1-1:before    { padding-top: 100%; }
  .img--xxl-4-3:before    { padding-top: 75%; }
  .img--xxl-3-2:before    { padding-top: 66.666666666667%; }
  .img--xxl-16-9:before   { padding-top: 56.25%; }
  .img--xxl-21-9:before   { padding-top: 42.8571429%; }
}