@charset "UTF-8";
/* CSS Document */

@charset "UTF-8";
/* CSS Document */

html, body, div, span, h1, h2, p, blockquote, img, strong, ul, li, article {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}
html, body {
    width: 100%;
    height: 100%
}
body {
    line-height: 1;
    background: #fff;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: inherit
}
article {
    display: block
}
ul {
    list-style: none
}
blockquote {
    quotes: none
}
blockquote:before, blockquote:after {
    content: none
}
a {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
    color: #2c9ab7
}
a:hover {
    text-decoration: underline
}
img {
    max-width: 100%
}
.span1of1 {
    width: 100%
}
.span1of2 {
    width: 50%
}

@media screen and (max-width: 520px) {
.span1of2 {
    width: 100%
}
.col {
    width: 100%
}
}
.content {
    width: 90%;
    /* max-width: 1008px; */
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width: 1120px) {
.content {
    width: 100%
}
}
.section {
    display: block;
    clear: both;
    vertical-align: top
}
.block, .col {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    float: none
}

@media screen and (max-width: 520px) {
.block, .col {
    width: 100%
}
}
.col {
    vertical-align: inherit;
    padding-left: 18px;
    padding-right: 18px;
    max-width: 100%
}
.center {
    text-align: center
}
.span1of1 {
    width: 100%
}

@media screen and (max-width: 520px) {
.span1of2 {
    width: 100%
}
}
#intro {
    position: relative;
    width: 100%;
    /*height: calc(100vh - 60px)*/
	height: 100vh;
}
#intro .knockout {
    transition: background-color 0.25s linear
}
/* #intro:after, #outro:after {
    height: 60px;
    font-family: "Work Sans", "Helvetica", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 60px;
    vertical-align: middle;
    color: #001c40;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 1;
    transition: opacity 0.5s ease
} */

@media screen and (min-width: 520px) {
#intro:after {
    font-size: 18px
}
}
#intro .section, #intro .content {
    position: relative;
    height: 100%
}
#intro .section {
    overflow: hidden
}
#intro .knockout {
    position: relative
}
#intro .knockout:before, #intro .knockout:after {
    content: '';
    display: block;
    position: absolute;
    background-color: #284751;
    width: 50vw;
    height: 100%;
    top: 0
}

body.community #intro .knockout:before, #outro .knockout:before, body.community #intro .knockout:after, body.community #outro .knockout:after,
body.houston #intro .knockout:before, #outro .knockout:before, body.houston #intro .knockout:after, body.houston #outro .knockout:after,
body.cash #intro .knockout:before, #outro .knockout:before, body.cash #intro .knockout:after, body.cash #outro .knockout:after,
body.economic #intro .knockout:before, #outro .knockout:before, body.economic #intro .knockout:after, body.economic #outro .knockout:after,
body.banking #intro .knockout:before, #outro .knockout:before, body.banking #intro .knockout:after, body.banking #outro .knockout:after {
	background: none;
}

#intro .knockout:before {
    right: 90%
}
#intro .knockout:after {
    left: 90%
}

@media screen and (min-width: 840px) and (max-height: 800px) and (orientation: landscape) {
#intro .knockout {
    width: 100%
}
}

@media screen and (min-width: 840px) and (max-height: 600px) and (orientation: landscape) {
#intro {
    min-height: 430px
}
#intro .knockout {
    width: 50%
}
}

@media screen and (max-width: 615px) and (max-height: 500px) {
#intro {
    height: calc(100vh)
}
#intro .knockout {
    width: 85%
}
}
*, *:before, *:after {
    box-sizing: border-box
}
body {
    font-family: "Work Sans", "Helvetica", sans-serif;
    font-weight: 400;
    overflow: auto
}
#content {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: linear-gradient(to bottom, #62abca, #0364aa)
}
#numbers {
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}
#bg-number {
    position: fixed;
    color: #fff;
    font-family: "SixCaps", "Helvetica", sans-serif;
    width: 100%;
    line-height: 100vh;
    text-align: center;
    font-size: 120px;
    font-weight: 400;
    letter-spacing: -0.0125em;
    text-transform: uppercase;
    display: block;
    transition: opacity 0.15s linear;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

