@media screen and (max-width:1120px) {
  #geolocator {
    margin-right: 485px;
  }
  #geolocator-form input[type=text] {
    width:120px;
  }
  #geolocator-icon-expander {
    display:block;
    padding: 5px;
    margin-top: -7px;
    cursor:pointer;
  }
  #geolocator-icon-expander svg {
    width: 30px;
    height: 38px;
  }
  #geolocator-icon-expander path {
    fill: #fff;
  }
  #geolocator-form-container {
    display:none;
    position: absolute;
    background: #222;
    padding: 12px 10px 10px 10px;
    top: 55px;
    right: 480px;
  }
}


@media screen and (max-width:1024px) {
  .story-refer-line {
    /*text-align: left;*/
  }
  .story-refer-line .back-refer {
    padding: 6px 4px 6px 4px;
    background: transparent;
    margin: 0 0 0 2px;
  }
  .story-refer-line.stuck .back-refer {
    display:none !important;
  }
  #nav.on-map {
    top: 73px;
  }
  #intro p {
    max-width:650px;
    margin:0 auto;
    margin-bottom:10px;
  }

  .story-view #nav.on-map {
    top: 80px;
  }
  .story-view #back-to-intro { display: none; }
  .story-view .storm-button-lockup {
    padding: 0px 0px 5px 0px;
    background-color: transparent;
    margin: 0 0 0 0;
    border-radius: 0px;
  }
  .story-view .storm-button-lockup.active {
    background-color: transparent;
  }
  .back-refer {
    padding: 4px 0px 5px;
    font-size: 0.7em;
  }
  .popnav { height: 32px; }
  .story-view .storms-header-label, .story-view .solutions-header-label { display: none; }

  .area-view .label.bg-label.exxon-label { display: none !important; }

  #geolocator {
    margin-right: 352px;
  }
  #geolocator-form-container {
    right: 330px;
  }
  #it-story, .guff.guff-inner {
    width:330px;
  }
  #it-story p {
    font-size: 14px;
    line-height: 20px;
    padding: 0 20px 10px 20px;
  }
  #it-story #it-story-graf-0 {
      font-size: 30px;
      line-height: 39px;
  }
  .guff.guff-inner p, .guff.guff-inner h2, .guff.guff-inner h3 {
    padding: 0 20px 10px 20px;
  }
  #storm-button-cluster-wrapper {
    margin-right: 340px;
    margin-top: 5px;
  }

  .guff.guff-background div.stepper-guff-item {
    top: 78px;
    height: 77px;
    padding: 0px;
    margin-left: 35px;
    width: 100%;
  }

  .guff.guff-background p:first-child .graf-inner {
    margin-left: 0px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 20px;
  }
  .guff.guff-background div {
    max-width:100%;
    margin:0;
    margin-left: -10px;
    padding: 0 10px;
    background: rgba(1,1,1,0.5);
  }
  .guff.guff-background div:first-child {
    max-width:100%;
    margin-left: -10px;
    margin-top: 4px;
  }
  .guff.guff-background div:first-child p {
    max-width:100%;
  }
  .guff.guff-background div:first-child p .graf-inner {
    border:none;
  }

  .guff.guff-background div p {
    max-width: 86%;
  }

  .guff.guff-background div p .graf-inner {
    background:transparent;
  }
  #it-story p.graf-anno-active, .guff.guff-inner p.graf-anno-active {
    border-left: 2px solid #fff;
    padding-left: 18px;
  }
  .story-refer-line.stuck {
    padding: 10px 74px 9px 0 !important;
  }
  .story-refer-line.stuck .next-refer {
    float:none;
  }
  #storm-button-cluster .toggle, #storm-solution-cluster .toggle {
      float: left;
      padding: 5px;
      margin-top: -6px;
      cursor: pointer;
      font-size: 11px;
  }
  #sources-container {
    width: 40%;
    left: 110px;
    bottom: 0;
  }
}

@media screen and (max-width: 830px) {
  #banner-identity #banner-share li.banner-share-txt {
    display:none;
  }
}

@media screen and (max-width: 800px) {
  .ut-anno, .exxonmobile-anno {
    display: none !important;
  }
  .historic-anno, .vopak-anno {
    max-width: 110px;
  }
}

