@-webkit-keyframes wrench {
    0% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg)
    }

    8% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg)
    }

    10%,28%,30%,48%,50%,68% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg)
    }

    18%,20%,38%,40%,58%,60% {
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg)
    }

    100%,75% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes wrench {
    0% {
        -webkit-transform: rotate(-12deg);
        -ms-transform: rotate(-12deg);
        transform: rotate(-12deg)
    }

    8% {
        -webkit-transform: rotate(12deg);
        -ms-transform: rotate(12deg);
        transform: rotate(12deg)
    }

    10%,28%,30%,48%,50%,68% {
        -webkit-transform: rotate(24deg);
        -ms-transform: rotate(24deg);
        transform: rotate(24deg)
    }

    18%,20%,38%,40%,58%,60% {
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg)
    }

    100%,75% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
}

.faa-parent.animated-hover:hover>.faa-wrench,.faa-wrench.animated,.faa-wrench.animated-hover:hover {
    -webkit-animation: wrench 2.5s ease infinite;
    animation: wrench 2.5s ease infinite;
    transform-origin-x: 90%;
    transform-origin-y: 35%;
    transform-origin-z: initial;
    position: absolute;
    left: 50%;
    margin-left: -11px;
    top: 50%;
    margin-top: -11px;
}

.faa-parent.animated-hover:hover>.faa-wrench.faa-fast,.faa-wrench.animated-hover.faa-fast:hover,.faa-wrench.animated.faa-fast {
    -webkit-animation: wrench 1.2s ease infinite;
    animation: wrench 1.2s ease infinite
}

.faa-parent.animated-hover:hover>.faa-wrench.faa-slow,.faa-wrench.animated-hover.faa-slow:hover,.faa-wrench.animated.faa-slow {
    -webkit-animation: wrench 3.7s ease infinite;
    animation: wrench 3.7s ease infinite
}

.hotline {
    background: url(https://www.cfyc.com.vn/images_server/themes/celebration/img/home/hotline.png);
    background-size: cover;
    position: fixed;
    right: 0;
    z-index: 111;
    height: 100px;
    width: 300px;
    color: #fff;
    padding: 30px 0 0 45px;
    top: 60px
}

.hotline img {
    float: left;
    margin: 11px 18px 0 3px
}

.hotline p {
    font-size: 11px;
    font-family: utm_avoregular,sans-serif;
    text-transform: uppercase;
    margin: 0;
    text-align: center
}

.hotline p:first-child {
    font-family: utm_avobold,sans-serif;
    font-size: 14px
}

.hotline .hotline-no {
    float: left
}

.hotline-mobile {
    background: url(https://www.cfyc.com.vn/images_server/themes/celebration/img/home/hotline-mobile.png);
    background-size: cover;
    position: fixed;
    z-index: 1111;
    height: 75px;
    width: 75px;
    text-align: center;
    bottom: 45px;
    left: 45px;
}

#back-to-top {
    display: none;
    position: fixed;
    z-index: 99;
    bottom: 50px;
    right: 20px;
    opacity: 0.5;
}
#back-to-top:hover {
    opacity: 0.8;
}
/*
|--------------------------------------------------------------------------
| Common Banner and Smart Banner
|--------------------------------------------------------------------------
| Common banner is use for display simple image as banner in a section.
| While smart banner auto scaling and choose the appropriate image
| for each resolution. Currently support desktop + mobile image
*/
.section-common-banner {
    padding: 0;
}
.section-common-banner .visible-lg {
    width: 100%;
}
.section-common-banner.section-common-banner-smart {
    min-height: 426px;
    font-size: 0;
    transform: translateZ(0);
}
.section-common-banner.section-common-banner-smart >a {
    display: block;
    overflow: hidden;
    width: 100%;
}
.section-common-banner.section-common-banner-smart >a:focus {
    outline: none;
}
.section-common-banner.section-common-banner-smart img {
    margin-left: 0;
    max-width: inherit;
    width: 100%;
	height: auto;
}
@media screen and (max-width: 767px) {
    .section-common-banner.section-common-banner-smart {
        min-height: 200px;
    }
    .section-common-banner.section-common-banner-smart img {
        margin-left: 0;
        width: 100%;
    }
}
@media screen and (min-width: 1900px) {
    .section-common-banner.section-common-banner-smart img {
        margin-left: 0;
        max-width: 100%;
        width: 100%;
    }
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
    .section-common-banner.section-common-banner-smart {
        min-height: 360px;
    }
    .section-common-banner.section-common-banner-smart img {
        margin-left: calc( 50% - 683px );
        max-width: inherit;
        width: 1366px;
    }
}

