@keyframes rotate {
    15% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(365deg);
    }
}
@keyframes coverit {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}
.icon-content {
    height: 100%;
}
.icon-1 {
    position: absolute;
    top: 5%;
    left: 20%;
    transition: 1s all ease-in-out;
}
.icon-1:hover {
    transform: scale(1.2);
}
.icon-1 img {
    animation: icon-1 10s infinite linear;
}

.icon-2 {
    position: absolute;
    top: 15%;
    right: 15%;
    transition: 1s all ease-in-out;
}
.icon-2:hover {
    transform: scale(1.2);
}
.icon-2 img {
    animation: icon-2 10s infinite linear;
}

.icon-3 {
    position: absolute;
    top: 70%;
    right: 20%;
    transition: 1s all ease-in-out;
}
.icon-3:hover {
    transform: scale(1.2);
}
.icon-3 img {
    animation: icon-1 10s infinite linear;
}

.icon-4 {
    position: absolute;
    top: 70%;
    left: 10%;
    transition: 1s all ease-in-out;
}
.icon-4:hover {
    transform: scale(1.2);
}
.icon-4 img {
    animation: icon-1 10s infinite linear;
}
@media (max-width:1200px) {
    .icon-3 {
        top: 80%;
        right: 20%;
    }
}
@media (max-width:768px) {
    .icon-4 {
        top: 85%;
        left: 10%;
    }
    .icon-2 {
        top: 10%;
        left: 60%;
    }
}
@media (max-width:550px) {
    .icon-1 {
        top: 85%;
        left: 10%;
    }
    .icon-2 {
        top: 85%;
        left: 25%;
    }
    .icon-3 {
        top: 85%;
        left: 40%;
    }
    .icon-4 {
        top: 85%;
        left: 55%;
    }
}


@keyframes icon-1 {
    0% {
        transform: translate3D(5px, 0px, 0);
    }
    15% {
        transform: translate3D(5px, 0px, 0);
    }
    30% {
        transform: translate3D(-2px, 0px, 0);
    }
    45% {
        transform: translate3D(0px, -5px, 0);
    }
    60% {
        transform: translate3D(0px, 2px, 0);
    }
    75% {
        transform: translate3D(2px, 5px, 0);
    }
    90% {
        transform: translate3D(4px, 5px, 0);
    }
    100% {
        transform: translate3D(5px, 0px, 0);
    }

}

@keyframes icon-2 {
    0% {
        transform: translate3D(-5px, 5px, 0);
    }
    15% {
        transform: translate3D(2px, 0px, 0);
    }
    30% {
        transform: translate3D(-4px, 0px, 0);
    }
    45% {
        transform: translate3D(3px, -2px, 0);
    }
    60% {
        transform: translate3D(0px, 2px, 0);
    }
    75% {
        transform: translate3D(2px, 3px, 0);
    }
    90% {
        transform: translate3D(0px, 2px, 0);
    }
    100% {
        transform: translate3D(-5px, 5px, 0);
    }
}

@keyframes icons {
    0% {
        transform: translateX(-6000px);
    }
    100% {
        transform: translateX(4000px);
    }
}


header .run-s {
    animation: run-down 10s infinite ease-in;
}
header .run-right {
    animation: run-right 10s infinite linear;
}
header .run-s img {
    animation: run-self 10s infinite linear;
}

