.advanced_addons_flip_box {
    position: relative;
    transform-style: preserve-3d;
    transition: all .5s ease;
    height: 300px;
    perspective: 700px;
}

.advanced_addons_flip_box_front,
.advanced_addons_flip_box_back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition-duration: .5s;
    transition-property: all;
    transition-timing-function: ease;
}

.advanced_addons_flip_box.aae-flip-top:hover .advanced_addons_flip_box_front {
    transform: rotateX(180deg);
}

.advanced_addons_flip_box.type-1 .advanced_addons_flip_box_front {
    background: #212121;
    z-index: 9;
}

.advanced_addons_flip_box.type-1 h3 {
    margin-bottom: 0;
    padding: 15px 0 8px 0;
}

.advanced_addons_flip_box.type-1 .advanced_addons_flip_box_front h3 {
    color: #fff;
}

.advanced_addons_flip_box.aae-flip-top .advanced_addons_flip_box_back {
    transform: rotateX(-180deg);
}

.advanced_addons_flip_box.type-1 i {
    font-size: 36px;
}

.advanced_addons_flip_box.type-1 .advanced_addons_flip_box_front i {
    color: #ffffff;
}

.advanced_addons_flip_box.type-1 p {
    margin-bottom: 0;
    font-size: 14px;
    letter-spacing: 1px;
}

.advanced_addons_flip_box.aae-flip-top:hover .advanced_addons_flip_box_back {
    transform: rotateX(0deg);
}

.advanced_addons_flip_box_back {
    background: #ffffff;
}

/*-----------------------------------------
    Flip Right
-----------------------------------------*/
.advanced_addons_flip_box.aae-flip-right .advanced_addons_flip_box_back {
    transform: rotateY(-180deg);
}

.advanced_addons_flip_box.aae-flip-right:hover .advanced_addons_flip_box_back {
    transform: rotateY(0deg);
}

.advanced_addons_flip_box.aae-flip-right:hover .advanced_addons_flip_box_front {
    transform: rotateY(180deg);
}

/*-----------------------------------------
    // Flip Left
-----------------------------------------*/
.advanced_addons_flip_box.aae-flip-left .advanced_addons_flip_box_back {
    transform: rotateY(180deg);
}

.advanced_addons_flip_box.aae-flip-left:hover .advanced_addons_flip_box_back {
    transform: rotateY(0deg);
}

.advanced_addons_flip_box.aae-flip-left:hover .advanced_addons_flip_box_front {
    transform: rotateY(-180deg);
}

/*----------------------------------------------

----------------------------------------------*/
.advanced_addons_flip_box.aae-flip-bottom .advanced_addons_flip_box_back {
    transform: rotateX(180deg);
}

.advanced_addons_flip_box.aae-flip-bottom:hover .advanced_addons_flip_box_back {
    transform: rotateX(0deg);
}

.advanced_addons_flip_box.aae-flip-bottom:hover .advanced_addons_flip_box_front {
    transform: rotateX(-180deg);
}

/*------------------------------------------

------------------------------------------*/

.advanced_addons_flip_box.aae-fadeIn .advanced_addons_flip_box_back {
    opacity: 0;
    visibility: visible;
}

.advanced_addons_flip_box.aae-fadeIn:hover .advanced_addons_flip_box_front {
    visibility: hidden;
    opacity: 0;
}

.advanced_addons_flip_box.aae-fadeIn:hover .advanced_addons_flip_box_back {
    visibility: visible;
    opacity: 1;
}

/*-----------------------------------------
-----------------------------------------*/
.advanced_addons_flip_box.aae-zoomIn .advanced_addons_flip_box_back {
    transform: scale(.75);
    visibility: hidden;
    opacity: 0;
}

.advanced_addons_flip_box.aae-zoomIn:hover .advanced_addons_flip_box_back {
    transform: scale(1);
    visibility: visible;
    opacity: 1;
}

.advanced_addons_flip_box.aae-zoomIn:hover .advanced_addons_flip_box_front {
    transform: scale(.75);
    visibility: hidden;
    opacity: 0;
}

/*---------------------------------------
    // ZoomOut
---------------------------------------*/
.advanced_addons_flip_box.aae-zoomOut:hover .advanced_addons_flip_box_front {
    transform: scale(.75);
    opacity: 0;
    visibility: hidden;
}

/*---------------------------------------------------
    Cart Effect
---------------------------------------------------*/
.advanced_addons_flip_box.type-2 .advanced_addons_flip_box_back {
    padding: 20px 20px 20px 20px;
    text-align: left;
    align-items: flex-start;
    background: #fefafa;
}


.advanced_addons_flip_box.type-2 {
    border-radius: 3px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .10);
}

/*--------------------------------------------
--------------------------------------------*/
.advanced_addons_flip_box.type-3 {
    height: 90px;
    width: 90px;
    border-radius: 50%;
    display: inline-flex;
}

.advanced_addons_flip_box.type-3 .advanced_addons_flip_box_front,
.advanced_addons_flip_box.type-3 .advanced_addons_flip_box_back {
    border-radius: 50%;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, .10);
}

.advanced_addons_flip_box.type-3 i {
    font-size: 50px;
    color: #ffffff;
}