You are here

responsive.custom.css in Brainstorm profile 8

/*
 * responsive.custom.css is for custom media queries that are not set via the
 * theme settings, such as cascading media queries.
 *
 * By default all the other responsive stylesheets used in Adaptivetheme use a
 * "stacking method", however cascading media queries use a waterfall method so
 * you can leverage the cascade and inheritance for all browsers that support
 * media queries.
 *
 * @SEE http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack
 *
 * NOTE: this file loads by default, to disable go to your theme settings and
 * look under the "CSS" settings tab.
 */

/*
 * Smalltouch sizes and up
 */
/* @media only screen and (min-width: 320px) {} */

/*
 * Tablet sizes and up
 */
/*@media only screen and (min-width: 768px) {

}*/

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

@media (max-width: 1200px) {
  #header .section,
  .site-footer__top {
    max-width: 1000px;
    height: 80px;
  }
  #page-wrapper:not(.front) .layout-main {
    max-width: 1000px;
    margin: 65px auto;
  }
  #page-wrapper .page-blog .layout-main,
  #page-wrapper .page-portfolio .layout-main,
  #page-wrapper .page-contact .layout-main {
    max-width: none;
    margin: 0;
  }
  .page-blog #content .view-blog .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: 30px;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption img:nth-child(2) {
    width: 500px;
  }
  #block-brainstorm-theme-main-menu:before {
    content: '';
    display: block;
    width: 100%;
    height: 32px;
    background: url('../images/interface.png') 90% 50% no-repeat;
    padding: 40px;
  }
  #block-brainstorm-theme-main-menu {
    position: absolute;
    overflow: visible;
    width: 100%;
    left: 0;
  }
  #block-brainstorm-theme-main-menu > ul.display {
    display: block;
  }
  #block-brainstorm-theme-main-menu > ul {
    position: absolute;
    display: none;
    width: 100%;
    overflow: hidden;
  }
  #block-brainstorm-theme-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-brainstorm-theme-main-menu > ul.display li a {
    line-height: normal;
  }
  #block-brainstorm-theme-main-menu > ul.display > li > a:hover,
  #block-brainstorm-theme-main-menu > ul.display > li.active > a {
    background: none;
  }
  .column.sidebar {
    min-width: 35%;
  }
}

@media (max-width: 1040px) {
  /* Header BEGIN */
  #block-brainstorm-theme-main-menu > ul.display li {
    padding-left: 0;
    width: 100%;
  }
  .node--type-portfolio .node__content {
    width: 50%;
  }
  .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 p {
    right: 40%;
    margin-right: 40px;
  }
  .slick--view--main-slider .slide--1.slick-active .slide__caption img:nth-child(2) {
    width: 300px;
    top: 200px;
  }
  .slick--view--main-slider .slide--1.slick-active .slide__caption a {
    font-size: 40px;
    letter-spacing: 1px;
  }
  .slick--view--main-slider .slide--2.slick-active .slide__caption .text-item-2 p {
    width: 660px;
  }
  .slick--view--main-slider {
    margin-bottom: 80px;
  }
  .about-us,
  .our-skills {
    height: auto;
  }
  .first-part,
  .second-part {
    width: 100%;
  }
  .second-part {
    background: #f9f9f9;
    margin-bottom: 50px;
  }
  .company-name .second-part {
    background: #f9f9f9;
    margin-bottom: 70px;
  }
  .about-us .first-part {
    margin-top: 500px;
    z-index: 100;
    position: relative;
  }
  .about-us .second-part {
    float: none;
    height: 500px;
  }
  .our-skills {
    background-color: #f9f9f9;
  }
  .block-views-blockportfolio-block-1 .views-col {
    width: 100% !important;
    display: block;
  }
  .block-views-blockportfolio-block-1 .views-row {
    width: 50%;
    float: left;
    clear: none;
  }
  .block-views-blockour-core-features-block-1 .views-col {
    width: auto !important;
    display: block;
    margin: 0 38px;
    padding: 0;
  }
  .slick--view--testimonials .slick-slider {
    width: 630px;
    padding: 60px 25px;
  }
  .slick--view--testimonials {
    max-width: 740px;
  }
  #page-wrapper:not(.front) .layout-main {
    margin: 50px 38px 70px 38px;
  }
  #page-wrapper:not(.front) .page-portfolio .layout-main {
    margin: 50px 0 80px 0;
  }
  .view-portfolio {
    margin: 0;
  }
  #page-wrapper:not(.front) .page-blog .layout-main,
  #page-wrapper:not(.front) .page-contact .layout-main {
    margin: 0;
  }
  #page-wrapper .page-contact .layout-main {
    margin: 0;
  }
  .two-list ul {
    column-count: 1;
    -webkit-column-count: 1;
    -moz-column-count: 1;
  }
  #about-us-page .second-part {
    padding-left: 0px;
    padding-top: 15px;
    background: none;
    margin-bottom: 0;
  }
  .company-name .second-part {
    margin-bottom: 50px;
    height: 460px;
    padding: 45px 18px 20px;
  }
  .block-views-blockour-amazing-team-block-1 .views-row {
    width: 600px;
    margin: 0 auto;
    display: block;
    float: none;
  }
  .block-views-blockour-amazing-team-block-1 .views-col {
    display: inline-block;
    width: 50% !important;
  }
  #content .view-portfolio .item-list li {
    width: 49.5%;
  }
  .view-portfolio fieldset:nth-child(2) {
    display: none;
  }
  .node--type-team .field--name-field-photo-team img {
    float: none;
    margin: none;
  }
  .node--type-team .field--name-field-photo-team {
    width: 100%;
    top: 30px;
    left: 0px;
    text-align: center;
  }
  .node--type-team header {
    text-align: center;
    margin-top: 150px;
  }
  .node--type-team {
    position: relative;
  }
  .node--type-team .field:not(.field--name-field-photo-team),
  .node--type-team h2 {
    padding-left: 0;
    text-align: center;
    float: none;
  }
  .comment-form .form-item-name,
  .comment-form .form-item-mail {
    width: 100%;
  }
  .our-skills .second-part {
    padding: 85px 38px;
  }
  #map {
    height: 450px;
  }
  .block-views-blockclients-block-1 .slick--view--clients {
    padding-bottom: 30px;
  }
  .block-views-blockclients-block-1 .slick-dots {
    bottom: 0px;
  }
  .block-views-blockclients-block-1 .slick-dotted.slick-slider {
    width: 600px;
    margin: auto;
    overflow: hidden;
    padding-bottom: 50px;
  }
}

