﻿.view-animate.ng-enter {
    display: block;
    -webkit-animation: viewShow .5s;
    animation: viewShow .5s;
}

.view-animate.ng-leave {
    -webkit-animation: flyout .5s;
    animation: flyout .5s;
    display: none;
}

.view-animate.ng-enter {
    opacity: 0;
}

    .view-animate.ng-enter.ng-enter-active {
        opacity: 1;
    }

.view-animate.ng-leave.ng-leave-active {
    opacity: 0;
}



@-webkit-keyframes viewShow {
    0% {
        opacity: 0;
        -webkit-transform: translate(50px);
        -ms-transform: translateY(50px);
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes viewShow {
    0% {
        opacity: 0;
        -webkit-transform: translate(50px);
        -ms-transform: translateY(50px);
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

/*
==============================================
slideDown
==============================================
*/


.slideDown {
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@keyframes slideDown {
    0% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes slideDown {
    0% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

/*
==============================================
slideUp
==============================================
*/


.slideUp {
    animation-name: slideUp;
    -webkit-animation-name: slideUp;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@keyframes slideUp {
    0% {
        transform: translateY(100%);
    }

    50% {
        transform: translateY(-8%);
    }

    65% {
        transform: translateY(4%);
    }

    80% {
        transform: translateY(-4%);
    }

    95% {
        transform: translateY(2%);
    }

    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
    }

    50% {
        -webkit-transform: translateY(-8%);
    }

    65% {
        -webkit-transform: translateY(4%);
    }

    80% {
        -webkit-transform: translateY(-4%);
    }

    95% {
        -webkit-transform: translateY(2%);
    }

    100% {
        -webkit-transform: translateY(0%);
    }
}

/*
==============================================
slideLeft
==============================================
*/


.slideLeft {
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}

@keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }

    50% {
        transform: translateX(-8%);
    }

    65% {
        transform: translateX(4%);
    }

    80% {
        transform: translateX(-4%);
    }

    95% {
        transform: translateX(2%);
    }

    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
    }

    50% {
        -webkit-transform: translateX(-8%);
    }

    65% {
        -webkit-transform: translateX(4%);
    }

    80% {
        -webkit-transform: translateX(-4%);
    }

    95% {
        -webkit-transform: translateX(2%);
    }

    100% {
        -webkit-transform: translateX(0%);
    }
}

/*
==============================================
slideRight
==============================================
*/


.slideRight {
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }

    50% {
        transform: translateX(8%);
    }

    65% {
        transform: translateX(-4%);
    }

    80% {
        transform: translateX(4%);
    }

    95% {
        transform: translateX(-2%);
    }

    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }

    50% {
        -webkit-transform: translateX(8%);
    }

    65% {
        -webkit-transform: translateX(-4%);
    }

    80% {
        -webkit-transform: translateX(4%);
    }

    95% {
        -webkit-transform: translateX(-2%);
    }

    100% {
        -webkit-transform: translateX(0%);
    }
}

/*
==============================================
slideExpandUp
==============================================
*/


.slideExpandUp {
    animation-name: slideExpandUp;
    -webkit-animation-name: slideExpandUp;
    animation-duration: 1.6s;
    -webkit-animation-duration: 1.6s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease -out;
    visibility: visible !important;
}

@keyframes slideExpandUp {
    0% {
        transform: translateY(100%) scaleX(0.5);
    }

    30% {
        transform: translateY(-8%) scaleX(0.5);
    }

    40% {
        transform: translateY(2%) scaleX(0.5);
    }

    50% {
        transform: translateY(0%) scaleX(1.1);
    }

    60% {
        transform: translateY(0%) scaleX(0.9);
    }

    70% {
        transform: translateY(0%) scaleX(1.05);
    }

    80% {
        transform: translateY(0%) scaleX(0.95);
    }

    90% {
        transform: translateY(0%) scaleX(1.02);
    }

    100% {
        transform: translateY(0%) scaleX(1);
    }
}

@-webkit-keyframes slideExpandUp {
    0% {
        -webkit-transform: translateY(100%) scaleX(0.5);
    }

    30% {
        -webkit-transform: translateY(-8%) scaleX(0.5);
    }

    40% {
        -webkit-transform: translateY(2%) scaleX(0.5);
    }

    50% {
        -webkit-transform: translateY(0%) scaleX(1.1);
    }

    60% {
        -webkit-transform: translateY(0%) scaleX(0.9);
    }

    70% {
        -webkit-transform: translateY(0%) scaleX(1.05);
    }

    80% {
        -webkit-transform: translateY(0%) scaleX(0.95);
    }

    90% {
        -webkit-transform: translateY(0%) scaleX(1.02);
    }

    100% {
        -webkit-transform: translateY(0%) scaleX(1);
    }
}

/*
==============================================
expandUp
==============================================
*/


.expandUp {
    animation-name: expandUp;
    -webkit-animation-name: expandUp;
    animation-duration: 0.7s;
    -webkit-animation-duration: 0.7s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@keyframes expandUp {
    0% {
        transform: translateY(100%) scale(0.6) scaleY(0.5);
    }

    60% {
        transform: translateY(-7%) scaleY(1.12);
    }

    75% {
        transform: translateY(3%);
    }

    100% {
        transform: translateY(0%) scale(1) scaleY(1);
    }
}

@-webkit-keyframes expandUp {
    0% {
        -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
    }

    60% {
        -webkit-transform: translateY(-7%) scaleY(1.12);
    }

    75% {
        -webkit-transform: translateY(3%);
    }

    100% {
        -webkit-transform: translateY(0%) scale(1) scaleY(1);
    }
}
/*
==============================================
open/close pop up
==============================================
*/

.popUp {
    animation-name: popUp;
    -webkit-animation-name: popUp;
    animation-duration: .8s;
    -webkit-animation-duration: .8s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    display: block !important;
}

@keyframes popUp {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes popUp {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.popDown {
    animation-name: popDown;
    -webkit-animation-name: popDown;
    animation-duration: .8s;
    -webkit-animation-duration: .8s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}

@keyframes popDown {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0.0;
    }
}

@-webkit-keyframes popDown {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0.0;
    }
}

/*
==============================================
fadeIn
==============================================
*/

.fadeIn {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-duration: .4s;
    -webkit-animation-duration: .4s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    display: block !important;
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/*
==============================================
fadeOut
==============================================
*/

.fadeOut {
    animation-name: fadeOut;
    -webkit-animation-name: fadeOut;
    animation-duration: .4s;
    -webkit-animation-duration: .4s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}

@keyframes fadeOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0.0;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0.0;
    }
}

/*
==============================================
expandOpen
==============================================
*/

.expandOpen {
    animation-name: expandOpen;
    -webkit-animation-name: expandOpen;
    animation-duration: .4s;
    -webkit-animation-duration: .4s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    visibility: visible !important;
}

@keyframes expandOpen {
    0% {
        transform: scale(1.8);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes expandOpen {
    0% {
        transform: scale(1.8);
    }

    100% {
        transform: scale(1);
    }
}

/*
==============================================
expandClose
==============================================
*/

.expandClose {
    animation-name: expandClose;
    -webkit-animation-name: expandClose;
    animation-duration: .4s;
    -webkit-animation-duration: .4s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}

@keyframes expandClose {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.8);
    }
}

@-webkit-keyframes expandClose {
    0% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.8);
    }
}

