// Converted Variables

// Custom Media Query Variables

/*

ASPECT RATIOS

*/

/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.

* Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
* Make sure there are no height and width attributes on the embedded media.
* Adapted from: https://github.com/suitcss/components-flex-embed
*
* Example:
*
* <div class="aspect-ratio aspect-ratio--16x9">
*  <iframe class="aspect-ratio--object"></iframe>
* </div>
*
* */

.aspect-ratio {

height: 0;
position: relative;

}

.aspect-ratio–16x9 { padding-bottom: 56.25%; } .aspect-ratio–9x16 { padding-bottom: 177.77%; }

.aspect-ratio–4x3 { padding-bottom: 75%; } .aspect-ratio–3x4 { padding-bottom: 133.33%; }

.aspect-ratio–6x4 { padding-bottom: 66.6%; } .aspect-ratio–4x6 { padding-bottom: 150%; }

.aspect-ratio–8x5 { padding-bottom: 62.5%; } .aspect-ratio–5x8 { padding-bottom: 160%; }

.aspect-ratio–7x5 { padding-bottom: 71.42%; } .aspect-ratio–5x7 { padding-bottom: 140%; }

.aspect-ratio–1x1 { padding-bottom: 100%; }

.aspect-ratio–object {

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;

}

@media #{$breakpoint-not-small}{

.aspect-ratio-ns {
  height: 0;
  position: relative;
}
.aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
.aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
.aspect-ratio--4x3-ns {  padding-bottom: 75%; }
.aspect-ratio--3x4-ns {  padding-bottom: 133.33%; }
.aspect-ratio--6x4-ns {  padding-bottom: 66.6%; }
.aspect-ratio--4x6-ns {  padding-bottom: 150%; }
.aspect-ratio--8x5-ns {  padding-bottom: 62.5%; }
.aspect-ratio--5x8-ns {  padding-bottom: 160%; }
.aspect-ratio--7x5-ns {  padding-bottom: 71.42%; }
.aspect-ratio--5x7-ns {  padding-bottom: 140%; }
.aspect-ratio--1x1-ns {  padding-bottom: 100%; }
.aspect-ratio--object-ns {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

}

@media #{$breakpoint-medium}{

.aspect-ratio-m {
  height: 0;
  position: relative;
}
.aspect-ratio--16x9-m { padding-bottom: 56.25%; }
.aspect-ratio--9x16-m { padding-bottom: 177.77%; }
.aspect-ratio--4x3-m {  padding-bottom: 75%; }
.aspect-ratio--3x4-m {  padding-bottom: 133.33%; }
.aspect-ratio--6x4-m {  padding-bottom: 66.6%; }
.aspect-ratio--4x6-m {  padding-bottom: 150%; }
.aspect-ratio--8x5-m {  padding-bottom: 62.5%; }
.aspect-ratio--5x8-m {  padding-bottom: 160%; }
.aspect-ratio--7x5-m {  padding-bottom: 71.42%; }
.aspect-ratio--5x7-m {  padding-bottom: 140%; }
.aspect-ratio--1x1-m {  padding-bottom: 100%; }
.aspect-ratio--object-m {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

}

@media #{$breakpoint-large}{

.aspect-ratio-l {
  height: 0;
  position: relative;
}
.aspect-ratio--16x9-l { padding-bottom: 56.25%; }
.aspect-ratio--9x16-l { padding-bottom: 177.77%; }
.aspect-ratio--4x3-l {  padding-bottom: 75%; }
.aspect-ratio--3x4-l {  padding-bottom: 133.33%; }
.aspect-ratio--6x4-l {  padding-bottom: 66.6%; }
.aspect-ratio--4x6-l {  padding-bottom: 150%; }
.aspect-ratio--8x5-l {  padding-bottom: 62.5%; }
.aspect-ratio--5x8-l {  padding-bottom: 160%; }
.aspect-ratio--7x5-l {  padding-bottom: 71.42%; }
.aspect-ratio--5x7-l {  padding-bottom: 140%; }
.aspect-ratio--1x1-l {  padding-bottom: 100%; }
.aspect-ratio--object-l {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

}