/*
* This is the SDD resonsive CSS that supplements or changes those that coame with the base theme.
*/


/* @media only screen and (min-width: 1025px) {} */

@media (max-width: 1200px) {
  #page-wrapper:not(.front) .layout-main {
    max-width: 1000px;
    margin: 65px auto;
  }

  #page-wrapper .page-volunteers .layout-main,
  #page-wrapper .page-forums .layout-main,
  #page-wrapper .page-news .layout-main {
    max-width: none;
    margin: 0;
  }
  .page-blog #content .view-blog .item-list ul li,
  .page-news #content .view-news .item-list ul li {
    margin: 0px 38px 0;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption a {
    font-size: 35px;
    letter-spacing: 0.88px;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption p {
    font-size: 16px;
    width: 350px;
    margin-right: 2%;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption img:nth-child(2) {
    width: 250px;
  }
  #block-sddtheme-main-menu:before {
    content: '';
    display: block;
    width: 100%;
    height: 32px;
    background: url('../images/interface.png') 90% 50% no-repeat;
    padding: 40px;
  }
  #block-sddtheme-main-menu {
    position: absolute;
    overflow: visible;
    width: 100%;
    left: 0;
  }
  #block-sddtheme-main-menu>ul.display {
    display: block;
  }
  #block-sddtheme-main-menu>ul {
    position: absolute;
    display: none;
    width: 100%;
    overflow: hidden;
  }
  #block-sddtheme-main-menu>ul.display li {
    background: rgba(0, 0, 0, 0.8);
    height: 40px;
    width: 100%;
    padding-left: 50px;
    animation: menu-display 0.5s 1;
    -webkit-animation: menu-display 0.5s 1;
    -moz-animation: menu-display 0.5s 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -moz-animation-fill-mode: both;
  }
  @keyframes menu-display {
    0% {
      opacity: 0;
      transform: translateY(-1000px);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes menu-display {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-1000px);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
    }
  }
  @-moz-keyframes menu-display {
    0% {
      opacity: 0;
      -moz-transform: translateY(-1000px);
    }
    100% {
      opacity: 1;
      -moz-transform: none;
    }
  }
  #block-sddtheme-main-menu>ul.display li a {
    line-height: normal;
  }
  #block-sddtheme-main-menu>ul.display>li>a:hover,
  #block-sddtheme-main-menu>ul.display>li.active>a {
    background: none;
  }


  #block-sddtheme-main-menu > ul > li:nth-child(1) > a:hover,
  #block-sddtheme-main-menu > ul > li:nth-child(1).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(2) > a:hover,
  #block-sddtheme-main-menu > ul > li:nth-child(2).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(3) > a:hover,
  #block-sddtheme-main-menu > ul > li:nth-child(3).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(4) > a:hover,
  #block-sddtheme-main-menu > ul > li:nth-child(4).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(5) > a:hover,
  #block-sddtheme-main-menu > ul > li:nth-child(5).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(6) > a:hover,
  #block-sddtheme-main-menu > ul > li:nth-child(6).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(7) > a:hover,
  #block-sddtheme-main-menu > ul > li:nth-child(7).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(8) > a:hover,
  #block-sddtheme-main-menu > ul > li:nth-child(8).active > a {
    transition: none;
    border-bottom: none;
  }
  #block-sddtheme-main-menu > ul > li:nth-child(1).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(2).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(3).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(4).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(5).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(6).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(7).active > a,
  #block-sddtheme-main-menu > ul > li:nth-child(8).active > a {
    color: #E30513;
    font-weight: 700;
  }
}

