/*custom animations */

@-webkit-keyframes dropIt {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -500px, 0);
        transform: translate3d(0, -500px, 0);
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes dropIt {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -500px, 0);
        transform: translate3d(0, -500px, 0);
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes showIn {
    from {
        transform: scale(0.25);
        -webkit-transform: scale(0.25);
        opacity: 0;
    }
    to {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes showIn {
    from {
        transform: scale(0.25);
        -webkit-transform: scale(0.25);
        opacity: 0;
    }
    to {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes hideIn {
    from {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.1);
        -webkit-transform: scale(0.1);
        opacity: 0.1;
    }
}

@keyframes hideIn {
    from {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.1);
        -webkit-transform: scale(0.1);
        opacity: 0.1;
    }
}

@-webkit-keyframes showInSmall {
    from {
        transform: scale(0.01);
        -webkit-transform: scale(0.01);
        opacity: 0.01;
    }
    to {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes showInSmall {
    from {
        transform: scale(0.01);
        -webkit-transform: scale(0.01);
        opacity: 0.01;
    }
    to {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes showAnimated {
    from {
        opacity: .1;
    }
    50% {
        opacity: .5;
    }
    to {
        opacity: 1;
    }
}

@keyframes showAnimated {
    from {
        opacity: .1;
    }
    50% {
        opacity: .5;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes hideAnimated {
    from {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
    to {
        opacity: 0;
    }
}

@keyframes hideAnimated {
    from {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes showBigText {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 1000px, 0);
        transform: translate3d(0, 1000px, 0);
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes showBigText {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 1000px, 0);
        transform: translate3d(0, 1000px, 0);
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes showTitle {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 500px, 0);
        transform: translate3d(0, 500px, 0);
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes showTitle {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 500px, 0);
        transform: translate3d(0, 500px, 0);
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hideTitle {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -500px, 0);
        transform: translate3d(0, -500px, 0);
    }
}

@-webkit-keyframes hideTitle {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -500px, 0);
        transform: translate3d(0, -500px, 0);
    }
}

@keyframes showFromLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-1000px, 0, 0);
        transform: translate3d(-1000px, 0, 0);
    }
    50% {
        opacity: .75;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes showFromLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-1000px, 0, 0);
        transform: translate3d(-1000px, 0, 0);
    }
    50% {
        opacity: .75;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes showFromRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(1000px, 0, 0);
        transform: translate3d(1000px, 0, 0);
    }
    50% {
        opacity: .75;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes showFromRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(1000px, 0, 0);
        transform: translate3d(1000px, 0, 0);
    }
    50% {
        opacity: .75;
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes changeColorCull {
    from {
        color: rgb(64, 64, 64)
    }
    to {
        color: #e42982
    }
}

@keyframes changeColorCull {
    from {
        color: rgb(64, 64, 64)
    }
    to {
        color: #e42982
    }
}


.showFromLeft {
    -webkit-animation-name: showFromLeft;
    animation-name: showFromLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

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

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.showIn {
    -webkit-animation-name: showIn;
    animation-name: showIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.hideIn {
    -webkit-animation-name: hideIn;
    animation-name: hideIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.showInSmall {
    -webkit-animation-name: showInSmall;
    animation-name: showInSmall;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.showAnimated {
    -webkit-animation: 1.5s ease 0s normal forwards 1 showAnimated;
    animation: 1.5s ease 0s normal forwards 1 showAnimated;
}

.hideAnimated {
    -webkit-animation: 1.5s ease 0s normal forwards 1 hideAnimated;
    animation: 1.5s ease 0s normal forwards 1 hideAnimated;
}

.showTitle {
    -webkit-animation-name: showTitle;
    animation-name: showTitle;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.hideTitle {
    -webkit-animation-name: hideTitle;
    animation-name: hideTitle;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.showBigText {
    -webkit-animation-name: showBigText;
    animation-name: showBigText;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.hideBigText {
    -webkit-animation-name: hideBigText;
    animation-name: hideBigText;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.d1s,
.a0s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.d2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.d3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.d05s {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}

.d075s {
    -webkit-animation-delay: .75s;
    animation-delay: .75s;
}

.d025s {
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
}

.d095s {
    -webkit-animation-delay: .85s;
    animation-delay: .85s;
}

.a1s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.a2s {
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
}

.a3s {
    -webkit-animation-delay: 16s;
    animation-delay: 16s;
}

.a4s {
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}

.a5s {
    -webkit-animation-delay: 26s;
    animation-delay: 26s;
}

.a6s {
    -webkit-animation-delay: 28s;
    animation-delay: 28s;
}

#project-presentation img,
#project-presentation h2,
.portofolio-project-display,
.portofolio-project-display,
#portofolio-container .container-text-portofolio h1,
#portofolio-container .container-text-portofolio h6,
#portofolio-container .container-text-portofolio p,
#marketing-section h1,
#marketing-section h2,
#marketing-section .cover-image,
#marketing-section h4,
#partner-container h1,
#partner-container h2,
#partner-container img.we-do-icon,
#partner-container img.measure,
#partner-container img.report,
#partner-container img.adapt,
#customer-container h2,
#customer-container .row-customer,
#footer,
#footer-site-info .footer-elements,
.testimonial-section h2,
.testimonial-section .testimonial-post,
.testimonial-section .right-info-testimonial,
.google-review,
.testimonial-section .author-testimonial,
#portofolio-container .portofolio-project-display,
#project-container .project-page {
    opacity: 0;
}

@media (max-width:768px) {
    /* 	.a0s,
	.a1s,
	.a2s,
	.a3s,
	.a4s,
	.a5s,
	.a6s{
    -webkit-animation-delay: inherit;
    animation-delay:  inherit;

	} */
    .a0s,
    .a1s,
    .a2s,
    .a3s,
    .a4s,
    .a5s,
    .a6s {
        -webkit-animation-delay: 1s;
        -moz-animation-delay: 1s;
        animation-delay: 1s;
    }
}