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
- /*
- * 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;
- }
- }