/*------------------------RESET---------------------------*/ 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, ul,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%; font: inherit; text-decoration:none; list-style-type: none;} article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; } /*------------------------------------------------------*/ .clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; } .chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } :root { --font1: 'Poppins', sans-serif; /* */ --color0: #252525; --color1: #F27900; /* rgb(239,121,12); */ --color2: rgba(0, 0, 0, 0.04); } html, body {width: 100%; overflow-x: hidden;} body { display:block!important; width: 100%; font-size: min(21px, calc(11px + 1vw)); font-family: var(--font1); overflow-x: hidden; box-sizing: border-box;} body.fixed {height: 100vh; overflow: hidden;} .wrapper {display: block; margin-left: auto; margin-right: auto; max-width: 74em; width: 96%; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; flex-wrap: wrap; position: relative;} .wrapper.w2 {display: flex; width: 90%; max-width: 60em;} .wrapper .wrapper.w2 {width: 86%;} body {padding-top: 5em;} .header {display: block; width: 100%; height: 5em; background: white; position: fixed; top: 0; left: 0; z-index: 1000; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .header .wrapper {height: 100%; justify-content: space-between; align-items: center; position: relative; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .header .logo {display: block; width: 10em; height: auto; position: relative; z-index: 2000; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .header .logo img {display: block; width: 100%; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .header .logo img:nth-child(2) {position: absolute; left: 0; top: 0; opacity: 0;} .header #navicion {display: none;} .header .menu {display: block;} .header .menu #navicon {display: none;} .header .menu nav {display: flex; align-items: center; gap: 0 1.4em; padding-bottom: 0.2em;} .header .menu nav a {display: block; font-size: 1em; color: #666666; font-weight: 300; position: relative; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .header .menu nav a.sel {color: var(--color1) !important; font-weight: 500;} .header .menu nav a:hover {color: var(--color1) !important;} .header .menu nav .soc {display: flex; gap: 0.3em;} .header .menu nav .soc a span {display: block; width: 1.3em; height: 1.3em; margin-top: -0.1em; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .header .menu nav .soc a span:nth-child(1) {opacity: 0.5;} .header .menu nav .soc a span:nth-child(2) {opacity: 0; position: absolute; left: 0; top: 0;} .header .menu nav .soc a.in span:nth-child(1) {background-image: URL('images/icon-in1.png');} .header .menu nav .soc a.in span:nth-child(2) {background-image: URL('images/icon-in2.png');} .header .menu nav .soc a.fb span:nth-child(1) {background-image: URL('images/icon-fb1.png');} .header .menu nav .soc a.fb span:nth-child(2) {background-image: URL('images/icon-fb2.png');} .header .menu nav .soc a.ig span:nth-child(1) {background-image: URL('images/icon-ig1.png');} .header .menu nav .soc a.ig span:nth-child(2) {background-image: URL('images/icon-ig2.png');} .header .menu nav .soc a:hover span:nth-child(1){opacity: 0;} .header .menu nav .soc a:hover span:nth-child(2){opacity: 1;} .project .header {background: none;} .project .header .menu nav a {color: white;} .project .header .logo img:nth-child(1) {opacity: 0;} .project .header .logo img:nth-child(2) {opacity: 1;} body.scroll {padding-top: 4em;} body.scroll .header {height: 4em;} body.project.scroll .header {background: white;} body.project.scroll .header .logo img:nth-child(1) {opacity: 1;} body.project.scroll .header .logo img:nth-child(2) {opacity: 0;} body.project.scroll .header .menu nav a {color: #666666;} @media screen and (min-width: 1081px) and (max-width: 1280px) { .header .logo {width: 8em;} .header .menu nav {font-size: 0.9em; gap: 0 1em;} } @media screen and (min-width: 1081px) { .project .header .menu nav .soc a span:nth-child(1) {opacity: 1;} body.scroll.project .header .menu .soc a span:nth-child(1) {opacity: 0.5;} .project .header .menu nav .soc a.in span:nth-child(1) {background-image: URL('images/icon-in3.png');} body.scroll.project .header .menu .soc a.in span:nth-child(1) {background-image: URL('images/icon-in1.png');} .project .header .menu nav .soc a.fb span:nth-child(1) {background-image: URL('images/icon-fb3.png');} body.scroll.project .header .menu .soc a.fb span:nth-child(1) {background-image: URL('images/icon-fb1.png');} .project .header .menu nav .soc a.ig span:nth-child(1) {background-image: URL('images/icon-ig3.png');} body.scroll.project .header .menu .soc a.ig span:nth-child(1) {background-image: URL('images/icon-ig1.png');} } @media screen and (max-width: 1080px) { .header #navicon {display: block; width: 1.6em; height: 1.6em; margin-top: -0.6em; background: URL('images/navicon.svg') no-repeat center top; background-size: 100% 400%; position: absolute; right: 0; top: 2.2em; z-index: 2000; box-sizing: border-box; cursor: pointer; -webkit-transition: top .25s ease-in-out; transition: top .25s ease-in-out;} .header #navicon:hover {background-position: center top 33.33%;} .header .menu {display: block; width: 100%; height: 100%; background: white; opacity: 0; position: fixed; right: -101%; top: 0; padding-top: 5em; box-sizing: border-box; overflow-y: auto; -webkit-transition: opacity .45s ease-in-out; transition: opacity .45s ease-in-out;} .header .menu nav {width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0; background: URL('images/nav.jpg') no-repeat center center; background-size: auto 150%; padding: 5% 8%; box-sizing: border-box;} .header .menu nav a {display: block; width: 47%; font-size: 1.3em; padding: 0.8em 1.2rem; margin: 0; color: #b8b8b8 !important; border-bottom: solid 1px rgba(0,0,0,0.1); box-sizing: border-box; background: URL('images/arrow-gray.png') no-repeat right 1em center; background-size: auto 16px;} .header .menu nav .soc {width: 100%; padding-inline: 1.2rem; box-sizing: border-box; margin-top: 2rem;} .header .menu nav .soc a {width: 1.6em; padding: 0; border-bottom: none; background: none;} .header .menu nav a img {width: 100%;} .header .menu nav a img:nth-child(1) {opacity: 0.3;} .header.show .menu {right: 0; opacity: 1;} body.project .header.show .logo img:nth-child(1) {opacity: 1;} body.project .header.show .logo img:nth-child(2) {opacity: 0;} .header.show #navicon {background-position: center top 66.66%;} .header.show #navicon:hover {background-position: center top 100%;} .project .header #navicon {background-image: URL('images/navicon2.svg');} body.scroll .header #navicon {top: 1.7em;} body.scroll .header .menu {height: calc(100% - 4em); top: 4em;} body.scroll.project .header #navicon {background-image: URL('images/navicon.svg');} } @media screen and (max-width: 440px) { .header .menu nav a {width: 100%;} } .footer {margin: 1.5em 0;} .footer > .wrapper {display: block; background: var(--color2); padding: 1.5em 0; border-radius: 0.2em;} .footer .wrapper.w2 {justify-content: space-between;} .footer ul {display: flex; align-items: center; flex-wrap: wrap;} .footer ul li {display: flex; width: auto; align-items: center; flex-wrap: wrap; font-size: 0.7em; line-height: 1em; color: #666666; font-weight: 300; margin: 0 1.2em 0 0; padding: 0;} .footer ul li:before {display: none;} .footer ul li:last-child {margin-right: 0;} .footer ul li strong {font-weight: 500; color: #252525;} .footer ul li a {display: block; color: #666666; padding-left: 0.6em; margin-left: 0.6em; border: none; border-left: solid 1px rgba(0,0,0,0.3); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;} .footer ul li a:hover {color: var(--color1);} @media screen and (max-width: 1200px) { .footer {font-size: 1.4em;} .footer ul {width: 100%; justify-content: center; margin-bottom: 1.8em;} .footer ul:last-child {margin-bottom: 0; font-size: 0.8em;} .footer ul:first-child li {margin-bottom: 0.5em;} .footer ul:first-child li:first-child {width: 100%; justify-content: center; margin-bottom: 1em;} } @media screen and (max-width: 960px) { .footer {font-size: 1.1em;} } .anim {transition-delay: 2s; -ms-transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); opacity: 0; -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;} .anim.play {opacity: 1; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1);} .logos .wrapper a {display: block; width: auto; height: 5em; margin: 0.5em 1em;} .logos .wrapper a img {display: block; width: auto; height: 100%; opacity: 0.65; -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .logos .wrapper a:hover img {-webkit-filter: none; filter: none; opacity: 1;} button {background: none; border: none; outline: none; cursor: pointer; font-family: var(--font1);} .section {display: block; width: 100%; padding: 2em 0;} h2 {display: block; width: 100%; font-size: 1.8em; font-weight: 700; line-height: 1.3em; color: #252525; box-sizing: border-box; margin: -0.1em 0 0.75em;} h2 span {font-weight: 300;} h2 strong {font-weight: 700; color: var(--color1);} p, li, td {display: block; width: 100%; text-align: justify; font-size: 0.9em; line-height: 1.6em; color: #666666; font-weight: 300; box-sizing: border-box;} strong {color: #252525; font-weight: 500;} em {font-style: italic;} p a, li a {color: #252525; border-top: solid 1px transparent; border-bottom: solid 1px var(--color1); -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} p a:hover, li a:hover {color: var(--color1); border-color: transparent;} td {display: table-cell; width: auto; text-align: left; vertical-align: top; line-height: 1.4em;} li {text-align: left; line-height: 1.5em; margin-bottom: 0.5em; padding-left: 1.3em; position: relative;} li:last-child {margin-bottom: 0;} li:before {display: block; width: 0.8em; height: 1px; background: var(--color1); position: absolute; left: 0; top: 0.7em; content: "";} .cols2 {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box;} .cols2 > * {display: block; width: 46%; margin-top: 4em;} .main-aside {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;} .main-aside > * {display: block;} .main-aside > aside h2 {font-size: 1em; color: #b8b8b8; text-transform: uppercase; font-weight: 500; margin: 0 0 1em;} @media screen and (min-width: 960px) { p.cols {column-count: 2; column-gap: 5em;} .cols2 > *:nth-child(1), .cols2 > *:nth-child(2) {margin-top: 0;} .main-aside > * {width: 65%;} .main-aside > aside {width: calc(35% - 3em);} } @media screen and (max-width: 960px) { .cols2 > * {width: 100%; margin-top: 2em;} .cols2 > *:nth-child(1) {margin-top: 0;} h2 {font-size: 2em;} .main-aside > * {width: 100%; margin-bottom: 2em;} .main-aside > aside {width: 100%;} } .article {display: block; width: 100%;} .article h1 {display: block; width: 100%; font-size: 2.5em; line-height: 1.26em; color: #252525; font-weight: 700; margin: 0.5em 0 1em; overflow: hidden; position: relative; text-shadow: 0.15em 0 0 white, 0.3em 0 0 white, 0.45em 0 0 white, -0.15em 0 0 white, -0.3em 0 0 white, -0.45em 0 0 white;} .article h1:before {display: block; width: 100%; height: 1px; background: black; opacity: 0.15; position: absolute; left: 0; top: 0.63em; content: "";} .article h1 .wrapper {display: block;} .article h1 .wrapper span {display: inline-block; width: auto; padding: 0 0.4em; position: relative; left: -0.4em; z-index: 1;} .article .graybox {display: block; width: 100%; background: var(--color2); padding: 4em 0; box-sizing: border-box;} .article .img {display: block; width: 100%; position: relative; background: #252525; padding-top: 56%; border-radius: 0.2em; overflow: hidden;} .article .img span {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;} .article .img span img {display: block; width: 100%; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .article .img:hover span img {opacity: 0.85; -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);} .gallery {display: flex; width: 100%; flex-wrap: wrap; margin: 2em 0;} .gallery a {display: block; position: relative; background: #252525; border-radius: 0.2em; overflow: hidden;} .gallery a span {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;} .gallery a span img {display: block; width: 100%; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .gallery a:hover span img {opacity: 0.85; -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);} @media screen and (min-width: 768px) { .gallery a {width: calc(33.33% - 0.2em); margin: 0.3em 0.3em 0 0; padding-top: 18%;} .gallery a:nth-child(1), .gallery a:nth-child(2), .gallery a:nth-child(3) {margin-top: 0;} .gallery a:nth-child(3n+3) {margin-right: 0;} } @media screen and (max-width: 768px) { .gallery a {width: calc(50% - 0.2em); margin: 0.4em 0.4em 0 0; padding-top: 28%;} .gallery a:nth-child(1), .gallery a:nth-child(2) {margin-top: 0;} .gallery a:nth-child(even) {margin-right: 0;} } .heading-link {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;} .heading-link h2 {width: auto; padding-right: 2em;} .heading-link a {font-size: 1.6em;} .flex {display: block; width: 100%; margin-top: 1.8em;} .flex.end .wrapper {justify-content: flex-end;} .flex a {font-size: 1.2em;} aside .flex {display: flex; width: 100%; font-size: 0.8em; margin-top: 1.8em;} aside .flex.end {justify-content: flex-end;} @media screen and (min-width: 960px) { .flex {display: none;} } @media screen and (max-width: 960px) { .heading-link {justify-content: center;} .heading-link h2 {width: 100%; padding: 0;} .heading-link a {display: none;} } .pagination {display: block; width: 100%; font-size: 1.3em; margin-top: 1.5em; position: relative;} .pagination:before {display: block; width: 100%; height: 1px; background: black; opacity: 0.15; position: absolute; left: 0; top: 50%; content: "";} .pagination .wrapper {justify-content: flex-end;} .pagination a {display: flex; width: 2em; height: 2em; justify-content: center; align-items: center; font-size: 1em; font-weight: 300; color: #b8b8b8; background: white; position: relative; z-index: 1; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .pagination a:hover {color: var(--color1);} .pagination a.sel {color: var(--color1); font-weight: 500;} .margin-top {margin-top: 4em;} .padding-top-0 {padding-top: 0;} .padding-bottom-0 {padding-bottom: 0;} .link-arrow {display: inline-block !important; width: auto !important; font-size: 1em; line-height: 1em; color: #b8b8b8; text-transform: uppercase; font-weight: 300; padding-right: 1.1em; position: relative; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .link-arrow:before, .link-arrow:after {display: block; width: 0.75em; height: 0.75em; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; position: absolute; right: 0; top: 0.1em; content: ""; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .link-arrow:before {background-image: URL('images/arrow-gray.png');} .link-arrow:after {background-image: URL('images/arrow-orange.png'); opacity: 0;} .link-arrow:hover {color: var(--color1) !important;} .link-arrow:hover:before {opacity: 0;} .link-arrow:hover:after {opacity: 1;} .link-arrow.black {color: #252525;} .link-arrow.black:before {background-image: URL('images/arrow-black.png');} .top .hp-sliders {display: block; width: 100%; padding-top: 41%; box-sizing: border-box; position: relative;} .top .hp-sliders .swiper-container {display: block; background: #252525; border-radius: 0.2em;} .top .hp-sliders .swiper-slide {display: block; width: 100%; height: 100%; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .top .hp-sliders .swiper-slide span {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .top .hp-sliders .swiper-slide:after {display: block; width: 100%; height: 100%; opacity: 0.6; background: URL('images/gradient.png') repeat-x center center; background-size: auto 100%; position: absolute; left: 0; top: 0; z-index: 1; content: "";} .top .hp-sliders h1 {display: block; width: 71%; font-size: 1.8em; line-height: 1.4em; color: white; font-weight: 700; text-shadow: 0.06em 0.06em 0.1em rgba(0,0,0,0.5); position: absolute; left: 14.5%; bottom: 15%; z-index: 5;} .top .hp-sliders p {display: block; width: auto; max-width: calc(100% - 3em); font-size: 0.7em; color: white; font-weight: 500; padding-right: 1.1em; position: absolute; left: 1.5em; bottom: 1.5em; z-index: 5; opacity: 0.7; box-sizing: border-box; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .top .hp-sliders p:after {display: block; width: 0.75em; height: 0.75em; background: URL('images/arrow-white.png') no-repeat right center; background-size: 100% 100%; position: absolute; right: 0; top: 0.35em; content: "";} .top .hp-sliders a {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5;} .top .hp-sliders .s1 p {left: auto; bottom: auto; top: 1.5em; right: 1.5em;} .top .hp-sliders .s1 .swiper-slide:before {display: block; width: 100%; height: 30%; opacity: 0.6; background: URL('images/gradient2.png') repeat-x center center; background-size: auto 100%; position: absolute; left: 0; top: 0; z-index: 1; content: "";} .top .hp-sliders .swiper-container:hover .swiper-slide span {-ms-transform: scale(1.05,1.05); -webkit-transform: scale(1.05,1.05); transform: scale(1.05,1.05);} .top .hp-sliders .swiper-container:hover p {opacity: 1;} .top .hp-sliders .s1 .swiper-slide.sl1 span {background-image: URL("images/portfolio/projekt1.jpg");} .top .hp-sliders .s1 .swiper-slide.sl2 span {background-image: URL("images/portfolio/projekt2.jpg");} .top .hp-sliders .s2 .swiper-slide.sl1 span {background-image: URL("images/portfolio/projekt2.jpg");} .top .hp-sliders .s2 .swiper-slide.sl2 span {background-image: URL("images/portfolio/projekt3.jpg");} .top .hp-sliders .s3 .swiper-slide.sl1 span {background-image: URL("images/portfolio/projekt3.jpg");} .top .hp-sliders .s3 .swiper-slide.sl2 span {background-image: URL("images/portfolio/projekt1.jpg");} .top .hp-sliders .s4 .swiper-slide.sl1 span {background-image: URL("images/portfolio/projekt1.jpg");} .top .hp-sliders .s4 .swiper-slide.sl2 span {background-image: URL("images/portfolio/projekt2.jpg");} @media screen and (max-width: 1200px) { .top .hp-sliders {padding-top: 46%;} } @media screen and (min-width: 960px) { .top .hp-sliders .swiper-container {position: absolute;} .top .hp-sliders .s1 {width: calc(50% - 0.2em); height: 100%; left: 0; top: 0;} .top .hp-sliders .s2 {width: calc(50% - 0.2em); height: calc(50% - 0.2em); right: 0; top: 0;} .top .hp-sliders .s3 {width: calc(25% - 0.3em); height: calc(50% - 0.2em); right: calc(25% + 0.1em); bottom: 0;} .top .hp-sliders .s4 {width: calc(25% - 0.3em); height: calc(50% - 0.2em); right: 0; bottom: 0;} } @media screen and (max-width: 960px) { .top .hp-sliders {display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 0;} .top .hp-sliders .s1 {width: 100%; height: 30em; margin-bottom: 0.4em;} .top .hp-sliders .s2 {width: 100%; height: 18em; margin-bottom: 0.4em;} .top .hp-sliders .s3, .top .hp-sliders .s4 {width: calc(50% - 0.3em); height: 10em;} .top .hp-sliders h1 {width: 70%; font-size: 1.8em; left: 10%; bottom: 12%;} } @media screen and (max-width: 640px) { .top .hp-sliders a {font-size: 0.8em;} .top .hp-sliders h1 {width: 80%;} } .trusted {display: flex; width: 100%; flex-wrap: wrap; gap: 1.5em min(3em, calc(0.5em + 4vw));} .trusted > div {display: flex; align-items: center; padding: 0.7em 0 0.85em 1em; box-sizing: border-box; position: relative;} .trusted > div:before {display: block; width: 2.5em; height: 100%; border: solid 0.08em var(--color1); border-right: none; box-sizing: border-box; position: absolute; left: 0; top: 0; content: "";} .trusted > div > div {display: block; position: relative;} .trusted > div > div .num {display: block; font-size: 1.3em; font-weight: 700; color: var(--color1);} .trusted > div > div strong {display: block; font-size: 0.65em; font-weight: 700; color: var(--color0); line-height: 1.3em; margin-top: -0.3em;} .trusted > div > div:not(:first-child) {padding-left: 3rem;} .trusted > div > div:not(:first-child):before {display: flex; width: 3rem; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; font-size: 1.2em; color: var(--color0); content: "&";} @media screen and (min-width: 1081px) { .trusted > div > div .num {font-size: 1.4em;} .trusted > div > div strong {font-size: 0.75em;} } .hp-reviews {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; --article-padding: min(2.2em, calc(1em + 5vw));} .hp-reviews article {display: flex; width: 100%; flex-direction: column; justify-content: space-between; flex-wrap: wrap; gap: 1em; padding: var(--article-padding); padding-left: calc(3 * var(--article-padding)); box-sizing: border-box; position: relative; background: var(--color2);} .hp-reviews article:before {display: block; width: var(--article-padding); height: var(--article-padding); position: absolute; left: var(--article-padding); top: var(--article-padding); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M477.7,0C496.6,0,512,15.4,512,34.2v179.9c0,118.1-96.5,214.1-215.1,214.1c-12.1,0-21.9-9.8-21.9-21.9 c0-12.1,9.8-21.9,21.9-21.9c94.4,0,171.2-76.4,171.2-170.2V43.9H318.8v148.3h98.8c12.1,0,21.9,9.8,21.9,21.9 c0,12.1-9.8,21.9-21.9,21.9H309.2c-18.9,0-34.3-15.4-34.3-34.3V34.2C275,15.4,290.3,0,309.2,0H477.7 M202.8,0H34.3 C15.4,0,0,15.4,0,34.2v167.5C0,220.7,15.4,236,34.3,236h108.5c12.1,0,21.9-9.8,21.9-21.9c0-12.1-9.8-21.9-21.9-21.9H43.9V43.9h149.3 v170.2c0,93.9-76.8,170.2-171.2,170.2C9.8,384.3,0,394.2,0,406.3c0,12.1,9.8,21.9,21.9,21.9c118.6,0,215.1-96,215.1-214.1V34.2 C237,15.4,221.7,0,202.8,0' width='1' height='1' fill='rgb(239,121,12)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center top; background-size: contain; content: "";} .hp-reviews article p {font-size: 0.8em; font-style: italic; margin-top: -0.35em;} .hp-reviews article .author {display: block; width: 100%; padding-left: 2.5em; box-sizing: border-box; position: relative;} .hp-reviews article .author .img {display: block; width: 1.8em; height: 1.8em; border-radius: 100%; overflow: hidden; border: solid 1px rgba(0,0,0,0.1); position: absolute; left: 0; top: 0;} .hp-reviews article .author .img img {display: block; width: 100%; height: 100%; object-fit: cover;} .hp-reviews article .author span {display: block; font-size: 0.65em;} .hp-reviews article .author span strong {display: block; font-size: 1.2em; font-weight: 700; margin-top: -0.2em;} @media screen and (min-width: 961px) { .hp-reviews article {width: calc(50% - 0.4rem);} } .patero {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--patero-gap); --patero-gap: min(2em, calc(0.5em + 4vw)); counter-reset: article;} .patero article {display: block; counter-increment: article;} .patero article h3 {font-size: 1.25em; font-weight: 700; padding-left: 1.8em; box-sizing: border-box; position: relative; margin-block: 0.3em 0.2em;} .patero article h3:before {display: block; width: 1.8em; text-align: center; padding-left: 0.1em; box-sizing: border-box; position: absolute; left: 0; top: 0; content: counter(article);} .patero article h3:after {display: block; width: 1.8em; height: 1.4em; position: absolute; left: 0; top: -0.4em; border: solid 0.08em var(--color1); border-right: none; border-bottom: none; content: "";} @media screen and (min-width: 1081px) { .patero > article:nth-child(-n+2) {width: calc(50% - 0.5 * var(--patero-gap));} .patero > article:nth-child(n+3) {width: calc(33.33% - 2 / 3 * var(--patero-gap));} } .hp-img {display: block; width: 100%;} /* .infographic {display: flex; flex-wrap: wrap; font-size: 1.1em;} .infographic p {text-align: left; color: #252525; line-height: 1.2em;} .infographic p strong {display: inline-block; width: 1.8em; font-weight: 700;} @media screen and (min-width: 1200px) { .infographic p {width: calc(50% - 0.5em); margin: 1em 1em 0 0;} .infographic p:nth-child(1), .infographic p:nth-child(2) {margin-top: 0;} .infographic p:nth-child(even) {margin-right: 0;} } @media screen and (min-width: 960px) and (max-width: 1200px){ .infographic p {width: 100%; margin: 0.7em 0 0 0;} .infographic p:nth-child(1) {margin-top: 0;} } @media screen and (min-width: 540px) and (max-width: 960px){ .infographic p {width: calc(50% - 0.5em); margin: 1em 1em 0 0;} .infographic p:nth-child(1), .infographic p:nth-child(2) {margin-top: 0;} .infographic p:nth-child(even) {margin-right: 0;} } @media screen and (max-width: 540px) { .infographic p {width: 100%; margin: 0.6em 0 0 0;} .infographic p:nth-child(1) {margin-top: 0;} } .concrete > .wrapper {background: URL('images/projekty-statiky.jpg') no-repeat center center; background-size: cover; padding: 6em 0; border-radius: 0.2em;} .concrete .cols2 {align-items: center;} .concrete img {display: block; width: 55%; margin-left: 10%;} .concrete p {color: white; text-shadow: 0.06em 0.06em 0.1em rgba(0,0,0,0.5);} @media screen and (max-width: 960px) { .concrete > .wrapper {background: URL('images/projekty-statiky2.jpg') no-repeat center top; background-size: 100% auto; padding: 0;} .concrete .cols2 {padding: 72% 6% 10%;} .concrete img {width: 52%; margin: 0; position: absolute; left: 24%; top: 22%;} } */ .grid-articles .wrapper .articles {display: flex; width: 100%; flex-wrap: wrap;} .grid-articles .articles > div {display: flex; flex-wrap: wrap; background: var(--color2); padding: 3em 3.5em 3.5em; border-left: solid 4px rgba(0,0,0,0.1); border-radius: 0.2em; box-sizing: border-box; position: relative; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .grid-articles .articles > div h2, .grid-articles .articles > div h3 {display: block; width: 100%; font-size: 1.2em; line-height: 1.3em; color: #252525; font-weight: 700; margin: 0 0 0.5em; position: relative; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .grid-articles .articles > div .date {display: block; width: 10em; font-size: 0.8em; font-weight: 700; color: #252525; text-align: right; position: absolute; right: calc(100% - 1em); top: 1.4em; transform: rotate(-90deg); transform-origin: top right;} .grid-articles .articles > div p {display: block; width: 100%; font-size: 0.9em; text-align: left; color: #666666; font-weight: 300;} .grid-articles .articles > div .tag {font-size: 0.7em; font-weight: 400; color: var(--color1); margin-top: 0.8em; position: relative; z-index: 2; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .grid-articles .articles > div .tag:hover {color: #252552;} .grid-articles .articles > div .link-arrow {font-size: 0.8em; font-weight: 500; position: absolute; right: 2.5em; bottom: 2.3em;} .grid-articles .articles > div a:last-of-type {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;} .grid-articles .articles > div:hover {background: rgba(0,0,0,0.07); border-color: var(--color1);} .grid-articles .articles > div:hover h2, .grid-articles .articles > div:hover h3, .grid-articles .articles > div:hover .link-arrow{color: var(--color1);} .grid-articles .articles > div:hover .link-arrow:before {opacity: 0;} .grid-articles .articles > div:hover .link-arrow:after {opacity: 1;} @media screen and (min-width: 768px) and (max-width: 960px){ .grid-articles .articles > div {font-size: 0.85em;} } @media screen and (min-width: 768px) { .grid-articles .articles > div {width: calc(50% - 0.4em); margin: 1.5em 0.8em 0 0;} .grid-articles .articles > div:nth-child(1), .grid-articles .articles > div:nth-child(2) {margin-top: 0;} .grid-articles .articles > div:nth-child(even){margin-right: 0;} } @media screen and (max-width: 768px) { .grid-articles .articles > div {width: 100%; margin: 0.5em 0 0;} .grid-articles .articles > div:nth-child(1) {margin-top: 0; height: 25vh;} } .grid-articles.jobs .articles > div {padding-left: 5.5em;} .grid-articles.jobs .articles > div h2:before, .grid-articles.jobs .articles > div h3:before {display: block; width: 1.3em; height: 1.3em; background: URL('images/icon-job.png') no-repeat center center; background-size: cover; position: absolute; left: -1.7em; top: -0.1em; content: "";} .filters {display: block; width: 100%; margin-bottom: 2em;} .filters .wrapper {display: flex; justify-content: flex-start; align-items: center;} .filters a {display: flex; width: auto; height: 2em; justify-content: center; align-items: center; font-size: 1em; font-weight: 300; color: #b8b8b8; background: white; margin-right: 1.4em; position: relative; z-index: 1; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .filters a:hover {color: var(--color1);} .filters a.sel {color: var(--color1); font-weight: 500;} aside .articles > div {display: flex; width: 100%; flex-wrap: wrap; background: var(--color2); padding: 2em 2em 3em; position: relative; box-sizing: border-box; margin-bottom: 5px; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} aside .articles > div h3 {font-size: 0.9em; font-weight: 700; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} aside .articles > div p {font-size: 0.75em; text-align: left; margin: 0.5em 0 0;} aside .articles > div .date {order: 1; font-weight: 500;} aside .articles > div .link-arrow {font-size: 0.7em; font-weight: 500; color: #666666; position: absolute; right: 2em; bottom: 2em; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} aside .articles > div a {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;} aside .articles > div:hover {background: rgba(0,0,0,0.07);} aside .articles > div:hover h3, aside .articles > div:hover .link-arrow {color: var(--color1);} aside .articles > div:hover .link-arrow:before {opacity: 0;} aside .articles > div:hover .link-arrow:after {opacity: 1;} .job-offer .graybox p {text-align: left;} .job-offer .graybox .cols2 {align-items: center;} .job-offer .graybox .cols2 > *:first-child p {padding-left: 3em; position: relative;} .job-offer .graybox .cols2 > *:first-child p:before {display: block; width: 2.2em; height: 2.2em; background: URL('images/icon-job.png') no-repeat center center; background-size: cover; position: absolute; left: 0; top: 0.5em; content: "";} .job-offer .graybox .cols2 > *:first-child p strong {display: block; font-size: 1.2em; line-height: 1em;} .portfolio .wrapper .projects {display: flex; width: 100%; flex-wrap: wrap;} .portfolio .wrapper .projects {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap;} .portfolio .projects > div {display: flex; flex-wrap: wrap; position: relative;} .portfolio .projects > div .img {display: block; width: 100%; position: relative; background: #252525; padding-top: 56%; border-radius: 0.2em; overflow: hidden; order: 0;} .portfolio .projects > div .img span {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;} .portfolio .projects > div .img span img {display: block; width: 100%; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .portfolio .projects > div h2, .portfolio .projects > div h3 {display: block; width: 100%; font-size: 1em; line-height: 1.3em; color: #252525; font-weight: 700; margin: 0.8em 0 0.1em; padding: 0 5%; box-sizing: border-box; order: 1; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .portfolio .projects > div p {display: block; width: 100%; font-size: 0.65em; color: #666666; font-weight: 500; text-transform: uppercase; padding: 0 5%; box-sizing: border-box; order: 2;} .portfolio .projects > div a {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;} .portfolio .projects > div:hover .img span img {opacity: 0.85; -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);} .portfolio .projects > div:hover h2, .portfolio .projects > div:hover h3 {color: var(--color1);} @media screen and (min-width: 960px) { .portfolio .projects > div {width: calc(33.33% - 0.4em); margin: 1.5em 0.6em 0 0;} .portfolio .projects > div:nth-child(1), .portfolio .projects > div:nth-child(2), .portfolio .projects > div:nth-child(3) {margin-top: 0;} .portfolio .projects > div:nth-child(3n+3) {margin-right: 0;} } @media screen and (min-width: 480px) and (max-width: 960px){ .portfolio .projects > div {width: calc(50% - 0.4em); margin: 1.5em 0.8em 0 0;} .portfolio .projects > div:nth-child(1), .portfolio .projects > div:nth-child(2) {margin-top: 0;} .portfolio .projects > div:nth-child(even) {margin-right: 0;} } @media screen and (max-width: 480px) { .portfolio .projects > div {width: 100%; margin: 1.5em 0 0;} .portfolio .projects > div:nth-child(1) {margin-top: 0;} } .filters a.sel {color: var(--color0); font-weight: 500;} .filters a.stavby-pro-bydleni:hover, .filters a.stavby-pro-bydleni.sel {color: #cde626;} .filters a.obcanske-stavby:hover, .filters a.obcanske-stavby.sel {color: #91d9ff;} .filters a.prumyslove-stavby:hover, .filters a.prumyslove-stavby.sel {color: #f27886;} .filters a.pruzkumy-staveb:hover, .filters a.pruzkumy-staveb.sel {color: #d8a6ff;} .filters a.ostatni:hover, .filters a.ostatni.sel {color: var(--color0);} .portfolio .projects > div .img {display: block; width: 100%; position: relative; background: #252525; padding-top: 56%; border-radius: 0.2em; position: relative; overflow: hidden; order: 0;} .portfolio .projects > div .img .inner {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;} .portfolio .projects > div .img .inner img {display: block; width: 100%; transition: .35s ease-in-out;} .portfolio .projects > div .img .tag {display: block; width: auto; height: auto; font-size: 0.6em; text-transform: uppercase; color: black; padding: 0.4em 1em 0.5em; border-radius: 2px 2px 0 0; box-sizing: border-box; position: absolute; inset: auto; left: 5%; bottom: 0;} .portfolio .projects > div.stavby-pro-bydleni .img .tag {background: #cde626;} .portfolio .projects > div.obcanske-stavby .img .tag {background: #91d9ff;} .portfolio .projects > div.prumyslove-stavby .img .tag {background: #f27886;} .portfolio .projects > div.pruzkumy-staveb .img .tag {background: #d8a6ff;} .portfolio .projects > div.ostatni .img .tag {background: #e7e7e7;} .hp-sliders .swiper-container.awarded:after, .portfolio .projects > div.awarded .img:after {display: block; width: 10em; height: 10em; background: URL('images/awarded.svg') no-repeat center bottom; background-size: 100% auto; position: absolute; left: -6em; top: -6em; transform: rotate(-45deg); content: ""; z-index:1; } .project {padding-top: 0;} .project .img {display: block; width: 100%; padding-top: 48%; height: 100vh; min-height: 500px; margin-bottom: 4em; box-sizing: border-box; position: relative;} .project .img .swiper-container {display: block; width: 100%; height: 100%; background: #252525; position: absolute; left: 0; top: 0;} .project .img .swiper-container:before {display: block; width: 100%; height: 15em; opacity: 0.6; background: URL('images/gradient2.png') repeat-x center center; background-size: auto 100%; position: absolute; left: 0; top: 0; z-index: 2; content: "";} .project .img .swiper-container:after {display: block; width: 100%; height: 100%; opacity: 0.6; background: URL('images/gradient.png') repeat-x center center; background-size: auto 100%; position: absolute; left: 0; top: 0; z-index: 1; content: "";} .project .img .swiper-slide {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .project .img .info {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5;} .project .img .info > .wrapper {display: flex; height: 100%; justify-content: flex-start; align-items: flex-end; align-content: flex-end; flex-wrap: wrap; padding: 4em 0;} .project .img .info > .wrapper .wrapper {justify-content: flex-start; position: relative;} .project .img .info h1 {width: auto; max-width: 70%; font-size: 2.3em; line-height: 1.3em; font-weight: 700; color: white;} .project .img .info h1 span {display: inline-block; position: relative;} .project .img .info h1 span:before, .project .img .info h1 span:after {display: block; width: 10000px; height: 1px; background: white; position: absolute; top: 50%; content: "";} .project .img .info h1 span:before {right: calc(100% + 0.5em);} .project .img .info h1 span:after {left: calc(100% + 0.5em);} .project .img .info .tag {display: inline-block; width: auto; font-size: 0.7em; line-height: 1.2em; padding: 0.4em 0.6em; color: #252525; font-weight: 700; text-transform: uppercase; background: white; position: absolute; right: 0; top: calc(50% - 0.9em);} .project .swiper-slide.sl1 {background-image: URL("images/portfolio/projekt1.jpg");} .project .swiper-slide.sl2 {background-image: URL("images/portfolio/projekt2.jpg");} .project table {width: 100%; background: var(--color2); padding: 1.7em; box-sizing: border-box;} .project table td {padding: 0.2em 1em 0.2em 0;} .project table td:last-child {padding-right: 0;} .project .gallery {margin-top: 4em;} .project .video {margin-top: 4em;} .project .video .wrapper {padding-top: 45%; box-sizing: border-box;} .project .video .wrapper iframe {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;} @media screen and (max-width: 960px) { .project .img .info h1 {max-width: 100%;} .project .img .info .tag {font-size: 0.8em; padding: 0.4em 0.6em;position: relative; right: auto; top: auto; margin-top: 1.2em;} } .blog-detail h1 {font-size: 2.2em;} .blog-detail h1 .wrapper span {max-width: calc(100% - 5em);} .blog-detail .article > .date {width: auto; font-weight: 500; padding: 0.7em; background: white; position: absolute; right: 5em; top: -0.05em;} @media screen and (max-width: 960px) { .blog-detail h1 .wrapper span {max-width: 100%;} .blog-detail .article > .date {padding: 0; font-weight: 300; position: relative; left: 7%; right: auto; top: auto; margin: -2em 0 2em;} } @media screen and (max-width: 540px) { .blog-detail h1 {font-size: 1.8em;} .blog-detail .article > .date {margin: -1.5em 0 1.5em;} } .sliders {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin: 4em 0; position: relative;} .sliders .swiper-container {display: block; width: calc(50% - 0.2em); height: 100%; background: #252525; border-radius: 0.2em; position: absolute;} .sliders .swiper-slide {display: block; width: 100%; height: 100%; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .sliders .swiper-slide span {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .sliders .swiper-slide:after {display: block; width: 100%; height: 100%; opacity: 0.6; background: URL('images/gradient.png') repeat-x center center; background-size: auto 100%; position: absolute; left: 0; top: 0; z-index: 1; content: "";} .sliders p {display: block; width: auto; max-width: calc(100% - 3em); font-size: 0.7em; color: white; font-weight: 500; padding-right: 1.1em; position: absolute; left: 1.5em; bottom: 1.5em; z-index: 5; opacity: 0.7; box-sizing: border-box; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .sliders p:after {display: block; width: 0.75em; height: 0.75em; background: URL('images/arrow-white.png') no-repeat right center; background-size: 100% 100%; position: absolute; right: 0; top: 0.35em; content: "";} .sliders a {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5;} .sliders .swiper-container:hover .swiper-slide span {-ms-transform: scale(1.05,1.05); -webkit-transform: scale(1.05,1.05); transform: scale(1.05,1.05);} .sliders .swiper-container:hover p {opacity: 1;} .sliders .s1 .swiper-slide.sl1 span {background-image: URL("images/portfolio/projekt1.jpg");} .sliders .s1 .swiper-slide.sl2 span {background-image: URL("images/portfolio/projekt2.jpg");} .sliders .s2 .swiper-slide.sl1 span {background-image: URL("images/portfolio/projekt2.jpg");} .sliders .s2 .swiper-slide.sl2 span {background-image: URL("images/portfolio/projekt3.jpg");} .sliders .s3 .swiper-slide.sl1 span {background-image: URL("images/portfolio/projekt3.jpg");} .sliders .s3 .swiper-slide.sl2 span {background-image: URL("images/portfolio/projekt1.jpg");} .sliders .s4 .swiper-slide.sl1 span {background-image: URL("images/portfolio/projekt1.jpg");} .sliders .s4 .swiper-slide.sl2 span {background-image: URL("images/portfolio/projekt2.jpg");} @media screen and (min-width: 768px) { .sliders {padding-top: 30%;} .sliders .swiper-container {top: 0;} .sliders .swiper-container:nth-of-type(1) {left: 0;} .sliders .swiper-container:nth-of-type(2) {right: 0;} } @media screen and (max-width: 768px) { .sliders {padding-top: 100%;} .sliders .swiper-container {width: 100%; height: calc(50% - 0.1em); left: 0;} .sliders .swiper-container:nth-of-type(1) {top: 0;} .sliders .swiper-container:nth-of-type(2) {top: calc(50% + 0.1em);} } .contact-cols {display: flex; width: 100%; justify-content: space-between; gap: 1.5rem;} .contact-cols > * {display: block;} .contact-cols .contacts-soc {flex-direction: column;} @media screen and (min-width: 1081px) { .contact-cols > *:first-child {width: calc(100% - 14rem);} .contact-cols .contacts-soc {margin-top: 2.3rem;} } @media screen and (max-width: 1080px) { .contact-cols {flex-wrap: wrap;} .contact-cols .contacts-soc {margin-top: .6rem;} .contact-cols > *:last-child {width: 100%;} } @media screen and (min-width: 441px) and (max-width: 1080px){ .contact-cols .contacts-soc {flex-direction: row;} } @media screen and (max-width: 440px) { .contact-cols > *:first-child {width: 14rem;} } .contacts-soc {display: flex; gap: 0.45em;} .contacts-soc a {display: block; position: relative;} .contacts-soc a span {display: block; width: 1.3em; height: 1.3em; margin-top: -0.1em; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .contacts-soc a span:nth-child(1) {opacity: 0.5;} .contacts-soc a span:nth-child(2) {opacity: 0; position: absolute; left: 0; top: 0;} .contacts-soc a.in span:nth-child(1) {background-image: URL('images/icon-in1.png');} .contacts-soc a.in span:nth-child(2) {background-image: URL('images/icon-in2.png');} .contacts-soc a.fb span:nth-child(1) {background-image: URL('images/icon-fb1.png');} .contacts-soc a.fb span:nth-child(2) {background-image: URL('images/icon-fb2.png');} .contacts-soc a.ig span:nth-child(1) {background-image: URL('images/icon-ig1.png');} .contacts-soc a.ig span:nth-child(2) {background-image: URL('images/icon-ig2.png');} .contacts-soc a:hover span:nth-child(1) {opacity: 0;} .contacts-soc a:hover span:nth-child(2) {opacity: 1;} .contacts p:nth-of-type(2n+1) {margin-top: 0.75em;} .contacts p:nth-of-type(1) {margin-top: 0;} .contacts2 .graybox {padding: 2.3rem;} .contacts2 p {margin-bottom: 0.5em; text-align: left; font-weight: 300; line-height: 1.5em;} .contacts2 p:last-child {margin-bottom: 0;} .contacts2 .small {font-size: 0.7em;} .contacts > div:not(:first-child) {margin-top: 1em;} .contacts > div {display: flex; align-items:center; gap:1em;} .contacts > div img {display: block; width: 3em; height: 3em; border-radius:100%; overflow: hidden; box-shadow: 0 0 0.25em rgba(0,0,0,0.15);} .contacts > div p {width: auto;} .contacts > div p strong {display: block;} .form {display: block; width: 100%; margin-top: 4em;} .form > div {display: flex; width: 100%; flex-wrap: wrap; position: relative; background: rgba(0,0,0,0.05); border: solid 1px rgba(0,0,0,0.05);} .form > div > div {display: block; padding: 1em 2em; box-sizing: border-box;} .form > div > div:nth-of-type(1) {width: 30%; border-right: solid 1px rgba(0,0,0,0.1);} .form > div > div:nth-of-type(2) {width: 70%;} .form > div > div input, .form > div > div textarea {display: block; width: 100%; font-size: 1em; font-weight: 400; color: black; padding: 1.5em 0; background: none; border: none; outline: none; box-sizing: border-box; font-family: var(--font1); -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;} .form > div > div input {border-bottom: solid 1px rgba(0,0,0,0.1);} .form > div > div textarea {height: calc(100% - 5em); padding: 0; margin-top: 1.5em;} .form > div > div input::placeholder {color: #666666; font-weight: 300;} .form > div > div input:-ms-input-placeholder {color: #666666; font-weight: 300;} .form > div > div input::-ms-input-placeholder {color: #666666; font-weight: 300;} .form > div > div textarea::placeholder {color: #666666; font-weight: 300;} .form > div > div textarea:-ms-input-placeholder {color: #666666; font-weight: 300;} .form > div > div textarea::-ms-input-placeholder {color: #666666; font-weight: 300;} .form > div > div.send {display: flex; width: 70%; justify-content: flex-end; align-items: center; flex-wrap: nowrap; position: absolute; right: 0; bottom: 0; padding: 2em; box-sizing: border-box;} .form > div > div.send .link-arrow {font-weight: 500;} .form > div > div.send button:hover {;} @media screen and (min-width: 1080px) { .form .inputs > div:last-of-type input {border-bottom: none;} } @media screen and (max-width: 1080px) { .form > div > div {display: flex; flex-wrap: wrap; padding: 1em;} .form > div > div:nth-of-type(1) {width: 100%; border-bottom: solid 1px rgba(0,0,0,0.1); border-right: none;} .form > div > div:nth-of-type(2) {width: 100%;} .form > div > div > div {width: 33.33%; border-right: solid 1px rgba(0,0,0,0.1); box-sizing: border-box;} .form > div > div > div:last-of-type {border: none;} .form > div > div input, .form > div > div textarea {padding: 0.5em 1em;} .form > div > div input {border-bottom: none;} .form > div > div textarea {height: 10em; padding-top: 0; padding-bottom: 0; margin-top: 1em;} .form > div > div.send {width: 100%; position: relative; bottom: auto; right: auto;} } @media screen and (max-width: 640px) { .form > div > div:nth-of-type(1) {border: none;} .form > div > div > div {width: 100%; border-right: none;} .form > div > div > div input {border-bottom: solid 1px rgba(0,0,0,0.1); padding: 1em;} .form > div > div textarea {margin-top: 0;} } .map {display: block; width: 100%; height: 500px; margin-top: 4em;}