/************************************
Table of Contents 
************************************/

/*
- Shadows Outside
- Shadows Inside
- Blurs
*/


/****** Shadows Outside ******/
 
.shadow-xs-bottom {
    box-shadow: 0 1px 2px rgba(16,40,34,.05)!important;
}
.shadow-xs-top {
    box-shadow: 0 -1px 2px rgba(16,40,34,.05)!important;
}
.shadow-sm-bottom {
    box-shadow: 0 1px 3px rgba(16,40,34,.1)!important;
}
.shadow-sm-top {
    box-shadow: 0 -1px 3px rgba(16,40,34,.1)!important;
}
.shadow-md-bottom {
    box-shadow: 0 4px 8px -2px rgba(16,40,34,.1)!important;
}
.shadow-md-top {
    box-shadow: 0 -4px 8px -2px rgba(16,40,34,.1)!important;
}
.shadow-lg-bottom {
    box-shadow: 0 12px 16px -4px rgba(16,40,34,.1)!important;
}
.shadow-lg-top {
    box-shadow: 0 -12px 16px -4px rgba(16,40,34,.1)!important;
}
.shadow-xl-bottom {
    box-shadow: 0 20px 24px -4px rgba(16,40,34,.1)!important;
}
.shadow-xl-top {
    box-shadow: 0 -20px 24px -4px rgba(16,40,34,.1)!important;
}
.shadow-2xl-bottom {
    box-shadow: 0 24px 48px -12px rgba(16,40,34,.18)!important;
}
.shadow-2xl-top {
    box-shadow: 0 -24px 48px -12px rgba(16,40,34,.18)!important;
}
.shadow-3xl-bottom {
    box-shadow: 0 32px 64px -12px rgba(16,40,34,.18)!important;
}
.shadow-3xl-top {
    box-shadow: 0 -32px 64px -12px rgba(16,40,34,.18)!important;
}


/****** Shadows Inside ******/
 
.shadow-xs-bottom-inset {
    box-shadow: inset 0 1px 2px rgba(16,40,34,.05)!important;
}
.shadow-xs-top-inset {
    box-shadow: inset 0 -1px 2px rgba(16,40,34,.05)!important;
}
.shadow-sm-bottom-inset {
    box-shadow: inset 0 1px 3px rgba(16,40,34,.1)!important;
}
.shadow-sm-top-inset {
    box-shadow: inset 0 -1px 3px rgba(16,40,34,.1)!important;
}
.shadow-md-bottom-inset {
    box-shadow: inset 0 4px 8px -2px rgba(16,40,34,.1)!important;
}
.shadow-md-top-inset {
    box-shadow: inset 0 -4px 8px -2px rgba(16,40,34,.1)!important;
}
.shadow-lg-bottom-inset {
    box-shadow: inset 0 12px 16px -4px rgba(16,40,34,.1)!important;
}
.shadow-lg-top-inset {
    box-shadow: inset 0 -12px 16px -4px rgba(16,40,34,.1)!important;
}
.shadow-xl-bottom-inset {
    box-shadow: inset 0 20px 24px -4px rgba(16,40,34,.1)!important;
}
.shadow-xl-top-inset {
    box-shadow: inset 0 -20px 24px -4px rgba(16,40,34,.1)!important;
}
.shadow-2xl-bottom-inset {
    box-shadow: inset 0 24px 48px -12px rgba(16,40,34,.18)!important;
}
.shadow-2xl-top-inset {
    box-shadow: inset 0 -24px 48px -12px rgba(16,40,34,.18)!important;
}
.shadow-3xl-bottom-inset {
    box-shadow: inset 0 32px 64px -12px rgba(16,40,34,.18)!important;
}
.shadow-3xl-top-inset {
    box-shadow: inset 0 -32px 64px -12px rgba(16,40,34,.18)!important;
}


/****** Blurs ******/
/* Make sure to update the background-image in the blur-bg to whatever needs to the image that needs to be blurred  */

.blur-container {
    position: relative;
    overflow: hidden;
}
.blur-bg {
  background-image: url('../../img/sampleimagery/photo-sample-airport.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.blur-fg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.blur-sm {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}
.blur-md {
  filter: blur(16px);
  -webkit-filter: blur(16px);
}
.blur-lg {
  filter: blur(24px);
  -webkit-filter: blur(24px);
}
.blur-xl {
  filter: blur(40px);
  -webkit-filter: blur(40px);
}