/* largest breakpoint with single column story */
@media screen and (max-width: 767px) {

  body {
    background:#000;
    -webkit-text-size-adjust: none;
  }
  body.story-view {
    overflow:auto;
  }
  body.story-view #it {
    height:70%;
  }

  .p-gallery.inside-top { display: none; }
  .caption.inside-top { display: none; }
  .zoom-icon { display: none; }

  .story-refer-line {
    text-align: center;
  }

  .story-refer-line .back-refer {
    background: transparent url(/houston/assets/tx-locator-3083-9f56aef82a69d7cdd0cf462ca9b30834.png) no-repeat;
    background-size: 22px 20px;
    background-position: 2px 3px;
    padding: 6px 6px 6px 27px;
  }

  #it {}
  #svg_canvas {
    z-index:999999;
  }
  #banner-logo #banner-logo-tt {
    margin: 10px 0px 0 10px;
  }
  #button-title {
    display:none;
  }

  #banner-logo #banner-logo-tt {
    width:140px;
  }
  #intro h1 {
    font-size:30px;
  }
  #intro p {
    font-size:14px;
  }
  #sources-container {
    width: 80%;
    left: 110px;
    bottom: 42px;
  }
  #stepper-hud-inner-wrap {
    position: absolute;
    bottom: 0;
    top:auto;
    right:0;
    width: 100%;
  }
  #stepper-hud h3 {
    color: #444;
    border-radius: 3px;
    box-shadow: 0 0 5px #444;
    margin: 0;
    padding: 3px 0;
    text-align: center;
    font-size: 14px
  }
  .guff {
    margin:0;
  }
  .guff.guff-background {
    width:100%;
    z-index:999999;
    pointer-events:none;
  }
  .guff.guff-background p {
    padding: 0;
    margin: 0 -10px;
    font-size: 12px;
    line-height: 18px;
    bottom: 0 !important;
    top: auto;
  }
  .guff.guff-background p .graf-inner {
    padding: 10px 20px 35px 10px;
  }
  .guff.guff-inner {
    position: relative;
    width: 95%;
    margin-top:80%;
    padding: 0 5% 0 5%;
    background:#000;
  }
  .guff.guff-inner img {
    width: 110%;
    margin-left:-10%;
  }
  .guff.guff-background div:first-child {
    margin-left: -30px;
    bottom:auto;
    background:rgba(0,0,0,0.85);
  }
  .guff.guff-background div:first-child p {
    font-size: 16px;
    line-height: 20px;
  }
  .guff.guff-background h3 {
    margin: 0 !important;
    padding-top: 7px !important;
    font-size:16px !important;
  }
  .guff.guff-background div {
    bottom:0;
    background:#000;
    top:auto;
  }
  .guff.guff-background p:first-child {
    max-width: 80%;
    top: 85px;
    margin:0 -10px;
  }
  .guff.guff-background p:first-child .graf-inner {
    display: inline-block;
    background: transparent;
    border:none;
  }

  #it-story #it-story-graf-0 {
    font-size: 20px;
    line-height: 26px;
  }
  #nav.on-map {
    bottom:41px !important;
  }
  #nav-story {
    bottom:0px !important;
  }
  #nav.on-area {
    bottom: 17% !important;
  }
  #geolocator-form {
    display:none;
  }
  #storm-button-cluster {
    float:left;
  }
  #storm-button-cluster .storm-button {
    font-size:10px;
  }
  #nav.popnav.on-story {
    height:35px;
  }
  #story-toggler-map {
    clear:left;
  }
  #it-story, .guff.guff-inner {
    width:100%;
    position:static;
  }
  #it-story p {
    margin: 0 0 20px;
    padding: 0px 10px;
  }
  .story-anno {
    background: inherit;
    cursor: inherit;
    padding: 0;
    -webkit-transition: none;
    color: #fff !important;
    pointer-events: none;
  }
  #it-story.on-area {
    display:none !important;
  }
  #play-pause {
    right: 8px;
  }
  #back-btn {
    top: 0;
    padding:15px 0 10px 0;
    background: #000;
    color: #fff;
    position: absolute;
    z-index: 999999;
    left: 0px;
    height: 50px;
    border:none;
    font-weight:800;
    width: 100%;
    font-family: Adelle, Georgia, serif;
    font-size: 14px;
  }
  #locator_map_container {
    display:none;
  }
  #legend-container {
    display:none;
  }
  #geolocator {
    display:none !important;
  }
  .story-view #legend-container {
    position: absolute;
    bottom: 0%;
    font-size: 10px;
  }
  #sources-container {
    display:none;
    bottom:0;
    left:0;
    width:100%;
  }
  .story-view #sources-container {
    width:100%;
    left:0;
    position:relative;
    clear:both;
    z-index:99999;
  }
  .area-view #sources-container {
    display:none;
  }
  #solution-icon-button-cluster-wrapper #storm-icon-button-p715-cs {
    width: 45px;
  }
  #storm-option-tooltip {
    left: 9% !important;
    top: 79% !important;
    width: 77%;
    z-index: 9999999;
    background: #222;
    border: 1px solid #fff;
  }

  .guff.guff-background div:first-child p .graf-inner {
    background: none;
  }

  .guff.guff-background div.stepper-guff-item:first-child {
    margin-left: 4px;
    top: 91px;
    height: 40px;
    background: rgba(0,0,0,0.45);
  }

  .guff.guff-background p:first-child {
    width: 100%;
    max-width: 100%;
    margin: 0 0;
  }

  .guff.guff-background div.stepper-guff-item {
    background: rgba(0,0,0,0.45);
    width: 85%;
  }

  #drunk-button { display: none !important; }
  #stepper-hud { display: none; }

}