@media (max-width: 972px) {
  #block-colorized-gmap {
    display: none;
  }
  #block-map,
  .contact-form {
    padding: 0 0 40px;
  }
  .contact-form {
    height: auto;
  }
  #block-contactus h2,
  #block-contactus .field--name-body {
    float: none;
    text-align: center;
    margin: auto;
  }
  #block-contactus h2 {
    margin-bottom: 20px;
  }
  .contact-form .form-item {
    margin-left: auto;
    margin-right: auto;
    max-width: 432px;
    clear: both;
  }
  .contact-form .webform-component--description {
    text-align: center;
  }
  .contact-form .form-actions {
    text-align: center;
  }
  #block-contactus {
    float: none;
    display: block;
    width: 100%;
    padding: 40px 0;
  }
  .contact-form {
    float: none;
    display: block;
    width: 100%;
  }
  #block-brainstorm-theme-footer {
    padding: 0 20px;
  }
  #block-brainstorm-theme-footer:before {
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 60px;
    background-image: linear-gradient(to left, transparent, #333);
    content: "";
  }
  #block-brainstorm-theme-footer:after {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    width: 60px;
    background-image: linear-gradient(to right, transparent, #333);
    content: "";
  }
  #block-brainstorm-theme-footer > ul {
    justify-content: flex-start;
    flex-wrap: nowrap;
    max-width: 500px;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  #block-brainstorm-theme-footer {
    padding: 0;
  }
  #block-brainstorm-theme-footer:before,
  #block-brainstorm-theme-footer:after {
    display: none;
  }
  #block-brainstorm-theme-footer > ul li {
    padding-left: 0;
    width: 100%;
  }
  .block-views-blockblog-block-1 .views-col {
    width: 100% !important;
    border-width: 0px;
    margin-bottom: 30px;
  }
  .block-views-blockblog-block-1 .views-row {
    display: block;
  }
  .node--type-portfolio .node__content {
    width: 100%;
  }
  .slick--view--main-slider {
    margin-bottom: 60px;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption a {
    top: 155px;
    width: 400px;
  }
  .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: -110px;
  }
  .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;
    }
  }
  .about-us .second-part {
    height: 300px;
  }
  .about-us .first-part {
    margin-top: 300px;
  }
  .slick--view--testimonials {
    width: 100%;
    padding: 50px 25px;
  }
  .slick--view--testimonials .slick-slider {
    width: 100%;
    padding-bottom: 90px;
  }
  .slick--view--testimonials .slick__arrow {
    bottom: 90px;
    top: auto;
  }
  .slick--view--testimonials .slick-arrow.slick-prev {
    left: 33%;
  }
  .slick--view--testimonials .slick-arrow.slick-next {
    right: 33%;
  }
  #page-wrapper:not(.front) .layout-main {
    margin-right: 20px;
    margin-left: 20px;
  }
  #page-wrapper:not(.front).page-portfolio .layout-main {
    margin: 50px 0 60px 0;
  }
  #block-brainstorm-theme-footer > ul a {
    line-height: 40px;
  }
  #block-brainstorm-theme-footer > ul {
    display: block;
    margin-bottom: 20px;
  }
  #block-brainstorm-theme-footer {
    width: 100%;
    float: none;
    height: auto;
  }
  .site-footer__top > div {
    display: block;
  }
  .site-footer__top {
    height: auto;
  }
  .node--type-portfolio .slick {
    width: 100%;
    margin: 0;
  }
  .node--type-portfolio .node__title {
    width: 100%;
    margin-top: 30px;
  }
  .node--type-portfolio .slick-dots {
    display: block !important;
  }
  .node--type-portfolio .slick-arrow {
    display: none !important;
  }
  #page-wrapper.sidebar .layout-main {
    display: block;
  }
  #page-wrapper.sidebar #content,
  #sidebar-second,
  #sidebar-first {
    width: 100%;
    max-width: none;
  }
  #sidebar-second,
  #sidebar-first {
    margin: 50px 0 0;
  }
  .contact-us div {
    width: 100%;
    display: block;
  }
  .block-social-icons {
    padding: 20px 0;
  }
  .block-social-icons .content a {
    height: 55px;
    line-height: 60px;
  }
}

