<style type="text/css">
@keyframes Toastify__slideInRight {
    0% {
        transform: translate3d(110%,0,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInLeft {
    0% {
        transform: translate3d(-110%,0,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInUp {
    0% {
        transform: translate3d(0,110%,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInDown {
    0% {
        transform: translate3d(0,-110%,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideOutRight {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(110%,0,0)
    }
}

@keyframes Toastify__slideOutLeft {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(-110%,0,0)
    }
}

@keyframes Toastify__slideOutDown {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0,500px,0)
    }
}

@keyframes Toastify__slideOutUp {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0,-500px,0)
    }
}

.Toastify__slide-enter--top-left,.Toastify__slide-enter--bottom-left {
    animation-name: Toastify__slideInLeft
}

.Toastify__slide-enter--top-right,.Toastify__slide-enter--bottom-right {
    animation-name: Toastify__slideInRight
}

.Toastify__slide-enter--top-center {
    animation-name: Toastify__slideInDown
}

.Toastify__slide-enter--bottom-center {
    animation-name: Toastify__slideInUp
}

.Toastify__slide-exit--top-left,.Toastify__slide-exit--bottom-left {
    animation-name: Toastify__slideOutLeft
}

.Toastify__slide-exit--top-right,.Toastify__slide-exit--bottom-right {
    animation-name: Toastify__slideOutRight
}

.Toastify__slide-exit--top-center {
    animation-name: Toastify__slideOutUp
}

.Toastify__slide-exit--bottom-center {
    animation-name: Toastify__slideOutDown
}

@keyframes Toastify__spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,:before,:after {
    box-sizing: border-box
}




abbr[title] {
    text-decoration: underline dotted
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

button,[type=button],[type=reset],[type=submit] {
    -webkit-appearance: button
}

::-moz-focus-inner {
    border-style: none;
    padding: 0
}

:-moz-focusring {
    outline: 1px dotted ButtonText
}

:-moz-ui-invalid {
    box-shadow: none
}


::-webkit-inner-spin-button,::-webkit-outer-spin-button {
    height: auto
}


img,video,svg,picture,canvas {
    display: block;
    max-width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

button {
    display: inline-block;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    color: inherit
}


@-webkit-keyframes moveinSideBar {
    0% {
        -webkit-transform: translateX(110%);
        transform: translate(110%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    80% {
        -webkit-transform: translateX(0);
        transform: translate(0);
        will-change: transform
    }

    to {
        -webkit-transform: translateX(4%);
        transform: translate(4%);
        will-change: transform
    }
}

@keyframes moveinSideBar {
    0% {
        -webkit-transform: translateX(110%);
        transform: translate(110%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    80% {
        -webkit-transform: translateX(0);
        transform: translate(0);
        will-change: transform
    }

    to {
        -webkit-transform: translateX(4%);
        transform: translate(4%);
        will-change: transform
    }
}

@-webkit-keyframes moveOutSideBar {
    0% {
        -webkit-transform: translateX(4%);
        transform: translate(4%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    20% {
        -webkit-transform: translateX(0%);
        transform: translate(0);
        will-change: transform
    }

    to {
        -webkit-transform: translateX(110%);
        transform: translate(110%);
        will-change: transform
    }
}

@keyframes moveOutSideBar {
    0% {
        -webkit-transform: translateX(4%);
        transform: translate(4%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    20% {
        -webkit-transform: translateX(0%);
        transform: translate(0);
        will-change: transform
    }

    to {
        -webkit-transform: translateX(110%);
        transform: translate(110%);
        will-change: transform
    }
}


@-webkit-keyframes footerMoveInLeft {
    0% {
        -webkit-transform: translateX(10px);
        transform: translate(10px);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    80% {
        -webkit-transform: translateX(122px);
        transform: translate(122px);
        will-change: transform
    }

    to {
        -webkit-transform: translateX(118px);
        transform: translate(118px);
        will-change: transform
    }
}

@keyframes footerMoveInLeft {
    0% {
        -webkit-transform: translateX(10px);
        transform: translate(10px);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    80% {
        -webkit-transform: translateX(122px);
        transform: translate(122px);
        will-change: transform
    }

    to {
        -webkit-transform: translateX(118px);
        transform: translate(118px);
        will-change: transform
    }
}

@-webkit-keyframes footerMoveOutLeft {
    0% {
        -webkit-transform: translateX(118px);
        transform: translate(118px);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translate(8px);
        will-change: transform
    }

    to {
        -webkit-transform: translateX(10px);
        transform: translate(10px);
        will-change: transform
    }
}

@keyframes footerMoveOutLeft {
    0% {
        -webkit-transform: translateX(118px);
        transform: translate(118px);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translate(8px);
        will-change: transform
    }

    to {
        -webkit-transform: translateX(10px);
        transform: translate(10px);
        will-change: transform
    }
}



.btn.csbtn {
    font-size: 1.1rem;
    font-weight: 700;
    position: relative;
    border-radius: 40px
}

.btn.csbtn .btn__bef,.btn .btn__aft {
    -webkit-transition: .4s ease-out;
    -o-transition: .4s ease-out;
    transition: .4s ease-out;
    color: #fff
}

.btn.csbtn .btn__bef {
    -webkit-transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 70px
}

.btn.csbtn .btn__aft {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 15%
}

.btn .btn__arrow {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translate(12px);
    background-color: #fff;
    max-width: 40px;
    padding: 5px;
    border-radius: 50%;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s
}

.btn.csbtn:hover .btn__bef {
    visibility: hidden;
    opacity: 0
}

.btn.csbtn:hover .btn__aft {
    visibility: visible;
    opacity: 1
}

.btn.csbtn:hover .btn__arrow {
    -webkit-animation: ButtonMoveInLeft .6s ease-out forwards;
    animation: ButtonMoveInLeft .6s ease-out forwards
}

.btn.csbtn:not(:hover) .btn__arrow {
    -webkit-animation: ButtonMoveOutLeft .6s ease-out forwards;
    animation: ButtonMoveOutLeft .6s ease-out forwards
}

@media (max-width: 768px) {
/*     .btn .btn__bef {
        visibility:hidden;
        opacity: 0
    } */
	
	    .btn .btn__bef {
        visibility: visible;
        opacity: 1;
    }

    .btn .btn__aft {
        visibility: visible;
        opacity: 1
    }

    .btn:not(:hover) .btn__arrow {
        -webkit-animation: ButtonMoveInLeft .6s ease-out forwards;
        animation: ButtonMoveInLeft .6s ease-out forwards
    }
}

@-webkit-keyframes ButtonMoveInLeft {
    0% {
        -webkit-transform: translateX(12px);
        transform: translate(12px);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    80% {
        -webkit-transform: translateX(10em);
        transform: translate(10em);
        will-change: transform
    }

    to {
        -webkit-transform: translateX(9.8em);
        transform: translate(9.8em);
        will-change: transform
    }
}

@keyframes ButtonMoveInLeft {
    0% {
        -webkit-transform: translateX(12px);
        transform: translate(12px);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    80% {
        -webkit-transform: translateX(10em);
        transform: translate(10em);
        will-change: transform
    }

    to {
        -webkit-transform: translateX(9.8em);
        transform: translate(9.8em);
        will-change: transform
    }
}

@-webkit-keyframes ButtonMoveOutLeft {
    0% {
        -webkit-transform: translateX(9.8em);
        transform: translate(9.8em);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translate(8px);
        will-change: transform
    }

    to {
        -webkit-transform: translateX(12px);
        transform: translate(12px);
        will-change: transform
    }
}

@keyframes ButtonMoveOutLeft {
    0% {
        -webkit-transform: translateX(9.8em);
        transform: translate(9.8em);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translate(8px);
        will-change: transform
    }

    to {
        -webkit-transform: translateX(12px);
        transform: translate(12px);
        will-change: transform
    }
}


@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}





.portbtn @keyframes ButtonMoveInLeft {
    0% {
        -webkit-transform: translateX(12px);
        transform: translate(12px);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    80% {
        -webkit-transform: translateX(10em);
        transform: translate(10em);
        will-change: transform
    }

    to {
        -webkit-transform: translateX(9.8em);
        transform: translate(11.8em);
        will-change: transform
    }
}



.portbtn .btn.csbtn:hover .btn__arrow {
    -webkit-animation: ButtonMoveInLeft .6s ease-out forwards;
    animation: ButtonMoveInLeft .6s ease-out forwards;
    left: 15% !important;
    position: relative;
}

.secure .btn.csbtn:hover .btn__arrow {
    -webkit-animation: ButtonMoveInLeft .6s ease-out forwards;
    animation: ButtonMoveInLeft .6s ease-out forwards;
    left: 32% !important;
    position: relative;
}

.btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
}
.btn__arrow {
  font-size: 0.9rem;
}</style>
