﻿
.animatedTopleft {
    width: 70%;
    border-top: 1px solid #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.2s linear;
}

.animatedTopright {
    width: 30%;
    border-top: 1px solid #ffffff;
    position: absolute;
    top: 0;
    transition: all 0.1s linear;
    right: 0;
}
.animatedBottomleft {
    width: 30%;
    border-bottom: 1px solid #ffffff;
    position: absolute;
    bottom: 0;
    transition: all 0.1s linear;
    right: 70%;
}

.animatedBottomright {
    width: 70%;
    border-bottom: 1px solid #ffffff;
    position: absolute;
    bottom: 0rem;
    left: 30%;
    transition: all 0.2s linear;
}
.animatedLeft {
    width:100%;
    height: 100%;
    border-left: 1px solid #ffffff;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all 0.1s linear;
    transition-delay: 0.2s;
}
.animatedRight {
    width: 100%;
    height: 100%;
    border-right: 1px solid #ffffff;
    position: absolute;
    right: 0;
    bottom: 0;
    transition: all 0.1s linear;
    transition-delay: 0.2s;
}
.animatedBorderColor{
    border-color:#ffffff;
}
.animatedDelWidth {
    width: 0;
    opacity: 0;
    border-color: rgba(255,255,255,0);
}
.animatedShortDelay {
    transition-delay: 0.1s;
}
.animatedLongDelay {
    transition-delay: 0.2s;
}
.animatedAllDelay {
    transition-delay: 0.3s;
}
.animatedDelHeight {
    height: 0;
    opacity: 0;
    border-color: rgba(255,255,255,0);
}



.fadeInleft {
    visibility:unset!important;
    animation: fadeInLeft 0.7s linear;
    -webkit-animation: fadeInLeft 0.7s linear;
    -o-animation: fadeInLeft 0.7s linear;
    -moz-animation: fadeInLeft 0.7s linear;
}
.fadeInright {
    visibility: unset !important;
    animation: fadeInRight 0.7s linear;
    -webkit-animation: fadeInRight 0.7s linear;
    -o-animation: fadeInRight 0.7s linear;
    -moz-animation: fadeInRight 0.7s linear;
}
.fadeInup, .fadeInup-1, .fadeInup-2, .fadeInup-3, .fadeInup-4, .fadeInup-5, .fadeInup-6 {
    animation: fadeInUp 0.5s linear;
    -webkit-animation: fadeInUp 0.5s linear;
    -o-animation: fadeInUp 0.5s linear;
    -moz-animation: fadeInUp 0.5s linear;
}
.fadeInup-1 {
    animation-duration: 0.9s;
    -webkit-animation-duration: 0.9s;
    -moz-animation-duration: 0.9s;
    -o-animation-duration: 0.9s;
}
.fadeInup-2 {
    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;
    -moz-animation-duration: 1.1s;
    -o-animation-duration: 1.1s;
}
.fadeInup-3 {
    animation-duration: 1.3s;
    -webkit-animation-duration: 1.3s;
    -moz-animation-duration: 1.3s;
    -o-animation-duration: 1.3s;
}
.fadeInup-4 {
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
}
.fadeInup-5 {
    animation-duration: 1.7s;
    -webkit-animation-duration: 1.7s;
    -moz-animation-duration: 1.7s;
    -o-animation-duration: 1.7s;
}
.fadeInup-6 {
    animation-duration: 1.9s;
    -webkit-animation-duration: 1.9s;
    -moz-animation-duration: 1.9s;
    -o-animation-duration: 1.9s;
}




.allTop {
    animation: allTop 1s 1;
    -webkit-animation: allTop 1s 1;
}

@keyframes allTop {
    0% {
        top: 1.5rem;
    }


    100% {
        top: 0;
    }
}

@-moz-keyframes allTop /* Firefox */
{

    0% {
        top: 1rem;
    }


    100% {
        top: 0;
    }
}

@-webkit-keyframes allTop /* Safari 和 Chrome */
{

    0% {
        top: 1rem;
    }


    100% {
        top: 0;
    }
}

@-o-keyframes allTop /* Opera */
{

    0% {
        top: 1rem;
    }


    100% {
        top: 0;
    }
}










.allUnfold {
    animation: allUnfold 1s 1;
    -webkit-animation: allUnfold 1s 1;
}
@keyframes allUnfold {
    0% {
        height: 0;
    }

    100% {
        height:100%;
    }
}

@-moz-keyframes allUnfold /* Firefox */
{
    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}
@-webkit-keyframes allUnfold /* Safari 和 Chrome */
{

    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}

@-o-keyframes allUnfold /* Opera */
{

    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}


.allFold {
    animation: allFold 1s 1;
    -webkit-animation: allFold 1s 1;
}
@keyframes allFold {
    0% {
        height:100%;
    }


    100% {
        height:0;
    }
}

@-moz-keyframes allFold /* Firefox */
{

    0% {
        height: 100%;
    }


    100% {
        height: 0;
    }
}
@-webkit-keyframes allFold /* Safari 和 Chrome */
{

    0% {
        height: 100%;
    }


    100% {
        height: 0;
    }
}

@-o-keyframes allFold /* Opera */
{

    0% {
        height: 100%;
    }


    100% {
        height: 0;
    }
}

.allFlashColor {
    animation-name: allFlashColor;
    -webkit-animation-name: allFlashColor;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    backface-visibility:hidden;
}

@keyframes allFlashColor {
    0% {
        border-color: #4d4d4d;
        transform: scale(1);
    }

    50% {
        border-color: #4d826b;
        transform: scale(1.1);
    }

    100% {
        border-color: #4d4d4d;
        transform: scale(1);
    }
}

@-moz-keyframes allFlashColor /* Firefox */
{
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes allFlashColor /* Safari 和 Chrome */
{
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@-o-keyframes allFlashColor /* Opera */
{
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.allFlash {
    animation-name: allFlash;
    -webkit-animation-name: allFlash;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes allFlash {
    0% {
        opacity: 1;
    }

    75% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes allFlash /* Firefox */
{
    0% {
        opacity: 1;
    }

    75% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes allFlash /* Safari 和 Chrome */
{
    0% {
        opacity: 1;
    }

    75% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes allFlash /* Opera */
{
    0% {
        opacity: 1;
    }

    75% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

.allScale {
    animation: allScale 2.5s 1;
    -webkit-animation-name: allScale;
}
@keyframes allScale {
    0% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

@-moz-keyframes allScale /* Firefox */
{
    0% {
        transform: scale(1.15);
    }


    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes allScale /* Safari 和 Chrome */
{
    0% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

@-o-keyframes allScale /* Opera */
{
    0% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

@media only screen and (min-width:0) and (max-width:1024px){
    .animatedBorderColor{
        display:none;
    }
    .learnMore{
        border-color:#ffffff !important;
    }
    .read, .becomePartner{
        border-color:#4d4d4d !important;
    }
}