function slideSwitch() {
    var $active = $('.bannerslider .bnnerbox.active');
    if ( $active.length == 0 ) $active = $('.bannerslider .bnnerbox:last');
    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('.bannerslider .bnnerbox:first');

   			$next.removeClass('active last-active');
			$next.find(".greenbox_animation").fadeIn(1000);
			$next.find('.bnrtextbox').show();
			$next.find("h1").delay(1000).fadeIn(1000);
			$next.find("p").delay(1200).fadeIn(1000);
			$next.find(".learnbtn").delay(1500).fadeIn(1000);
			$next.find(".owlpic").delay(1500).fadeIn(1000);
	
	    $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, function() {
			$active.find(".owlpic").fadeOut(300);
			$active.find(".learnbtn").fadeOut(300);
			$active.find("p").hide('0');
			$active.find("h1").hide('0');
			$active.find(".greenbox_animation").delay(300).fadeOut(200);
			$active.find('.bnrtextbox').hide();			
			$active.delay(400).removeClass('active last-active');
     });
	 
	 
};

$(function() {
    setInterval( "slideSwitch()", 12000 );
	$active = $('.bannerslider .bnnerbox.active');	
	$active.find(".greenbox_animation").fadeIn(1000);
	$active.find('.bnrtextbox').show();
	$active.find("h1").delay(1000).fadeIn(1000);
	$active.find("p").delay(1250).fadeIn(1000);
	$active.find(".learnbtn").delay(1450).fadeIn(1000);
	$active.find(".owlpic").delay(1500).fadeIn(1000);
});