@media screen and (max-width: 1200px) {
  .view-social-innovation-categories {
    position: static;
    text-align: left;
  }
  .view-social-innovation-categories {
    width: 100vw;
    margin-left: -webkit-calc(-50vw + 50%);
    margin-left: -moz-calc(-50vw + 50%);
    margin-left: calc(-50vw + 50%);
    background: #333;
  }
  .view-social-innovation-categories .view-content {
    max-width: 940px;
    width: 100%;
    margin: 0 auto;
    display: block;
  }
  .view-social-innovation-categories ul li {
    display: inline-block;
    margin: 0;
    padding: 10px 40px 10px 0;
  }
  .view-social-innovation-categories .views-field-name {
     display: inline-block;
  }
  .view-social-innovation-categories .views-field-name a {
    padding: 4px 10px 2px;
    background: #333;
    color: #fff;
    display: inline-block;
    margin: 0 auto;
    width: auto;
    text-transform: uppercase;
    font-size: 12px;
  }
  .view-social-innovation-categories .views-field-name a:hover {
    background: #fff;
    color: #333;
  }
  /*.view-social-innovation-categories .views-field-name a.active {
    background: #e30126;
    color: #fff;
  }*/
  .view-social-innovation.view-display-id-block_1 h1.social-innovation-article-title {
    font-size: 72px;
    max-width: 60%;
  }
  .view-social-innovation.view-display-id-block_1 h2.social-innovation-article-title {
    font-size: 72px;
  }
}

