@media screen and (max-width: 980px) {
  body.nav-active .main-wrapper {
    right: 260px;
  }
  body.nav-active .main-header .topnav-wrap {
    right: 0;
  }

  .main-header .container {
    position: relative;
  }

  .main-wrapper {
    position: relative;
    right: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .main-header {
    padding: 0 10px;
  }
  .main-header .topnav-toggle {
    display: block;
  }
  .main-header .topnav-wrap {
    position: fixed;
    top: 0;
    width: 260px;
    right: -260px;
    background: #fff;
    padding: 24px 36px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .main-header .topnav-wrap .topnav {
    padding-top: 0;
  }
  .main-header .topnav-wrap .topnav > li {
    width: 100%;
    float: left;
    position: relative;
    margin-bottom: 2px;
  }
  .main-header .topnav-wrap .topnav > li .item {
    float: left;
  }
  .main-header .topnav-wrap .topnav > li .blue-btn {
    float: left;
  }
}
@media screen and (max-width: 767px) {
  .main-header .container {
    position: static;
  }

  .content-wrap {
    padding: 40px 0;
  }
  .content-wrap .main-headline {
    font-size: 30px;
  }

  .main-footer .inner-wrap .bottom-nav {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
}