@media (max-width: 1040px) {
  /* Header BEGIN */
  #block-sddtheme-main-menu > ul.display li {
    padding-left: 0;
    width: 100%;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption img:nth-child(2) {
    display: none;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption img:nth-child(3) {
    display: block;
    top: 200px;
  }
  @keyframes views-filed-field-main-slider0 {
    0% {
      left: 70%;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      left: 60%;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-webkit-keyframes views-filed-field-main-slider0 {
    0% {
      left: 70%;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      left: 60%;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-moz-keyframes views-filed-field-main-slider0 {
    0% {
      left: 70%;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      left: 60%;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @keyframes views-field-title0 {
    0% {
      right: 60%;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      right: 42%;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-webkit-keyframes views-field-title0 {
    0% {
      right: 60%;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      right: 42%;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-moz-keyframes views-field-title0 {
    0% {
      right: 60%;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      right: 42%;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption a {
    margin-right: 6%;
    font-size: 35px;
    letter-spacing: 0.88px;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption p {
    right: 20%;
    margin-right: 20%;
  }
  .slick--view--main-slider .slide--1.slick-active .slide__caption img:nth-child(2) {
    width: 250px;
    /* top: 150px; */
  }
  .slick--view--main-slider .slide--1.slick-active .slide__caption a {
    font-size: 35px;
    letter-spacing: 1px;
  }
  .slick--view--main-slider .slide--2.slick-active .slide__caption .title-item-2 p {
    font-size: 50px;
  }
  .slick--view--main-slider .slide--2.slick-active .slide__caption .text-item-2 p {
    width: 600px;
    margin-left: 18%;
  }
  .slick--view--main-slider {
    margin-bottom: 80px;
  }

  #page-wrapper:not(.front) .layout-main {
    margin: 50px 38px 70px 38px;
  }
  #page-wrapper:not(.front) .page-volunteers .layout-main {
    margin: 50px 0 80px 0;
  }
  .view-volunteers {
    margin: 0;
  }
  #page-wrapper:not(.front) .page-news .layout-main,
  #page-wrapper:not(.front) .page-forums .layout-main {
    margin: 0;
  }

  #content .view-volunteers .item-list li {
    width: 49.5%;
  }
  .view-volunteers-fieldset:nth-child(2) {
    display: none;
  }
  .column.sidebar {
    min-width: 31%;
  }
}

@media (max-width: 972px) {
  /* Need to fix this one as it makes the images quash and look bad */
  /* .slick--view--main-slider .slick-slide img:first-child {
    object-fit: fill;
  } */
  #block-sddtheme-footer {
    padding: 0 20px;
  }
   /* Had to change this one not to diplay that image from the mother theme CSS for this view - KP */
  #block-brainstorm-theme-footer:before,
  #block-brainstorm-theme-footer:after {
    display: none;
  }
  #block-sddtheme-footer>ul {
    justify-content: flex-start;
    flex-wrap: nowrap;
    /* max-width: 500px; */
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  #block-sddtheme-footer {
    padding: 0;
  }
  #block-sddtheme-footer:before,
  #block-sddtheme-footer:after {
    display: none;
  }
  #block-sddtheme-footer>ul li {
    padding-left: 0;
    width: 100%;
  }
  .block-views-blocknews-block-1 .views-col {
    width: 100% !important;
    border-width: 0px;
    margin-bottom: 30px;
  }
  .block-views-blocknews-block-1 .views-row {
    display: block;
  }
  .slick--view--main-slider {
    margin-bottom: 60px;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption a {
    top: 155px;
    width: 280px;
    letter-spacing: 0.88px;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption a {
    margin-right: -150px;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption p {
    margin-right: -12%;
  }
  .slick--view--main-slider .slide.slick-active .slide__caption img:nth-child(n+2) {
    display: none;
  }
  .slick--view--main-slider .slick-active .slide__caption img:nth-child(1),
  .slick--view--main-slider .slick-initialized .slick-slide {
    height: 550px;
  }
  .slick--view--main-slider .slide--1.slick-active .slide__caption a {
    top: 160px;
    margin-left: -150px;
  }
  .slick--view--main-slider .slide--1.slick-active .slide__caption .title-ul {
    top: 210px;
    width: 320px;
    margin-left: -150px;
    font-size: 24px;
  }
  .slick--view--main-slider .slide--1.slick-active .slide__caption ul {
    line-height: 35px;
    width: 320px;
    margin-left: -150px;
  }
  .slick--view--main-slider .slide--2.slick-active .slide__caption .text-item-2 p {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    margin: 0 auto;
    font-size: 16px;
    width: 600px;
  }
  .slick--view--main-slider .slide--2.slick-active .slide__caption .title-item-2 p {
    font-size: 45px;
    line-height: 45px;
  }
  .slick--view--main-slider .slide--2.slick-active .slide__caption .title-item-2 p:after {
    height: 30px;
  }
  @keyframes views-field-body0 {
    0% {
      top: 392px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 272px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-webkit-keyframes views-field-body0 {
    0% {
      top: 392px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 272px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-moz-keyframes views-field-body0 {
    0% {
      top: 392px;
      opacity: 180;
      animation-timing-function: linear;
    }
    100% {
      top: 272px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @keyframes views-field-title-ul1 {
    0% {
      top: 348px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 213px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-webkit-keyframes views-field-title-ul1 {
    0% {
      top: 348px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 213px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-moz-keyframes views-field-title-ul1 {
    0% {
      top: 348px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 213px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @keyframes views-field-body1 {
    0% {
      top: 388px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 278px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-webkit-keyframes views-field-body1 {
    0% {
      top: 388px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 278px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-moz-keyframes views-field-body1 {
    0% {
      top: 388px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 278px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @keyframes views-field-body2 {
    0% {
      top: 470px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 320px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-webkit-keyframes views-field-body2 {
    0% {
      top: 470px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 320px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-moz-keyframes views-field-body2 {
    0% {
      top: 470px;
      opacity: 180;
      animation-timing-function: linear;
    }
    100% {
      top: 320px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  .top-sdd .about-us .second-part {
    height: 350px;
  }
  /* #page-wrapper:not(.front) .layout-main {
    margin-right: 20px;
    margin-left: 20px;
  } */
  #page-wrapper:not(.front).page-volunteers .layout-main {
    margin: 50px 0 60px 0;
  }
  #block-sddtheme-footer>ul a {
    line-height: 40px;
  }
  #block-sddtheme-footer>ul {
    display: block;
    margin-bottom: 20px;
  }
  #block-sddtheme-footer {
    width: 100%;
    float: none;
    height: auto;
  }
  .node--type-volunteers .slick {
    width: 100%;
    margin: 0;
  }
  .node--type-volunteers .node__title {
    width: 100%;
    margin-top: 30px;
  }
  .node--type-volunteers .slick-dots {
    display: block !important;
  }
  .node--type-volunteers .slick-arrow {
    display: none !important;
  }
  #page-wrapper.sidebar .layout-main {
    display: block;
  }
  #page-wrapper.sidebar #content,
  /* .page-title-96 #sidebar-second, */
  #sidebar-second,
  #sidebar-first {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 650px) {
  .slick--view--main-slider .slide--2.slick-active .slide__caption .text-item-2 p {
    width: 400px;
  }
  .page-news #content .view-news .item-list ul li {
    margin: 0px 20px 30px;
  }
  .page-title-49 .page-title,
  .page-blog .page-title,
  .page-portfolio .page-title,
  .page-contact .page-title,
  .page-volunteers .page-title,
  .page-forums .page-title,
  .page-news .page-title,
  .page-title-95 .page-title,
  .page-title-96 .page-title, /* take-action */
  .page-title-97 .page-title,
  .page-title-98 .page-title,
  .page-title-43 .page-title,
  .page-title-50 .page-title {
    font-size: 40px;
    padding-bottom: 35px;
    margin-bottom: 30px;
  }
}

@media (max-width: 480px) {
  .slick--view--main-slider .slide.slick-active .slide__caption a,
  .slick--view--main-slider .slide--2.slick-active .slide__caption .title-item-2 p {
    letter-spacing: 0.5px;
    padding: 7px;
    font-size: 33px;
    width: auto;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption a {
    margin-right: -50px;
  }
  .slick--view--main-slider .slide--1.slick-active .slide__caption a {
    padding-left: 35px;
    color: #bd0101;
  }
  .slick--view--main-slider .slide--1.slick-active .slide__caption .title-ul {
    font-size: 25px;
    width: 350px;
    padding-left: 35px;
    color: #bd0101;
  }
  .slick--view--main-slider .slide--1.slick-active .slide__caption ul {
    width: 350px;
    padding-left: 35px;
  }
  .slick--view--main-slider .slide--1.slick-active .slide__caption ul li {
    color: #bd0101;
  }
  .slick--view--main-slider .slide--2.slick-active .slide__caption .title-item-2 p:after {
    background-size: 80px;
    height: 30px;
  }
  .slick--view--main-slider .slide--2.slick-active .slide__caption .title-item-2 p {
    font-size: 36px;
  }
  .slick--view--main-slider .slide--2.slick-active .slide__caption .text-item-2 p {
    width: 350px;
    margin-left: 30px;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption p {
    width: 300px;
    margin-right: -30px;
  }
  .slick__arrow {
    bottom: 50px;
    opacity: 0.6;
    top: auto !important;
  }
  .slick-arrow.slick-prev {
    left: 2%;
  }
  .slick-arrow.slick-next {
    right: 4%;
  }
  .our-skills .first-part,
  .company-name .first-part {
    background: url('../images/sdd_people-02.jpg') 90% no-repeat;
    background-size: cover;
    height: 350px;
  }
  .block-views-blockvolunteers-block-1 .views-row,
  #content .view-volunteers .item-list li {
    width: 100%;
  }
  .fieldset-wrapper {
    position: relative;
  }
  .block-views-blockvolunteers-block-1 .views-view-grid {
    padding-top: 60px;
  }
  .view-volunteers .item-list {
    padding-top: 20px;
  }
  .view-volunteers .item-list .views-field-field-volunteers-image a:after,
  .block-views-blockvolunteers-block-1 .views-field-field-volunteers-image a:after {
    background: url('../images/plus/plus@3x.png') 50% 30% no-repeat, url('../images/hover-_effect.png') no-repeat;
    background-size: 31px, cover;
    -moz-background-size: 31px, cover;
    -webkit-background-size: 31px, cover;
    -o-background-size: 31px, cover;
    background-size: 31px, cover;
  }
  .views-exposed-form fieldset .fieldset-wrapper > div {
    width: 100%;
    border: 2px solid #E30513;
    background: #fff;
  }
  #views-exposed-form-volunteers-block-1 .fieldset-wrapper > div,
  .views-exposed-form fieldset .fieldset-wrapper > div {
    position: relative;
    z-index: 100;
    width: 100%;
  }
  .view-header,
  .views-exposed-form,
  #views-exposed-form-volunteers-block-1 .fieldset-wrapper > div,
  .views-exposed-form fieldset .fieldset-wrapper > div {
    display: flex;
  }
  .block-views-blockvolunteers-block-1 .js-form-item-tid-raw input:checked + label,
  .view-volunteers .js-form-item-tid-raw input:checked + label {
    display: block;
    color: #333;
    background: none;
    width: 100%;
    border: none;
    margin-bottom: 0;
    margin-top: 3px;
  }
  .block-views-blockvolunteers-block-1 input:hover + label,
  .view-volunteers .js-form-item-tid-raw input:hover + label,
  .block-views-blockvolunteers-block-1 .js-form-item-tid-raw label,
  .view-volunteers .js-form-item-tid-raw label {
    border: none;
  }

  #page-wrapper:not(.front) .layout-main {
    margin: 50px 18px 50px 18px;
  }
  #page-wrapper .page-blog .layout-main,
  #page-wrapper .page-portfolio .layout-main,
  #page-wrapper .page-contact .layout-main,
  #page-wrapper .page-volunteers .layout-main,
  #page-wrapper .page-forums .layout-main,
  #page-wrapper .page-news .layout-main {
    margin-bottom: 0;
  }
  h3 {
    padding-bottom: 30px;
  }
  #takeActionLeft,
  #takeActionRight {
    width: 97%;
    float: none;
    margin: 0px 0px 30px 0px;
    text-align: center;
  }
}

@media (max-width: 370px) {
  .slick--view--main-slider .slide--0.slick-active .slide__caption a {
    font-size: 27px;
    margin-right: -120px;
  }
}