@media screen and (max-width: 995px) {
  .view-social-innovation.view-display-id-block_1 h1.social-innovation-article-title {
    font-size: 36px;
    max-width: 100%;
  }
  .view-social-innovation .view-content .hero .views-field-title h2 .extra {
    font-size: 72px;
  }
  .view-social-innovation.view-display-id-block_1 .view-content .article-wrapper-content {
    width: 700px;
  }
  .view-social-innovation.view-display-id-block_1 .text-wrapper {
     max-width: 75%;
  }
  .view-social-innovation .hero {
    min-height: 425px;
    position: relative;
  }
  .view-social-innovation .hero img {
    min-height: 100%;
    min-width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .node-type-social-article h1.social-innovation-article-title span {
    padding: 0 10px;
  }
  .node-type-social-article .social-header-inner {
    padding: 30px 0;
  }
  .node-type-social-article h1.social-innovation-article-title {
    max-width: 100%;
  }
  .node-type-social-article .pane-node-field-summary {
    max-width: 100%;
  }

  .view-social-innovation-categories .view-content {
    max-width: 700px;
    font-size: 0.9em;
  }
  .view-social-innovation-categories ul li {
    padding: 10px 20px 10px 0;
  }

  .view-social-innovation .half.odd {
    width: -webkit-calc(50% - 22px);
    width: -moz-calc(50% - 22px);
    width: calc(50% - 22px);
    margin: 30px 20px 0 0;
  }
  .view-social-innovation .half.even {
    width: -webkit-calc(50% - 22px);
    width: -moz-calc(50% - 22px);
    width: calc(50% - 22px);
    margin: 30px 0 0 20px;
  }
  .view-social-innovation .half .article-wrapper-content {
    width: 100%;
  }
  .view-social-innovation .m2 {
    height: auto;
    width: 100%;
    display: block;
    max-width: 700px;
    margin: 30px auto;
  }
  .view-social-innovation .m2 .article-wrapper-content {
    width: 100%;
  }
  .view-social-innovation .m2 .views-field-field-block-image {
    max-width: -webkit-calc(50% - 20px);
    max-width: -moz-calc(50% - 20px);
    max-width: calc(50% - 20px);
    margin-left: 20px;
    height: auto;
  }
  .view-social-innovation .view-content .views-field-title h2 {
    width: 100%;
  }
  .view-social-innovation .m4 {
    padding: 30px 10px;
  }
  .view-social-innovation .m4 .inner {
    height: 425px;
    width: 100%;
    display: block;
    max-width: 700px;
    margin: 30px auto;
  }
  .view-social-innovation .m4 img {
    height: 425px;
    width: 100%;
    display: block;
    object-fit: cover;
  }
  .view-social-innovation .m4 .inner .article-wrapper-content {
    max-width: -webkit-calc(50% - 20px);
    max-width: -moz-calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
  .view-social-innovation .m4 .inner .article-wrapper-content .article-wrapper-content-inner {
    width: 100%;
  }
  .view-social-innovation .m3 .inner {
    max-width: 700px;
    width: 100%;
  }
  .view-social-innovation .m3 .article-wrapper-content {
    max-width: -webkit-calc(50% - 20px);
    max-width: -moz-calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
  .view-social-innovation .m3 .views-field-field-long-image {
    max-width: -webkit-calc(50% - 20px);
    max-width: -moz-calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
  .view-social-innovation .view-content .m5 .article-wrapper-content-inner {
    margin: 0 auto;
    padding: 50px 0px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 700px;
  }
  .view-social-innovation .m5 img {
    min-height: 100%;
    min-width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: -1;
  }
  .view-social-innovation .m5:hover .views-field-field-wide-image img {
    opacity: 1;
  }
  .view-social-innovation .view-content .m5 .article-wrapper-content {
    position: static;
  }
  .view-social-innovation .view-content .m5 .article-wrapper-content-inner .views-field-field-summary {
    max-width: 100%;
  }
  .node-type-social-article h1.social-innovation-article-title {
    font-size: 72px;
  }
  .node-type-social-article .social-header-inner {
    max-width: 700px;
    padding: 100px 0;
  }
  .article-wrapper-content .article-wrapper-content-inner {
    max-height: 100%;
    overflow: hidden;
  }


  .node-type-social-article .field-name-field-heading {
    font-size: 28px;
  }
  .node-type-social-article .field-name-field-sub-heading {
    font-size: 21px;
  }
  .node-type-social-article .panel-pane {
    padding: 0 30px;
  }
  .node-type-social-article .panel-pane.pane-node-title {
    padding: 0;
  }
  .node-type-social-article .pane-node-field-summary {
    padding: 30px;
  }
  .view-social-innovation .view-content .hero .views-field-title h2 {
    font-size: 72px;
  }
  .view-social-innovation .view-content .views-field-title h2 {
    font-size: 34px;
  }
  .view-social-innovation .m2 .views-field-field-block-image {
    margin-bottom: 20px;
  }

  .view-social-innovation .view-content .hero .views-field-title h2 span {
    padding: 0 15px;
  }

.pane-views.pane-related-stories .views-row.views-row-odd {
      width: -webkit-calc(50% - 22px);
      width: -moz-calc(50% - 22px);
      width: calc(50% - 22px);
      margin: 30px 20px 0 0;
  }

 .pane-views.pane-related-stories .views-row.views-row-even {
      width: -webkit-calc(50% - 22px);
      width: -moz-calc(50% - 22px);
      width: calc(50% - 22px);
      margin: 30px 0 20px;
  }

  .pane-views.pane-related-stories h3 a:link, .pane-views.pane-related-stories h3 a:link, .pane-views.pane-related-stories h3 a {
      font-size: 22px;
      line-height: 32px;
  }

}
@media screen and (max-width: 767px) {

  .view-social-innovation.view-display-id-block_1 .view-content .article-wrapper-content {
    width: 90%;
  }
  .view-social-innovation.view-display-id-block_1 .text-wrapper {
     max-width: 100%;
  }

  .view-social-innovation.view-display-id-block_1 h2.social-innovation-article-title {
    max-width: 100%;
  }
  .view-social-innovation .view-content .hero .views-field-title h2 {
    font-size: 36px;
  }

  .view-social-innovation .view-content .hero .views-field-title h2 span {
    padding: 0 5px;
  }

  .node-type-social-article h1.social-innovation-article-title span {
    padding: 0 5px;
    font-size: 28px;
  }

  .node-type-social-article .social-header-inner {
    width: 90%;
    padding: 50px 0;
  }

  .view-social-innovation-categories .view-header {
    max-width: 100%;
    width: 425px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 0 auto;
  }

  .view-social-innovation-categories .view-content {
    max-width: 100%;
    width: 425px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
  }

  .view-social-innovation-categories .view-content .item-list {
    background-color: #FFF;
    display: inline-block;
  }

  .view-social-innovation .half.even, .view-social-innovation .half.odd {
    width: 100%;
    display: block;
    max-width: 425px;
    margin: 30px auto;
    float: none;
  }
  .view-social-innovation .half .article-wrapper-content {
    width: 100%;
  }
  .view-social-innovation .m2 {
    height: auto;
    width: 100%;
    display: block;
    max-width: 425px;
    margin: 30px auto;
  }
  .view-social-innovation .m2 .article-wrapper-content {
    width: 100%;
    clear: both;
  }
  .view-social-innovation .m2 .views-field-field-block-image {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    float: none;
  }
  .view-social-innovation .view-content .views-field-title h2 {
    width: 100%;
  }
  .view-social-innovation .m4 {
    padding: 30px 10px;
  }
  .view-social-innovation .m4 .inner {
    height: 425px;
    width: 100%;
    display: block;
    max-width: 425px;
    margin: 30px auto;
  }
  .view-social-innovation .m4 img {
    height: 425px;
    width: 100%;
    display: block;
    max-width: 425px;
    object-fit: cover;
  }
  .view-social-innovation .m4 .inner .article-wrapper-content {
    width: 100%;
    max-width: 100%;
  }
  .view-social-innovation .m4 .inner .article-wrapper-content .article-wrapper-content-inner {
    width: 100%;
  }
  .view-social-innovation .m3 .inner {
    max-width: 425px;
    width: 100%;
  }
  .view-social-innovation .m3 .article-wrapper-content {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
  }
  .view-social-innovation .m3 .views-field-field-long-image, .view-social-innovation .m3 .article-wrapper-content {
    max-width: 100%;
  }
  .view-social-innovation .view-content .m5 .article-wrapper-content-inner {
    margin: 0 auto;
    padding: 50px 20px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 425px;
  }
  .view-social-innovation .m5 img {
    min-height: 100%;
    min-width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: -1;
  }
  .view-social-innovation .m5:hover .views-field-field-wide-image img {
    opacity: 1;
  }
  .view-social-innovation .view-content .m5 .article-wrapper-content {
    position: static;
  }
  .view-social-innovation .view-content .m5 .article-wrapper-content-inner .views-field-field-summary {
    max-width: 100%;
  }
  .node-type-social-article h1.social-innovation-article-title {
    font-size: 36px;
  }


  .node-type-social-article .field-name-field-heading {
    font-size: 28px;
  }
  .node-type-social-article .field-name-field-sub-heading {
    font-size: 21px;
  }
  .node-type-social-article .panel-pane {
    padding: 0 30px;
  }
  .node-type-social-article .panel-pane.pane-node-title {
    padding: 0;
  }
  .node-type-social-article .pane-node-field-summary {
    padding: 30px;
  }
  .view-social-innovation.view-display-id-block_1 h2.social-innovation-article-title {
    font-size: 36px;
  }
  .view-social-innovation .view-content .views-field-title h2 {
    font-size: 34px;
  }
  .view-social-innovation .m2 .views-field-field-block-image {
    margin-bottom: 20px;
  }

  .node-type-social-article .field-name-field-body-bottom,
  .node-type-social-article .field-name-field-top-text,
  .node-type-social-article .field-name-field-sub-heading,
  .node-type-social-article .field-name-field-heading {
    width: 100%;
  }

  .view-social-innovation-categories {
    padding: 14px 0;
  }

  .view-social-innovation-categories .view-content {
    position: relative;
  }

  .view-social-innovation-categories .view-header {
    display: block;
    margin: 0 auto;
  }

  .view-social-innovation-categories .view-header i {
    color: #E30126;
    margin: 0 5px;
  }

  .view-social-innovation-categories .item-list {
      width: 115px;
      position: absolute;
      z-index: 100;
  }

  .view-social-innovation-categories ul {
    margin: 0 0 5px;
  }

  .view-social-innovation-categories ul.closed {
    display: none;
  }

  .view-social-innovation-categories .view-header p {
    margin: 0;
    padding: 2px 14px;
    background: #FFF;
    color:#000;
    width:115px;
    font-family: "HelveticaLTStd-Light";
  }

  .view-social-innovation-categories ul li {
    padding: 0;
    display: block;
  }

  .page-social-innovation-stories .view-social-innovation-categories ul li.active a,
  .view-social-innovation-categories ul li .views-field-name a {
    color: #000;
    background-color: #FFF;
    padding: 0px 14px;
  }

  .view-social-innovation-categories ul li .views-field-name a {
    color: #000;
    background-color: #FFF;
  }

  .view-social-innovation-categories ul.closed li.not-active {
  }
  .view-social-innovation-categories ul.open li.not-active.show {
    display: block;
  }
  .view-social-innovation-categories ul.open li.show a {
    width: 100%;
    display: block;
  }
  .view-social-innovation-categories ul.closed li.active {
    display: block;
    cursor: pointer;
    background: url(../image/down-arrow.png) right center no-repeat;
  }
  .view-social-innovation-categories ul.open li.active {
    display: block;
    cursor: pointer;
    background: url(../image/up-arrow.png) right center no-repeat;
  }
  .page-social-innovation-stories .view-social-innovation-categories ul li.active a {
    pointer-events: none;
  }
  .view-social-innovation-categories .views-field-name a.active {
    background: none !important;
    color: #000;
  }

  .view-related-stories .views-row {
    width: 100%
  }
  .view-related-stories .views-row-odd,
  .view-related-stories .views-row-even {
    margin: 15px 0;
  }

  .come-in.even {
    animation-duration: 1s;
  }
  .view-social-innovation .view-content .views-field-title h2 {
    font-size: 24px;
  }

  .pane-views.pane-related-stories .views-row.views-row-odd, .pane-views.pane-related-stories .views-row.views-row-even {
      width: 100%;
      display: block;
      max-width: 425px;
      margin: 30px auto;
  }

  span.date-display-single {
    font-size: 12px;
  }

  .node-type-social-article .field-name-field-heading div {
    font-size: 28px;
    line-height: 36px;
  }

  .node-type-social-article .field-name-field-sub-heading div {
    font-size: 16px;
    line-height: 24px;
  }

  .node-type-social-article .pane-content p {
    font-size: 14px;
    line-height: 18px;
  }

  .node-type-social-article .field-name-field-article-date {
    padding: 35px 0 20px;
  }

  .social-article-node-pager a.prev , .social-article-node-pager a.next{
    text-indent: -9999px;
    overflow:hidden;
    width: 40px;
    padding: 10px 20px 10px 20px;
  }

  .pane-views.pane-related-stories h3 a:link, .pane-views.pane-related-stories h3 a:link, .pane-views.pane-related-stories h3 a {
    font-size: 16px;
    line-height: 24px;
  }

}