/*Animation Start Here*/

.animate_up {
    -webkit-animation: animate_up 2s forwards;
    -moz-animation: animate_up 2s forwards;
    -ms-animation: animate_up 2s forwards;
    -o-animation: animate_up 2s forwards;
    animation: animate_up 2s forwards;
    animation-delay: 0s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -ms-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;
    position: relative;
    bottom: -1500px;
}

@keyframes animate_up {
    from {
        bottom: -1500px;
    }

    to {
        bottom: 0px;
    }
}


.animate_zoom_in_out {
    -webkit-animation: scale 5s linear infinite;
    -moz-animation: scale 5s linear infinite;
    -ms-animation: scale 5s linear infinite;
    -o-animation: scale 5s linear infinite;
    animation: scale 5s linear infinite;
}

@keyframes scale {
    50% {
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
    }
}


.animate_down {
    -webkit-animation: animate_down 2s forwards;
    -moz-animation: animate_down 2s forwards;
    -ms-animation: animate_down 2s forwards;
    -o-animation: animate_down 2s forwards;
    animation: animate_down 2s forwards;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -ms-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    animation-delay: 1.5s;
    position: relative;
    top: -1500%;
}

@-webkit-keyframes animate_down {
    from {
        top: -1500%;
    }

    to {
        top: 0px;
    }
}

@-moz-keyframes animate_down {
    from {
        top: -1500%;
    }

    to {
        top: 0px;
    }
}

@-o-keyframes animate_down {
    from {
        top: -1500%;
    }

    to {
        top: 0px;
    }
}

@keyframes animate_down {
    from {
        top: -1500%;
    }

    to {
        top: 0px;
    }
}

/******NEW ANIMATIONS START HERE*****/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    /*animation-delay: 2s;*/
}
/*****LIGHT SPEEN IN ANIMATION START HERE*****/
.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@keyframes lightSpeedIn {
    0% {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }

    60% {
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }

    80% {
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }

    100% {
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

/*****FADE-IN TOP LEFT ANIMATION START HERE*****/
.animate_fade_in_left {
    -webkit-animation: animate_fade_in_left 2s forwards;
    -moz-animation: animate_fade_in_left 2s forwards;
    -ms-animation: animate_fade_in_left 2s forwards;
    -o-animation: animate_fade_in_left 2s forwards;
    animation: animate_fade_in_left 2s forwards;
    /*-webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -ms-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;*/
    position: relative;
    left: -500%;
    bottom: -500%;
}

@keyframes animate_fade_in_left {
    from {
        left: -500%;
        bottom: -500%;
    }

    to {
        left: 0px;
        bottom: 0px;
    }
}
/*******/
.animate_fade_in_right {
    -webkit-animation: animate_fade_in_right 2s forwards;
    -moz-animation: animate_fade_in_right 2s forwards;
    -ms-animation: animate_fade_in_right 2s forwards;
    -o-animation: animate_fade_in_right 2s forwards;
    animation: animate_fade_in_right 2s forwards;
    /*-webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -ms-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;*/
    position: relative;
    right: -500%;
    top: -500%;
}

@keyframes animate_fade_in_right {
    from {
        right: -500%;
        top: -500%;
    }

    to {
        right: 0px;
        top: 0px;
    }
}
/*****FADE-IN BOTTOM RIGHT ANIMATION START HERE*****/
.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*****flip-in-X animation start here*****/
.flipInX {
    animation-name: flipInX;
    backface-visibility: visible !important;
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

/*****ROTATE-IN-DOWN LEFT ANIMATION START HERE*****/
.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}

@keyframes rotateInDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}

/*****ROLL-IN ANIMATION START HERE*****/
.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

@keyframes rollIn {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }
}