@keyframes run-self {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    40% {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    100% {
        -webkit-transform: rotate(1800deg);
        -moz-transform: rotate(1800deg);
        -ms-transform: rotate(1800deg);
        transform: rotate(1800deg);
    }
}
@keyframes run-right {
    0% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
    }
    20% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
    }
    100% {
        -webkit-transform: translateX(200vh);
        -moz-transform: translateX(200vh);
        -ms-transform: translateX(200vh);
        transform: translateX(200vh);
    }
}
@keyframes run-down {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    20% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    40% {
        -webkit-transform: translateY(90vh);
        -moz-transform: translateY(90vh);
        -ms-transform: translateY(90vh);
        transform: translateY(90vh);

    }
    100% {
        -webkit-transform: translateY(90vh);
        -moz-transform: translateY(90vh);
        -ms-transform: translateY(90vh);
        transform: translateY(90vh);
    }
}
@media (max-width:1200px) {
    @keyframes run-self {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        20% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        30% {
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }
        100% {
            -webkit-transform: rotate(1800deg);
            -moz-transform: rotate(1800deg);
            -ms-transform: rotate(1800deg);
            transform: rotate(1800deg);
        }
    }
    @keyframes run-down {
        0% {
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            transform: translateY(0px);
        }
        20% {
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            transform: translateY(0px);
        }
        30% {
            -webkit-transform: translateY(80vh);
            -moz-transform: translateY(80vh);
            -ms-transform: translateY(80vh);
            transform: translateY(80vh);
    
        }
        100% {
            -webkit-transform: translateY(80vh);
            -moz-transform: translateY(80vh);
            -ms-transform: translateY(80vh);
            transform: translateY(80vh);
        }
    }
}

