.slide-right {
    animation-duration       : 1s;
    animation-name           : slide-right !important;
    animation-timing-function: ease;
    opacity                  : 1!important;
    visibility               : visible !important;
    animation-iteration-count: 1;
    backface-visibility: hidden;

}

.slide-left {
    animation-duration       : 1s;
    animation-name           : slide-left !important;
    animation-timing-function: ease;
    opacity                  : 0 !important;
    visibility               : hidden !important;
    animation-iteration-count: 1;
    backface-visibility: hidden;

}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(1turn);
    }
}
@keyframes slide-right {
    0% {
        opacity   : 0;
        transform : translatex(-50%);
        visibility: visible;

    }

    100% {
        opacity   : 1;
        transform : translateX(0%);
        visibility: visible;
    }
}
@keyframes slide-left {
    0% {
        opacity   : 0;
        transform : translatex(0%);
        visibility: visible;
    }
    //
    // 95% {
    //  transform : translateX(-50%);
    //  visibility: visible;
    // }

    100% {
        opacity   : 0;
        transform : translateX(-50%);
        visibility: hidden;
    }
}

function whatWeDoAccordion() {
        var $button = $( '.ion-button' );

        $button.on( 'click mouseover', function( event ) {
            var $this = $( this ),
                $accordionRow = $this.parents( '.ion-accordion-row' ),
                $text = $accordionRow.find( '.ion-accordion-text' );

            $( '.ion-accordion-text' ).not( $text ).addClass( 'slide-left' ).removeClass( 'slide-right' );

            $( '.ion-color--white' ).removeClass( 'ion-color--white' );
            $this.toggleClass( 'ion-color--white' );
            $button.not( $this ).removeClass( 'ion-color--white' );
            $text.toggleClass( 'slide-left' ).toggleClass( 'slide-right' );
        } );
    }

  function tokenika_waypoints_setup( callback ) {
        var tokenikaWaypointCounter = 1;
        var tokenikaWaypointArray = [];

        // Adding classes to waypoint ellemens dynamicly
        $( ".tokenika_waypoint" ).each( function( index, el ) {

            var tokenikaWaypointIndex = index,
                currentItemClass = 'tokenika-waypoint-item-' + tokenikaWaypointCounter;
            $( this ).addClass( currentItemClass );
            tokenikaWaypointArray.push( "." + currentItemClass );

            tokenikaWaypointCounter++;
        } );

        // Seting up waypoints for each '.tokenika_waypoint'
        $( tokenikaWaypointArray ).each( function( index, el ) {

            $( el ).waypoint( function( direction ) {

                if ( direction == "down" ) {
                    $( '.tokenika_waypoint' ).find( '.ion-color--primary' ).removeClass( 'ion-color--white' );
                    $( '.tokenika_waypoint' ).find( '.ion-accordion-text' ).removeClass( 'slide-right' ).addClass( 'slide-left' );
                    $( el ).find( '.ion-color--primary' ).addClass( 'ion-color--white' );
                    $( el ).find( '.ion-accordion-text' ).removeClass( 'slide-left' ).addClass( 'slide-right' );
                }

            }, {
                offset: function() {
                    return this.context.innerHeight() - this.adapter.outerHeight() - 150;
                }
            } );

            $( el ).waypoint( function( direction ) {

                if ( direction == "up" ) {
                    $( '.tokenika_waypoint' ).find( '.ion-color--primary' ).removeClass( 'ion-color--white' );
                    $( '.tokenika_waypoint' ).find( '.ion-accordion-text' ).removeClass( 'slide-right' ).addClass( 'slide-left' );
                    $( el ).find( '.ion-color--primary' ).addClass( 'ion-color--white' );
                    $( el ).find( '.ion-accordion-text' ).removeClass( 'slide-left' ).addClass( 'slide-right' );
                }

            }, {
                offset: function() {
                    return this.context.innerHeight() - this.adapter.outerHeight() - 200;
                }
            } );

        } );
    } //tokenika_waypoints_setup