@import "fancybox.css"; @import "owl-carousel.css"; /** * Сброс CSS стилей * **/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; max-width: 100%; } html { -webkit-text-size-adjust: none; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } body { &.__hidden { overflow: hidden; } } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; } input, textarea, button, select { resize: none; border: none; background-color: transparent; outline: none; padding: 0; } img { border: 0; vertical-align: top; } html, body { overflow-x: hidden; -webkit-overflow-scrolling: touch; } /** * Flex * **/ .flex_w { display: flex; flex-wrap: wrap; &.__ai_fs { align-items: flex-start; } &.__ai_fe { align-items: flex-end; } &.__ai_c { align-items: center; } &.__jc_sa { justify-content: space-around; } &.__jc_sb { justify-content: space-between; } &.__jc_c { justify-content: center; } } /** * Функции * **/ .radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } .transition(@properties: all .6s) { -webkit-transition: @properties; -moz-transition: @properties; -ms-transition: @properties; -o-transition: @properties; transition: @properties; } .text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { text-shadow: @string; } .box-shadow (@string) { -webkit-box-shadow: @string; -moz-box-shadow: @string; box-shadow: @string; } .box-shadow2 (@string, @string) { -webkit-box-shadow: @string, @string; -moz-box-shadow: @string, @string; box-shadow: @string, @string; } .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); } .inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); } .box-sizing (@type: border-box) { -webkit-box-sizing: @type; -moz-box-sizing: @type; box-sizing: @type; } .border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .opacity (@opacity: 0.5) { -webkit-opacity: @opacity; -moz-opacity: @opacity; opacity: @opacity; } .gradient (@startColor: #eee, @endColor: white) { background-color: @startColor; background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); background: -webkit-linear-gradient(top, @startColor, @endColor); background: -moz-linear-gradient(top, @startColor, @endColor); background: -ms-linear-gradient(top, @startColor, @endColor); background: -o-linear-gradient(top, @startColor, @endColor); } .horizontal-gradient (@startColor, @endColor) { background-color: @startColor; background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); background-image: -webkit-linear-gradient(left, @startColor, @endColor); background-image: -moz-linear-gradient(left, @startColor, @endColor); background-image: -ms-linear-gradient(left, @startColor, @endColor); background-image: -o-linear-gradient(left, @startColor, @endColor); } .vertical-gradient (@startColor, @endColor) { background-color: @endColor; background-image: -webkit-gradient(linear, top, bottom, from(@startColor), to(@endColor)); background-image: -webkit-linear-gradient(bottom, @startColor, @endColor); background-image: -moz-linear-gradient(bottom, @startColor, @endColor); background-image: -ms-linear-gradient(bottom, @startColor, @endColor); background-image: -o-linear-gradient(bottom, @startColor, @endColor); } .animation (@name, @duration: 300ms, @delay: 0, @ease: ease) { -webkit-animation: @name @duration @delay @ease; -moz-animation: @name @duration @delay @ease; -ms-animation: @name @duration @delay @ease; } .transition (@transition) { -webkit-transition: @transition; -moz-transition: @transition; -ms-transition: @transition; -o-transition: @transition; } .transform(@string) { -webkit-transform: @string; -moz-transform: @string; -ms-transform: @string; -o-transform: @string; transform: @string; } .scale (@factor) { -webkit-transform: scale(@factor); -moz-transform: scale(@factor); -ms-transform: scale(@factor); -o-transform: scale(@factor); transform: scale(@factor); } .rotate (@deg) { -webkit-transform: rotate(@deg); -moz-transform: rotate(@deg); -ms-transform: rotate(@deg); -o-transform: rotate(@deg); transform: rotate(@deg); } .skew (@deg, @deg2) { -webkit-transform: skew(@deg, @deg2); -moz-transform: skew(@deg, @deg2); -ms-transform: skew(@deg, @deg2); -o-transform: skew(@deg, @deg2); transform: skew(@deg, @deg2); } .translate (@x, @y:0) { -webkit-transform: translate(@x, @y); -moz-transform: translate(@x, @y); -ms-transform: translate(@x, @y); -o-transform: translate(@x, @y); transform: translate(@x, @y); } .translate3d (@x, @y: 0, @z: 0) { -webkit-transform: translate3d(@x, @y, @z); -moz-transform: translate3d(@x, @y, @z); -ms-transform: translate3d(@x, @y, @z); -o-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z); } .perspective (@value: 1000) { -webkit-perspective: @value; -moz-perspective: @value; -ms-perspective: @value; perspective: @value; } .transform-origin (@x:center, @y:center) { -webkit-transform-origin: @x @y; -moz-transform-origin: @x @y; -ms-transform-origin: @x @y; -o-transform-origin: @x @y; } .background(@path, @position: center center, @repeat: no-repeat) { background: url(@path) @position @repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } .text-overflow(@lineClamp, @lineHeight) { display: -webkit-box; display: -moz-box; -webkit-box-orient: vertical; -webkit-line-clamp: @lineClamp; overflow: hidden; height: @lineClamp * @lineHeight; } .placeholder-style(@placeholder-font, @placeholder-color) { &::-webkit-input-placeholder { font: @placeholder-font; color: @placeholder-color; } &::-moz-placeholder { font: @placeholder-font; color: @placeholder-color; } &:-moz-placeholder { font: @placeholder-font; color: @placeholder-color; } &:-ms-input-placeholder { font: @placeholder-font; color: @placeholder-color; } } /** * Подключение шрифтов * **/ @font-face { font-family: "UltraLight"; src: url('/path_to_font.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url('../fonts/RobotoMono-Bold.ttf'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url('../fonts/RobotoMono-Regular.ttf'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Dm Mono"; src: url('../fonts/DMMono-Regular.ttf'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "DM Sans"; src: url('../fonts/DMSans-Regular.ttf'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lacoste XMAS"; src: url('../fonts/EditorialNew-Regular.ttf'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Satoshi"; src: url('../fonts/Satoshi-Regular.ttf'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Sofia Sans Extra Condensed"; src: url('../fonts/SofiaSansExtraCondensed-Black.ttf'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Sofia Sans Extra Condensed"; src: url('../fonts/sofia-sans-extra-condensed-bold.ttf'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Sofia Sans"; src: url('../fonts/SofiaSans-Regular.ttf'); font-weight: 400; font-style: normal; font-display: swap; } /** * Общие классы * **/ .show { display: block !important; } .hide, .xs-show, .sm-show, .md-show { display: none !important; } .flf { float: left !important; } .flr { float: right !important; } .clear { display: block; clear: both; } .t_center { text-align: center; } .t_right { text-align: right; } .pos_rel { position: relative; } .ypos_ab { position: absolute; top: 50%; .translate(0, -50%); } .xpos_ab { position: absolute; left: 50%; .translate(-50%, 0); } .pos_absc { position: absolute; top: 50%; left: 50%; .translate(-50%, -50%); } .c_img { width: 100% !important; height: 100% !important; object-fit: cover; } .b_img { background-size: cover; background-position: center center; background-repeat: no-repeat; } .psevdo-item { margin: 0 !important; padding: 0 !important; height: 0 !important; opacity: 0 !important; } /** * Pop Up * **/ .popup_block { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: fadeout(#2d2733, 30%); z-index: 80; overflow-y: auto; opacity: 0; visibility: hidden; display: none; justify-content: center; align-items: flex-start; padding: 50px 0; .close_field { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; cursor: pointer; } .inner { background-color: #fff; padding: 25px; } .wrapper { z-index: 51; //width: 600px; background: #fff; padding: 30px; position: relative; .title { font: 42px/44px; margin-bottom: 30px; } .field { width: 100%; .input { border: 2px solid #eaeff4; font: 14px; } } .logo_img { position: absolute; top: 20px; right: 30px; } .btn { background-color: #ee1c25; color: #fff; padding: 16px 0; text-align: center; cursor: pointer; .radius(50px); } &.__small { max-width: 372px; .btn { width: 100%; } } &.__wide { max-width: 1170px; } &:after { content: ''; display: block; clear: both; } } .close_popup_icon { position: absolute; top: 0; right: -52px; width: 20px; height: 20px; z-index: 1; path { fill: #a5adbc; } } &.__visible { display: flex; opacity: 1; visibility: visible; } } #clbk { .wrapper { .field { margin-right: 0; max-width: 100%; margin-bottom: 20px; } .input { width: 100%; padding: 13px 23px 12px; font: 16px/30px; .radius(50px); } .btn { width: 100%; } p { font-size: 16px; line-height: 24px; color: #777; margin-bottom: 30px; } .agree { margin-top: 20px; color: #7e7e7e; font: 12px/20px; letter-spacing: .1px; a { color: inherit; text-decoration: underline; } } } } #clbk_sucs { p { color: #80808d; font: 18px/26px; margin-bottom: 45px; } .social { p { color: #32323f; font: 18px/26px; margin-bottom: 25px; } .wrapper { display: flex; justify-content: space-between; } a { background-color: #0031c1; width: 31%; height: 40px; position: relative; display: inline-block; .radius(50px); svg { width: 18px; height: 18px; .pos_absc; } path { fill: #fff; } } } } #cert_img { .wrapper { max-width: 700px; img { width: 100%; } } } body { color: rgb(255, 255, 255); font-family: "Roboto Mono"; background: rgb(17, 17, 17); font-size: 16px; } ///HEADER header { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 20px 20px; } .header__shadow { height: 61px; } .header__info { display: flex; align-items: center; } .header__nav ul { display: flex; align-items: center; } .logo { margin-right: 80px; } .header__nav { li { margin-right: 30px; &:last-child { margin-right: 0; } a { color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 16px; font-weight: 400; line-height: 125%; letter-spacing: 0%; text-align: left; text-transform: uppercase; } } } header { z-index: 100; } ///MAIN .main__bg { width: 100%; height: 980px; margin-bottom: 20px; } .main__img { object-fit: cover; width: 100%; height: 100%; } .main__blocks { display: flex; align-items: flex-start; } .main__bg { position: relative; } .main__nav { .ypos_ab; padding: 0px 20px; display: flex; align-items: center; justify-content: space-between; z-index: 10; width: 100%; } .main__nav-item { display: flex; align-items: center; cursor: pointer; color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 16px; font-weight: 400; line-height: 125%; letter-spacing: 0%; text-align: left; text-transform: uppercase; img { margin-right: 14px; } } .main__next { flex-direction: row-reverse; img { transform: rotate(180deg); margin-right: 0; margin-left: 14px; } } .main__info { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0px 20px; bottom: 21px; p { color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 16px; font-weight: 400; line-height: 125%; letter-spacing: 0%; text-align: left; text-transform: uppercase; } } .main__block { width: 32.7%; cursor: pointer; .transition; } .main__blocks { justify-content: space-between; } .main__block-img { position: relative; width: 100%; height: 360px; img { width: 100%; height: 100%; object-fit: cover; } } .main__block-img { margin-bottom: 20px; } .main__block-info { display: flex; justify-content: space-between; span { color: rgba(255, 255, 255, 0.3); font-family: "Roboto Mono"; font-size: 16px; font-weight: 400; line-height: 125%; letter-spacing: 0%; text-align: left; text-transform: uppercase; } } .main__block-prew { color: rgb(255, 255, 255) !important; } .main__kvs { z-index: 5; } .main__block:nth-child(1) { .main__block-info { padding-left: 20px; } } .main__block:nth-child(3) { .main__block-info { padding-right: 20px; } } .main__kvs { padding: 20px; } .main__kv1 { position: absolute; top: 0; padding: 20px; left: 0; svg { opacity: 0; } } .main__kv2 { position: absolute; top: 0; padding: 20px; right: 0; svg { transform: rotate(90deg); } } .main__kv3 { position: absolute; bottom: 0; padding: 20px; left: 0; svg { transform: rotate(270deg); } } .main__kv4 { position: absolute; bottom: 0; padding: 20px; right: 0; svg { transform: rotate(180deg); } } .main__kvs { opacity: 0; .transition; .main__kv { opacity: 1; svg { opacity: 1; } } } .main__kv { .transition; opacity: 0; svg { .transition; } } .main__block:hover { .main__kvs { opacity: 1; } } ///LINE .line { padding-left: 0px !important; } .main__block-prew { .xpos_ab; } .main__block-info { position: relative; } ///MENU .menu { position: absolute; background: rgb(17, 17, 17); padding-top: 10px; z-index: 80; width: 100%; height: 100%; top: 0; left: 0; right: 0; height: auto; } .menu__block { padding: 0px 20px; cursor: pointer; } .menu__block { display: flex; align-items: center; justify-content: space-between; } .menu__names { display: flex; align-items: center; } .menu__names img { margin-right: 20px; width: 60px; height: 40px; } .menu__names { p { color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 16px; font-weight: 400; line-height: 125%; letter-spacing: 0%; text-align: left; .transition; text-transform: uppercase; } } .menu__block { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 10px; padding-top: 9px; &:first-child { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 10px; } } .menu__compan { .transition; color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 16px; font-weight: 400; line-height: 125%; letter-spacing: 0%; text-align: left; text-transform: uppercase; } .menu__city { color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 16px; font-weight: 400; line-height: 125%; letter-spacing: 0%; text-align: left; text-transform: uppercase; .transition; } .menu__data { color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 16px; font-weight: 400; line-height: 125%; letter-spacing: 0%; text-align: right; text-transform: uppercase; .transition; } .menu__names { flex-grow: 1; padding-right: 10px; .transition; } .menu__compan { width: 477px; padding-right: 10px; .transition; } .menu__city { width: 342px; padding-right: 10px; .transition; } .menu__data { .transition; width: 112px; } .menu__block { .transition; } .menu__block:hover { background-color: #fff; .menu__names { p { color: rgb(17, 17, 17); } } .menu__compan { opacity: 0; } .menu__city { color: rgb(17, 17, 17); } .menu__data { color: rgb(17, 17, 17); } } .end-lines-wr { display: flex; justify-content: space-between; align-items: center; } .end-lines-wr { margin-bottom: 20px; } .menu__blocks { margin-bottom: 100px; } ///PROJECTS .projects { margin-top: 79px; padding: 0px 20px; } .projects__head-name { margin-bottom: 20px; color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 21px; font-weight: 700; line-height: 120%; letter-spacing: 0%; text-align: left; text-transform: uppercase; } .projects__blocks { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .projects__block { width: 930px; } .projects__img { width: 100%; height: 640px; margin-bottom: 20px; object-fit: cover; } .projects__block-name { color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 16px; font-weight: 400; line-height: 125%; letter-spacing: 0%; text-align: left; text-transform: uppercase; } .projects__block { width: ~"calc(50% - 8px)";; } .projects__blocks { gap: 80px 0px; } .projects { margin-bottom: 120px; } ///ABOUT .about__blocks { display: flex; align-items: flex-start; } .about__block { width: 772px; } .about { margin-top: 80px; } .about__name { margin-bottom: 40px; color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 21px; font-weight: 700; line-height: 120%; letter-spacing: 0%; text-align: left; text-transform: uppercase; } .about__block { margin-right: 80px; &:last-child { margin-right: 0; } } .about__blocks { padding-left: 178px; } .about__text { p { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } } .about__blocks { margin-bottom: 100px; } .about__people-img { padding-left: 178px; margin-bottom: 80px; } .about__text { position: relative; } .about__text-item { &::after { position: absolute; content: ""; top: 0; left: -157px; width: 25px; border-radius: 50%; height: 25px; background: rgb(255, 255, 255); } } .about__text { margin-bottom: 40px; &:last-child { margin-bottom: 0; } } .about__blocks { margin-bottom: 61px; } ///CONTACTS .contact { background-color: rgb(0, 0, 0); padding-top: 80px; } .contact__info { padding-left: 178px; margin-bottom: 80px; p { margin-bottom: 20px; color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 21px; font-weight: 700; line-height: 120%; letter-spacing: 0%; text-align: left; text-transform: uppercase; } a { .transition; color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 16px; font-weight: 400; line-height: 125%; letter-spacing: 0%; text-align: left; } } .contact__links { display: flex; flex-direction: column; align-items: flex-start; } .contact__slider { margin-bottom: 127px; } .contact__slider-image { width: 400px; height: 600px; object-fit: cover; } .contact__slider .owl-nav { position: absolute; top: 50%; transform: translate(0, -50%); padding: 0px 20px; display: flex; align-items: center; justify-content: space-between; z-index: 10; width: 100%; } ///PROJECT .project__bg { width: 100%; height: 980px; img { width: 100%; height: 100%; object-fit: cover; } } .project__video { background: rgb(211, 174, 104); padding-top: 120px; padding-bottom: 120px; position: relative; } .project__video__img { display: flex; align-items: center; justify-content: center; width: 1564px; height: 880px; margin: 0 auto; position: relative; } .project__video-play { display: flex; flex-shrink: 0; align-items: center; width: 60px; height: 60px; justify-content: center; border: 5px solid rgb(255, 255, 255); border-radius: 50%; cursor: pointer; .transition; .pos_absc; svg { .transition; } &:hover{ opacity: 0.6; } } .project__video__img { cursor: pointer; } ///BRIEF .brief { padding-top: 80px; padding-left: 178px; padding-bottom: 85px; } .brief__name { margin-bottom: 40px; color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 21px; font-weight: 700; line-height: 120%; letter-spacing: 0%; text-align: left; text-transform: uppercase; } .brief__blocks { display: flex; align-items: flex-start; margin-bottom: 30px; &:last-child { margin-bottom: 0; } .brief__blocks { padding-left: 0; } } .brief__block { min-width: 712px; max-width: 772px; margin-right: 80px; &:last-child { margin-right: 0; } } .brief{ position: relative; } .brief .brief__blocks-parent::after{ position: absolute; content: ""; width: 25px; height: 25px; background: #ffffff; border-radius: 50%; top: 108px; left: 1.1vw; display: none!important; z-index: 100; } .brief__block { p { margin-bottom: 20px; position: relative; &:last-child { margin-bottom: 0; } } } .brief-text__item::after { display: none; } .brief-text__end { margin-top: 33px; position: relative; } .brief__img { width: 100%; height: 1280px; img { width: 100%; height: 100%; object-fit: cover; } } ///DIDGITAL .digital { padding-left: 15px; padding-right: 15px; background: rgb(211, 174, 104); } .digital__blocks { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px 0px; } .digital__block { width: 930px; height: 1165px; width: ~"calc(50% - 7px)";; img { width: 100%; height: 100%; object-fit: cover; } } .digital { padding-top: 80px; padding-bottom: 80px; } .digital__name-prew { color: rgb(17, 17, 17); font-family: "Roboto Mono"; font-size: 21px; font-weight: 700; line-height: 120%; letter-spacing: 0%; text-align: left; text-transform: uppercase; } .digital__name-prew { margin-bottom: 20px; padding-left: 163px; position: relative; &::after { position: absolute; content: ""; width: 25px; height: 25px; background: rgb(17, 17, 17); border-radius: 50%; top: 0; left: 5px; .ypos_ab!important; } } ///TOURNAGE .tournage { padding-top: 80px; padding-bottom: 80px; background-color: rgb(17, 17, 17); position: relative; } .tournage__img { margin-bottom: 30px; } .tournage__info { display: flex; flex-direction: column; align-items: center; justify-content: center; p { margin-bottom: 5px; color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 21px; font-weight: 700; line-height: 120%; letter-spacing: 0%; text-align: center; text-transform: uppercase; } } .tournage__info-text { margin-top: 0; position: absolute; bottom: 3.1vw; .xpos_ab; p { margin-bottom: 0; } } .tournage__numbers { color: rgb(255, 255, 255); font-family: "Roboto Mono"; font-size: 16px; font-weight: 400; line-height: 125%; letter-spacing: 0%; text-align: center; } ///BRIEF .brief-v2 { background-color: #fff; color: rgb(17, 17, 17); .brief__blocks-parent::after{ position: absolute; content: ""; width: 25px; height: 25px; background-color: rgb(17, 17, 17); border-radius: 50%; } .brief__block{ width: 100%; max-width: 100%; min-width: auto; } .brief__name { color: rgb(17, 17, 17); } .brief-text__item { &::after { background-color: rgb(17, 17, 17); } width: 82%; } .brief__blocks { flex-direction: column; align-items: flex-start; p { margin-bottom: 18px; position: relative; &:last-child { margin-bottom: 0; } &:first-child { &::after { background-color: rgb(17, 17, 17); } } } } .brief-text__end { margin-top: 35px; } } .tournage__img { margin-bottom: 60px; } .brief__img-v2 { width: 100%; height: 1080px; img { width: 100%; height: 100%; object-fit: cover; } } .brief__img-v3 { width: 100%; height: 1060px; img { width: 100%; height: 100%; object-fit: cover; } } .brief__block2 { p { &:last-child { margin-bottom: 0; } } margin-bottom: 40px; &:last-child { margin-bottom: 0; } } .cake { background-color: rgb(197, 183, 169); .brief-v2 { background-color: transparent; } } .inspiration { background-color: #fff; padding-top: 80px; padding-bottom: 80px; padding-left: 15px; padding-right: 15px; } .inspiration__sketches { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; } .sketch__block { width: 32.7%; height: 1080px; img { width: 100%; height: 100%; object-fit: cover; } } .inspiration__imgs { display: flex; align-items: flex-start; margin-bottom: 20px; justify-content: space-between; } .inspiration__img { width: 49.5%; height: 850px; img { width: 100%; height: 100%; object-fit: cover; } } .inspiration__character { width: 100%; height: 1330px; img { width: 100%; height: 100%; object-fit: cover; } } ///REFERENCE .reference { background-color: rgb(85, 85, 85); .brief-v2 { background-color: transparent; color: rgb(255, 255, 255); } .brief__name { color: rgb(255, 255, 255); } .brief-text__item { &::after { background-color: rgb(255, 255, 255); } } } .reference__blocks { background: rgba(0, 0, 0, 0.2); width: 100%; padding-top: 80px; padding-bottom: 80px; display: flex; align-items: flex-start; justify-content: space-between; padding-left: 15px; padding-right: 15px; } .reference__img { width: 100%; height: 880px; img { width: 100%; height: 100%; object-fit: cover; } } .reference__block { width: 49.6%; height: 410px; img { width: 100%; height: 100%; object-fit: cover; } } .cake__video { background: rgb(211, 174, 104); padding-top: 120px; padding-bottom: 120px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .cake__video-img { width: 1564px; cursor: pointer; height: 880px; position: relative; img { width: 100%; height: 100%; object-fit: cover; } } .tournage-v2 { background: rgb(255, 255, 255); .tournage__info { p { color: rgb(17, 17, 17); } } .tournage__numbers { color: rgb(17, 17, 17); } .tournage__img { margin-bottom: 31px; } } .moreprojects { margin-top: 0; padding-top: 78px; margin-bottom: 120px; .projects__head-name { position: relative; padding-left: 157px; &::after { position: absolute; content: ""; width: 25px; height: 25px; background: rgb(255, 255, 255); border-radius: 50%; top: 0; left: 0; .ypos_ab!important; } } } .projects__img { img { width: 100%; height: 100%; object-fit: cover; } } .project__video__img { img { width: 100%; height: 100%; object-fit: cover; } } ////pr .line { display: flex; align-items: center; justify-content: center; } .projects { margin-top: 141px; } .about { margin-top: 141px; } .main__bg-blocks { .owl-nav { position: absolute; top: 50%; transform: translate(0, -50%); padding: 0px 20px; display: flex; align-items: center; justify-content: space-between; z-index: 10; width: 100%; } } .owl-item { .tournage__info { opacity: 0; .transition(); } &.center { .tournage__info { opacity: 1; .transition(); } } } .tournage__img { img { height: 600px; } } .header__nav li { margin: 0 !important; } .menu { padding-top: 60px; height: 100vh; } header { padding: 0 20px; } .header__nav li a { display: block; padding: 20px 15px; } .menu__blocks { margin-bottom: 0; } .menu__wr { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .project__video-parent { width: 100%; position: absolute; left: 0; right: 0; bottom: 0; top: 0; height: 100%; &__img { position: relative; } video { width: 100%; height: 100%; } } .tournage__img img { height: 740px; } .logo { margin-right: 65px; } .tournage { padding-bottom: 69px; } .contact .owl-dots { display: none; } .contact__slider { margin-bottom: 200px; } .tournage .main__prev { .ypos_ab; left: 18px; top: 46.9%; } .tournage .main__next { .ypos_ab; right: 18px; top: 46.9%; } .tournage { padding-bottom: 59px; } .moreprojects { margin-top: 0; } .inspiration { display: flex; flex-wrap: wrap; } .sketch__block { height: auto; padding: 10px; } .inspiration { padding-left: 5px; padding-right: 5px; } .inspiration__img { padding: 10px; } .inspiration__character { padding: 10px; } .inspiration__character { height: auto; } .inspiration { padding-top: 68px; padding-bottom: 76px; } .inspiration__img { height: auto; } .brief { padding-bottom: 83px; } .inspiration { padding-top: 68px; padding-bottom: 58px; } .brief__img-v2 { height: auto; img { height: auto; } } .brief__img-v3 { height: auto; img { height: auto; } } .brief__img img { height: auto; img { height: auto; } } .project__bg { height: auto; img { height: auto; } } .project__video__img { height: auto; img { height: auto; } } .brief__img { height: auto; img { height: auto; } } .sketch__block img { height: auto; } .inspiration__img img { height: auto; } .inspiration__character img { height: auto; } .reference__img { height: auto; img { height: auto; } } .brief-v2 { background-color: transparent; } .animate { background: rgb(255, 255, 255); } .reference__blocks { padding-bottom: 68px; } .digital__blocks { gap: 0; } .digital { padding-bottom: 77px; } .tournage { .owl-nav { display: none; } } .tournage { padding-bottom: 70px; } .tournage { padding-bottom: 73px; } .project__video__img { width: 81%; } .tournage { padding-bottom: 78px; } .gallery { background-color: rgb(211, 174, 104); padding-left: 5px; padding-right: 5px; } .gallery__blocks { display: flex; flex-wrap: wrap; } .inspiration__img { position: relative; } .gallery__head-name { color: rgb(17, 17, 17); font-family: "Roboto Mono"; font-size: 21px; font-weight: 700; line-height: 120%; letter-spacing: 0%; text-align: left; text-transform: uppercase; position: relative; padding-left: 157px; margin-bottom: 20px; &::after { position: absolute; content: ""; width: 25px; height: 25px; background: rgb(17, 17, 17); border-radius: 50%; top: 0; left: 12px; } } .gallery { padding-top: 80px; padding-bottom: 80px; } .video { padding-top: 120px; padding-bottom: 120px; background-color: rgb(211, 174, 104); } .video__name { color: rgb(17, 17, 17); font-family: "Roboto Mono"; font-size: 21px; font-weight: 700; line-height: 120%; letter-spacing: 0%; text-align: center; text-transform: uppercase; display: flex; align-items: center; justify-content: center; margin-top: 30px; } .tournage__img img { object-fit: cover; } .gallery .project__video-parent { top: 10px; left: 10px; right: 10px; bottom: 10px; width: auto; height: auto; } .tournage .owl-nav { display: flex; } .header__nav li { .transition; &:hover { opacity: 0.6; } } .header__contact { cursor: pointer; .transition; &:hover { opacity: 0.6; } } .main__nav-item { .transition; img { .transition; } &:hover { opacity: 0.6; } } .main__bg { height: 100vh; } .main__block { overflow: hidden; &:hover { .main__block-img img { transform: scale(1.05); } } } .main__block-img { overflow: hidden; .transition; img { .transition; } } .line { width: 100%; img { width: 100%; } } .main__blocks { justify-content: flex-start; } .main__block { margin-right: 20px; &:last-child { margin-right: 0; } } .menu__block:hover { .menu__compan { color: rgb(17, 17, 17); opacity: 1; } } .digital { padding-left: 5px; padding-right: 5px; } .main__info { position: relative; bottom: 44px; } .main__info-year { position: absolute; bottom: 0; right: 22.7vw; } .menu__wr { overflow-y: auto; } .menu__blocks { margin-bottom: 60px; } .main__bg { height: 100vh; img { height: 100%; } } .project__bg { height: 100vh; } .project__bg img { height: 100%; } .digital { padding-left: 10px; padding-right: 10px; } .inspiration { padding-left: 10px; padding-right: 10px; } .gallery { padding-left: 10px; padding-right: 10px; } .main__bg { height: 100vh !important; } .project__bg { height: 100vh !important; } .main__kvs { padding: 0; } .projects__block { width: calc(50% - 12px); } .projects__block { overflow: hidden; cursor: pointer; .transition; } .projects__img { overflow: hidden; .transition; img { .transition; } } .projects__block:hover { .projects__img { img { transform: scale(1.05); } } } .about__text p { font-size: 16px; } .projects__block { width: calc(50% - 10px); } .video__gallery { height: 100%; .project__video__img { width: 100%; height: 100%; } } .brief-black { p { color: #000000; &::after { background: #000000 !important; } } .brief__name { color: #000000; } } .brief-white { p { color: #ffffff; } .brief__blocks-parent::after{ background: #ffffff !important; } .brief__name { color: #ffffff; } } .tournage-white { .tournage__numbers { color: #ffffff; } .tournage__info-text p { color: #ffffff; &::after { background: white !important; } } } .tournage-black { .tournage__numbers { color: #000000; } .tournage__info-text p { color: #000000; } } .digital-white { .digital__name-prew { color: #ffffff; } } .digital-black { .digital__name-prew { color: #000000; } } .video-black { .video__name { color: #000000; } } .video-white { .video__name { color: #ffffff; } } html { --fancybox-scrollbar-compensate: 0 !important } .fancybox__slide { margin-right: 0 !important } .about__blocks .about__block:first-child .about__text::after { position: absolute; content: ""; top: -36px; left: -8.5vw; width: 25px; border-radius: 50%; height: 25px; background: #ffffff; } .about__blocks .about__block:first-child .about__text:nth-child(2)::after{ top: 10px; } .main__info-year { color: #ffffff; } .main__bg { display: block } .owl-item .tournage__block .tournage__info { display: none } .main__img-mob { display: none; } .brief-white { .brief-text__end::after { background: #fff; } } .brief__blocks { width: 82%; } .brief-text__end { width: 82%; } .brief-v2 .brief__blocks p { width: 91%; } .brief-v2 .brief-text__end p { margin-bottom: 18px; &:last-child { margin-bottom: 0; } } .dots__block{ display: flex; align-items: center; justify-content: center; width: 25px; border-radius: 50%; height: 25px; background: #ffffff; } .dots__block-wr{ height: 50%; display: flex; align-items: center; justify-content: center; } .about__blocks .about__block:first-child .about__text::after{ display: none; } .dots__block-parent{ position: absolute; height: 100%; left: 20px; top: 0; } .about__blocks{ position: relative; } .brief-white .brief-text__end::after{ display: none; } .brief-white .brief__blocks-parent::after{ display: none; } .brief-v2 .brief-text__item::after{ display: none; } .brief-v2 .brief__blocks-parent::after{ display: none; } .brief-black .dots__block{ background: rgb(17, 17, 17); } .brief-white .dots__block{ background: rgb(255, 255, 255); } /** * Адаптивка * **/ .main { margin-bottom: 20px } .tournage__blocks,.contact__slider { &.owl-carousel{ display: block!important; } } .contact__slider,.tournage__blocks{ position: relative; .main__prev,.main__next{ z-index: 12; .ypos_ab; padding: 0 20px; } .main__next{ right: 0px; } } @media only screen and(max-width: 3399px) { .main__bg { height: 60vh; } .main__block-img { height: 18.8vw; } .projects__img { height: 33.3vw; } .projects__blocks { gap: 4vw 0vw; } .brief__block { min-width: 41%; max-width: 45.7%; } .brief-text__item { font-size: 0.85vw; } .brief-v2 .brief__blocks p { font-size: 0.85vw; } .brief__block p { font-size: 0.85vw; } .project__video { padding-bottom: 6.4vw; padding-top: 6.4vw; } .brief { padding-top: 4.5vw; padding-left: 17.55vw; padding-bottom: 4.5vw; } .brief-text__item::after { left: -8.2vw; top: 4px; } .digital { padding-top: 4.6vw; padding-bottom: 3.8vw; } .tournage { padding-bottom: 3.9vw; padding-top: 4.2vw; } .inspiration { padding-top: 4vw; padding-bottom: 2.6vw; } .reference__blocks { padding-bottom: 3.5vw; padding-top: 4vw; } .moreprojects { padding-top: 4.2vw; } .tournage__img img { height: 39vw; } .about__block { width: 39vw; } .about__blocks { padding-left: 9.3vw; } .about__people-img { padding-left: 9.2vw; margin-bottom: 4vw; } .contact__slider { margin-bottom: 10.6vw; } .video { padding-bottom: 6.4vw; padding-top: 6.4vw; } .gallery { padding-top: 4.2vw; padding-bottom: 4vw; } .menu__compan { width: 23vw; } .menu__city { width: 19vw; } .menu__data { width: 4vw; } .tournage__blocks { .swiper-slide { width:auto!important; } } .contact { img.swiper-slide { height: 31.4vw; width:auto!important; } } .contact { padding-top: 4vw; } .contact__slider { margin-bottom: 11vw; } .brief-text__item::after { top: -0px; } .digital__name-prew::after { width: 1.4vw; height: 1.4vw; top: 5px; } .moreprojects .projects__head-name::after { width: 1.4vw; height: 1.4vw; } .gallery__head-name::after { width: 1.4vw; height: 1.4vw; } .digital__name-prew { padding-left: 15.5vw; } .moreprojects .projects__head-name { padding-left: 8.5vw; } .gallery__head-name { padding-left: 8.5vw; } .about__text-item::after { width: 1.3vw; left: -8.3vw; height: 1.3vw; } .about__blocks { padding-left: 9.3vw; } .about__text p { font-size: 16px; } .about__text-item::after { width: 25px; height: 25px; } .brief__block p { font-size: 16px; } .brief-text__item { font-size: 16px; } .brief-v2 .brief__blocks p { font-size: 16px; } .digital__name-prew::after { width: 25px; height: 25px; } .digital__name-prew::after { top: 0; } .moreprojects .projects__head-name::after { width: 25px; height: 25px; } .gallery__head-name::after { width: 25px; height: 25px; } .video { padding-left: 20px; padding-right: 20px; } .project__video { padding-left: 20px; padding-right: 20px; } } @media only screen and(max-width: 1199px) { .md-show { display: block !important; } .md-hide { display: none !important; } .main { margin-bottom: 40px } .main__block-info span { font-size: 14px; } .menu { display: none !important; } .menu__names p { font-size: 14px; } .menu__compan { font-size: 14px; } .menu__city { font-size: 14px; } .menu__data { font-size: 14px; } .brief__block p { font-size: 14px; } .brief-text__item { font-size: 14px; } .brief-v2 .brief__blocks p { font-size: 14px } .about__text p { font-size: 14px; } .about__text p { margin-bottom: 15px; } .about__name { margin-bottom: 30px; font-size: 20px; } .contact__info { padding-left: 117px; margin-bottom: 65px; } .main__info-year { position: static !important; } .main__block-img { height: auto !important; } .brief__block p { font-size: 14px; } .main__kv1 { padding: 12px; } .main__kv2 { padding: 12px; } .main__kv3 { padding: 12px; } .main__kv4 { padding: 12px; } .main__kvs .main__kv svg { opacity: 1; width: 17px; } .about__text p { font-size: 14px; } .about__text-item::after { width: 20px; height: 20px; } .brief__blocks-parent::after { width: 20px; height: 20px; } .brief__block p { font-size: 14px; } .brief-text__item { font-size: 14px; } .brief-v2 .brief__blocks p { font-size: 14px; } .digital__name-prew::after { width: 20px; height: 20px; } .moreprojects .projects__head-name::after { width: 20px; height: 20px; } .gallery__head-name::after { width: 20px; height: 20px; } .about__name { font-size: 21px; } .tournage__info-text { bottom: 3.1vw; } .about__blocks .about__block:first-child .about__text::after { left: -7.2vw; width: 20px; height: 20px; } .brief .brief-text__item { width: 82%; } .brief-v2 .brief-text__end { width: 82%; } .about__blocks .about__text::after { width: 20px !important; height: 20px !important; } .about__blocks .about__block:first-child .about__text::after{ display: none; } } @media only screen and(max-width: 767px) { .xs-show { display: block !important; } .xs-hide { display: none !important; } .contact__slider,.tournage__blocks{ .main__prev,.main__next{ .ypos_ab; padding: 0 10px; } } .row { margin-left: -10px; margin-right: -10px; } [class*="col-"] { padding-left: 10px; padding-right: 10px; } .logo { flex-shrink: 0; } .header__contact { display: none; } .logo { flex-shrink: 0; margin-right: 0; width: 179px; } .header__info { width: 100%; justify-content: space-between; } .header__nav li { margin-right: 16px; } .main__bg { height: 675px; } .main__info p:last-child { display: none; } .main__nav-item { span { display: none; } } .main__blocks { display: flex; align-items: center; flex-direction: column; } .main__block { margin-bottom: 20px; width: 100%; &:last-child { margin-bottom: 0; } } .main__blocks { padding: 0px 20px; } .main__block-img { height: 195px; } .main__block-img { margin-bottom: 10px; } .main__block:nth-child(1) .main__block-info { padding-left: 0; } .main__block:nth-child(3) .main__block-info { padding-right: 0; } .line { padding-left: 0; display: flex; align-items: center; justify-content: center; position: relative; } .projects { margin-top: 60px; } .projects__block { width: 100%; } .projects__img { margin-bottom: 9px; height: 235px; } .projects__blocks { justify-content: flex-start; } .projects__blocks { gap: initial; } .projects__block { margin-bottom: 41px; &:last-child { margin-bottom: 0; } } .end-lines-wr { display: none; } .projects { margin-bottom: 40px; } .about__blocks { padding-left: 40px; } .about__blocks { flex-direction: column; } .about__blocks { padding-left: 0; padding: 20px; } .about { margin-top: 60px; } .about__block { margin-right: 0; width: 100%; margin-bottom: 40px; &:last-child { margin-bottom: 0; } } .about__text { padding-left: 20px; } .about { margin-top: 40px; } .about__text { padding-left: 40px; } .about__name { margin-bottom: 38px; } .about__text p { margin-bottom: 14px; } .about__text { margin-bottom: 28px; } .about__text-item::after { width: 20px; height: 20px; left: -40px; } .about__block { margin-bottom: 36px; } .about__text-item2 { &::before { position: absolute; content: ""; top: 0; width: 20px; height: 20px; left: -40px; background-color: #fff; border-radius: 50%; } } .about__blocks { margin-bottom: 12px; } .about__people-img { padding-left: 60px; } .about__people-img { padding-left: 60px; margin-bottom: 41px; } .contact { padding-top: 40px; } .contact__info { padding-left: 20px; margin-bottom: 40px; } .project__bg { height: 675px; } .project__video__img { width: 340px; } .project__video { padding-top: 40px; padding-bottom: 40px; } .project__video-play { width: 30px; height: 30px; } .project__video-play svg { width: 8px; } .project__video-play { border: 4px solid #ffffff; } .brief { padding-top: 40px; padding-left: 0px; padding-bottom: 40px; } .brief__block { min-width: auto; max-width: max-content; margin-right: 0; } .brief__blocks { flex-direction: column; } .brief__blocks { flex-direction: column; padding-left: 0px; } .brief-text__item::after { left: -42px; } .brief__block p { br { display: none; } } .brief__block p { margin-bottom: 15px; position: relative; } .brief__block { padding-right: 20px; margin-bottom: 32px; &:last-child { margin-bottom: 0; } } .brief-text__item { position: relative; padding-right: 20px; } .brief-text__item { position: relative; padding-right: 20px; } .brief .brief-text__end { padding-left: 0px; &::after { left: -12px; } } .brief__img { width: 100%; } .digital { padding-top: 40px; padding-bottom: 40px; } .digital__name-prew::after { width: 20px; height: 20px; } .digital__name-prew { padding-left: 45px; } .digital__blocks { flex-direction: column; gap: 0; } .digital__block { width: 100%; height: 425px; margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .tournage { padding-top: 40px; padding-bottom: 40px; } .tournage__img { margin-bottom: 20px; } .tournage__img { margin-bottom: 20px; display: flex; align-items: center; justify-content: center; height: 320px; img { height: 100%!important; } } .tournage .main__prev{ left: 0; } .inspiration { padding-top: 40px; padding-bottom: 40px; } .inspiration__sketches { flex-direction: column; } .sketch__block { width: 100%; } .sketch__block { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .inspiration__imgs { flex-direction: column; } .inspiration__img { width: 100%; } .inspiration__img { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .inspiration__character { width: 100%; } .brief__blocks { p { padding-right: 20px; } } .reference__blocks { flex-direction: column; } .reference__blocks { padding-top: 40px; padding-bottom: 40px; } .reference__block { width: 100%; height: 150px; } .reference__block { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .cake__video { padding-top: 40px; padding-bottom: 40px; padding-left: 20px; padding-right: 20px; } .cake__video-img { width: 100%; } .moreprojects { margin-top: 0; padding-top: 30px; } .moreprojects .projects__head-name::after { width: 20px; height: 20px; } .moreprojects .projects__head-name { position: relative; padding-left: 39px; } .moreprojects { } .projects { margin-top: 121px; } .about { margin-top: 112px; } .moreprojects { margin-top: 0; padding-top: 40px; } .project__bg img { height: 100%; } .brief__block p { font-size: 16px; } .brief .brief-text__end { font-size: 16px; } .inspiration__img { width: 100% !important; height: 425px; } .inspiration__img { padding: 0; } .inspiration__img img { height: 100%; } .brief-v2 .brief__blocks p { font-size: 16px; } .sketch__block { width: 100% !important; padding: 0; } .inspiration { padding-right: 20px; padding-left: 20px; } .inspiration__img { height: auto; } .inspiration__img { height: auto; } .gallery { padding-top: 40px; padding-bottom: 40px; } .gallery__head-name::after { width: 20px; height: 20px; } .gallery__head-name { padding-left: 53px; } .gallery { padding-left: 20px; padding-right: 20px; } .video { padding-bottom: 40px; padding-top: 40px; } .video { padding-left: 20px; padding-right: 20px; } .video__name { margin-top: 20px; } .contact { img.swiper-slide { height: 320px; } } .line { width: 100%; img { } } .main__block { margin-right: 0; } .main__block-img { height: 45vw; } .main__block-img { height: 52vw; } .header__nav li a { display: block; padding: 20px 6px; } header { padding-right: 11px; } .about { margin-top: 100px; } .main__kvs { padding: 0px; } .main__kv1 { padding: 13px; } .main__kv2 { padding: 13px; } .main__kv3 { padding: 13px; } .main__kv4 { padding: 13px; } .brief-v2 .brief__blocks p { font-size: 14px; } .brief__block p { font-size: 14px; } .projects__img { margin-bottom: 9px; height: auto; } .brief .brief-text__end { font-size: 14px; } .digital { padding-left: 20px; padding-right: 20px; } .project__video__img { width: auto; } .video { width: auto; } .gallery .project__video-parent { top: 0; left: 0; right: 0; bottom: 0; } .tournage__info-text { bottom: 1vw; } .project__bg img{display: none} .main__img-mob { display: block!important; width: 100%; height: 100vh!important; position: absolute; left: 0; right: 0; bottom: 0; top: 0; object-fit: cover; } .brief-v2 .brief__blocks p { position: static; } .brief-v2 .brief__blocks { position: relative; } .about__blocks .about__block:first-child .about__text::after{ display: none; } .about__text{ padding-left: 0; } .brief .brief__blocks-parent::after{ display: none!important; } .brief .brief-text__end::after{ display: none; } .brief{ padding-left: 20px; } .about__blocks .about__block:first-child .about__text::after{ display: none; } .dots__block-parent{ display: none; } .brief__blocks{ width: 100%; } .brief-v2 .brief__blocks p{ width: 100%; } .brief-v2 .brief-text__end{ width: 100%; } .brief .brief-text__item { width: 100%; } } @media only screen and(max-width: 375px) { } @media only screen and(max-width: 320px) { }