You are here

responsive.desktop.css in Brainstorm profile 7

/*
 * 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-group,
  .copyright-content {
    max-width: 1000px;
    overflow: hidden;
  }
  body.not-front #columns {
    margin: 65px 38px;
  }
  .page-blog #content .view-blog .view-content ul li {
    margin: 30px 20px 0;
  }
  .view-main-slider .active .views-field-body {
    padding-right: 85px;
  }
  .view-main-slider .active .views-field-field-main-slider-image img:first-child {
    width: 550px;
  }
  .view-main-slider .active .views-field-title .field-content {
    font-size: 35px;
    letter-spacing: 0.88px;
    width: 400px;
  }
  .view-main-slider .active .views-field-body .field-content p {
    width: 350px;
    font-size: 16px;
  }
  .view-main-slider .active .views-field-title {
    padding-right: 61px;
  }
  .view-main-slider .active .views-field-field-main-slider-image {
    width: 55%;
    top: 200px;
  }
  .mean-container .mean-bar {
    background: none;
    width: 100%;
    min-height: 80px;
    z-index: 200;
    position: absolute;
  }
  .mean-container .mean-nav {
    margin-top: 76px;
    background: rgba(0, 0, 0, 0.8);
  }
  .mean-container .mean-nav ul {
    margin-bottom: 15px;
  }
  .mean-container .mean-nav ul li a {
    border-top: none;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 38px;
    padding-left: 70px;
    padding-top: 0;
    padding-bottom: 2px;
  }
  .mean-container .mean-nav ul li a:hover {
    background: none;
    color: #19c2c9;
  }
  .mean-container a.meanmenu-reveal {
    padding: 29px 50px;
    background: url('../images/interface.png') 50% no-repeat;
  }
  .mean-container a.meanmenu-reveal span {
    display: none;
  }
  .mean-container a.meanmenu-reveal.meanclose {
    background: url('../images/close_m.png') 50% no-repeat;
    color: transparent;
  }
  #header-group {
    margin-left: 50px;
  }
  .sidebar-second .content-inner {
    margin-right: 40%;
  }
  .region-sidebar-second {
    width: 40%;
    margin-left: -40%;
  }
  .contact-us div {
    margin-top: 25px;
  }
  .our-team tr {
    width: 600px;
    display: block;
  }
  .our-team td {
    display: inline-block;
  }
  #page-wrapper table {
    width: auto;
  }
}

@media (max-width: 1040px) {
  /* Header BEGIN */
  .view-main-slider .active .item-0 .views-field-field-main-slider-image img {
    display: block;
  }
  .view-main-slider .active .views-field-title {
    width: 65%;
  }
  .view-main-slider .active .item-0 .views-field-field-main-slider-image img:first-child {
    display: none;
  }
  .view-main-slider .active .views-field-body {
    padding-right: 85px;
    width: 65%;
  }
  .view-main-slider .active .views-field-field-main-slider-image {
    width: 40%;
    top: 200px;
  }
  .page-blog #content .view-blog .view-content ul li {
    margin: 30px 30px 0 30px;
  }
  .view-main-slider {
    margin-bottom: 80px;
  }
  .view-main-slider .owl-carousel {
    max-width: 1200px;
  }

  .about-us,
  .our-skills {
    height: auto;
  }
  .first-part,
  .second-part {
    width: 100%;
  }
  .second-part {
    background: #f9f9f9;
    margin-bottom: 50px;
  }
  .views-exposed-widgets {
    margin-bottom: 30px;
  }
  .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;
  }
  .view-portfolio td,
  .view-our-core-features li {
    width: 100%;
    display: block;
  }
  .view-portfolio tr {
    width: 50%;
    float: left;
  }
  .view-our-core-features td {
    width: auto;
    display: block;
    margin: 0 38px;
    padding: 0;
  }
  #page-wrapper table {
    width: auto;
  }
  .view-testimonials .views-field-body {
    width: 520px;
    margin: 0 auto;
  }
  .view-testimonials .owl-carousel {
    width: 630px;
    padding: 60px 25px;
  }
  .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-prev {
    left: -67px;
  }
  .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-next {
    right: -67px;
  }
  .view-clients .owl-carousel {
    width: 600px;
  }
  .front .view-blog li {
    width: 100%;
    display: block;
    border-width: 38px;
  }
  #block-system-main-menu {
    width: 60%;
    overflow: hidden;
    max-width: 498px;
  }
  .view-main-slider .active .item-1 .views-field-title .field-content {
    font-size: 40px;
    letter-spacing: 1px;
    text-align: center;
    width: auto;
  }
  .view-main-slider .active .item-1 .views-field-body,
  .view-main-slider .active .item-1 .views-field-title {
    padding-left: 35px;
  }
  .view-main-slider .active .item-1 .views-field-field-main-slider-image {
    top: 36%;
  }
  .view-main-slider .active .item-1 .views-field-field-main-slider-image img {
    width: 300px;
  }
  .view-main-slider .active .item-1 .views-field-field-main-slider-image {
    width: 48%;
  }
  .view-main-slider .active .item-1 .views-field-title,
  .view-main-slider .active .item-1 .views-field-body {
    width: 53%;
  }
  .view-main-slider .active .item-2 .views-field-body {
    width: 660px;
  }
  .view-main-slider .active .item-2 .views-field-body .field-content p {
    letter-spacing: normal;
  }
  body.not-front:not(.page-blog) #columns {
    margin: 50px 38px 70px 38px;
  }
  body.page-portfolio #columns {
    margin: 50px 0 80px 0;
  }
  .two-list ul {
    column-count: 1;
    -webkit-column-count: 1;
    -moz-column-count: 1;
  }
  #about-us-page .second-part {
    padding-left: 0;
    padding-top: 15px;
    background: none;
    margin-bottom: 0;
  }
  .company-name .second-part {
    margin-bottom: 50px;
    height: 460px;
    padding: 45px 18px 20px;
  }

  #content .view-portfolio-isotope li {
    width: 50%;
  }
  #edit-type-1-wrapper,
  .view .view-columns {
    display: none;
  }
  .back-to {
    max-width: 800px;
  }
  .owl-carousel .owl-item {
    display: inline-block;
    height: 100%;
  }
  .field-name-field-portfolio-image img {
    width: 100%;
    object-fit: cover;
  }
  .node-blog .view-author .views-field-field-photo-team {
    float: none;
    margin: 0 auto 15px;
  }
  .node-blog .view-author .views-field:not(.views-field-field-photo-team) {
    text-align: center;
    padding: 0;
  }
  .comment-form .form-item-name,
  .comment-form .form-item-mail {
    width: 100%;
  }
  .colorized-gmap-common,
  .contact-form {
    float: none;
    width: 100%;
    padding-left: 0;
  }
  .contact-form h2 {
    float: none;
  }
  .contact-form form {
    margin: 0 auto;
  }
  .contact-form .webform-component--description {
    text-align: center;
  }
  .contact-form .form-actions {
    text-align: center;
  }
  .front .view-blog li {
    display: block;
  }
  .field-name-field-brand-name,
  .node-portfolio .field-name-body,
  .node-portfolio .field-name-field-date,
  .field-name-field-time-work,
  .field-name-field-tags-portfolio,
  .field-name-field-portfolio-image,
  .node-type-portfolio .node-title {
    width: 50%;
  }
  .field-name-field-portfolio-image .owl-pagination {
    display: block;
  }
  .field-name-field-portfolio-image .owl-theme .owl-controls .owl-page span {
    background: #ccc;
  }
  .field-name-field-portfolio-image .owl-theme .owl-controls .owl-page:hover span,
  .field-name-field-portfolio-image .owl-theme .owl-controls .owl-page.active span {
    background: #333;
  }
  .field-name-field-portfolio-image .owl-buttons {
    display: none;
  }
  .our-skills .second-part {
    padding: 85px 38px;
  }
  #map {
    height: 450px;
  }
}

