/*------------------------------------*\
            animator.css
\*------------------------------------*/
/*
    * General.....................General use
    * Banner
    * What is Crazytalk Animator3
    * Iiregular Block
    * Testimonial
    * Media Query.................RWD Setting
*/





/*------------------------------------
            $General
------------------------------------*/
body{ padding-top: 60px; }
.heading{
    padding-bottom: 0;
    font-weight: bold;
}
.divider{
    background-image: url(../../../../includes/images/animator/line.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 1px;
}
/*--- owl-slider ---*/
.owl-theme .owl-controls{ 
    width: 100%;
    position: absolute; 
    bottom: 20px; 
}
.owl-theme .owl-controls .owl-page span{ background: #969696; opacity: 0.5; }
.owl-theme .owl-controls .owl-page.active span{ background: #393939; }
.heading{ color: #393939; }





/*------------------------------------
            $Banner
------------------------------------*/
.banner{ position: relative; }





/*------------------------------------
    $What is Crazytalk Animator3
------------------------------------*/
/*--- button ---*/
.try-now{
    font-size: 24px;
    margin-top: 20px;
    width: 300px;
    height: 50px;
}





/*------------------------------------
         $Iiregular Block
------------------------------------*/
.iiregular-block .img-wrapper{ 
	float: left;
	position: relative;
    overflow: hidden;
}
.iiregular-block .img-wrapper .mask{
    width: 100%;
    height: 100%;
}
.iiregular-block .img-wrapper img, 
.iiregular-block .img-wrapper .mask,
.iiregular-block .img-wrapper .text-wrapper,
.iiregular-block .img-wrapper .text-desc,
.iiregular-block .img-wrapper ul{
    -webkit-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.iiregular-block .img-wrapper:hover img{
    -webkit-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
}
.iiregular-block .img-wrapper:hover .mask{
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    z-index: 9;
}
.iiregular-block .img-wrapper ul{ list-style-image: url(../../images/animator/li.png); }
.iiregular-block .img-wrapper:hover ul{ list-style-image: url(../../images/animator/li-hov.png); }

    .iiregular-block .img-wrapper .text-wrapper{ position: absolute; }
    .iiregular-block .img-wrapper .text-desc,
    .iiregular-block .img-wrapper ul{ color: #000; }

    .iiregular-block .img-wrapper:hover .text-wrapper{ z-index: 10; }
    .iiregular-block .img-wrapper:hover .text-desc{ color: #fff; }
    .iiregular-block .img-wrapper:hover ul{ color: #e4e4e4; }

    .iiregular-block .img-wrapper .text-desc{
        font-size: 1.4583vw; /*28px ( 1.75rem )*/
        font-weight: 500;
        line-height: 1;
        margin-bottom: 20px;
	}
    .iiregular-block .img-wrapper ul{
        padding-left: 15px;
        margin-bottom: 0;
    }
    .iiregular-block .img-wrapper ul li{ font-size: 0.9375vw; /*18px*/ }

    /*--- first-row ---*/
    .iiregular-block .first-row .environment .text-wrapper{ left: 2.0833vw; /*40px*/ bottom: 1.5625vw; /*30px*/ }
    .iiregular-block .first-row .character .text-wrapper{ left: 22.9166vw; /*right: 6.7708vw; 130px*/ bottom: 1.5625vw; }
    .iiregular-block .first-row .img-wrapper:first-child{
		width: 32.971%;
		margin-right: 15px;
	}
    .iiregular-block .first-row .img-wrapper:last-child{
		width: calc( (100% - 32.971%) - 15px );
		margin-bottom: 15px;
	}

    /*--- second-row ---*/
    .iiregular-block .second-row .animation .text-wrapper{ left: 2.0833vw; bottom: 1.5625vw; }
    .iiregular-block .second-row .head .text-wrapper{ left: 2.0833vw; bottom: 1.5625vw; }
    .iiregular-block .second-row .img-wrapper:first-child{
		width: calc( (100% - 32.971%) - 15px );
		margin-right: 15px;
		margin-bottom: 15px;
	}
	.iiregular-block .second-row .img-wrapper:last-child{
		width: 32.971%;
		margin-bottom: 15px;
	}

    /*--- third-row ---*/
    .iiregular-block .third-row .props .text-wrapper{ left: 2.0833vw; bottom: 1.5625vw; }
    .iiregular-block .third-row .export .text-wrapper{ left: 2.0833vw; top: 1.5625vw; }
    .iiregular-block .third-row .img-wrapper:first-child{
		width: 49.42028%;
        max-width: 682px;
		margin-right: 15px;
		margin-bottom: 15px;
	}
	.iiregular-block .third-row .img-wrapper:last-child{
		width: calc( (100% - 49.42028%) - 15px );
        max-width: 683px;
		margin-bottom: 15px;
	}

    /*--- fourth-row ---*/
    .iiregular-block .fourth-row .pipeline .text-wrapper{ left: 2.0833vw; bottom: 1.5625vw; }
    .iiregular-block .fourth-row .img-wrapper{
		width: 100%;
	}





/*------------------------------------
            $Testimonial
------------------------------------*/
.testimonial{ background-color: #ececec; }
    .testimonial .title{ padding-bottom: 0; }
    .testimonial .user-desc, .testimonial .user-name{ color: #393939; }
    .testimonial .user-desc{ margin-bottom: 40px; }
    .testimonial .user-name{ text-align: right; }
    .testimonial .rl-media-center-lg{ margin: 0 auto; }
    .testimonial .img-authors{ margin-bottom: 30px;}

#owl-box-testimonial .owl-controls{ position: static; }
#owl-box-testimonial .owl-controls .owl-page span{ background: #969696; opacity: 0.5; }
#owl-box-testimonial .owl-controls .owl-page.active span{ background: #393939; }

.bottom-btn{
    font-size: calc( 21.5px + 0.75vw ); /*36-24*/
    width: 440px;
    height: 70px;
    margin: 10px calc(9px + 3.4375vw); /*75-20*/
}




/*------------------------------------
            $Media Query
------------------------------------*/
@media screen and (max-width: 1440px){
    /*------------------------------------
            $Iiregular Block
    ------------------------------------*/
    .iiregular-block .img-wrapper .text-desc{ font-size: 1.9444vw; /*28px ( 1.75rem )*/ }
    .iiregular-block .img-wrapper ul li{ font-size: 1.25vw; /*18px*/ }

    /*--- first-row ---*/
    .iiregular-block .first-row .character .text-wrapper{ left: 25.5vw; }
}

@media screen and (max-width: 991px){
    /*------------------------------------
                $General
    ------------------------------------*/
    /*--- owl-slider ---*/
    .owl-theme .owl-controls{  position: static; }
    /*------------------------------------
        $What is Crazytalk Animator3
    ------------------------------------*/
    .what-cta3 .img-wrapper img{ margin: 0 auto; }
}

@media screen and (max-width: 767px){
    /*------------------------------------
            $Iiregular Block
    ------------------------------------*/
    .bottom-btn{
        width: 80%;
        margin: 10px auto;
    }
}

@media screen and (max-width: 500px){
    /*------------------------------------
                $General
    ------------------------------------*/
    /*--- button ---*/
    .try-now{ width: 270px; }
}