Jumbotron not showing up on Firefox or Safari

I just want to start out by saying, that I have tried multiple things before I resorted to writing this entry. You guys are my only hope.

My site works in Chrome, but disappears in Firefox or Safari.

Things I have tried:

• Added register script then enqueue; In hopes that my grid-12.css is loaded before frontstyle.css(grid-12.css has jumbotron code; bootstrap.css just has my modal.)
  • Moving the end of my while/endif; wp_reset_postdata to the bottom of my jumbotron.
  • Put my jumbotron as inline css instead of in the style sheet.(currently); Splitting the css does not work for some reason.
  • Put jumbotron in front-style.css(main stylesheet)
  • Making grid-12.css a dependency of my front-style.css(currently)
  • And a few other things....

function.php:

function _cc_scripts() {

  wp_register_style('grid_12', get_template_directory_uri() .  '/inc/css/grid12.css');
  wp_register_style('normalize_css', get_template_directory_uri() . '/inc/css/normalize.css');
  wp_register_style('bootstrap_css', get_template_directory_uri() . '/inc/css/bootstrap.css');
  wp_register_style('front_css', get_template_directory_uri() . '/inc/css/front-style.css', 'grid_12');
  wp_register_style( 'main_style', get_template_directory_uri() . '/style.css');
  wp_register_style('animate_css', get_template_directory_uri() . '/inc/css/animate.css');
  wp_register_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css', array(), '4.6.1' );
  wp_register_style( '_cc-style', get_stylesheet_uri() );
  wp_register_style( '_cc-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

  wp_enqueue_style('grid_12');
  wp_enqueue_style('normalize_css');
  wp_enqueue_style('bootstrap_css');
  wp_enqueue_style('front_css');
  wp_enqueue_style('main_style');
  wp_enqueue_style('animate_css');
  wp_enqueue_style('font-awesome');
  wp_enqueue_style('_cc-style');
  wp_enqueue_style('_cc-skip-link-focus-fix');


  if ( is_singular()  comments_open()  get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
  }
} // End of _cc_scripts()
add_action( 'wp_enqueue_scripts', '_cc_scripts' );

header.php:

?php
$args = array(
'category_name' = 'jumbotron',
);
$the_query = new WP_Query( $args );
?

?php 
if ( have_posts() ): 
  while ( $the_query-have_posts() ):   
    $the_query-the_post(); ?

    ?php
    $thumbnail_jumbo  = get_post_thumbnail_id($post-ID);
    $featuredImage = wp_get_attachment_image_src( $thumbnail_jumbo , 'full');
    $thumbnail_jumbo = $featuredImage[0];
    list($width, $height) = getimagesize($thumbnail_jumbo); 
    ?

    div class="jumbotron"
      style type="text/css"
        .jumbotron {
      background: no-repeat center right fixed  url('?php echo $thumbnail_jumbo ?');
     padding:0;
     margin-bottom: 0px;
     max-width:100%;
     min-height: 500px;

     background-size: 100%;
     box-shadow:0px 0px 10px #000;
       -webkit-background-size: 100%;
         -moz-background-size: 100%;
           -o-background-size: 100%;
     background-size: cover;
       -webkit-background-size: cover;
         -moz-background-size: cover;
           -o-background-size: cover;

        }
        /style


        div class="scroll-down text-center  hidden-sm hidden-md hidden-lg"
        a href="#" class="about"span class="icon-down"
          i class="fa  fa-chevron-down fa-3x"/i/span
        /a
      /div
    /div
    ?php 
  endwhile; 
endif; 
wp_reset_postdata(); 
?

Other things to note

• I'm trying to avoid inline CSS.
• Custom Css needs to be loaded after Bootstrap.css(in this case grid-12.css)

Right now, on Safari/Firefox, I can see the color of the picture/jumbotron behind my navbar but it does not stretch and take up the space I want it to.

Thanks any advice on this would be great.