@font-face {
    font-family: "B Yekan+";
    src: url(../font/BYekan.ttf)
}

@font-face {
    font-family: "B Yekan+ Bold";
    src: url(../font/BYekanBold.ttf)
}

#banner_contain {
    perspective: 500px;
    position: relative;
}

#ptn-banner {
    border: 1px solid #ED0B22;
    border-radius: 5px;
    width: 350px;
    height: 50px;
    position: relative;
    background-color: #FFF;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
    transform-style: preserve-3d;
    overflow: hidden
}

.PTNtitle1 {
    font-family: "B Yekan+ Bold";
    position: absolute;
    top: 3px;
    right: 32px;
    z-index: 10;
    font-size:14px;
}

.site-logo {
    position: absolute;
    width: 25px;
    top: 5px;
    right: 5px
}

.PTNtitle2 {
    font-family: "B Yekan+";
    font-size: 11px;
    position: absolute;
    bottom: 5px;
    left: 10px;
    color: black;
    z-index: 11
}

/*.shine {
            color: #fff;
            -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
            -webkit-mask-size: 200%;
            animation: shine 2s linear infinite;
        }

        @keyframes shine {
            from {
                -webkit-mask-position: -50%;
            }

            to {
                -webkit-mask-position: 150%;
            }
        }*/
.shine {
    color: rgba(255,255,255,0.1);
    background: -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
    background: -moz-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
    background: gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
    -webkit-background-size: 35px 100%;
    -moz-background-size: 35x 100%;
    background-size: 35px 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-animation-name: shimmer;
    -moz-animation-name: shimmer;
    animation-name: shimmer;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: #222;
}

@-moz-keyframes shimmer {
    0% {
        background-position: -10% -10%;
    }

    100% {
        background-position: 130% 130%;
    }
}

@-webkit-keyframes shimmer {
    0% {
        background-position: -10% -10%;
    }

    100% {
        background-position: 130% 130%;
    }
}

@-o-keyframes shimmer {
    0% {
        background-position: -10% -10%;
    }

    100% {
        background-position: 130% 130%;
    }
}

@keyframes shimmer {
    0% {
        background-position: -10% -10%;
    }

    100% {
        background-position: 130% 130%;
    }
}

.particle1, .particle2, .particle3, .particle4, .particle5, .particle6 {
    position: absolute;
    border-radius: 50%;
}

.particle1 {
    width: 5px;
    height: 5px;
    bottom: 10px;
    right: 50px;
    background-color: rgba(27, 108, 201, 0.25);
    -webkit-box-shadow: 2px 4px 19px 2px rgba(27, 108, 201,0.75);
    -moz-box-shadow: 2px 4px 19px 2px rgba(27, 108, 201,0.75);
    box-shadow: 2px 4px 19px 2px rgba(27, 108, 201,0.75);
    animation: animationFrames linear 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
}

.particle2 {
    width: 5px;
    height: 5px;
    top: 10px;
    left: 10px;
    background-color: rgba(192, 11, 20, 0.25);
    -webkit-box-shadow: 2px 4px 19px 2px rgba(192, 11, 20,0.75);
    -moz-box-shadow: 2px 4px 19px 2px rgba(192, 11, 20,0.75);
    box-shadow: 2px 4px 19px 2px rgba(192, 11, 20,0.75);
    animation: animationFrames2 linear 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
}

.particle3 {
    width: 5px;
    height: 5px;
    top: 20px;
    left: 80px;
    background-color: rgba(110, 17, 191, 0.25);
    -webkit-box-shadow: 2px 4px 19px 2px rgba(110, 17, 191,0.75);
    -moz-box-shadow: 2px 4px 19px 2px rgba(110, 17, 191,0.75);
    box-shadow: 2px 4px 19px 2px rgba(110, 17, 191,0.75);
    animation: animationFrames3 ease-in-out 5s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
}

@keyframes animationFrames {
    0% {
        transform: translate(0px,0px);
    }

    29% {
        transform: translate(0px,-20px);
    }

    100% {
        transform: translate(0px,15px);
    }
}

@keyframes animationFrames2 {
    0% {
        transform: translate(0px,0px);
    }

    29% {
        transform: translate(15px,-15px);
    }

    100% {
        transform: translate(-15px,15px);
    }
}

@keyframes animationFrames3 {
    0% {
        transform: translate(0px,0px);
    }

    29% {
        transform: translate(25px,0px);
    }

    65% {
        transform: translate(-25px,15px);
    }

    100% {
        transform: translate(15px,15px);
    }
}

.particle4 {
    width: 5px;
    height: 5px;
    top: 30px;
    left: 150px;
    background-color: rgba(26, 217, 33, 0.25);
    -webkit-box-shadow: 2px 4px 19px 2px rgba(26, 217, 33,0.75);
    -moz-box-shadow: 2px 4px 19px 2px rgba(26, 217, 33,0.75);
    box-shadow: 2px 4px 19px 2px rgba(26, 217, 33,0.75);
    animation: animationFrames4 ease-in-out 5s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
}

@keyframes animationFrames4 {
    0% {
        transform: translate(0px,0px);
    }

    29% {
        transform: translate(0px,20px);
    }

    100% {
        transform: translate(0px,-20px);
    }
}

.particle5 {
    width: 5px;
    height: 5px;
    top: -10px;
    right: 150px;
    background-color: rgba(192, 92, 11, 0.25);
    -webkit-box-shadow: 2px 4px 19px 2px rgba(192, 92, 11,0.75);
    -moz-box-shadow: 2px 4px 19px 2px rgba(192, 92, 11,0.75);
    box-shadow: 2px 4px 19px 2px rgba(192, 92, 11,0.75);
    animation: animationFrames5 ease-in 5s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
}

@keyframes animationFrames5 {
    0% {
        transform: translate(0px,0px);
    }

    50% {
        transform: translate(0px,35px);
    }

    100% {
        transform: translate(0px,0px);
    }
}