:root { --container-padding: 66px; --brands-items-divider: 6; --square-cards-divider: 3; }

body { margin: 0; box-sizing: border-box; font: 400 22px/1.4 "Roboto", sans-serif; display: flex; flex-direction: column; min-height: 100vh; max-width: 100vw; color: #333; overflow-x: hidden; }

strong { font-weight: 700 !important; }

h1, h2, h3, h4 { font-family: "Comfortaa", cursive; }

h5, h6 { font-family: "Roboto", sans-serif; }

.main-content { flex: 1 1 auto; }

a { text-decoration: none; transition: all 0.2s ease-in-out; }

img { width: 100%; }

.container { padding-left: var(--container-padding); padding-right: var(--container-padding); }

@media (max-width: 991px) { :root { --square-cards-divider: 2; } }

@media (max-width: 670px) { :root { --square-cards-divider: 1; } }

@media (max-width: 500px) { :root { --container-padding: 0px !important; } }

/* width */
body::-webkit-scrollbar { width: 10px; max-height: 189px; }

/* Track */
body::-webkit-scrollbar-track { background: rgba(0, 0, 255, 0.3); }

/* Handle */
body::-webkit-scrollbar-thumb { background: #00B3C4; border-radius: 70px; }

/* Handle on hover */
body::-webkit-scrollbar-thumb:hover { background: #00565e; }

/* width */
.team-member-card__content::-webkit-scrollbar { width: 10px; max-height: 189px; }

/* Track */
.team-member-card__content::-webkit-scrollbar-track { background: #707070; }

/* Handle */
.team-member-card__content::-webkit-scrollbar-thumb { background: #E5E1DF; border-radius: 70px; }

/* Handle on hover */
.team-member-card__content::-webkit-scrollbar-thumb:hover { background: #b7aca7; }

.team-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 0; grid-auto-columns: 0; overflow: hidden; }

.team-grid .cell { height: calc(100vw / 3); }

.team-grid .cell:nth-of-type(1) { grid-area: a; }

.team-grid .cell:nth-of-type(2) { grid-area: b; }

.team-grid .cell:nth-of-type(3) { grid-area: c; }

.team-grid .cell:nth-of-type(4) { grid-area: d; }

.team-grid .cell:nth-of-type(5) { grid-area: e; }

.team-grid .cell:nth-of-type(6) { grid-area: f; }

.team-grid .cell:nth-of-type(7) { grid-area: g; }

.team-grid .cell:nth-of-type(8) { grid-area: h; }

.team-grid .cell:nth-of-type(9) { grid-area: i; }

.team-grid .cell:nth-of-type(10) { grid-area: j; }

.team-grid .cell:nth-of-type(11) { grid-area: k; }

.team-grid .cell:nth-of-type(12) { grid-area: l; }

.team-grid .cell:nth-of-type(13) { grid-area: m; }

.team-grid .cell:nth-of-type(14) { grid-area: n; }

.team-grid .cell:nth-of-type(15) { grid-area: o; }

.team-grid .cell:nth-of-type(16) { grid-area: p; }

.team-grid .cell:nth-of-type(17) { grid-area: q; }

.team-grid .cell:nth-of-type(18) { grid-area: r; }

.team-grid-1 { grid-template-rows: 1fr; grid-template-areas: 'a a .'; }

.team-grid-2 { grid-template-rows: repeat(2, 1fr); grid-template-areas: 'a a b'
 '. . b'; }

.team-grid-3 { grid-template-rows: repeat(2, 1fr); grid-template-areas: 'a a b'
 'c c b'; }

.team-grid-4 { grid-template-rows: repeat(4, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd . .'
 'd . .'; }

.team-grid-5 { grid-template-rows: repeat(4, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd . .'; }

.team-grid-6 { grid-template-rows: repeat(5, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f .'
 '. f .'; }

.team-grid-7 { grid-template-rows: repeat(5, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f g'
 '. f g'; }

.team-grid-8 { grid-template-rows: repeat(6, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f g'
 'h f g'
 'h . .'; }

.team-grid-9 { grid-template-rows: repeat(6, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f g'
 'h f g'
 'h i i'; }

.team-grid-10 { grid-template-rows: repeat(7, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f g'
 'h f g'
 'h i i'
 'j j .'; }

.team-grid-11 { grid-template-rows: repeat(8, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f g'
 'h f g'
 'h i i'
 'j j k'
 '. . k'; }

.team-grid-12 { grid-template-rows: repeat(8, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f g'
 'h f g'
 'h i i'
 'j j k'
 'l l k'; }

.team-grid-13 { grid-template-rows: repeat(10, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f g'
 'h f g'
 'h i i'
 'j j k'
 'l l k'
 'm . .'
 'm . .'; }

.team-grid-14 { grid-template-rows: repeat(10, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f g'
 'h f g'
 'h i i'
 'j j k'
 'l l k'
 'm n n'
 'm . .'; }

.team-grid-15 { grid-template-rows: repeat(10, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f g'
 'h f g'
 'h i i'
 'j j k'
 'l l k'
 'm n n'
 'm o o'; }

.team-grid-16 { grid-template-rows: repeat(12, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f g'
 'h f g'
 'h i i'
 'j j k'
 'l l k'
 'm n n'
 'm o o'
 'p . .'
 'p . .'; }

.team-grid-17 { grid-template-rows: repeat(12, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f g'
 'h f g'
 'h i i'
 'j j k'
 'l l k'
 'm n n'
 'm o o'
 'p q q'
 'p . .'; }

.team-grid-18 { grid-template-rows: repeat(12, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f g'
 'h f g'
 'h i i'
 'j j k'
 'l l k'
 'm n n'
 'm o o'
 'p q q'
 'p r r'; }

.team-grid .cell:nth-of-type(2), .team-grid .cell:nth-of-type(4), .team-grid .cell:nth-of-type(6), .team-grid .cell:nth-of-type(7), .team-grid .cell:nth-of-type(8), .team-grid .cell--ver { height: calc((100vw / 3) * 2); }

.team-grid .cell:nth-of-type(2) img, .team-grid .cell:nth-of-type(2) .team-member-card__content, .team-grid .cell:nth-of-type(4) img, .team-grid .cell:nth-of-type(4) .team-member-card__content, .team-grid .cell:nth-of-type(6) img, .team-grid .cell:nth-of-type(6) .team-member-card__content, .team-grid .cell:nth-of-type(7) img, .team-grid .cell:nth-of-type(7) .team-member-card__content, .team-grid .cell:nth-of-type(8) img, .team-grid .cell:nth-of-type(8) .team-member-card__content, .team-grid .cell--ver img, .team-grid .cell--ver .team-member-card__content { height: 50%; }

.team-grid .cell:nth-of-type(1) .team-member-card, .team-grid .cell:nth-of-type(3) .team-member-card, .team-grid .cell:nth-of-type(5) .team-member-card, .team-grid .cell:nth-of-type(9) .team-member-card { display: flex; flex-direction: row; }

.team-grid .cell:nth-of-type(1) .team-member-card img, .team-grid .cell:nth-of-type(1) .team-member-card .team-member-card__content, .team-grid .cell:nth-of-type(3) .team-member-card img, .team-grid .cell:nth-of-type(3) .team-member-card .team-member-card__content, .team-grid .cell:nth-of-type(5) .team-member-card img, .team-grid .cell:nth-of-type(5) .team-member-card .team-member-card__content, .team-grid .cell:nth-of-type(9) .team-member-card img, .team-grid .cell:nth-of-type(9) .team-member-card .team-member-card__content { width: 50%; }

.team-member-card { height: 100%; padding-right: 5px; }

.team-member-card h3 { text-transform: uppercase; margin-bottom: 1.04vw; font-size: 2.2vw; }

.team-member-card h4 { font-size: 1.145vw; text-transform: uppercase; font-weight: bold; }

.team-member-card h4:nth-of-type(2) { font-family: "Roboto", sans-serif; font-weight: 400; font-style: italic; }

.team-member-card h4:not(:last-of-type) { margin-bottom: 10px; }

.team-member-card__bio { margin-top: 1.56vw; }

.team-member-card__bio p { font-size: 0.99vw; line-height: 1.4; max-width: 23.43vw; }

.team-member-card__bio p:not(:last-of-type) { margin-bottom: 1.0416vw; }

.team-member-card img { -o-object-fit: cover; object-fit: cover; max-width: 100%; }

.team-member-card__content { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow-y: auto; padding: 1.56vw; height: 95%; max-height: 95%; width: 100%; }

.team-member-card__content span { font-weight: bold; }

.team-member-card--hor { display: flex; align-items: center; height: 100%; }

.team-member-card--hor img { width: 50%; height: 100%; }

.team-member-card--ver { height: 100%; }

.team-member-card--ver .team-member-card__content { max-height: calc((100% - 5px) / 2); }

.team-member-card--ver img { height: 50%; }

@media (max-width: 767px) { .team-grid .cell { height: auto !important; }
  .team-wrap .team-grid { display: flex; flex-direction: column; }
  .team-wrap .team-grid .cell { width: 100%; }
  .team-member-card { display: flex !important; flex-direction: column !important; }
  .team-member-card img { width: 100% !important; height: auto !important; }
  .team-member-card__content { height: auto !important; width: 100% !important; }
  .team-member-card h3 { font-size: 28px; margin-bottom: 18px; }
  .team-member-card h4 { font-size: 14px; margin-bottom: 15px; }
  .team-member-card h4:not(:last-of-type) { margin-bottom: 4px; }
  .team-member-card h4 br { display: none; }
  .team-member-card__bio { margin-top: 0; }
  .team-member-card__bio p { font-size: 14px !important; max-width: 500px !important; }
  .team-member-card__content { padding: 50px; max-height: none; height: auto; } }

@media (max-width: 500px) { .team-member-card__content { padding: 50px 40px; }
  .team-member-card__bio p { font-size: 18px !important; } }

@media (max-width: 425px) { .team-member-card__content { padding: 40px 20px; }
  .team-member-card h4 { font-size: 18px; }
  .team-member-card__bio { margin-top: 20px; }
  .team-member-card__bio p { font-size: 16px !important; }
  .team-member-card__bio p:not(:last-of-type) { margin-bottom: 10px; } }

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

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

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

*, *:before, *:after { box-sizing: border-box; }

.square-card-wrap { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

.square-card-wrap .card { position: relative; width: calc(100% / var(--square-cards-divider)); height: calc(
 (100vw - var(--container-padding) * 2) / var(--square-cards-divider)); background-size: cover; }

.square-card-wrap .card--with-overlay:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.6)); }

.square-card-wrap .card--hive-mind { background: #fcbe21; }

.square-card-wrap .card--hive-mind .card__content { background-size: 100%; background-position: right top; }

.square-card-wrap .card--hive-mind span { display: inline-flex; margin-top: 10px; line-height: 1.1; }

.square-card-wrap .card--partners-hive h3 { position: relative !important; bottom: auto !important; left: auto !important; text-align: center !important; line-height: 1.3; color: #fff; max-width: 100% !important; margin-bottom: 20px; }

.square-card-wrap .card--partners-hive h3 span { font-size: 2.7vw; }

.square-card-wrap .card--partners-hive p { color: #fff; }

.square-card-wrap .card--quote .card__content--text p { position: relative; transform: translate(13%, 16%); }

.square-card-wrap .card--quote .card__content--text p:first-of-type { margin-bottom: 40px; }

.square-card-wrap .card--glasses img, .square-card-wrap .card--glasses svg { width: 15.625vw !important; height: auto !important; margin-bottom: 30px; }

.square-card-wrap .card:first-of-type { width: calc((100% / var(--square-cards-divider)) * 2); }

.square-card-wrap .card:first-of-type .card__content { flex-direction: row; display: flex; background-size: 50%; background-position: left top; }

.square-card-wrap .card:first-of-type .card__content h4 { margin-top: 0; }

.square-card-wrap .card:first-of-type .card__content img { width: 50%; }

.square-card-wrap .card:first-of-type .card__content__txt { padding: 20px; margin-left: auto; width: 50%; }

.square-card-wrap .card--plane .card__content svg { width: 12.41vw; height: 12.41vw; }

.square-card-wrap .card--plane .card__content h4 { margin-top: 4px; }

.square-card-wrap .card--contact .soc svg { width: 32px !important; }

.square-card-wrap .card--contact .soc svg * { fill: #00b3c4; }

.square-card-wrap .card__content { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; padding: 3.64vw; }

.square-card-wrap .card__content svg { width: 10.41vw; height: 10.41vw; }

.square-card-wrap .card__content h4 { margin: 2.08vw auto 1.041vw; font-size: 1.66vw; }

.square-card-wrap .card__content h5 { font-size: 1.35vw; }

.square-card-wrap .card__content h3 { position: absolute; bottom: 10%; left: 10%; max-width: 120px; text-align: left; font-size: 1.875vw; }

.square-card-wrap .card__content p { font-size: 1.25vw; line-height: 1.4; }

.square-card-wrap .card__content h4, .square-card-wrap .card__content p { margin-left: auto; margin-right: auto; }

.square-card-wrap .card__content--text p { font-size: 1.35vw; max-width: 16.66vw; }

.square-card-wrap .card__content--text p:first-of-type { margin-bottom: 3.125vw; }

.square-card-wrap .card__content--svg .svg-top, .square-card-wrap .card__content--svg .svg-bottom { position: absolute; }

.square-card-wrap .card__content--svg .svg-small { width: 3.125vw; height: 3.125vw; }

.square-card-wrap .card__content--svg .svg-medium { width: 6.25vw; height: 6.25vw; }

.square-card-wrap .card__content--svg .svg-large { width: 7.8125vw; height: 7.8125vw; }

.square-card-wrap .card__content--svg h5 { color: #fff; margin-top: 10px; text-transform: uppercase; font-weight: bold; }

.square-card-wrap .card__content--svg a { font-size: 1.35vw; margin-top: 5px; }

.square-card-wrap .card__content--svg .svg-top { top: 5%; }

.square-card-wrap .card__content--svg .svg-bottom { bottom: 5%; }

.square-card-wrap .card__content--svg .svg-left { left: 10%; }

.square-card-wrap .card__content--svg .svg-right { right: 10%; }

.card.card--with-arrow .svg-bottom { bottom: 7%; }

.service-webdev .arrow path { fill-opacity: 0; stroke: #000; -webkit-animation: dashBF 4s ease-in-out infinite; animation: dashBF 4s ease-in-out infinite; -webkit-animation-delay: 0s; animation-delay: 0s; }

@-webkit-keyframes dashBF { 40%, 60% { stroke-dashoffset: 0; }
  35%, 65% { fill-opacity: 0; }
  45%, 55% { fill-opacity: 1; } }

@keyframes dashBF { 40%, 60% { stroke-dashoffset: 0; }
  35%, 65% { fill-opacity: 0; }
  45%, 55% { fill-opacity: 1; } }

.service-ux .line { stroke-dasharray: 1611.457763671875; stroke-dashoffset: 1611.457763671875; -webkit-animation: dash 15s linear infinite; animation: dash 15s linear infinite; }

.service-ux .plane { transform-origin: 600px 207px; -webkit-animation: tilt 2s ease-in-out infinite; animation: tilt 2s ease-in-out infinite; }

.service-ux .arrow { transform-origin: 4px 246px; -webkit-animation: tilt 2s ease-in-out infinite; animation: tilt 2s ease-in-out infinite; }

.service-graphicdesign { transform-origin: 74px 135px; transform: rotate(3deg); -webkit-animation: tilt 4s ease-in-out infinite; animation: tilt 4s ease-in-out infinite; }

.service-graphicdesign .beam { transform-origin: 160px 210px; transform: scale(0.1); -webkit-animation: beam 2s ease-in-out infinite; animation: beam 2s ease-in-out infinite; }

@-webkit-keyframes beam { 0%, 30% { opacity: 0; }
  50%, 80% { opacity: 1; }
  100% { opacity: 0;
    transform: scale(1); } }

@keyframes beam { 0%, 30% { opacity: 0; }
  50%, 80% { opacity: 1; }
  100% { opacity: 0;
    transform: scale(1); } }

.service-copywriting .bottle { transform-origin: 177px 208px; transform: rotate(3deg); -webkit-animation: tilt 3s ease-in-out infinite; animation: tilt 3s ease-in-out infinite; }

.service-copywriting .pen { transform-origin: 297px 378px; transform: translate(-210px, -15px) rotate(3deg); -webkit-animation: penMove 4s linear infinite; animation: penMove 4s linear infinite; }

.service-copywriting .stroke { stroke-dasharray: 560.6937255859375; stroke-dashoffset: 560.6937255859375; -webkit-animation: dashCopy 4s linear infinite; animation: dashCopy 4s linear infinite; }

@-webkit-keyframes dashCopy { 50% { opacity: 1; }
  100% { stroke-dashoffset: 0;
    opacity: 0; } }

@keyframes dashCopy { 50% { opacity: 1; }
  100% { stroke-dashoffset: 0;
    opacity: 0; } }

@-webkit-keyframes penMove { 0%, 5% { transform: translate(-210px, -15px) rotate(3deg); }
  20% { transform: translate(-135px, -60px) rotate(5deg); }
  30% { transform: translate(-126px, -5px); }
  40% { transform: translate(-75px, -20px) rotate(0); }
  50% { transform: translate(0px, 0px); }
  100% { transform: translate(-206px, -15px) rotate(3deg); } }

@keyframes penMove { 0%, 5% { transform: translate(-210px, -15px) rotate(3deg); }
  20% { transform: translate(-135px, -60px) rotate(5deg); }
  30% { transform: translate(-126px, -5px); }
  40% { transform: translate(-75px, -20px) rotate(0); }
  50% { transform: translate(0px, 0px); }
  100% { transform: translate(-206px, -15px) rotate(3deg); } }

.service-onlinemanagement { -webkit-animation: pulse 3s ease-in-out infinite; animation: pulse 3s ease-in-out infinite; }

.service-onlinemanagement .heart-r { stroke-dasharray: 291.0621032714844; stroke-dashoffset: 0; -webkit-animation: heart-r 3s linear infinite; animation: heart-r 3s linear infinite; }

.service-onlinemanagement .heart-l { stroke-dasharray: 263.56817626953125; stroke-dashoffset: 0; -webkit-animation: heart-l 3s linear infinite; animation: heart-l 3s linear infinite; }

@-webkit-keyframes heart-r { 40% { stroke-dashoffset: 291.0621032714844; }
  70% { stroke-dashoffset: 0; } }

@keyframes heart-r { 40% { stroke-dashoffset: 291.0621032714844; }
  70% { stroke-dashoffset: 0; } }

@-webkit-keyframes heart-l { 40% { stroke-dashoffset: 263.56817626953125; }
  70% { stroke-dashoffset: 0; } }

@keyframes heart-l { 40% { stroke-dashoffset: 263.56817626953125; }
  70% { stroke-dashoffset: 0; } }

.sunglasses { -webkit-animation: sway 4s ease-in-out infinite; animation: sway 4s ease-in-out infinite; transform: rotate(-2deg) skewY(-2deg); }

@-webkit-keyframes sway { 50% { transform: rotate(2deg) skewY(2deg); } }

@keyframes sway { 50% { transform: rotate(2deg) skewY(2deg); } }

.letter-left { -webkit-animation: pulse 4s ease-in-out infinite; animation: pulse 4s ease-in-out infinite; }

.follow-right .follow-letter { transform-origin: center; -webkit-animation: followL 4s ease-in-out infinite; animation: followL 4s ease-in-out infinite; opacity: 0.3; transform: scale(0.9); }

.follow-right .follow-letter:nth-child(1) { -webkit-animation-delay: calc(1 / 10 * 1s); animation-delay: calc(1 / 10 * 1s); }

.follow-right .follow-letter:nth-child(2) { -webkit-animation-delay: calc(2 / 10 * 1s); animation-delay: calc(2 / 10 * 1s); }

.follow-right .follow-letter:nth-child(3) { -webkit-animation-delay: calc(3 / 10 * 1s); animation-delay: calc(3 / 10 * 1s); }

.follow-right .follow-letter:nth-child(4) { -webkit-animation-delay: calc(4 / 10 * 1s); animation-delay: calc(4 / 10 * 1s); }

.follow-right .follow-letter:nth-child(5) { -webkit-animation-delay: calc(5 / 10 * 1s); animation-delay: calc(5 / 10 * 1s); }

.follow-right .follow-letter:nth-child(6) { -webkit-animation-delay: calc(6 / 10 * 1s); animation-delay: calc(6 / 10 * 1s); }

.follow-right .follow-arrow { transform-origin: center; -webkit-animation: followA 4s ease-in-out infinite; animation: followA 4s ease-in-out infinite; }

@-webkit-keyframes followL { 40%, 80% { transform: scale(1);
    opacity: 1; } }

@keyframes followL { 40%, 80% { transform: scale(1);
    opacity: 1; } }

@-webkit-keyframes followA { 40%, 80% { transform: rotate(-30deg); } }

@keyframes followA { 40%, 80% { transform: rotate(-30deg); } }

.quote-svg { transform-origin: center; -webkit-animation: quoteP 3s ease-in-out infinite; animation: quoteP 3s ease-in-out infinite; }

.quote-svg:nth-child(1) { -webkit-animation-delay: calc(1 * -1s); animation-delay: calc(1 * -1s); }

.quote-svg:nth-child(2) { -webkit-animation-delay: calc(2 * -1s); animation-delay: calc(2 * -1s); }

.quote-svg:nth-child(3) { -webkit-animation-delay: calc(3 * -1s); animation-delay: calc(3 * -1s); }

.quote-svg:nth-child(4) { -webkit-animation-delay: calc(4 * -1s); animation-delay: calc(4 * -1s); }

@-webkit-keyframes quoteP { 50% { transform: rotate(10deg) scale(0.9); }
  0%, 100% { transform: rotate(0) scale(1); } }

@keyframes quoteP { 50% { transform: rotate(10deg) scale(0.9); }
  0%, 100% { transform: rotate(0) scale(1); } }

@-webkit-keyframes tilt { 50% { transform: rotate(-3deg); } }

@keyframes tilt { 50% { transform: rotate(-3deg); } }

@-webkit-keyframes dash { to { stroke-dashoffset: 0; } }

@keyframes dash { to { stroke-dashoffset: 0; } }

@-webkit-keyframes pulse { 40% { transform: scale(1.1); }
  70% { transform: scale(1); } }

@keyframes pulse { 40% { transform: scale(1.1); }
  70% { transform: scale(1); } }

@media (max-width: 991px) { .square-card-wrap .card--quote .card__content--text p { max-width: 35vw; }
  .square-card-wrap .card__content--svg .svg-small { width: 40px !important; height: 40px !important; }
  .square-card-wrap .card__content--svg h5 { font-size: 14px !important; }
  .square-card-wrap .card h4 { font-size: 20px; }
  .square-card-wrap .card p { font-size: 15px; }
  .square-card-wrap .card:first-of-type { width: calc((100% / var(--square-cards-divider))); }
  .square-card-wrap .card:first-of-type .card__content { background-size: contain; }
  .square-card-wrap .card:first-of-type .card__content:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
  .square-card-wrap .card:first-of-type .card__content__txt { width: 100%; position: relative; }
  .square-card-wrap .card__content--svg a { font-size: 15px; } }

@media (max-width: 670px) { .square-card-wrap .card:first-of-type { height: calc(
 (100vw - (var(--container-padding) * 2)) / var(--square-cards-divider) * 2); }
  .square-card-wrap .card:first-of-type .card__content__txt { height: 50%; top: 50%; position: absolute; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .square-card-wrap .card--quote .card__content--text p { max-width: 70vw; }
  .square-card-wrap .card h4, .square-card-wrap .card h3, .square-card-wrap .card h3 > span { font-size: 28px; max-width: 360px; }
  .square-card-wrap .card p { max-width: 300px; font-size: 16px; }
  .square-card-wrap .card .card__content svg { width: 180px; height: 180px; }
  .square-card-wrap .card.card--glasses svg { width: 250px !important; height: 170px !important; margin-bottom: 0; }
  .square-card-wrap .card.card--heart svg { width: 120px; height: 120px; margin-bottom: 20px; }
  .square-card-wrap .card.card--bulb svg { width: 120px; height: 160px; margin-bottom: 15px; }
  .square-card-wrap .card--hive-mind { text-align: center; }
  .square-card-wrap .card--hive-mind .card__content h3 { bottom: 0; left: auto; max-width: 100%; text-align: center; margin-left: auto; margin-right: auto; }
  .square-card-wrap .card--plane .card__content svg { width: 200px; margin-bottom: 10px; }
  .square-card-wrap .card--with-arrow h3 { margin-top: auto; }
  .square-card-wrap .card--with-arrow .card__content--svg .svg-bottom { position: relative; bottom: auto; margin-top: auto; margin-bottom: 24px; }
  .square-card-wrap .card.card--feedback svg { width: 50px; height: 50px; } }

@media (min-width: 441px) and (max-width: 670px) { .square-card-wrap .card.card--contact svg { width: 90px; height: 90px; } }

@media (max-width: 440px) { .square-card-wrap .card.card--feedback .card__content svg { width: 40px; height: 40px; }
  .square-card-wrap .card.card--contact svg { width: 70px; height: 70px; } }

@media (max-width: 360px) { .square-card-wrap .card--quote .card__content--text p { font-size: 4.4vw; }
  .square-card-wrap .card h4 { font-size: 6vw; }
  .square-card-wrap .card p { font-size: 4.75vw; padding-left: 15px; padding-right: 15px; } }

.sec-brands { margin-top: calc(var(--container-padding) * 1.5); }

.sec-brands-wrap { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

.sec-brands-wrap:before, .sec-brands-wrap:after { position: absolute; content: ''; background: #fff; }

.sec-brands-wrap:before { top: 0; left: 0; width: 100%; height: 1px; }

.sec-brands-wrap:after { top: 0; right: calc(100% - 2px); width: 2px; height: 100%; }

.sec-brands-wrap .item { width: calc(100% / var(--brands-items-divider)); height: calc(
 (100vw - var(--container-padding) * 10) / var(--brands-items-divider)); background: #00b3c4; border-right: 1px solid #fff; border-top: 1px solid #fff; }

.sec-brands-wrap .item:first-of-type { width: calc((100% / var(--brands-items-divider)) * 2); }

.sec-brands-wrap .item__img { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; }

.sec-brands-wrap .item__img p { padding: 10%; color: #fff; font-family: "Comfortaa", cursive; text-transform: uppercase; margin-bottom: 0; font-size: 34px; line-height: 1.25; margin-right: auto; max-width: 500px; }

.sec-brands-wrap .item__img svg, .sec-brands-wrap .item__img img { width: auto; max-width: 80%; height: auto; max-height: 70px; }

.sec-brands-wrap .item__img svg { width: 100%; max-width: 80%; }

@media (max-width: 1600px) { :root { --container-padding: 54px; }
  .sec-brands-wrap .item__img svg, .sec-brands-wrap .item__img img { width: 50%; } }

@media (max-width: 1485px) { .sec-brands-wrap .item__img p { font-size: 30px; } }

@media (max-width: 1366px) { :root { --container-padding: 44px; }
  .sec-brands-wrap .item__img p { font-size: 26px; } }

@media (max-width: 1199px) { :root { --brands-items-divider: 4; }
  .sec-brands .item__img p { font-size: 30px; } }

@media (max-width: 991px) { :root { --container-padding: 22px; }
  .sec-brands .item__img svg, .sec-brands .item__img img { width: 45%; }
  .sec-brands .item__img p { font-size: 26px; } }

@media (max-width: 767px) { :root { --container-padding: 15px; --brands-items-divider: 3; }
  .sec-brands .sec-brands-wrap .item__img svg, .sec-brands .sec-brands-wrap .item__img img { width: 40%; } }

@media (max-width: 500px) { :root { --brands-items-divider: 2; }
  .sec-brands-wrap .item { height: calc(
 (100vw - var(--container-padding) * 10) / var(--brands-items-divider) /
 1.6); }
  .sec-brands .sec-brands-wrap .item__img svg, .sec-brands .sec-brands-wrap .item__img img { max-width: 80%; max-height: 80%; }
  .sec-brands .sec-brands-wrap .item__img p { text-align: center; font-size: 28px; }
  .sec-brands-wrap:before, .sec-brands-wrap:after { display: none; }
  .sec-brands-wrap .item:nth-child(1) { border-top: 0; }
  .sec-brands-wrap .item:nth-child(1), .sec-brands-wrap .item:nth-child(3), .sec-brands-wrap .item:nth-child(5), .sec-brands-wrap .item:nth-child(7), .sec-brands-wrap .item:nth-child(9), .sec-brands-wrap .item:nth-child(11), .sec-brands-wrap .item:nth-child(13), .sec-brands-wrap .item:nth-child(15), .sec-brands-wrap .item:nth-child(17), .sec-brands-wrap .item:nth-child(19), .sec-brands-wrap .item:nth-child(21), .sec-brands-wrap .item:nth-child(23) { border-right: 0; } }

@media (max-width: 375px) { .sec-brands .sec-brands-wrap .item__img p { font-size: 24px; }
  .sec-brands .sec-brands-wrap .item__img svg, .sec-brands .sec-brands-wrap .item__img img { width: 60%; } }

@-webkit-keyframes up-down { 50% { transform: translateY(10px); } }

@keyframes up-down { 50% { transform: translateY(10px); } }

.hero { position: relative; text-align: center; color: #fff; min-height: calc(100vh - 70px); padding: 130px 15px 60px; background-repeat: no-repeat; background-position: center; background-size: cover; }

.hero img { margin-left: auto; margin-right: auto; margin-bottom: 40px; width: calc(100% - 60px); max-width: 500px; }

.hero img:last-of-type { display: none; }

.hero .container { position: relative; z-index: 1; }

.hero h5 { font-size: 22px; }

.hero h2, .hero h5, .hero p { margin: 0 auto; line-height: 1.4; }

.hero h2 { font-size: 110px; margin-bottom: 16px; line-height: 1.1; }

.hero__text { margin-left: auto; margin-right: auto; max-width: 600px; }

.hero__text p { font-size: 18px; }

.hero__text i { color: #fcbf1d; font-style: normal; }

.hero__content { margin-top: 80px; }

.hero__content h4 { position: relative; color: #333; margin-bottom: 20px; }

.hero__content h4:before { position: absolute; content: '*'; top: -10px; left: 50%; transform: translate(-50%, -50%); color: #fcbf1d; font-size: 48px; }

.hero__content p { font-size: 18px; margin-bottom: 100px; }

.hero__icon svg { width: 55px; height: 55px; -webkit-animation: up-down 2.3s ease-in-out infinite; animation: up-down 2.3s ease-in-out infinite; }

.hero__icon p { text-transform: uppercase; font-family: "Comfortaa", cursive; font-size: 24px; margin-top: 20px; margin-bottom: 0; font-weight: 700; }

.hero__icon a { display: inline-block; color: #fff; transition: all 0.2s ease-in-out; }

.hero__icon a:hover { opacity: 0.8; }

.hero--homepage img { max-width: 800px; }

.hero--homepage span, .hero--homepage em { color: #fcbf1d; font-style: normal; }

.hero--homepage h2 { max-width: 1200px; }

.hero--homepage h5 { max-width: 790px; font-weight: 400; }

.hero--homepage p { max-width: 750px; }

.hero--inner h2 { max-width: 500px; }

.hero--inner h4 { margin-bottom: 140px; }

.hero--projects { background-size: 70%; background-color: #1e1e1e; background-position: right -100px bottom; }

.hero--projects h2 { max-width: 900px; }

.hero--projects h4 { margin-bottom: 25px; }

.hero--projects .hero__icon { margin-top: 130px; }

.hero--inner h5, .hero--projects h5 { max-width: 470px; }

body.page-template-t-portfolio .hero__text p:last-of-type { max-width: 250px; font-size: 22px; margin-top: 60px; }

body.page-template-t-portfolio .hero__text p:last-of-type a { color: #00b3c4; }

@media (max-width: 1600px) { .hero h2 { font-size: 90px; } }

@media (min-width: 1200px) and (max-width: 1620px) { .hero--projects { background-size: contain; } }

@media (max-width: 1199px) { .hero { padding: 100px 15px 60px; }
  .hero--inner .hero__content { margin-top: 270px; }
  .hero--projects { background-size: 120%; background-position: right -22vw bottom; }
  .hero--projects .hero__content { margin-top: 155px; }
  .hero h2 { font-size: 70px; } }

@media (max-width: 950px) { .hero--projects { background-size: 150%; }
  .hero--projects .hero__content { margin-top: 80px; } }

@media (max-width: 767px) { .hero--projects { background-size: cover; background-position: right -66vw bottom; }
  .hero p, .hero h5 { font-size: 16px; font-weight: 700; }
  .hero img:first-of-type { display: none; }
  .hero img:last-of-type { display: block; } }

@media (max-width: 500px) { .hero { padding: 150px 15px 60px; }
  .hero h2 { font-size: 50px; }
  .hero--inner h5, .hero--projects h5 { max-width: 320px; }
  .hero--homepage h5 { max-width: 230px; margin-bottom: 145px; }
  .hero--inner, .hero--projects { min-height: 300px; height: auto; }
  .hero--inner .hero__content, .hero--projects .hero__content { margin-top: 50px; }
  .hero--inner .hero__icon, .hero--projects .hero__icon { margin-top: 0; }
  .hero--inner .hero__icon svg, .hero--projects .hero__icon svg { width: 44px; height: 44px; } }

@media (max-width: 425px) { .hero { padding-top: 90px; }
  .hero--homepage h4 { font-size: 22px; }
  .hero--homepage h4:before { top: -15px; }
  .hero--inner h5, .hero--projects h5 { margin-top: 30px; } }

.c-orange { color: #fcbf1d !important; }

.c-lightblue { color: #00b3c4 !important; }

.c-white { color: #fff !important; }

.bg-white { background-color: #fff !important; }

.c-grey { color: #333 !important; }

.c-silver { color: #e5e1df !important; }

.bg-orange { background: #fcbf1d; }

.bg-lightblue { background: #00b3c4; }

.bg-silver { background: #e5e1df; }

.bg-grey { background: #333333; }

.bg-grey--d { background: #333333; }

.c-grey--d { color: #333333; }

.bg-transparent { background: transparent; }

.bold { font-weight: bold; }

.mt0 { margin-top: 0 !important; }

.mt40 { margin-top: 40px !important; }

.underline { text-decoration: underline; }

.footer { text-align: center; padding: 55px 0 50px; }

.footer__nav ul { display: flex; align-items: center; justify-content: center; margin-bottom: 30px; }

.footer__nav li { position: relative; padding: 0 25px; }

.footer__nav li:not(:last-of-type):after { position: absolute; content: '|'; left: calc(100% - 2px); top: -1px; color: #fff; font-size: 20px; }

.footer__nav li li, .footer__nav li a { font-family: "Comfortaa", cursive; color: #fff; font-size: 18px; text-transform: uppercase; transition: all 0.2s ease-in-out; }

.footer__nav li li:hover, .footer__nav li a:hover { color: #fcbf1d; }

.footer__nav li.current-menu-item a { color: #fcbf1d; }

.footer h4 { margin-bottom: 15px; color: #00b3c4; font-weight: bold; font-size: 24px; }

.footer p { margin-bottom: 4px; font-size: 20px; }

.footer a { font-size: 20px; }

.footer a:hover { color: #fff; }

.footer p, .footer a { color: #707070; }

@media (max-width: 991px) { .footer__nav li:not(:last-of-type):after { top: 0; } }

@media (max-width: 767px) { .footer__nav li { padding: 0 25px; }
  .footer__nav li a { font-size: 24px; }
  .footer__nav li:not(:last-of-type):after { top: -2px; } }

.square-card--inner { display: none; }

@media (max-width: 670px) { .footer { display: none; }
  .square-card--inner { display: block; }
  .square-card--inner .card { height: calc(
 (100vw - (var(--container-padding) * 2)) / var(--square-cards-divider) *
 1) !important; }
  .square-card--inner .card__content { flex-direction: column !important; }
  .square-card--inner .card__content:before { display: none !important; } }

@media (max-width: 630px) { .footer__nav li { padding: 0 15px; }
  .footer__nav li a { font-size: 20px; } }

@media (max-width: 490px) { .footer__nav li { padding: 0 12px; }
  .footer__nav li a { font-size: 19px; }
  .footer__nav li:not(:last-of-type):after { top: -1px; font-size: 19px; } }

@media (max-width: 455px) { .footer__nav li { padding: 0 15px; }
  .footer__nav li a { font-size: 16px; }
  .footer__nav li:not(:last-of-type):after { top: -2px; font-size: 17px; } }

@media (max-width: 415px) { .footer__nav li { padding: 0 10px; }
  .footer__nav li a { font-size: 16px; }
  .footer__nav li:not(:last-of-type):after { top: -2px; font-size: 17px; } }

@media (max-width: 385px) { .footer__nav li { padding: 0 10px; }
  .footer__nav li a { font-size: 14px; }
  .footer p, .footer a { font-size: 16px; } }

@media (max-width: 350px) { .footer__nav li { padding: 0 8px; }
  .footer__nav li a { font-size: 12px; }
  .footer__nav li:not(:last-of-type):after { top: 0; font-size: 15px; } }

.soc { display: flex; align-items: center; justify-content: center; margin-top: 28px; }

.soc__icon { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: #fff; border-radius: 50%; }

.soc__icon:not(:last-of-type) { margin-right: 10px; }

.soc__icon:hover svg { transform: scale(1.1); }

.soc svg { width: 30px; height: 30px; transition: all 0.2s ease-in-out; }

.soc svg * { fill: #333; }

@media (max-width: 425px) { .soc { margin-top: 10px; }
  .soc__icon { width: 50px; height: 50px; }
  .soc svg { width: 25px; height: 25px; } }

.header > .navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }

.navbar-toggler { background: transparent; }

.navbar-brand { display: inline-block; line-height: inherit; white-space: nowrap; }

.navbar-nav { display: flex; padding-left: 0; margin-bottom: 0; list-style: none; }

.navbar-nav .nav-link { padding-right: 0; padding-left: 0; text-decoration: none; }

.navbar-nav .dropdown-menu { position: static; float: none; }

.navbar-collapse { align-items: center; }

.navbar-nav { flex-direction: column; }

body { padding-top: 68px; }

.header { position: fixed; left: 0; top: 0; width: 100%; z-index: 3; background: #fff; padding: 10px 0; box-shadow: 0 0 5px rgba(51, 51, 51, 0); transition: all 0.2s ease-in-out; }

.header.jsOnScroll { box-shadow: 0 0 15px rgba(51, 51, 51, 0.3); }

.header .navbar-brand { line-height: 1; padding: 0; width: 150px; }

.header .navbar { padding: 0; }

.header > .navbar { background: #fff; }

.header .menu-item.current-menu-item a { color: #fcbf1d; }

.header { min-height: 50px; padding: 17px 26px 17px 31px; }

.header .navbar { position: relative; }

.header .navbar-brand { position: relative; top: 2px; left: 6px; z-index: 2; }

.header .navbar-brand svg { width: 100%; }

.header .navbar-toggler { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 28.5px; height: 16px; padding: 0; border-radius: 0 !important; border: none; z-index: 2; }

.header .navbar-toggler:focus { outline: none !important; }

.header .navbar-toggler:after { position: absolute; content: ''; top: -17px; left: 0; width: 50px; height: 50px; }

.header .navbar-toggler:hover { cursor: pointer; }

.header .navbar-toggler .span-icon { display: block; width: inherit; height: 2px; border-radius: 0; background-color: #333; transition: all 0.2s ease-in-out; }

.header .navbar-toggler .span-icon:nth-of-type(1) { width: 60%; transform-origin: left; }

.header .navbar-toggler .span-icon:nth-of-type(2) { width: 80%; transform-origin: center; }

.header .navbar-toggler .span-icon:nth-of-type(3) { transform-origin: left; }

.header .navbar-toggler.toggle-on .span-icon:nth-of-type(1) { width: 100%; transform: rotate(45deg) translateY(-5px); }

.header .navbar-toggler.toggle-on .span-icon:nth-of-type(2) { transform: scaleX(0); }

.header .navbar-toggler.toggle-on .span-icon:nth-of-type(3) { width: 100%; transform: rotate(-45deg) translateY(5px); }

.header .navbar-collapse { position: absolute; top: 52px; right: -26px; width: 100vw; overflow-y: auto; max-height: 100%; background-color: #fff; transition: all 0.2s ease-in-out; min-height: calc(100vh - 68.81px); }

.header .navbar-collapse .navbar { padding: 120px 0 60px; min-height: calc(100vh - 68.81px); }

.header .navbar-collapse:not(.show) { display: block; transform: scale(0.8); opacity: 0; pointer-events: none; }

.header .navbar-collapse.navMenu-on { transform: scale(1); pointer-events: all; opacity: 1; }

.header .dropdown-menu { display: block; position: absolute; left: 50%; transform: translateX(-150%); opacity: 0; width: 300px; pointer-events: none; transition: all 0.2s ease-in-out; }

.header .dropdown-menu.show { transform: translateX(-50%); opacity: 1; pointer-events: all; }

.header .dropdown-menu > div { width: calc(100% - 80px); }

.header .dropdown-menu .close-dropdown { right: 23px; }

.backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; z-index: 2; }

.backdrop.js-backdropOn { opacity: 1; pointer-events: all; }

body.js-menu-open { overflow: hidden; }

.navbar { background: #333; text-align: center; color: #fff; }

.navbar ul { list-style-type: none; padding-left: 0; }

.navbar ul li { position: relative; padding: 26px 0; max-width: 460px; margin: 0 auto; }

.navbar ul li:after { position: absolute; content: ''; left: 0; bottom: 0; height: 2px; background: #999; width: 100%; border-radius: 100%; }

.navbar ul li a { display: block; font-family: "Comfortaa", cursive; font-size: 25px; text-transform: uppercase; }

.navbar a { color: #fff; font-size: 20px; }

.navbar a:hover { color: #fcbf1d; }

.navbar h2 { text-transform: uppercase; margin-top: 220px; font-size: 32px; margin-bottom: 30px; font-weight: bold; }

.navbar p { margin-bottom: 4px; font-size: 20px; }

@media (max-width: 425px) { .navbar { padding-top: 70px; }
  .navbar ul li a, .navbar h2 { font-size: 24px; }
  .navbar h2 { margin: 150px 0 20px; } }

body.home .square-card .container { padding-top: calc(1.5 * var(--container-padding)); padding-bottom: var(--container-padding); }

body.home .square-card em { color: #fcbf1d; font-style: normal; }

body.page-template-t-team .team-wrap .container { padding-top: calc(1.5 * var(--container-padding)); padding-bottom: var(--container-padding); }

.portfolio-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 0; grid-auto-columns: 0; overflow: hidden; max-width: calc(100vw - (var(--container-padding) * 2)); margin: var(--container-padding) auto; }

.portfolio-grid .portfolio-item { display: flex; flex-direction: column; min-height: calc((100vw / 3) - 60px); }

.portfolio-grid .portfolio-item:nth-of-type(1) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: a; }

.portfolio-grid .portfolio-item:nth-of-type(2) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: b; }

.portfolio-grid .portfolio-item:nth-of-type(3) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: c; }

.portfolio-grid .portfolio-item:nth-of-type(4) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: d; }

.portfolio-grid .portfolio-item:nth-of-type(5) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: e; }

.portfolio-grid .portfolio-item:nth-of-type(6) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: f; }

.portfolio-grid .portfolio-item:nth-of-type(7) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: g; }

.portfolio-grid .portfolio-item:nth-of-type(8) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: h; }

.portfolio-grid .portfolio-item:nth-of-type(9) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: i; }

.portfolio-grid .portfolio-item:nth-of-type(10) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: j; }

.portfolio-grid .portfolio-item:nth-of-type(11) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: k; }

.portfolio-grid .portfolio-item:nth-of-type(12) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: l; }

.portfolio-grid .portfolio-item:nth-of-type(13) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: m; }

.portfolio-grid .portfolio-item:nth-of-type(14) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: n; }

.portfolio-grid .portfolio-item:nth-of-type(15) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: o; }

.portfolio-grid .portfolio-item:nth-of-type(16) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: p; }

.portfolio-grid .portfolio-item:nth-of-type(17) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: q; }

.portfolio-grid .portfolio-item:nth-of-type(18) { background: #fff; box-shadow: inset 0 0 2px red; grid-area: r; }

.portfolio-grid .portfolio-item a { transition: all 0.2s ease-in-out; }

.portfolio-grid .portfolio-item a:hover { opacity: 0.88; }

.portfolio-grid-1 { grid-template-rows: 1fr; grid-template-areas: 'a a .'; }

.portfolio-grid-2 { grid-template-rows: repeat(2, 1fr); grid-template-areas: 'a a b'
 '. . b'; }

.portfolio-grid-3 { grid-template-rows: repeat(2, 1fr); grid-template-areas: 'a a b'
 'c c b'; }

.portfolio-grid-4 { grid-template-rows: repeat(4, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd . .'
 'd . .'; }

.portfolio-grid-5 { grid-template-rows: repeat(4, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd . .'; }

.portfolio-grid-6 { grid-template-rows: repeat(4, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f f'; }

.portfolio-grid-7 { grid-template-rows: repeat(5, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f f'
 'g g .'; }

.portfolio-grid-8 { grid-template-rows: repeat(6, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f f'
 'g g h'
 '. . h'; }

.portfolio-grid-9 { grid-template-rows: repeat(6, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f f'
 'g g h'
 'i i h'; }

.portfolio-grid-10 { grid-template-rows: repeat(8, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f f'
 'g g h'
 'i i h'
 'j . .'
 'j . .'; }

.portfolio-grid-11 { grid-template-rows: repeat(8, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f f'
 'g g h'
 'i i h'
 'j k k'
 'j . .'; }

.portfolio-grid-12 { grid-template-rows: repeat(8, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f f'
 'g g h'
 'i i h'
 'j k k'
 'j l l'; }

.portfolio-grid-13 { grid-template-rows: repeat(10, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f f'
 'g g h'
 'i i h'
 'j k k'
 'j l l'
 '. . m'
 '. . m'; }

.portfolio-grid-14 { grid-template-rows: repeat(10, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f f'
 'g g h'
 'i i h'
 'j k k'
 'j l l'
 'n n m'
 '. . m'; }

.portfolio-grid-15 { grid-template-rows: repeat(10, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f f'
 'g g h'
 'i i h'
 'j k k'
 'j l l'
 'n n m'
 'o o m'; }

.portfolio-grid-16 { grid-template-rows: repeat(12, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f f'
 'g g h'
 'i i h'
 'j k k'
 'j l l'
 'n n m'
 'o o m'
 'p . .'
 'p . .'; }

.portfolio-grid-17 { grid-template-rows: repeat(12, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f f'
 'g g h'
 'i i h'
 'j k k'
 'j l l'
 'n n m'
 'o o m'
 'p q q'
 'p . .'; }

.portfolio-grid-18 { grid-template-rows: repeat(12, 1fr); grid-template-areas: 'a a b'
 'c c b'
 'd e e'
 'd f f'
 'g g h'
 'i i h'
 'j k k'
 'j l l'
 'n n m'
 'o o m'
 'p q q'
 'p r r'; }

@media (max-width: 767px) { .portfolio-grid { display: flex; flex-direction: column; }
  .portfolio-grid .portfolio-item { width: 100%; } }

.portfolio-card__content h4 { font-size: 1.66vw; }

.portfolio-card__content h5 { font-size: 1.35vw; }

.portfolio-card__content p { font-size: 1.145vw; }

.portfolio-card__img { background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; height: 50%; }

.portfolio-card__content { position: relative; width: 100%; height: 50%; padding: 2.083vw 3.9vw; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.portfolio-card__content h4 { line-height: 1.4; }

.portfolio-card__content h5 { margin: 20px 0 8px; text-transform: uppercase; font-weight: bold; }

.portfolio-card__content p { line-height: 1.4; }

.portfolio-card__content .btn { margin-top: 1.5625vw; font-size: 1.0416vw; }

.portfolio-card__content .bg-transparent { font-size: 1.0416vw; text-transform: uppercase; margin-top: 1.5625vw; }

.portfolio-item:nth-of-type(1), .portfolio-item:nth-of-type(3), .portfolio-item:nth-of-type(5), .portfolio-item:nth-of-type(6) { height: 100%; }

.portfolio-item:nth-of-type(1) .portfolio-card__content, .portfolio-item:nth-of-type(1) .portfolio-card__img, .portfolio-item:nth-of-type(3) .portfolio-card__content, .portfolio-item:nth-of-type(3) .portfolio-card__img, .portfolio-item:nth-of-type(5) .portfolio-card__content, .portfolio-item:nth-of-type(5) .portfolio-card__img, .portfolio-item:nth-of-type(6) .portfolio-card__content, .portfolio-item:nth-of-type(6) .portfolio-card__img { width: 50%; height: 100%; }

.portfolio-item:nth-of-type(1), .portfolio-item:nth-of-type(6) { flex-direction: row; }

.portfolio-item:nth-of-type(3), .portfolio-item:nth-of-type(5) { flex-direction: row-reverse; }

.portfolio-card-hor { display: flex; height: 100%; }

.portfolio-card-hor .portfolio-card__content, .portfolio-card-hor .portfolio-card__img { width: 50%; height: 100%; }

@media (max-width: 767px) { .portfolio-item:nth-of-type(1), .portfolio-item:nth-of-type(3), .portfolio-item:nth-of-type(5) { flex-direction: row !important; }
  .portfolio-item:nth-of-type(2), .portfolio-item:nth-of-type(4), .portfolio-item:nth-of-type(6) { flex-direction: row-reverse !important; }
  .portfolio-card__content h4 { font-size: 3vw; }
  .portfolio-card__content h5 { font-size: 2.4vw; }
  .portfolio-card__content p { font-size: 14px; }
  .portfolio-card__content .btn, .portfolio-card__content .bg-transparent { font-size: 12px; }
  .portfolio-card-hor { width: 100%; }
  .portfolio-grid .portfolio-item { display: flex; flex-direction: row; height: calc((100vw - var(--container-padding)) / 2); }
  .portfolio-card__img, .portfolio-card__content { max-width: calc((100vw - var(--container-padding)) / 2) !important; height: calc((100vw - var(--container-padding)) / 2) !important; } }

@media (max-width: 600px) { .portfolio-grid .portfolio-item { flex-direction: column !important; height: calc((100vw - var(--container-padding)) * 2); }
  .portfolio-grid .portfolio-item:not(:last-of-type) { margin-bottom: 10px; }
  .portfolio-card__img, .portfolio-card__content { max-width: 100% !important; width: 100% !important; }
  .portfolio-card__img { height: calc(100vw - var(--container-padding)) !important; }
  .portfolio-card__content { padding: 30px; height: calc(100vw - var(--container-padding)) !important; }
  .portfolio-card__content h4 { font-size: 20px; }
  .portfolio-card__content h5 { font-size: 17px; margin-bottom: 10px; }
  .portfolio-card__content p { font-size: 14px; }
  .portfolio-card__content .btn, .portfolio-card__content .bg-transparent { margin-top: 20px; font-size: 14px; } }

.btn { text-transform: uppercase; font-size: 20px; font-weight: bold; color: #333; padding: 10px 20px; max-width: 250px; transition: all 0.2s ease-in-out; }

h1, h2, h3, h4, h6 { text-transform: uppercase; font-weight: bold; }

h3 { font-size: 36px; }

h4 { font-size: 32px; line-height: 1.2; }

h5 { font-size: 26px; }

@media (max-width: 991px) { h4 { font-size: 30px; } }

@media (max-width: 767px) { h4 { font-size: 28px; } }

@media (max-width: 500px) { h5 { font-size: 24px; } }

@media (max-width: 475px) { h4 { font-size: 25px; } }

@media (max-width: 450px) { h5 { font-size: 22px; } }