/*
==============================================
bigEntrance
==============================================
*/


.bigEntrance {
    animation-name: bigEntrance;
    -webkit-animation-name: bigEntrance;
    animation-duration: 1.6s;
    -webkit-animation-duration: 1.6s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    visibility: visible !important;
}

@keyframes bigEntrance {
    0% {
        transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }

    30% {
        transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
        opacity: 1;
    }

    45% {
        transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }

    60% {
        transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }

    75% {
        transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }

    90% {
        transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}

@-webkit-keyframes bigEntrance {
    0% {
        -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }

    30% {
        -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
        opacity: 1;
    }

    45% {
        -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }

    60% {
        -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }

    75% {
        -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }

    90% {
        -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}

/*
==============================================
hatch
==============================================
*/

.hatch {
    animation-name: hatch;
    -webkit-animation-name: hatch;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    visibility: visible !important;
}

@keyframes hatch {
    0% {
        transform: rotate(0deg) scaleY(0.6);
    }

    20% {
        transform: rotate(-2deg) scaleY(1.05);
    }

    35% {
        transform: rotate(2deg) scaleY(1);
    }

    50% {
        transform: rotate(-2deg);
    }

    65% {
        transform: rotate(1deg);
    }

    80% {
        transform: rotate(-1deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes hatch {
    0% {
        -webkit-transform: rotate(0deg) scaleY(0.6);
    }

    20% {
        -webkit-transform: rotate(-2deg) scaleY(1.05);
    }

    35% {
        -webkit-transform: rotate(2deg) scaleY(1);
    }

    50% {
        -webkit-transform: rotate(-2deg);
    }

    65% {
        -webkit-transform: rotate(1deg);
    }

    80% {
        -webkit-transform: rotate(-1deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}


/*
==============================================
bounce
==============================================
*/


.bounce {
    animation-name: bounce;
    -webkit-animation-name: bounce;
    animation-duration: 1.6s;
    -webkit-animation-duration: 1.6s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
}

@keyframes bounce {
    0% {
        transform: translateY(0%) scaleY(0.6);
    }

    60% {
        transform: translateY(-100%) scaleY(1.1);
    }

    70% {
        transform: translateY(0%) scaleY(0.95) scaleX(1.05);
    }

    80% {
        transform: translateY(0%) scaleY(1.05) scaleX(1);
    }

    90% {
        transform: translateY(0%) scaleY(0.95) scaleX(1);
    }

    100% {
        transform: translateY(0%) scaleY(1) scaleX(1);
    }
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translateY(0%) scaleY(0.6);
    }

    60% {
        -webkit-transform: translateY(-100%) scaleY(1.1);
    }

    70% {
        -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
    }

    80% {
        -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
    }

    90% {
        -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
    }

    100% {
        -webkit-transform: translateY(0%) scaleY(1) scaleX(1);
    }
}


/*
==============================================
pulse
==============================================
*/

.pulse {
    animation-name: pulse;
    -webkit-animation-name: pulse;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0.95);
        opacity: 0.7;
    }

    50% {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.95);
        opacity: 0.7;
    }
}

/*
==============================================
floating
==============================================
*/

.floating {
    animation-name: floating;
    -webkit-animation-name: floating;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0%);
    }

    50% {
        transform: translateY(8%);
    }

    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);
    }

    50% {
        -webkit-transform: translateY(8%);
    }

    100% {
        -webkit-transform: translateY(0%);
    }
}

