.ratio { 
  position: relative; width: 100%; 
  & * { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
}
.ratio, .ratio-1x1 { padding-bottom: 100%; /* square */ }
.ratio.ratio-16x9 { padding-bottom: 56.25%; }
.ratio.ratio-4x3 { padding-bottom: 75%; /* old tv */ }
.ratio.ratio-21x9 { padding-bottom: 42.85714%; /* ultra-wide */ }

/* bg images */
.img-bg { display: block; position: relative; overflow: hidden; background-color:transparent; background-repeat:no-repeat; background-position: 50%; background-size: cover; }
.img-bg.contain { background-size: contain; }
.img-bg > a { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }

.img-bg.img-align-left { background-position-x: 0; }
.img-bg.img-align-right { background-position-x: 100%; }
.img-bg.img-align-top { background-position-y: 0; }
.img-bg-img-align-bottom { background-position-y: 100%; }

.img-bg, .img-bg.img-bg-1x1 { padding-bottom: 100%; }
.img-bg.img-bg-2x3 { padding-bottom: 150%; }
.img-bg.img-bg-3x2 { padding-bottom: 66.66% }
.img-bg.img-bg-3x4 { padding-bottom: 133.33%; }
.img-bg.img-bg-4x3 { padding-bottom: 75%; }
.img-bg.img-bg-5x4 { padding-bottom: 80%; }
.img-bg.img-bg-4x5 { padding-bottom: 125%; }
.img-bg.img-bg-5x7 { padding-bottom: 140% }
.img-bg.img-bg-7x5 { padding-bottom: 71.42857%; }
.img-bg.img-bg-16x9 { padding-bottom: 56.25% }
.img-bg.img-bg-21x9 { padding-bottom: 42.85714% }

@media(min-width: 575px) {
.img-bg.img-align-sm-left { background-position-x: 0; }
.img-bg.img-align-sm-right { background-position-x: 100%; }
.img-bg.img-align-sm-top { background-position-y: 0; }
.img-bg-img-align-sm-bottom { background-position-y: 100%; }
.img-bg.img-bg-sm-1x1 { padding-bottom: 100%; }
.img-bg.img-bg-sm-2x3 { padding-bottom: 150%; }
.img-bg.img-bg-sm-3x2 { padding-bottom: 66.66% }
.img-bg.img-bg-sm-3x4 { padding-bottom: 133.33%; }
.img-bg.img-bg-sm-4x3 { padding-bottom: 75%; }
.img-bg.img-bg-sm-5x4 { padding-bottom: 80%; }
.img-bg.img-bg-sm-4x5 { padding-bottom: 125%; }
.img-bg.img-bg-sm-5x7 { padding-bottom: 140% }
.img-bg.img-bg-sm-7x5 { padding-bottom: 71.42857%; }
.img-bg.img-bg-sm-16x9 { padding-bottom: 56.25% }
.img-bg.img-bg-sm-21x9 { padding-bottom: 42.85714% }
}

@media(min-width: 768px) {
.img-bg.img-align-md-left { background-position-x: 0; }
.img-bg.img-align-md-right { background-position-x: 100%; }
.img-bg.img-align-md-top { background-position-y: 0; }
.img-bg-img-align-md-bottom { background-position-y: 100%; }
.img-bg.img-bg-md-1x1 { padding-bottom: 100%; }
.img-bg.img-bg-md-2x3 { padding-bottom: 150%; }
.img-bg.img-bg-md-3x2 { padding-bottom: 66.66% }
.img-bg.img-bg-md-3x4 { padding-bottom: 133.33%; }
.img-bg.img-bg-md-4x3 { padding-bottom: 75%; }
.img-bg.img-bg-md-5x4 { padding-bottom: 80%; }
.img-bg.img-bg-md-4x5 { padding-bottom: 125%; }
.img-bg.img-bg-md-5x7 { padding-bottom: 140% }
.img-bg.img-bg-md-7x5 { padding-bottom: 71.42857%; }
.img-bg.img-bg-md-16x9 { padding-bottom: 56.25% }
.img-bg.img-bg-md-21x9 { padding-bottom: 42.85714% }
}

@media(min-width: 992px) {
.img-bg.img-align-lg-left { background-position-x: 0; }
.img-bg.img-align-lg-right { background-position-x: 100%; }
.img-bg.img-align-lg-top { background-position-y: 0; }
.img-bg-img-align-lg-bottom { background-position-y: 100%; }
.img-bg.img-bg-lg-1x1 { padding-bottom: 100%; }
.img-bg.img-bg-lg-2x3 { padding-bottom: 150%; }
.img-bg.img-bg-lg-3x2 { padding-bottom: 66.66% }
.img-bg.img-bg-lg-3x4 { padding-bottom: 133.33%; }
.img-bg.img-bg-lg-4x3 { padding-bottom: 75%; }
.img-bg.img-bg-lg-5x4 { padding-bottom: 80%; }
.img-bg.img-bg-lg-4x5 { padding-bottom: 125%; }
.img-bg.img-bg-lg-5x7 { padding-bottom: 140% }
.img-bg.img-bg-lg-7x5 { padding-bottom: 71.42857%; }
.img-bg.img-bg-lg-16x9 { padding-bottom: 56.25% }
.img-bg.img-bg-lg-21x9 { padding-bottom: 42.85714% }
}

@media(min-width: 1200px) {
.img-bg.img-align-xl-left { background-position-x: 0; }
.img-bg.img-align-xl-right { background-position-x: 100%; }
.img-bg.img-align-xl-top { background-position-y: 0; }
.img-bg-img-align-xl-bottom { background-position-y: 100%; }
.img-bg.img-bg-xl-1x1 { padding-bottom: 100%; }
.img-bg.img-bg-xl-2x3 { padding-bottom: 150%; }
.img-bg.img-bg-xl-3x2 { padding-bottom: 66.66% }
.img-bg.img-bg-xl-3x4 { padding-bottom: 133.33%; }
.img-bg.img-bg-xl-4x3 { padding-bottom: 75%; }
.img-bg.img-bg-xl-5x4 { padding-bottom: 80%; }
.img-bg.img-bg-xl-4x5 { padding-bottom: 125%; }
.img-bg.img-bg-xl-5x7 { padding-bottom: 140% }
.img-bg.img-bg-xl-7x5 { padding-bottom: 71.42857%; }
.img-bg.img-bg-xl-16x9 { padding-bottom: 56.25% }
.img-bg.img-bg-xl-21x9 { padding-bottom: 42.85714% }

}

/* CSS columns */
.css-col-2 p, .css-col-3 p, .css-xs-col-2 p, .css-xs-col-3 p, .css-sm-col-2 p, .css-sm-col-3 p, .css-md-col-2 p, .css-md-col-3 p { display: inline; margin-top: 0; margin-bottom: 1.75em; line-height: 1.75em;}
.css-col-2 p::after, .css-col-3 p::after, .css-xs-col-2 p::after, .css-xs-col-3 p::after, .css-sm-col-2 p::after, .css-sm-col-3 p::after, .css-md-col-2 p::after, .css-md-col-3 p::after { content:'\A\A'; white-space: pre; /* so it works in Chrome */ }
.css-col-2 li, .css-col-3 li, .css-xs-col-2 li, .css-xs-col-3 li, .css-sm-col-2 li, .css-sm-col-3 li, .css-md-col-2 li, .css-md-col-3 li { line-height: 1.25em; margin-top: 0; margin-bottom: 0.75em; }
.css-xxs-col-3 {  column-count: 3; column-gap: 0.75em;}
.css-xxs-col-2  {  column-count: 2;  column-gap: 0.75em;}
@media(min-width:575px) {
.css-xs-col-3 {  column-count: 3; }
.css-xs-col-2  {  column-count: 2;  }
}
@media (min-width: 768px) {
.css-col-3, .css-sm-col-3 {  column-count: 3; }
.css-col-2, .css-sm-col-2 {  column-count: 2;  }
}
@media (min-width: 992px) {
.css-col-3, .css-md-col-3 {  column-count: 3; }
.css-col-2, .css-md-col-2 {  column-count: 2;  }
}
@media(max-width: 767px) {
  .border-sm-none { border: none !important; }
}
@media(max-width: 575px) {
  .border-xs-none { border: none !important; }
}

/* Viewer Height */
.vh-100 { height: 100vh; }
.vh-75 { height: 75vh; }
.vh-50 { height: 50vh; }
.vh-25 { height: 25vh; }

/* Viewer Min-Height */
.vmh-100 { min-height: 100vh; }
.vmh-75 { min-height: 75vh; }
.vmh-50 { min-height: 50vh; }
.vmh-25 { min-height: 25vh; }