/* Responsive layout styles */

html, body {
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 0) {
  #container #fundraiser-search {
    padding: 0 0 20px !important;
    background: transparent;
    border-bottom: thin solid #ddd;
  }

  #container #fundraiser-search:after {
    content: '';
    display: table;
    clear: both;
  }

  #container #content #event #fundraiser-search > div {
    max-width: 400px !important;
  }

  #container #fundraiser-search h2 {
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  #container #content #event #fundraiser-seach-input-holder {
    float: left !important;
    width: calc(100% - 66px);
    padding: 0 !important;
  }

  #container #fundraiser-search input#search_form {
    width: 100% !important;
    border: thin solid #ccc;
    height: 20px;
    padding: 2px 4px;
    box-sizing: border-box;
    border-radius: 2px;
  }

  #container #content #fundraiser-search #fundraiser-search-button {
    float: right !important;
    width: 56px;
  }

  #content #results a.black-button {
    color: white !important;
  }

  #container #fundraiser-search a.search-button,
  #container #fundraiser-search a.search-button:visited {
    margin: 0 !important;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none !important;
  }
}

@media (max-width: 815px) {
  #container,
  #content,
  #event-header,
  #navi-level-2 ul,
  #event-nav ul,
  #event-base-plate,
  #event-sponsors,
  #event-footer {
    max-width: 720px;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }

  body #event-header {
    height: auto !important;
    padding-bottom: 27.5% !important;
    background-size: 100% !important;
  }

  body #event-header div.left_column,
  body #event-header div.right_column {
    float: none;
    width: auto;
    height: auto;
    padding: 20px;
  }

  #cta-box a:hover,
  #event-footer a:hover {
    color: white !important;
  }

  body #event-header div.right_column {
    margin-bottom: -27.5%;
    padding-top: 0;
  }

  body #event-header div.right_column div.vertical-align h1 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25em;
  }

  #content {
    padding: 10px 20px;
  }

  #content div:not(#c-sidebar):not(#c-content) {
    max-width: 100%;
    float: none !important;
  }

  #content img {
    max-width: 100%;
    height: auto;
    margin: 10px auto !important;
  }

  #content ul.list_heroes li {
    float: none;
    width: auto;
    margin: 0 0 30px;
  }

  #content ul.list_heroes li a img {
    margin: 0 15px 0 0 !important;
  }

  #two-col-l #c-content,
  #two-col-l #c-sidebar,
  #two-col-r #c-content,
  #two-col-r #c-sidebar,
  #single-col #c-content {
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
  }

  #c-content {
    width: calc(100% - 290px) !important;
  }

  #c-sidebar {
    width: 270px !important;
  }

  #single-col #c-content {
    width: auto;
    float: none;
    clear: both;
  }

  #c-content img {
    max-width: 100%;
    height: auto;
  }

  #contact,
  #event {
    padding: 0;
    box-sizing: border-box;
  }

  #free-content iframe {
    border: 0;
  }

  #free-content table {
    table-layout: fixed;
    width: 100%;
  }

  #wrapper .c-box {
    border: 0;
    padding: 0;
  }

  body #cta-box span a {
    display: inline-block !important;
  }

  /* Override default button styles */

  body #cta-box span a[style*='ctashim.png'],
  body #cta-box span a[style*='ctashim.png']:hover {
    text-align: center !important;
    display: block !important;
    width: auto !important;
    background-image: linear-gradient(rgba(255,255,255,0.25),rgba(255,255,255,0)) !important;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.15), inset 0 0 0 1px rgba(0,0,0,.25);
    color: white !important;
    text-decoration: none !important;
  }

  body .fb_iframe_widget,
  body .fb-like-box.fb_iframe_widget span {
    display: block;
    margin: auto;
  }

  body #charity-profile td {
    display: block;
  }

  body #featured-charities {
    text-align: center;
  }

  body #featured-charities ul li {
    float: none;
    display: inline-block;
  }

  .galleria-container, .galleria-stage {
    width: 100% !important;
  }

  #side-content {
    text-align: center;
  }

  #side-content img {
    float: none !important;
  }

  #content iframe,
  #side-content iframe {
    display: block;
    margin: auto;
    max-width: 100% !important;
  }

  body #event-footer {
    padding: 0 15px 15px;
    height: auto !important;
  }

  body #event-footer a {
    display: inline-block;
    padding: 5px 10px;
    line-height: 2em;
  }

  body #event-footer > div {
    font-size: 0;
    color: transparent;
  }

  body .event-powered-by {
    text-align: center;
  }
}