@media (max-width: 650px) {
  .block-views-blockclients-block-1 .slick-dotted.slick-slider {
    width: 400px;
  }
  #block-backtoportfolio {
    height: 60px;
  }
  .back-to a {
    top: 0;
  }
  .block-views-blockour-amazing-team-block-1 .views-col {
    width: 100% !important;
  }
  .block-views-blockour-amazing-team-block-1 .views-row {
    width: 300px;
  }
  .slick--view--main-slider .slide--2.slick-active .slide__caption .text-item-2 p {
    width: 400px;
  }
  .page-blog #content .view-blog .item-list ul li {
    margin: 0px 20px 30px;
  }
  #content .pager {
    margin-left: 20px;
  }
  .featured-top .page-title {
    font-size: 20px;
    line-height: normal;
    padding-bottom: 30px;
  }
  #page-wrapper:not(.front) .featured-top {
    padding-top: 125px;
  }
  .page-title-49 .page-title,
  .page-blog .page-title,
  .page-portfolio .page-title,
  .page-contact .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--2.slick-active .slide__caption .text-item-2 p {
    width: 300px;
  }
  #page-title {
    height: 100%;
  }
  .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: -120px;
  }
  .slick--view--main-slider .slide--1.slick-active .slide__caption .title-ul {
    font-size: 25px;
    width: 300px;
  }
  .slick--view--main-slider .slide--1.slick-active .slide__caption ul {
    width: 300px;
  }
  .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: 27px;
  }
  .slick--view--main-slider .slide--0.slick-active .slide__caption p {
    width: 300px;
    margin-right: -130px;
  }
  .slick__arrow {
    bottom: 70px;
    top: auto !important;
  }
  .slick-arrow.slick-prev {
    left: 25%;
  }
  .slick-arrow.slick-next {
    right: 25%;
  }
  .comment .field--name-user-picture img {
    width: 67px;
    height: 67px;
  }
  .comment .comment-content {
    padding-left: 107px;
  }
  .comment-form .form-actions input {
    width: 100%;
  }
  .column.sidebar .block {
    margin-bottom: 40px;
  }
  .page-title {
    margin-bottom: 0;
  }
  html {
    overflow-x: hidden;
  }
  .about-us .first-part,
  .our-skills .second-part {
    padding: 0px 25px 60px;
  }
  .our-skills .second-part {
    padding: 0px 25px 40px;
  }
  .front .block-title,
  .our-skills h2,
  .about-us h2,
  .our-team h2 {
    padding-bottom: 30px;
    margin-bottom: 35px;
    margin-top: 50px;
  }
  .block-views-blockour-core-features-block-1 .views-col {
    display: block;
    margin: 0 18px 17px;
  }
  #block-views-block-testimonials-block-1 {
    margin-top: 30px;
    padding-bottom: 60px;
  }
  #block-views-block-testimonials-block-1 h2 {
    margin-top: 50px;
    margin-bottom: 40px;
  }
  .block-views-blockclients-block-1 .slick-dotted.slick-slider {
    width: 210px;
  }
  .our-skills .first-part,
  .company-name .first-part {
    background: url('../images/03_skills_pic.jpg') 90% no-repeat;
    background-size: cover;
    height: 350px;
  }
  .our-skills .team {
    padding: 40px 10px;
    margin: 50px auto;
    height: 245px;
  }
  .our-skills .team {
    width: 300px;
    padding: 70px 10px;
  }
  h2,
  h3,
  h4,
  h5,
  h6,
  h2 a,
  h3 a,
  h4 a,
  .views-field-title,
  .views-field-title a {
    line-height: 40px;
  }
  .block-views-blockportfolio-block-1 .views-row,
  #content .view-portfolio .item-list li {
    width: 100%;
  }
  .fieldset-wrapper {
    position: relative;
  }
  .block-views-blockportfolio-block-1 .views-view-grid {
    padding-top: 60px;
  }
  .view-portfolio .item-list {
    padding-top: 20px;
  }
  .view-portfolio .item-list .views-field-field-portfolio-image a:after,
  .block-views-blockportfolio-block-1 .views-field-field-portfolio-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 #19c2c9;
    background: #fff;
  }
  #views-exposed-form-portfolio-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-portfolio-block-1 .fieldset-wrapper > div,
  .views-exposed-form fieldset .fieldset-wrapper > div {
    display: flex;
  }
  .block-views-blockportfolio-block-1 .js-form-item-tid-raw input:checked + label,
  .view-portfolio .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-blockportfolio-block-1 input:hover + label,
  .view-portfolio .js-form-item-tid-raw input:hover + label,
  .block-views-blockportfolio-block-1 .js-form-item-tid-raw label,
  .view-portfolio .js-form-item-tid-raw label {
    border: none;
  }
  contact-us,
  .contact-form,
  #block-contactus h2,
  #block-contactus .field--name-body {
    padding: 0 20px;
  }
  .contact-form input[type="submit"] {
    width: 100%;
  }
  .btn + .btn,
  input[type="submit"] + input[type="submit"],
  input[type="button"] + input[type="button"],
  .view-dignities .view-footer a + a,
  .view-our-amazing-team .views-field-nothing a + a {
    margin: 0;
  }
  .block-views-blockour-amazing-team-block-1 {
    margin-top: 0;
  }

  #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 {
    margin-bottom: 0;
  }
  h3 {
    padding-bottom: 30px;
  }
}
@media (max-width: 370px) {
  .slick--view--main-slider .slide--0.slick-active .slide__caption a {
    font-size: 27px;
    margin-right: -120px;
  }
}

File