@media (max-width:500px) {
    @keyframes run-self {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        30% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        40% {
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }
        50% {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
        }
        55% {
            -webkit-transform: rotate(-360deg);
            -moz-transform: rotate(-360deg);
            -ms-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
        75% {
            -webkit-transform: rotate(-360deg);
            -moz-transform: rotate(-360deg);
            -ms-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
        100% {
            -webkit-transform: rotate(1800deg);
            -moz-transform: rotate(1800deg);
            -ms-transform: rotate(1800deg);
            transform: rotate(1800deg);
        }
    }
    @keyframes run-down {
        0% {
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            transform: translateY(0px);
        }
        30% {
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            transform: translateY(0px);
        }
        40% {
            -webkit-transform: translateY(70vh);
            -moz-transform: translateY(70vh);
            -ms-transform: translateY(70vh);
            transform: translateY(70vh);
        }
        100% {
            -webkit-transform: translateY(70vh);
            -moz-transform: translateY(70vh);
            -ms-transform: translateY(70vh);
            transform: translateY(70vh);
        }
    }
    @keyframes run-right {
        0% {
            -webkit-transform: translateX(0px);
            -moz-transform: translateX(0px);
            -ms-transform: translateX(0px);
            transform: translateX(0px);
        }
        40% {
            -webkit-transform: translateX(0px);
            -moz-transform: translateX(0px);
            -ms-transform: translateX(0px);
            transform: translateX(0px);
        }
        50% {
            -webkit-transform: translateX(20vh);
            -moz-transform: translateX(20vh);
            -ms-transform: translateX(20vh);
            transform: translateX(20vh);
        }
        55% {
            -webkit-transform: translateX(10vh);
            -moz-transform: translateX(10vh);
            -ms-transform: translateX(10vh);
            transform: translateX(10vh);
        }
        75% {
            -webkit-transform: translateX(10vh);
            -moz-transform: translateX(10vh);
            -ms-transform: translateX(10vh);
            transform: translateX(10vh);
        }
        100% {
            -webkit-transform: translateX(120vh);
            -moz-transform: translateX(120vh);
            -ms-transform: translateX(120vh);
            transform: translateX(120vh);
        }
    }
}

@keyframes flash {
    0% {
        border-color: rgb(51, 51, 51);
    }
    50% {
        border-color: transparent;
    }
    100% {
        border-color: rgb(51, 51, 51);
    }
}






header hr {
    border: 1px solid rgb(27, 27, 27);
    position: absolute;
}
header .a hr {top:30%;animation: a 2s infinite;}
header .b hr {top:31%;animation: b 2s infinite;}
header .c hr {top:32%;animation: c 2s infinite;}
header .d hr {top:33%;animation: d 2s infinite;}
header .e hr {top:34%;animation: e 2s infinite;}
header .f hr {top:35%;animation: f 2s infinite;}
header .g hr {top:36%;animation: g 2s infinite;}
header .h hr {top:37%;animation: h 2s infinite;}
header .i hr {top:38%;animation: i 2s infinite;}
header .j hr {top:39%;animation: j 2s infinite;}
header .k hr {top:40%;animation: k 2s infinite;}
header .l hr {top:41%;animation: l 2s infinite;}
header .m hr {top:42%;animation: m 2s infinite;}
header .n hr {top:43%;animation: n 2s infinite;}
header .o hr {top:44%;animation: o 2s infinite;}
header .p hr {top:45%;animation: p 2s infinite;}
header .q hr {top:46%;animation: q 2s infinite;}
header .r hr {top:47%;animation: r 2s infinite;}
header .s hr {top:48%;animation: s 2s infinite;}
header .t hr {top:49%;animation: t 2s infinite;}
header .u hr {top:50%;animation: u 2s infinite;}
header .v hr {top:51%;animation: v 2s infinite;}
header .w hr {top:52%;animation: w 2s infinite;}
header .x hr {top:53%;animation: x 2s infinite;}
header .y hr {top:54%;animation: y 2s infinite;}
header .z hr {top:55%;animation: z 2s infinite;}
@keyframes a {
    0% {width: 0%;}
    20% {width: 30%;border-color: white;}
    30% {width: 0%;}

}
@keyframes b {
    0% {width: 0%;}
    40% {width: 25%;border-color: white;}
    50% {width: 0%;}
}
@keyframes c {
    0% {width: 0%;}
    10% {width: 40%;border-color: rgba(255, 255, 255,.6);}
    20% {width: 0%;}
}
@keyframes d {
    0% {width: 0%;}
    15% {width: 40%;border-color: rgba(255, 255, 255,.2);}
    25% {width: 0%;}
}
@keyframes e {
    0% {width: 0%;}
    60% {width: 40%;border-color: white;}
    70% {width: 0%;}
}
@keyframes f {
    0% {width: 0%;}
    55% {width: 40%;border-color: rgba(255, 255, 255,.2);}
    65% {width: 0%;}
}
@keyframes g {
    0% {width: 0%;}
    15% {width: 40%;border-color: rgba(255, 255, 255,.2);}
    25% {width: 0%;}
}
@keyframes h {
    0% {width: 0%;}
    33% {width: 40%;border-color: white;}
    43% {width: 0%;}
}
@keyframes i {
    0% {width: 0%;}
    27% {width: 40%;border-color: rgba(255, 255, 255,.6);}
    37% {width: 0%;}
}
@keyframes j {
    0% {width: 0%;}
    41% {width: 40%;border-color: white;}
    51% {width: 0%;}
}
@keyframes k {
    0% {width: 0%;}
    28% {width: 40%;border-color: rgba(255, 255, 255,.8);}
    38% {width: 0%;}
}
@keyframes l {
    0% {width: 0%;}
    80% {width: 40%;border-color: white;}
    90% {width: 0%;}
}
@keyframes m {
    0% {width: 0%;}
    38% {width: 40%;border-color: rgba(255, 255, 255,.4);}
    48% {width: 0%;}
}
@keyframes n {
    0% {width: 0%;}
    5% {width: 40%;border-color: white;}
    15% {width: 0%;}
}
@keyframes o {
    0% {width: 0%;}
    44% {width: 40%;border-color: rgba(255, 255, 255,.1);}
    54% {width: 0%;}
}
@keyframes p {
    0% {width: 0%;}
    22% {width: 40%;border-color: white;}
    32% {width: 0%;}
}
@keyframes q {
    0% {width: 0%;}
    46% {width: 40%;border-color: rgba(255, 255, 255,.6);}
    56% {width: 0%;}
}
@keyframes r {
    0% {width: 0%;}
    22% {width: 40%;border-color: white;}
    32% {width: 0%;}
}
@keyframes s {
    0% {width: 0%;}
    70% {width: 40%;border-color: white;}
    80% {width: 0%;}
}
@keyframes t {
    0% {width: 0%;}
    52% {width: 40%;border-color: white;}
    62% {width: 0%;}
}
@keyframes u {
    0% {width: 0%;}
    11% {width: 40%;border-color: rgba(255, 255, 255,.8);}
    21% {width: 0%;}
}
@keyframes v {
    0% {width: 0%;}
    19% {width: 40%;border-color: white;}
    29% {width: 0%;}
}
@keyframes w {
    0% {width: 0%;}
    66% {width: 40%;border-color: white;}
    76% {width: 0%;}
}
@keyframes x {
    0% {width: 0%;}
    49% {width: 40%;border-color: white;}
    59% {width: 0%;}
}
@keyframes y {
    0% {width: 0%;}
    33% {width: 40%;border-color: rgba(255, 255, 255,.7);}
    43% {width: 0%;}
}
@keyframes z {
    0% {width: 0%;}
    27% {width: 40%;border-color: white;}
    37% {width: 0%;}
}

/*==============      text-animation     =============================
<!-- text animation-->
<script src="js/jquery.scrollex.min.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/breakpoints.min.js"></script>
<script src="js/main.js"></script>
==================================================================*/

.main.left > .animate-left {
    -moz-transition:  2s all ease-in-out;
    -webkit-transition: 2s all ease-in-out;
    -ms-transition:  2s all ease-in-out;
    transition: 2s all ease-in-out;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    position: relative;
}
.main.left > .animate-left2 {
    -moz-transition:  3s all ease-in-out 1s;
    -webkit-transition: 3s all ease-in-out 1s;
    -ms-transition:  3s all ease-in-out 1s;
    transition: 3s all ease-in-out 1s;
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    position: relative;
}
.main.left.inactive> .animate-left, .main.left.inactive> .animate-left2  {
    -moz-transform: translateX(-200vh);
    -webkit-transform: translateX(-200vh);
    -ms-transform: translateX(-200vh);
    transform: translateX(-200vh);
    opacity: 0;
}

.main.right > .animate-right {
    -moz-transition:  2s all ease-in-out;
    -webkit-transition: 2s all ease-in-out;
    -ms-transition:  2s all ease-in-out;
    transition: 2s all ease-in-out;
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    position: relative;
}
.main.right.inactive> .animate-right {
    -moz-transform: translateX(200vh);
    -webkit-transform: translateX(200vh);
    -ms-transform: translateX(200vh);
    transform: translateX(200vh);
    opacity: 0;
}

.main.up > .animate-up {
    -moz-transition:  1s all ease-in-out;
    -webkit-transition: 1s all ease-in-out;
    -ms-transition:  1s all ease-in-out;
    transition: 1s all ease-in-out;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    position: relative;
}
.main.up > .animate-up2 {
    -moz-transition:  2s all ease-in-out;
    -webkit-transition: 2s all ease-in-out;
    -ms-transition:  2s all ease-in-out;
    transition: 2s all ease-in-out;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    position: relative;
}
.main.up > .animate-up3 {
    -moz-transition:  3s all ease-in-out;
    -webkit-transition: 3s all ease-in-out;
    -ms-transition:  3s all ease-in-out;
    transition: 3s all ease-in-out;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    position: relative;
}
.main.up > .animate-up4 {
    -moz-transition:  4s all ease-in-out;
    -webkit-transition: 4s all ease-in-out;
    -ms-transition:  4s all ease-in-out;
    transition: 4s all ease-in-out;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    position: relative;
}
.main.up.inactive> .animate-up, .main.up.inactive> .animate-up2, .main.up.inactive> .animate-up3, .main.up.inactive> .animate-up4 {
    -moz-transform: translateY(500px);
    -webkit-transform: translateY(500px);
    -ms-transform: translateY(500px);
    transform: translateY(500px);
    transition: 0s all ease-in-out;
    opacity: 0;
    color: transparent;
}

.main.t-color > .animate-color {
    -moz-transition:  2s all ease-in;
    -webkit-transition: 2s all ease-in;
    -ms-transition:  2s all ease-in;
    transition: 2s all ease-in 2s;
    position: relative;
    color: rgb(46, 46, 46);  
}
.main.t-color.inactive> .animate-color  {
    color: transparent;
}