@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap'); :root{ --red: #fc635e; --grey:#868686; --white:#fff; --light-grey:#adadad; --light-red:rgba(255, 99, 94, 0.78); --black:rgba(0, 0, 0, 0.7);; } @-webkit-keyframes arrow{ 0%{top: 0px;} 12.5%{top: 2px;} 25%{top: 4px;} 50%{top: 9px;} 75%{top: 4px;} 87.5%{top: 2px;} 100%{top: 0px;} } @keyframes arrow{ 0%{top: 0px;} 12.5%{top: 2px;} 25%{top: 4px;} 50%{top: 9px;} 75%{top: 4px;} 87.5%{top: 2px;} 100%{top: 0px;} } html { scroll-behavior: smooth; } .block__footer{ position: relative; -webkit-animation: arrow 1s linear infinite; animation: arrow 1s linear infinite; } *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Lato', sans-serif; } /*-----------------------------------*/ .hex{ -webkit-clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%); clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%); } .hex a{ color: #0c252d; font-size: 28px; font-weight: 900; width: 100%; height: 100%; } /*загальні*/ img{ width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } a{ text-decoration: none; } ul{ list-style: none; } iframe{ width: 100%; border: 0; } /*-----------------------------------*/ .red_text{ color: var(--red); } .grey_text{ color: var(--grey); } .white_text{ color: var(--white); } .title{ display: inline-block; position: relative; } .title:after{ content: ""; display: block; width: 100%; height: 1px; background: var(--grey); position: absolute; left: 0; bottom: -2px; } h1 a{ position: relative; } h1 a:hover{ top: -2px; } .bg{ position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; } .overlay{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--black); } .btn{ border-radius: 10px; position: relative; -webkit-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .btn:hover{ top: -2px; -webkit-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } .block__arrow{ margin-left: 1px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--red); background: var(--white); color: var(--red); font-weight: 700; background: transparent; } .container_arrow{ background: var(--red); color: var(--white); } .block__arrow:hover,.arrows button:hover, .mainblock__menu li a:hover{ background:var(--light-red); color: var(--white); } .mainblock__btn:hover,.join_block__btn:hover{ border: none; outline: none; background: var(--light-red); color: var(--white); } .container_arrow:hover{ border: 2px solid var(--black); background:var(--black); color: var(--red); } .info_btn:hover,.portfolio__btn:hover,.team_block__socmedia a:hover{ border: 2px solid var(--red); background: rgba(255, 255, 255, 0.7); color: var(--red); } /*---------------------------------------*/ h1,.receive_block__name,.work-info__title,.portfolio__menu ul li a, .mainblock__menu li,.process__info h2,.gallery__img>span{ text-transform: uppercase; } .btn,.block__footer,.block__arrow,.hex a,.team_block__socmedia a, .hexagon,.hex,.mainblock__menu li a,.process__icon,.header{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .block,.mainblock,.work_block{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .logo,.mainblock__header,.mainblock__content, .receive_block__item,.join_block__content,.join_block, .work_block__item,.work_block__info,.portfolio__content, .team_block__item,.team_block__socmedia, .portfolio_block{ display: -webkit-box; display: -ms-flexbox; display: flex; } .mainblock__content,.mainblock,.receive_block, .join_block,.member_block,.join_block__content,.work_block__item{ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .logo,.mainblock__header,.receive_block__item, .join_block__content,.portfolio__content,.team_block__item{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mainblock__content,.receive_block,.receive_block__item, .join_block__content,.work_block__item,.join_block, .work_block__info,.portfolio__content,.address_hex, .portfolio_block,.header{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }/*мобільна версія*/.text{ font-size: 15px; color: var(--light-grey); line-height: 20px; } .block,.portfolio_block{ padding: 15px 20px; } /*перша сторінка*/ .mainblock{ padding: 0 20px 15px 20px; background-image: url(../img/bg1.webp); position: relative; } .mainblock{ height: 100vh; overflow: hidden; } .mainblock__header{ position: fixed; width: 100%; height: 50px; z-index: 999; background-color: var(--black); } /*logo*/ .logo .hex{ margin-left: 15px; width: 36px; height: 40px; background: var(--red); } .logo .hex>a:hover{ color:var(--white); } .logo>a{ margin-left: 8px; font-size: 20px; color: var(--white); font-weight: 900; } .logo>a:hover{ color: var(--red); } /*меню*/ .burger_menu{ position: absolute; right: 5%; font-size: 28px; cursor: pointer; color: var(--red); } .mobile_menu{ position: absolute; z-index: 999; top: 49px; right: -999px; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; } .active{ right: 0; -webkit-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .mainblock__menu{ height: 520px; width: 210px; background-color: var(--black); } .mainblock__menu li{ height: 85px; border-bottom: 2px solid rgba(93, 93, 91, 0.4); -webkit-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; }.mainblock__menu li a{ width: 100%; height: 100%; color:var(--white); font-weight: 400; font-size: 20px; letter-spacing: 3px; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; position: relative; } .mainblock__menu li a:before{ content: ''; display: block; -webkit-clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%); clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%); margin-top: -5px; position: absolute; left: 20px; top: 50%; width: 10px; height: 11px; background: var(--light-red);} /*перша сторінка контент*/ .mainblock__content{ margin-top: 50%; padding: 0 20px; position: relative; } .mainblock__subtitle{ font-size: 18px; color: #fff; line-height: 26px; } .mainblock__btn,.join_block__btn{ margin-top: 7px; position: relative; width: 180px; height: 40px; border: 3px solid var(--red); font-size: 17px; color: var(--red); font-weight: 700; } /*друга сторінка*/ .subtitle{ padding: 10px 5px; color: var(--light-grey); font-size: 17px; text-align: center; } .receive_block__logo{ padding: 5px 0; width: 80px; height: 86px; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .receive_block__logo:hover{ background: var(--red); -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .hex-bg{ margin: 10px auto; background:var(--light-red); position: relative; } .hex_receive{ background: var(--red); width: 70px; height: 76px; } .hex_receive:hover{ background: var(--white); -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .hex_receive i{ margin-top: 7px; color: #fff; font-size: 28px; font-weight: 900; position: relative; z-index: 2; } .hex_receive:hover i{ color: var(--red); -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .receive_block__title{ text-align: center; } .receive_block__content{ display: -ms-grid; display: grid; grid: 1fr 1fr / 1fr 1fr; grid-gap: 5px; } .receive_block__item{ padding: 10px; } .receive_block__name a{ font-size: 18px; color: var(--grey); line-height: 26px; font-weight: 700; position: relative; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .receive_block__name a:after{ content: ""; position: absolute; display: block; width: 55px; height: 1px; background: var(--grey); left: calc(50% - 27px); bottom: -1px; } .receive_block__name a:hover{ color: var(--red); -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .receive_block__text{ margin-top: 10px; font-size: 14px; line-height: 18px; color: var(--light-grey); text-align: center; } /*третя сторінка*/ .join_block{ height: 330px; background-image: url(../img/bg_2.webp); } .join_block__content{ position: relative; margin-top: 20px; padding:27px 10px; border: 8px solid rgba(255, 255,255, 0.1); } .join_block__title{ text-align: center; } .join_block__btn{ margin-top: 20px; } .join_block__btn:hover>span{ color: var(--white); } /*процес*/.process_block__content{ width: 300px; display: -ms-grid; display: grid; grid: 106px 60px 77px 40px 124px/repeat(4, 25%) } .hex-wrap,.company_img{ -ms-grid-column-align: center; justify-self: center; } .hex-proc__st1{ -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: 1/1/3/3; } .hex-proc__st2{ -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 3; -ms-grid-column-span: 2; grid-area: 1/3/3/5; } .hex-proc__st3{ -ms-grid-row: 4; -ms-grid-row-span: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: 4/1/6/3; } .hex-proc{ width: inherit; height: inherit; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .company_img{ -ms-grid-row: 2; -ms-grid-row-span: 3; -ms-grid-column: 2; -ms-grid-column-span: 2; grid-area: 2/2/5/4; width: 150px; height: 162px; position: relative; } .company_img img{ position: absolute; top: 0; left: 0; width: 150%; } .hex-wrap{ width:127px; height:137px; background:transparent; position: relative; } /*----------------borders------------------*/ .hex-wrap>span{ position: absolute; } .red-border{ width: 4px; background: var(--red); } .grey-border{ width: 1px; background: var(--grey); } .hex_border1{ height: 74px; -webkit-transform: rotate(62deg); -ms-transform: rotate(62deg); transform: rotate(62deg); left: 31px; top: -20px; } .hex_border2{ height: 72px; -webkit-transform: rotate(-62deg); -ms-transform: rotate(-62deg); transform: rotate(-62deg); left: 94px; top: -19px; z-index: 2; } .hex-proc__st2_mob{ height: 70px; left: 93px; top: -19px; width: 4px; background: var(--red); } .hex_border3{ height: 71px; left: 125px; top: 32px; } .hex_border4{ height: 70px; -webkit-transform: rotate(62deg); -ms-transform: rotate(62deg); transform: rotate(62deg); left: 94px; top: 84px; } .hex_border5{ height: 73px; -webkit-transform: rotate(-62deg); -ms-transform: rotate(-62deg); transform: rotate(-62deg); left: 31px; top: 82px; } .hex_border6{ height: 70px; left: -1px; top: 32px; } .hex-proc__st4{ -ms-grid-row: 4; -ms-grid-row-span: 2; -ms-grid-column: 3; -ms-grid-column-span: 2; grid-area: 4/3/6/5; width: 149px; height: 159px; } .hex-proc__big{ width:inherit; height:inherit; position: relative; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .hex_border1_b{ height: 85px; -webkit-transform: rotate(62deg); -ms-transform: rotate(62deg); transform: rotate(62deg); left: 36px; top: -21px; } .hex_border2_b{ height: 85px; -webkit-transform: rotate(-62deg); -ms-transform: rotate(-62deg); transform: rotate(-62deg); left: 109px; top: -21px; } .hex_border3_b{ height: 80px; left: 146px; top: 40px; } .hex_border4_b{ height: 85px; -webkit-transform: rotate(62deg); -ms-transform: rotate(62deg); transform: rotate(62deg); left: 109px; top: 96px; } .hex_border5_b{ height: 85px; -webkit-transform: rotate(-62deg); -ms-transform: rotate(-62deg); transform: rotate(-62deg); left: 37px; top: 97px; } .hex_border6_b{ height: 80px; left:0; top: 40px; } .process__hex__title{ margin-top: -15px; display: inline-block; position: relative; } .process__hex__title:after{ content: ""; display: block; width: 100%; height: 1px; background: var(--grey); position: absolute; left: 0; bottom: 0; } .process__hex__title span:first-child{ margin-right: 4px; } .hex-proc p,.hex-proc__big p{ padding-top: 10px; color: var(--light-grey); font-size: 12px; line-height: 14px; text-align: center; } .process__icon{ width: 30px; height: 30px; background: var(--red); color: var(--white); border-radius: 50%; position: absolute; left: -14px; top: 20px; } .process__icon_b{ left: -9px; top: 25px; } .icon_after{ top: 140px; left: 59px; } /*що ми пропонуємо*/ .work-info__title{ margin-left: 10px; font-size: 20px; color: var(--grey); position: relative; } .work-info__title:before{ content: ""; display: block; position: absolute; left: -10px; top: 1px; height: 24px; width: 5px; background: var(--red); } .work-info__text{ padding: 10px 0; } .info_btn,.portfolio__btn{ width: 140px; height: 40px; background: var(--red); color: var(--white); } .work_block__img{ margin: 10px 0; } .work_block__header{ padding: 5px 0; width: 100%; } .landing,.marketing,.work_block__header,.team_block{ background: #f2f2f2; } /*портфоліо*/ .portfolio__menu{ margin: 10px 0; border-top: 1px solid var(--grey); border-bottom: 1px solid var(--grey); } .portfolio__menu ul { padding: 10px; display: -ms-grid; display: grid; grid: repeat(2, 1fr)/ repeat(6, 1fr); } .portfolio__menu ul li{ text-align: center; color: var(--red); position: relative; } .portfolio__menu ul li:after{ content: "/"; color: var(--grey); position: absolute; right: 4px; } .portfolio__menu ul li:nth-child(5):after{ content: ""; } .portfolio__menu ul li:nth-child(1){ -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: 1/1/2/4; } .portfolio__menu ul li:nth-child(2){ text-align: left; -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 4; -ms-grid-column-span: 3; grid-area: 1/4/2/7; } .portfolio__menu ul li:nth-child(3){ -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: 2/1/3/3; } .portfolio__menu ul li:nth-child(4){ -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 3; -ms-grid-column-span: 2; grid-area: 2/3/3/5; } .portfolio__menu ul li:nth-child(5){ -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 5; -ms-grid-column-span: 2; grid-area: 2/5/3/7; } .portfolio__menu ul li a{ display: inline-block; width: 100%; color: var(--red); font-size: 14px; } .portfolio__menu ul li a:hover{ color:var(--grey); font-weight: 700; } .portfolio__content{ padding-bottom: 10px; } .portfolio__gallery{ width: 100%; padding: 15px 0; display: -ms-grid; display: grid; grid: repeat(3, 120px)/repeat(2, 1fr); grid-gap: 8px; } .gallery__img{ padding: 5px; position: relative; height: 100%; overflow: hidden; } .gallery__img img{ position: absolute; left: 0; top: 0; } .gallery__img>span{ font-size: 18px; font-weight: 700; color: var(--white); position: absolute; left: 10px; top: 10px; z-index: 6; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .gallery__img a{ display: block; position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; background: var(--light-red); opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .overl{ -webkit-clip-path: polygon(65% 0, 35% 0, 35% 35%, 0 35%, 0 65%, 35% 65%, 35% 100%, 65% 100%, 65% 65%, 100% 65%, 100% 35%, 65% 35%); clip-path: polygon(65% 0, 35% 0, 35% 35%, 0 35%, 0 65%, 35% 65%, 35% 100%, 65% 100%, 65% 65%, 100% 65%, 100% 35%, 65% 35%); width: 42px; height: 42px; background: var(--white); position: absolute; z-index: 5; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .gallery__img:hover{ cursor: pointer; } .gallery__img:hover a, .gallery__img:hover span, .gallery__img:hover .overl{ opacity: 1; visibility: visible; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in;} .portfolio__btn{ margin: 5px; width: 150px; } /*про наc*/ .team_block__content{ padding: 15px 0; } .team_block__item{ padding: 5px 23px; } .team_block__img img{ width: 130px; height: 150px; }.team_block__name{ font-weight: 700; } .team_block__info{ margin-left: 22px; } .team_block__descr{ padding: 8px 0; color: var(--grey); } .team_block__socmedia a{ margin-right: 5px; width: 25px; height: 25px; border-radius: 50%; background: var(--grey); color: var(--white); text-align: center; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .hexagon{ display: none; } .member_block__content{ margin-bottom: 10px; display: -ms-grid; display: grid; grid: 1fr 90px/1fr 1fr; grid-gap: 10px; } .member_block__descr{ -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 1/1/3/2; padding-top: 5px; font-size: 14px; line-height: 18px; -ms-grid-column-align: center; justify-self: center; -ms-grid-row-align: center; align-self: center; text-align: center; } .member_img{ margin-right: 0; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-column-span:1; grid-area:1/2/2/3; -ms-grid-column-align: center; justify-self: center; -ms-grid-row-align: center; align-self: center; } .member_block__info{ -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 2/2/3/3; -ms-grid-column-align: center; justify-self: center; } .arrows button{ margin: 3px; display: inline-block; outline: none; border: 1px solid var(--red); width: 25px; height: 25px; border-radius: 50%; background: var(--white); color: var(--red); font-size: 18px; cursor: pointer; position: relative; z-index: 5; } /*футер*/ footer{ position: relative; margin-top: -55px; } .map_info{ position: relative; top: 53px; } .map_info__bg{ width: 100px; height: 105px; } .address_hex{ position: absolute; left: 5px; top: 5px; width: 90px; height: 95px; background: var(--red); color: var(--white); } .address__title a{ display: block; height: 100%; color: var(--white); font-size: 18px; } .address__title a:hover{ color: var(--black); } .address__info{ font-size: 10px; text-align: center; } .map_block iframe{ height: 200px; } .footer{ min-height: 100px; background-image: url(../img/bg_3.webp); } .footer .logo{ margin-top: -20px; margin-left: -52px; position: absolute; top: 50%; left: 50%; } /*кнопка вверх*/ .btn_up { display: inline-block; position: fixed; bottom: 20px; right: 30px; z-index: 99; width: 36px; height: 40px; border: none; outline: none; background-color: var(--light-red); color: var(--white); cursor: pointer; font-size: 18px; -webkit-transition: background-color .3s, opacity .5s, visibility .5s; -o-transition: background-color .3s, opacity .5s, visibility .5s; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; } .btn_up:hover { background-color: rgba(0, 0, 0, 0.7); } .btn_up.show { opacity: 1; visibility: visible; }@media screen and (min-width:375px){ .text{ font-size: 17px; color: var(--light-grey); line-height: 22px; } .block,.portfolio_block{ padding: 15px 23px; } .mainblock{ padding: 0 23px 15px 23px; } } @media screen and (min-width:455px){ .block,.portfolio_block{ padding: 15px 30px; } .mainblock{ padding: 0 30px 15px 30px; } .subtitle{ padding: 10px 5px; font-size: 18px; } .portfolio__menu ul li:nth-child(2){ text-align: center; } .join_block__content{ padding: 40px 15px; } .join_block__btn{ margin-top: 25px; } .map_block iframe{ height: 225px; } } @media screen and (min-width:500px){ .mainblock__title,.title,.join_block__title{ font-size: 38px; } .mainblock__subtitle{ padding: 15px 0; font-size: 21px; } .join_block{ height: 350px; } .footer{ height: 100px; } .subtitle{ padding: 15px 10px; font-size: 21px; } .work_block__content{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .advertising .work_block__content{ padding:15px 10px; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; text-align: right; } .advertising .work_block__info{ -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }.advertising .work-info__title:before{ display: none; } .advertising .work-info__title{ margin-right: 13px; } .advertising .work-info__title:after{ content: ""; display: block; position: absolute; right: -10px; top: 1px; height: 24px; width: 5px; background: var(--red); } .work_block__info{ padding: 10px; width: 106%; } .portfolio__menu ul{ grid: 1fr/repeat(5,1fr); } .portfolio__menu ul li:nth-child(1){ -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 1/1/2/2; } .portfolio__menu ul li:nth-child(2){ -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 1/2/2/3; } .portfolio__menu ul li:nth-child(3){ -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; grid-area: 1/3/2/4; } .portfolio__menu ul li:nth-child(4){ -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 4; -ms-grid-column-span: 1; grid-area: 1/4/2/5; } .portfolio__menu ul li:nth-child(5){ -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 5; -ms-grid-column-span: 1; grid-area: 1/5/2/6; } .portfolio__menu ul li:after{ right: -2px; } .portfolio__menu ul li:nth-child(1):after{ right: 9px; } .portfolio__menu ul li:nth-child(2):after{ right: -14px; } .team_block__content{ display: -webkit-box; display: -ms-flexbox; display: flex; } .team_block__item{ padding: 5px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .team_block__info{ margin-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .team_block__socmedia a{ width: 33px; height: 33px; font-size: 20px; } .member_block__info{ text-align: center; } } @media screen and (min-width:590px){ .burger_menu{ display: none; } .mobile_menu{ right: 0; top: 15px; } .mainblock__menu{ padding:0 10px; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 25px; background: transparent; } .mainblock__menu li{ margin-right: 10px; padding-bottom: 5px; height: 100%; border-bottom: none; } .mainblock__menu li:last-child{ margin-right: 0; } .mainblock__menu li a{ color: var(--white); font-size: 18px; font-weight: 50; letter-spacing: 2px; } .mainblock__menu li a:hover{ background: transparent; color: var(--red); } .mainblock__menu li:hover{ border-bottom: 4px solid var(--red); } .mainblock__menu li a:before{ display: none; } .mainblock__content{ padding: 0 25px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mainblock__subtitle{ padding: 25px 0 20px 0; text-align: center; } .mainblock__btn{ margin-top: 15px; } .receive_block__content{ padding: 5px 0; grid: 1fr/ repeat(4,1fr) } .team_block__item{ padding: 5px 15px; } .member_block__descr{ padding-left: 20px; } } @media screen and (min-width:700px){ .mainblock__content{ margin-top: 45%; } .process_block__content{ position: relative; width: 530px; grid:33px 20px 16px 35px 31px 37px 37px 20px 105px/ 48px 32px 65px 59px 20px 44px 59px 62px 143px; } .hex-proc__st2_mob{ visibility: hidden; z-index: -999; } .hex-proc__st1{ -ms-grid-row: 4; -ms-grid-row-span: 4; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: 4/1/8/4; } .hex-proc__st2{ -ms-grid-row: 5; -ms-grid-row-span: 4; -ms-grid-column: 5; -ms-grid-column-span: 3; grid-area: 5/5/9/8; } .hex-proc__st3{ -ms-grid-row: 1; -ms-grid-row-span: 5; -ms-grid-column: 7; -ms-grid-column-span: 2; grid-area: 1/7/6/9; } .hex-proc__st4{ -ms-grid-row: 3; -ms-grid-row-span: 6; -ms-grid-column: 9; -ms-grid-column-span: 1; grid-area: 3/9/9/10; } .company_img{ -ms-grid-row: 7; -ms-grid-row-span: 3; -ms-grid-column: 2; -ms-grid-column-span: 4; grid-area: 7/2/10/6; position: relative; } .process_block__content>span{ display: block; width: 4px; height: 75px; background: var(--red); -webkit-transform: rotate(-62deg); -ms-transform: rotate(-62deg); transform: rotate(-62deg); position: absolute; top: 150px; left: 167px; } .mainblock__header{ height: 75px; } .logo .hex{ width: 60px; height: 68px; } .hex a{ font-size: 35px; } .logo>a{ font-size: 24px; } .mobile_menu{ top: 29px; } .mainblock__menu li{ margin-right: 20px; } .join_block{ height: 380px; } .text{ font-size: 19px; line-height: 24px; } .work-info__text{ padding: 22px 0; }.portfolio__menu ul li a{ font-size: 17px; } .portfolio__gallery{ grid: 140px 140px/ repeat(4,1fr); grid-gap: 10px; } .gallery__img:nth-child(1){ -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: 1/1/2/3; } .gallery__img:nth-child(6){ -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 3; -ms-grid-column-span: 2; grid-area: 2/3/3/5; } .member_block__content{ grid: 1fr / repeat(3,1fr); } .member_block__info{ -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; grid-area: 1/3/2/4; -ms-grid-column-align: start; justify-self: start; } .member_block__info,.member_img,.member_block__descr{ -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .member_block__descr{ font-size: 15px; } .address__title a{ font-size: 24px; } .btn_up{ width: 46px; height: 50px; bottom: 30px; right: 40px; } } @media screen and (min-width:920px){ .block{ margin: 0 auto; } .block, .portfolio_block { padding: 35px 45px; } .mainblock{ padding-bottom: 28px; } .receive_block,.join_block, .work_block__item,.team_block{ min-height: 576px; } .process_block,.portfolio_block{ min-height: 840px; } .member_block{ min-height: 640px; } .map_block iframe{ height: 334px; } .footer{ height: 210px; } .mainblock__header{ padding-top: 23px; height: 100px; position: relative; background: none; } .mobile_menu{ top: 38px; } .mainblock__menu{ height: 55px; } .mainblock__menu li{ margin-right: 48px; padding-bottom: 0; } .mainblock__content{ margin: 0; padding: 0; } .mainblock__title{ font-size: 50px; position: relative; } .mainblock__title:before,.mainblock__title:after{ content: ""; display: block; height: 9px; width: 107px; background: #7d7c79; position: absolute; top: 25px; } .mainblock__title:before{ left: -116px; } .mainblock__title:after{ right: -116px; } .mainblock__subtitle{ padding-top: 29px; font-size: 24px; } .mainblock__btn{ margin-top: 48px; width: 206px; height: 58px; font-size: 24px; } .receive_block{ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .title{ font-size: 28px; } .title:after{ bottom: -12px; } .subtitle{ padding: 23px; width: 507px; font-size: 20px; line-height: 26px; } .receive_block__content{ margin-bottom: 54px; } .receive_block__logo{ width: 102px; height: 118px; } .hex_receive{ width: 86px; height: 102px; } .hex_receive a i{ font-size: 40px; } .receive_block__name{ padding-top: 18px; } .receive_block__name a:after{ bottom: -11px; } .receive_block__text{ padding-top: 23px; } .join_block{ padding-top: 92px; } .join_block__content{ margin: 30px auto; width: 900px; height: 384px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .join_block__btn{ margin-top: 50px; width: 206px; height: 58px; font-size: 24px; } .process_block{ padding-top: 51px; } .process_block__content{ margin-top: 59px; width: 800px; grid:50px 30px 24px 46px 51px 53px 55px 30px 217px/ 60px 69px 40px 89px 30px 57px 90px 93px 268px; } .hex-wrap{ width: 180px; height: 200px; } .company_img{ width: 266px; height: 300px; } .hex-proc__st4{ width: 266px; height: 300px; } .hex_border1{ height: 104px; left: 45px; top: -26px; } .hex_border2{ height: 104px; left: 134px; top: -26px; } .hex_border3{ height: 102px; left: 179px; top: 49px; } .hex_border4{ height: 102px; -webkit-transform: rotate(61deg); -ms-transform: rotate(61deg); transform: rotate(61deg); left: 134px; top: 124px; } .hex_border5{ height: 102px; -webkit-transform: rotate(-61deg); -ms-transform: rotate(-61deg); transform: rotate(-61deg); left: 45px; top: 124px; } .hex_border6{ height: 102px; left: 0; top: 49px; } .hex_border1_b{ height: 152px; left: 65px; top: -40px; } .hex_border2_b{ height: 152px; left: 197px; top: -40px; } .hex_border3_b{ height: 154px; left: 263px; top: 71px; } .hex_border4_b{ height: 152px; left: 197px; top: 183px; } .hex_border5_b{ height: 152px; left: 66px; top: 184px; } .hex_border6_b{ height: 154px; left: -1px; top: 71px; } .hex-proc p, .hex-proc__big p{ padding: 10px 17px; font-size: 15px; line-height: 17px; } .hex-proc__big p{ padding: 15px 40px; } .process__hex__title:after{ bottom: -5px; } .process_block__content>span{ height: 94px; top: 229px; left: 215px; -webkit-transform: rotate(-61deg); -ms-transform: rotate(-61deg); transform: rotate(-61deg); } .process__icon{ top: 32px; left: -12px; } .process__icon_b{ top: 53px; } .icon_after{ top: 278px; left: 118px; } .work_block{ width: 100%; } .work_block__title{ margin-top: 55px; } .work_block__content{ padding: 50px 0; } .landing,.marketing{ width: 100%; } .work-info__title{ font-size: 28px; } .work_block__info{ width: 50%; font-size: 15px; line-height: 24px; } .info_btn{ width: 168px; height: 42px; font-size: 20px; font-weight: 300; } .portfolio_block{ margin: 0 auto; padding-top: 84px; width: 100%; } .portfolio_block__header{ padding-bottom: 64px; } .portfolio__gallery{ grid: 200px 200px/ repeat(4,1fr); } .gallery__img>span{ left: 24px; top: 27px; font-size: 28px; } .portfolio__btn{ margin-top: 60px; width: 193px; height: 50px; font-size: 20px; font-weight: 300; }.team_block{ padding: 54px 0 12px 0; width: 100%; } .team_block__content{ padding: 75px 0 70px 0; } .team_block__item{ width: 280px; } .team_block__img img{ height: 172px; width: 148px; } .team_block__info{ padding-top: 28px; } .team_block__name{ font-size: 20px; } .team_block__descr{ font-size: 16px; } .member_block{ padding-top: 53px; } .hexagon_bg{ width: 74px; height: 88px; background: var(--light-red); position: relative; } .hexagon{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 4px; top: 4px; z-index: 2; width: 66px; height: 80px; background: var(--red); } .hexagon>span{ margin-top: 80px; font-size: 100px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); color:var(--white); } .member_img img{ width: 160px; height: 187px; } footer{ margin-top: -122px; } .map_info__bg{ width: 210px; height: 245px; } .map_info{ top: 122px; } .address_hex{ left: 12px; top: 12px; width: 187px; height: 217px; } .address__ttle { font-size: 27px; } .address__info{ padding: 20px; font-size: 15px; } } @media screen and (min-width:1200px){ .join_block, .portfolio_block, .block , .work_block__item,.mainblock{ padding: 20px 100px; } .portfolio__gallery{ grid: 210px 210px/repeat(4,1fr); grid-gap: 15px; } } @media screen and (min-width:1500px){ .title { font-size: 32px; } .portfolio__gallery{ grid: 310px 310px/repeat(4,1fr); grid-gap: 15px; } .team_block__img img{ width: 200px; height: 218px; } }