Values from custom meta boxes being repeated in po

I've created custom post type for events in WordPress and now I'm trying to list them all along with values from custom meta boxes on my page template that I called Events.

Values from meta boxes are being repeated and this is followed with a pattern:

latest post is fine,
older post shows its meta box values and values from the latest post,
and so on.

This is a screenshot of what is going on:

This is a query that shows posts:

<?php 
/*
Template Name: Event
*/
?>
<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) :  the_post();
        if ( get_post_meta($post->ID, '_ct_hdr_value') ) : ?>

            <div class="page-name innerpage<?php echo $post->post_name; ?>">
                <div class="row">
                    <div class="twelvecol">            
                        <h1 class="page-h1"><?php the_title(); ?> </h1>

                    </div>
                </div>
            </div>
        <?php endif;?>
    <div class="row">
        <div class="page-container">
            <div class="row">
            <div class="content twelvecol">
                <?php echo the_content();
                endwhile; 
                endif; ?>
            </div>

        </div>
    <section class="events cf">
    <h3 class="fancy"><span>Upcoming events</span></h3>
    <ul id="office-list" class="cf">
    <?php
    query_posts(array('post_type' => 'event', 'posts_per_page' => 30) );
    if (have_posts()) : while (have_posts()) : the_post();?>
    <li class="sixcol cf">
    <article class="event cf">
    <a class="cf" href="<?php echo the_permalink(); ?>">
        <h5 class="text-center"><?php the_title(); ?></h5>
    </a>
    <br>
    <a class="cf" href="<?php echo the_permalink(); ?>">
    <?php the_post_thumbnail('full', array( 'class' => 'img-center img-responsive event-thumb')); ?>
    </a>
    <?php the_content() ?>
   <section class="event-details">
    <section class="event-address cf">   
    <?php
    $adress = $address = $date = $city;
            if (get_post_meta($post->ID, '_event_date_value',true) ) {
                echo $date. '<i class="fa fa-calendar"></i>  ',
                $date = get_post_meta($post->ID, '_event_date_value', true);
                echo '<br>';
            }
            if (get_post_meta($post->ID, '_event_address_value',true) ) {
                echo $address. '<i class="fa fa-map-marker"></i>  ',
                $address = get_post_meta($post->ID, '_event_address_value', true);
            }
            if (get_post_meta($post->ID, '_event_city_value',true) ) {
                echo $city. ', ',
                $city = get_post_meta($post->ID, '_event_city_value', true);
            }

    ?></section>
        </section>
    </article>
    </li>
    <?php
    endwhile;
    endif; ?>
</ul>
</section>
        </div>
    </div>
<?php get_footer(); ?>

Any advice for a php newbie is more than welcome. :)

As I already stated, you should never use query_posts as it breaks the main query and pagination. Use WP_Query or get_posts for custom queries, if you really need the use of custom queries

From your page template, I believe you are using the page loop for custom info and then your custom query to show your event posts.

Just before I continue, pro tip, do not use : and endif and endwhile. Although it is perfectly valid php, it is hard to debug as code editors don't support this syntax. Make use of the old faithful curlies. All code editors support them, and they make debug much easier

This is what your code should look like: (I have removed the markup and template tags as frankly, posting from a tablet is not fun with all of that code)

// Page main loop, the main query
if ( have_posts() ) {
    while ( have_posts() ) {
    the_post();

        // Your markup and template tags

    }
}

// Add you custom upcoming events heading here

// Now for our loop to show event posts
$args = array(
    'post_type' = 'event',
    'posts_per_page' => 30
);
$q = new WP_Query( $args );

if ( $q->have_posts() ) {
    while ( $q->have_posts() ) {
    $q->the_post();

    // Your custom loop markup and template tags

    }
    wp_reset_postdata();
}

EDIT

Your completed code should look like this:

<?php 
/*
Template Name: Event
*/
?>
<?php get_header(); ?>

    <?php 
        if (have_posts()) {
            while (have_posts()) {
                the_post();
                if ( get_post_meta($post->ID, '_ct_hdr_value') ) { ?>

                    <div class="page-name innerpage<?php echo $post->post_name; ?>">
                        <div class="row">
                            <div class="twelvecol">            
                                <h1 class="page-h1"><?php the_title(); ?> </h1>
                            </div>
                        </div>
                    </div>
                <?php } ?>

                <div class="row">
                <div class="page-container">
                <div class="row">
                <div class="content twelvecol">
                    <?php the_content(); ?>
                </div>
                <?php
            }
        }
    ?>
            </div>


            </div>

    <section class="events cf">
        <h3 class="fancy">
            <span>Upcoming events</span>
        </h3>

        <ul id="office-list" class="cf">
            <?php
                $args = array(
                    'post_type' = 'event',
                    'posts_per_page' => 30
                );
                $q = new WP_Query( $args );

                if ( $q->have_posts() ) {
                    while ( $q->have_posts() ) {
                        $q->the_post(); ?>

                        <li class="sixcol cf">
                            <article class="event cf">

                                <a class="cf" href="<?php echo the_permalink(); ?>">
                                    <h5 class="text-center"><?php the_title(); ?></h5>
                                </a>

                                <br>

                                <a class="cf" href="<?php echo the_permalink(); ?>">
                                    <?php the_post_thumbnail('full', array( 'class' => 'img-center img-responsive event-thumb')); ?>
                                </a>

                                <?php the_content() ?>

                                <section class="event-details">
                                    <section class="event-address cf">   
                                        <?php
                                        $adress = $address = $date = $city;
                                        if (get_post_meta($post->ID, '_event_date_value',true) ) {
                                            echo $date. '<i class="fa fa-calendar"></i>  ',
                                            $date = get_post_meta($post->ID, '_event_date_value', true);
                                            echo '<br>';
                                        }
                                        if (get_post_meta($post->ID, '_event_address_value',true) ) {
                                            echo $address. '<i class="fa fa-map-marker"></i>  ',
                                            $address = get_post_meta($post->ID, '_event_address_value', true);
                                        }
                                        if (get_post_meta($post->ID, '_event_city_value',true) ) {
                                            echo $city. ', ',
                                            $city = get_post_meta($post->ID, '_event_city_value', true);
                                        }

                                        ?>
                                    </section>
                                </section>
                            </article>
                        </li>
                        <?php
                    }
                    wp_reset_postdata();
                }
            ?>
        </ul>
    </section>
    </div>
    </div>
<?php get_footer(); ?>