// // Jumbotron // -------------------------------------------------- #jumbotron-mask, #jumbotron-mask-dummy{ overflow: hidden; width: 100%; height: $jumbotron-total-height; } #jumbotron-mask { position: absolute; top: 0; } #jumbotron-mask-dummy{ visibility: hidden; position:relative; top: $negative-hero-margin; } #jumbotron { position: relative; height: $jumbotron-total-height; padding-top: 0; padding-bottom: 0; margin-top: $negative-hero-margin; color: $jumbotron-color; -webkit-backface-visibility:hidden; @include consul-gradient-bg(); .jumbotron-dots{ position: absolute; top: 0; left: 0; height: 632px; width: 100%; margin-top: $negative-hero-margin; background: transparent image-url('hero-dots.png') center $header-height no-repeat; } .container{ position: relative; height: 100%; margin-top: $header-height; padding-left: 0; -webkit-backface-visibility:hidden; .jumbo-logo-wrap{ margin-top: 135px; .jumbo-logo{ width: 318px; height: 316px; background: transparent image-url('consul-hero-logo@2x.png') 0 0 no-repeat; background-size: 318px 316px; z-index: 20; } } h2{ margin-top: 220px; font-size: 40px; line-height: 48px; letter-spacing: 1px; } .lead { font-weight: $font-weight-sb; letter-spacing: .5px; opacity: .89; } } } @media (max-width: 992px) { #jumbotron .container { h2, p.lead{ text-align: center; margin-left: 0; } } #jumbotron-mask-dummy{ top: $large-negative-hero-margin; } } @media (max-width: 480px) { #jumbotron .container { h2{ margin-top: 130px; font-size: 32px; } } }