/*
==============================================
tossing
==============================================
*/

.tossing {
    animation-name: tossing;
    -webkit-animation-name: tossing;
    animation-duration: 2.5s;
    -webkit-animation-duration: 2.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
    0% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(4deg);
    }

    100% {
        transform: rotate(-4deg);
    }
}

@-webkit-keyframes tossing {
    0% {
        -webkit-transform: rotate(-4deg);
    }

    50% {
        -webkit-transform: rotate(4deg);
    }

    100% {
        -webkit-transform: rotate(-4deg);
    }
}

/*
==============================================
pullUp
==============================================
*/

.pullUp {
    animation-name: pullUp;
    -webkit-animation-name: pullUp;
    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
}

@keyframes pullUp {
    0% {
        transform: scaleY(0.1);
    }

    40% {
        transform: scaleY(1.02);
    }

    60% {
        transform: scaleY(0.98);
    }

    80% {
        transform: scaleY(1.01);
    }

    100% {
        transform: scaleY(0.98);
    }

    80% {
        transform: scaleY(1.01);
    }

    100% {
        transform: scaleY(1);
    }
}

@-webkit-keyframes pullUp {
    0% {
        -webkit-transform: scaleY(0.1);
    }

    40% {
        -webkit-transform: scaleY(1.02);
    }

    60% {
        -webkit-transform: scaleY(0.98);
    }

    80% {
        -webkit-transform: scaleY(1.01);
    }

    100% {
        -webkit-transform: scaleY(0.98);
    }

    80% {
        -webkit-transform: scaleY(1.01);
    }

    100% {
        -webkit-transform: scaleY(1);
    }
}

/*
==============================================
pullDown
==============================================
*/

.pullDown {
    animation-name: pullDown;
    -webkit-animation-name: pullDown;
    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
}

@keyframes pullDown {
    0% {
        transform: scaleY(0.1);
    }

    40% {
        transform: scaleY(1.02);
    }

    60% {
        transform: scaleY(0.98);
    }

    80% {
        transform: scaleY(1.01);
    }

    100% {
        transform: scaleY(0.98);
    }

    80% {
        transform: scaleY(1.01);
    }

    100% {
        transform: scaleY(1);
    }
}

