.animate-expanding-images {
    position: relative;
    text-align: center
}

.animate-expanding-images .animate-expanding-images-inner {
    display: inline-block;
    position: relative;
    max-width: 46.875%;
    box-shadow:0px 18px 34px 0px rgba(160, 160, 160, 0.35)
}

.animate-expanding-images .animate-frame-image {
    position: relative;
    z-index: 30;
    pointer-events: none
}

.animate-expanding-images.animate-ie-specific .animate-frame-image {
    z-index: 10
}

.animate-expanding-images .animate-hero-image {
    position: absolute;
    height: 66%;
    width: 92%;
    left: 4%;
    top: 5%;
    z-index: 20;
    overflow: hidden;
    background-color: #f3f3f3
}

.animate-expanding-images .animate-hero-image .animate-hero-image-link {
    display: block;
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    height: 100%
}

.animate-expanding-images .animate-hero-image .animate-hero-image-link:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, .12);
    opacity: 0;
    -webkit-transition: opacity .4s cubic-bezier(.21, .74, .52, .87);
    -moz-transition: opacity .4s cubic-bezier(.21, .74, .52, .87);
    transition: opacity .4s cubic-bezier(.21, .74, .52, .87)
}

.animate-expanding-images .animate-hero-image .animate-hero-image-link:hover:after {
    opacity: 1
}

.animate-expanding-images .animate-hero-image .animate-hero-image-link:hover>.animate-hero-image-title {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease
}

.animate-expanding-images .animate-hero-image .animate-hero-image-link:hover img {
    -webkit-transform: translate3d(0, -30px, 0);
    -moz-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
    -webkit-transition: .35s cubic-bezier(.18, .87, .28, 1.01) 50ms;
    -moz-transition: .35s cubic-bezier(.18, .87, .28, 1.01) 50ms;
    transition: .35s cubic-bezier(.18, .87, .28, 1.01) 50ms
}

.animate-expanding-images .animate-hero-image img {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    will-change: transform
}

.animate-expanding-images .animate-hero-image-title {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: #fff;
    z-index: 300;
    padding: 17px 0;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    transition: all .35s ease;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}

.animate-expanding-images .animate-hero-image-title h3 {
    text-transform: none;
    font-size: 14px;
    font-weight: 500
}

.animate-expanding-images .animate-side-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 77%
}

.animate-expanding-images .animate-side-image-link {
    -webkit-transition: opacity .4s cubic-bezier(.21, .74, .52, .87);
    -moz-transition: opacity .4s cubic-bezier(.21, .74, .52, .87);
    transition: opacity .4s cubic-bezier(.21, .74, .52, .87)
}


.animate-expanding-images .animate-side-image {
    position: absolute;
    background-repeat: no-repeat;
    -webkit-transition: all 1s cubic-bezier(.21, .74, .52, .87);
    -moz-transition: all 1s cubic-bezier(.21, .74, .52, .87);
    transition: all 1s cubic-bezier(.21, .74, .52, .87);
}

.animate-expanding-images .animate-side-image:nth-of-type(1) {
    z-index: 7
}

.animate-expanding-images .animate-side-image:nth-of-type(2) {
    z-index: 6
}

.animate-expanding-images .animate-side-image:nth-of-type(3) {
    z-index: 5
}

.animate-expanding-images .animate-side-image:nth-of-type(4) {
    z-index: 4
}

.animate-expanding-images .animate-side-image:nth-of-type(5) {
    z-index: 3
}

.animate-expanding-images .animate-side-image:nth-of-type(6) {
    z-index: 2
}

.animate-expanding-images .animate-side-image:nth-of-type(7) {
    z-index: 1
}

.animate-expanding-images .animate-side-image:nth-of-type(8) {
    z-index: 0
}




.animate-expanding-images .animate-side-image.animate-side-image-1,
.animate-expanding-images .animate-side-image.animate-side-image-2,
.animate-expanding-images .animate-side-image.animate-side-image-3,
.animate-expanding-images .animate-side-image.animate-side-image-4

{
    width: 32%;
    padding-top: 23%
}

.animate-expanding-images .animate-side-image.animate-side-image-5,
.animate-expanding-images .animate-side-image.animate-side-image-6

{
    padding-top: 10.063%;
    width: 18.7%;

}


.animate-expanding-images .animate-side-image.animate-side-image-1 {
    top: 5%;
    left: -5%;
    width: 50%;
    z-index: 55;
    box-shadow: 0px 18px 34px 0px rgba(160, 160, 160, 0.35);
}

.animate-expanding-images .animate-side-image.animate-side-image-2 {
    bottom: -104%;
    right: 14%;
    z-index: 555;
    width: 50%;;
    box-shadow: 0px 18px 34px 0px rgba(160, 160, 160, 0.35);
}

.animate-expanding-images .animate-side-image.animate-side-image-3 {
    top: -68%;
    right: 0%;
    z-index: 555;
    width: 50%;
    box-shadow: 0px 18px 34px 0px rgba(160, 160, 160, 0.35);
    padding-top: 45%;
}

.animate-expanding-images .animate-side-image.animate-side-image-4 {
top: -45%;
left: -14%;
width: 48%;
box-shadow: 0px 18px 34px 0px rgba(160, 160, 160, 0.35);
padding-top: 11%;
}


.animate-expanding-images .animate-side-image.animate-side-image-5 {
    top: 41.2%;
    left: 3.5%;
    z-index:5;
}

.animate-expanding-images .animate-side-image.animate-side-image-6 {
    top: 41.2%;
    right: 3.5%;
    z-index:5;
}