.mainImage-fontAwesome:before,
.mainImage-fontAwesome:after {
    font-size: 200px;
}
.mainImage-fontAwesome {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    --fa-primary-color: #AD9661;
    --fa-secondary-color: #1086AF;
    --fa-secondary-opacity: 0.9;
}
.ci-design {
    --fa-primary-color: #AD9661;
    --fa-secondary-color: #1086AF;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
}
.ci-design.inverted {
    --fa-primary-color: #1086AF;
    --fa-secondary-color: #AD9661;
}
.ci-design.half {
    --fa-primary-opacity: 0.5;
    --fa-secondary-opacity: 0.5;
}
.ci-design.high {
    --fa-primary-opacity: 0.75;
    --fa-secondary-opacity: 0.75;
}
.ci-color {
    color:#1086AF;
}
.mainImage-fontAwesome.animate:hover {
    transform: rotateZ(360deg);
    perspective: 1000px;
    backface-visibility: hidden;
    animation-name: rotate;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    color:#25405D;
}
@keyframes rotate {
    0% {
        text-shadow: 1px 1px 1px #CCC;
        transform: rotateY(0deg);
    }

    25% {
        text-shadow: 1px 1px 1px #CCC, -2px 1px 1px #CCC, -3px 1px 1px #CCC, -4px 1px 1px #CCC,-4px 1px 1px #CCC,
        -5px 1px 1px #CCC,-6px 1px 1px #CCC,-7px 1px 1px #CCC,-8px 1px 1px #CCC,-9px 1px 1px #CCC,-10px 1px 1px #CCC,
        -11px 1px 1px #CCC,-12px 1px 1px #CCC,-13px 1px 1px #CCC,-14px 1px 1px #CCC,-15px 1px 1px #CCC,-16px 1px 1px #CCC,
        -17px 1px 1px #CCC,-18px 1px 1px #CCC,-19px 1px 1px #CCC,-20px 1px 1px #CCC;
        transform: rotateY(40deg);
    }
    50% {
        text-shadow: 0 0 0 #CCC;
        transform: rotateY(0deg);
    }

    75% {
        text-shadow: 1px 1px 1px #CCC, 2px 1px 1px #CCC, 3px 1px 1px #CCC, 4px 1px 1px #CCC,4px 1px 1px #CCC,
        5px 1px 1px #CCC,6px 1px 1px #CCC,7px 1px 1px #CCC,8px 1px 1px #CCC,9px 1px 1px #CCC,10px 1px 1px #CCC,
        11px 1px 1px #CCC,12px 1px 1px #CCC,13px 1px 1px #CCC,14px 1px 1px #CCC,15px 1px 1px #CCC,16px 1px 1px #CCC,
        17px 1px 1px #CCC,18px 1px 1px #CCC,19px 1px 1px #CCC,20px 1px 1px #CCC;
        transform: rotateY(-40deg);
    }
    100% {
        text-shadow: 1px 1px 1px #CCC;
        transform: rotateY(0deg);
    }
}

@media only screen and (max-width: 767px) {
    .mainImage-fontAwesome:before,
    .mainImage-fontAwesome:after {
        font-size: 140px;
    }
}

.catalog-category-view .mainImage-fontAwesome:before,
.catalog-category-view .mainImage-fontAwesome:after {
    font-size: 80px;
}