@-webkit-keyframes pullDown {
    0% {
        -webkit-transform: scaleY(0.1);
    }

    40% {
        -webkit-transform: scaleY(1.02);
    }

    60% {
        -webkit-transform: scaleY(0.98);
    }

    80% {
        -webkit-transform: scaleY(1.01);
    }

    100% {
        -webkit-transform: scaleY(0.98);
    }

    80% {
        -webkit-transform: scaleY(1.01);
    }

    100% {
        -webkit-transform: scaleY(1);
    }
}

/*
==============================================
stretchLeft
==============================================
*/

.stretchLeft {
    animation-name: stretchLeft;
    -webkit-animation-name: stretchLeft;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
}

@keyframes stretchLeft {
    0% {
        transform: scaleX(0.3);
    }

    40% {
        transform: scaleX(1.02);
    }

    60% {
        transform: scaleX(0.98);
    }

    80% {
        transform: scaleX(1.01);
    }

    100% {
        transform: scaleX(0.98);
    }

    80% {
        transform: scaleX(1.01);
    }

    100% {
        transform: scaleX(1);
    }
}

@-webkit-keyframes stretchLeft {
    0% {
        -webkit-transform: scaleX(0.3);
    }

    40% {
        -webkit-transform: scaleX(1.02);
    }

    60% {
        -webkit-transform: scaleX(0.98);
    }

    80% {
        -webkit-transform: scaleX(1.01);
    }

    100% {
        -webkit-transform: scaleX(0.98);
    }

    80% {
        -webkit-transform: scaleX(1.01);
    }

    100% {
        -webkit-transform: scaleX(1);
    }
}

/*
==============================================
stretchRight
==============================================
*/

.stretchRight {
    animation-name: stretchRight;
    -webkit-animation-name: stretchRight;
    animation-duration: .5s;
    -webkit-animation-duration: .5s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
}

@keyframes stretchRight {
    0% {
        transform: scaleX(0.3);
    }

    50% {
        transform: scaleX(0.6);
    }

    100% {
        transform: scaleX(1);
    }
}

@-webkit-keyframes stretchRight {
    0% {
        -webkit-transform: scaleX(0.3);
    }

    50% {
        -webkit-transform: scaleX(0.6);
    }

    100% {
        -webkit-transform: scaleX(1);
    }
}


/*
==============================================
Fly
==============================================
*/

.flyIn {
    -webkit-animation: flyin .5s;
    animation: flyin .5s;
    display: block;
}