@media screen and (min-width: 520px) {
#bg-number {
    font-size: 240px
}
}
#intro .knockout {
    background-image: url("/~/media/microsites/annual/2017/img/harvey-stencil.svg");
	opacity: 0.6;
}

body.leadership #intro .knockout,
body.financials #intro .knockout {
	opacity: 0;
}


body.economic #intro .knockout {
	background-image: url("/~/media/microsites/annual/2017/img/economy-stencil.svg");
}

body.cash #intro .knockout {
	background-image: url("/~/media/microsites/annual/2017/img/cash-stencil.svg");
}

body.houston #intro .knockout {
	background-image: url("/~/media/microsites/annual/2017/img/houston-stencil.svg");
}

body.banking #intro .knockout {
	background-image: url("/~/media/microsites/annual/2017/img/banking-stencil.svg");
}

body.community #intro .knockout {
	background-image: url("/~/media/microsites/annual/2017/img/community-stencil.svg");
}

#intro:before {
    content: '';
    display: block;
    background-color: #001c40;
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    opacity: 1;
    transition: opacity 0.25s linear, visibility 0s linear
}
#intro.loaded:before {
    opacity: 0
}
/* #intro:after {
    position: absolute;
    left: 0;
    top: 100%;
    content: 'Keep Those Fingers Scrolling'
} */

@media screen and (min-width: 520px) {
#intro .knockout {
    background-image: url("/~/media/microsites/annual/2017/img/harvey-stencil.svg")
}
	
/*body.leadership #intro .knockout {
    background-image: url("/~/media/microsites/annual/2017/img/2017stencil-reverse.svg")
}*/
}
.knockout {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
}
#images {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
#images {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}
}
#images .image {
    position: absolute;
    width: 100%;
    min-height: 100vh;
    left: 0;
    clip: rect(0, auto, auto, 0);
    transition: opacity 0.15s linear;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
#images .image.loaded {
    opacity: 1
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
#images .image {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}
}
#images .image-container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
#images .image-container {
    position: absolute;
    background-attachment: fixed;
    width: 100%;
    height: 100%
}
}
.point {
    position: relative;
   /* padding: 54px 0*/
}
.point:last-of-type {
    /*padding-bottom: 216px*/
}
.point h1 {
    font-size: 26px;
    line-height: 1.4em;
    color: #fff;
    text-transform: uppercase;
    font-family: "Work Sans", "Helvetica", sans-serif;
    font-weight: 700;
    -webkit-font-smoothing: antialiased
}

@media screen and (min-width: 1024px) {
.point h1 {
    font-size: 36px;
    line-height: 1.25em
}
}
.point .number-container {
    text-align: right
}

@media screen and (max-width: 520px) {
.point .number-container {
    text-align: left
}
}
.point p {
    font-size: 16px;
    font-weight: normal;
    color: #fff;
    font-size: 21px;
    line-height: 1.523809524;
    transition: color 0.15s linear
}
.image-0 .point p {
    color: #ff4b00
}

@media screen and (min-width: 520px) {
.point p {
    font-size: 18px
}
}
.point h1, .point p {
    padding: 6px 0;
    /*display: inline;*/
    background-color: #001c40;
    box-shadow: 11px 0 0 #001c40, -11px 0 0 #001c40;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone
}
.point .text-container {
    max-width: 480px
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active), (min-width: 0\0) and (min-resolution: 0.001dpcm) {
.knockout {
background-size:auto 4000px
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active), (min-width: 0\0) and (min-resolution: 0.001dpcm) {
#images {
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
.image {
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
.image-container {
position:absolute !important;
background-attachment:fixed;
width:100% !important;
height:100% !important
}
}
@supports (-ms-accelerator: true) {
.image {
clip:none !important;
overflow:hidden;
-webkit-transform:none !important;
transform:none !important
}
.image-container {
position:absolute !important;
background-attachment:fixed;
width:100% !important;
height:100% !important;
-webkit-transform:none !important;
transform:none !important
}
}