@media (max-width: 720px) {
  #container,
  #content,
  #event-header,
  #navi-level-2 ul,
  #event-nav ul,
  #event-base-plate,
  #event-sponsors,
  #event-footer {
    max-width: 620px;
  }

  body #cta-box {
    border: 0;
    padding: 20px 0;
    margin: 0;
  }

  #content.fixed-ctas {
    position: relative;
  }

  #content.fixed-ctas #cta-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
  }

  #content table td {
    display: block;
    width: auto !important;
  }

  #content table td img {
    display: block;
  }

  #social-links {
    text-align: center;
  }

  #content #social-links li > * {
    float: none;
    display: inline-block;
  }

  #content #social-links li > * img {
    margin: 0 !important;
  }

  #content #results {
    padding: 0 !important;
  }

  #content #results td[style*='background-color:#eee'] {
    display: none !important;
  }

  #content #results a.fundraiser-search-result-link {
    display: block;
  }

  #content #results a.grey-button {
    margin: 6px 0 10px;
  }

  #content #results a.grey-button,
  #content #results a.black-button {
    white-space: nowrap;
    text-decoration: none !important;
  }

  #content #results a.black-button {
    float: right;
    margin-top: -3px;
  }

  #content #results td .money {
    clear: both;
    display: block;
    float: left;
    margin-bottom: 5px;
  }

  #two-col-l #c-content,
  #two-col-l #c-sidebar,
  #two-col-r #c-content,
  #two-col-r #c-sidebar,
  #single-col #c-content {
    width: auto !important;
    float: none !important;
    clear: both;
  }

  #navi-level-2,
  #event-nav,
  #navi-level-2 ul,
  #event-nav ul,
  #navi-level-2 ul li,
  #event-nav ul li {
    float: none;
    background-image: none !important;
  }

  #navi-level-2 ul,
  #event-nav ul {
    display: flex;
    flex-direction: column-reverse;
  }

  #navi-level-2 ul:before,
  #event-nav ul:before,
  #navi-level-2 ul li a,
  #event-nav ul li a {
    padding: 0.75em 1.5em;
    line-height: 1.5em;
    font-size: 14px;
    box-sizing: border-box;
    background-image: none;
    border-bottom: thin solid rgba(255,255,255,.2)
  }

  /* Toggle menu */

  #navi-level-2.toggle-nav ul,
  #event-nav.toggle-nav ul {
    min-height: 0;
    max-height: 43px;
    transition: max-height 300ms ease;
    overflow: hidden;
    padding-top: 43px;
  }

  #navi-level-2.toggle-nav ul:before,
  #event-nav.toggle-nav ul:before {
    content: 'Menu';
    color: white;
    position: relative;
    z-index: 8;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  #navi-level-2.toggle-nav ul:after,
  #event-nav.toggle-nav ul:after {
    content: '';
    position: absolute;
    top: 14px;
    right: 20px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    cursor: pointer;
    z-index: 10;
    width: 20px;
    height: 14px;
    line-height: 7px;
    text-align: center;
    color: white;
    font-size: 24px;
    font-family: tahoma, sans-serif;
    font-weight: normal;
    background: linear-gradient(transparent 4px, white 4px, white 6px, transparent 6px);
    box-sizing: border-box;
    transition: transform 200ms ease;
  }

  #navi-level-2.toggle-nav ul li,
  #event-nav.toggle-nav ul li {
    display: none;
  }

  #navi-level-2.toggle-nav.toggle-nav-active ul,
  #event-nav.toggle-nav.toggle-nav-active ul {
    max-height: 800px;
  }

  #navi-level-2.toggle-nav.toggle-nav-active ul li,
  #event-nav.toggle-nav.toggle-nav-active ul li {
    display: block;
  }

  #navi-level-2.toggle-nav.toggle-nav-active ul:before,
  #event-nav.toggle-nav.toggle-nav-active ul:before {
    background: rgba(0,0,0,.1);
  }

  #navi-level-2.toggle-nav.toggle-nav-active ul:after,
  #event-nav.toggle-nav.toggle-nav-active ul:after {
    transform: rotate(90deg);
    content: '\00D7';
    border-color: transparent;
    background: none;
  }
}

@media only screen and (min-width: 721px) {
  #content.fixed-ctas {
    padding-top: 0 !important;
  }
}