@media (max-width: 768px) {
  .view-main-slider .active .views-field-field-background-image .field-content {
    left: -200%;
  }
  .field-name-field-portfolio-image img {
    max-height: 450px;
  }
  .view-main-slider {
    margin-bottom: 60px;
  }

  .mean-container a.meanmenu-reveal {
    padding: 29px 18px;
  }
  #header-group {
    margin-left: 18px;
  }
  .view-main-slider .active .views-field-title {
    top: 155px;
  }
  .view-main-slider .owl-item.active  .views-field-title {
    width: 100%;
    text-align: center;
    padding: 0;
  }
  .view-main-slider .owl-item.active  .views-field-body {
    width: 100%;
    padding: 0;
  }
  .view-main-slider .owl-item.active .item-1 .views-field-body {
    padding-left: 20px;
  }
  .view-main-slider .active .views-field-body .field-content p {
    width: auto;
    max-width: 370px;
    font-size: 16px;
    float: none;
    margin: 0 auto;
    padding-left: 18px;
    padding-right: 18px;
  }
  .view-main-slider .active .views-field-field-main-slider-image {
    display: none;
  }
  .view-main-slider .views-field-field-background-image,
  .view-main-slider {
    height: 550px;
  }
  .view-main-slider .active .item-1 .views-field-title {
    top: 160px;
  }
  .view-main-slider .active .item-1 .views-field-body {
    top: 230px;
  }
  #content .view-main-slider .active .item-1 .views-field-body ul {
    line-height: 35px;
    width: 320px;
    margin: 0 auto;
  }
  .view-main-slider .active .item-1 .views-field-body .title-ul {
    line-height: 40px;
    width: 320px;
    margin: 0 auto;
    font-size: 24px;
  }
  .view-main-slider .active .item-2 .views-field-body .field-content p {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    margin: 0 38px;
    font-size: 16px;
    max-width: none;
  }
  .view-main-slider .active .item-2 .views-field-title .field-content,
  .view-main-slider .active .item-2 .views-field-title {
    font-size: 45px;
    line-height: 40px;
  }
  .view-main-slider .active .item-2 .views-field-title:after {
    background-size: 130px;
  }
  .about-us .second-part {
    height: 300px;
  }
  .about-us .first-part {
    margin-top: 300px;
  }
  .view-testimonials .owl-carousel {
    width: 100%;
    padding: 50px 25px;
  }
  .view-testimonials .view-content {
    padding: 0 20px;
  }
  .view-testimonials .views-field-body {
    width: 100%;
  }
  .view-clients .owl-carousel {
    width: 300px;
  }
  body.not-front #columns {
    margin-right: 20px;
    margin-left: 20px;
  }
  body.not-front.page-portfolio #columns.columns {
    margin: 50px 0 60px 0;
  }
  #content .item-list .pager-load-more li a {
    margin-top: 55px;
  }
  .our-team td {
    display: block;
    margin-bottom: 30px;
  }
  .our-team {
    margin: 70px 0 10px;
  }
  .our-team tr {
    width: auto;
  }
  #block-superfish-1 li,
  #block-system-main-menu .menu li,
  #primary-menu-bar .menu li {
    float: none;
    text-align: left;
  }
  #block-superfish-1 ul,
  #block-superfish-1 li,
  #block-system-main-menu .menu,
  #block-system-main-menu .menu li,
  #primary-menu-bar .menu,
  #primary-menu-bar .menu li {
    float: none;
    display: block;
  }
  #block-system-main-menu {
    width: 100%;
    overflow: visible;
    padding-left: 30px;
    height: auto;
    margin-bottom: 20px;
    float: left;
  }
  #block-system-main-menu .menu a {
    line-height: 40px;
  }
  .field-name-field-brand-name,
  .node-portfolio .field-name-body,
  .node-portfolio .field-name-field-date,
  .field-name-field-time-work,
  .field-name-field-tags-portfolio,
  .field-name-field-portfolio-image,
  .node-type-portfolio .node-title,
  .region-sidebar-second {
    width: 100%;
  }
  .sidebar-second .content-inner {
    margin-right: 0;
  }
  .region-sidebar-second {
    margin-left: 0;
    padding-left: 0;
  }
  #columns .recent-post li img {
    width: 100%;
  }
  .copyright {
    max-height: none;
  }
  .contact-us div {
    width: 100%;
    display: block;
  }
  .front .view-blog li {
    border: none;
    margin-bottom: 30px;
  }
  .front .view-blog li:last-child {
    margin-bottom: 0;
  }
  .block-social-icons {
    padding: 20px 0;
  }
  .block-social-icons .content a {
    height: 55px;
    line-height: 60px;
  }

  @keyframes views-field-body0 {
    0% {
      top: 392px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 232px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-webkit-keyframes views-field-body0 {
    0% {
      top: 392px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 232px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-moz-keyframes views-field-body0 {
    0% {
      top: 392px;
      opacity: 180;
      animation-timing-function: linear;
    }
    100% {
      top: 232px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @keyframes views-field-body2 {
    0% {
      top: 470px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 285px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-webkit-keyframes views-field-body2 {
    0% {
      top: 470px;
      opacity: 0;
      animation-timing-function: linear;
    }
    100% {
      top: 285px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
  @-moz-keyframes views-field-body2 {
    0% {
      top: 470px;
      opacity: 180;
      animation-timing-function: linear;
    }
    100% {
      top: 285px;
      opacity: 1;
      animation-timing-function: linear;
    }
  }
}

@media (max-width: 650px) {
  .back-to p {
    top: 0;
  }
  .view-blog li .views-field-field-blog-image img {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .our-team .views-field-field-photo-team img {
    max-height: none;
    max-width: none;
  }
  .node-type-portfolio #block-system-main {
    margin-bottom: 15px;
  }
  #page-title {
    height: 100%;
  }
  body.not-front.node-type-portfolio #columns {
    padding-bottom: 45px;
  }
  .page-blog #content .view-blog .view-content ul li {
    margin: 0 0 30px 0;
  }
  #content .view-blog .item-list .pager {
    margin: 50px 0 0 0;
  }
  body.not-front #columns {
    margin: 50px 18px;
  }
  .submitted {
    margin-top: 15px;
  }
  .comment .user-picture {
    width: 67px;
    height: 67px;
  }
  .comment .comment-content {
    padding-left: 107px;
  }
  .comment-form .form-actions input {
    width: 100%;
  }
  .one-sidebar .sidebar {
    margin-top: 50px;
  }
  .sidebar .block {
    margin-bottom: 40px;
  }
  .page-title {
    margin-bottom: 0;
  }
  html {
    overflow-x: hidden;
  }
  #page #block-system-main-menu {
    padding-left: 0;
  }
  .owl-buttons {
    position: relative;
    width: 120px;
    margin: 0 auto;
    top: -80px;
  }
  .view-testimonials .owl-controls {
    margin: 50px 0 70px;
  }
  .view-testimonials .owl-buttons {
    top: 0;
  }
  .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-prev {
    left: 0;
  }
  .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-next {
    right: 0;
  }
  .view-main-slider .owl-item.active .views-field-title .field-content {
    letter-spacing: 0.5px;
    padding: 15px;
    font-size: 33px;
  }
  .view-main-slider .active .item-1 .views-field-body .title-ul {
    font-size: 25px;
    width: 300px;
  }
  #content .view-main-slider .active .item-1 .views-field-body ul {
    width: 300px;
  }
  .view-main-slider .active .item-2 .views-field-title:after {
    background-size: 80px;
    height: 70px;
  }
  .view-main-slider .active .item-2 .views-field-title .field-content {
    font-size: 27px;
    line-height: 30px;
  }
  .about-us .first-part,
  .our-skills .second-part {
    padding: 0 25px 60px;
  }
  .our-skills .second-part {
    padding: 0 25px 40px;
  }
  .front .block-title,
  .our-skills h2,
  .about-us h2,
  .our-team h2 {
    padding-bottom: 30px;
    margin-bottom: 35px;
    margin-top: 50px;
  }
  .view-our-core-features td {
    width: auto;
    display: block;
    margin: 0 18px 17px;
  }
  #block-views-testimonials-block {
    margin-top: 30px;
    padding-bottom: 60px;
  }
  #block-views-testimonials-block h2 {
    margin-top: 50px;
    margin-bottom: 40px;
  }
  .text-who {
    margin: 0 auto 32px;
  }
  .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;
  }
  .view-portfolio tr,
  #content .view-portfolio .view-content li,
  #content .view-portfolio-isotope li {
    width: 100%;
  }
  .view-portfolio {
    position: relative;
  }
  .view-portfolio .view-filters {
    position: absolute;
    z-index: 100;
    width: 100%;
  }
  .view-portfolio .view-content {
    padding-top: 60px;
  }
  .view-portfolio .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;
    -moz-background-size: 31px, cover;
    -webkit-background-size: 31px, cover;
    -o-background-size: 31px, cover;
    background-size: 31px, cover;
  }
  #edit-tid-wrapper {
    width: 100%;
    border: 2px solid #19c2c9;
    margin-left: 14px;
    background: #fff;
  }
  #edit-tid .form-item input:checked + label:after {
    content: "\f0d8 \f0d7";
    font-family: 'FontAwesome';
    font-size: 18px;
    float: right;
    position: absolute;
    right: 0;
    top: 5px;
    width: 20px;
    color: #ccc;
    line-height: 10px;
  }
  #edit-tid .form-item input:checked + label {
    display: block;
    color: #333;
    background: none;
    width: 100%;
    border: none;
  }
  #edit-tid .form-item {
    width: 100%;
  }
  #edit-tid .form-item input:hover + label {
    border: none;
  }
  #edit-tid .form-item label {
    display: none;
    color: #333;
    width: 100%;
    text-align: left;
    border: none;
  }
  .indented {
    padding: 0 0 0 20px;
  }
  .contact-form {
    padding: 0 20px;
  }
  .contact-form input[type="submit"] {
    width: 100%;
  }
  .page-title {
    font-size: 20px;
  }
  .page-node-18 .page-title,
  .page-node-20 .page-title,
  .page-blog .page-title,
  .page-portfolio .page-title,
  .page-node-80 .page-title {
    font-size: 40px;
    padding-bottom: 35px;
    margin-bottom: 30px;
  }
  body.not-front:not(.page-blog) #columns {
    margin: 50px 18px 50px 18px;
  }
  body.node-type-blog:not(.page-blog) #columns {
    margin-bottom: 0;
  }
  h3 {
    padding-bottom: 30px;
  }
}
@media (max-width: 370px) {
  .view-main-slider .active .views-field-title .field-content {
    font-size: 27px;
  }
}