@media screen and (max-width:601px) {
  #locator_map_container {
    bottom:0;
  }
  #locator_map_container, #locator_map {
    height: 82px;
    width:105px;
  }

  #banner-identity #banner-share li.social-widget {
    display: none;
  }

}


@media screen and (max-width: 480px) {
  .mobile-only { display: block !important; }
  .desktop-only { display: none !important; }
  .bolivar-label { display: none !important; }

  #banner-logo #banner-logo-tt {
    background: url("/houston/assets/tt-logo-compact-41d6102f27d729e22b49d0f8884ef569.png") no-repeat scroll 0 0 transparent;
    background-size: contain;
    margin: 1px 0 0 10px;
  }


  #stepper-nav .stepper-nav-btn.start {
    width: 56px;
    position: relative;
    top: 40px;
  }

  .start img {
    width: 20px;
  }

  .start .start-label {
    font-family: Helvetica, arial, sans-serif;
    font-size: 13px;
    padding: 2px 5px 5px 1px;
    display: block;
    float: left;
  }

  #flood-level-label {
    color: #A3CBF9;
    top: 19px;
    left: 24%;
    font-size: 10px;
  }

  body.story-view {
    overflow: hidden;
    overflow-y: scroll;
  }

  #nav {
    background:transparent;
  }
  .story-view #nav {
    background:#222;
  }
  .guff.guff-background p:first-child {
    font-size: 14px;
    line-height: 16px;
  }
  .guff.guff-background p {
  }
  #stepper-nav {
    bottom: 25%;
  }
  #intro {
    top: 30%;
    z-index: 100;
    padding: 0 20px;
    box-sizing: border-box;
  }
  #play-pause {
    top: 40px;
  }

  #it, #it-story, #cover_video {
    z-index: 99;
  }

  #stepper-nav {
    z-index: 100;
  }

  .guff.guff-background p .graf-inner {
    font-size: 14px;
    line-height: 19px;
  }

  .mainbar-storm-player, .barrier-label { display: none !important; }

  .close {
    padding: 5px 5px 0px;
  }

  #it-story p.it-story-img {
    margin-bottom: 0px;
  }
  #it-story p.caption.small {
    font-size: 12px;
    line-height:16px;
  }

  .intro-surge {
    width: 32%;
    box-sizing:border-box;
  }

  .intro-surge.intro-exxon-mobil, .intro-surge.intro-jsc, .intro-surge.intro-galv {
    /* top: 162px !important; */
    bottom: 40px !important;
    top: inherit !important;
    min-height: 64px;
  } 

  #storm-icon-button-cluster-wrapper { margin-top: 0px; }

  .intro-surge.intro-exxon-mobil {
    left: 0% !important;
  }

  .intro-surge.intro-jsc {
    left: 34% !important;
  }

  .intro-surge.intro-galv {
    left: 68% !important;
  }

  .intro-surge .arrow-down { display: none; }

  #svg_canvas .storm-path[data-storm=p0], #svg_canvas .storm-shape[data-storm=p0] {
    stroke: rgba(252, 146, 114, 0.5) !important;
  }

  .guff.guff-background p:first-child .graf-inner {
    font-size: 14px;
    line-height: 16px;
  }

  

}

@media screen and (max-width: 380px) {
  .story-refer-line .back-refer {
    padding: 6px 4px 6px 4px;
    background: transparent;
  }
}

@media screen and (max-width: 350px) {
  #intro h1 { font-size: 28px; }
  #cover_video { top: -63px; }
  .seabrook-anno { display: none !important; }
  .am-anno { display: none !important; }

  #flood-level-label {
    display: none;
  }

  .intro-surge .surge-val {
    font-size: 11px;
  }

  .guff.guff-background p .graf-inner {
    font-size: 12px;
    line-height: 15px;
  }

  .intro-surge.intro-exxon-mobil, .intro-surge.intro-jsc, .intro-surge.intro-galv {
    bottom: 40px !important;
    top: inherit !important;
  } 

  .guff.guff-background div.stepper-guff-item {
    width: 80%;
  }

  #stepper-nav {
    bottom: 28%;
  }

  #storm-icon-button-cluster-wrapper {
    margin-top: 0px;
    margin-right: 0px;
  }

  .intro-surge strong.surge-intro-bignum {
    font-size: 15px;
  }

}

/* Height alignment for intro "Hell and High Water" */

@media screen and (max-height: 736px){
  #intro { top: 33%; }
}
@media screen and (max-height: 627px){
  #intro { top: 29%; }
}
@media screen and (max-height: 568px){
  #intro { top: 23%; }
}
@media screen and (max-height: 480px){
  #intro { top: 18%; }
}