@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap");
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: rgba(0, 0, 0, 0)
}
article, aside, figure, footer, header, hgroup, nav, section {
display: block
} input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px #383838 inset !important;
} input:-webkit-autofill {
-webkit-text-fill-color: white !important;
}
a:link {
font-weight: normal;
text-decoration: none;
color: #000
}
a:visited {
color: #000
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix {
*zoom: 1
}
.clearfix:before, .clearfix:after {
display: table;
content: ""
}
.clearfix:after {
clear: both
}
@font-face {
font-family: "swiper-icons";
src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
font-weight: 400;
font-style: normal
}
:root {
--swiper-theme-color: #007aff
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1
}
.swiper-container-vertical > .swiper-wrapper {
flex-direction: column
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
transform: translate3d(0px, 0, 0)
}
.swiper-container-multirow > .swiper-wrapper {
flex-wrap: wrap
}
.swiper-container-multirow-column > .swiper-wrapper {
flex-wrap: wrap;
flex-direction: column
}
.swiper-container-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform
}
.swiper-slide-invisible-blank {
visibility: hidden
}
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
height: auto
}
.swiper-container-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height
}
.swiper-container-3d {
perspective: 1200px
}
.swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow {
transform-style: preserve-3d
}
.swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}
.swiper-container-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none
}
.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none
}
.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start
}
.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
scroll-snap-type: x mandatory
}
.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
scroll-snap-type: y mandatory
}
:root {
--swiper-navigation-size: 44px
}
.swiper-button-prev, .swiper-button-next {
position: absolute;
top: 50%;
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color))
}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
opacity: .35;
cursor: auto;
pointer-events: none
}
.swiper-button-prev:after, .swiper-button-next:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
text-transform: none;
font-variant: initial;
line-height: 1
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
left: 10px;
right: auto
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
content: "prev"
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
right: 10px;
left: auto
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
content: "next"
}
.swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white {
--swiper-navigation-color: #ffffff
}
.swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black {
--swiper-navigation-color: #000000
}
.swiper-button-lock {
display: none
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: 300ms opacity;
transform: translate3d(0, 0, 0);
z-index: 10
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 10px;
left: 0;
width: 100%
}
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(0.33);
position: relative
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(0.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(0.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(0.33)
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: .2
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer
}
.swiper-pagination-bullet-active {
opacity: 1;
background: var(--swiper-pagination-color, var(--swiper-theme-color))
}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
transform: translate3d(0px, -50%, 0)
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 6px 0;
display: block
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: 200ms transform, 200ms top
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms left
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right
}
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, .25);
position: absolute
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top
}
.swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0
}
.swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
top: 0
}
.swiper-pagination-white {
--swiper-pagination-color: #ffffff
}
.swiper-pagination-black {
--swiper-pagination-color: #000000
}
.swiper-pagination-lock {
display: none
}
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, .1)
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, .5);
border-radius: 10px;
left: 0;
top: 0
}
.swiper-scrollbar-cursor-drag {
cursor: move
}
.swiper-scrollbar-lock {
display: none
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center
}
.swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas {
max-width: 100%;
max-height: 100%;
object-fit: contain
}
.swiper-slide-zoomed {
cursor: move
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
animation: swiper-preloader-spin 1s infinite linear;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: rgba(0, 0, 0, 0)
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg)
}
}
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
transition-timing-function: ease-out
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
transition-property: opacity
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube {
overflow: visible
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
transform-origin: 100% 0
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible
}
.swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0
}
.swiper-container-flip {
overflow: visible
}
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
@font-face {
font-family: "KievitSerif";
src: url(//www.wrksagency.com/wp-content/themes/mashvp/assets/fonts/KievitSerif-Light.ttf) format("ttf");
src: url(//www.wrksagency.com/wp-content/themes/mashvp/assets/fonts/KievitSerif-Light.woff) format("woff");
font-weight: 400;
font-style: normal
}
@font-face {
font-family: "KievitSerif";
src: url(//www.wrksagency.com/wp-content/themes/mashvp/assets/fonts/KievitSerif-LightItalic.ttf) format("ttf");
src: url(//www.wrksagency.com/wp-content/themes/mashvp/assets/fonts/KievitSerif-LightItalic.woff) format("woff");
font-weight: 400;
font-style: italic
}
html, body {
height: 100%;
font-family: "IBM Plex Sans", sans-serif;
font-size: 14px;
font-weight: 500
}
h1, h2, h3, h4 { font-weight: 350;
font-family: "IBM Plex Sans", sans-serif;
text-transform: uppercase
}
.fs1 {
font-size: 120px
}
.fs2 {
font-size: 50px
}
.fs3 {
font-size: 30px
}
.fs4 {
font-size: 20px
}
.fsn {
font-size: 14px;
line-height: 2
}
.fss {
font-size: 10px
}
@media screen and (max-width: 900px) {
.fs1 {
font-size: 42px
}
.fs2 {
font-size: 21px
}
.fs3 {
font-size: 19px
}
}
.ffh {
font-family: "PPMonument"
}
.ffp {
font-family: "Be Vietnam"
}
a {
text-decoration: none
}
.gridCtn {
margin: 0 auto;
max-width: 1600px;
display: grid;
grid-template-columns:repeat(12, minmax(0, 1fr));
grid-gap: 40px
}
@media screen and (max-width: 1640px) {
.gridCtn {
max-width: 92%
}
}
@media screen and (max-width: 900px) {
.gridCtn {
grid-column-gap: 20px
}
}
.bgImg {
background-size: cover;
background-position: center
}
img {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none
}
.media {
position: relative;
display: block
}
.media img, .media video {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0
}
form label {
font-size: 10px;
margin-bottom: 5px;
display: block;
font-family: "neue-haas-grotesk-display";
margin-left: 26px
}
.selectCtn {
position: relative;
width: fit-content;
display: flex;
width: 100%;
border-radius: 5px;
background-color: #fbfbfb;
text-align: center
}
.selectCtn:after {
content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='30' height='30' xml:space='preserve'><circle cx='15' cy='15' r='15' fill='rgb(220, 220, 220)'/><polyline points='10 13 15 19 20 13' fill='rgb(27, 82, 66)' stroke-width='1' /></svg>");
width: 30px;
height: 30px;
position: absolute;
left: 8px;
top: 0;
bottom: 0;
margin: auto;
pointer-events: none
}
.selectCtn p {
font-size: 12px;
letter-spacing: 2px
}
.selectCtn select {
width: 100%;
-webkit-appearance: none;
appearance: none;
text-transform: uppercase;
font-family: "pragmatica-slabserif";
border: none;
font-size: 16px;
padding: 0;
padding: 14px 26px;
padding-left: 50px;
color: #083e75;
cursor: pointer
}
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea, input[type=submit] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
padding: 14px 26px;
outline: none;
color: #000;
font-weight: 100;
font-family: "pragmatica-slabserif";
background-color: #fbfbfb;
color: #083e75;
border: 1px solid #fbfbfb;
resize: none;
font-size: 16px;
border-radius: 5px
}
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, input[type=password]:focus, input[type=date]:focus, input[type=number]:focus, select:focus, textarea:focus, input[type=submit]:focus {
border: 1px solid #083e75
}
input[type=radio], input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
width: 10px;
height: 10px;
border-radius: 10px;
background-color: #f1f1f1;
outline: none;
vertical-align: middle !important;
margin-right: 10px;
margin-top: 0 !important;
margin-bottom: 0 !important
}
input[type=radio]:checked, input[type=checkbox]:checked {
background-color: #083e75
}
.btn {
display: inline;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid #04203d;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px
}
.btn .bg {
z-index: 1;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #04203d
}
.btn .arrow {
z-index: 2;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%
}
.btn svg:nth-of-type(1) polygon {
fill: #04203d
}
.btn svg:nth-of-type(2) polygon {
fill: #fff
}
.btn .bg {
clip-path: polygon(0 0, 0 0, -25% 100%, -25% 100%);
transition: clip-path 0s
}
.btn svg:nth-of-type(2) {
clip-path: polygon(0 0, 0 0, -25% 100%, -25% 100%);
transition: clip-path 0s
}
.btn.in .bg {
clip-path: polygon(0 0, 125% 0, 100% 100%, -25% 100%);
transition: clip-path .6s
}
.btn.in svg:nth-of-type(2) {
clip-path: polygon(0 0, 125% 0, 100% 100%, -25% 100%);
transition: clip-path .6s
}
.btn.out .bg {
clip-path: polygon(125% 0, 125% 0, 100% 100%, 100% 100%);
transition: clip-path .6s
}
.btn.out svg:nth-of-type(2) {
clip-path: polygon(125% 0, 125% 0, 100% 100%, 100% 100%);
transition: clip-path .6s
}
.btn.grey {
background-color: #f1f1f1;
border: none
}
.btn.white {
border: 1px solid #fff
}
.btn.white .bg {
background-color: #fff
}
.btn.white svg:nth-of-type(1) polygon {
fill: #fff
}
.btn.white svg:nth-of-type(2) polygon {
fill: #04203d
}
.wysiwyg {
color: #083e75
}
.wysiwyg.center {
text-align: center
}
.wysiwyg h2 {
color: #083e75;
margin-bottom: 30px;
font-size: 20px
}
.wysiwyg h3 {
color: #083e75;
margin-bottom: 20px;
font-size: 20px
}
.wysiwyg p {
color: #083e75;
margin-bottom: 20px;
font-size: 23px
}
.wysiwyg a {
font-size: inherit;
color: #083e75;
text-decoration: underline
}
.wysiwyg li {
list-style: url("data:image/svg+xml;charset=UTF-8,<svg  xmlns='http://www.w3.org/2000/svg' version='1.1' width='21' height='12'><polygon fill='rgb(67, 161, 134)' points='15.48 11.13 20.56 6.04 15.48 0.96 15.48 4.76 0.76 4.76 0.76 7.33 15.48 7.33 15.48 11.13'/></svg>")
}
.wysiwyg ul, .wysiwyg ol {
padding-left: 40px
}
@media screen and (max-width: 900px) {
.wysiwyg h2 {
font-size: 16px
}
.wysiwyg h3 {
font-size: 19px
}
.wysiwyg p {
font-size: 19px
}
}
.form form {
display: grid;
grid-template-columns:repeat(8, minmax(0, 1fr));
grid-gap: 40px;
grid-row-gap: 20px
}
.form form .wpcf7-form-control-wrap {
width: 100%
}
.form form .c1 {
grid-column: span 4;
align-self: flex-end
}
.form form .c2 {
grid-column: span 8
}
.form form .checkCtn {
grid-column: span 5
}
.form form .checkCtn .wpcf7-list-item {
margin: 0
}
.form form .checkCtn label {
display: flex
}
.form form .checkCtn label input {
flex: 0 0 10px
}
.form form .submitCtn {
grid-column: span 3
}
.form form .wpcf7-not-valid-tip {
font-size: 10px;
margin: 0
}
.form form .wpcf7-response-output {
grid-column: 1/9;
border: none;
color: #083e75;
font-size: 12px;
margin: 0
}
@media screen and (max-width: 900px) {
.form form .c1 {
grid-column: span 8
}
.form form .checkCtn, .form form .submitCtn {
grid-column: span 8
}
.form form .submitCtn {
justify-self: right
}
}
#mainHeader .gridWrap {
transition: height 1s ease;
grid-gap: 0;
position: relative
}
#mainHeader .gridWrap .logo {
display: none;
grid-column: 1/13
}
#mainHeader .gridWrap .logo svg {
height: 100%;
width: 100%
}
#mainHeader .gridWrap .logo.active {
display: block
}
#mainHeader .gridWrap .navCtn {
opacity: 0;
margin-top: 30px;
grid-column: 1/13;
transition: opacity 1s ease-in-out;
transition-delay: 1s
}
#mainHeader .gridWrap .navCtn.active {
opacity: 1
}
#mainHeader .gridWrap .navCtn .menuCustom {
display: flex;
justify-content: space-between;
font-size: 18px;
font-weight: 500;
}
#mainHeader .gridWrap .navCtn .menuCustom li {
text-transform: uppercase;
list-style-type: none
}
#mainHeader .gridWrap .navCtn .menuCustom li.current_page {
text-decoration: underline;
text-underline-offset: 5px;
}
#mainHeader .gridWrap .navCtn .menuCustom li a {
color: #1d1d1b
}
#mainHeader .gridWrap .navCtn .menuCustom li span {
font-weight: 500;
}
@media screen and (max-width: 900px) {
#mainHeader {
display: none
}
}
.menuMobile {
z-index: 10;
position: sticky;
top: 0;
display: none;
background: #fff;
padding: 30px
}
.menuMobile.active {
display: block
}
.menuMobile .gridMobile .navCtn {
grid-column: 1/13
}
.menuMobile .gridMobile .navCtn .menuCustom {
display: flex;
justify-content: space-between;
font-size: 10px
}
.menuMobile .gridMobile .navCtn .menuCustom li {
text-transform: uppercase;
list-style-type: none
}
.menuMobile .gridMobile .navCtn .menuCustom li.current_page {
opacity: .4
}
.menuMobile .gridMobile .navCtn .menuCustom li a {
color: #1d1d1b
}
#mobileHeader {
display: none
}
@media screen and (max-width: 900px) {
#mobileHeader {
display: block
}
}
#mobileHeader .gridWrap {
grid-gap: 0
}
#mobileHeader .gridWrap .logo {
grid-column: 1/13
}
#mobileHeader .gridWrap .logo svg {
width: 100%
}
:root {
--duration: 96s
}
#mainFooter { }
#mainFooter .slider__1 .sliderWrap {
max-width: 100%
}
#mainFooter .slider__1 .sliderWrap .content {
position: relative;
display: flex;
gap: 30px;
color: #fff;
grid-column: 1/13;
font-size: 80px;
text-transform: uppercase;
background: #e9573b;
overflow: hidden;
height: 200px;
transition: all 0.5s ease-in-out;
}
#mainFooter .slider__1 .sliderWrap .content:hover {
background: white;
border-top: 10px solid #e9573b;
border-bottom: 10px solid #e9573b;
}
#mainFooter .slider__1 .sliderWrap .content:hover .marquee .marquee__content li a {
color: #e9573b
}
#mainFooter .slider__1 .sliderWrap .content:hover .marquee .marquee__content li a svg path {
fill: #e9573b
}
#mainFooter .slider__1 .sliderWrap .content .marquee {
--gap: 2rem;
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap)
}
#mainFooter .slider__1 .sliderWrap .content .marquee .marquee__content {
top: 50%;
position: absolute;
flex-shrink: 0;
display: flex;
justify-content: space-around;
min-width: 100%;
gap: var(--gap);
white-space: nowrap
}
#mainFooter .slider__1 .sliderWrap .content .marquee .marquee__content li {
list-style-type: none
}
#mainFooter .slider__1 .sliderWrap .content .marquee .marquee__content li a {
gap: 30px;
display: flex;
align-items: center;
color: #fff
}
@media screen and (max-width: 900px) {
#mainFooter .slider__1 .sliderWrap .content {
font-size: 30px;
height: 70px
}
#mainFooter .slider__1 .sliderWrap .content .marquee .marquee__content svg {
width: 50px
}
}
#mainFooter .slider__2 {
margin-top: 10px;
margin-bottom: 10px
}
#mainFooter .slider__2 .sliderWrap {
max-width: 100%
}
#mainFooter .slider__2 .sliderWrap .content {
position: relative;
height: 200px;
display: flex;
gap: 30px;
color: #fff;
grid-column: 1/13;
font-size: 80px;
text-transform: uppercase;
background: #6A4F97;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
#mainFooter .slider__2 .sliderWrap .content:hover {
background: white;
border-top: 10px solid #6A4F97;
border-bottom: 10px solid #6A4F97;
}
#mainFooter .slider__2 .sliderWrap .content:hover .marquee .marquee__content li a {
color: #6A4F97
}
#mainFooter .slider__2 .sliderWrap .content:hover .marquee .marquee__content li a svg path {
fill: #6A4F97
}
#mainFooter .slider__2 .sliderWrap .content .marquee {
--gap: 2rem;
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap)
}
#mainFooter .slider__2 .sliderWrap .content .marquee .marquee__content {
position: absolute;
top: 50%;
flex-shrink: 0;
display: flex;
justify-content: space-around;
min-width: 100%;
gap: var(--gap);
white-space: nowrap
}
#mainFooter .slider__2 .sliderWrap .content .marquee .marquee__content li {
list-style-type: none
}
#mainFooter .slider__2 .sliderWrap .content .marquee .marquee__content li a {
gap: 30px;
display: flex;
align-items: center;
color: #fff
}
@keyframes scroll2 {
from {
transform: translateX(0)
}
to {
transform: translateX(calc(-100% - var(--gap)))
}
}
@media screen and (max-width: 900px) {
#mainFooter .slider__2 .sliderWrap .content {
font-size: 30px;
height: 70px
}
#mainFooter .slider__2 .sliderWrap .content .marquee .marquee__content {
padding: 0
}
#mainFooter .slider__2 .sliderWrap .content .marquee .marquee__content svg {
width: 50px
}
}
@media screen and (max-width: 900px) {
#mainFooter .slider__2 { }
}
.container__lastFOoter {
background: #1D1D1B;
}
#mainFooter .gridWrap { gap: 0;
}
#mainFooter .gridWrap .social {
margin: 100px 0;
display: flex;
grid-column: 1/13;
align-items: center;
justify-content: space-between;
gap: 30px
}
#mainFooter .gridWrap .social .left a {
gap: 16px;
color: white;
display: flex;
align-items: center;
font-size: 20px;
font-weight: 500;
}
#mainFooter .gridWrap .social .middle {
display: flex;
gap: 30px;
}
#mainFooter .gridWrap .social .middle a {
height: 55px;
width: 90px;
font-size: 14px;
border: 1px solid white;
color: white;
font-weight: 500;
padding: 0 12px;
display: flex;
align-items: center;
border-radius: 60%;
justify-content: center;
transition: all 0.3s ease-in-out;
}
#mainFooter .gridWrap .social .middle a:hover {
color: #1D1D1B;
background: white;
}
#mainFooter .gridWrap .social .right {
text-align: right;
}
#mainFooter .gridWrap .social .right h3 {
color: white;
font-weight: 500;
font-size: 20px;
}
#mainFooter .gridWrap .social .right p {
color: white;
font-weight: 500;
font-size: 10px;
}
#mainFooter .gridWrap .logo {
grid-column: 1/13
}
#mainFooter .gridWrap .logo svg {
height: fit-content;
width: 100%
}
#mainFooter .gridWrap .menuCustom {
padding-bottom: 20px;
padding-top: 20px;
grid-column: 1/13;
display: flex;
justify-content: center;
gap: 50px
}
#mainFooter .gridWrap .menuCustom li {
list-style-type: none
}
#mainFooter .gridWrap .menuCustom li a {
font-size: 10px;
color: white;
}
@media screen and (max-width: 900px) {
#mainFooter .gridWrap {
grid-row-gap: 50px;
grid-column-gap: 0
}
#mainFooter .gridWrap .menuCustom {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px
}
}
.landing_section {
margin-top: 30px
}
.landing_section .gridWrap .quote {
opacity: 0;
text-transform: uppercase;
transition: opacity 1s ease-in-out;
grid-column: 3/11;
font-size: 30px;
text-align: center;
font-weight: 500;
}
.landing_section .gridWrap .quote p {
color: #1d1d1b
}
.landing_section .gridWrap .quote.active {
opacity: 1;
transition-delay: 2s
}
@media screen and (max-width: 900px) {
.landing_section .gridWrap .quote {
opacity: 1
}
}
@media screen and (max-width: 900px) {
.landing_section .gridWrap .quote {
grid-column: 1/13;
font-size: 20px
}
}
.landing_section .gridWrap .best__projects {
grid-column: 1/13
}
.landing_section .gridWrap .best__projects section {
transition: transform 1s;
will-change: transform
}
.landing_section .gridWrap .best__projects section .media {
padding-top: 50%
}
.landing_section .gridWrap .best__projects section .block__text {
margin-top: 10px;
margin-bottom: 60px;
display: flex;
justify-content: space-between;
font-weight: 500;
}
.landing_section .gridWrap .best__projects section .block__text .city {
text-transform: none;
font-size: 20px;
color: #1d1d1b
}
.landing_section .gridWrap .best__projects section .block__text .title {
font-size: 30px;
color: #1d1d1b
}
.landing_section .gridWrap .best__projects section .block__text .see {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
}
@media screen and (max-width: 900px) {
.landing_section .gridWrap .best__projects section .block__text .city, .landing_section .gridWrap .best__projects section .block__text .title {
font-size: 18px
}
}
@keyframes open-easeOutBounce {
0% {
clip-path: polygon(50% 0, 50% 0, 50% 19%, 50% 19%)
}
50% {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 19%, 0 19%)
}
100% {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
}
@keyframes open-easeOutBounceMobile {
0% {
clip-path: polygon(50% 0, 50% 0, 50% 30%, 50% 30%)
}
50% {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%)
}
100% {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
}
@keyframes close-easeInBounce {
0% {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
50% {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 19%, 0 19%)
}
100% {
clip-path: polygon(50% 0, 50% 0, 50% 19%, 50% 19%)
}
}
@keyframes close-easeInBounceMobile {
0% {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
50% {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%)
}
100% {
clip-path: polygon(50% 0, 50% 0, 50% 30%, 50% 30%)
}
}
@keyframes W-first {
0% {
transform: translate3d(0, -50%, 0);
top: 50%;
right: 0
}
10% {
transform: translate3d(0, -50%, 0);
top: 50%;
right: 0
}
50% {
transform: translate3d(0, 0%, 0);
top: 0;
right: 0
}
100% {
transform: translate3d(100%, 0%, 0);
right: 100%
}
}
@keyframes K-first {
0% {
top: 100%;
transform: translate3d(0, -100%, 0);
right: -100%
}
10% {
top: 100%;
transform: translate3d(0, -100%, 0);
right: -100%
}
40% {
top: 100%;
transform: translate3d(0, -100%, 0);
right: 25%
}
50% {
top: 100%;
transform: translate3d(0, -100%, 0);
right: 25%
}
70% {
top: 0;
transform: translate3d(0, 0, 0);
right: 25%
}
75% {
top: 100%;
transform: translate3d(0, -100%, 0);
right: 25%
}
85% {
top: 100%;
transform: translate3d(0, -100%, 0);
right: 25%
}
100% {
top: 0;
transform: translate3d(0, 0, 0);
right: 25%
}
}
@keyframes S-first {
0% {
visibility: hidden
}
70% {
visibility: hidden
}
80% {
visibility: visible;
top: 100%;
transform: translate3d(0, -100%, 0);
right: 0
}
85% {
visibility: visible;
top: 100%;
transform: translate3d(0, -100%, 0);
right: 0
}
90% {
visibility: visible;
top: 100%;
transform: translate3d(0, -100%, 0);
right: 0
}
100% {
visibility: visible;
top: 0;
transform: translate3d(0, 0, 0);
right: 0
}
}
@keyframes R-first {
0% {
visibility: hidden
}
50% {
visibility: hidden
}
60% {
visibility: hidden
}
80% {
visibility: hidden
}
85% {
visibility: hidden;
top: 100%;
transform: translate3d(0, -100%, 0);
right: 50%
}
100% {
visibility: visible;
top: 0;
transform: translate3d(0, 0, 0);
right: 50%
}
}
@keyframes loadingBar {
0% {
transform: translateX(0%)
}
100% {
transform: translateX(24%)
}
}
@keyframes changeHeight {
to {
height: unset
}
}
.archive__projects {
position: relative;
margin-top: 20px
}
.archive__projects .filter {
margin-bottom: 20px;
gap: 40px;
width: 100%;
text-align: center;
height: 80px;
text-transform: uppercase;
font-size: 30px;
font-weight: 500;
color: #1D1D1B;
z-index: 40;
display: flex;
justify-content: center;
align-items: center;
}
.archive__projects .filter .block__left {
cursor: pointer;
border: 1px solid #383838;
width: 130px;
height: 70px;
gap: 10px;
font-size: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
}
.archive__projects .filter .block__left .open, .archive__projects .filter .block__left .left__menu {
display: none
}
.archive__projects .filter .block__left:hover {
background: #383838
}
@media screen and (max-width: 900px) {
.archive__projects .filter .block__left:hover {
background: unset
}
}
.archive__projects .filter .block__left.active {
background: #383838
}
.archive__projects .filter .block__left.active .close {
display: none
}
.archive__projects .filter .block__left.active .open {
display: block
}
.archive__projects .filter .left__menu {
top: -15px;
display: block;
font-size: 10px;
font-family: "KievitSerif";
box-sizing: border-box;
z-index: -10;
content: "Close";
text-align: right;
position: absolute;
width: 95vw;
height: 575px;
background: #1d1d1b;
left: 50%;
transform: translate3d(-50%, 0, 0);
clip-path: polygon(50% 0, 50% 0, 50% 14%, 50% 14%);
opacity: 0
}
@media screen and (max-width: 900px) {
.archive__projects .filter .left__menu {
top: 0
}
.archive__projects .filter .left__menu.active {
animation: open-easeOutBounceMobile 2s forwards cubic-bezier(0.87, 0, 0.13, 1) !important
}
.archive__projects .filter .left__menu.inactive {
animation: close-easeInBounceMobile 2s forwards cubic-bezier(0.87, 0, 0.13, 1) !important
}
}
.archive__projects .filter .left__menu.active {
animation: open-easeOutBounce 2s forwards cubic-bezier(0.87, 0, 0.13, 1)
}
.archive__projects .filter .left__menu.inactive {
animation: close-easeInBounce 2s forwards cubic-bezier(0.87, 0, 0.13, 1)
}
.archive__projects .filter .left__menu .cta__container {
display: flex;
justify-content: space-between;
padding: 55px 80px
}
.archive__projects .filter .left__menu .cta__container .close__cta {
display: block;
cursor: pointer
}
.archive__projects .filter .left__menu .cta__container .reset__cta {
color: #fff;
display: block;
cursor: pointer
}
.archive__projects .filter .left__menu .tag__container {
font-family: "IBM Plex Sans";
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center
}
.archive__projects .filter .left__menu .tag__container .single__cat {
border: 1px solid #383838;
width: 210px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
position: relative;
}
.archive__projects .filter .left__menu .tag__container .single__cat:hover {
background: #383838
}
.archive__projects .filter .single__cat.active {
text-decoration: underline;
text-underline-offset: 5px;
}
.archive__projects .filter .single__cat:hover {
opacity: 0.4;
}
.archive__projects .filter .single__cat {
transition: opacity 0.2s ease-in-out;
}
.archive__projects .filter .block__right {
cursor: pointer;
border: 1px solid #383838;
width: 130px;
text-align: right;
gap: 10px;
height: 70px;
font-size: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
}
.archive__projects .filter .block__right .open, .archive__projects .filter .block__right .right__menu {
display: none
}
.archive__projects .filter .block__right:hover {
background: #383838
}
@media screen and (max-width: 900px) {
.archive__projects .filter .block__right:hover {
background: unset
}
}
.archive__projects .filter .block__right.active {
background: #383838
}
.archive__projects .filter .block__right.active .close {
display: none
}
.archive__projects .filter .block__right.active .open {
display: block
}
.archive__projects .filter .right__menu {
top: -15px;
display: block;
font-size: 10px;
font-family: "KievitSerif";
box-sizing: border-box;
z-index: -10;
content: "Close";
position: absolute;
width: 95vw;
height: 575px;
background: #1d1d1b;
left: 50%;
transform: translate3d(-50%, 0, 0);
text-align: right;
clip-path: polygon(50% 0, 50% 0, 50% 14%, 50% 14%);
opacity: 0
}
@media screen and (max-width: 900px) {
.archive__projects .filter .right__menu {
top: 0
}
.archive__projects .filter .right__menu.active {
animation: open-easeOutBounceMobile 2s forwards cubic-bezier(0.87, 0, 0.13, 1) !important
}
.archive__projects .filter .right__menu.inactive {
animation: close-easeInBounceMobile 2s forwards cubic-bezier(0.87, 0, 0.13, 1) !important
}
}
.archive__projects .filter .right__menu.active {
animation: open-easeOutBounce 2s forwards cubic-bezier(0.87, 0, 0.13, 1)
}
.archive__projects .filter .right__menu.inactive {
animation: close-easeInBounce 2s forwards cubic-bezier(0.87, 0, 0.13, 1)
}
.archive__projects .filter .right__menu .cat__container {
margin-top: 5px;
font-family: "IBM Plex Sans";
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center
}
.archive__projects .filter .right__menu .cat__container .single__cat {
border: 1px solid #383838;
width: 210px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
position: relative
}
.archive__projects .filter .right__menu .cat__container .single__cat:hover {
background: #383838
}
.archive__projects .filter .right__menu .cat__container .single__cat:hover .image {
display: block
}
.archive__projects .filter .right__menu .cat__container .single__cat .image {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -10
}
.archive__projects .filter .right__menu .cta__container {
display: flex;
justify-content: space-between;
padding: 50px 80px
}
.archive__projects .filter .right__menu .cta__container .close__cta {
display: block;
cursor: pointer
}
.archive__projects .filter .right__menu .cta__container .reset__cta {
color: #fff;
display: block;
cursor: pointer
}
@media screen and (max-width: 900px) {
.archive__projects .filter {
height: 75px;
width: 100%;
transform: unset;
left: unset;
top: 60px
}
.archive__projects .filter .blocks {
width: 48%;
height: 55px;
flex-direction: row
}
.archive__projects .filter .right__menu {
width: 100vw;
padding-bottom: 30px;
height: fit-content
}
.archive__projects .filter .right__menu .cta__container {
padding: unset
}
.archive__projects .filter .right__menu .cta__container .close__cta {
padding: 80px 30px 40px 0
}
.archive__projects .filter .right__menu .cta__container .reset__cta {
padding: 80px 0 40px 30px
}
.archive__projects .filter .right__menu .cat__container .single__cat {
width: 180px;
height: 40px
}
.archive__projects .filter .left__menu {
width: 100vw;
padding-bottom: 30px;
height: fit-content
}
.archive__projects .filter .left__menu .cta__container {
padding: unset
}
.archive__projects .filter .left__menu .cta__container .close__cta {
padding: 80px 30px 40px 0
}
.archive__projects .filter .left__menu .cta__container .reset__cta {
padding: 80px 0 40px 30px
}
.archive__projects .filter .left__menu .tag__container .single__cat {
width: 180px;
height: 40px
}
}
.archive__projects .gridWrap {
gap: 30px
}
.archive__projects .gridWrap .noproduct {
grid-column: 1/13;
text-align: center
}
.archive__projects .gridWrap .block {
position: relative;
grid-column: span 6;
transition: all 0.4s ease-in-out;
}
.archive__projects .gridWrap .block:hover .cta {
display: flex
}
.archive__projects .gridWrap .block:hover .media::after {
content: "";
opacity: 0.4;
transition: all 0.4s ease-in-out;
}
.archive__projects .gridWrap .block .media::after {
content: "";
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: all 0.4s ease-in-out;
position: absolute;
inset: 0;
}
@media screen and (max-width: 900px) {
.archive__projects .gridWrap .block .media::after {
opacity: 0.4;
}
.archive__projects .gridWrap .block:hover .media::after {
opacity: 0.4 !important;
}
}
.archive__projects .gridWrap .block:hover .hr {
display: flex
}
.archive__projects .gridWrap .block:hover .hr {
opacity: 1;
transition: all 0.4s ease-in-out;
}
.archive__projects .gridWrap .block.current--hover {
opacity: 1
}
.archive__projects .gridWrap .block.not--hover {
opacity: .4
}
.archive__projects .gridWrap .block .media {
padding-top: 81%
}
.archive__projects .gridWrap .block .hr {
position: absolute;
left: 40px;
right: 40px;
bottom: 104px;
border: 1px solid white;
opacity: 0;
}
.archive__projects .gridWrap .block .cta {
z-index: 10;
display: none;
position: absolute;
bottom: 40px;
left: 40px;
color: #fff;
justify-content: center;
align-items: start;
font-size: 20px;
font-weight: 500;
flex-direction: column; }
.archive__projects .gridWrap .block .cta .description {
font-size: 14px;
}
@media screen and (max-width: 900px) {
.archive__projects .gridWrap {
grid-row-gap: 10px;
grid-column-gap: 10px
}
.archive__projects .gridWrap .block .cta { display: block;
font-size: 10px;
position: absolute;
left: 10px;
bottom: 10px;
}
.archive__projects .gridWrap .block:hover .hr {
display: none !important;
}
.archive__projects .gridWrap .block:hover .media::after {
display: none;
}
.archive__projects .gridWrap .block .cta .description {
display: none;
}
}
.archive #mainFooter .slider__1 {
display: none
}
.single__project {
margin-top: 33px
}
.single__project .gridWrap {
padding-bottom: 35px;
}
.single__project .gridWrap .media {
grid-column: 1/13;
padding-top: 50%
}
.single__project .gridWrap .title {
font-family: "IBM Plex Sans", sans-serif;
font-weight: 300;
grid-column: 1/13;
font-size: 60px;
font-weight: 500;
color: #1d1d1b; }
.single__project .gridWrap .info__bullet {
margin-top: 10px;
grid-column: 1/13;
display: flex;
justify-content: center;
gap: 40px
}
.single__project .gridWrap .info__bullet .bullet {
font-size: 14px;
font-weight: 400;
color: #1D1D1B;
}
.single__project .gridWrap .block__text {
font-size: 15px;
font-weight: 400;
grid-column: 7/13
}
.single__project .gridWrap .block__text--left {
font-size: 15px;
font-weight: 400;
grid-column: 1/7
}
.single__project .gridWrap .block__text .subtitle {
font-size: 10px;
padding-bottom: 30px
}
.single__project .gridWrap .block__text .text {
font-size: 15px
}
@media screen and (max-width: 900px) {
.single__project .gridWrap .media {
padding-top: 82%
}
.single__project .gridWrap .title {
font-size: 30px
}
.single__project .gridWrap .info__bullet {
position: relative
}                             .single__project .gridWrap .block__text {
grid-column: 1/13;
margin-top: 40px
}
.single__project .gridWrap .block__text .text {
font-size: 13px
}
}
.single__project .gridCms {
margin-top: 25px
}
.single__project .gridCms .two__images {
gap: 30px;
margin-bottom: 30px
}
.single__project .gridCms .two__images .image__one {
grid-column: 1/7
}
.single__project .gridCms .two__images .image__one .media {
padding-top: 80%
}
.single__project .gridCms .two__images .image__two {
grid-column: 7/13
}
.single__project .gridCms .two__images .image__two .media {
padding-top: 80%
}
@media screen and (max-width: 900px) {
.single__project .gridCms .two__images {
grid-column-gap: 10px
}
}
.single__project .gridCms .images__fullwidth {
margin-top: 30px
}
.single__project .gridCms .images__fullwidth .media {
padding-top: 50%;
grid-column: 1/13
}
@media screen and (max-width: 900px) {
.single__project .gridCms .images__fullwidth {
margin-top: 10px
}
}
.single__project .gridCms .block__text__image {
margin-top: 30px;
margin-bottom: 30px;
gap: 30px
}
.single__project .gridCms .block__text__image .media {
padding-top: 81%
}
.single__project .gridCms .block__text__image .media.right__image {
grid-column: 7/13
}
.single__project .gridCms .block__text__image .media.left__image {
grid-column: 1/7
}
.single__project .gridCms .block__text__image .block__text {
display: flex;
gap: 30px;
flex-direction: column;
justify-content: center
}
.single__project .gridCms .block__text__image .block__text .title {
font-size: 10px
}
.single__project .gridCms .block__text__image .block__text .text {
font-size: 15px
}
.single__project .gridCms .block__text__image .block__text.text__left {
grid-column: 8/12
}
.single__project .gridCms .block__text__image .block__text.text__right {
grid-row: 1;
grid-column: 2/6
}
@media screen and (max-width: 900px) {
.single__project .gridCms .block__text__image {
margin-top: 10px
}
.single__project .gridCms .block__text__image .media.right__image {
grid-column: 1/13
}
.single__project .gridCms .block__text__image .media.left__image {
grid-column: 1/13
}
.single__project .gridCms .block__text__image .block__text .text {
font-size: 13px
}
.single__project .gridCms .block__text__image .block__text.text__left {
grid-column: 1/13
}
.single__project .gridCms .block__text__image .block__text.text__right {
grid-column: 1/13
}
}
.single__project .gridCms .two-blocks {
margin-top: 30px;
margin-bottom: 30px
}
.single__project .gridCms .two-blocks .block--left {
grid-column: span 6;
display: flex;
gap: 30px;
flex-direction: column;
justify-content: center
}
.single__project .gridCms .two-blocks .block--left .title {
font-size: 10px
}
.single__project .gridCms .two-blocks .block--left .text {
font-size: 15px
}
.single__project .gridCms .two-blocks .block--right {
grid-column: span 6;
display: flex;
gap: 30px;
flex-direction: column;
justify-content: center
}
.single__project .gridCms .two-blocks .block--right .title {
font-size: 10px
}
.single__project .gridCms .two-blocks .block--right .text {
font-size: 15px
}
@media screen and (max-width: 900px) {
.single__project .gridCms .two-blocks .block--left {
grid-column: 1/13
}
.single__project .gridCms .two-blocks .block--left .text {
font-size: 13px
}
.single__project .gridCms .two-blocks .block--right {
grid-column: 1/13
}
.single__project .gridCms .two-blocks .block--right .text {
font-size: 13px
}
}
.client_section .gridWrap {
margin-top: 230px;
margin-bottom: 100px;
position: relative
}
.client_section .gridWrap .single__cat {
font-size: 20px;
color: #1d1d1b;
text-transform: none;
display: flex;
gap: 14px;
align-items: center;
font-weight: 400 !important;
}
.client_section .gridWrap .single__cat .title {
white-space: nowrap;
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
}
.client_section .gridWrap .single__cat .title svg.active {
display: none
}
.client_section .gridWrap .single__cat .title:hover svg.active {
display: block
}
.client_section .gridWrap .single__cat .title:hover svg.active path {
fill: #398052;
display: block
}
.client_section .gridWrap .single__cat .title:hover {
color: #398052
}
.client_section .gridWrap .single__cat .title:hover svg.default {
display: none
}
.client_section .gridWrap .single__cat .title .image {
display: none;
position: absolute;
width: 367px;
height: 200px;
object-fit: cover
}
.client_section .gridWrap .single__cat .title .image.active {
display: block
}   .client_section .gridWrap .single__cat {
grid-column: span 3
}
.client_section .gridWrap .single__cat:nth-child(odd) .image {
left: 0
}
@media screen and (max-width: 1300px) {
.client_section .gridWrap .single__cat:nth-child(odd) .image {
width: 25%;
height: auto
}
}
@media screen and (max-width: 900px) {
.client_section .gridWrap .single__cat:nth-child(odd) {
grid-column: 2/7
}
}   .client_section .gridWrap .single__cat:nth-child(even) .image {
right: 25%
}
@media screen and (max-width: 1300px) {
.client_section .gridWrap .single__cat:nth-child(even) {
grid-column: 10/13
}
.client_section .gridWrap .single__cat:nth-child(even) .image {
width: 25%;
height: auto
}
}
@media screen and (max-width: 900px) {
.client_section .gridWrap .single__cat:nth-child(even) {
grid-column: 8/13
}
}
@media screen and (max-width: 900px) {
.client_section .gridWrap {
margin-top: 100px
}
.client_section .gridWrap .single__cat {
font-size: 18px
}
}
.services_section {
margin-top: 35px
}
.services_section .gridWrap {
position: relative
}
.services_section .gridWrap .text {
font-size: 32px;
font-weight: 500;
grid-column: 1/13
}
@media screen and (max-width: 900px) {
.services_section .gridWrap .text {
grid-column: 1/13;
font-size: 20px
}
}
.services_section .gridWrap .block__cards {
grid-column: 1/13
}
.services_section .gridWrap .block__cards .card {
display: flex; position: sticky;
width: 100%;
height: calc(100vh - 80px);
color: #fff; }
.services_section .gridWrap .block__cards .card .container__blocks {
padding: 75px;
}
.services_section .gridWrap .block__cards .card .image__cards { left: 0;
top: 0; height: 100%;
background: red;
}
@media screen and (max-width: 1100px) {
.services_section .gridWrap .text {
font-size: 20px;
}
.services_section .gridWrap .block__cards .card .block__title .title {
font-size: 30px !important;
}
.services_section .gridWrap .block__cards .card .block__text .subtitle {
font-size: 20px !important;
}
}
@media screen and (max-width: 900px) {
.services_section .gridWrap .block__cards .card .image__cards img {
display: none;
}
}
.services_section .cardWrap {
margin-bottom: 10Px;
margin-top: 50px;
}
.services_section .cardWrap .card:nth-child(even) {
flex-direction: row-reverse;
justify-content: space-between;
}
.services_section .gridWrap .block__cards .card .image__cards img {
width: 460px;
height: 100%;
object-fit: cover;
}
.services_section .gridWrap .block__cards .card.one {
background: #6a4f97;
top: 0px;
height: calc(100vh - 80px - 0px)
}
.services_section .gridWrap .block__cards .card.two {
background: #e9573b;
top: 0px;
height: calc(100vh - 80px - 0px);  }
.services_section .gridWrap .block__cards .card.three {
background: #398052;
top: 0px;
height: calc(100vh - 80px - 0px)  }
.services_section .gridWrap .block__cards .card.four {
background: #f0c03c;
top: 0px;
height: calc(100vh - 80px - 0px)  }
@media screen and (max-width: 450px) {
.services_section .gridWrap .block__cards .card.one {
top: 50px
}
.services_section .gridWrap .block__cards .card.two {
top: 150px
}
.services_section .gridWrap .block__cards .card.three {
top: 250px
}
.services_section .gridWrap .block__cards .card.four {
top: 350px
}
}
.services_section .gridWrap .block__cards .card .block__title {
display: flex;
align-items: baseline;
gap: 23px;
}
.services_section .gridWrap .block__cards .card .block__title svg {
width: 42px;
height: 42px;
}
.services_section .gridWrap .block__cards .card .block__title .title {
font-weight: 500;
font-size: 60px;
font-family: "IBM Plex Sans", sans-serif
}
.services_section .gridWrap .block__cards .card .block__text {
margin-top: 30px;
margin-left: 70px; display: flex;
flex-direction: column;
gap: 30px;
align-items: baseline;
}
.services_section .gridWrap .block__cards .card .block__text .subtitle {
font-size: 30px;
font-weight: 500;
color: #fff
}
.services_section .cardWrap {
max-width: 100%;
}
.services_section .gridWrap .block__cards .card .block__text .subtitle a {
font-weight: lighter;
color: #fff
}
@media screen and (max-width: 900px) {
.services_section .gridWrap .block__cards {
grid-column: 1/13
}
.services_section .gridWrap .block__cards .card .block__title .title {
display: flex;
font-size: 40px
}
.services_section .gridWrap .block__cards .card .block__text { display: flex;
gap: 30px; }
.services_section .gridWrap .block__cards .card .block__text .subtitle {
font-size: 11px;
font-weight: 300
}
#mainFooter .gridWrap .social {
flex-direction: column;
}
#mainFooter .gridWrap .social .right {
text-align: center;
}
.services_section .gridWrap .block__cards .card .block__title {
flex-direction: column;
}
.services_section .gridWrap .block__cards .card .block__text {
margin: 0;
margin-top: 30px;
}
.services_section .gridWrap .block__cards .card {
height: 100vh !important;
}
.services_section .gridWrap .block__cards .card .container__blocks {
padding: 20px;
}
}
.sym_404 {
margin-bottom: 100px
}
.sym_404 .gridWrap .fs1 {
text-align: center;
grid-column: 1/13
}
.sym_404 .gridWrap .fs3 {
text-align: center;
grid-column: 1/13
}
.sym_404 .gridWrap .cta__back {
grid-column: 6/8;
text-align: center;
padding: 20px;
border: 1px solid #000
}
.sym_404 .gridWrap .cta__back:hover {
background: #000
}
.sym_404 .gridWrap .cta__back:hover a {
color: #fff
}
body {
overflow: hidden
}
@media screen and (max-width: 900px) {
body {
overflow: unset
}
}
body.active {
overflow: unset
}
@media screen and (max-width: 900px) {
.preloader { overflow:hidden;
width:100vw;
margin-top:0px !important;
padding-top:0px;
}
#mobileHeader {
display:none;
}
.preloaderMobile {
display:none;
} }
.preloader .gridWrap {
grid-gap: 0
}
.preloader .gridWrap .container {
grid-column: 1/13;
display: flex;
flex-direction: column;
height: 100vh;
position: relative
}
.preloader .gridWrap .container .bigsvg {
visibility: hidden;
margin-top: 30px;
display: flex;
align-items: end
}
.preloader .gridWrap .container .bigsvg .svg + .svg {
margin-left: 35.2px
}
.preloader .gridWrap .container .bigsvg .svg:nth-child(1) {
width: 467.2px
}
.preloader .gridWrap .container .bigsvg .svg:nth-child(2) {
width: 348.8px
}
.preloader .gridWrap .container .bigsvg .svg:nth-child(3) {
width: 340.8px
}
.preloader .gridWrap .container .bigsvg .svg:nth-child(4) {
width: 340.8px
}
@media screen and (max-width: 1640px) {
.preloader .gridWrap .container .bigsvg .svg + .svg {
margin-left: 2.024vw
}
.preloader .gridWrap .container .bigsvg .svg:nth-child(1) {
width: 26.864vw
}
.preloader .gridWrap .container .bigsvg .svg:nth-child(2) {
width: 20.056vw
}
.preloader .gridWrap .container .bigsvg .svg:nth-child(3) {
width: 19.596vw
}
.preloader .gridWrap .container .bigsvg .svg:nth-child(4) {
width: 19.596vw
}
}
.preloader .gridWrap .container #progress__bar {
width: 100%;
align-self: flex-start;
margin-top: 10px;
font-size: 11px;
color: gray;
transform: translateX(0%);
animation-duration: 3800ms;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1)
}
.preloader__OLD {
height: 100vh
}
.preloader__OLD.active {
height: unset
}
.preloader__OLD.hidden {
display: none
}
.preloader__OLD .container {
grid-column: 1/13
}
.preloader__OLD .container svg {
height: 100%;
width: 100%
}
.preloader__OLD .container svg path:nth-of-type(4) {
animation-name: W-first;
animation-duration: 1500ms;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1)
}
.preloader__OLD .container svg path:nth-of-type(2) {
transform: translate3d(100%, 0, 0);
animation-name: K-first;
animation-duration: 4000ms;
animation-fill-mode: forwards;
animation-delay: 700ms
}
.preloader__OLD .container svg path:nth-of-type(1) {
visibility: hidden;
transform: translate3d(0, 70%, 0);
animation-name: S-first;
animation-duration: 4000ms;
animation-fill-mode: forwards;
animation-delay: 700ms
}
.preloader__OLD .container svg path:nth-of-type(3) {
visibility: hidden;
transform: translate3d(0, 70%, 0);
animation-name: R-first;
animation-duration: 4000ms;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
animation-delay: 1000ms
}
.preloader__OLD .container svg path.active {
transform: translate3d(0, 0%, 0) !important
}
.preloader__OLD .container #progress__bar {
font-size: 11px;
color: gray;
animation-name: loadingBar;
animation-duration: 3800ms;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
position: absolute;
top: 45%;
left: 0
}
.preloader__OLD .container #progress__bar.active {
opacity: 0;
transition: opacity .5s ease-in-out
}
.preloader__OLD .container #progress__bar.hidden {
display: none
} #mainHeader {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.preloader {
margin-top: 50px;
}
@media screen and (max-width: 900px) {
.archive__projects .filter {
gap: 15px;
font-size: 15px;
}
}
@media screen and (max-width: 450px) {
.archive__projects .filter {
gap: 15px;
font-size: 10px;
height: fit-content;
}
.single__project .blockInfoTxt {
flex-wrap: wrap !important;
}
.single__project .gridWrap .block__text--left {
grid-column: 1/13;
}
} .grecaptcha-badge {visibility: hidden;}