/*
|--------------------------------------------------------------------------
| Smart Banner & Owl Carousel
|--------------------------------------------------------------------------
| This is the adaptation for the combination of Smart banner and
| Owl Carousel, everything work as Smart banner properties
| With extra navigation of owl carousel
*/
.section-common-banner .owl-carousel .owl-item img{
    transform: translateZ(0);
}
.section-common-banner .owl-carousel .owl-item.active {
    z-index: 1;
}
.section-common-banner .owl-carousel .owl-nav{
    max-width: 1200px;
    left: calc(50% - 600px);
}
@media screen and (max-width: 1199px){
    .section-common-banner .owl-carousel .owl-nav{
        max-width: 100%;
        left: 0;
    }
}




/*
|--------------------------------------------------------------------------
| Mobile Landing Head Line
|--------------------------------------------------------------------------
| Style for mobile heading bar, only visible on mobile version.
*/

@media screen and (max-width: 767px){
    .mobile-landing-headline{
        background: #000;
        min-height: 40px;
        overflow: hidden;
    }
    .mobile-landing-headline .inner-wrapper{
        position: relative;
    }
    .mobile-landing-headline .logo,.mobile-landing-headline .content{
        width: 50%;
    }
    .mobile-landing-headline .content{
        min-height: 100%;
        color: white;
        text-transform: uppercase;
        text-align: right;
        padding-right: 10px;
    }
    .mobile-landing-headline .content img{
        max-width: 100%;
    }
    .mobile-landing-headline .middle{
        max-width: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
    }
    .mobile-landing-headline .bottom{
        max-width: 50%;
        position: absolute;
        bottom: 0;
        right: 10px;
    }

}

@media screen and (max-width: 400px){
    .mobile-landing-headline .content img{
        max-height: 60px;
    }
}


/*
|--------------------------------------------------------------------------
| Cool Divider
|--------------------------------------------------------------------------
| Small divider useful for separation of heading and content.
| Can be easily customized by extending .cool-divider
*/

.cool-divider {
    display: block;
    margin: 30px 0;
    border: none;
}
.cool-divider.center {
    margin-left: auto;
    margin-right: auto;
}
.cool-divider.red-rectangle {
    width: 80px;
    height: 4px;
    background: #F96C03;
}
.cool-divider.yellow-rectangle {
    width: 80px;
    height: 4px;
    background: #f7e300;
}


/*
|--------------------------------------------------------------------------
| Sliding Gradient Background
|--------------------------------------------------------------------------
| The gradient background simulate sliding background technique with 2
| solid colors. And hover state will move the background position.
*/
.sliding-gradient-bg {
    background: linear-gradient(to right, #FD8831 50%, #F96C03 50%);
    background-size: 200% 100%;
    background-position: right bottom;
}
.sliding-gradient-bg:hover {
    background-position: left bottom;
}



/*
|--------------------------------------------------------------------------
| Cool Button CTA
|--------------------------------------------------------------------------
| Call to action button with sliding background. Sliding color can be
| easily customized by extending cool-btn-cta class. Second color
| is for origin state, first color if for hover state.
*/
.cool-btn-cta {
    color: #fff;
    background: linear-gradient(to right, #FD8831 50%, #F96C03 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    text-align: center;
    text-transform: uppercase;
    margin: 20px auto;
    padding: 15px 30px;
    border-radius: 5px;
    font-family: 'utm_avobold', 'utmavo', sans-serif;
    font-size: 1.3em;
    display: inline-block;
    transition: all 0.4s;
}
.cool-btn-cta:hover {
    text-decoration: none;
    color: #000;
    background-position: left bottom;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
/* Theming */
.cool-btn-cta.btn-black {
    color: #fff;
    background-image: linear-gradient(to right, #333 50%, #111 50%);
}
.cool-btn-cta.btn-yellow {
    color: #fff;
    background-image: linear-gradient(to right, #f8e836 50%, #f7e300 50%);
}
.cool-btn-cta.btn-blue {
    color: #fff;
    background-image: linear-gradient(to right, #0a549d 50%, #02407d 50%);
}