theme/brainstorm_theme/css/responsive.custom.css
View source
  1. /*
  2. * responsive.custom.css is for custom media queries that are not set via the
  3. * theme settings, such as cascading media queries.
  4. *
  5. * By default all the other responsive stylesheets used in Adaptivetheme use a
  6. * "stacking method", however cascading media queries use a waterfall method so
  7. * you can leverage the cascade and inheritance for all browsers that support
  8. * media queries.
  9. *
  10. * @SEE http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack
  11. *
  12. * NOTE: this file loads by default, to disable go to your theme settings and
  13. * look under the "CSS" settings tab.
  14. */
  15. /*
  16. * Smalltouch sizes and up
  17. */
  18. /* @media only screen and (min-width: 320px) {} */
  19. /*
  20. * Tablet sizes and up
  21. */
  22. /*@media only screen and (min-width: 768px) {
  23. }*/
  24. /*
  25. * Desktops/laptops and up
  26. */
  27. /* @media only screen and (min-width: 1025px) {} */
  28. @media (max-width: 1200px) {
  29. #header .section,
  30. .site-footer__top {
  31. max-width: 1000px;
  32. height: 80px;
  33. }
  34. #page-wrapper:not(.front) .layout-main {
  35. max-width: 1000px;
  36. margin: 65px auto;
  37. }
  38. #page-wrapper .page-blog .layout-main,
  39. #page-wrapper .page-portfolio .layout-main,
  40. #page-wrapper .page-contact .layout-main {
  41. max-width: none;
  42. margin: 0;
  43. }
  44. .page-blog #content .view-blog .item-list ul li {
  45. margin: 0px 38px 0;
  46. }
  47. .slick--view--main-slider .slide--0.slick-active .slide__caption a {
  48. font-size: 35px;
  49. letter-spacing: 0.88px;
  50. }
  51. .slick--view--main-slider .slide--0.slick-active .slide__caption p {
  52. font-size: 16px;
  53. width: 350px;
  54. margin-right: 30px;
  55. }
  56. .slick--view--main-slider .slide--0.slick-active .slide__caption img:nth-child(2) {
  57. width: 500px;
  58. }
  59. #block-brainstorm-theme-main-menu:before {
  60. content: '';
  61. display: block;
  62. width: 100%;
  63. height: 32px;
  64. background: url('../images/interface.png') 90% 50% no-repeat;
  65. padding: 40px;
  66. }
  67. #block-brainstorm-theme-main-menu {
  68. position: absolute;
  69. overflow: visible;
  70. width: 100%;
  71. left: 0;
  72. }
  73. #block-brainstorm-theme-main-menu > ul.display {
  74. display: block;
  75. }
  76. #block-brainstorm-theme-main-menu > ul {
  77. position: absolute;
  78. display: none;
  79. width: 100%;
  80. overflow: hidden;
  81. }
  82. #block-brainstorm-theme-main-menu > ul.display li {
  83. background: rgba(0, 0, 0, 0.8);
  84. height: 40px;
  85. width: 100%;
  86. padding-left: 50px;
  87. animation: menu-display 0.5s 1;
  88. -webkit-animation: menu-display 0.5s 1;
  89. -moz-animation: menu-display 0.5s 1;
  90. -webkit-animation-fill-mode: both;
  91. animation-fill-mode: both;
  92. -moz-animation-fill-mode: both;
  93. }
  94. @keyframes menu-display {
  95. 0% {
  96. opacity: 0;
  97. transform: translateY(-1000px);
  98. }
  99. 100% {
  100. opacity: 1;
  101. transform: none;
  102. }
  103. }
  104. @-webkit-keyframes menu-display {
  105. 0% {
  106. opacity: 0;
  107. -webkit-transform: translateY(-1000px);
  108. }
  109. 100% {
  110. opacity: 1;
  111. -webkit-transform: none;
  112. }
  113. }
  114. @-moz-keyframes menu-display {
  115. 0% {
  116. opacity: 0;
  117. -moz-transform: translateY(-1000px);
  118. }
  119. 100% {
  120. opacity: 1;
  121. -moz-transform: none;
  122. }
  123. }
  124. #block-brainstorm-theme-main-menu > ul.display li a {
  125. line-height: normal;
  126. }
  127. #block-brainstorm-theme-main-menu > ul.display > li > a:hover,
  128. #block-brainstorm-theme-main-menu > ul.display > li.active > a {
  129. background: none;
  130. }
  131. .column.sidebar {
  132. min-width: 35%;
  133. }
  134. }
  135. @media (max-width: 1040px) {
  136. /* Header BEGIN */
  137. #block-brainstorm-theme-main-menu > ul.display li {
  138. padding-left: 0;
  139. width: 100%;
  140. }
  141. .node--type-portfolio .node__content {
  142. width: 50%;
  143. }
  144. .slick--view--main-slider .slide--0.slick-active .slide__caption img:nth-child(2) {
  145. display: none;
  146. }
  147. .slick--view--main-slider .slide--0.slick-active .slide__caption img:nth-child(3) {
  148. display: block;
  149. top: 200px;
  150. }
  151. @keyframes views-filed-field-main-slider0 {
  152. 0% {
  153. left: 70%;
  154. opacity: 0;
  155. animation-timing-function: linear;
  156. }
  157. 100% {
  158. left: 60%;
  159. opacity: 1;
  160. animation-timing-function: linear;
  161. }
  162. }
  163. @-webkit-keyframes views-filed-field-main-slider0 {
  164. 0% {
  165. left: 70%;
  166. opacity: 0;
  167. animation-timing-function: linear;
  168. }
  169. 100% {
  170. left: 60%;
  171. opacity: 1;
  172. animation-timing-function: linear;
  173. }
  174. }
  175. @-moz-keyframes views-filed-field-main-slider0 {
  176. 0% {
  177. left: 70%;
  178. opacity: 0;
  179. animation-timing-function: linear;
  180. }
  181. 100% {
  182. left: 60%;
  183. opacity: 1;
  184. animation-timing-function: linear;
  185. }
  186. }
  187. @keyframes views-field-title0 {
  188. 0% {
  189. right: 60%;
  190. opacity: 0;
  191. animation-timing-function: linear;
  192. }
  193. 100% {
  194. right: 42%;
  195. opacity: 1;
  196. animation-timing-function: linear;
  197. }
  198. }
  199. @-webkit-keyframes views-field-title0 {
  200. 0% {
  201. right: 60%;
  202. opacity: 0;
  203. animation-timing-function: linear;
  204. }
  205. 100% {
  206. right: 42%;
  207. opacity: 1;
  208. animation-timing-function: linear;
  209. }
  210. }
  211. @-moz-keyframes views-field-title0 {
  212. 0% {
  213. right: 60%;
  214. opacity: 0;
  215. animation-timing-function: linear;
  216. }
  217. 100% {
  218. right: 42%;
  219. opacity: 1;
  220. animation-timing-function: linear;
  221. }
  222. }
  223. .slick--view--main-slider .slide--0.slick-active .slide__caption p {
  224. right: 40%;
  225. margin-right: 40px;
  226. }
  227. .slick--view--main-slider .slide--1.slick-active .slide__caption img:nth-child(2) {
  228. width: 300px;
  229. top: 200px;
  230. }
  231. .slick--view--main-slider .slide--1.slick-active .slide__caption a {
  232. font-size: 40px;
  233. letter-spacing: 1px;
  234. }
  235. .slick--view--main-slider .slide--2.slick-active .slide__caption .text-item-2 p {
  236. width: 660px;
  237. }
  238. .slick--view--main-slider {
  239. margin-bottom: 80px;
  240. }
  241. .about-us,
  242. .our-skills {
  243. height: auto;
  244. }
  245. .first-part,
  246. .second-part {
  247. width: 100%;
  248. }
  249. .second-part {
  250. background: #f9f9f9;
  251. margin-bottom: 50px;
  252. }
  253. .company-name .second-part {
  254. background: #f9f9f9;
  255. margin-bottom: 70px;
  256. }
  257. .about-us .first-part {
  258. margin-top: 500px;
  259. z-index: 100;
  260. position: relative;
  261. }
  262. .about-us .second-part {
  263. float: none;
  264. height: 500px;
  265. }
  266. .our-skills {
  267. background-color: #f9f9f9;
  268. }
  269. .block-views-blockportfolio-block-1 .views-col {
  270. width: 100% !important;
  271. display: block;
  272. }
  273. .block-views-blockportfolio-block-1 .views-row {
  274. width: 50%;
  275. float: left;
  276. clear: none;
  277. }
  278. .block-views-blockour-core-features-block-1 .views-col {
  279. width: auto !important;
  280. display: block;
  281. margin: 0 38px;
  282. padding: 0;
  283. }
  284. .slick--view--testimonials .slick-slider {
  285. width: 630px;
  286. padding: 60px 25px;
  287. }
  288. .slick--view--testimonials {
  289. max-width: 740px;
  290. }
  291. #page-wrapper:not(.front) .layout-main {
  292. margin: 50px 38px 70px 38px;
  293. }
  294. #page-wrapper:not(.front) .page-portfolio .layout-main {
  295. margin: 50px 0 80px 0;
  296. }
  297. .view-portfolio {
  298. margin: 0;
  299. }
  300. #page-wrapper:not(.front) .page-blog .layout-main,
  301. #page-wrapper:not(.front) .page-contact .layout-main {
  302. margin: 0;
  303. }
  304. #page-wrapper .page-contact .layout-main {
  305. margin: 0;
  306. }
  307. .two-list ul {
  308. column-count: 1;
  309. -webkit-column-count: 1;
  310. -moz-column-count: 1;
  311. }
  312. #about-us-page .second-part {
  313. padding-left: 0px;
  314. padding-top: 15px;
  315. background: none;
  316. margin-bottom: 0;
  317. }
  318. .company-name .second-part {
  319. margin-bottom: 50px;
  320. height: 460px;
  321. padding: 45px 18px 20px;
  322. }
  323. .block-views-blockour-amazing-team-block-1 .views-row {
  324. width: 600px;
  325. margin: 0 auto;
  326. display: block;
  327. float: none;
  328. }
  329. .block-views-blockour-amazing-team-block-1 .views-col {
  330. display: inline-block;
  331. width: 50% !important;
  332. }
  333. #content .view-portfolio .item-list li {
  334. width: 49.5%;
  335. }
  336. .view-portfolio fieldset:nth-child(2) {
  337. display: none;
  338. }
  339. .node--type-team .field--name-field-photo-team img {
  340. float: none;
  341. margin: none;
  342. }
  343. .node--type-team .field--name-field-photo-team {
  344. width: 100%;
  345. top: 30px;
  346. left: 0px;
  347. text-align: center;
  348. }
  349. .node--type-team header {
  350. text-align: center;
  351. margin-top: 150px;
  352. }
  353. .node--type-team {
  354. position: relative;
  355. }
  356. .node--type-team .field:not(.field--name-field-photo-team),
  357. .node--type-team h2 {
  358. padding-left: 0;
  359. text-align: center;
  360. float: none;
  361. }
  362. .comment-form .form-item-name,
  363. .comment-form .form-item-mail {
  364. width: 100%;
  365. }
  366. .our-skills .second-part {
  367. padding: 85px 38px;
  368. }
  369. #map {
  370. height: 450px;
  371. }
  372. .block-views-blockclients-block-1 .slick--view--clients {
  373. padding-bottom: 30px;
  374. }
  375. .block-views-blockclients-block-1 .slick-dots {
  376. bottom: 0px;
  377. }
  378. .block-views-blockclients-block-1 .slick-dotted.slick-slider {
  379. width: 600px;
  380. margin: auto;
  381. overflow: hidden;
  382. padding-bottom: 50px;
  383. }
  384. }
  385. @media (max-width: 972px) {
  386. #block-colorized-gmap {
  387. display: none;
  388. }
  389. #block-map,
  390. .contact-form {
  391. padding: 0 0 40px;
  392. }
  393. .contact-form {
  394. height: auto;
  395. }
  396. #block-contactus h2,
  397. #block-contactus .field--name-body {
  398. float: none;
  399. text-align: center;
  400. margin: auto;
  401. }
  402. #block-contactus h2 {
  403. margin-bottom: 20px;
  404. }
  405. .contact-form .form-item {
  406. margin-left: auto;
  407. margin-right: auto;
  408. max-width: 432px;
  409. clear: both;
  410. }
  411. .contact-form .webform-component--description {
  412. text-align: center;
  413. }
  414. .contact-form .form-actions {
  415. text-align: center;
  416. }
  417. #block-contactus {
  418. float: none;
  419. display: block;
  420. width: 100%;
  421. padding: 40px 0;
  422. }
  423. .contact-form {
  424. float: none;
  425. display: block;
  426. width: 100%;
  427. }
  428. #block-brainstorm-theme-footer {
  429. padding: 0 20px;
  430. }
  431. #block-brainstorm-theme-footer:before {
  432. position: absolute;
  433. left: 20px;
  434. top: 0;
  435. bottom: 0;
  436. width: 60px;
  437. background-image: linear-gradient(to left, transparent, #333);
  438. content: "";
  439. }
  440. #block-brainstorm-theme-footer:after {
  441. position: absolute;
  442. right: 20px;
  443. top: 0;
  444. bottom: 0;
  445. width: 60px;
  446. background-image: linear-gradient(to right, transparent, #333);
  447. content: "";
  448. }
  449. #block-brainstorm-theme-footer > ul {
  450. justify-content: flex-start;
  451. flex-wrap: nowrap;
  452. max-width: 500px;
  453. overflow-x: auto;
  454. white-space: nowrap;
  455. }
  456. }
  457. @media (max-width: 768px) {
  458. #block-brainstorm-theme-footer {
  459. padding: 0;
  460. }
  461. #block-brainstorm-theme-footer:before,
  462. #block-brainstorm-theme-footer:after {
  463. display: none;
  464. }
  465. #block-brainstorm-theme-footer > ul li {
  466. padding-left: 0;
  467. width: 100%;
  468. }
  469. .block-views-blockblog-block-1 .views-col {
  470. width: 100% !important;
  471. border-width: 0px;
  472. margin-bottom: 30px;
  473. }
  474. .block-views-blockblog-block-1 .views-row {
  475. display: block;
  476. }
  477. .node--type-portfolio .node__content {
  478. width: 100%;
  479. }
  480. .slick--view--main-slider {
  481. margin-bottom: 60px;
  482. }
  483. .slick--view--main-slider .slide--0.slick-active .slide__caption a {
  484. top: 155px;
  485. width: 400px;
  486. }
  487. .slick--view--main-slider .slide--0.slick-active .slide__caption a {
  488. margin-right: -150px;
  489. }
  490. .slick--view--main-slider .slide--0.slick-active .slide__caption p {
  491. margin-right: -110px;
  492. }
  493. .slick--view--main-slider .slide.slick-active .slide__caption img:nth-child(n+2) {
  494. display: none;
  495. }
  496. .slick--view--main-slider .slick-active .slide__caption img:nth-child(1),
  497. .slick--view--main-slider .slick-initialized .slick-slide {
  498. height: 550px;
  499. }
  500. .slick--view--main-slider .slide--1.slick-active .slide__caption a {
  501. top: 160px;
  502. margin-left: -150px;
  503. }
  504. .slick--view--main-slider .slide--1.slick-active .slide__caption .title-ul {
  505. top: 210px;
  506. width: 320px;
  507. margin-left: -150px;
  508. font-size: 24px;
  509. }
  510. .slick--view--main-slider .slide--1.slick-active .slide__caption ul {
  511. line-height: 35px;
  512. width: 320px;
  513. margin-left: -150px;
  514. }
  515. .slick--view--main-slider .slide--2.slick-active .slide__caption .text-item-2 p {
  516. -webkit-column-count: 1;
  517. -moz-column-count: 1;
  518. column-count: 1;
  519. margin: 0 auto;
  520. font-size: 16px;
  521. width: 600px;
  522. }
  523. .slick--view--main-slider .slide--2.slick-active .slide__caption .title-item-2 p {
  524. font-size: 45px;
  525. line-height: 45px;
  526. }
  527. .slick--view--main-slider .slide--2.slick-active .slide__caption .title-item-2 p:after {
  528. height: 30px;
  529. }
  530. @keyframes views-field-body0 {
  531. 0% {
  532. top: 392px;
  533. opacity: 0;
  534. animation-timing-function: linear;
  535. }
  536. 100% {
  537. top: 272px;
  538. opacity: 1;
  539. animation-timing-function: linear;
  540. }
  541. }
  542. @-webkit-keyframes views-field-body0 {
  543. 0% {
  544. top: 392px;
  545. opacity: 0;
  546. animation-timing-function: linear;
  547. }
  548. 100% {
  549. top: 272px;
  550. opacity: 1;
  551. animation-timing-function: linear;
  552. }
  553. }
  554. @-moz-keyframes views-field-body0 {
  555. 0% {
  556. top: 392px;
  557. opacity: 180;
  558. animation-timing-function: linear;
  559. }
  560. 100% {
  561. top: 272px;
  562. opacity: 1;
  563. animation-timing-function: linear;
  564. }
  565. }
  566. @keyframes views-field-title-ul1 {
  567. 0% {
  568. top: 348px;
  569. opacity: 0;
  570. animation-timing-function: linear;
  571. }
  572. 100% {
  573. top: 213px;
  574. opacity: 1;
  575. animation-timing-function: linear;
  576. }
  577. }
  578. @-webkit-keyframes views-field-title-ul1 {
  579. 0% {
  580. top: 348px;
  581. opacity: 0;
  582. animation-timing-function: linear;
  583. }
  584. 100% {
  585. top: 213px;
  586. opacity: 1;
  587. animation-timing-function: linear;
  588. }
  589. }
  590. @-moz-keyframes views-field-title-ul1 {
  591. 0% {
  592. top: 348px;
  593. opacity: 0;
  594. animation-timing-function: linear;
  595. }
  596. 100% {
  597. top: 213px;
  598. opacity: 1;
  599. animation-timing-function: linear;
  600. }
  601. }
  602. @keyframes views-field-body1 {
  603. 0% {
  604. top: 388px;
  605. opacity: 0;
  606. animation-timing-function: linear;
  607. }
  608. 100% {
  609. top: 278px;
  610. opacity: 1;
  611. animation-timing-function: linear;
  612. }
  613. }
  614. @-webkit-keyframes views-field-body1 {
  615. 0% {
  616. top: 388px;
  617. opacity: 0;
  618. animation-timing-function: linear;
  619. }
  620. 100% {
  621. top: 278px;
  622. opacity: 1;
  623. animation-timing-function: linear;
  624. }
  625. }
  626. @-moz-keyframes views-field-body1 {
  627. 0% {
  628. top: 388px;
  629. opacity: 0;
  630. animation-timing-function: linear;
  631. }
  632. 100% {
  633. top: 278px;
  634. opacity: 1;
  635. animation-timing-function: linear;
  636. }
  637. }
  638. @keyframes views-field-body2 {
  639. 0% {
  640. top: 470px;
  641. opacity: 0;
  642. animation-timing-function: linear;
  643. }
  644. 100% {
  645. top: 320px;
  646. opacity: 1;
  647. animation-timing-function: linear;
  648. }
  649. }
  650. @-webkit-keyframes views-field-body2 {
  651. 0% {
  652. top: 470px;
  653. opacity: 0;
  654. animation-timing-function: linear;
  655. }
  656. 100% {
  657. top: 320px;
  658. opacity: 1;
  659. animation-timing-function: linear;
  660. }
  661. }
  662. @-moz-keyframes views-field-body2 {
  663. 0% {
  664. top: 470px;
  665. opacity: 180;
  666. animation-timing-function: linear;
  667. }
  668. 100% {
  669. top: 320px;
  670. opacity: 1;
  671. animation-timing-function: linear;
  672. }
  673. }
  674. .about-us .second-part {
  675. height: 300px;
  676. }
  677. .about-us .first-part {
  678. margin-top: 300px;
  679. }
  680. .slick--view--testimonials {
  681. width: 100%;
  682. padding: 50px 25px;
  683. }
  684. .slick--view--testimonials .slick-slider {
  685. width: 100%;
  686. padding-bottom: 90px;
  687. }
  688. .slick--view--testimonials .slick__arrow {
  689. bottom: 90px;
  690. top: auto;
  691. }
  692. .slick--view--testimonials .slick-arrow.slick-prev {
  693. left: 33%;
  694. }
  695. .slick--view--testimonials .slick-arrow.slick-next {
  696. right: 33%;
  697. }
  698. #page-wrapper:not(.front) .layout-main {
  699. margin-right: 20px;
  700. margin-left: 20px;
  701. }
  702. #page-wrapper:not(.front).page-portfolio .layout-main {
  703. margin: 50px 0 60px 0;
  704. }
  705. #block-brainstorm-theme-footer > ul a {
  706. line-height: 40px;
  707. }
  708. #block-brainstorm-theme-footer > ul {
  709. display: block;
  710. margin-bottom: 20px;
  711. }
  712. #block-brainstorm-theme-footer {
  713. width: 100%;
  714. float: none;
  715. height: auto;
  716. }
  717. .site-footer__top > div {
  718. display: block;
  719. }
  720. .site-footer__top {
  721. height: auto;
  722. }
  723. .node--type-portfolio .slick {
  724. width: 100%;
  725. margin: 0;
  726. }
  727. .node--type-portfolio .node__title {
  728. width: 100%;
  729. margin-top: 30px;
  730. }
  731. .node--type-portfolio .slick-dots {
  732. display: block !important;
  733. }
  734. .node--type-portfolio .slick-arrow {
  735. display: none !important;
  736. }
  737. #page-wrapper.sidebar .layout-main {
  738. display: block;
  739. }
  740. #page-wrapper.sidebar #content,
  741. #sidebar-second,
  742. #sidebar-first {
  743. width: 100%;
  744. max-width: none;
  745. }
  746. #sidebar-second,
  747. #sidebar-first {
  748. margin: 50px 0 0;
  749. }
  750. .contact-us div {
  751. width: 100%;
  752. display: block;
  753. }
  754. .block-social-icons {
  755. padding: 20px 0;
  756. }
  757. .block-social-icons .content a {
  758. height: 55px;
  759. line-height: 60px;
  760. }
  761. }
  762. @media (max-width: 650px) {
  763. .block-views-blockclients-block-1 .slick-dotted.slick-slider {
  764. width: 400px;
  765. }
  766. #block-backtoportfolio {
  767. height: 60px;
  768. }
  769. .back-to a {
  770. top: 0;
  771. }
  772. .block-views-blockour-amazing-team-block-1 .views-col {
  773. width: 100% !important;
  774. }
  775. .block-views-blockour-amazing-team-block-1 .views-row {
  776. width: 300px;
  777. }
  778. .slick--view--main-slider .slide--2.slick-active .slide__caption .text-item-2 p {
  779. width: 400px;
  780. }
  781. .page-blog #content .view-blog .item-list ul li {
  782. margin: 0px 20px 30px;
  783. }
  784. #content .pager {
  785. margin-left: 20px;
  786. }
  787. .featured-top .page-title {
  788. font-size: 20px;
  789. line-height: normal;
  790. padding-bottom: 30px;
  791. }
  792. #page-wrapper:not(.front) .featured-top {
  793. padding-top: 125px;
  794. }
  795. .page-title-49 .page-title,
  796. .page-blog .page-title,
  797. .page-portfolio .page-title,
  798. .page-contact .page-title,
  799. .page-title-50 .page-title {
  800. font-size: 40px;
  801. padding-bottom: 35px;
  802. margin-bottom: 30px;
  803. }
  804. }
  805. @media (max-width: 480px) {
  806. .slick--view--main-slider .slide--2.slick-active .slide__caption .text-item-2 p {
  807. width: 300px;
  808. }
  809. #page-title {
  810. height: 100%;
  811. }
  812. .slick--view--main-slider .slide.slick-active .slide__caption a,
  813. .slick--view--main-slider .slide--2.slick-active .slide__caption .title-item-2 p {
  814. letter-spacing: 0.5px;
  815. padding: 7px;
  816. font-size: 33px;
  817. width: auto;
  818. }
  819. .slick--view--main-slider .slide--0.slick-active .slide__caption a {
  820. margin-right: -120px;
  821. }
  822. .slick--view--main-slider .slide--1.slick-active .slide__caption .title-ul {
  823. font-size: 25px;
  824. width: 300px;
  825. }
  826. .slick--view--main-slider .slide--1.slick-active .slide__caption ul {
  827. width: 300px;
  828. }
  829. .slick--view--main-slider .slide--2.slick-active .slide__caption .title-item-2 p:after {
  830. background-size: 80px;
  831. height: 30px;
  832. }
  833. .slick--view--main-slider .slide--2.slick-active .slide__caption .title-item-2 p {
  834. font-size: 27px;
  835. }
  836. .slick--view--main-slider .slide--0.slick-active .slide__caption p {
  837. width: 300px;
  838. margin-right: -130px;
  839. }
  840. .slick__arrow {
  841. bottom: 70px;
  842. top: auto !important;
  843. }
  844. .slick-arrow.slick-prev {
  845. left: 25%;
  846. }
  847. .slick-arrow.slick-next {
  848. right: 25%;
  849. }
  850. .comment .field--name-user-picture img {
  851. width: 67px;
  852. height: 67px;
  853. }
  854. .comment .comment-content {
  855. padding-left: 107px;
  856. }
  857. .comment-form .form-actions input {
  858. width: 100%;
  859. }
  860. .column.sidebar .block {
  861. margin-bottom: 40px;
  862. }
  863. .page-title {
  864. margin-bottom: 0;
  865. }
  866. html {
  867. overflow-x: hidden;
  868. }
  869. .about-us .first-part,
  870. .our-skills .second-part {
  871. padding: 0px 25px 60px;
  872. }
  873. .our-skills .second-part {
  874. padding: 0px 25px 40px;
  875. }
  876. .front .block-title,
  877. .our-skills h2,
  878. .about-us h2,
  879. .our-team h2 {
  880. padding-bottom: 30px;
  881. margin-bottom: 35px;
  882. margin-top: 50px;
  883. }
  884. .block-views-blockour-core-features-block-1 .views-col {
  885. display: block;
  886. margin: 0 18px 17px;
  887. }
  888. #block-views-block-testimonials-block-1 {
  889. margin-top: 30px;
  890. padding-bottom: 60px;
  891. }
  892. #block-views-block-testimonials-block-1 h2 {
  893. margin-top: 50px;
  894. margin-bottom: 40px;
  895. }
  896. .block-views-blockclients-block-1 .slick-dotted.slick-slider {
  897. width: 210px;
  898. }
  899. .our-skills .first-part,
  900. .company-name .first-part {
  901. background: url('../images/03_skills_pic.jpg') 90% no-repeat;
  902. background-size: cover;
  903. height: 350px;
  904. }
  905. .our-skills .team {
  906. padding: 40px 10px;
  907. margin: 50px auto;
  908. height: 245px;
  909. }
  910. .our-skills .team {
  911. width: 300px;
  912. padding: 70px 10px;
  913. }
  914. h2,
  915. h3,
  916. h4,
  917. h5,
  918. h6,
  919. h2 a,
  920. h3 a,
  921. h4 a,
  922. .views-field-title,
  923. .views-field-title a {
  924. line-height: 40px;
  925. }
  926. .block-views-blockportfolio-block-1 .views-row,
  927. #content .view-portfolio .item-list li {
  928. width: 100%;
  929. }
  930. .fieldset-wrapper {
  931. position: relative;
  932. }
  933. .block-views-blockportfolio-block-1 .views-view-grid {
  934. padding-top: 60px;
  935. }
  936. .view-portfolio .item-list {
  937. padding-top: 20px;
  938. }
  939. .view-portfolio .item-list .views-field-field-portfolio-image a:after,
  940. .block-views-blockportfolio-block-1 .views-field-field-portfolio-image a:after {
  941. background: url('../images/plus/plus@3x.png') 50% 30% no-repeat, url('../images/hover-_effect.png') no-repeat;
  942. background-size: 31px, cover;
  943. -moz-background-size: 31px, cover;
  944. -webkit-background-size: 31px, cover;
  945. -o-background-size: 31px, cover;
  946. background-size: 31px, cover;
  947. }
  948. .views-exposed-form fieldset .fieldset-wrapper > div {
  949. width: 100%;
  950. border: 2px solid #19c2c9;
  951. background: #fff;
  952. }
  953. #views-exposed-form-portfolio-block-1 .fieldset-wrapper > div,
  954. .views-exposed-form fieldset .fieldset-wrapper > div {
  955. position: relative;
  956. z-index: 100;
  957. width: 100%;
  958. }
  959. .view-header,
  960. .views-exposed-form,
  961. #views-exposed-form-portfolio-block-1 .fieldset-wrapper > div,
  962. .views-exposed-form fieldset .fieldset-wrapper > div {
  963. display: flex;
  964. }
  965. .block-views-blockportfolio-block-1 .js-form-item-tid-raw input:checked + label,
  966. .view-portfolio .js-form-item-tid-raw input:checked + label {
  967. display: block;
  968. color: #333;
  969. background: none;
  970. width: 100%;
  971. border: none;
  972. margin-bottom: 0;
  973. margin-top: 3px;
  974. }
  975. .block-views-blockportfolio-block-1 input:hover + label,
  976. .view-portfolio .js-form-item-tid-raw input:hover + label,
  977. .block-views-blockportfolio-block-1 .js-form-item-tid-raw label,
  978. .view-portfolio .js-form-item-tid-raw label {
  979. border: none;
  980. }
  981. contact-us,
  982. .contact-form,
  983. #block-contactus h2,
  984. #block-contactus .field--name-body {
  985. padding: 0 20px;
  986. }
  987. .contact-form input[type="submit"] {
  988. width: 100%;
  989. }
  990. .btn + .btn,
  991. input[type="submit"] + input[type="submit"],
  992. input[type="button"] + input[type="button"],
  993. .view-dignities .view-footer a + a,
  994. .view-our-amazing-team .views-field-nothing a + a {
  995. margin: 0;
  996. }
  997. .block-views-blockour-amazing-team-block-1 {
  998. margin-top: 0;
  999. }
  1000. #page-wrapper:not(.front) .layout-main {
  1001. margin: 50px 18px 50px 18px;
  1002. }
  1003. #page-wrapper .page-blog .layout-main,
  1004. #page-wrapper .page-portfolio .layout-main,
  1005. #page-wrapper .page-contact .layout-main {
  1006. margin-bottom: 0;
  1007. }
  1008. h3 {
  1009. padding-bottom: 30px;
  1010. }
  1011. }
  1012. @media (max-width: 370px) {
  1013. .slick--view--main-slider .slide--0.slick-active .slide__caption a {
  1014. font-size: 27px;
  1015. margin-right: -120px;
  1016. }
  1017. }