@media only screen and (max-width: 900px) {
  #content #sidebar { padding-left: 0px; }
  #hero-slider { margin: 96px auto 30px; }
  #hero-slider .flex-caption h1 { font: 44px/1.3 "raleway-semibold",sans-serif; margin-bottom: 36px; }
  #portfolio .row.items { max-width: none; width: 100%; padding: 0px; }
  #portfolio .row.items .twelve.columns { padding: 0px; }
  #team-wrapper .member-pic { width: 66px; height: 66px; }
}

@media only screen and (max-width: 768px) {
  header { background: #12151b none repeat scroll 0% 0%; }
  header { height: 60px; }
  header .logo { margin: 24px 0px 0px; }
  header .logo a { margin-right: 0px; }
  #nav-wrap { z-index: 991; display: block; margin-top: 0px; width: 100%; float: none; position: absolute; top: 0px; right: 0px; }
  #nav-wrap > a { background: #f26522 none repeat scroll 0% 0%; border: medium none; color: white; height: 60px; min-width: 60px; font-size: 12px; text-align: left; float: right; padding: 0px; position: relative; }
  #nav-wrap .menu-text { text-transform: uppercase; margin-right: 60px; padding-left: 20px; vertical-align: middle; line-height: 60px; display: none; }
  #nav-wrap .menu-icon { display: inline-block; width: 20px; height: 3px; margin-top: -3px; position: absolute; right: 20px; top: 50%; bottom: auto; left: auto; background: white none repeat scroll 0% 0%; }
  #nav-wrap .menu-icon::before, #nav-wrap .menu-icon::after { content: ""; width: 100%; height: 100%; position: absolute; background-color: inherit; left: 0px; }
  #nav-wrap .menu-icon::before { bottom: 6px; }
  #nav-wrap .menu-icon::after { top: 6px; }
  #nav-wrap ul#nav { background: #262d3a none repeat scroll 0% 0%; padding: 54px 45px 60px; margin: 0px; height: auto; display: none; clear: both; width: 100%; float: none; position: relative; top: 0px; right: 0px; }
  #nav-wrap ul#nav > li { display: block; float: none; height: auto; text-align: left; border-bottom: 1px dotted #3b4558; padding: 6px 0px; }
  #nav-wrap ul#nav > li:first-child { border-top: 1px dotted #3b4558; }
  #nav-wrap ul#nav li a { display: block; width: auto; padding: 12px 0px; line-height: 16px; border: medium none; }
  #nav-wrap ul#nav li a:hover { color: white; }
  #nav-wrap ul#nav li.current > a { background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; color: #f26522; }
  .js #nav-wrap a.mobile-btn { display: none; }
  .js #nav-wrap a#toggle-btn { display: block; }
  .no-js #nav-wrap:not(:target) > a:first-of-type, .no-js #nav-wrap:target > a:last-of-type { display: block; }
  .no-js #nav-wrap:target ul#nav { display: block; }
  #content { padding-top: 54px; }
  #content #sidebar { margin-top: 42px; padding-left: 0px; }
  #sidebar .link-list { margin-left: -3px; }
  #sidebar .link-list li { display: inline-block; padding: 8px 0px; }
  #sidebar .link-list li a { display: inline-block; white-space: nowrap; }
  #sidebar .link-list li::before { content: "|"; padding-left: 3px; padding-right: 6px; color: #cfd9db; }
  #sidebar .link-list li:first-child::before { display: none; }
  #sidebar .link-list li:first-child { margin-left: 6px; }
  footer { padding-bottom: 36px; }
  footer .footer-about { padding-right: 25px; }
  footer .copyright { padding-left: 15px; padding-right: 60px; }
  footer #go-top { right: 0px; }
  footer #go-top a { height: 60px; width: 60px; line-height: 60px; padding: 0px; }
  footer #go-top a span { display: none; }
  footer #go-top a i { font-size: 16px; }
  .section-head p { width: 100%; }
  #page-title h1 { font: 46px/1.3 "raleway-bold",sans-serif; width: 100%; }
  #page-title p { font: 15px/30px "merriweather-light",sans-serif; width: 100%; }
  .entry header { text-align: center; }
  .entry .entry-meta ul { text-align: center; margin-top: 6px; }
  .pagenav a[rel="next"]::after { float: right; }
  #hero-slider { margin: 78px auto 24px; }
  #hero-slider .flex-caption { margin: 0px 8%; }
  #hero-slider .flex-caption h1 { font: 42px/1.3 "raleway-semibold",sans-serif; }
  #about .about-content { padding: 0px 30px; }
  #about .left { padding-right: 15px; }
  #about .right { padding-left: 15px; }
  .entry p.lead { font: 16px/33px "merriweather-light",sans-serif; }
  #comments h3 { text-align: center; }
  #comments form { margin-left: 0px; border-bottom: 1px solid white; }
  #comments form input, #comments form textarea, #comments form select, #comments form label { width: 100%; float: none; }
  #comments form label { padding-left: 0px; }
  #comments form div { margin: 6px 0px 0px; }
  #comments form input { margin-bottom: 0px; }
  #comments form .message label { display: block; }
  #comments form button { width: 100%; margin-top: 24px; }
}

@media only screen and (max-width: 600px) {
  #content { padding-top: 48px; }
  footer .footer-about { padding-right: 10px; }
  footer .copyright { padding-left: 10px; }
  .section-head p { font: 16px/33px "merriweather-light",sans-serif; }
  .entry header h1 { font: 26px/33px "raleway-bold",sans-serif; }
  #hero { padding-bottom: 66px; }
  .service-list .bgrid { margin-top: 12px; margin-bottom: 12px; padding: 0px 60px; }
  #about h3 { text-align: center; }
  #about .left { padding-right: 10px; }
  #about .right { padding-left: 10px; }
  #team-wrapper .member { text-align: center; }
  #team-wrapper .member-pic { position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -39px; }
  #team-wrapper .member-name { margin-left: 85px; }
  #team-wrapper .member-name h3, #team-wrapper .member-name span { text-align: left; }
  #journal #blog-wrapper { margin: 24px 20px 0px; }
  #journal #blog-wrapper h5, #journal #blog-wrapper h3 { text-align: center; }
  #contact .form-section { padding-left: 40px; padding-right: 40px; }
  .commentlist { width: 100%; margin-left: 0px; }
  .commentlist > li { padding-left: 0px; }
  .commentlist li .avatar { display: none; }
  .more-projects h1 { font: 26px/33px "raleway-bold",sans-serif; }
}

@media only screen and (max-width: 480px) {
  #hero-slider { width: 94%; margin: 54px auto 24px; }
  #hero-slider .flex-caption { margin: 0px; }
  #hero-slider .flex-caption h1 { font: 36px/1.3 "raleway-semibold",sans-serif; }
  #team-wrapper .member-pic { width: 60px; height: 60px; margin-top: -30px; }
  #team-wrapper .member-name { margin-left: 60px; }
  #team-wrapper .member-name h3 { font-size: 15px; line-height: 18px; margin-bottom: 12px; }
}

@media only screen and (max-width: 460px) {
  footer .right-cols .columns { width: 100% !important; }
  .service-list .bgrid { padding: 0px 22px; }
  #journal #blog-wrapper { margin: 24px -18px 0px; }
  #contact .form-section { padding-left: 20px; padding-right: 20px; }
}

@media only screen and (max-width: 420px) {
  #page-title h1 { font: 38px/1.3 "raleway-bold",sans-serif; }
  .item .item-wrap .portfolio-item-meta { margin-right: 15px; }
  .item .item-wrap .portfolio-item-meta h5 { font: 13px/18px "raleway-heavy",sans-serif; }
  .item .item-wrap .portfolio-item-meta p { font: 12px/18px "raleway-semibold",sans-serif; }
}

@media only screen and (max-width: 400px) {
  footer .footer-about { padding-right: 0px; }
  footer .copyright { padding-left: 0px; }
  #hero-slider { width: 100%; }
  #hero-slider .flex-caption h1 { font: 32px/1.3 "raleway-semibold",sans-serif; }
  #about .about-content { padding: 0px 30px; }
  #about .left { padding: 0px; }
  #about .right { padding: 0px; }
  #contact .form-section { padding-left: 30px; padding-right: 30px; }
}

@media only screen and (min-width: 768px) {
  #nav-wrap ul#nav { display: block !important; }
}

#wonb {
  background-color: black;
}

#wonb:hover {
  background-color: black;
}