File

themes/brainstorm_theme/css/responsive.desktop.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. * Desktops/laptops and up
  25. */
  26. /* @media only screen and (min-width: 1025px) {} */
  27. @media (max-width: 1200px) {
  28. #header-group,
  29. .copyright-content {
  30. max-width: 1000px;
  31. overflow: hidden;
  32. }
  33. body.not-front #columns {
  34. margin: 65px 38px;
  35. }
  36. .page-blog #content .view-blog .view-content ul li {
  37. margin: 30px 20px 0;
  38. }
  39. .view-main-slider .active .views-field-body {
  40. padding-right: 85px;
  41. }
  42. .view-main-slider .active .views-field-field-main-slider-image img:first-child {
  43. width: 550px;
  44. }
  45. .view-main-slider .active .views-field-title .field-content {
  46. font-size: 35px;
  47. letter-spacing: 0.88px;
  48. width: 400px;
  49. }
  50. .view-main-slider .active .views-field-body .field-content p {
  51. width: 350px;
  52. font-size: 16px;
  53. }
  54. .view-main-slider .active .views-field-title {
  55. padding-right: 61px;
  56. }
  57. .view-main-slider .active .views-field-field-main-slider-image {
  58. width: 55%;
  59. top: 200px;
  60. }
  61. .mean-container .mean-bar {
  62. background: none;
  63. width: 100%;
  64. min-height: 80px;
  65. z-index: 200;
  66. position: absolute;
  67. }
  68. .mean-container .mean-nav {
  69. margin-top: 76px;
  70. background: rgba(0, 0, 0, 0.8);
  71. }
  72. .mean-container .mean-nav ul {
  73. margin-bottom: 15px;
  74. }
  75. .mean-container .mean-nav ul li a {
  76. border-top: none;
  77. font-family: 'Raleway', sans-serif;
  78. font-weight: 700;
  79. font-size: 13px;
  80. line-height: 38px;
  81. padding-left: 70px;
  82. padding-top: 0;
  83. padding-bottom: 2px;
  84. }
  85. .mean-container .mean-nav ul li a:hover {
  86. background: none;
  87. color: #19c2c9;
  88. }
  89. .mean-container a.meanmenu-reveal {
  90. padding: 29px 50px;
  91. background: url('../images/interface.png') 50% no-repeat;
  92. }
  93. .mean-container a.meanmenu-reveal span {
  94. display: none;
  95. }
  96. .mean-container a.meanmenu-reveal.meanclose {
  97. background: url('../images/close_m.png') 50% no-repeat;
  98. color: transparent;
  99. }
  100. #header-group {
  101. margin-left: 50px;
  102. }
  103. .sidebar-second .content-inner {
  104. margin-right: 40%;
  105. }
  106. .region-sidebar-second {
  107. width: 40%;
  108. margin-left: -40%;
  109. }
  110. .contact-us div {
  111. margin-top: 25px;
  112. }
  113. .our-team tr {
  114. width: 600px;
  115. display: block;
  116. }
  117. .our-team td {
  118. display: inline-block;
  119. }
  120. #page-wrapper table {
  121. width: auto;
  122. }
  123. }
  124. @media (max-width: 1040px) {
  125. /* Header BEGIN */
  126. .view-main-slider .active .item-0 .views-field-field-main-slider-image img {
  127. display: block;
  128. }
  129. .view-main-slider .active .views-field-title {
  130. width: 65%;
  131. }
  132. .view-main-slider .active .item-0 .views-field-field-main-slider-image img:first-child {
  133. display: none;
  134. }
  135. .view-main-slider .active .views-field-body {
  136. padding-right: 85px;
  137. width: 65%;
  138. }
  139. .view-main-slider .active .views-field-field-main-slider-image {
  140. width: 40%;
  141. top: 200px;
  142. }
  143. .page-blog #content .view-blog .view-content ul li {
  144. margin: 30px 30px 0 30px;
  145. }
  146. .view-main-slider {
  147. margin-bottom: 80px;
  148. }
  149. .view-main-slider .owl-carousel {
  150. max-width: 1200px;
  151. }
  152. .about-us,
  153. .our-skills {
  154. height: auto;
  155. }
  156. .first-part,
  157. .second-part {
  158. width: 100%;
  159. }
  160. .second-part {
  161. background: #f9f9f9;
  162. margin-bottom: 50px;
  163. }
  164. .views-exposed-widgets {
  165. margin-bottom: 30px;
  166. }
  167. .company-name .second-part {
  168. background: #f9f9f9;
  169. margin-bottom: 70px;
  170. }
  171. .about-us .first-part {
  172. margin-top: 500px;
  173. z-index: 100;
  174. position: relative;
  175. }
  176. .about-us .second-part {
  177. float: none;
  178. height: 500px;
  179. }
  180. .our-skills {
  181. background-color: #f9f9f9;
  182. }
  183. .view-portfolio td,
  184. .view-our-core-features li {
  185. width: 100%;
  186. display: block;
  187. }
  188. .view-portfolio tr {
  189. width: 50%;
  190. float: left;
  191. }
  192. .view-our-core-features td {
  193. width: auto;
  194. display: block;
  195. margin: 0 38px;
  196. padding: 0;
  197. }
  198. #page-wrapper table {
  199. width: auto;
  200. }
  201. .view-testimonials .views-field-body {
  202. width: 520px;
  203. margin: 0 auto;
  204. }
  205. .view-testimonials .owl-carousel {
  206. width: 630px;
  207. padding: 60px 25px;
  208. }
  209. .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-prev {
  210. left: -67px;
  211. }
  212. .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-next {
  213. right: -67px;
  214. }
  215. .view-clients .owl-carousel {
  216. width: 600px;
  217. }
  218. .front .view-blog li {
  219. width: 100%;
  220. display: block;
  221. border-width: 38px;
  222. }
  223. #block-system-main-menu {
  224. width: 60%;
  225. overflow: hidden;
  226. max-width: 498px;
  227. }
  228. .view-main-slider .active .item-1 .views-field-title .field-content {
  229. font-size: 40px;
  230. letter-spacing: 1px;
  231. text-align: center;
  232. width: auto;
  233. }
  234. .view-main-slider .active .item-1 .views-field-body,
  235. .view-main-slider .active .item-1 .views-field-title {
  236. padding-left: 35px;
  237. }
  238. .view-main-slider .active .item-1 .views-field-field-main-slider-image {
  239. top: 36%;
  240. }
  241. .view-main-slider .active .item-1 .views-field-field-main-slider-image img {
  242. width: 300px;
  243. }
  244. .view-main-slider .active .item-1 .views-field-field-main-slider-image {
  245. width: 48%;
  246. }
  247. .view-main-slider .active .item-1 .views-field-title,
  248. .view-main-slider .active .item-1 .views-field-body {
  249. width: 53%;
  250. }
  251. .view-main-slider .active .item-2 .views-field-body {
  252. width: 660px;
  253. }
  254. .view-main-slider .active .item-2 .views-field-body .field-content p {
  255. letter-spacing: normal;
  256. }
  257. body.not-front:not(.page-blog) #columns {
  258. margin: 50px 38px 70px 38px;
  259. }
  260. body.page-portfolio #columns {
  261. margin: 50px 0 80px 0;
  262. }
  263. .two-list ul {
  264. column-count: 1;
  265. -webkit-column-count: 1;
  266. -moz-column-count: 1;
  267. }
  268. #about-us-page .second-part {
  269. padding-left: 0;
  270. padding-top: 15px;
  271. background: none;
  272. margin-bottom: 0;
  273. }
  274. .company-name .second-part {
  275. margin-bottom: 50px;
  276. height: 460px;
  277. padding: 45px 18px 20px;
  278. }
  279. #content .view-portfolio-isotope li {
  280. width: 50%;
  281. }
  282. #edit-type-1-wrapper,
  283. .view .view-columns {
  284. display: none;
  285. }
  286. .back-to {
  287. max-width: 800px;
  288. }
  289. .owl-carousel .owl-item {
  290. display: inline-block;
  291. height: 100%;
  292. }
  293. .field-name-field-portfolio-image img {
  294. width: 100%;
  295. object-fit: cover;
  296. }
  297. .node-blog .view-author .views-field-field-photo-team {
  298. float: none;
  299. margin: 0 auto 15px;
  300. }
  301. .node-blog .view-author .views-field:not(.views-field-field-photo-team) {
  302. text-align: center;
  303. padding: 0;
  304. }
  305. .comment-form .form-item-name,
  306. .comment-form .form-item-mail {
  307. width: 100%;
  308. }
  309. .colorized-gmap-common,
  310. .contact-form {
  311. float: none;
  312. width: 100%;
  313. padding-left: 0;
  314. }
  315. .contact-form h2 {
  316. float: none;
  317. }
  318. .contact-form form {
  319. margin: 0 auto;
  320. }
  321. .contact-form .webform-component--description {
  322. text-align: center;
  323. }
  324. .contact-form .form-actions {
  325. text-align: center;
  326. }
  327. .front .view-blog li {
  328. display: block;
  329. }
  330. .field-name-field-brand-name,
  331. .node-portfolio .field-name-body,
  332. .node-portfolio .field-name-field-date,
  333. .field-name-field-time-work,
  334. .field-name-field-tags-portfolio,
  335. .field-name-field-portfolio-image,
  336. .node-type-portfolio .node-title {
  337. width: 50%;
  338. }
  339. .field-name-field-portfolio-image .owl-pagination {
  340. display: block;
  341. }
  342. .field-name-field-portfolio-image .owl-theme .owl-controls .owl-page span {
  343. background: #ccc;
  344. }
  345. .field-name-field-portfolio-image .owl-theme .owl-controls .owl-page:hover span,
  346. .field-name-field-portfolio-image .owl-theme .owl-controls .owl-page.active span {
  347. background: #333;
  348. }
  349. .field-name-field-portfolio-image .owl-buttons {
  350. display: none;
  351. }
  352. .our-skills .second-part {
  353. padding: 85px 38px;
  354. }
  355. #map {
  356. height: 450px;
  357. }
  358. }
  359. @media (max-width: 768px) {
  360. .view-main-slider .active .views-field-field-background-image .field-content {
  361. left: -200%;
  362. }
  363. .field-name-field-portfolio-image img {
  364. max-height: 450px;
  365. }
  366. .view-main-slider {
  367. margin-bottom: 60px;
  368. }
  369. .mean-container a.meanmenu-reveal {
  370. padding: 29px 18px;
  371. }
  372. #header-group {
  373. margin-left: 18px;
  374. }
  375. .view-main-slider .active .views-field-title {
  376. top: 155px;
  377. }
  378. .view-main-slider .owl-item.active .views-field-title {
  379. width: 100%;
  380. text-align: center;
  381. padding: 0;
  382. }
  383. .view-main-slider .owl-item.active .views-field-body {
  384. width: 100%;
  385. padding: 0;
  386. }
  387. .view-main-slider .owl-item.active .item-1 .views-field-body {
  388. padding-left: 20px;
  389. }
  390. .view-main-slider .active .views-field-body .field-content p {
  391. width: auto;
  392. max-width: 370px;
  393. font-size: 16px;
  394. float: none;
  395. margin: 0 auto;
  396. padding-left: 18px;
  397. padding-right: 18px;
  398. }
  399. .view-main-slider .active .views-field-field-main-slider-image {
  400. display: none;
  401. }
  402. .view-main-slider .views-field-field-background-image,
  403. .view-main-slider {
  404. height: 550px;
  405. }
  406. .view-main-slider .active .item-1 .views-field-title {
  407. top: 160px;
  408. }
  409. .view-main-slider .active .item-1 .views-field-body {
  410. top: 230px;
  411. }
  412. #content .view-main-slider .active .item-1 .views-field-body ul {
  413. line-height: 35px;
  414. width: 320px;
  415. margin: 0 auto;
  416. }
  417. .view-main-slider .active .item-1 .views-field-body .title-ul {
  418. line-height: 40px;
  419. width: 320px;
  420. margin: 0 auto;
  421. font-size: 24px;
  422. }
  423. .view-main-slider .active .item-2 .views-field-body .field-content p {
  424. -webkit-column-count: 1;
  425. -moz-column-count: 1;
  426. column-count: 1;
  427. margin: 0 38px;
  428. font-size: 16px;
  429. max-width: none;
  430. }
  431. .view-main-slider .active .item-2 .views-field-title .field-content,
  432. .view-main-slider .active .item-2 .views-field-title {
  433. font-size: 45px;
  434. line-height: 40px;
  435. }
  436. .view-main-slider .active .item-2 .views-field-title:after {
  437. background-size: 130px;
  438. }
  439. .about-us .second-part {
  440. height: 300px;
  441. }
  442. .about-us .first-part {
  443. margin-top: 300px;
  444. }
  445. .view-testimonials .owl-carousel {
  446. width: 100%;
  447. padding: 50px 25px;
  448. }
  449. .view-testimonials .view-content {
  450. padding: 0 20px;
  451. }
  452. .view-testimonials .views-field-body {
  453. width: 100%;
  454. }
  455. .view-clients .owl-carousel {
  456. width: 300px;
  457. }
  458. body.not-front #columns {
  459. margin-right: 20px;
  460. margin-left: 20px;
  461. }
  462. body.not-front.page-portfolio #columns.columns {
  463. margin: 50px 0 60px 0;
  464. }
  465. #content .item-list .pager-load-more li a {
  466. margin-top: 55px;
  467. }
  468. .our-team td {
  469. display: block;
  470. margin-bottom: 30px;
  471. }
  472. .our-team {
  473. margin: 70px 0 10px;
  474. }
  475. .our-team tr {
  476. width: auto;
  477. }
  478. #block-superfish-1 li,
  479. #block-system-main-menu .menu li,
  480. #primary-menu-bar .menu li {
  481. float: none;
  482. text-align: left;
  483. }
  484. #block-superfish-1 ul,
  485. #block-superfish-1 li,
  486. #block-system-main-menu .menu,
  487. #block-system-main-menu .menu li,
  488. #primary-menu-bar .menu,
  489. #primary-menu-bar .menu li {
  490. float: none;
  491. display: block;
  492. }
  493. #block-system-main-menu {
  494. width: 100%;
  495. overflow: visible;
  496. padding-left: 30px;
  497. height: auto;
  498. margin-bottom: 20px;
  499. float: left;
  500. }
  501. #block-system-main-menu .menu a {
  502. line-height: 40px;
  503. }
  504. .field-name-field-brand-name,
  505. .node-portfolio .field-name-body,
  506. .node-portfolio .field-name-field-date,
  507. .field-name-field-time-work,
  508. .field-name-field-tags-portfolio,
  509. .field-name-field-portfolio-image,
  510. .node-type-portfolio .node-title,
  511. .region-sidebar-second {
  512. width: 100%;
  513. }
  514. .sidebar-second .content-inner {
  515. margin-right: 0;
  516. }
  517. .region-sidebar-second {
  518. margin-left: 0;
  519. padding-left: 0;
  520. }
  521. #columns .recent-post li img {
  522. width: 100%;
  523. }
  524. .copyright {
  525. max-height: none;
  526. }
  527. .contact-us div {
  528. width: 100%;
  529. display: block;
  530. }
  531. .front .view-blog li {
  532. border: none;
  533. margin-bottom: 30px;
  534. }
  535. .front .view-blog li:last-child {
  536. margin-bottom: 0;
  537. }
  538. .block-social-icons {
  539. padding: 20px 0;
  540. }
  541. .block-social-icons .content a {
  542. height: 55px;
  543. line-height: 60px;
  544. }
  545. @keyframes views-field-body0 {
  546. 0% {
  547. top: 392px;
  548. opacity: 0;
  549. animation-timing-function: linear;
  550. }
  551. 100% {
  552. top: 232px;
  553. opacity: 1;
  554. animation-timing-function: linear;
  555. }
  556. }
  557. @-webkit-keyframes views-field-body0 {
  558. 0% {
  559. top: 392px;
  560. opacity: 0;
  561. animation-timing-function: linear;
  562. }
  563. 100% {
  564. top: 232px;
  565. opacity: 1;
  566. animation-timing-function: linear;
  567. }
  568. }
  569. @-moz-keyframes views-field-body0 {
  570. 0% {
  571. top: 392px;
  572. opacity: 180;
  573. animation-timing-function: linear;
  574. }
  575. 100% {
  576. top: 232px;
  577. opacity: 1;
  578. animation-timing-function: linear;
  579. }
  580. }
  581. @keyframes views-field-body2 {
  582. 0% {
  583. top: 470px;
  584. opacity: 0;
  585. animation-timing-function: linear;
  586. }
  587. 100% {
  588. top: 285px;
  589. opacity: 1;
  590. animation-timing-function: linear;
  591. }
  592. }
  593. @-webkit-keyframes views-field-body2 {
  594. 0% {
  595. top: 470px;
  596. opacity: 0;
  597. animation-timing-function: linear;
  598. }
  599. 100% {
  600. top: 285px;
  601. opacity: 1;
  602. animation-timing-function: linear;
  603. }
  604. }
  605. @-moz-keyframes views-field-body2 {
  606. 0% {
  607. top: 470px;
  608. opacity: 180;
  609. animation-timing-function: linear;
  610. }
  611. 100% {
  612. top: 285px;
  613. opacity: 1;
  614. animation-timing-function: linear;
  615. }
  616. }
  617. }
  618. @media (max-width: 650px) {
  619. .back-to p {
  620. top: 0;
  621. }
  622. .view-blog li .views-field-field-blog-image img {
  623. width: 100%;
  624. }
  625. }
  626. @media (max-width: 480px) {
  627. .our-team .views-field-field-photo-team img {
  628. max-height: none;
  629. max-width: none;
  630. }
  631. .node-type-portfolio #block-system-main {
  632. margin-bottom: 15px;
  633. }
  634. #page-title {
  635. height: 100%;
  636. }
  637. body.not-front.node-type-portfolio #columns {
  638. padding-bottom: 45px;
  639. }
  640. .page-blog #content .view-blog .view-content ul li {
  641. margin: 0 0 30px 0;
  642. }
  643. #content .view-blog .item-list .pager {
  644. margin: 50px 0 0 0;
  645. }
  646. body.not-front #columns {
  647. margin: 50px 18px;
  648. }
  649. .submitted {
  650. margin-top: 15px;
  651. }
  652. .comment .user-picture {
  653. width: 67px;
  654. height: 67px;
  655. }
  656. .comment .comment-content {
  657. padding-left: 107px;
  658. }
  659. .comment-form .form-actions input {
  660. width: 100%;
  661. }
  662. .one-sidebar .sidebar {
  663. margin-top: 50px;
  664. }
  665. .sidebar .block {
  666. margin-bottom: 40px;
  667. }
  668. .page-title {
  669. margin-bottom: 0;
  670. }
  671. html {
  672. overflow-x: hidden;
  673. }
  674. #page #block-system-main-menu {
  675. padding-left: 0;
  676. }
  677. .owl-buttons {
  678. position: relative;
  679. width: 120px;
  680. margin: 0 auto;
  681. top: -80px;
  682. }
  683. .view-testimonials .owl-controls {
  684. margin: 50px 0 70px;
  685. }
  686. .view-testimonials .owl-buttons {
  687. top: 0;
  688. }
  689. .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-prev {
  690. left: 0;
  691. }
  692. .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-next {
  693. right: 0;
  694. }
  695. .view-main-slider .owl-item.active .views-field-title .field-content {
  696. letter-spacing: 0.5px;
  697. padding: 15px;
  698. font-size: 33px;
  699. }
  700. .view-main-slider .active .item-1 .views-field-body .title-ul {
  701. font-size: 25px;
  702. width: 300px;
  703. }
  704. #content .view-main-slider .active .item-1 .views-field-body ul {
  705. width: 300px;
  706. }
  707. .view-main-slider .active .item-2 .views-field-title:after {
  708. background-size: 80px;
  709. height: 70px;
  710. }
  711. .view-main-slider .active .item-2 .views-field-title .field-content {
  712. font-size: 27px;
  713. line-height: 30px;
  714. }
  715. .about-us .first-part,
  716. .our-skills .second-part {
  717. padding: 0 25px 60px;
  718. }
  719. .our-skills .second-part {
  720. padding: 0 25px 40px;
  721. }
  722. .front .block-title,
  723. .our-skills h2,
  724. .about-us h2,
  725. .our-team h2 {
  726. padding-bottom: 30px;
  727. margin-bottom: 35px;
  728. margin-top: 50px;
  729. }
  730. .view-our-core-features td {
  731. width: auto;
  732. display: block;
  733. margin: 0 18px 17px;
  734. }
  735. #block-views-testimonials-block {
  736. margin-top: 30px;
  737. padding-bottom: 60px;
  738. }
  739. #block-views-testimonials-block h2 {
  740. margin-top: 50px;
  741. margin-bottom: 40px;
  742. }
  743. .text-who {
  744. margin: 0 auto 32px;
  745. }
  746. .our-skills .first-part,
  747. .company-name .first-part {
  748. background: url('../images/03_skills_pic.jpg') 90% no-repeat;
  749. background-size: cover;
  750. height: 350px;
  751. }
  752. .our-skills .team {
  753. padding: 40px 10px;
  754. margin: 50px auto;
  755. height: 245px;
  756. }
  757. .our-skills .team {
  758. width: 300px;
  759. padding: 70px 10px;
  760. }
  761. h2,
  762. h3,
  763. h4,
  764. h5,
  765. h6,
  766. h2 a,
  767. h3 a,
  768. h4 a,
  769. .views-field-title,
  770. .views-field-title a {
  771. line-height: 40px;
  772. }
  773. .view-portfolio tr,
  774. #content .view-portfolio .view-content li,
  775. #content .view-portfolio-isotope li {
  776. width: 100%;
  777. }
  778. .view-portfolio {
  779. position: relative;
  780. }
  781. .view-portfolio .view-filters {
  782. position: absolute;
  783. z-index: 100;
  784. width: 100%;
  785. }
  786. .view-portfolio .view-content {
  787. padding-top: 60px;
  788. }
  789. .view-portfolio .views-field-field-portfolio-image a:after {
  790. background: url('../images/plus/plus@3x.png') 50% 30% no-repeat, url('../images/hover-_effect.png') no-repeat;
  791. -moz-background-size: 31px, cover;
  792. -webkit-background-size: 31px, cover;
  793. -o-background-size: 31px, cover;
  794. background-size: 31px, cover;
  795. }
  796. #edit-tid-wrapper {
  797. width: 100%;
  798. border: 2px solid #19c2c9;
  799. margin-left: 14px;
  800. background: #fff;
  801. }
  802. #edit-tid .form-item input:checked + label:after {
  803. content: "\f0d8 \f0d7";
  804. font-family: 'FontAwesome';
  805. font-size: 18px;
  806. float: right;
  807. position: absolute;
  808. right: 0;
  809. top: 5px;
  810. width: 20px;
  811. color: #ccc;
  812. line-height: 10px;
  813. }
  814. #edit-tid .form-item input:checked + label {
  815. display: block;
  816. color: #333;
  817. background: none;
  818. width: 100%;
  819. border: none;
  820. }
  821. #edit-tid .form-item {
  822. width: 100%;
  823. }
  824. #edit-tid .form-item input:hover + label {
  825. border: none;
  826. }
  827. #edit-tid .form-item label {
  828. display: none;
  829. color: #333;
  830. width: 100%;
  831. text-align: left;
  832. border: none;
  833. }
  834. .indented {
  835. padding: 0 0 0 20px;
  836. }
  837. .contact-form {
  838. padding: 0 20px;
  839. }
  840. .contact-form input[type="submit"] {
  841. width: 100%;
  842. }
  843. .page-title {
  844. font-size: 20px;
  845. }
  846. .page-node-18 .page-title,
  847. .page-node-20 .page-title,
  848. .page-blog .page-title,
  849. .page-portfolio .page-title,
  850. .page-node-80 .page-title {
  851. font-size: 40px;
  852. padding-bottom: 35px;
  853. margin-bottom: 30px;
  854. }
  855. body.not-front:not(.page-blog) #columns {
  856. margin: 50px 18px 50px 18px;
  857. }
  858. body.node-type-blog:not(.page-blog) #columns {
  859. margin-bottom: 0;
  860. }
  861. h3 {
  862. padding-bottom: 30px;
  863. }
  864. }
  865. @media (max-width: 370px) {
  866. .view-main-slider .active .views-field-title .field-content {
  867. font-size: 27px;
  868. }
  869. }