@charset "UTF-8";


@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.pp-section.active .fadeIn {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}


@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.pp-section.active .fadeInLeft {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}



@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(20%, 0, 0);
        transform: translate3d(20%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(20%, 0, 0);
        transform: translate3d(20%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.pp-section.active .fadeInRight {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}



@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -200px, 0);
        transform: translate3d(0, -200px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -200px, 0);
        transform: translate3d(0, -200px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.pp-section.active .fadeInDown {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.pp-section.active .fadeInUp {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(100px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(100px) rotate3d(1, 0, 0, 10deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }


    100% {
        -webkit-transform: perspective(100px);
        transform: perspective(100px);
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(100px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(100px) rotate3d(1, 0, 0, 10deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }


    100% {
        -webkit-transform: perspective(100px);
        transform: perspective(100px);
    }
}

.pp-section.active .flipInX {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 20deg);
        transform: perspective(1000px) rotate3d(0, 1, 0, 20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }



    100% {
        -webkit-transform: perspective(1000px);
        transform: perspective(1000px);
    }
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 20deg);
        transform: perspective(1000px) rotate3d(0, 1, 0, 20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }

    100% {
        -webkit-transform: perspective(1000px);
        transform: perspective(1000px);
    }
}

.pp-section.active .flipInY {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}




@-webkit-keyframes fadeDistortion {

    0%{
        opacity: 0;
        -webkit-transform: skewX(-8deg) skewY(-8deg);
        transform: skewX(-8deg) skewY(-8deg);
    }

    25% {
        -webkit-transform: skewX(6deg) skewY(6deg);
        transform: skewX(6deg) skewY(6deg);
    }

    50% {
        -webkit-transform: skewX(-4deg) skewY(-4deg);
        transform: skewX(-4deg) skewY(-4deg);
    }

    75% {
        -webkit-transform: skewX(2deg) skewY(2deg);
        transform: skewX(2deg) skewY(2deg);
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeDistortion {

    0%{
        opacity: 0;
        -webkit-transform: skewX(-8deg) skewY(-8deg);
        transform: skewX(-8deg) skewY(-8deg);
    }

    25% {
        -webkit-transform: skewX(6deg) skewY(6deg);
        transform: skewX(6deg) skewY(6deg);
    }

    50% {
        -webkit-transform: skewX(-4deg) skewY(-4deg);
        transform: skewX(-4deg) skewY(-4deg);
    }

    75% {
        -webkit-transform: skewX(2deg) skewY(2deg);
        transform: skewX(2deg) skewY(2deg);
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.pp-section.active .fadeDistortion {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation-name: fadeDistortion;
    animation-name: fadeDistortion;
}



@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.8, .8, .8);
        transform: scale3d(.8, .8, .8);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.8, .8, .8);
        transform: scale3d(.8, .8, .8);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.pp-section.active .zoomIn {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}


@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.8, .8, .8);
        transform: scale3d(.8, .8, .8);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}



.tr-text,
.tr-text h1,
.experience .experience-thumb,
.experience .experience-text,
.featured-portfolio,
#portfolio-menu,
.featured-post,
.tr-address,
.portfolio-filter .cbp-item:nth-child(1),
.tr-author-info ul li:nth-child(1),   
.tr-achievement ul li:nth-child(1),
.tr-language-skill ul li:nth-child(1),
.progress-content .skill {   
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.tr-text h2,
.tr-contact-form,
.tr-author-info ul li:nth-child(2),  
.tr-language-skill ul li:nth-child(2),
.portfolio-filter .cbp-item:nth-child(2),  
.tr-achievement ul li:nth-child(2) {   
    -webkit-animation-duration: 1.1s;
    animation-duration: 1.1s;
}

.tr-text p,
.tr-text .btn.btn-primary,
.tr-author-info ul li:nth-child(3), 
.tr-language-skill ul li:nth-child(3),
.portfolio-filter .cbp-item:nth-child(3),  
.tr-achievement ul li:nth-child(3) {   
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
}

.tr-text span,
.tr-author-info ul li:nth-child(4), 
.tr-language-skill ul li:nth-child(4),
.portfolio-filter .cbp-item:nth-child(4),  
.tr-achievement ul li:nth-child(4) {   
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
}

.tr-author-info ul li:nth-child(5),   
.tr-language-skill ul li:nth-child(5),
.portfolio-filter .cbp-item:nth-child(5),    
.tr-achievement ul li:nth-child(5) {   
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
}

.tr-author-info ul li:nth-child(6),  
.tr-language-skill ul li:nth-child(6),
.portfolio-filter .cbp-item:nth-child(6),   
.tr-achievement ul li:nth-child(6) {   
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}

.tr-author-info ul li:nth-child(7),  
.tr-language-skill ul li:nth-child(7),
.portfolio-filter .cbp-item:nth-child(7),   
.tr-achievement ul li:nth-child(7) {   
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
}

.tr-author-info ul li:nth-child(8), 
.portfolio-filter .cbp-item:nth-child(8),  
.tr-achievement:nth-child(8) {   
    -webkit-animation-duration: 1.7s;
    animation-duration: 1.7s;
}

.tr-author-info ul li:nth-child(9),
.portfolio-filter .cbp-item:nth-child(9)  {   
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s;
}

.banner-thumb,
.portfolio-filter .cbp-item:nth-child(10), 
.tr-author-info ul li:nth-child(10) {   
    -webkit-animation-duration: 1.9s;
    animation-duration: 1.9s;
}