/*****FADE-IN-LEFT ANIMATION START HERE*****/
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/*****Flip-2-top animation start here*****/
.flip-2-hor-top-1 {
    -webkit-animation: flip-2-hor-top-1 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: flip-2-hor-top-1 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@-webkit-keyframes flip-2-hor-top-1 {
    0% {
        -webkit-transform: translateY(0) rotateX(0);
        transform: translateY(0) rotateX(0);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
    }

    100% {
        -webkit-transform: translateY(-100%) rotateX(-180deg);
        transform: translateY(-100%) rotateX(-180deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
    }
}

@keyframes flip-2-hor-top-1 {
    0% {
        -webkit-transform: translateY(0) rotateX(0);
        transform: translateY(0) rotateX(0);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
    }

    100% {
        -webkit-transform: translateY(-100%) rotateX(-180deg);
        transform: translateY(-100%) rotateX(-180deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
    }
}

/******NEW ANIMATIONS END HERE*****/
/*****ANIMATION RIGHT START HERE*****/
.animate_right {
    -webkit-animation: animate_right 2s forwards;
    -moz-animation: animate_right 2s forwards;
    -ms-animation: animate_right 2s forwards;
    -o-animation: animate_right 2s forwards;
    animation: animate_right 2s forwards;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -ms-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;
    position: relative;
    right: -500%;
}

@keyframes animate_right {
    from {
        right: -500%;
    }

    to {
        right: 0px;
    }
}

/*Animation End Here*/
.cstBgImg {
    float: left;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 585px;
    min-height: 750px;
}

.banner1 .bnr1_Ttl {
    margin: 3% 0 0 0;
}

.bnr2_Ttl {
    position: absolute;
    right: 0;
    top: 12%;
    /*margin: 6% 0 0 63%;*/
}

.bnr3_Ttl {
    position: absolute;
    top: 26%;
}

.bnr1_btn,
.bnr2_btn,
.bnr3_btn {
    position: absolute;
    right: 13%;
    bottom: 7%;
}

/*#Media Query Start Here*/

@media (min-width: 100px) and (max-width: 575.99px) {
    .cstBgImg {
        min-height: 190px;
    }

    .bnrTtl img {
        width: 60%;
    }

    .bnr1_Ttl img {
        margin: 3% 0 0 0;
    }

    .bnrBtn {
        width: 25%;
        right: 14%;
        bottom: 15%;
    }
}

@media (min-width: 576px) and (max-width: 767.99px) {
    .cstBgImg {
        min-height: 250px;
    }

    .bnrTtl img {
        width: 60%;
    }

    .bnr1_Ttl img {
        margin: 8% 0 0 0;
    }

    .bnr2_Ttl,
    .bnr3_Ttl {
        top: 50%;
        transform: translateY(-50%);
    }

    .bnrBtn {
        width: 25%;
        right: 14%;
        bottom: 15%;
    }
}

@media (min-width: 768px) and (max-width: 991.99px) {
    .cstBgImg {
        min-height: 310px;
    }

    .bnrTtl img {
        width: 60%;
    }

    .bnr1_Ttl img {
        margin: 8% 0 0 0;
    }

    .bnr2_Ttl,
    .bnr3_Ttl {
        top: 50%;
        transform: translateY(-50%);
    }

    .bnrBtn {
        width: 19%;
        right: 13%;
        bottom: 9%;
    }
}

@media (min-width: 992px) and (max-width: 1000.99px) {
    .cstBgImg {
        min-height: 360px;
    }

    .bnrTtl img {
        width: 50%;
    }

    .bnr1_Ttl img {
        margin: 8% 0 0 0;
    }

    .bnr2_Ttl {
        width: 100%;
        float: left;
    }

    .bnr2_Ttl,
    .bnr3_Ttl {
        top: 50%;
        transform: translateY(-50%);
    }

    .bnrBtn {
        width: 21%;
        right: 14%;
        bottom: 9%;
    }
}

@media (min-width: 1001px) and (max-width: 1100.99px) {
    .cstBgImg {
        min-height: 360px;
    }

    .bnrTtl img {
        width: 50%;
    }

    .bnr1_Ttl img {
        margin: 8% 0 0 0;
    }

    .bnr2_Ttl {
        width: 100%;
        float: left;
    }

    .bnr2_Ttl,
    .bnr3_Ttl {
        top: 50%;
        transform: translateY(-50%);
    }
}

@media (min-width: 1101px) and (max-width: 1200.99px) {
    .cstBgImg {
        min-height: 450px;
    }

    .bnrTtl img {
        width: 50%;
    }

    .bnr1_Ttl img {
        margin: 8% 0 0 0;
    }

    .bnr2_Ttl {
        width: 100%;
        float: left;
    }

    .bnr2_Ttl,
    .bnr3_Ttl {
        top: 50%;
        transform: translateY(-50%);
    }

    .bnrBtn {
        width: 17%;
        right: 14%;
        bottom: 9%;
    }
}

@media (min-width: 1201px) and (max-width: 1300.99px) {
    .cstBgImg {
        min-height: 450px;
    }

    .bnrTtl img {
        width: 50%;
    }

    .bnr1_Ttl img {
        margin: 8% 0 0 0;
    }

    .bnr2_Ttl {
        width: 100%;
        float: left;
    }

    .bnr2_Ttl,
    .bnr3_Ttl {
        top: 50%;
        transform: translateY(-50%);
    }

    .bnrBtn {
        width: 17%;
        right: 14%;
        bottom: 9%;
    }
}

@media (min-width: 1301px) and (max-width: 1400.99px) {
    .cstBgImg {
        min-height: 500px;
    }

    .bnrTtl img {
        width: 50%;
    }

    .bnr1_Ttl img {
        margin: 8% 0 0 0;
    }

    .bnr2_Ttl {
        width: 100%;
        float: left;
    }

    .bnr2_Ttl,
    .bnr3_Ttl {
        top: 50%;
        transform: translateY(-50%);
    }

    .bnrBtn {
        width: 17%;
        right: 14%;
        bottom: 9%;
    }
}

@media (min-width: 1401px) and (max-width: 1500.99px) {
    .cstBgImg {
        min-height: 600px;
    }

    .bnrTtl img {
        width: 50%;
    }

    .bnr1_Ttl img {
        margin: 8% 0 0 0;
    }

    .bnr2_Ttl {
        width: 100%;
        float: left;
    }

    .bnr2_Ttl,
    .bnr3_Ttl {
        top: 50%;
        transform: translateY(-50%);
    }

    .bnrBtn {
        width: 17%;
        right: 14%;
        bottom: 9%;
    }
}

@media (min-width: 1501px) and (max-width: 1600.99px) {
    .cstBgImg {
        min-height: 590px;
    }

    .bnr2_Ttl {
        top: 4%;
    }

    .bnr3_Ttl {
        top: 50%;
        transform: translateY(-50%);
    }

    .bnrBtn {
        width: 17%;
        right: 9%;
        bottom: 5%;
    }
}

@media (min-width: 1601px) and (max-width: 1800.99px) {
    .cstBgImg {
        min-height: 590px;
    }

    .bnr2_Ttl {
        top: 4%;
    }

    .bnr3_Ttl {
        top: 50%;
        transform: translateY(-50%);
    }

    .bnrBtn {
        width: 13%;
        right: 14%;
        bottom: 5%;
    }
}

/*#Media Query End Here */