@-webkit-keyframes flyin {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes flyin {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.flyOut {
    -webkit-animation: flyout .5s;
    animation: flyout .5s;
}

@-webkit-keyframes flyout {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        display: none;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@keyframes flyout {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        display: none;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

/*
==============================================
flip - Horizontal
==============================================
*/

.flipIn-horizontal {
    -webkit-animation: flipin-horizontal .5s;
    animation: flipin-horizontal .5s;
}

.flipIn-horizontal_long {
    -webkit-animation: flipin-horizontal 1s;
    animation: flipin-horizontal 1s;
}

.flipIn-horizontal_toolong {
    -webkit-animation: flipin-horizontal 2s;
    animation: flipin-horizontal 2s;
}

@-webkit-keyframes flipin-horizontal {
    0% {
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes flipin-horizontal {
    0% {
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

.flipOut-horizontal {
    -webkit-animation: flipout-horizontal .5s;
    animation: flipout-horizontal .5s;
}

@-webkit-keyframes flipout-horizontal {
    0% {
        opacity: 1;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }
}

@keyframes flipout-horizontal {
    0% {
        opacity: 1;
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotateY(90deg);
        -ms-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }
}


/*
==============================================
flip - Vertical
==============================================
*/

.flipIn-vertical {
    -webkit-animation: flipin-vertical .5s;
    animation: flipin-vertical .5s;
}

.flipIn-vertical_long {
    -webkit-animation: flipin-vertical 1.5s;
    animation: flipin-vertical 1.5s;
}

@-webkit-keyframes flipin-vertical {
    0% {
        opacity: 0;
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
}

@keyframes flipin-vertical {
    0% {
        opacity: 0;
        -webkit-transform: rotateX(90deg);
        -ms-transform: rotateX(90deg);
        transform: rotateX(90deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
}


.flipOut-vertical {
    -webkit-animation: flipout-vertical .5s;
    animation: flipout-vertical .5s;
}

@-webkit-keyframes flipout-vertical {
    0% {
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
    }
}

@keyframes flipout-vertical {
    0% {
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotateX(90deg);
        -ms-transform: rotateX(90deg);
        transform: rotateX(90deg);
    }
}


@-webkit-keyframes fadeInScale {

    0% {
        -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
        opacity: 0.8;
    }

    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeInScale {

    0% {
        -webkit-transform: scale(0.99);
        -ms-transform: scale(0.99);
        transform: scale(0.99);
        opacity: 0.8;
    }

    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}


/*
==============================================
highlight
==============================================
*/
.highlighter {
    animation-name: highlighting;
    -webkit-animation-name: highlighting;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes highlighting {
    0% {
        transform: scale(0.95);
        background-color: #f6f5f5;
    }

    50% {
        transform: scale(1);
        background-color: #FFFF66;
    }

    100% {
        transform: scale(0.95);
        background-color: #f6f5f5;
    }
}

@-webkit-keyframes highlighting {
    0% {
        -webkit-transform: scale(0.95);
        background-color: #f6f5f5;
    }

    50% {
        -webkit-transform: scale(1);
        background-color: #FFFF66;
    }

    100% {
        -webkit-transform: scale(0.95);
        background-color: #f6f5f5;
    }
}


.tooltip {
    position: relative;
    display: inline;
}

    .tooltip:after {
        display: block;
        visibility: hidden;
        position: absolute;
        bottom: 0;
        left: 20%;
        opacity: 0;
        content: attr(data-tool); /* might also use attr(title) */
        height: auto;
        min-width: 100px;
        padding: 8px;
        z-index: 99999;
        color: #000;
        text-decoration: none;
        text-align: center;
        background: rgba(240,240,240,0.85);
    }

    .tooltip.small:after {
        padding: 2px !important;
    }

    .tooltip:before {
        z-index: 99999;
        position: absolute;
        visibility: hidden;
        width: 0;
        height: 0;
        left: 50%;
        bottom: 0;
        opacity: 0;
        content: "";
        border-style: solid;
        border-width: 8px 7px 0 7px;
        border-color: rgba(240,240,240,0.85) transparent transparent transparent;
    }

    .tooltip:hover:after {
        visibility: visible;
        opacity: 1;
        bottom: 20px;
    }

    .tooltip:hover:before {
        visibility: visible;
        opacity: 1;
        bottom: 14px;
    }

    .tooltip.top-Mleft:hover:after {
        visibility: visible;
        opacity: 1;
        bottom: 28px;
        left: -40%;
    }

    .tooltip.top-Mleft:hover:before {
        visibility: visible;
        opacity: 1;
        bottom: 20px;
        left: 15%;
    }

    .tooltip.top-Mright:hover:after {
        visibility: visible;
        opacity: 1;
        bottom: 28px;
        left: -450%;
    }

    .tooltip.top-Mright:hover:before {
        visibility: visible;
        opacity: 1;
        bottom: 20px;
        left: 15%;
    }

    .tooltip.top-Mmiddle:hover:after {
        visibility: visible;
        opacity: 1;
        bottom: 28px;
        left: -250%;
    }

    .tooltip.top-Mmiddle:hover:before {
        visibility: visible;
        opacity: 1;
        bottom: 20px;
        left: 15%;
    }

    .tooltip.animate:after, .tooltip.animate:before {
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }


    /* tips on bottom */
    .tooltip.bottom:after {
        bottom: auto;
        top: 0;
        left: -50%;
    }

    .tooltip.bottom:hover:after {
        top: 28px;
    }

    .tooltip.bottom:before {
        border-width: 0 7px 8.7px 7px;
        border-color: transparent transparent rgba(240,240,240,0.85) transparent;
        top: 0;
        left: 45%;
    }

    .tooltip.bottom:hover:before {
        top: 20px;
    }

    /* icon tool*/
    .tooltip.bottom-icon:after {
        left: -200%;
    }

    .tooltip.bottom-icon:before {
        left: 15%;
    }

    .tooltip.bottom-icon:hover:after {
        top: 25px;
    }

    .tooltip.bottom-icon:hover:before {
        top: 17px;
    }

    /* Bottom longer*/
    .tooltip.bottom.bottom1:hover:after {
        top: 40px;
    }

    .tooltip.bottom.bottom1:hover:before {
        top: 32px;
    }

    .tooltip.bottom.bottom2:hover:after {
        top: 47px;
    }

    .tooltip.bottom.bottom2:hover:before {
        top: 39px;
    }

    /* tips on the right */
    .tooltip.right:after {
        left: 100%;
        bottom: -45%;
    }

    .tooltip.right:hover:after {
        left: 110%;
        bottom: -45%;
    }

    .tooltip.right:before {
        border-width: 7px 10px 7px 0;
        border-color: transparent rgba(240,240,240,0.85) transparent transparent;
        left: 90%;
        bottom: 2%;
    }

    .tooltip.right:hover:before {
        left: 100%;
        bottom: 2%;
    }




    /* tips on the left */
    .tooltip.left:after {
        left: auto;
        right: 100%;
        bottom: -45%;
    }

    .tooltip.left:hover:after {
        right: 110%;
        bottom: -45%;
    }

    .tooltip.left:before {
        border-width: 7px 0 7px 10px;
        border-color: transparent transparent transparent rgba(240,240,240,0.85);
        left: auto;
        right: 90%;
        bottom: 2%;
    }

    .tooltip.left:hover:before {
        right: 100%;
        bottom: 2%;
    }

    /* tips on the left bottom*/
    .tooltip.left-bottom:after {
        left: auto;
        right: 100%;
        bottom: -45%;
    }

    .tooltip.left-bottom:hover:after {
        right: -50%;
        bottom: -280%;
    }

.map.tooltip.left-bottom:hover:after {
    right: -50%;
    bottom: -180%;
}

.tooltip.left-bottom:before {
    border-width: 0 7px 8.7px 7px;
    border-color: transparent transparent rgba(240,240,240,0.85) transparent;
    left: auto;
    right: 90%;
    bottom: -50%;
}

.tooltip.left-bottom:hover:before {
    right: 10%;
    bottom: -75%;
}

.map.tooltip.left-bottom:hover:before {
    right: 10%;
    bottom: -50%;
}


/* tooltip colors (add your own!) */
.tooltip.blue:after {
    background: #5f87c2;
}

.tooltip.blue:before {
    border-color: #5f87c2 transparent transparent transparent;
}

.tooltip.bottom.blue:before {
    border-color: transparent transparent #5f87c2 transparent;
}

.tooltip.right.blue:before {
    border-color: transparent #5f87c2 transparent transparent;
}

.tooltip.left.blue:before {
    border-color: transparent transparent transparent #5f87c2;
}



/* input field tooltips */
input + .fieldtip {
    visibility: hidden;
    position: relative;
    bottom: 0;
    left: 15px;
    opacity: 0;
    content: attr(data-tool);
    height: auto;
    min-width: 100px;
    padding: 5px 8px;
    z-index: 9999;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    background: rgba(0,0,0,0.85);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

    input + .fieldtip:after {
        display: block;
        position: absolute;
        visibility: hidden;
        content: '';
        width: 0;
        height: 0;
        top: 8px;
        left: -8px;
        border-style: solid;
        border-width: 4px 8px 4px 0;
        border-color: transparent rgba(0,0,0,0.75) transparent transparent;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

input:focus + .fieldtip, input:focus + .fieldtip:after {
    visibility: visible;
    opacity: 1;
}



/* Switch buttons */
.switch {
    position: relative;
    display: block;
    vertical-align: top;
    width: 38px;
    height: 14px;
    padding: 3px;
    margin: 0 auto;
    /*background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);*/
    border-radius: 18px;
    /*box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);*/
    cursor: pointer;
}

.switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    text-transform: uppercase;
    background: #999;
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}

    .switch-label:before, .switch-label:after {
        position: absolute;
        top: 50%;
        margin-top: -.5em;
        line-height: 1;
        -webkit-transition: inherit;
        -moz-transition: inherit;
        -o-transition: inherit;
        transition: inherit;
    }

    .switch-label:before {
        content: attr(data-off);
        right: 6px;
        color: #fff;
    }

    .switch-label:after {
        content: attr(data-on);
        left: 5px;
        color: #FFFFFF;
        text-shadow: 0 1px rgba(0, 0, 0, 0.2);
        opacity: 0;
    }

.switch-input:checked ~ .switch-label {
    background: #2ABB9B;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

    .switch-input:checked ~ .switch-label:before {
        opacity: 0;
    }

    .switch-input:checked ~ .switch-label:after {
        opacity: 1;
    }

.switch-handle {
    position: absolute;
    top: 7px;
    left: 8px;
    width: 6px;
    height: 6px;
    background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
    background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
    border-radius: 100%;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

    .switch-handle:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -5px 0 0 -5px;
        width: 9px;
        height: 9px;
        background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
        background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
        border-radius: 6px;
        box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
    }

.switch-input:checked ~ .switch-handle {
    left: 32px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

/* Transition
========================== */
.switch-label, .switch-handle {
    transition: All 0.3s ease;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
}

/*Language Switch*/
.lang-switch-container {
    float: left;
    margin-top: 4px;
}

.lang-switch {
    background: #808080 none repeat scroll 0 0;
    height: 30px;
    position: relative;
}

.lang-switch-label {
    color: #fff;
    cursor: pointer;
    float: left;
    font-size: 11px;
    line-height: 30px;
    position: relative;
    text-align: center;
    width: 98px;
    max-width: 98px;
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

    .lang-switch-label:active {
        font-weight: bold;
    }

.lang-switch-input {
    display: none;
}

    .lang-switch-input:checked + .lang-switch-label {
        -webkit-transition: 0.15s ease-out;
        -moz-transition: 0.15s ease-out;
        -o-transition: 0.15s ease-out;
        transition: 0.15s ease-out;
    }

    .lang-switch-input:checked + .lang-switch-label-on ~ .lang-switch-selection {
        left: 0;
    }

    .lang-switch-input:checked:last-of-type ~ .lang-switch-selection {
        left: 99px;
    }

.lang-switch-selection {
    background: #ff8800 none repeat scroll 0 0;
    display: block;
    height: 30px;
    left: 0;
    position: absolute;
    width: 100px;
    z-index: 1;
    -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
}



/*.page-dataview-parentcontainer {
    position: relative;
    width: 100%;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.page-dataview-container {
    width: 100%;
    height: 100%;      
	position: relative;
    -webkit-transition: -webkit-transform .8s;
    transition: transform .8s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}   

    .page-dataview-container .data-view {
		position: absolute;
		width: 100%;
		height: 100%;
		position: absolute;
		background: #f9f9f9;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		overflow:auto;
    }

.page-dataview-container .data-view.front { 
  z-index: 2;
}

.page-dataview-container .data-view.back {
  z-index: 1;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.always-show .data-view
{
     -webkit-backface-visibility: visible; 
    -moz-backface-visibility: visible;
    -ms-backface-visibility: visible;
    -o-backface-visibility: visible;
     backface-visibility: visible; 
}
 .page-dataview-container.flipped {
         -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
    }*/


.statuscontainer{    
     animation-name: showtoggler;
    -webkit-animation-name: showtoggler;
    animation-duration: .3s;
    -webkit-animation-duration: .3s;  
    transform:scale(1);
    -webkit-transform:scale(1);  
    margin-right:5px;
}

.right-layout  .statuscontainer{
    margin-right:0;
    margin-left:5px;
}

.statuscontainer.statushide{
     animation-name: hidetoggler;
    -webkit-animation-name: hidetoggler;
    animation-duration: .3s;
    -webkit-animation-duration: .3s;   
    transform:scale(0);  
    -webkit-transform:scale(0);   
}

@keyframes hidetoggler {
    0% {
        transform: perspective( 1200px ) rotateY(145deg);        
        margin-right: -15px;
    }

    100% {
        transform: perspective( 1200px ) rotateY(115deg);        
        margin-right: -65px;
    }
}

@-webkit-keyframes hidetoggler {
    0% {
        -webkit-transform: perspective( 1200px ) rotateY(145deg);        
        margin-right: -15px;
    }

    100% {
        -webkit-transform: perspective( 1200px ) rotateY(115deg);        
        margin-right: -65px;
    }
}


@keyframes showtoggler {  

    0% {
        transform: perspective( 1200px ) rotateY(115deg);        
        margin-right: -65px;
    }
    
    100% {
        transform: perspective( 1200px ) rotateY(175deg);        
        margin-right: 0;
    }
}

@-webkit-keyframes showtoggler {

    0% {
        -webkit-transform: perspective( 1200px ) rotateY(115deg);        
        margin-right: -65px;
    }
    
    100% {
         -webkit-transform: perspective( 1200px ) rotateY(175deg);        
        margin-right: 0;
    }  
}


.page-dataview-parentcontainer {
   position: relative;
   -webkit-perspective: 1200px;
   -moz-perspective: 1200px;
   -ms-perspective: 1200px;
   -o-perspective: 1200px;
   perspective: 1200px;
    width: 100%;
}
.page-dataview-container {
   width: 100%; 
   height: 100%;
   position: relative;
   -webkit-transform-style: preserve-3d;
   -webkit-transition: 0.8s;
   -moz-transform-style: preserve-3d;
   -moz-transition: 0.8s;
   -ms-transform-style: preserve-3d;
   -ms-transition: 0.8s;
   -o-transform-style: preserve-3d;
   -o-transition: 0.8s;
   transform-style: preserve-3d;
   transition: 0.8s;
}
.page-dataview-parentcontainer.flipped .page-dataview-container {
    -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);	
   transform: rotateY(180deg);					
}
.page-dataview-container .data-view {
    position: absolute;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;
   top: 0;
   left: 0;
   width:100%;
   background: #f9f9f9;
}
.always-show .page-dataview-container .data-view {
   -webkit-backface-visibility: visible;
   -moz-backface-visibility: visible;
   -ms-backface-visibility: visible;
   -o-backface-visibility: visible;
   backface-visibility: visible;
}
.front {   
   z-index: 10;
}
.back {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);   
   display: none;
}
.page-dataview-parentcontainer.flipped .front {
   z-index: 0;
   display:none;
} 

.page-dataview-parentcontainer.flipped .back {
   display:block;  
} 



/*Orix Slider Animation*/

#services-slider {
    margin:0 auto; /*center-aligned*/
    width:100%;/*width:400px;*/
    max-width:900px;
    position:relative;
    -webkit-user-select: none;
    user-select:none;
}

#services-slider div.inner {
    /*the followings should not be changed */
    position:relative;
    overflow:hidden;
    padding:2px 0;
    margin:0;
}

 
#services-slider div.inner ul {
    /*the followings should not be changed */
    white-space:nowrap;
    position:relative;
    left:0; top:0;
    list-style:none;
    font-size:0;
    padding:0;
    margin:0;
    float:left!important;
    width:auto!important;
    height:auto!important;
}

#services-slider ul li {
    display:inline-block;
    *display:inline!important; /*IE7 hack*/
    border:0px;
    margin:0;
    margin-right:10px; /* Spacing between thumbs*/
    transition:border-color 0.3s;
    box-sizing:content-box;
    text-align:center;
    vertical-align:middle;
    padding:0;
    position:relative;
    list-style:none;
    backface-visibility:hidden;
}

#services-slider ul li.active {
    border-color:white;
}

#services-slider .thumb {
    opacity:1;
    width:100%;
    height: 100%;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    display:block;
    position:absolute;
    font-size:0;
}

/* --------- navigation controls ------- */
/* The nav id should be: slider id + ("-prev", "-next", and "-pause-play") */

#services-slider-pause-play {display:none;} /*.pause*/

#services-slider-prev, #services-slider-next
{
    opacity:1;
    position: absolute;
    /*background-color:#0346a3;*/
    *background-color:#ccc;/*IE7 hack*/
    backface-visibility:hidden;
    width:auto;
    height:auto;
    top: 50%;
    margin:0;
    margin-top:-30px;
    color:white;    
    z-index:10;
    cursor:pointer;
}

#services-slider-prev {
    left:-30px; right:auto;
}

#services-slider-next {
    left:auto; right:-30px;
}
#services-slider-next.disabled, #services-slider-prev.disabled {
    opacity:0.3;
    cursor:default;
}


/* arrows */
#services-slider-prev::before, #services-slider-next::before {
    position: absolute;
    top: 19px;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-left: 6px solid black;
    border-top: 6px solid black;
}

#services-slider-prev::before {
    left:7px;
    -ms-transform:rotate(-45deg);/*IE9*/
    -webkit-transform:rotate(-45deg);
    transform: rotate(-45deg);
}

#services-slider-next::before {
    right:7px;
    -ms-transform:rotate(135deg);/*IE9*/
    -webkit-transform:rotate(135deg);
    transform: rotate(135deg);
}

/*Responsive settings*/
@media only screen and (max-width:736px){

    #services-slider {padding:10px 26px;}

    #services-slider-prev {left:0px;}

    #services-slider-next {right:0px;}
}

/*Orix Slider Animation Ends*/