@screen-sm-min: 768px; @screen-md-min: 992px; @screen-lg-min: 1200px; @screen-xs-max: (@screen-sm-min - 1); @screen-sm-max: (@screen-md-min - 1); @screen-md-max: (@screen-lg-min - 1); @media (max-width: @screen-md-max) { .wrap { width: 970px; } .site-header-wrapper { height: 100px; } .site-title { margin: 29px 0 0 0; } .site-header__lang li { margin: 0 3px; } .main-nav { margin: 55px 0 0 0; } .site-header--sticky .site-title { margin-top: 37px; } .site-header--sticky .main-nav { margin-top: 50px; } .site-header--sticky+.slider { margin-top: 100px; } .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 10px !important; } .page-headline h3 { font-size: 34px; } /* homepage */ .homepage-main { margin-bottom: 70px; } .lang-en .spec-tabs__nav li a { font-size: 13px; } .lang-it .spec-tabs__nav li a { font-size: 11px; } /* footer */ .site-footer__contact-details.wrap { padding: 15px 0; /*margin: 0 12px!important;*/ } /* offer */ .offer-tabs__nav li a { font-size: 17px; } /* portfolio */ .portfolio-tabs__list__gallery li { width: 24%; } .portfolio-tabs__nav li a { font-size: 18px; } /* news */ .news__content__title { font-size: 36px; } /* contact */ .send-project-big { font-size: 22px; } } @media (max-width: @screen-sm-max) { .wrap { width: 750px; padding: 0 15px; box-sizing: border-box; } .input-box-row .input-box { width: 100%; } .site-header { border-bottom: 4px #fff solid; } .site-header__border { height: 4px; } .site-title { margin-top: 32px; } .site-header--sticky .site-title { margin-top: 39px; } .site-title img { width: 130px; } .lang-en .main-nav__list>li { margin-left: 14px; } .lang-it .main-nav__list>li { margin-left: 5px; } .main-nav__list>li>a { font-size: 13px; } .lang-it .main-nav__list>li>a { font-size: 15px; } .main-nav__list__submenu li a { height: 42px; line-height: 42px; } .slider:after { padding-top: 25%; } .swiper-pagination-bullet { width: 12px; height: 12px; } .slider-pagination { top: 10px; } .slider-btns { display: none; } .page-headline h3 { font-size: 30px; } /* homepage */ .homepage-main { margin-top: 40px; } .homepage-welcome { margin: 0 0 50px 0; } .homepage-col-left { width: 100%; margin: 0 0 50px 0; } .homepage-col-right { width: 100%; margin-right: 0; } .player-box { width: 49%; float: left; } .send-project { width: 49%; height: 0; float: right; margin: 55px 0 0 0; padding-bottom: 29%; background: url(../images/send-project2.jpg) no-repeat; background-size: 100% auto; } .lang-en .send-project { background: url(../images/send-project2_en.jpg) no-repeat; background-size: 100% auto; } .lang-it .send-project { background: url(../images/send-project2_it.jpg) no-repeat; background-size: 100% auto; } .our-clients { padding-top: 50px; clear: both; } .lang-en .spec-tabs__nav li a { font-size: 12px; } .lang-it .spec-tabs__nav li a { font-size: 13px; } /* offer */ .offer-tabs { padding: 0; } .offer-tabs__nav li { width: 24.5%; } .offer-tabs__nav li a { padding: 10px 12px; font-size: 14px; } .offer-tabs__nav li a span { font-size: 15px; } .offer-tabs__list__item__img img { width: 100%; display: block; margin-bottom: 10px; float: none; } /* contact */ .contact-details { background: 0; } /* newsletter */ .newsletter-form { width: 90%; } /* references */ .clients-timeline-content__desc__right p span { font-size: 36px; line-height: 42px; } /* portfolio */ .portfolio-tabs__list__gallery li { width: 32%; } .lang-en .portfolio-tabs__nav li a { font-size: 15px; } .lang-it .portfolio-tabs__nav li a { font-size: 14px; } } @media (max-width: @screen-xs-max) { .wrap { width: 100%; padding: 0 20px; box-sizing: border-box; } .input-box label { height: 30px; line-height: 30px; font-size: 15px; } .homepage-main { margin-bottom: 20px; } .site-header-wrapper { height: 80px; } .site-header-wrapper.wrap { position: relative; padding: 0; } .site-title, .site-header--sticky .site-title { position: absolute; top: 20px; left: 20px; margin: 0; } .site-header--sticky { position: static; top: 0; } .site-header--sticky+.slider { margin-top: 0; } .site-header__stuff { right: 20px; } .mobile-nav-btn { display: block; } .lang-it .spec-tabs__nav li a { font-size: 11px; } .regular-page { margin-bottom: 30px; } /* menu */ .main-nav { display: none; position: relative; top: 80px; float: none; margin: 0; padding: 0; z-index: 996; background: @color-a; } .main-nav._--is-expanded { display: block; } .main-nav__list>li { margin: 0; } .lang-en .main-nav__list>li, .lang-it .main-nav__list>li { margin-left: 0; } .main-nav__list>li>a:after { display: none; } .main-nav li { width: 100%; display: block; float: none; } .main-nav li a, .main-nav__list__submenu li a { height: auto; padding: 12px; display: block; float: none; font-size: 15px; line-height: normal; border-bottom: 1px @color-white solid; box-sizing: border-box; color: @color-white; background: 0; } .main-nav__list ._--is-hover:after { display: none; } .main-nav__list__submenu { display: block; position: static; margin: 0; box-shadow: none; border: 0; overflow: hidden; background: @color-c; } .main-nav__list__submenu li { width: 33.3%; float: left; } .main-nav__list__submenu li a { width: 100%; border: 1px @color-white solid; background: @color-c; } .main-nav__list__submenu li:last-child a { border-right: 2px @color-white solid; } /* footer */ .site-footer__contact-details li { display: block; border: 0; padding-left: 0; } .portfolio-tabs__nav .current { background-position: 96% center; background-size: 24px auto; } .site-footer__contact-details__title span { margin-top: 10px; text-align: center; } /* page headline */ .page-headline { height: auto; min-height: 99px; background-position: left top; } .page-headline h3 { position: static; margin-left: 116px; } /* news */ .news__arrow { display: none; } .news__content__date { margin-top: 0; } .news__content__title { margin-bottom: 10px; font-size: 29px; line-height: 33px; } /* offer */ .offer-tabs { margin-top: 30px; } .offer-tabs__nav { display: block; } .offer-tabs__nav li { width: 100%; margin-bottom: 2px; } .offer-tabs__nav li a { height: auto; padding: 5px 12px; } .offer-tabs__nav .current:after { display: none; } .offer-tabs__list__item__text { width: 100%; float: none; } .offer-tabs__list__item__img { max-width: 100%; float: none; margin-top: 30px; text-align: center; } /* quality */ .quality-img { width: 100%; float: none; text-align: center; } .quality-text { width: 100%; float: none; } /* portfolio */ .portfolio-tabs__nav { display: block; } .portfolio-tabs__nav li { width: 100%; } .portfolio-tabs__nav li a span { padding: 15px 0; } .portfolio-tabs__list__gallery li { height: auto; padding-bottom: 32%; } /* download */ .download-content__item ul { padding: 0; } /* contact */ .send-project-big { height: 70px; line-height: 70px; font-size: 16px; } /* references */ .clients-timeline-content__desc__left, .clients-timeline-content__desc__right { width: 100%; } .clients-timeline-content__desc__right p span { font-size: 30px; line-height: 34px; } } @media (max-width: 499px) { .input-box-row .input-box { width: 100%; } .regular-gallery li { width: 50%; padding-bottom: 30%; } /* homepage */ .slider:after { padding-top: 34%; } .spec-tabs__nav li { width: 50%; margin-bottom: 1px; } .spec-tabs__nav li:last-child a { border-right: 2px @color-white solid; } .spec-tabs__list__item__img { width: 50%; } .spec-tabs__list__item__text { font-size: 14px; line-height: 18px; } .portfolio-box__tabs__list li { width: 32.5%; padding: 0 0 20%; } .player-box { width: 100% } .send-project { width: 100%; margin-top: 30px; padding-bottom: 59%; } /* page headline */ .page-headline h3 span:first-child { font-size: 22px; } .page-headline h3 { font-size: 25px; } /* portfolio */ .portfolio-tabs__nav li a { font-size: 16px; } .portfolio-tabs__list__gallery li { width: 49%; padding-bottom: 49%; } /* history */ .clients-timeline-content-history__left { width: 100%; margin-right: 0; margin-bottom: 20px; text-align: center; } .clients-timeline-content-history__right { width: 100%; float: none; margin: 0 auto; } }