/*
Theme SFEd Fund 2020 Responsive
*/

.mobile-only {
  display: none !important;
}

@media screen and (max-width: 770px) {
  /*
  Common
  */
  .holder.flex-row {
    justify-content: center;
  }

  body .holder {
    width: auto;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }

  /*
  Header
  */

  body .nav-panel {
    background: white;
  }

  body .nav-panel .holder {
    padding: 0px 24px;
  }

  body #nav .nav-bar ul.sub-menu {
    display: none;
  }

  body .nav-buttons .btn-volunteer-link {
    display: none;
  }

  body #nav .nav-bar a {
    color: #ffffff;
    padding: 20px 12px;
  }

  body #nav .nav-bar {
    padding: 20px;
  }

  body .nav-panel .holder .navs {
    justify-content: flex-end;
    margin-left: auto;
  }

  body .nav-panel .holder .navs #nav {
    order: 2;
  }

  body .nav-panel .holder .navs .opener {
    margin-left: 23px;
  }

  body.active #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    border: none;
    z-index: 99999;
  }

  body.active #nav .mobile-drop {
    height: 100vh;
    background: #ffffff;
    top: 60px;
  }

  body #nav .mobile-drop .nav-bar {
    background: none;
    position: fixed;
    bottom: calc(50% - 57px);
    left: 0px;
    right: 0px;
    margin: auto;
  }

  body.active .nav-buttons {
    position: fixed;
    top: calc(50% + 57px);
    flex-flow: column nowrap;
    width: 152px;
    padding: 15px;
    left: 0px;
    right: 0px;
    margin: auto;
    border-top: 2px solid rgba(56, 82, 104, 0.2);
  }

  body.active #nav .mobile-drop .nav-bar a {
    font-family: Lato;
    font-style: normal;
    font-weight: 900;
    font-size: 16px;
    line-height: 110%;
    text-align: center;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #33495e;
  }

  body.active #nav .mobile-drop .nav-bar .sub-menu {
    display: none !important;
  }

  body.active .nav-buttons a {
    padding: 20px;
    margin-bottom: 30px;
  }

  body.active .nav-bar {
    display: flex;
    flex-flow: column nowrap;
  }

  body.active .nav-buttons .btn-volunteer-link {
    display: block;
  }

  body .btn-volunteer-link {
    margin-right: 0px;
    font-family: Lato;
    font-style: normal;
    font-weight: 900;
    font-size: 16px;
    line-height: 110%;
    text-align: center;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #33495e !important;
  }

  /*
  Footer
  */

  body .panel-footer .holder {
    padding: 0 24px;
  }

  body .panel-footer .holder .row-one .nav-footer > .menu-item,
  body .panel-footer .holder .row-two .info-block {
    width: calc(50% - 6px);
  }

  body .panel-footer .holder .row-one .nav-footer .sub-menu .menu-item {
    width: auto;
  }
  body .panel-footer .holder .row-two .info-block {
    margin-bottom: 20px;
  }

  body .panel-footer .social-networks li {
    margin: 0px 8px 8px 0px;
  }

  /*
  Home
  */

  body .section-hero {
    padding: 48px 24px;
  }

  body .hero-title {
    font-size: 40px;
    line-height: 110%;
    letter-spacing: -0.01em;
  }

  body .hero-buttons {
    flex-flow: column nowrap;
  }

  body .hero-buttons a,body .hero-buttons div {
    margin-left: 0px;
    margin-top: 24px;
    height: 68px;
    width: 200px;
  }

  body .hero-image-container {
    margin-top: 68px;
  }

  body .section-block .hero-image {
    height: 433px;
    width: 462px;
    max-width: none;
  }

  body .section-icons {
    padding: 68px 24px 48px 24px;
  }

  body .section-icons .icons-title {
    font-size: 30px;
    line-height: 115%;
    text-align: center;
    letter-spacing: 0.005em;
  }

  body .section-icons .three-cols .col:after {
    content: none;
  }

  body .section-icons .three-cols {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
  }

  body .section-icons .three-cols h3 {
    font-size: 30px;
    line-height: 115%;
    text-align: center;
    letter-spacing: 0.005em;
  }

  body .section-icons .three-cols a:not(.link) {
    font-size: 17px;
    line-height: 150%;
    text-align: center;
  }

  body .section-icons .three-cols a {
    max-width: 100%;
  }

  body .section-icons .text-holder {
    height: auto;
    margin-bottom: 24px;
  }

  body .section-programs-map {
    padding: 38px 24px 68px 24px;
  }

  body .programs-image-container {
    height: auto;
  }

  body .programs-map-legend {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
  }

  body .programs-map-legend img {
    margin-top: 16px;
    margin-left:14px;
  }

  body .section-videos {
    padding: 0px;
  }

  body .section-videos .videos-list .video-item {
    width: 100%;
    margin-bottom: 68px;
  }

  body .section-videos .video-container {
    height: 440px;
    max-width: 100vw;
  }

  body .section-videos .video-container .video-poster {
    max-width: none;
    height: 100%;
  }

  body .section-subscribe .border-bar-image {
    transform: scaleY(3);
  }

  body .subscribe-mail-image {
    margin: 24px;
    max-width: calc(100% - 48px);
    margin-top: 0px;
  }

  body .subscribe-mail-form-container {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 24px;
  }

  body .subscribe-mail-form-container .wFormContainer .wFormTitle {
    white-space: normal;
  }
}

@media screen and (min-width: 1081px) and (max-width: 1280px) {
  body #wrapper{
    transform: scale(0.8);
    transform-origin: 0 0;
    width: 125%;

    margin-bottom: -1000% !important;
  }
}

@media screen and (min-width: 881px) and (max-width: 1080px) {
  body #wrapper{
    transform: scale(0.7);
    transform-origin: 0 0;
    width: 142.86%;

    margin-bottom: -1000% !important;
  }
}

@media screen and (min-width: 771px) and (max-width: 880px) {
  body #wrapper{
    transform: scale(0.6);
    transform-origin: 0 0;
    width: 166.67%;

    margin-bottom: -1000% !important;
  }
}