html, body {
    font-size: 16px;
}

    /*#loading*/
    #loading{
        background-color: #fff;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 1;
        margin-top: 0px;
        top: 0px;
        z-index: 99999;
        
        -webkit-animation: mask_up 0.8s ease-out .1s 1 both;
        animation: mask_up 0.8s ease-out .1s 1 both;
        animation-delay: 1.5s;
    }

    #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
    }
    #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 150px;
        width: 150px;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .intro_logo{
        width: 100%;
    }

    .intro_logo img{
        width: 100%;    
    }

    #loading .mask{
        position: absolute;
        float: left;
        width: 100%;
        height: 100%;
        background: #fff;

        -webkit-animation: mask 1s ease-out .1s 1 both;
        animation: mask 1s ease-out .1s 1 both;
    }

    .flexslider{
        -webkit-animation: zoom 1s ease-out .1s 1 both;
        animation: zoom 1s ease-out .1s 1 both;
        animation-delay: 1.5s;
    }    

@-webkit-keyframes mask {
    0% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -o-transform: translateX(0%);
        -ms-transform: translateX(0%);
        opacity: 1;
    }

    70% {
        transform: translateX(101%);
        -webkit-transform: translateX(101%);
        -moz-transform: translateX(101%);
        -o-transform: translateX(101%);
        -ms-transform: translateX(101%);
        opacity: 1;
    }

    71% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -o-transform: translateX(0%);
        -ms-transform: translateX(0%);
        opacity: 1;
    }
    72% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -o-transform: translateX(0%);
        -ms-transform: translateX(0%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -o-transform: translateX(0%);
        -ms-transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes mask {
    0% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -o-transform: translateX(0%);
        -ms-transform: translateX(0%);
        opacity: 1;
    }

    70% {
        transform: translateX(101%);
        -webkit-transform: translateX(101%);
        -moz-transform: translateX(101%);
        -o-transform: translateX(101%);
        -ms-transform: translateX(101%);
        opacity: 1;
    }

    71% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -o-transform: translateX(0%);
        -ms-transform: translateX(0%);
        opacity: 1;
    }
    72% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -o-transform: translateX(0%);
        -ms-transform: translateX(0%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -o-transform: translateX(0%);
        -ms-transform: translateX(0%);
        opacity: 1;
    }

}


@-webkit-keyframes mask_up {
    0% {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -o-transform: translateY(0%);
        -ms-transform: translateY(0%);
    }

    100% {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        animation-timing-fuction: cubic-bezier(.22, .61, .36, 1);
    }
}

@keyframes mask_up {
    0% {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -o-transform: translateY(0%);
        -ms-transform: translateY(0%);
    }

    100% {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        animation-timing-fuction: cubic-bezier(.22, .61, .36, 1);
    }
}


@-webkit-keyframes zoom {
    0% {
        opacity: 0;
        transform:scale(1.2);
    }

    100% {
        opacity: 1;
        transform:scale(1);
    }
}

@keyframes zoom {
    0% {
        opacity: 0;
        transform:scale(1.2);
    }

    100% {
        opacity: 1;
        transform:scale(1);
    }
}


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

    100% {
        opacity: 0;
    }
}

@keyframes out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}






/*card*/
.card_con{
    width: 100%;
    background-color: #152d53;
    text-align: center;
    float: left;
    position: relative;
    padding-bottom: 100px;
    margin-top: -1px;
    padding: 80px 10% 80px;
}

.card{
    float: left;
    width: 100%;
    color: #fff;
}

.card img{
    width: 100%;
}

.card p{
    margin-bottom: 30px;
    margin-top: 15px;
    float: left;
    font-size: 1rem;
    letter-spacing: 1px;
}

.card_wrap{
    overflow: hidden;
}

.card img{
    transition: all 0.8s ease-out;
}

.card img:hover{
    transform:scale(1.2,1.2);

}




.card-showcase {
    position: relative;
    float: left;
    overflow: hidden;
}

.card-showcase .card_wrap img {
    width: 100%;

    -webkit-animation: img .9s ease-out .1s 1 both;
    animation: img .9s ease-out .1s 1 both;
    animation-delay: 0.2s;
}


@keyframes img {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.card-showcase .card_wrap span {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 2;
}

.card-showcase .card_wrap span {
    will-change: transform;
    -webkit-animation: colorRun .9s ease-out .1s 1 both;
    animation: colorRun .9s ease-out .1s 1 both;
    animation-delay: 0.2s;
}

@-webkit-keyframes colorRun {
    0% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -ms-transform: translateX(-100%)
    }

    50% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0)
    }

    100% {
        transform: translateX(101%);
        -webkit-transform: translateX(101%);
        -moz-transform: translateX(101%);
        -o-transform: translateX(101%);
        -ms-transform: translateX(101%);
        animation-timing-fuction: cubic-bezier(.22, .61, .36, 1)
    }
}


@keyframes colorRun {
    0% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -ms-transform: translateX(-100%)
    }

    50% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0)
    }

    100% {
        transform: translateX(101%);
        -webkit-transform: translateX(101%);
        -moz-transform: translateX(101%);
        -o-transform: translateX(101%);
        -ms-transform: translateX(101%);
        animation-timing-fuction: cubic-bezier(.22, .61, .36, 1)
    }
}




@media only screen and (min-width: 481px) {

}





@media only screen and (min-width: 1024px) {


/*card*/
.card{
    float: left;
    width: calc(33.33% - 30px);
    color: #fff;
    margin-right: 30px;
}


.p_top .hero__inner{
    width: calc(100% - 60px);
}

.card_con{
    padding: 80px 30px 80px;
}



}



@media only screen and (min-width: 1400px) {

/*card*/
.card_con{
    padding: 80px 15% 80px;
}

}